fix: attrs update

fixes: #1392

Author: kagawagao

__tests__/plots/circle-packing.spec.tsx

@@ -1,7 +1,5 @@
 import { mount } from '@vue/test-utils'
-import CirclePackingChart, {
-  CirclePackingChartProps,
-} from '../../src/plots/circle-packing'
+import CirclePackingChart, { CirclePackingChartProps } from '../../src/plots/circle-packing'
 import data from './circle-packing-data.json'
 
 const config: CirclePackingChartProps = {

__tests__/plots/stock.spec.tsx

@@ -15,7 +15,7 @@ const data = [
 const config = {
   width: 400,
   height: 500,
-  data: data,
+  data,
   xField: 'x',
   yField: ['low', 'q1', 'median', 'q3', 'high'],
   boxStyle: {

package-lock.json

@@ -63,8 +63,7 @@
   },
   "homepage": "https://github.com/open-data-plan/g2plot-vue#readme",
   "devDependencies": {
-    "@antv/g2": "^5.1.0",
-    "@antv/g2plot": "^2.3.13",
+    "@antv/g2plot": "^2.4.31",
     "@babel/cli": "^7.12.1",
     "@babel/preset-typescript": "^7.12.1",
     "@commitlint/cli": "^18.0.0",
@@ -79,6 +78,7 @@
     "@vue/babel-preset-jsx": "^1.3.0",
     "@vue/composition-api": "^1.7.0",
     "@vue/test-utils": "^2.0.0-beta.7",
+    "@vue/tsconfig": "^0.5.1",
     "canvas": "^2.6.1",
     "conventional-changelog-cli": "^4.0.0",
     "cross-env": "^7.0.2",

package.json

@@ -1,8 +1,8 @@
-import { defineComponent, Ref } from 'vue-demi'
 import { Plot as BasePlot } from '@antv/g2plot'
-import isEqual from 'lodash/isEqual'
 import isEmpty from 'lodash/isEmpty'
+import isEqual from 'lodash/isEqual'
 import { HTMLAttributes } from 'vue'
+import { defineComponent, Ref } from 'vue-demi'
 
 interface Options {
   [x: string]: any
@@ -16,8 +16,7 @@ type PickedAttrs = 'class' | 'style'
 
 type Data = Record<string, any>[] | Record<string, any>
 
-export interface BaseChartProps<C extends Options>
-  extends Pick<HTMLAttributes, PickedAttrs> {
+export interface BaseChartProps<C extends Options> extends Pick<HTMLAttributes, PickedAttrs> {
   chart: any
   data: Data
   chartRef?: Ref<BasePlot<C> | null>
@@ -34,16 +33,12 @@ export interface BaseChartRawBindings<C extends Options> {
   plot: BasePlot<C>
 }
 
-const BaseChart = defineComponent<
-  BaseChartProps<any>,
-  BaseChartRawBindings<any>,
-  ComputedOptions<any>
->({
+const BaseChart = defineComponent<BaseChartProps<any>, BaseChartRawBindings<any>, ComputedOptions<any>>({
   inheritAttrs: false,
   name: 'BaseChart',
   computed: {
     attrConfig() {
-      return this.$attrs
+      return { ...this.$attrs }
     },
     chartData() {
       const { data } = this.attrConfig
@@ -65,8 +60,7 @@ const BaseChart = defineComponent<
     },
   },
   mounted() {
-    const chartRef = this.$attrs
-      .chartRef as unknown as Ref<BasePlot<any> | null>
+    const chartRef = this.$attrs.chartRef as unknown as Ref<BasePlot<any> | null>
     const { chart: Chart, onReady } = this.attrConfig
     const plot = new Chart(this.$el as HTMLElement, {
       data: this.chartData,

src/components/base.tsx

@@ -1,12 +1,10 @@
-import { App, defineComponent } from 'vue-demi'
 import { Area, AreaOptions } from '@antv/g2plot'
+import { App, defineComponent } from 'vue-demi'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type AreaChartProps = Writeable<
-  Omit<BaseChartProps<AreaOptions>, 'chart' | 'data'> & AreaOptions
->
+export type AreaChartProps = Writeable<Omit<BaseChartProps<AreaOptions>, 'chart' | 'data'> & AreaOptions>
 
 const AreaChart = defineComponent<AreaChartProps>({
   name: 'AreaChart',

src/plots/area/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type BarChartProps = Writeable<
-  Omit<BaseChartProps<BarOptions>, 'chart' | 'data'> & BarOptions
->
+export type BarChartProps = Writeable<Omit<BaseChartProps<BarOptions>, 'chart' | 'data'> & BarOptions>
 
 const BarChart = defineComponent<BarChartProps>({
   name: 'BarChart',

src/plots/bar/index.tsx

@@ -5,16 +5,13 @@ import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
 export type BidirectionalBarChartProps = Writeable<
-  Omit<BaseChartProps<BidirectionalBarOptions>, 'chart' | 'data'> &
-    BidirectionalBarOptions
+  Omit<BaseChartProps<BidirectionalBarOptions>, 'chart' | 'data'> & BidirectionalBarOptions
 >
 
 const BidirectionalBarChart = defineComponent<BidirectionalBarChartProps>({
   name: 'BidirectionalBarChart',
   setup: (props, ctx) => {
-    return () => (
-      <BaseChart chart={BidirectionalBar} {...mergeAttrs(props, ctx.attrs)} />
-    )
+    return () => <BaseChart chart={BidirectionalBar} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/bidirectional-bar/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type BoxChartProps = Writeable<
-  Omit<BaseChartProps<BoxOptions>, 'chart' | 'data'> & BoxOptions
->
+export type BoxChartProps = Writeable<Omit<BaseChartProps<BoxOptions>, 'chart' | 'data'> & BoxOptions>
 
 const BoxChart = defineComponent<BoxChartProps>({
   name: 'BoxChart',

src/plots/box/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type BulletChartProps = Writeable<
-  Omit<BaseChartProps<BulletOptions>, 'chart' | 'data'> & BulletOptions
->
+export type BulletChartProps = Writeable<Omit<BaseChartProps<BulletOptions>, 'chart' | 'data'> & BulletOptions>
 
 const BulletChart = defineComponent<BulletChartProps>({
   name: 'BulletChart',

src/plots/bullet/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type ChordChartProps = Writeable<
-  Omit<BaseChartProps<ChordOptions>, 'chart' | 'data'> & ChordOptions
->
+export type ChordChartProps = Writeable<Omit<BaseChartProps<ChordOptions>, 'chart' | 'data'> & ChordOptions>
 
 const ChordChart = defineComponent<ChordChartProps>({
   name: 'ChordChart',

src/plots/chord/index.tsx

@@ -5,16 +5,13 @@ import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
 export type CirclePackingChartProps = Writeable<
-  Omit<BaseChartProps<CirclePackingOptions>, 'chart' | 'data'> &
-    CirclePackingOptions
+  Omit<BaseChartProps<CirclePackingOptions>, 'chart' | 'data'> & CirclePackingOptions
 >
 
 const CirclePackingChart = defineComponent<CirclePackingChartProps>({
   name: 'CirclePackingChart',
   setup(props, ctx) {
-    return () => (
-      <BaseChart chart={CirclePacking} {...mergeAttrs(props, ctx.attrs)} />
-    )
+    return () => <BaseChart chart={CirclePacking} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/circle-packing/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type ColumnChartProps = Writeable<
-  Omit<BaseChartProps<ColumnOptions>, 'chart' | 'data'> & ColumnOptions
->
+export type ColumnChartProps = Writeable<Omit<BaseChartProps<ColumnOptions>, 'chart' | 'data'> & ColumnOptions>
 
 const ColumnChart = defineComponent<ColumnChartProps>({
   name: 'ColumnChart',

src/plots/column/index.tsx

@@ -4,16 +4,12 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type DualAxesChartProps = Writeable<
-  Omit<BaseChartProps<DualAxesOptions>, 'chart' | 'data'> & DualAxesOptions
->
+export type DualAxesChartProps = Writeable<Omit<BaseChartProps<DualAxesOptions>, 'chart' | 'data'> & DualAxesOptions>
 
 const DualAxesChart = defineComponent<DualAxesChartProps>({
   name: 'DualAxesChart',
   setup: (props, ctx) => {
-    return () => (
-      <BaseChart chart={DualAxes} {...mergeAttrs(props, ctx.attrs)} />
-    )
+    return () => <BaseChart chart={DualAxes} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/dual-axes/index.tsx

@@ -1,12 +1,10 @@
-import { App, defineComponent } from 'vue-demi'
 import { Facet, FacetOptions } from '@antv/g2plot'
+import { App, defineComponent } from 'vue-demi'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type FacetChartProps = Writeable<
-  Omit<BaseChartProps<FacetOptions>, 'chart' | 'data'> & FacetOptions
->
+export type FacetChartProps = Writeable<Omit<BaseChartProps<FacetOptions>, 'chart' | 'data'> & FacetOptions>
 
 const FacetChart = defineComponent<FacetChartProps>({
   name: 'FacetChart',

src/plots/facet/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type FunnelChartProps = Writeable<
-  Omit<BaseChartProps<FunnelOptions>, 'chart' | 'data'> & FunnelOptions
->
+export type FunnelChartProps = Writeable<Omit<BaseChartProps<FunnelOptions>, 'chart' | 'data'> & FunnelOptions>
 
 const FunnelChart = defineComponent<FunnelChartProps>({
   name: 'FunnelChart',

src/plots/funnel/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type GaugeChartProps = Writeable<
-  Omit<BaseChartProps<GaugeOptions>, 'chart' | 'data'> & GaugeOptions
->
+export type GaugeChartProps = Writeable<Omit<BaseChartProps<GaugeOptions>, 'chart' | 'data'> & GaugeOptions>
 
 const GaugeChart = defineComponent<GaugeChartProps>({
   name: 'GaugeChart',

src/plots/gauge/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type HeatmapChartProps = Writeable<
-  Omit<BaseChartProps<HeatmapOptions>, 'chart' | 'data'> & HeatmapOptions
->
+export type HeatmapChartProps = Writeable<Omit<BaseChartProps<HeatmapOptions>, 'chart' | 'data'> & HeatmapOptions>
 
 const HeatmapChart = defineComponent<HeatmapChartProps>({
   name: 'HeatmapChart',

src/plots/heatmap/index.tsx

@@ -4,16 +4,12 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type HistogramChartProps = Writeable<
-  Omit<BaseChartProps<HistogramOptions>, 'chart' | 'data'> & HistogramOptions
->
+export type HistogramChartProps = Writeable<Omit<BaseChartProps<HistogramOptions>, 'chart' | 'data'> & HistogramOptions>
 
 const HistogramChart = defineComponent<HistogramChartProps>({
   name: 'HistogramChart',
   setup: (props, ctx) => {
-    return () => (
-      <BaseChart chart={Histogram} {...mergeAttrs(props, ctx.attrs)} />
-    )
+    return () => <BaseChart chart={Histogram} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/histogram/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type LineChartProps = Writeable<
-  Omit<BaseChartProps<LineOptions>, 'chart' | 'data'> & LineOptions
->
+export type LineChartProps = Writeable<Omit<BaseChartProps<LineOptions>, 'chart' | 'data'> & LineOptions>
 
 const LineChart = defineComponent<LineChartProps>({
   name: 'LineChart',

src/plots/line/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type LiquidChartProps = Writeable<
-  Omit<BaseChartProps<LiquidOptions>, 'chart' | 'data'> & LiquidOptions
->
+export type LiquidChartProps = Writeable<Omit<BaseChartProps<LiquidOptions>, 'chart' | 'data'> & LiquidOptions>
 
 const LiquidChart = defineComponent<LiquidChartProps>({
   name: 'LiquidChart',

src/plots/liquid/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type MixChartProps = Writeable<
-  Omit<BaseChartProps<MixOptions>, 'chart' | 'data'> & MixOptions
->
+export type MixChartProps = Writeable<Omit<BaseChartProps<MixOptions>, 'chart' | 'data'> & MixOptions>
 
 const MixChart = defineComponent<MixChartProps>({
   name: 'MixChart',

src/plots/mix/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type MultiViewChartProps = Writeable<
-  Omit<BaseChartProps<MixOptions>, 'chart' | 'data'> & MixOptions
->
+export type MultiViewChartProps = Writeable<Omit<BaseChartProps<MixOptions>, 'chart' | 'data'> & MixOptions>
 
 /**
  * @deprecated use `MixChart` instead

src/plots/multi-view/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type PieChartProps = Writeable<
-  Omit<BaseChartProps<PieOptions>, 'chart' | 'data'> & PieOptions
->
+export type PieChartProps = Writeable<Omit<BaseChartProps<PieOptions>, 'chart' | 'data'> & PieOptions>
 
 const PieChart = defineComponent<PieChartProps>({
   name: 'PieChart',

src/plots/pie/index.tsx

@@ -4,16 +4,12 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type ProgressChartProps = Writeable<
-  Omit<BaseChartProps<ProgressOptions>, 'chart' | 'data'> & ProgressOptions
->
+export type ProgressChartProps = Writeable<Omit<BaseChartProps<ProgressOptions>, 'chart' | 'data'> & ProgressOptions>
 
 const ProgressChart = defineComponent<ProgressChartProps>({
   name: 'ProgressChart',
   setup: (props, ctx) => {
-    return () => (
-      <BaseChart chart={Progress} {...mergeAttrs(props, ctx.attrs)} />
-    )
+    return () => <BaseChart chart={Progress} {...mergeAttrs(props, ctx.attrs)} />
   },
 })
 

src/plots/progress/index.tsx

@@ -4,9 +4,7 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type RadarChartProps = Writeable<
-  Omit<BaseChartProps<RadarOptions>, 'chart' | 'data'> & RadarOptions
->
+export type RadarChartProps = Writeable<Omit<BaseChartProps<RadarOptions>, 'chart' | 'data'> & RadarOptions>
 
 const RadarChart = defineComponent<RadarChartProps>({
   name: 'RadarChart',

src/plots/radar/index.tsx

@@ -4,16 +4,12 @@ import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
-export type RadialBarChartProps = Writeable<
-  Omit<BaseChartProps<RadialBarOptions>, 'chart' | 'data'> & RadialBarOptions
->
+export type RadialBarChartProps = Writeable<Omit<BaseChartProps<RadialBarOptions>, 'chart' | 'data'> & RadialBarOptions>
 
 const RadialBarChart = defineComponent<RadialBarChartProps>({
   name: 'RadialBarChart',
   setup: (props, ctx) => {
-    return () => (
-      <BaseChart chart={RadialBar} {...mergeAttrs(props, ctx.attrs)} />
-    )
+    return () => <BaseChart chart={RadialBar} {...mergeAttrs(props, ctx.attrs)} />
   },
 })