Skip to content

Commit 30014a6

Browse files
kagawagaokagawagao
committed
feat: introduce CirclePackingChart
1 parent 2a0933e commit 30014a6

File tree

39 files changed

+136
-46
lines changed

39 files changed

+136
-46
lines changed

‎__tests__/plots/circle-packing-data.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "root",
3+
"children": [
4+
{ "name": "Drama", "value": 1046790 },
5+
{ "name": "Comedy", "value": 1039358 },
6+
{ "name": "Documentary", "value": 461880 },
7+
{ "name": "News", "value": 308136 },
8+
{ "name": "Talk-Show", "value": 270578 },
9+
{ "name": "Action", "value": 226334 },
10+
{ "name": "Animation", "value": 197342 },
11+
{ "name": "Reality-TV", "value": 189739 },
12+
{ "name": "Crime", "value": 175272 },
13+
{ "name": "Family", "value": 150621 },
14+
{ "name": "Short", "value": 138255 },
15+
{ "name": "Adventure", "value": 121216 },
16+
{ "name": "Game-Show", "value": 119912 },
17+
{ "name": "Music", "value": 102488 },
18+
{ "name": "Adult", "value": 90157 },
19+
{ "name": "Biography", "value": 59307 },
20+
{ "name": "Sport", "value": 58999 },
21+
{ "name": "Romance", "value": 52776 },
22+
{ "name": "Horror", "value": 50800 },
23+
{ "name": "Fantasy", "value": 22614 },
24+
{ "name": "Sci-Fi", "value": 22026 },
25+
{ "name": "Thriller", "value": 19706 },
26+
{ "name": "Mystery", "value": 18274 },
27+
{ "name": "History", "value": 16108 },
28+
{ "name": "Western", "value": 12535 },
29+
{ "name": "Musical", "value": 12240 },
30+
{ "name": "War", "value": 1992 },
31+
{ "name": "Film-Noir", "value": 36 }
32+
]
33+
}

‎__tests__/plots/circle-packing.spec.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { mount } from '@vue/test-utils'
2+
import CirclePackingChart, {
3+
CirclePackingChartProps,
4+
} from '../../src/plots/circle-packing'
5+
import data from './circle-packing-data.json'
6+
7+
const config: CirclePackingChartProps = {
8+
autoFit: true,
9+
data: data as Record<string, any>,
10+
label: false,
11+
legend: false,
12+
hierarchyConfig: {
13+
sort: (a, b) => b.depth - a.depth,
14+
},
15+
}
16+
17+
describe('CirclePackingChart', () => {
18+
test('should render without crashed', () => {
19+
mount(() => <CirclePackingChart {...(config as any)} />)
20+
})
21+
})

‎package-lock.json

+12-10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
"prettier": "@opd/prettier-config-pangu",
118118
"dependencies": {
119119
"core-js": "^3.12.1",
120-
"vue-demi": "^0.9.0"
120+
"vue-demi": "^0.10.1"
121121
},
122122
"peerDependencies": {
123123
"@antv/g2plot": "^2.3.0",

‎src/components/base.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { defineComponent, Ref } from 'vue-demi'
22
import { Plot as BasePlot } from '@antv/g2plot'
33
import isEqual from 'lodash/isEqual'
4+
import isEmpty from 'lodash/isEmpty'
45
import { HTMLAttributes } from '@vue/runtime-dom'
56

67
interface Options {
@@ -13,10 +14,12 @@ export interface Plot<C extends Options> extends BasePlot<C> {
1314

1415
type PickedAttrs = 'class' | 'style'
1516

17+
type Data = Record<string, any>[] | Record<string, any>
18+
1619
export interface BaseChartProps<C extends Options>
1720
extends Pick<HTMLAttributes, PickedAttrs> {
1821
chart: any
19-
data: any[]
22+
data: Data
2023
chartRef?: Ref<BasePlot<C> | null>
2124
}
2225

@@ -79,10 +82,10 @@ const BaseChart = defineComponent<
7982
}
8083
},
8184
watch: {
82-
chartData(data: any[], oldData: any[]) {
85+
chartData(data: Data, oldData: Data) {
8386
/* istanbul ignore else */
8487
if (this.plot) {
85-
if (!oldData.length) {
88+
if (isEmpty(oldData)) {
8689
this.plot.update({
8790
data: data,
8891
...this.chartConfig,

‎src/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ import { ViolinChartProps as _ViolinChartProps } from './plots/violin'
4949

5050
import { FacetChartProps as _FacetChartProps } from './plots/facet'
5151

52+
import { CirclePackingChartProps as _CirclePackingChartProps } from './plots/circle-packing'
53+
5254
export { default as AreaChart } from './plots/area'
5355
export type AreaChartProps = _AreaChartProps
5456

@@ -137,3 +139,5 @@ export { default as ViolinChart } from './plots/violin'
137139
export type ViolinChartProps = _ViolinChartProps
138140
export { default as FacetChart } from './plots/facet'
139141
export type FacetChartProps = _FacetChartProps
142+
export { default as CirclePackingChart } from './plots/circle-packing'
143+
export type CirclePackingChartProps = _CirclePackingChartProps

‎src/plots/area/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type AreaChartProps = Writeable<
8-
Omit<BaseChartProps<AreaOptions>, 'chart'> & AreaOptions
8+
Omit<BaseChartProps<AreaOptions>, 'chart' | 'data'> & AreaOptions
99
>
1010

1111
const AreaChart = defineComponent<AreaChartProps>({

‎src/plots/bar/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type BarChartProps = Writeable<
8-
Omit<BaseChartProps<BarOptions>, 'chart'> & BarOptions
8+
Omit<BaseChartProps<BarOptions>, 'chart' | 'data'> & BarOptions
99
>
1010

1111
const BarChart = defineComponent<BarChartProps>({

‎src/plots/bidirectional-bar/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type BidirectionalBarChartProps = Writeable<
8-
Omit<BaseChartProps<BidirectionalBarOptions>, 'chart'> &
8+
Omit<BaseChartProps<BidirectionalBarOptions>, 'chart' | 'data'> &
99
BidirectionalBarOptions
1010
>
1111

‎src/plots/box/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type BoxChartProps = Writeable<
8-
Omit<BaseChartProps<BoxOptions>, 'chart'> & BoxOptions
8+
Omit<BaseChartProps<BoxOptions>, 'chart' | 'data'> & BoxOptions
99
>
1010

1111
const BoxChart = defineComponent<BoxChartProps>({

‎src/plots/bullet/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type BulletChartProps = Writeable<
8-
Omit<BaseChartProps<BulletOptions>, 'chart'> & BulletOptions
8+
Omit<BaseChartProps<BulletOptions>, 'chart' | 'data'> & BulletOptions
99
>
1010

1111
const BulletChart = defineComponent<BulletChartProps>({

‎src/plots/chord/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type ChordChartProps = Writeable<
8-
Omit<BaseChartProps<ChordOptions>, 'chart'> & ChordOptions
8+
Omit<BaseChartProps<ChordOptions>, 'chart' | 'data'> & ChordOptions
99
>
1010

1111
const ChordChart = defineComponent<ChordChartProps>({

‎src/plots/circle-packing/index.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { App, defineComponent } from 'vue-demi'
2+
import { CirclePacking, CirclePackingOptions } from '@antv/g2plot'
3+
import BaseChart, { BaseChartProps } from '../../components/base'
4+
import { Writeable } from '../../types'
5+
import { mergeAttrs } from '../../utils'
6+
7+
export type CirclePackingChartProps = Writeable<
8+
Omit<BaseChartProps<CirclePackingOptions>, 'chart' | 'data'> &
9+
CirclePackingOptions
10+
>
11+
12+
const CirclePackingChart = defineComponent<CirclePackingChartProps>({
13+
name: 'CirclePackingChart',
14+
setup(props, ctx) {
15+
return () => (
16+
<BaseChart chart={CirclePacking} {...mergeAttrs(props, ctx.attrs)} />
17+
)
18+
},
19+
})
20+
21+
/* istanbul ignore next */
22+
CirclePackingChart.install = (app: App) => {
23+
app.component(CirclePackingChart.name, CirclePackingChart)
24+
}
25+
26+
export default CirclePackingChart

‎src/plots/column/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type ColumnChartProps = Writeable<
8-
Omit<BaseChartProps<ColumnOptions>, 'chart'> & ColumnOptions
8+
Omit<BaseChartProps<ColumnOptions>, 'chart' | 'data'> & ColumnOptions
99
>
1010

1111
const ColumnChart = defineComponent<ColumnChartProps>({

‎src/plots/dual-axes/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type DualAxesChartProps = Writeable<
8-
Omit<BaseChartProps<DualAxesOptions>, 'chart'> & DualAxesOptions
8+
Omit<BaseChartProps<DualAxesOptions>, 'chart' | 'data'> & DualAxesOptions
99
>
1010

1111
const DualAxesChart = defineComponent<DualAxesChartProps>({

‎src/plots/facet/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type FacetChartProps = Writeable<
8-
Omit<BaseChartProps<FacetOptions>, 'chart'> & FacetOptions
8+
Omit<BaseChartProps<FacetOptions>, 'chart' | 'data'> & FacetOptions
99
>
1010

1111
const FacetChart = defineComponent<FacetChartProps>({

‎src/plots/funnel/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type FunnelChartProps = Writeable<
8-
Omit<BaseChartProps<FunnelOptions>, 'chart'> & FunnelOptions
8+
Omit<BaseChartProps<FunnelOptions>, 'chart' | 'data'> & FunnelOptions
99
>
1010

1111
const FunnelChart = defineComponent<FunnelChartProps>({

‎src/plots/gauge/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type GaugeChartProps = Writeable<
8-
Omit<BaseChartProps<GaugeOptions>, 'chart'> & GaugeOptions
8+
Omit<BaseChartProps<GaugeOptions>, 'chart' | 'data'> & GaugeOptions
99
>
1010

1111
const GaugeChart = defineComponent<GaugeChartProps>({

‎src/plots/heatmap/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type HeatmapChartProps = Writeable<
8-
Omit<BaseChartProps<HeatmapOptions>, 'chart'> & HeatmapOptions
8+
Omit<BaseChartProps<HeatmapOptions>, 'chart' | 'data'> & HeatmapOptions
99
>
1010

1111
const HeatmapChart = defineComponent<HeatmapChartProps>({

‎src/plots/histogram/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type HistogramChartProps = Writeable<
8-
Omit<BaseChartProps<HistogramOptions>, 'chart'> & HistogramOptions
8+
Omit<BaseChartProps<HistogramOptions>, 'chart' | 'data'> & HistogramOptions
99
>
1010

1111
const HistogramChart = defineComponent<HistogramChartProps>({

‎src/plots/line/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type LineChartProps = Writeable<
8-
Omit<BaseChartProps<LineOptions>, 'chart'> & LineOptions
8+
Omit<BaseChartProps<LineOptions>, 'chart' | 'data'> & LineOptions
99
>
1010

1111
const LineChart = defineComponent<LineChartProps>({

‎src/plots/liquid/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type LiquidChartProps = Writeable<
8-
Omit<BaseChartProps<LiquidOptions>, 'chart'> & LiquidOptions
8+
Omit<BaseChartProps<LiquidOptions>, 'chart' | 'data'> & LiquidOptions
99
>
1010

1111
const LiquidChart = defineComponent<LiquidChartProps>({

‎src/plots/pie/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type PieChartProps = Writeable<
8-
Omit<BaseChartProps<PieOptions>, 'chart'> & PieOptions
8+
Omit<BaseChartProps<PieOptions>, 'chart' | 'data'> & PieOptions
99
>
1010

1111
const PieChart = defineComponent<PieChartProps>({

‎src/plots/progress/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type ProgressChartProps = Writeable<
8-
Omit<BaseChartProps<ProgressOptions>, 'chart'> & ProgressOptions
8+
Omit<BaseChartProps<ProgressOptions>, 'chart' | 'data'> & ProgressOptions
99
>
1010

1111
const ProgressChart = defineComponent<ProgressChartProps>({

‎src/plots/radar/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type RadarChartProps = Writeable<
8-
Omit<BaseChartProps<RadarOptions>, 'chart'> & RadarOptions
8+
Omit<BaseChartProps<RadarOptions>, 'chart' | 'data'> & RadarOptions
99
>
1010

1111
const RadarChart = defineComponent<RadarChartProps>({

‎src/plots/radial-bar/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type RadialBarChartProps = Writeable<
8-
Omit<BaseChartProps<RadialBarOptions>, 'chart'> & RadialBarOptions
8+
Omit<BaseChartProps<RadialBarOptions>, 'chart' | 'data'> & RadialBarOptions
99
>
1010

1111
const RadialBarChart = defineComponent<RadialBarChartProps>({

‎src/plots/ring-progress/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { Writeable } from '../../types'
55
import { mergeAttrs } from '../../utils'
66

77
export type RingProgressChartProps = Writeable<
8-
Omit<BaseChartProps<RingProgressOptions>, 'chart'> & RingProgressOptions
8+
Omit<BaseChartProps<RingProgressOptions>, 'chart' | 'data'> &
9+
RingProgressOptions
910
>
1011

1112
const RingProgressChart = defineComponent<RingProgressChartProps>({

0 commit comments

Comments
 (0)