feat(charts): add bar chart component

.github/workflows/ui-charts-ci.yml

@@ -1,4 +1,4 @@
-name: UI CI
+name: UI Charts CI
 
 on:
   push:

Plugins/UI/default-scriptbee-charts/federation.config.mjs

@@ -2,13 +2,13 @@ import { shareAll, withNativeFederation } from '@angular-architects/native-feder
 
 export default withNativeFederation({
   name: 'default-scriptbee-charts',
-
+  exposes: {
+    './BarChart': './src/app/components/bar-chart/bar-chart.ts',
+  },
   shared: {
     ...shareAll({ singleton: true, strictVersion: false, requiredVersion: 'auto' }),
   },
-
   skip: ['@angular-architects/native-federation', 'rxjs/ajax', 'rxjs/fetch', 'rxjs/testing', 'rxjs/webSocket'],
-
   features: {
     ignoreUnusedDeps: true,
   },

Plugins/UI/default-scriptbee-charts/src/app/app.html

@@ -1 +1,8 @@
 <div>Hello, default-scriptbee-chart!</div>
+
+<div>
+  Mode: {{ themeService.echartsTheme() }}
+  <button (click)="themeService.toggle()">Toggle Mode</button>
+</div>
+
+<app-bar-chart [parameters]="barChartParameters()"></app-bar-chart>

Plugins/UI/default-scriptbee-charts/src/app/app.spec.ts

@@ -1,10 +1,20 @@
+import { computed, signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { App } from './app';
+import { ThemeService } from './services/theme.service';
+
+describe('AppComponent with Mock Theme', () => {
+  let mockThemeService: Partial<ThemeService>;
 
-describe('App', () => {
   beforeEach(async () => {
+    mockThemeService = {
+      isDark: signal(false),
+      echartsTheme: computed(() => 'light'),
+    };
+
     await TestBed.configureTestingModule({
       imports: [App],
+      providers: [{ provide: ThemeService, useValue: mockThemeService }],
     }).compileComponents();
   });
 

Plugins/UI/default-scriptbee-charts/src/app/app.ts

@@ -1,9 +1,67 @@
-import { Component } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
+import { BarChart } from './components/bar-chart/bar-chart';
+import { ThemeService } from './services/theme.service';
+import { BarChartInput, ChartParameters } from './types/ChartInput';
 
 @Component({
   selector: 'app-root',
-  imports: [],
+  imports: [BarChart],
   templateUrl: './app.html',
   styleUrl: './app.scss',
 })
-export class App {}
+export class App {
+  readonly themeService = inject(ThemeService);
+
+  barChartParameters = computed<ChartParameters<BarChartInput>>(() => {
+    const xAxisData = [];
+    const data1 = [];
+    const data2 = [];
+    const data3 = [];
+
+    for (let i = 0; i < 100; i++) {
+      xAxisData.push('category' + i);
+      data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
+      data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
+      data3.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 5);
+    }
+
+    const series: ChartParameters<BarChartInput>['input']['series'] = [
+      {
+        name: 'bar',
+        data: data1,
+      },
+      {
+        name: 'bar2',
+        data: data2,
+      },
+      {
+        name: 'bar3',
+        data: data3,
+        color: 'red',
+      },
+    ];
+
+    return {
+      theme: this.themeService.echartsTheme(),
+      input: {
+        xAxis: {
+          data: xAxisData,
+          silent: false,
+          splitLine: {
+            show: false,
+          },
+        },
+        yAxis: {},
+        legend: {
+          data: ['bar', 'bar2', 'bar3'],
+          align: 'left',
+        },
+        tooltip: {},
+        series: series,
+        options: {
+          animationEasing: 'elasticOut',
+        },
+      },
+    };
+  });
+}

Plugins/UI/default-scriptbee-charts/src/app/components/bar-chart/bar-chart.html

@@ -0,0 +1 @@
+<div echarts [options]="options()" [theme]="parameters().theme"></div>

Plugins/UI/default-scriptbee-charts/src/app/components/bar-chart/bar-chart.ts

@@ -0,0 +1,34 @@
+import { Component, computed, input } from '@angular/core';
+import { EChartsCoreOption } from 'echarts';
+import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
+import * as echarts from 'echarts/core';
+import { BarChart as EchartsBarChart } from 'echarts/charts';
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { BarChartInput, ChartParameters } from '../../types/ChartInput';
+
+echarts.use([EchartsBarChart, GridComponent, CanvasRenderer, LegendComponent, TooltipComponent]);
+
+@Component({
+  selector: 'app-bar-chart',
+  imports: [NgxEchartsDirective],
+  templateUrl: './bar-chart.html',
+  styleUrl: './bar-chart.scss',
+  providers: [provideEchartsCore({ echarts })],
+})
+export class BarChart {
+  parameters = input.required<ChartParameters<BarChartInput>>();
+
+  options = computed<EChartsCoreOption>(() => {
+    const input = this.parameters().input;
+
+    return {
+      ...(input.options ?? {}),
+      legend: input.legend,
+      tooltip: input.tooltip,
+      xAxis: input.xAxis,
+      yAxis: input.yAxis,
+      series: (input.series ?? []).map((s) => ({ ...s, type: 'bar' })),
+    };
+  });
+}

Plugins/UI/default-scriptbee-charts/src/app/services/theme.service.ts

@@ -0,0 +1,40 @@
+import { Injectable, signal, computed } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
+  private readonly STORAGE_KEY = 'ngx-echarts-theme';
+
+  readonly isDark = signal(this.loadTheme());
+
+  readonly echartsTheme = computed(() => (this.isDark() ? 'dark' : 'light'));
+
+  constructor() {
+    this.applyTheme(this.isDark());
+  }
+
+  toggle(): void {
+    const dark = !this.isDark();
+    this.isDark.set(dark);
+    this.applyTheme(dark);
+    localStorage.setItem(this.STORAGE_KEY, dark ? 'dark' : 'light');
+  }
+
+  private loadTheme(): boolean {
+    const stored = localStorage.getItem(this.STORAGE_KEY);
+    if (stored) {
+      return stored === 'dark';
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  private applyTheme(dark: boolean): void {
+    const body = document.body;
+    if (dark) {
+      body.classList.add('dark-theme');
+      body.classList.remove('light-theme');
+    } else {
+      body.classList.add('light-theme');
+      body.classList.remove('dark-theme');
+    }
+  }
+}

Plugins/UI/default-scriptbee-charts/src/app/types/ChartInput.ts

@@ -0,0 +1,19 @@
+import { EChartsCoreOption } from 'echarts/types/dist/echarts';
+import { EChartsOption } from 'echarts/types/dist/shared';
+import { BarSeriesOption } from 'echarts';
+
+export type Theme = 'light' | 'dark';
+
+export interface ChartParameters<T> {
+  theme: Theme;
+  input: T;
+}
+
+export interface BarChartInput {
+  xAxis: EChartsOption['xAxis'];
+  yAxis: EChartsOption['yAxis'];
+  legend: EChartsOption['legend'];
+  tooltip: EChartsOption['tooltip'];
+  series: Omit<BarSeriesOption, 'type'>[];
+  options?: EChartsCoreOption;
+}