cats4u-charts 0.0.1

package/projects/charts-lib/src/lib/component/bar-chart/bar-chart.ts

@@ -0,0 +1,301 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ViewChild,
+  ElementRef,
+  inject,
+  effect,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as echarts from 'echarts';
+import { Subject } from 'rxjs';
+import { ChartService } from '../../services/chart.service';
+import type { EChartsOption } from 'echarts';
+import { OptionsConfig } from '../../modal/charts-lib.modal';
+import '../../themes/default';
+import '../../themes/vintage';
+import '../../themes/dark';
+import '../../themes/essos';
+import '../../themes/chalk';
+import '../../themes/roma';
+
+@Component({
+  selector: 'lib-bar-chart',
+  imports: [CommonModule],
+  templateUrl: './bar-chart.html',
+  styleUrl: './bar-chart.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BarChart implements OnInit, OnDestroy {
+  @Input() title: string = '';
+  @Input() height = '600px';
+  @Input() enableSampling = true; // Sample data if > threshold for perf
+  @Input() sampleThreshold = 10000; // Sample if data > 10k (keep full for 50k if hardware allows)
+  @Input() isLoading: boolean = true;
+  private defaultConfig: OptionsConfig = new OptionsConfig();
+  private optionsConfig: OptionsConfig = {};
+
+  @ViewChild('barChartContainer', { static: false }) chartContainer!: ElementRef<HTMLDivElement>;
+
+  private chartInstance: echarts.ECharts | null = null;
+  private chartService = inject(ChartService);
+
+  private destroy$ = new Subject<void>();
+  private currentData: any[][] = [];
+  private currentColumns: string[] = [];
+
+  private boundHandleContextMenu: (event: MouseEvent) => void;
+
+  constructor(private cdr: ChangeDetectorRef) {
+    this.boundHandleContextMenu = this.handleContextMenu.bind(this);
+    // Effect for theme changes
+    effect(() => {
+      this.chartService.theme(); // Read signal
+      if (this.chartInstance) {
+        this.reinitializeChart();
+      }
+    });
+    // Effect for data changes
+    effect(() => {
+      const data = this.chartService.data(); // Read signal
+      const columns = this.chartService.columns();
+      this.currentColumns = columns;
+      this.currentData = data;
+      this.processAndUpdateData();
+    });
+    // Effect for chartOptionsConfig changes
+    effect(() => {
+      this.chartService.chartOptionsConfig();
+      this.optionsConfig = this.chartService.chartOptionsConfig();
+      this.reinitializeChart();
+    });
+  }
+
+  ngOnInit(): void {
+    if (this.currentData.length > 0) {
+      this.processAndUpdateData();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.initializeChart();
+    if (this.currentData.length > 0) {
+      this.updateChartWithData();
+    }
+    this.isLoading = false;
+    this.cdr.markForCheck();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+    this.chartService.hideContextMenu();
+    this.disposeChart();
+    if (this.chartInstance) {
+      this.chartInstance.dispose(); // Clean up to free memory
+    }
+    if (this.chartContainer) {
+      this.chartContainer.nativeElement.removeEventListener(
+        'contextmenu',
+        this.boundHandleContextMenu
+      );
+    }
+    document.removeEventListener('click', () => {
+      this.chartService.hideContextMenu();
+      this.chartService.resetContextEvent();
+    });
+  }
+
+  private reinitializeChart(): void {
+    this.initializeChart();
+    if (this.currentData.length > 0) {
+      this.updateChartWithData();
+    }
+    this.cdr.markForCheck();
+  }
+
+  private initializeChart(): void {
+    if (!this.chartContainer) {
+      return;
+    }
+    const chartDom = this.chartContainer.nativeElement;
+    chartDom.innerHTML = '';
+
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance = null;
+    }
+    this.chartInstance = echarts.init(chartDom, this.chartService.theme()); // Init ECharts
+    this.chartInstance.setOption({
+      ...this.defaultConfig,
+      ...this.optionsConfig,
+      title: {
+        ...this.defaultConfig.title,
+        ...this.optionsConfig.title,
+        textStyle: {
+          ...this.defaultConfig.title?.textStyle,
+          ...this.optionsConfig.title?.textStyle,
+        },
+      },
+      tooltip: {
+        ...this.defaultConfig.tooltip,
+        ...this.optionsConfig.tooltip,
+      },
+      legend: { ...this.defaultConfig.legend, ...this.optionsConfig.legend },
+      dataZoom: this.optionsConfig.dataZoom || this.defaultConfig.dataZoom,
+      grid: {
+        ...this.defaultConfig.grid,
+        ...this.optionsConfig.grid,
+      },
+      xAxis: {
+        ...this.defaultConfig.xAxis,
+        ...this.optionsConfig.xAxis,
+        data: [],
+      },
+      yAxis: {
+        ...this.defaultConfig.yAxis,
+        ...this.optionsConfig.yAxis,
+      },
+      series: [],
+    } as EChartsOption);
+
+    // Responsive: Resize on window change
+    window.addEventListener('resize', () => this.chartInstance?.resize(), { passive: true });
+
+    // Handle dataZoom events (optional: Log zoom changes)
+    this.chartInstance.on('dataZoom', (params) => {
+      // console.log('Zoomed to:', params.start, params.end);
+    });
+
+    this.chartInstance.on('rendered', () => {
+      // console.log('Chart rendered successfully');
+    });
+
+    this.chartInstance.on('click', (params) => {
+      this.chartService.hideContextMenu();
+      this.chartService.resetContextEvent();
+      this.chartService.handleClick(params);
+    });
+
+    this.chartInstance.on('contextmenu', (params) => {
+      this.chartService.openContextMenu(params, this.chartContainer);
+    });
+
+    chartDom.addEventListener('contextmenu', this.boundHandleContextMenu);
+    document.addEventListener(
+      'click',
+      () => {
+        this.chartService.hideContextMenu();
+        this.chartService.resetContextEvent();
+      },
+      {
+        passive: true,
+      }
+    );
+    this.isLoading = false;
+    this.cdr.markForCheck();
+  }
+
+  private handleContextMenu(event: MouseEvent): void {
+    event.preventDefault();
+    setTimeout(() => {
+      if (!this.chartService.contextMenuEvent().seriesName) {
+        this.chartService.openContextMenu(null, this.chartContainer, event);
+      }
+    }, 0);
+  }
+
+  private updateChartWithData(): void {
+    this.processData(); // Process without updating yet
+    if (this.chartInstance) {
+      const updatedOptions: Partial<echarts.EChartsOption> = {
+        xAxis: { data: this.getProcessedCategories() },
+        series: this.getProcessedValues(),
+      };
+      this.chartInstance.setOption(updatedOptions, {
+        notMerge: false,
+        lazyUpdate: true,
+        silent: false,
+        replaceMerge: ['series'],
+      });
+    }
+  }
+
+  private processedData: any[][] = [];
+  private processedColumns: string[] = [];
+  private getProcessedCategories(): string[] {
+    return this.processedData.map((d) => d[0]);
+  }
+  private getProcessedValues(): any[] {
+    const columnData = this.processedColumns.slice(1);
+    return columnData.map((c, i) => {
+      const seriesData = this.processedData.map((d) => d[i + 1]);
+      return {
+        name: c,
+        type: 'bar',
+        data: seriesData, // Populated dynamically
+        barWidth: 'auto', // Auto-adjust for density
+        large: true, // Enable large mode: Canvas rendering for 50k+ efficiency
+        largeThreshold: 5000, // Start large mode at 5k points
+        progressive: 300, // Render 300 bars per chunk (tune for your hardware)
+        progressiveChunkMode: 'sequential', // Sequential rendering for smooth init
+        progressiveThreshold: 5000, // Apply progressive above 5k
+        animation: true, // Disable initial animation for faster load on large data (re-enable for updates)
+        itemStyle: {
+          // color: '#5470c6', // Bar color
+          // shadowBlur: 0, // Reduce shadows for perf
+        },
+        // emphasis: {
+        //   // Hover highlight (lightweight)
+        //   focus: 'series',
+        //   itemStyle: { opacity: 0.8 },
+        // },
+      };
+    });
+  }
+  private processData(): void {
+    let dataToProcess = this.currentData;
+    if (this.enableSampling && this.currentData.length > this.sampleThreshold) {
+      const step = Math.ceil(this.currentData.length / this.sampleThreshold);
+      dataToProcess = this.currentData.filter((_, index) => index % step === 0);
+      console.warn(
+        `Sampled data from ${this.currentData.length} to ${dataToProcess.length} points.`
+      );
+    }
+    this.processedData = dataToProcess; // Cache processed
+    this.processedColumns = this.currentColumns;
+  }
+
+  private processAndUpdateData(): void {
+    this.processData();
+    if (this.chartInstance) {
+      this.updateChartWithData();
+    }
+  }
+
+  private handleResize(): void {
+    if (this.chartInstance) {
+      this.chartInstance.resize();
+    }
+  }
+
+  private disposeChart(): void {
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance.off('click');
+      this.chartInstance = null;
+      // console.log('ECharts instance disposed');
+    }
+    window.removeEventListener('resize', this.handleResize.bind(this));
+  }
+
+  // Public method: Update data externally (e.g., from API)
+  updateData(newData: any[][]): void {
+    this.currentData = newData;
+    this.processAndUpdateData();
+  }
+}

package/projects/charts-lib/src/lib/component/line-chart/line-chart.html

@@ -0,0 +1 @@
+<div #lineChartContainer style="width: 100%; height: 100%"></div>

package/projects/charts-lib/src/lib/component/line-chart/line-chart.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LineChart } from './line-chart';
+
+describe('LineChart', () => {
+  let component: LineChart;
+  let fixture: ComponentFixture<LineChart>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LineChart]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LineChart);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/charts-lib/src/lib/component/line-chart/line-chart.ts

@@ -0,0 +1,266 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ViewChild,
+  ElementRef,
+  inject,
+  effect,
+} from '@angular/core';
+import * as echarts from 'echarts'; // Core ECharts
+import { Subject } from 'rxjs'; // For cleanup
+import { ChartService } from '../../services/chart.service';
+import '../../themes/default';
+import '../../themes/vintage';
+import '../../themes/dark';
+import '../../themes/essos';
+import '../../themes/chalk';
+import '../../themes/roma';
+
+@Component({
+  selector: 'lib-line-chart',
+  imports: [],
+  templateUrl: './line-chart.html',
+  styleUrl: './line-chart.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LineChart implements OnInit, OnDestroy {
+  @Input() title: string = '';
+  @Input() height = '600px';
+  @Input() enableSampling = true; // Sample data if > threshold for perf
+  @Input() sampleThreshold = 10000; // Sample if data > 10k (keep full for 50k if hardware allows)
+  @Input() isLoading: boolean = true;
+
+  @ViewChild('lineChartContainer', { static: false }) chartContainer!: ElementRef<HTMLDivElement>;
+
+  chartInstance: echarts.ECharts | null = null;
+  private destroy$ = new Subject<void>();
+  private chartService = inject(ChartService);
+  private currentData: any[][] = [];
+  private currentColumns: string[] = [];
+
+  // ECharts options optimized for 50k+ data
+  chartOptions = {
+    title: {
+      text: this.title,
+      left: 'center',
+      textStyle: { fontSize: 16 },
+    },
+    tooltip: {
+      // Hover info (efficient for large data)
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      // formatter: (params = [{ name: '', value: '' }]) => {
+      //   const param = params[0];
+      //   return `${param.name}<br/>Value: ${param.value}`;
+      // },
+    },
+    legend: { show: false }, // Disable for single series; add if multi-series
+    dataZoom: [
+      // Critical for large data: Zoom/slider to navigate 50k data points
+      {
+        type: 'slider', // Bottom slider
+        start: 0,
+        end: 100, // Initial view: First 10% (e.g., 5k of 50k)
+        height: 25,
+        bottom: 20,
+        textStyle: { fontSize: 12 },
+      },
+      {
+        type: 'inside', // Mouse wheel/pinch zoom
+        start: 0,
+        end: 10,
+      },
+    ],
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '80px', // Space for dataZoom slider
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: [], // Populated dynamically
+      axisLabel: { rotate: 45, fontSize: 10 },
+      axisTick: { show: false },
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: { fontSize: 12 },
+    },
+    series: [],
+  };
+
+  constructor(private cdr: ChangeDetectorRef) {
+    // Effect for theme changes
+    effect(() => {
+      const theme = this.chartService.theme(); // Read signal
+      if (this.chartInstance) {
+        this.reinitializeChart();
+      }
+    });
+    // Effect for data changes
+    effect(() => {
+      const data = this.chartService.data(); // Read signal
+      const columns = this.chartService.columns();
+      this.currentColumns = columns;
+      this.currentData = data;
+      this.processAndUpdateData();
+    });
+  }
+
+  ngOnInit(): void {
+    if (this.currentData.length > 0) {
+      this.processAndUpdateData();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.initializeChart();
+    if (this.currentData.length > 0) {
+      this.updateChartWithData();
+    }
+    this.isLoading = false;
+    this.cdr.markForCheck();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+    this.disposeChart();
+    if (this.chartInstance) {
+      this.chartInstance.dispose(); // Clean up to free memory
+    }
+  }
+
+  private reinitializeChart(): void {
+    this.initializeChart();
+    if (this.currentData.length > 0) {
+      this.updateChartWithData();
+    }
+    this.cdr.markForCheck();
+  }
+
+  private initializeChart(): void {
+    if (!this.chartContainer) {
+      console.error('Chart container not found!');
+      return;
+    }
+    const chartDom = this.chartContainer.nativeElement;
+    chartDom.innerHTML = '';
+
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance = null;
+    }
+
+    this.chartInstance = echarts.init(chartDom, this.chartService.theme()); // Init ECharts
+    this.chartInstance.setOption(this.chartOptions);
+
+    // Responsive: Resize on window change
+    window.addEventListener('resize', () => this.chartInstance?.resize(), { passive: true });
+
+    // Handle dataZoom events (optional: Log zoom changes)
+    this.chartInstance.on('dataZoom', (params) => {
+      // console.log('Zoomed to:', params.start, params.end);
+    });
+
+    this.chartInstance.on('rendered', () => {
+      // console.log('Chart rendered successfully');
+    });
+
+    this.isLoading = false;
+    this.cdr.markForCheck();
+  }
+
+  private updateChartWithData(): void {
+    this.processData(); // Process without updating yet
+    if (this.chartInstance) {
+      const updatedOptions: Partial<echarts.EChartsOption> = {
+        xAxis: { data: this.getProcessedCategories() },
+        series: this.getProcessedValues(),
+      };
+      this.chartInstance.setOption(updatedOptions, {
+        notMerge: false,
+        lazyUpdate: true,
+        silent: false,
+        replaceMerge: ['series'],
+      });
+    }
+  }
+
+  private processedData: any[][] = [];
+  private processedColumns: string[] = [];
+  private getProcessedCategories(): string[] {
+    return this.processedData.map((d) => d[0]);
+  }
+  private getProcessedValues(): any[] {
+    const columnData = this.processedColumns.slice(1);
+    return columnData.map((c, i) => {
+      const seriesData = this.processedData.map((d) => d[i + 1]);
+      return {
+        name: c,
+        type: 'line',
+        data: seriesData, // Populated dynamically
+        large: true, // Enable large mode: Canvas rendering for 50k+ efficiency
+        largeThreshold: 5000, // Start large mode at 5k points
+        progressive: 300, // Render 300 points per chunk (tune for your hardware)
+        progressiveChunkMode: 'sequential', // Sequential rendering for smooth init
+        progressiveThreshold: 5000, // Apply progressive above 5k
+        animation: true, // Disable initial animation for faster load on large data (re-enable for updates)
+        itemStyle: {
+          // color: '#5470c6', // line color
+          // shadowBlur: 0, // Reduce shadows for perf
+        },
+        // emphasis: {
+        //   // Hover highlight (lightweight)
+        //   focus: 'series',
+        //   itemStyle: { opacity: 0.8 },
+        // },
+      };
+    });
+  }
+  private processData(): void {
+    let dataToProcess = this.currentData;
+    if (this.enableSampling && this.currentData.length > this.sampleThreshold) {
+      const step = Math.ceil(this.currentData.length / this.sampleThreshold);
+      dataToProcess = this.currentData.filter((_, index) => index % step === 0);
+      console.warn(
+        `Sampled data from ${this.currentData.length} to ${dataToProcess.length} points.`
+      );
+    }
+    this.processedData = dataToProcess; // Cache processed
+    this.processedColumns = this.currentColumns;
+  }
+
+  private processAndUpdateData(): void {
+    this.processData();
+    if (this.chartInstance) {
+      this.updateChartWithData();
+    }
+  }
+
+  private handleResize(): void {
+    if (this.chartInstance) {
+      this.chartInstance.resize();
+    }
+  }
+
+  private disposeChart(): void {
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance = null;
+      // console.log('ECharts instance disposed');
+    }
+    window.removeEventListener('resize', this.handleResize.bind(this));
+  }
+
+  // Public method: Update data externally (e.g., from API)
+  updateData(newData: any[][]): void {
+    this.currentData = newData;
+    this.processAndUpdateData();
+  }
+}

package/projects/charts-lib/src/lib/modal/charts-lib.modal.ts

@@ -0,0 +1,79 @@
+import type { EChartsOption } from 'echarts';
+import {
+  Color,
+  DataZoomComponentOption,
+  GridComponentOption,
+  LegendComponentOption,
+  SeriesOption,
+  TitleComponentOption,
+  TooltipComponentOption,
+  XAXisComponentOption,
+  YAXisComponentOption,
+} from 'echarts';
+
+export class ClickEvent {
+  seriesName: string = '';
+  value: any = undefined;
+  name: string = '';
+  dataIndex?: number = -1;
+  seriesIndex?: number = -1;
+}
+
+export class ChartsLibType {
+  chartType: 'line' | 'bar' | 'area' | 'pie' = 'bar';
+  columns: string[] = [];
+  data: any[][] = [];
+  themeName?: 'default' | 'dark' | 'vintage' | 'essos' | 'chalk' | 'roma' = 'default';
+  colorsScheme?: string[] | undefined;
+  chartOptionsConfig?: OptionsConfig;
+}
+
+export class OptionsConfig implements EChartsOption {
+  title?: TitleComponentOption = {
+    show: true,
+    text: '',
+    left: 'center',
+    textStyle: { fontSize: 16 },
+  };
+  legend?: LegendComponentOption = { show: true };
+  tooltip?: TooltipComponentOption = { trigger: 'axis', axisPointer: { type: 'shadow' } };
+  xAxis?: XAXisComponentOption = {
+    type: 'category',
+    data: [], // Populated dynamically
+    axisLabel: { rotate: 45, fontSize: 10 },
+    axisTick: { show: false },
+  };
+  yAxis?: YAXisComponentOption = {
+    type: 'value',
+    axisLabel: { fontSize: 12 },
+  };
+  dataZoom?: DataZoomComponentOption[] = [
+    {
+      type: 'slider',
+      start: 0,
+      end: 100,
+      height: 25,
+      bottom: 20,
+      textStyle: { fontSize: 12 },
+    },
+    {
+      type: 'inside', // Mouse wheel/pinch zoom
+      start: 0,
+      end: 10,
+    },
+  ];
+  series?: SeriesOption[] = [];
+  grid?: GridComponentOption = {
+    left: '5%',
+    right: '5%',
+    containLabel: true,
+  };
+  [key: string]: any;
+}
+
+export class ContextMenuListItem {
+  label: string = '';
+  options?: ContextMenuListItem[] = [];
+  action?: (event?: ClickEvent) => void;
+  disabled?: boolean = false;
+}