cats4u-charts 0.0.1

package/projects/charts-lib/src/lib/services/chart.service.ts

@@ -0,0 +1,296 @@
+import { Injectable, signal, computed, ElementRef, EventEmitter } from '@angular/core';
+import { ECElementEvent } from 'echarts';
+import { Subject } from 'rxjs';
+import {
+  ChartsLibType,
+  ClickEvent,
+  ContextMenuListItem,
+  OptionsConfig,
+} from '../modal/charts-lib.modal';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ChartService {
+  private themeSignal = signal<ChartsLibType['themeName']>('default');
+  public theme = this.themeSignal.asReadonly();
+  newsubject = new Subject();
+
+  private dataSignal = signal<any[][]>([]);
+  public data = this.dataSignal.asReadonly();
+
+  private columnsSignal = signal<string[]>([]);
+  public columns = this.columnsSignal.asReadonly();
+
+  private chartOptionsConfigSignal = signal<OptionsConfig>({});
+  public chartOptionsConfig = this.chartOptionsConfigSignal.asReadonly();
+
+  private eventSignal = signal<ClickEvent>(new ClickEvent());
+  public clickEvent = this.eventSignal.asReadonly();
+
+  private contextMenuEventSignal = signal<ClickEvent>(new ClickEvent());
+  public contextMenuEvent = this.contextMenuEventSignal.asReadonly();
+
+  private contextMenuListSignal = signal<ContextMenuListItem[]>([]);
+  public contextMenuList = this.contextMenuListSignal.asReadonly();
+
+  private drillByConfigSignal = signal<ClickEvent>(new ClickEvent());
+  public drillByConfig = this.drillByConfigSignal.asReadonly();
+
+  private loadingSignal = signal<boolean>(false);
+  public loading = this.loadingSignal.asReadonly();
+
+  private contextMenu: HTMLElement | null = null;
+
+  public isDarkTheme = computed(() => this.theme() === 'dark');
+
+  constructor() {}
+
+  setTheme(themeName: ChartsLibType['themeName']): void {
+    this.themeSignal.set(themeName);
+  }
+
+  setData(data: any[][]): void {
+    this.dataSignal.set(data);
+  }
+
+  setColumns(columns: string[]): void {
+    this.columnsSignal.set(columns);
+  }
+
+  setChartOptionsConfig(config: OptionsConfig) {
+    this.chartOptionsConfigSignal.set(config);
+  }
+
+  setContextMenuList(contextMenu: ContextMenuListItem[]) {
+    this.contextMenuListSignal.set(contextMenu);
+  }
+
+  setLoading(isLoading: boolean): void {
+    this.loadingSignal.set(isLoading);
+  }
+
+  getCurrentTheme(): ChartsLibType['themeName'] {
+    return this.themeSignal();
+  }
+
+  getCurrentData(): any[][] {
+    return this.dataSignal();
+  }
+  getCurrentColumns(): string[] {
+    return this.columnsSignal();
+  }
+  handleClick(event: ECElementEvent): void {
+    this.eventSignal.set({
+      seriesName: event?.seriesName,
+      value: event?.value,
+      name: event?.name,
+      dataIndex: event?.dataIndex,
+      seriesIndex: event?.seriesIndex,
+    } as ClickEvent);
+  }
+
+  getClickEvent(): ClickEvent {
+    return this.eventSignal();
+  }
+
+  showContextMenu(
+    x: number,
+    y: number,
+    params: ECElementEvent | null,
+    chartContainer: ElementRef<HTMLDivElement>
+  ): void {
+    // Remove existing menu
+    this.hideContextMenu();
+    // Create menu element
+    this.contextMenu = document.createElement('div');
+    this.contextMenu.style.position = 'absolute';
+    this.contextMenu.style.left = `${x}px`;
+    this.contextMenu.style.top = `${y}px`;
+    this.contextMenu.style.background = 'white';
+    this.contextMenu.style.border = '1px solid #ccc';
+    this.contextMenu.style.borderRadius = '6px';
+    this.contextMenu.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
+    this.contextMenu.style.zIndex = '10000000';
+    this.contextMenu.style.padding = '5px 0';
+    this.contextMenu.style.minWidth = '120px';
+
+    // Define menu options (customize as needed)
+    const options: ContextMenuListItem[] = [
+      {
+        label: 'Drill By',
+        options: this.columns().map((column) => ({
+          label: column,
+          action: () => {
+            this.drillByHandler(column);
+          },
+        })),
+        action: () => {},
+      },
+      {
+        label: 'Drill Down',
+        action: () => this.drillDownHandler(params),
+        disabled: !params,
+      },
+      ...this.contextMenuList(),
+    ];
+    let activeSubMenu: HTMLElement | null = null;
+    // Add options to menu
+    options.forEach((option, index) => {
+      const item = document.createElement('div');
+      item.innerHTML = option.options
+        ? `<div style="display: flex; justify-content: space-between;align-items:center;"><label>${option.label}</label><label style="font-weight:600; margin-left: 1rem;">></label></div>`
+        : `<label>${option.label}</label>`;
+      item.style.padding = '8px 12px';
+      item.style.cursor = 'pointer';
+      if (option.disabled) {
+        item.style.opacity = '0.5';
+        item.style.cursor = 'not-allowed';
+      }
+      if (index < options.length - 1) {
+        item.style.borderBottom = '1px solid #e1e1e1';
+      }
+      item.style.fontSize = '14px';
+      item.style.position = 'relative';
+      item.onmouseover = (event: MouseEvent) => {
+        if (!option.disabled) {
+          item.style.background = '#cee2ff';
+
+          if (activeSubMenu) {
+            activeSubMenu.remove();
+            activeSubMenu = null;
+          }
+          if (option.options) {
+            activeSubMenu = document.createElement('div');
+            activeSubMenu.style.position = 'absolute';
+            activeSubMenu.style.left = `${item.offsetWidth + 4}px`; // Position to the right of the item
+            activeSubMenu.style.top = '0px'; // Align with the top of the item
+            activeSubMenu.style.background = 'white';
+            activeSubMenu.style.border = '1px solid #ccc';
+            activeSubMenu.style.borderRadius = '6px';
+            activeSubMenu.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
+            activeSubMenu.style.zIndex = '10000001'; // Higher than main menu
+            activeSubMenu.style.padding = '5px 0';
+            activeSubMenu.style.minWidth = '120px';
+            // Add submenu items
+            option.options.forEach((subOption, idx) => {
+              const subItem = document.createElement('div');
+              subItem.textContent = subOption.label;
+              subItem.style.padding = '8px 12px';
+              subItem.style.cursor = 'pointer';
+              if (option.options && idx < option.options.length - 1) {
+                subItem.style.borderBottom = '1px solid #e1e1e1';
+              }
+              subItem.style.fontSize = '14px';
+              subItem.onmouseover = () => {
+                subItem.style.background = '#cee2ff';
+              };
+              subItem.onmouseout = () => (subItem.style.background = 'white');
+              subItem.onclick = () => {
+                if (subOption.action) {
+                  subOption.action(
+                    params
+                      ? ({
+                          seriesName: params?.seriesName,
+                          value: params?.value,
+                          name: params?.name,
+                          dataIndex: params?.dataIndex,
+                          seriesIndex: params?.seriesIndex,
+                        } as ClickEvent)
+                      : undefined
+                  );
+                }
+                this.hideContextMenu();
+                this.resetContextEvent();
+              };
+              activeSubMenu!.appendChild(subItem);
+            });
+            if (this.contextMenu) {
+              this.contextMenu.appendChild(activeSubMenu);
+            }
+          }
+        }
+      };
+      item.onmouseout = (event: MouseEvent) => {
+        if (!option.disabled) {
+          item.style.background = 'white';
+        }
+      };
+
+      item.onclick = () => {
+        if (!option.options && !option.disabled) {
+          if (option.action) {
+            option.action();
+          }
+          this.hideContextMenu();
+          this.resetContextEvent();
+        }
+      };
+      if (this.contextMenu) {
+        this.contextMenu.appendChild(item);
+      }
+    });
+    // Append to chart container
+    chartContainer.nativeElement.appendChild(this.contextMenu);
+  }
+
+  openContextMenu(
+    params: ECElementEvent | null,
+    chartContainer: ElementRef<HTMLDivElement>,
+    mouseEvent?: MouseEvent
+  ): void {
+    if (params) {
+      this.contextMenuEventSignal.set({
+        seriesName: params?.seriesName,
+        value: params?.value,
+        name: params?.name,
+        dataIndex: params?.dataIndex,
+        seriesIndex: params?.seriesIndex,
+      } as ClickEvent);
+    } else {
+      this.resetContextEvent();
+    }
+    const event = mouseEvent || (params?.event?.event as MouseEvent);
+    event?.preventDefault();
+
+    if (!event) return;
+    const rect = chartContainer.nativeElement.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    // Create or update the menu
+    this.showContextMenu(x, y, params, chartContainer);
+  }
+  hideContextMenu(): void {
+    if (this.contextMenu) {
+      this.contextMenu.remove();
+      this.contextMenu = null;
+    }
+  }
+
+  resetContextEvent(): void {
+    this.contextMenuEventSignal.set(new ClickEvent());
+  }
+
+  drillDownHandler(params: ECElementEvent | null): void {
+    if (params) {
+      this.eventSignal.set({
+        seriesName: params?.seriesName,
+        value: params?.value,
+        name: params?.name,
+        dataIndex: params?.dataIndex,
+        seriesIndex: params?.seriesIndex,
+      } as ClickEvent);
+    }
+  }
+
+  drillByHandler(columnName: string = ''): void {
+    const params = {
+      seriesName: columnName,
+      value: undefined,
+      name: '',
+      dataIndex: -1,
+      seriesIndex: -1,
+    } as ClickEvent;
+    this.drillByConfigSignal.set(params);
+  }
+}

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

@@ -0,0 +1,357 @@
+import * as echarts from 'echarts';
+
+const chalkTheme = {
+  color: ['#fc97af', '#87f7cf', '#f7f494', '#72ccff', '#f7c5a0', '#d4a4eb', '#d2f5a6', '#76f2f2'],
+  backgroundColor: 'rgba(41,52,65,1)',
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: '#ffffff',
+    },
+    subtextStyle: {
+      color: '#dddddd',
+    },
+  },
+  line: {
+    itemStyle: {
+      borderWidth: '4',
+    },
+    lineStyle: {
+      width: '3',
+    },
+    symbolSize: '0',
+    symbol: 'circle',
+    smooth: true,
+  },
+  radar: {
+    itemStyle: {
+      borderWidth: '4',
+    },
+    lineStyle: {
+      width: '3',
+    },
+    symbolSize: '0',
+    symbol: 'circle',
+    smooth: true,
+  },
+  bar: {
+    itemStyle: {
+      barBorderWidth: 0,
+      barBorderColor: '#ccc',
+    },
+  },
+  pie: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  boxplot: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  parallel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  sankey: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  funnel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  gauge: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  candlestick: {
+    itemStyle: {
+      color: '#fc97af',
+      color0: 'transparent',
+      borderColor: '#fc97af',
+      borderColor0: '#87f7cf',
+      borderWidth: '2',
+    },
+  },
+  graph: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+    lineStyle: {
+      width: '1',
+      color: '#ffffff',
+    },
+    symbolSize: '0',
+    symbol: 'circle',
+    smooth: true,
+    color: ['#fc97af', '#87f7cf', '#f7f494', '#72ccff', '#f7c5a0', '#d4a4eb', '#d2f5a6', '#76f2f2'],
+    label: {
+      color: '#293441',
+    },
+  },
+  map: {
+    itemStyle: {
+      areaColor: '#f3f3f3',
+      borderColor: '#999999',
+      borderWidth: 0.5,
+    },
+    label: {
+      color: '#893448',
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: 'rgba(255,178,72,1)',
+        borderColor: '#eb8146',
+        borderWidth: 1,
+      },
+      label: {
+        color: 'rgb(137,52,72)',
+      },
+    },
+  },
+  geo: {
+    itemStyle: {
+      areaColor: '#f3f3f3',
+      borderColor: '#999999',
+      borderWidth: 0.5,
+    },
+    label: {
+      color: '#893448',
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: 'rgba(255,178,72,1)',
+        borderColor: '#eb8146',
+        borderWidth: 1,
+      },
+      label: {
+        color: 'rgb(137,52,72)',
+      },
+    },
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#666666',
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#aaaaaa',
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#e6e6e6'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+      },
+    },
+  },
+  valueAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#666666',
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#aaaaaa',
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#e6e6e6'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+      },
+    },
+  },
+  logAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#666666',
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#aaaaaa',
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#e6e6e6'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+      },
+    },
+  },
+  timeAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#666666',
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#aaaaaa',
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#e6e6e6'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+      },
+    },
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: '#999999',
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: '#666666',
+      },
+    },
+  },
+  legend: {
+    textStyle: {
+      color: '#999999',
+    },
+    left: 'center',
+    right: 'auto',
+    top: 'auto',
+    bottom: 15,
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: '#cccccc',
+        width: 1,
+      },
+      crossStyle: {
+        color: '#cccccc',
+        width: 1,
+      },
+    },
+  },
+  timeline: {
+    lineStyle: {
+      color: '#87f7cf',
+      width: 1,
+    },
+    itemStyle: {
+      color: '#87f7cf',
+      borderWidth: 1,
+    },
+    controlStyle: {
+      color: '#87f7cf',
+      borderColor: '#87f7cf',
+      borderWidth: 0.5,
+    },
+    checkpointStyle: {
+      color: '#fc97af',
+      borderColor: 'rgba(252,151,175,0.3)',
+    },
+    label: {
+      color: '#87f7cf',
+    },
+    emphasis: {
+      itemStyle: {
+        color: '#f7f494',
+      },
+      controlStyle: {
+        color: '#87f7cf',
+        borderColor: '#87f7cf',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#87f7cf',
+      },
+    },
+  },
+  visualMap: {
+    color: ['#fc97af', '#87f7cf'],
+  },
+  markPoint: {
+    label: {
+      color: '#293441',
+    },
+    emphasis: {
+      label: {
+        color: '#293441',
+      },
+    },
+  },
+  grid: {
+    left: '15%',
+    right: '10%',
+    top: 65,
+    bottom: 80,
+  },
+};
+echarts.registerTheme('chalk', (chalkTheme as any).default ?? chalkTheme);