new gold dust theme + graph theme configurations

Author: hristoiankov

docs/src/app.component.html

@@ -51,6 +51,7 @@ <h3 class="font-semibold text-lg text-gray-800 dark:text-slate-200 mb-2">On this
                 <option value="light">Long Light</option>
                 <option value="dark">Long Dark</option>
                 <option value="cosmic-dark">Cosmic Dark</option>
+                <option value="gold-dust">Gold Dust</option>
               </select>
             </div>
             <long-spreadsheet [data]="initialData" [columnConfig]="columnConfig" [theme]="spreadsheetTheme()"

docs/src/app.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, signal, inject, Renderer2, computed
 import { DOCUMENT } from '@angular/common';
 import { SpreadsheetComponent } from '@longtable/angular-spreadsheet';
 import { Cell, ColumnConfig, DropdownOption, SpreadsheetTheme } from '@longtable/angular-spreadsheet';
-import { longLight, longDark, cosmicDark } from '@longtable/angular-spreadsheet';
+import { longLight, longDark, cosmicDark, goldDust } from '@longtable/angular-spreadsheet';
 import { SafeHtmlPipe } from './safe-html.pipe';
 
 declare var marked: { parse: (markdown: string) => string };
@@ -53,14 +53,15 @@ export class AppComponent implements OnInit {
     ]
   );
 
-  selectedSpreadsheetThemeName = signal<'light' | 'dark' | 'cosmic-dark'>('dark');
+  selectedSpreadsheetThemeName = signal<'light' | 'dark' | 'cosmic-dark' | 'gold-dust'>('dark');
 
-  spreadsheetTheme = computed<SpreadsheetTheme | null>(() => {
+  spreadsheetTheme = computed<SpreadsheetTheme>(() => {
     switch (this.selectedSpreadsheetThemeName()) {
       case 'light': return longLight;
       case 'dark': return longDark;
       case 'cosmic-dark': return cosmicDark;
-      default: return null;
+      case 'gold-dust': return goldDust;
+      default: return longDark;
     }
   });
 
@@ -74,7 +75,7 @@ export class AppComponent implements OnInit {
 
     effect(() => {
       const themeName = this.selectedSpreadsheetThemeName();
-      if (themeName === 'dark' || themeName === 'cosmic-dark') {
+      if (themeName === 'dark' || themeName === 'cosmic-dark' || themeName === 'gold-dust') {
         this.renderer.addClass(this.document.documentElement, 'dark');
       } else {
         this.renderer.removeClass(this.document.documentElement, 'dark');
@@ -111,7 +112,7 @@ export class AppComponent implements OnInit {
   }
 
   onThemeChange(event: Event) {
-    const value = (event.target as HTMLSelectElement).value as 'light' | 'dark' | 'cosmic-dark';
+    const value = (event.target as HTMLSelectElement).value as 'light' | 'dark' | 'cosmic-dark' | 'gold-dust';
     this.selectedSpreadsheetThemeName.set(value);
   }
 

longtable/src/lib/components/correlation-analysis/correlation-analysis.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, input, effect, viewChild, ElementRef, ChangeDetectorRef, inject, WritableSignal, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Cell, AnalysisType, AnalysisOption, DropdownOption, SavedDistributionAnalysisState, ColumnConfig } from '../../models/spreadsheet.model';
+import { Cell, AnalysisType, AnalysisOption, DropdownOption, SavedDistributionAnalysisState, ColumnConfig, SpreadsheetTheme } from '../../models/spreadsheet.model';
 import {
   select,
   max,
@@ -38,6 +38,7 @@ export class DistributionAnalysisComponent {
   initialAnalysisField = input<number | null>(null);
   state = input.required<WritableSignal<SavedDistributionAnalysisState>>();
   columnConfig = input.required<ColumnConfig[]>();
+  theme = input.required<SpreadsheetTheme>();
 
   private chartContainer = viewChild<ElementRef<HTMLDivElement>>('distributionChartContainer');
   private tooltip = viewChild<ElementRef<HTMLDivElement>>('statsTooltip');
@@ -299,7 +300,7 @@ export class DistributionAnalysisComponent {
     if (data.length === 0) return;
 
     const isDark = document.documentElement.classList.contains('dark');
-    const textColor = isDark ? '#94a3b8' : '#64748b'; // More visible
+    const textColor = this.theme().colors.graphSecondary;
     const barStep = 25;
     const margin = { top: 5, right: 20, bottom: 60, left: 120 };
     const height = data.length * barStep;
@@ -359,7 +360,7 @@ export class DistributionAnalysisComponent {
 
     svg.selectAll('.bar').data(data).enter().append('rect')
       .attr('class', 'bar').attr('x', x(0)).attr('y', d => y(d.key)!)
-      .attr('width', d => x(d.value) - x(0)).attr('height', y.bandwidth()).attr('fill', '#3b82f6')
+      .attr('width', d => x(d.value) - x(0)).attr('height', y.bandwidth()).attr('fill', this.theme().colors.graphPrimary)
       .on('mouseover', (event, d) => {
         select(event.currentTarget).style('opacity', '0.85');
         tooltip.style('opacity', '1').html(`<strong>${d.key}</strong><br/>Count: ${d.value}`);
@@ -393,7 +394,7 @@ export class DistributionAnalysisComponent {
     const series = stack().keys(stackKeys)(data as any);
 
     const isDark = document.documentElement.classList.contains('dark');
-    const textColor = isDark ? '#94a3b8' : '#64748b'; // More visible
+    const textColor = this.theme().colors.graphSecondary;
     const barStep = 30;
     const margin = { top: 5, right: 120, bottom: 60, left: 120 };
     const height = data.length * barStep;
@@ -502,8 +503,7 @@ export class DistributionAnalysisComponent {
   }
 
   private _renderGradientLegend(svg: Selection<SVGGElement, unknown, null, undefined>, colorScale: ScaleSequentialType<string>, legendX: number, legendY: number, height: number, title: string) {
-    const isDark = document.documentElement.classList.contains('dark');
-    const textColor = isDark ? '#94a3b8' : '#64748b';
+    const textColor = this.theme().colors.graphSecondary;
     const [min, max] = colorScale.domain();
     if (min === undefined || max === undefined) return;
     const legendId = `legend-gradient-${Math.random().toString(36).substring(2, 9)}`;