feat: introduce CirclePackingChart

Author: kagawagao

__tests__/plots/circle-packing-data.json

@@ -0,0 +1,33 @@
+{
+  "name": "root",
+  "children": [
+    { "name": "Drama", "value": 1046790 },
+    { "name": "Comedy", "value": 1039358 },
+    { "name": "Documentary", "value": 461880 },
+    { "name": "News", "value": 308136 },
+    { "name": "Talk-Show", "value": 270578 },
+    { "name": "Action", "value": 226334 },
+    { "name": "Animation", "value": 197342 },
+    { "name": "Reality-TV", "value": 189739 },
+    { "name": "Crime", "value": 175272 },
+    { "name": "Family", "value": 150621 },
+    { "name": "Short", "value": 138255 },
+    { "name": "Adventure", "value": 121216 },
+    { "name": "Game-Show", "value": 119912 },
+    { "name": "Music", "value": 102488 },
+    { "name": "Adult", "value": 90157 },
+    { "name": "Biography", "value": 59307 },
+    { "name": "Sport", "value": 58999 },
+    { "name": "Romance", "value": 52776 },
+    { "name": "Horror", "value": 50800 },
+    { "name": "Fantasy", "value": 22614 },
+    { "name": "Sci-Fi", "value": 22026 },
+    { "name": "Thriller", "value": 19706 },
+    { "name": "Mystery", "value": 18274 },
+    { "name": "History", "value": 16108 },
+    { "name": "Western", "value": 12535 },
+    { "name": "Musical", "value": 12240 },
+    { "name": "War", "value": 1992 },
+    { "name": "Film-Noir", "value": 36 }
+  ]
+}

__tests__/plots/circle-packing.spec.tsx

@@ -0,0 +1,21 @@
+import { mount } from '@vue/test-utils'
+import CirclePackingChart, {
+  CirclePackingChartProps,
+} from '../../src/plots/circle-packing'
+import data from './circle-packing-data.json'
+
+const config: CirclePackingChartProps = {
+  autoFit: true,
+  data: data as Record<string, any>,
+  label: false,
+  legend: false,
+  hierarchyConfig: {
+    sort: (a, b) => b.depth - a.depth,
+  },
+}
+
+describe('CirclePackingChart', () => {
+  test('should render without crashed', () => {
+    mount(() => <CirclePackingChart {...(config as any)} />)
+  })
+})

package-lock.json

@@ -117,7 +117,7 @@
   "prettier": "@opd/prettier-config-pangu",
   "dependencies": {
     "core-js": "^3.12.1",
-    "vue-demi": "^0.9.0"
+    "vue-demi": "^0.10.1"
   },
   "peerDependencies": {
     "@antv/g2plot": "^2.3.0",

package.json

@@ -1,6 +1,7 @@
 import { defineComponent, Ref } from 'vue-demi'
 import { Plot as BasePlot } from '@antv/g2plot'
 import isEqual from 'lodash/isEqual'
+import isEmpty from 'lodash/isEmpty'
 import { HTMLAttributes } from '@vue/runtime-dom'
 
 interface Options {
@@ -13,10 +14,12 @@ export interface Plot<C extends Options> extends BasePlot<C> {
 
 type PickedAttrs = 'class' | 'style'
 
+type Data = Record<string, any>[] | Record<string, any>
+
 export interface BaseChartProps<C extends Options>
   extends Pick<HTMLAttributes, PickedAttrs> {
   chart: any
-  data: any[]
+  data: Data
   chartRef?: Ref<BasePlot<C> | null>
 }
 
@@ -79,10 +82,10 @@ const BaseChart = defineComponent<
     }
   },
   watch: {
-    chartData(data: any[], oldData: any[]) {
+    chartData(data: Data, oldData: Data) {
       /* istanbul ignore else */
       if (this.plot) {
-        if (!oldData.length) {
+        if (isEmpty(oldData)) {
           this.plot.update({
             data: data,
             ...this.chartConfig,

src/components/base.tsx

@@ -49,6 +49,8 @@ import { ViolinChartProps as _ViolinChartProps } from './plots/violin'
 
 import { FacetChartProps as _FacetChartProps } from './plots/facet'
 
+import { CirclePackingChartProps as _CirclePackingChartProps } from './plots/circle-packing'
+
 export { default as AreaChart } from './plots/area'
 export type AreaChartProps = _AreaChartProps
 
@@ -137,3 +139,5 @@ export { default as ViolinChart } from './plots/violin'
 export type ViolinChartProps = _ViolinChartProps
 export { default as FacetChart } from './plots/facet'
 export type FacetChartProps = _FacetChartProps
+export { default as CirclePackingChart } from './plots/circle-packing'
+export type CirclePackingChartProps = _CirclePackingChartProps

src/index.ts

@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
 export type AreaChartProps = Writeable<
-  Omit<BaseChartProps<AreaOptions>, 'chart'> & AreaOptions
+  Omit<BaseChartProps<AreaOptions>, 'chart' | 'data'> & AreaOptions
 >
 
 const AreaChart = defineComponent<AreaChartProps>({

src/plots/area/index.tsx

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

src/plots/bar/index.tsx

@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
 import { mergeAttrs } from '../../utils'
 
 export type BidirectionalBarChartProps = Writeable<
-  Omit<BaseChartProps<BidirectionalBarOptions>, 'chart'> &
+  Omit<BaseChartProps<BidirectionalBarOptions>, 'chart' | 'data'> &
     BidirectionalBarOptions
 >
 

src/plots/bidirectional-bar/index.tsx

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