feat(ConfigProvider): support global configuration

packages/plots/src/components/area/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
-import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { AreaOptions } from '../../core';
-import type { CommonConfig, Chart } from '../../interface';
-import { BaseChart } from '../base';
+import type { Chart, CommonConfig } from '../../interface';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type AreaConfig = CommonConfig<AreaOptions>;
 
-const AreaChart: ForwardRefExoticComponent<PropsWithoutRef<AreaConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  AreaConfig
->((props, ref) => <BaseChart {...props} chartType="Area" ref={ref} />);
+const AreaChart: ForwardRefExoticComponent<PropsWithoutRef<AreaConfig> & RefAttributes<Chart>> =
+  makeChartComp<AreaConfig>('Area');
 
 export default AreaChart;

packages/plots/src/components/bar/index.tsx

@@ -1,14 +1,12 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import { BarOptions } from '../../core';
-import type { CommonConfig, Chart } from '../../interface';
-import { BaseChart } from '../base';
+import type { Chart, CommonConfig } from '../../interface';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type BarConfig = CommonConfig<BarOptions>;
 
-const BarChart: ForwardRefExoticComponent<PropsWithoutRef<BarConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  BarConfig
->((props, ref) => <BaseChart {...props} chartType="Bar" ref={ref} />);
+const BarChart: ForwardRefExoticComponent<PropsWithoutRef<BarConfig> & RefAttributes<Chart>> = makeChartComp<BarConfig>(
+  'Bar'
+);
 
 export default BarChart;

packages/plots/src/components/bidirectional-bar/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { BidirectionalBarOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type BidirectionalBarConfig = CommonConfig<BidirectionalBarOptions>;
 
 const BidirectionalBarChart: ForwardRefExoticComponent<PropsWithoutRef<BidirectionalBarConfig> & RefAttributes<Chart>> =
-  forwardRef<Chart, BidirectionalBarConfig>((props, ref) => (
-    <BaseChart {...props} chartType="BidirectionalBar" ref={ref} />
-  ));
+  makeChartComp<BidirectionalBarConfig>('BidirectionalBar');
 
 export default BidirectionalBarChart;

packages/plots/src/components/box/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { BoxOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type BoxConfig = CommonConfig<BoxOptions>;
 
-const BoxChart: ForwardRefExoticComponent<PropsWithoutRef<BoxConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  BoxConfig
->((props, ref) => <BaseChart {...props} chartType="Box" ref={ref} />);
+const BoxChart: ForwardRefExoticComponent<PropsWithoutRef<BoxConfig> & RefAttributes<Chart>> =
+  makeChartComp<BoxConfig>('Box');
 
 export default BoxChart;

packages/plots/src/components/bullet/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { BulletOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type BulletConfig = CommonConfig<BulletOptions>;
 
-const BulletChart: ForwardRefExoticComponent<PropsWithoutRef<BulletConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  BulletConfig
->((props, ref) => <BaseChart {...props} chartType="Bullet" ref={ref} />);
+const BulletChart: ForwardRefExoticComponent<PropsWithoutRef<BulletConfig> & RefAttributes<Chart>> =
+  makeChartComp<BulletConfig>('Bullet');
 
 export default BulletChart;

packages/plots/src/components/circlePacking/index.tsx

@@ -1,12 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { CirclePackingOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type CirclePackingConfig = CommonConfig<CirclePackingOptions>;
 
 const CirclePackingChart: ForwardRefExoticComponent<PropsWithoutRef<CirclePackingConfig> & RefAttributes<Chart>> =
-  forwardRef<Chart, CirclePackingConfig>((props, ref) => <BaseChart {...props} chartType="CirclePacking" ref={ref} />);
+  makeChartComp<CirclePackingConfig>('CirclePacking');
 
 export default CirclePackingChart;

packages/plots/src/components/column/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { ColumnOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type ColumnConfig = CommonConfig<ColumnOptions>;
 
-const ColumnChart: ForwardRefExoticComponent<PropsWithoutRef<ColumnConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  ColumnConfig
->((props, ref) => <BaseChart {...props} chartType="Column" ref={ref} />);
+const ColumnChart: ForwardRefExoticComponent<PropsWithoutRef<ColumnConfig> & RefAttributes<Chart>> =
+  makeChartComp<ColumnConfig>('Column');
 
 export default ColumnChart;

packages/plots/src/components/config-provider/index.tsx

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+import { ConfigContext, ConfigValue } from '../../context';
+
+export interface ConfigProviderProps extends ConfigValue {
+  children?: ReactNode;
+}
+
+export default function ConfigProvider({ children, ...value }: ConfigProviderProps) {
+  return <ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>;
+}

packages/plots/src/components/dual-axes/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import { DualAxesOptions } from '../../core';
 import { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type DualAxesConfig = CommonConfig<DualAxesOptions>;
 
-const DualAxesChart: ForwardRefExoticComponent<PropsWithoutRef<DualAxesConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  DualAxesConfig
->((props, ref) => <BaseChart {...props} chartType="DualAxes" ref={ref} />);
+const DualAxesChart: ForwardRefExoticComponent<PropsWithoutRef<DualAxesConfig> & RefAttributes<Chart>> =
+  makeChartComp<DualAxesConfig>('DualAxes');
 
 export default DualAxesChart;

packages/plots/src/components/funnel/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { FunnelOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type FunnelConfig = CommonConfig<FunnelOptions>;
 
-const FunnelChart: ForwardRefExoticComponent<PropsWithoutRef<FunnelConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  FunnelConfig
->((props, ref) => <BaseChart {...props} chartType="Funnel" ref={ref} />);
+const FunnelChart: ForwardRefExoticComponent<PropsWithoutRef<FunnelConfig> & RefAttributes<Chart>> =
+  makeChartComp<FunnelConfig>('Funnel');
 
 export default FunnelChart;

packages/plots/src/components/gauge/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { GaugeOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type GaugeConfig = CommonConfig<GaugeOptions>;
 
-const GaugeChart: ForwardRefExoticComponent<PropsWithoutRef<GaugeConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  GaugeConfig
->((props: GaugeConfig, ref) => <BaseChart {...props} chartType="Gauge" ref={ref} />);
+const GaugeChart: ForwardRefExoticComponent<PropsWithoutRef<GaugeConfig> & RefAttributes<Chart>> =
+  makeChartComp<GaugeConfig>('Gauge');
 
 export default GaugeChart;

packages/plots/src/components/heatmap/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { HeatmapOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type HeatmapConfig = CommonConfig<HeatmapOptions>;
 
-const HeatmapChart: ForwardRefExoticComponent<PropsWithoutRef<HeatmapConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  HeatmapConfig
->((props, ref) => <BaseChart {...props} chartType="Heatmap" ref={ref} />);
+const HeatmapChart: ForwardRefExoticComponent<PropsWithoutRef<HeatmapConfig> & RefAttributes<Chart>> =
+  makeChartComp<HeatmapConfig>('Heatmap');
 
 export default HeatmapChart;

packages/plots/src/components/histogram/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { HistogramOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type HistogramConfig = CommonConfig<HistogramOptions>;
 
-const HistogramChart: ForwardRefExoticComponent<PropsWithoutRef<HistogramConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  HistogramConfig
->((props, ref) => <BaseChart {...props} chartType="Histogram" ref={ref} />);
+const HistogramChart: ForwardRefExoticComponent<PropsWithoutRef<HistogramConfig> & RefAttributes<Chart>> =
+  makeChartComp<HistogramConfig>('Histogram');
 
 export default HistogramChart;

packages/plots/src/components/index.ts

@@ -2,6 +2,7 @@ import { BaseChart as Base } from './base';
 import Area from './area';
 import Bar from './bar';
 import Column from './column';
+import ConfigProvider from './config-provider'
 import DualAxes from './dual-axes';
 import Funnel from './funnel';
 import Line from './line';
@@ -61,6 +62,7 @@ export type { SunburstConfig } from './sunburst';
 export {
   Base,
   Column,
+  ConfigProvider,
   Line,
   Pie,
   Area,

packages/plots/src/components/line/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { LineOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type LineConfig = CommonConfig<LineOptions>;
 
-const LineChart: ForwardRefExoticComponent<PropsWithoutRef<LineConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  LineConfig
->((props, ref) => <BaseChart {...props} chartType="Line" ref={ref} />);
+const LineChart: ForwardRefExoticComponent<PropsWithoutRef<LineConfig> & RefAttributes<Chart>> =
+  makeChartComp<LineConfig>('Line');
 
 export default LineChart;

packages/plots/src/components/liquid/index.tsx

@@ -1,15 +1,10 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
-import { BaseChart } from '../base';
-
 import type { LiquidOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-
+import { makeChartComp } from '../../util/makeChartComp';
 export type LiquidConfig = CommonConfig<LiquidOptions>;
 
-const LiquidChart: ForwardRefExoticComponent<PropsWithoutRef<LiquidConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  LiquidConfig
->((props, ref) => <BaseChart {...props} chartType="Liquid" ref={ref} />);
+const LiquidChart: ForwardRefExoticComponent<PropsWithoutRef<LiquidConfig> & RefAttributes<Chart>> =
+  makeChartComp<LiquidConfig>('Liquid');
 
 export default LiquidChart;

packages/plots/src/components/mix/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { MixOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type MixConfig = CommonConfig<MixOptions>;
 
-const MixChart: ForwardRefExoticComponent<PropsWithoutRef<MixConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  MixConfig
->((props, ref) => <BaseChart {...props} chartType="Mix" ref={ref} />);
+const MixChart: ForwardRefExoticComponent<PropsWithoutRef<MixConfig> & RefAttributes<Chart>> =
+  makeChartComp<MixConfig>('Mix');
 
 export default MixChart;

packages/plots/src/components/pie/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { PieOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type PieConfig = CommonConfig<PieOptions>;
 
-const PieChart: ForwardRefExoticComponent<PropsWithoutRef<PieConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  PieConfig
->((props, ref) => <BaseChart {...props} chartType="Pie" ref={ref} />);
+const PieChart: ForwardRefExoticComponent<PropsWithoutRef<PieConfig> & RefAttributes<Chart>> =
+  makeChartComp<PieConfig>('Pie');
 
 export default PieChart;

packages/plots/src/components/radar/index.tsx

@@ -1,15 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
-import { BaseChart } from '../base';
-
 import type { RadarOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type RadarConfig = CommonConfig<RadarOptions>;
 
-const RadarChart: ForwardRefExoticComponent<PropsWithoutRef<RadarConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  RadarConfig
->((props, ref) => <BaseChart {...props} chartType="Radar" ref={ref} />);
+const RadarChart: ForwardRefExoticComponent<PropsWithoutRef<RadarConfig> & RefAttributes<Chart>> =
+  makeChartComp<RadarConfig>('Radar');
 
 export default RadarChart;

packages/plots/src/components/radial-bar/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { RadialBarOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type RadialBarConfig = CommonConfig<RadialBarOptions>;
 
-const RadialBar: ForwardRefExoticComponent<PropsWithoutRef<RadialBarConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  RadialBarConfig
->((props, ref) => <BaseChart {...props} chartType="RadialBar" ref={ref} />);
+const RadialBar: ForwardRefExoticComponent<PropsWithoutRef<RadialBarConfig> & RefAttributes<Chart>> =
+  makeChartComp<RadialBarConfig>('RadialBar');
 
 export default RadialBar;

packages/plots/src/components/rose/index.tsx

@@ -1,15 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
-import { BaseChart } from '../base';
-
 import type { RoseOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type RoseConfig = CommonConfig<RoseOptions>;
 
-const RoseChart: ForwardRefExoticComponent<PropsWithoutRef<RoseConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  RoseConfig
->((props, ref) => <BaseChart {...props} chartType="Rose" ref={ref} />);
+const RoseChart: ForwardRefExoticComponent<PropsWithoutRef<RoseConfig> & RefAttributes<Chart>> =
+  makeChartComp<RoseConfig>('Rose');
 
 export default RoseChart;

packages/plots/src/components/sankey/index.tsx

@@ -1,14 +1,11 @@
-import React, { forwardRef } from 'react';
 import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import type { SankeyOptions } from '../../core';
 import type { Chart, CommonConfig } from '../../interface';
-import { BaseChart } from '../base';
+import { makeChartComp } from '../../util/makeChartComp';
 
 export type SankeyConfig = CommonConfig<SankeyOptions>;
 
-const SankeyChart: ForwardRefExoticComponent<PropsWithoutRef<SankeyConfig> & RefAttributes<Chart>> = forwardRef<
-  Chart,
-  SankeyConfig
->((props, ref) => <BaseChart {...props} chartType="Sankey" ref={ref} />);
+const SankeyChart: ForwardRefExoticComponent<PropsWithoutRef<SankeyConfig> & RefAttributes<Chart>> =
+  makeChartComp<SankeyConfig>('Sankey');
 
 export default SankeyChart;