cats4u-charts 0.0.1

package/projects/charts-lib/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/charts-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": ["src/lib/themes/*.js"]
+}

package/projects/charts-lib/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "charts-lib",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0",
+    "@angular/core": "^20.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/projects/charts-lib/src/lib/charts-lib.html

@@ -0,0 +1 @@
+<ng-template #chartContainer></ng-template>

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

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

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

@@ -0,0 +1,121 @@
+import {
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  ViewChild,
+  ViewContainerRef,
+  ComponentRef,
+  Type,
+  Output,
+  EventEmitter,
+  effect,
+  OnInit,
+  KeyValueDiffers,
+  KeyValueDiffer,
+  DoCheck,
+} from '@angular/core';
+import { BarChart } from './component/bar-chart/bar-chart';
+import { LineChart } from './component/line-chart/line-chart';
+import { AreaChart } from './component/area-chart/area-chart';
+import { ChartService } from './services/chart.service';
+import { OptionsConfig, ChartsLibType, ContextMenuListItem } from './modal/charts-lib.modal';
+
+type ChartType = 'line' | 'bar' | 'area' | 'pie';
+
+@Component({
+  selector: 'lib-charts-lib',
+  imports: [],
+  templateUrl: './charts-lib.html',
+  styles: ``,
+})
+export class ChartsLib implements OnInit, OnChanges, DoCheck {
+  @ViewChild('chartContainer', { read: ViewContainerRef }) container!: ViewContainerRef;
+  @Input() chartType!: ChartType;
+  @Input() columns: string[] = [];
+  @Input() data: any[][] = [];
+  @Input() themeName: ChartsLibType['themeName'] = 'default';
+  @Input() chartOptionsConfig: OptionsConfig = {};
+  @Input() contextMenuList: ContextMenuListItem[] = [];
+  @Output() handleSingleClick = new EventEmitter();
+  @Output() handleDrillBy = new EventEmitter();
+
+  private optionsConfigDiffer!: KeyValueDiffer<string, any>;
+  private componentRef: ComponentRef<any> | null = null;
+  constructor(private chartService: ChartService, private differs: KeyValueDiffers) {
+    effect(() => {
+      if (this.chartService.clickEvent().seriesName) {
+        this.handleSingleClick.emit(this.chartService.clickEvent());
+      }
+    });
+    effect(() => {
+      if (this.chartService.drillByConfig().seriesName) {
+        this.handleDrillBy.emit(this.chartService.drillByConfig());
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.optionsConfigDiffer = this.differs.find(this.chartOptionsConfig).create();
+  }
+
+  ngAfterViewInit(): void {
+    this.loadComponent();
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['chartType']) {
+      this.loadComponent();
+    }
+    if (changes['themeName'] && this.componentRef) {
+      this.chartService.setTheme(this.themeName);
+    }
+    if (changes['data']) {
+      this.chartService.setData(this.data);
+    }
+    if (changes['columns']) {
+      this.chartService.setColumns(this.columns);
+    }
+    if (changes['contextMenuList']) {
+      this.chartService.setContextMenuList(this.contextMenuList);
+    }
+  }
+
+  ngDoCheck(): void {
+    if (this.chartOptionsConfig) {
+      const changes = this.optionsConfigDiffer.diff(this.chartOptionsConfig);
+      if (changes) {
+        this.chartService.setChartOptionsConfig({ ...this.chartOptionsConfig });
+      }
+    }
+  }
+
+  private loadComponent(): void {
+    if (!this.container) {
+      return;
+    }
+    if (this.componentRef) {
+      this.componentRef.destroy();
+    }
+    const componentType = this.getComponentType();
+    if (componentType) {
+      this.componentRef = this.container.createComponent(componentType);
+    }
+  }
+  private getComponentType(): Type<any> | null {
+    switch (this.chartType) {
+      case 'bar':
+        return BarChart;
+      case 'line':
+        return LineChart;
+      case 'area':
+        return AreaChart;
+      default:
+        return null;
+    }
+  }
+  ngOnDestroy(): void {
+    if (this.componentRef) {
+      this.componentRef.destroy();
+    }
+  }
+}

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

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

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

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

package/projects/charts-lib/src/lib/component/area-chart/area-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-area-chart',
+  imports: [],
+  templateUrl: './area-chart.html',
+  styleUrl: './area-chart.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AreaChart 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('areaChartContainer', { static: false }) chartContainer!: ElementRef<HTMLDivElement>;
+
+  chartInstance: echarts.ECharts | null = null;
+  private chartService = inject(ChartService);
+  private destroy$ = new Subject<void>();
+  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(() => {
+      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
+        },
+        areaStyle: { opacity: 0.2 },
+        // 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/component/bar-chart/bar-chart.html

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

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

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