cats4u-charts 0.0.1

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

@@ -0,0 +1,378 @@
+import * as echarts from 'echarts';
+const vintageTheme = {
+  color: [
+    '#d87c7c',
+    '#919e8b',
+    '#d7ab82',
+    '#6e7074',
+    '#61a0a8',
+    '#efa18d',
+    '#787464',
+    '#cc7e63',
+    '#724e58',
+    '#4b565b',
+  ],
+  backgroundColor: 'rgba(254,248,239,1)',
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: '#333333',
+    },
+    subtextStyle: {
+      color: '#aaa',
+    },
+  },
+  line: {
+    itemStyle: {
+      borderWidth: 1,
+    },
+    lineStyle: {
+      width: 2,
+    },
+    symbolSize: 4,
+    symbol: 'emptyCircle',
+    smooth: false,
+  },
+  radar: {
+    itemStyle: {
+      borderWidth: 1,
+    },
+    lineStyle: {
+      width: 2,
+    },
+    symbolSize: 4,
+    symbol: 'emptyCircle',
+    smooth: false,
+  },
+  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: '#c23531',
+      color0: '#314656',
+      borderColor: '#c23531',
+      borderColor0: '#314656',
+      borderWidth: 1,
+    },
+  },
+  graph: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+    lineStyle: {
+      width: 1,
+      color: '#aaa',
+    },
+    symbolSize: 4,
+    symbol: 'emptyCircle',
+    smooth: false,
+    color: [
+      '#d87c7c',
+      '#919e8b',
+      '#d7ab82',
+      '#6e7074',
+      '#61a0a8',
+      '#efa18d',
+      '#787464',
+      '#cc7e63',
+      '#724e58',
+      '#4b565b',
+    ],
+    label: {
+      color: '#eee',
+    },
+  },
+  map: {
+    itemStyle: {
+      areaColor: '#eeeeee',
+      borderColor: '#444444',
+      borderWidth: 0.5,
+    },
+    label: {
+      color: '#000000',
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: 'rgba(255,215,0,0.8)',
+        borderColor: '#444444',
+        borderWidth: 1,
+      },
+      label: {
+        color: 'rgb(100,0,0)',
+      },
+    },
+  },
+  geo: {
+    itemStyle: {
+      areaColor: '#eeeeee',
+      borderColor: '#444444',
+      borderWidth: 0.5,
+    },
+    label: {
+      color: '#000000',
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: 'rgba(255,215,0,0.8)',
+        borderColor: '#444444',
+        borderWidth: 1,
+      },
+      label: {
+        color: 'rgb(100,0,0)',
+      },
+    },
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#333',
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#ccc'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+      },
+    },
+  },
+  valueAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#333',
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#ccc'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+      },
+    },
+  },
+  logAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#333',
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#ccc'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+      },
+    },
+  },
+  timeAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#333',
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#ccc'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+      },
+    },
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: '#999999',
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: '#666666',
+      },
+    },
+  },
+  legend: {
+    textStyle: {
+      color: '#333333',
+    },
+    left: 'center',
+    right: 'auto',
+    top: 0,
+    bottom: 10,
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: '#cccccc',
+        width: 1,
+      },
+      crossStyle: {
+        color: '#cccccc',
+        width: 1,
+      },
+    },
+  },
+  timeline: {
+    lineStyle: {
+      color: '#293c55',
+      width: 1,
+    },
+    itemStyle: {
+      color: '#293c55',
+      borderWidth: 1,
+    },
+    controlStyle: {
+      color: '#293c55',
+      borderColor: '#293c55',
+      borderWidth: 0.5,
+    },
+    checkpointStyle: {
+      color: '#e43c59',
+      borderColor: 'rgba(194,53,49,0.5)',
+    },
+    label: {
+      color: '#293c55',
+    },
+    emphasis: {
+      itemStyle: {
+        color: '#a9334c',
+      },
+      controlStyle: {
+        color: '#293c55',
+        borderColor: '#293c55',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#293c55',
+      },
+    },
+  },
+  visualMap: {
+    color: ['#bf444c', '#d88273', '#f6efa6'],
+  },
+  markPoint: {
+    label: {
+      color: '#eee',
+    },
+    emphasis: {
+      label: {
+        color: '#eee',
+      },
+    },
+  },
+  grid: {
+    left: '10%',
+    right: '10%',
+    top: 60,
+    bottom: 70,
+  },
+};
+echarts.registerTheme('vintage', (vintageTheme as any).default ?? vintageTheme);

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

@@ -0,0 +1,2 @@
+export * from './lib/charts-lib';
+export * from './lib/modal/charts-lib.modal';

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

@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["**/*.spec.ts"]
+}

package/projects/charts-lib/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/charts-lib/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}

package/projects/demo-app/src/app/app.config.ts

@@ -0,0 +1,16 @@
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZonelessChangeDetection,
+} from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZonelessChangeDetection(),
+    provideRouter(routes),
+  ],
+};

package/projects/demo-app/src/app/app.html

@@ -0,0 +1,43 @@
+<div class="header-container">
+  <h4>Chart Type:</h4>
+  <div class="chartTypesButtonContainer">
+    <select name="chartType" id="chartType" [(ngModel)]="chartType">
+      @for (type of chartTypeList; track $index) {
+      <option [value]="type">{{ type }}</option>
+      }
+    </select>
+  </div>
+  <h4>Theme:</h4>
+  <div>
+    <select [(ngModel)]="themeName">
+      @for (theme of themeList; track $index) {
+      <option [value]="theme">{{ theme }}</option>
+      }
+    </select>
+  </div>
+  <h4>Custom colors set:</h4>
+  <div>
+    <select (change)="onColorsChange($event)" name="themeColors" id="themeColors">
+      @for (item of colorsData; track $index) {
+      <option [value]="item.id">
+        {{ item.label }}
+      </option>
+      }
+    </select>
+  </div>
+</div>
+<div class="body-container">
+  <div style="width: 1000px; height: 600px">
+    <lib-charts-lib
+      [chartType]="chartType"
+      [themeName]="themeName"
+      [columns]="columns"
+      [data]="data"
+      [chartOptionsConfig]="chartOptionsConfig"
+      (handleSingleClick)="handleDrillDown($event)"
+      (handleDrillBy)="handleDrillBy($event)"
+    ></lib-charts-lib>
+  </div>
+</div>
+
+<router-outlet />

package/projects/demo-app/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

package/projects/demo-app/src/app/app.scss

@@ -0,0 +1,47 @@
+.header-container {
+  height: 4rem;
+  box-shadow: 2px 0 4px #c4c4c4;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 1rem;
+  .chartTypesButtonContainer {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+  button {
+    padding: 0.5rem 1rem;
+    border-radius: 1rem;
+    outline: none;
+    border: 1px solid rgb(147, 70, 255);
+    background-color: rgb(191, 148, 252);
+    box-shadow: 1px 1px 4px rgb(185, 135, 255);
+    &:hover {
+      background-color: rgb(183, 132, 255);
+    }
+    &:active {
+      background-color: rgb(173, 114, 255);
+    }
+  }
+  select {
+    padding: 0.5rem;
+    border: 1px solid #565656;
+    border-radius: 0.5rem;
+    width: 10rem;
+    outline: none;
+    background-color: #fff;
+    font-size: 1rem;
+    &:active {
+      border: 1px solid rgb(147, 70, 255);
+      box-shadow: 0 0 4px rgb(185, 135, 255);
+    }
+  }
+}
+.body-container {
+  width: 100vw;
+  height: calc(100vh - 4rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/projects/demo-app/src/app/app.spec.ts

@@ -0,0 +1,25 @@
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+      providers: [provideZonelessChangeDetection()]
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demo-app');
+  });
+});

package/projects/demo-app/src/app/app.ts

@@ -0,0 +1,98 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterOutlet } from '@angular/router';
+
+import {
+  OptionsConfig,
+  ChartsLib,
+  type ChartsLibType,
+  ContextMenuListItem,
+  ClickEvent,
+} from 'charts-lib';
+import type { ECElementEvent } from 'echarts';
+import type { ZRColor } from 'echarts/types/dist/shared';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, ChartsLib, FormsModule],
+  templateUrl: './app.html',
+  styleUrl: './app.scss',
+})
+export class App {
+  chartType: ChartsLibType['chartType'] = 'bar';
+  themeName: ChartsLibType['themeName'] = 'default';
+  columns: string[] = ['Created at', 'CPU Usage', 'Memory Usage', 'Free Memory'];
+  contextMenuList: ContextMenuListItem[] = [
+    {
+      label: 'Drill By',
+      options: this.columns.map((column) => ({
+        label: column,
+        action: (event?: ClickEvent) => {
+          console.log(event, 'ccccolumn');
+        },
+      })),
+      action: () => {},
+    },
+    { label: 'Drill Down', action: () => {} },
+  ];
+  data: any[][] = [
+    ['11-08-2025', 100, 46, 98],
+    ['12-08-2025', 90, 56, 98],
+    ['13-08-2025', 10, 80, 99],
+  ];
+  chartOptionsConfig: OptionsConfig = {
+    dataZoom: [
+      {
+        type: 'slider',
+        start: 0,
+        end: 100,
+        height: 20,
+        top: 10,
+        textStyle: { fontSize: 12 },
+      },
+      {
+        type: 'inside', // Mouse wheel/pinch zoom
+        start: 0,
+        end: 10,
+      },
+    ],
+  };
+
+  colorsData: { id: number; colors: ZRColor | ZRColor[]; label: string }[] = [
+    {
+      id: 1,
+      colors: [],
+      label: 'none',
+    },
+    {
+      id: 2,
+      colors: ['#516b91', '#59c4e6', '#edafda', '#93b7e3', '#a5e7f0', '#cbb0e3'],
+      label: 'set1',
+    },
+    {
+      id: 3,
+      colors: ['#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
+      label: 'set2',
+    },
+  ];
+  chartTypeList = ['bar', 'line', 'area'];
+  themeList = ['default', 'vintage', 'dark', 'essos', 'chalk', 'roma'];
+
+  handleDrillDown(event: ECElementEvent) {
+    console.log(event, 'demo app event');
+  }
+
+  onColorsChange(event: Event) {
+    const target = event.target as HTMLSelectElement;
+    if (target.value != '1') {
+      const color = this.colorsData.find((color) => color.id == Number(target.value));
+      this.chartOptionsConfig['color'] = color?.colors;
+    } else {
+      delete this.chartOptionsConfig['color'];
+    }
+  }
+
+  handleDrillBy(config: ClickEvent): void {
+    console.log(config, 'drill by ');
+  }
+}

package/projects/demo-app/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>DemoApp</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/projects/demo-app/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));

package/projects/demo-app/src/styles.scss

@@ -0,0 +1,4 @@
+html,
+body {
+  margin: 0;
+}

package/projects/demo-app/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}