feat(charts): add scatter plot component

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

@@ -5,6 +5,7 @@ export default withNativeFederation({
   exposes: {
     './BarChart': './src/app/components/bar-chart/bar-chart.ts',
     './TreeMap': './src/app/components/tree-map/tree-map.ts',
+    './ScatterPlot': './src/app/components/scatter-plot/scatter-plot.ts',
   },
   shared: {
     ...shareAll({ singleton: true, strictVersion: false, requiredVersion: 'auto' }),

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

@@ -8,6 +8,7 @@
 <select [(ngModel)]="selectedChartType">
   <option value="bar">Bar Chart</option>
   <option value="tree-map">Tree Map</option>
+  <option value="scatter-plot">Scatter Plot</option>
 </select>
 
 @switch (selectedChartType()) {
@@ -17,6 +18,9 @@
   @case ('tree-map') {
     <app-tree-map [parameters]="treeMapParameters()"></app-tree-map>
   }
+  @case ('scatter-plot') {
+    <app-scatter-plot [parameters]="scatterPlotParameters()"></app-scatter-plot>
+  }
   @default {
     <p>Please select a chart type.</p>
   }

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

@@ -1,13 +1,14 @@
 import { Component, computed, inject, model } from '@angular/core';
 import { BarChart } from './components/bar-chart/bar-chart';
 import { ThemeService } from './services/theme.service';
-import { BarChartInput, ChartParameters, TreeMapInput } from './types/ChartInput';
+import { BarChartInput, ChartParameters, ScatterPlotInput, TreeMapInput } from './types/ChartInput';
 import { FormsModule } from '@angular/forms';
 import { TreeMap } from './components/tree-map/tree-map';
+import { ScatterPlot } from './components/scatter-plot/scatter-plot';
 
 @Component({
   selector: 'app-root',
-  imports: [BarChart, FormsModule, TreeMap],
+  imports: [BarChart, FormsModule, TreeMap, ScatterPlot],
   templateUrl: './app.html',
   styleUrl: './app.scss',
 })
@@ -48,21 +49,21 @@ export class App {
     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: {
+          xAxis: {
+            data: xAxisData,
+            silent: false,
+            splitLine: {
+              show: false,
+            },
+          },
+          yAxis: {},
+          legend: {
+            data: ['bar', 'bar2', 'bar3'],
+            align: 'left',
+          },
+          tooltip: {},
           animationEasing: 'elasticOut',
         },
       },
@@ -115,4 +116,45 @@ export class App {
       },
     };
   });
+
+  scatterPlotParameters = computed<ChartParameters<ScatterPlotInput>>(() => {
+    return {
+      theme: this.themeService.echartsTheme(),
+      input: {
+        series: [
+          {
+            symbolSize: 20,
+            data: [
+              [10.0, 8.04],
+              [8.07, 6.95],
+              [13.0, 7.58],
+              [9.05, 8.81],
+              [11.0, 8.33],
+              [14.0, 7.66],
+              [13.4, 6.81],
+              [10.0, 6.33],
+              [14.0, 8.96],
+              [12.5, 6.82],
+              [9.15, 7.2],
+              [11.5, 7.2],
+              [3.03, 4.23],
+              [12.2, 7.83],
+              [2.02, 4.47],
+              [1.05, 3.33],
+              [4.05, 4.96],
+              [6.03, 7.24],
+              [12.0, 6.26],
+              [12.0, 8.84],
+              [7.08, 5.82],
+              [5.02, 5.68],
+            ],
+          },
+        ],
+        options: {
+          xAxis: {},
+          yAxis: {},
+        },
+      },
+    };
+  });
 }

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

@@ -24,10 +24,6 @@ export class BarChart {
 
     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/components/scatter-plot/scatter-plot.html

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

Plugins/UI/default-scriptbee-charts/src/app/components/scatter-plot/scatter-plot.ts

@@ -0,0 +1,30 @@
+import { Component, computed, input } from '@angular/core';
+import * as echarts from 'echarts/core';
+import { ScatterChart } from 'echarts/charts';
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
+import { EChartsCoreOption } from 'echarts/types/dist/echarts';
+import { ChartParameters, ScatterPlotInput } from '../../types/ChartInput';
+
+echarts.use([ScatterChart, GridComponent, CanvasRenderer, LegendComponent, TooltipComponent]);
+
+@Component({
+  selector: 'app-scatter-plot',
+  imports: [NgxEchartsDirective],
+  templateUrl: './scatter-plot.html',
+  styleUrl: './scatter-plot.scss',
+  providers: [provideEchartsCore({ echarts })],
+})
+export class ScatterPlot {
+  parameters = input.required<ChartParameters<ScatterPlotInput>>();
+
+  options = computed<EChartsCoreOption>(() => {
+    const input = this.parameters().input;
+
+    return {
+      ...(input.options ?? {}),
+      series: (input.series ?? []).map((s) => ({ ...s, type: 'scatter' })),
+    };
+  });
+}

Plugins/UI/default-scriptbee-charts/src/app/components/tree-map/tree-map.ts

@@ -24,10 +24,6 @@ export class TreeMap {
 
     return {
       ...(input.options ?? {}),
-      legend: input.legend,
-      tooltip: input.tooltip,
-      xAxis: input.xAxis,
-      yAxis: input.yAxis,
       series: (input.series ?? []).map((s) => ({ ...s, type: 'treemap' })),
     };
   });

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

@@ -1,6 +1,5 @@
 import { EChartsCoreOption } from 'echarts/types/dist/echarts';
-import { EChartsOption } from 'echarts/types/dist/shared';
-import { BarSeriesOption, TreemapSeriesOption } from 'echarts';
+import { BarSeriesOption, ScatterSeriesOption, TreemapSeriesOption } from 'echarts';
 
 export type Theme = 'light' | 'dark';
 
@@ -9,18 +8,17 @@ export interface ChartParameters<T> {
   input: T;
 }
 
-interface ChartInputBase {
-  xAxis: EChartsOption['xAxis'];
-  yAxis: EChartsOption['yAxis'];
-  legend: EChartsOption['legend'];
-  tooltip: EChartsOption['tooltip'];
-  options: EChartsCoreOption;
-}
-
-export interface BarChartInput extends Partial<ChartInputBase> {
+export interface BarChartInput {
   series: Omit<BarSeriesOption, 'type'>[];
+  options?: EChartsCoreOption;
 }
 
-export interface TreeMapInput extends Partial<ChartInputBase> {
+export interface TreeMapInput {
   series: Omit<TreemapSeriesOption, 'type'>[];
+  options?: EChartsCoreOption;
+}
+
+export interface ScatterPlotInput {
+  series: Omit<ScatterSeriesOption, 'type'>[];
+  options?: EChartsCoreOption;
 }