Merge pull request #3581 from VisActor/feat/react-vchart-series

Feat/react vchart series

common/changes/@visactor/vchart/feat-react-vchart-series_2024-12-19-03-28.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "feat: add miss Series and Chart in react vchart, close #3578",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

packages/react-vchart/src/charts/MosaicChart.tsx

@@ -0,0 +1,21 @@
+import type React from 'react';
+import type { IMosaicChartSpec, IVChartConstructor } from '@visactor/vchart';
+import { VChart, registerMosaicChart, registerLabel, registerTotalLabel } from '@visactor/vchart';
+import type { BaseChartProps } from './BaseChart';
+import { createChart } from './BaseChart';
+import { registers } from './registers/cartesian';
+
+export interface MosaicChartProps
+  extends Omit<BaseChartProps, 'container' | 'type' | 'data'>,
+    Omit<Partial<IMosaicChartSpec>, 'type'> {
+  //
+}
+
+export const MosaicChart = createChart<React.PropsWithChildren<MosaicChartProps> & { type?: 'mosaic' }>(
+  'MosaicChart',
+  {
+    type: 'mosaic',
+    vchartConstrouctor: VChart as IVChartConstructor
+  },
+  [registerMosaicChart, registerLabel, registerTotalLabel, ...registers]
+);

packages/react-vchart/src/charts/PictogramChart.tsx

@@ -0,0 +1,19 @@
+import type React from 'react';
+import type { IPictogramChartSpec, IVChartConstructor } from '@visactor/vchart';
+import { VChart, registerPictogramChart, registerLabel } from '@visactor/vchart';
+import { registers } from './registers/simple';
+import type { BaseChartProps } from './BaseChart';
+import { createChart } from './BaseChart';
+
+export interface PictogramChartProps
+  extends Omit<BaseChartProps, 'container' | 'type' | 'data'>,
+    Omit<Partial<IPictogramChartSpec>, 'type'> {}
+
+export const PictogramChart = createChart<React.PropsWithChildren<PictogramChartProps> & { type?: 'pictogram' }>(
+  'PictogramChart',
+  {
+    type: 'pictogram',
+    vchartConstrouctor: VChart as IVChartConstructor
+  },
+  [registerPictogramChart, registerLabel, ...registers]
+);

packages/react-vchart/src/charts/RangeAreaChart.tsx

@@ -0,0 +1,19 @@
+import type React from 'react';
+import type { IRangeAreaChartSpec, IVChartConstructor } from '@visactor/vchart';
+import { VChart, registerRangeAreaChart, registerLabel } from '@visactor/vchart';
+import { registers } from './registers/cartesian';
+import type { BaseChartProps } from './BaseChart';
+import { createChart } from './BaseChart';
+
+export interface RangeAreaChartProps
+  extends Omit<BaseChartProps, 'container' | 'type' | 'data'>,
+    Omit<Partial<IRangeAreaChartSpec>, 'type'> {}
+
+export const RangeAreaChart = createChart<React.PropsWithChildren<RangeAreaChartProps> & { type?: 'rangeArea' }>(
+  'RangeAreaChart',
+  {
+    type: 'rangeArea',
+    vchartConstrouctor: VChart as IVChartConstructor
+  },
+  [registerRangeAreaChart, registerLabel, ...registers]
+);

packages/react-vchart/src/charts/index.ts

@@ -20,9 +20,13 @@ export * from './LineChart';
 export * from './LiquidChart';
 
 export * from './MapChart';
+export * from './MosaicChart';
+export * from './PictogramChart';
+
 export * from './PieChart';
 export * from './Pie3dChart';
 export * from './RadarChart';
+export * from './RangeAreaChart';
 export * from './RangeColumnChart';
 export * from './RangeColumn3dChart';
 export * from './RoseChart';

packages/react-vchart/src/series/Gauge.tsx

@@ -1,8 +1,9 @@
-import { BaseSeriesProps, createSeries } from './BaseSeries';
+import type { BaseSeriesProps } from './BaseSeries';
+import { createSeries } from './BaseSeries';
 
 import type { IGaugeSeriesSpec } from '@visactor/vchart';
 import { registerGaugeSeries } from '@visactor/vchart';
 
 export type GaugeProps = BaseSeriesProps & Omit<IGaugeSeriesSpec, 'type'>;
 
-export const Gauge = createSeries<GaugeProps>('Sankey', ['segment', 'track', 'label'], 'gauge', [registerGaugeSeries]);
+export const Gauge = createSeries<GaugeProps>('Gauge', ['segment', 'track', 'label'], 'gauge', [registerGaugeSeries]);

packages/react-vchart/src/series/GaugePointer.tsx

@@ -0,0 +1,14 @@
+import type { BaseSeriesProps } from './BaseSeries';
+import { createSeries } from './BaseSeries';
+
+import type { IGaugePointerSeriesSpec } from '@visactor/vchart';
+import { registerGaugePointerSeries } from '@visactor/vchart';
+
+export type GaugePointerProps = BaseSeriesProps & Omit<IGaugePointerSeriesSpec, 'type'>;
+
+export const GaugePointer = createSeries<GaugePointerProps>(
+  'GaugePointer',
+  ['pinBackground', 'pin', 'pointer'],
+  'gaugePointer',
+  [registerGaugePointerSeries]
+);

packages/react-vchart/src/series/Heatmap.tsx

@@ -1,9 +1,10 @@
-import { BaseSeriesProps, createSeries } from './BaseSeries';
+import type { BaseSeriesProps } from './BaseSeries';
+import { createSeries } from './BaseSeries';
 import type { IHeatmapChartSpec } from '@visactor/vchart';
 import { registerHeatmapSeries } from '@visactor/vchart';
 
 export type HeatmapProps = BaseSeriesProps & Omit<IHeatmapChartSpec, 'type'>;
 
-export const Heatmap = createSeries<HeatmapProps>('Treemap', ['cell', 'cellBackground', 'label'], 'heatmap', [
+export const Heatmap = createSeries<HeatmapProps>('Heatmap', ['cell', 'cellBackground', 'label'], 'heatmap', [
   registerHeatmapSeries
 ]);

packages/react-vchart/src/series/Mosaic.tsx

@@ -0,0 +1,8 @@
+import type { BaseSeriesProps } from './BaseSeries';
+import { createSeries } from './BaseSeries';
+import type { IMosaicSeriesSpec } from '@visactor/vchart';
+import { registerMosaicSeries } from '@visactor/vchart';
+
+export type MosaicProps = BaseSeriesProps & Omit<IMosaicSeriesSpec, 'type'>;
+
+export const Mosaic = createSeries<MosaicProps>('Mosaic', ['mosaic'], 'mosaic', [registerMosaicSeries]);

packages/react-vchart/src/series/Pictogram.tsx

@@ -0,0 +1,10 @@
+import type { BaseSeriesProps } from './BaseSeries';
+import { createSeries } from './BaseSeries';
+import type { IPictogramSeriesSpec } from '@visactor/vchart';
+import { registerPictogramSeries } from '@visactor/vchart';
+
+export type PictogramProps = BaseSeriesProps & Omit<IPictogramSeriesSpec, 'type'>;
+
+export const Pictogram = createSeries<PictogramProps>('Pictogram', ['pictogram'], 'pictogram', [
+  registerPictogramSeries
+]);

packages/react-vchart/src/series/RangeArea.tsx

@@ -0,0 +1,10 @@
+import type { BaseSeriesProps } from './BaseSeries';
+import { createSeries } from './BaseSeries';
+import type { IRangeAreaSeriesSpec } from '@visactor/vchart';
+import { registerRangeAreaSeries } from '@visactor/vchart';
+
+export type RangeAreaProps = BaseSeriesProps & Omit<IRangeAreaSeriesSpec, 'type'>;
+
+export const RangeArea = createSeries<RangeAreaProps>('RangeArea', ['rangeArea'], 'rangeArea', [
+  registerRangeAreaSeries
+]);

packages/react-vchart/src/series/Venn.tsx

@@ -0,0 +1,10 @@
+import type { BaseSeriesProps } from './BaseSeries';
+import { createSeries } from './BaseSeries';
+import type { IVennSeriesSpec } from '@visactor/vchart';
+import { registerVennSeries } from '@visactor/vchart';
+
+export type VennProps = BaseSeriesProps & Omit<IVennSeriesSpec, 'type'>;
+
+export const Venn = createSeries<VennProps>('Venn', ['circle', 'overlap', 'overlapLabel'], 'venn', [
+  registerVennSeries
+]);

packages/react-vchart/src/series/index.ts

@@ -13,16 +13,20 @@ export * from './Funnel';
 export * from './Funnel3d';
 
 export * from './Gauge';
+export * from './GaugePointer';
 export * from './Heatmap';
 export * from './Line';
 export * from './LinearProgress';
 export * from './Link';
 export * from './Liquid';
 
 export * from './Map';
+export * from './Mosaic';
+export * from './Pictogram';
 export * from './Pie';
 export * from './Pie3d';
 export * from './Radar';
+export * from './RangeArea';
 export * from './RangeColumn';
 export * from './RangeColumn3d';
 export * from './Rose';
@@ -31,6 +35,7 @@ export * from './Sankey';
 export * from './Scatter';
 export * from './Sunburst';
 export * from './Treemap';
+export * from './Venn';
 export * from './Waterfall';
 export * from './WordCloud';
 export * from './WordCloud3d';

packages/vchart/src/series/index.ts

@@ -71,6 +71,10 @@ import type { ILiquidSeriesSpec } from './liquid/interface';
 import { LiquidSeries, registerLiquidSeries } from './liquid/liquid';
 import type { IVennSeriesSpec } from './venn/interface';
 import { VennSeries, registerVennSeries } from './venn/venn';
+import type { IMosaicSeriesSpec } from './mosaic/interface';
+import { MosaicSeries, registerMosaicSeries } from './mosaic/mosaic';
+import type { IPictogramSeriesSpec } from './pictogram/interface';
+import { PictogramSeries, registerPictogramSeries } from './pictogram/pictogram';
 
 import type { ISeries, ICartesianSeries, IPolarSeries, IGeoSeries } from './interface';
 
@@ -112,7 +116,9 @@ export {
   ProgressLikeSeries,
   CorrelationSeries,
   LiquidSeries,
-  VennSeries
+  VennSeries,
+  PictogramSeries,
+  MosaicSeries
 };
 
 export {
@@ -147,7 +153,9 @@ export {
   registerWordCloud3dSeries,
   registerWordCloudSeries,
   registerLiquidSeries,
-  registerVennSeries
+  registerVennSeries,
+  registerMosaicSeries,
+  registerPictogramSeries
 };
 
 export type {
@@ -191,7 +199,9 @@ export type {
   IWordCloudSeriesSpec,
   ICorrelationSeriesSpec,
   ILiquidSeriesSpec,
-  IVennSeriesSpec
+  IVennSeriesSpec,
+  IMosaicSeriesSpec,
+  IPictogramSeriesSpec
 };
 
 export * from './interface';