[add] Chart Element modules

package.json

@@ -1,6 +1,6 @@
 {
     "name": "echarts-jsx",
-    "version": "1.0.0-rc.2",
+    "version": "1.0.0-rc.3",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "A real JSX wrapper for ECharts based on TypeScript & Web components",
@@ -34,7 +34,9 @@
         },
         "./*": [
             "./dist/component/*",
-            "./dist/component/*.d.ts"
+            "./dist/component/*.d.ts",
+            "./dist/chart/*",
+            "./dist/chart/*.d.ts"
         ]
     },
     "engines": {

source/chart/bar.ts

@@ -0,0 +1,20 @@
+import { JsxProps } from 'dom-renderer';
+import { BarSeriesOption } from 'echarts';
+import { BarChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-bar-chart',
+    class ECBarElement extends ECOptionElement {}
+);
+use(BarChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-bar-chart': JsxProps<ECOptionElement> & BarSeriesOption;
+        }
+    }
+}

source/chart/boxplot.ts

@@ -0,0 +1,20 @@
+import { JsxProps } from 'dom-renderer';
+import { BoxplotSeriesOption } from 'echarts';
+import { BoxplotChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-boxplot-chart',
+    class ECBoxplotElement extends ECOptionElement {}
+);
+use(BoxplotChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-boxplot-chart': JsxProps<ECOptionElement> & BoxplotSeriesOption;
+        }
+    }
+}

source/chart/candlestick.ts

@@ -0,0 +1,21 @@
+import { JsxProps } from 'dom-renderer';
+import { CandlestickSeriesOption } from 'echarts';
+import { CandlestickChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-candlestick-chart',
+    class ECCandlestickElement extends ECOptionElement {}
+);
+use(CandlestickChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-candlestick-chart': JsxProps<ECOptionElement> &
+                CandlestickSeriesOption;
+        }
+    }
+}

source/chart/custom.ts

@@ -0,0 +1,20 @@
+import { JsxProps } from 'dom-renderer';
+import { CustomSeriesOption } from 'echarts';
+import { CustomChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-custom-chart',
+    class ECCustomElement extends ECOptionElement {}
+);
+use(CustomChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-custom-chart': JsxProps<ECOptionElement> & CustomSeriesOption;
+        }
+    }
+}

source/chart/effect-scatter.ts

@@ -0,0 +1,21 @@
+import { JsxProps } from 'dom-renderer';
+import { EffectScatterSeriesOption } from 'echarts';
+import { EffectScatterChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-effect-scatter-chart',
+    class ECEffectScatterElement extends ECOptionElement {}
+);
+use(EffectScatterChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-effect-scatter-chart': JsxProps<ECOptionElement> &
+                EffectScatterSeriesOption;
+        }
+    }
+}

source/chart/funnel.ts

@@ -0,0 +1,20 @@
+import { JsxProps } from 'dom-renderer';
+import { FunnelSeriesOption } from 'echarts';
+import { FunnelChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-funnel-chart',
+    class ECFunnelElement extends ECOptionElement {}
+);
+use(FunnelChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-funnel-chart': JsxProps<ECOptionElement> & FunnelSeriesOption;
+        }
+    }
+}

source/chart/gauge.ts

@@ -0,0 +1,20 @@
+import { JsxProps } from 'dom-renderer';
+import { GaugeSeriesOption } from 'echarts';
+import { GaugeChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-gauge-chart',
+    class ECGaugeElement extends ECOptionElement {}
+);
+use(GaugeChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-gauge-chart': JsxProps<ECOptionElement> & GaugeSeriesOption;
+        }
+    }
+}

source/chart/graph.ts

@@ -0,0 +1,20 @@
+import { JsxProps } from 'dom-renderer';
+import { GraphSeriesOption } from 'echarts';
+import { GraphChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-graph-chart',
+    class ECGraphElement extends ECOptionElement {}
+);
+use(GraphChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-graph-chart': JsxProps<ECOptionElement> & GraphSeriesOption;
+        }
+    }
+}

source/chart/heatmap.ts

@@ -0,0 +1,20 @@
+import { JsxProps } from 'dom-renderer';
+import { HeatmapSeriesOption } from 'echarts';
+import { HeatmapChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-heatmap-chart',
+    class ECHeatmapElement extends ECOptionElement {}
+);
+use(HeatmapChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-heatmap-chart': JsxProps<ECOptionElement> & HeatmapSeriesOption;
+        }
+    }
+}

source/chart/line.ts

@@ -0,0 +1,20 @@
+import { JsxProps } from 'dom-renderer';
+import { LineSeriesOption } from 'echarts';
+import { LineChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-line-chart',
+    class ECLineElement extends ECOptionElement {}
+);
+use(LineChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-line-chart': JsxProps<ECOptionElement> & LineSeriesOption;
+        }
+    }
+}

source/chart/lines.ts

@@ -0,0 +1,20 @@
+import { JsxProps } from 'dom-renderer';
+import { LinesSeriesOption } from 'echarts';
+import { LinesChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-lines-chart',
+    class ECLinesElement extends ECOptionElement {}
+);
+use(LinesChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-lines-chart': JsxProps<ECOptionElement> & LinesSeriesOption;
+        }
+    }
+}

source/chart/map.ts

@@ -0,0 +1,20 @@
+import { JsxProps } from 'dom-renderer';
+import { MapSeriesOption } from 'echarts';
+import { MapChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-map-chart',
+    class ECMapElement extends ECOptionElement {}
+);
+use(MapChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-map-chart': JsxProps<ECOptionElement> & MapSeriesOption;
+        }
+    }
+}

source/chart/parallel.ts

@@ -0,0 +1,21 @@
+import { JsxProps } from 'dom-renderer';
+import { ParallelSeriesOption } from 'echarts';
+import { ParallelChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-parallel-chart',
+    class ECParallelElement extends ECOptionElement {}
+);
+use(ParallelChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-parallel-chart': JsxProps<ECOptionElement> &
+                ParallelSeriesOption;
+        }
+    }
+}

source/chart/pictorial-bar.ts

@@ -0,0 +1,21 @@
+import { JsxProps } from 'dom-renderer';
+import { PictorialBarSeriesOption } from 'echarts';
+import { PictorialBarChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-pictorial-bar-chart',
+    class ECPictorialBarElement extends ECOptionElement {}
+);
+use(PictorialBarChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-pictorial-bar-chart': JsxProps<ECOptionElement> &
+                PictorialBarSeriesOption;
+        }
+    }
+}

source/chart/pie.ts

@@ -0,0 +1,20 @@
+import { JsxProps } from 'dom-renderer';
+import { PieSeriesOption } from 'echarts';
+import { PieChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-pie-chart',
+    class ECPieElement extends ECOptionElement {}
+);
+use(PieChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-pie-chart': JsxProps<ECOptionElement> & PieSeriesOption;
+        }
+    }
+}

source/chart/radar.ts

@@ -0,0 +1,20 @@
+import { JsxProps } from 'dom-renderer';
+import { RadarSeriesOption } from 'echarts';
+import { RadarChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-radar-chart',
+    class ECRadarElement extends ECOptionElement {}
+);
+use(RadarChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-radar-chart': JsxProps<ECOptionElement> & RadarSeriesOption;
+        }
+    }
+}

source/chart/sankey.ts

@@ -0,0 +1,20 @@
+import { JsxProps } from 'dom-renderer';
+import { SankeySeriesOption } from 'echarts';
+import { SankeyChart } from 'echarts/charts';
+import { use } from 'echarts/core';
+
+import { ECOptionElement } from '../Option';
+
+globalThis.customElements?.define(
+    'ec-sankey-chart',
+    class ECSankeyElement extends ECOptionElement {}
+);
+use(SankeyChart);
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ec-sankey-chart': JsxProps<ECOptionElement> & SankeySeriesOption;
+        }
+    }
+}