fix: compatible with vue 2

Author: kagawagao

src/plots/area/index.tsx

@@ -2,6 +2,7 @@ import { App, defineComponent } from 'vue-demi'
 import { Area, AreaOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type AreaChartProps = Writeable<
   Omit<BaseChartProps<AreaOptions>, 'chart'> & AreaOptions
@@ -10,7 +11,7 @@ export type AreaChartProps = Writeable<
 const AreaChart = defineComponent<AreaChartProps>({
   name: 'AreaChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Area} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Area} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/bar/index.tsx

@@ -2,6 +2,7 @@ import { App, defineComponent } from 'vue-demi'
 import { Bar, BarOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type BarChartProps = Writeable<
   Omit<BaseChartProps<BarOptions>, 'chart'> & BarOptions
@@ -10,7 +11,7 @@ export type BarChartProps = Writeable<
 const BarChart = defineComponent<BarChartProps>({
   name: 'BarChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Bar} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Bar} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/bidirectional-bar/index.tsx

@@ -2,6 +2,7 @@ import { App, defineComponent } from 'vue-demi'
 import { BidirectionalBar, BidirectionalBarOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type BidirectionalBarChartProps = Writeable<
   Omit<BaseChartProps<BidirectionalBarOptions>, 'chart'> &
@@ -12,7 +13,7 @@ const BidirectionalBarChart = defineComponent<BidirectionalBarChartProps>({
   name: 'BidirectionalBarChart',
   setup: (props, ctx) => {
     return () => (
-      <BaseChart chart={BidirectionalBar} {...ctx.attrs} {...props} />
+      <BaseChart chart={BidirectionalBar} {...mergeAttrs(props, ctx.attrs)} />
     )
   },
 })

src/plots/box/index.tsx

@@ -2,6 +2,7 @@ import { App, defineComponent } from 'vue-demi'
 import { Box, BoxOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type BoxChartProps = Writeable<
   Omit<BaseChartProps<BoxOptions>, 'chart'> & BoxOptions
@@ -10,7 +11,7 @@ export type BoxChartProps = Writeable<
 const BoxChart = defineComponent<BoxChartProps>({
   name: 'BoxChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Box} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Box} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/bullet/index.tsx

@@ -2,6 +2,7 @@ import { App, defineComponent } from 'vue-demi'
 import { Bullet, BulletOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type BulletChartProps = Writeable<
   Omit<BaseChartProps<BulletOptions>, 'chart'> & BulletOptions
@@ -10,7 +11,7 @@ export type BulletChartProps = Writeable<
 const BulletChart = defineComponent<BulletChartProps>({
   name: 'BulletChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Bullet} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Bullet} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/chord/index.tsx

@@ -2,6 +2,7 @@ import { App, defineComponent } from 'vue-demi'
 import { Chord, ChordOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type ChordChartProps = Writeable<
   Omit<BaseChartProps<ChordOptions>, 'chart'> & ChordOptions
@@ -10,7 +11,7 @@ export type ChordChartProps = Writeable<
 const ChordChart = defineComponent<ChordChartProps>({
   name: 'ChordChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Chord} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Chord} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/column/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, App } from 'vue-demi'
 import { Column, ColumnOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type ColumnChartProps = Writeable<
   Omit<BaseChartProps<ColumnOptions>, 'chart'> & ColumnOptions
@@ -10,7 +11,7 @@ export type ColumnChartProps = Writeable<
 const ColumnChart = defineComponent<ColumnChartProps>({
   name: 'ColumnChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Column} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Column} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/dual-axes/index.tsx

@@ -2,6 +2,7 @@ import { App, defineComponent } from 'vue-demi'
 import { DualAxes, DualAxesOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type DualAxesChartProps = Writeable<
   Omit<BaseChartProps<DualAxesOptions>, 'chart'> & DualAxesOptions
@@ -10,7 +11,9 @@ export type DualAxesChartProps = Writeable<
 const DualAxesChart = defineComponent<DualAxesChartProps>({
   name: 'DualAxesChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={DualAxes} {...ctx.attrs} {...props} />
+    return () => (
+      <BaseChart chart={DualAxes} {...mergeAttrs(props, ctx.attrs)} />
+    )
   },
 })
 

src/plots/funnel/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, App } from 'vue-demi'
 import { Funnel, FunnelOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type FunnelChartProps = Writeable<
   Omit<BaseChartProps<FunnelOptions>, 'chart'> & FunnelOptions
@@ -10,7 +11,7 @@ export type FunnelChartProps = Writeable<
 const FunnelChart = defineComponent<FunnelChartProps>({
   name: 'FunnelChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Funnel} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Funnel} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/gauge/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, App } from 'vue-demi'
 import { Gauge, GaugeOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type GaugeChartProps = Writeable<
   Omit<BaseChartProps<GaugeOptions>, 'chart'> & GaugeOptions
@@ -10,7 +11,7 @@ export type GaugeChartProps = Writeable<
 const GaugeChart = defineComponent<GaugeChartProps>({
   name: 'GaugeChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Gauge} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Gauge} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/heatmap/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, App } from 'vue-demi'
 import { Heatmap, HeatmapOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type HeatmapChartProps = Writeable<
   Omit<BaseChartProps<HeatmapOptions>, 'chart'> & HeatmapOptions
@@ -10,7 +11,7 @@ export type HeatmapChartProps = Writeable<
 const HeatmapChart = defineComponent<HeatmapChartProps>({
   name: 'HeatmapChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Heatmap} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Heatmap} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/histogram/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, App } from 'vue-demi'
 import { Histogram, HistogramOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type HistogramChartProps = Writeable<
   Omit<BaseChartProps<HistogramOptions>, 'chart'> & HistogramOptions
@@ -10,7 +11,9 @@ export type HistogramChartProps = Writeable<
 const HistogramChart = defineComponent<HistogramChartProps>({
   name: 'HistogramChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Histogram} {...ctx.attrs} {...props} />
+    return () => (
+      <BaseChart chart={Histogram} {...mergeAttrs(props, ctx.attrs)} />
+    )
   },
 })
 

src/plots/line/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, App } from 'vue-demi'
 import { Line, LineOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type LineChartProps = Writeable<
   Omit<BaseChartProps<LineOptions>, 'chart'> & LineOptions
@@ -10,7 +11,7 @@ export type LineChartProps = Writeable<
 const LineChart = defineComponent<LineChartProps>({
   name: 'LineChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Line} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Line} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/liquid/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, App } from 'vue-demi'
 import { Liquid, LiquidOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type LiquidChartProps = Writeable<
   Omit<BaseChartProps<LiquidOptions>, 'chart'> & LiquidOptions
@@ -10,7 +11,7 @@ export type LiquidChartProps = Writeable<
 const LiquidChart = defineComponent<LiquidChartProps>({
   name: 'LiquidChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Liquid} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Liquid} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/multi-view/index.tsx

@@ -2,6 +2,7 @@ import { App, defineComponent } from 'vue-demi'
 import { MultiView, MultiViewOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type MultiViewChartProps = Writeable<
   Omit<BaseChartProps<MultiViewOptions>, 'chart'> & MultiViewOptions
@@ -10,7 +11,9 @@ export type MultiViewChartProps = Writeable<
 const MultiViewChart = defineComponent<MultiViewChartProps>({
   name: 'MultiViewChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={MultiView} {...ctx.attrs} {...props} />
+    return () => (
+      <BaseChart chart={MultiView} {...mergeAttrs(props, ctx.attrs)} />
+    )
   },
 })
 

src/plots/pie/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, App } from 'vue-demi'
 import { Pie, PieOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type PieChartProps = Writeable<
   Omit<BaseChartProps<PieOptions>, 'chart'> & PieOptions
@@ -10,7 +11,7 @@ export type PieChartProps = Writeable<
 const PieChart = defineComponent<PieChartProps>({
   name: 'PieChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Pie} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Pie} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/progress/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, App } from 'vue-demi'
 import { Progress, ProgressOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type ProgressChartProps = Writeable<
   Omit<BaseChartProps<ProgressOptions>, 'chart'> & ProgressOptions
@@ -10,7 +11,9 @@ export type ProgressChartProps = Writeable<
 const ProgressChart = defineComponent<ProgressChartProps>({
   name: 'ProgressChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Progress} {...ctx.attrs} {...props} />
+    return () => (
+      <BaseChart chart={Progress} {...mergeAttrs(props, ctx.attrs)} />
+    )
   },
 })
 

src/plots/radar/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, App } from 'vue-demi'
 import { Radar, RadarOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type RadarChartProps = Writeable<
   Omit<BaseChartProps<RadarOptions>, 'chart'> & RadarOptions
@@ -10,7 +11,7 @@ export type RadarChartProps = Writeable<
 const RadarChart = defineComponent<RadarChartProps>({
   name: 'RadarChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Radar} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Radar} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/radial-bar/index.tsx

@@ -2,6 +2,7 @@ import { App, defineComponent } from 'vue-demi'
 import { RadialBar, RadialBarOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type RadialBarChartProps = Writeable<
   Omit<BaseChartProps<RadialBarOptions>, 'chart'> & RadialBarOptions
@@ -10,7 +11,9 @@ export type RadialBarChartProps = Writeable<
 const RadialBarChart = defineComponent<RadialBarChartProps>({
   name: 'RadialBarChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={RadialBar} {...ctx.attrs} {...props} />
+    return () => (
+      <BaseChart chart={RadialBar} {...mergeAttrs(props, ctx.attrs)} />
+    )
   },
 })
 

src/plots/ring-progress/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, App } from 'vue-demi'
 import { RingProgress, RingProgressOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type RingProgressChartProps = Writeable<
   Omit<BaseChartProps<RingProgressOptions>, 'chart'> & RingProgressOptions
@@ -10,7 +11,9 @@ export type RingProgressChartProps = Writeable<
 const RingProgressChart = defineComponent<RingProgressChartProps>({
   name: 'RingProgressChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={RingProgress} {...ctx.attrs} {...props} />
+    return () => (
+      <BaseChart chart={RingProgress} {...mergeAttrs(props, ctx.attrs)} />
+    )
   },
 })
 

src/plots/rose/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, App } from 'vue-demi'
 import { Rose, RoseOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type RoseChartProps = Writeable<
   Omit<BaseChartProps<RoseOptions>, 'chart'> & RoseOptions
@@ -10,7 +11,7 @@ export type RoseChartProps = Writeable<
 const RoseChart = defineComponent<RoseChartProps>({
   name: 'RoseChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Rose} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Rose} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/sankey/index.tsx

@@ -2,6 +2,7 @@ import { App, defineComponent } from 'vue-demi'
 import { Sankey, SankeyOptions } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type SankeyChartProps = Writeable<
   Omit<BaseChartProps<SankeyOptions>, 'chart'> & SankeyOptions
@@ -10,7 +11,7 @@ export type SankeyChartProps = Writeable<
 const SankeyChart = defineComponent<SankeyChartProps>({
   name: 'SankeyChart',
   setup: (props, ctx) => {
-    return () => <BaseChart chart={Sankey} {...ctx.attrs} {...props} />
+    return () => <BaseChart chart={Sankey} {...mergeAttrs(props, ctx.attrs)} />
   },
 })