feat: introduce new charts

- FacetChart
- ViolinChart

closes: #299

Author: kagawagao

__tests__/plots/facet.spec.tsx

@@ -0,0 +1,42 @@
+import { mount } from '@vue/test-utils'
+import FacetChart, { FacetChartProps } from '../../src/plots/facet'
+
+const config: FacetChartProps = {
+  padding: [0, 10, 10],
+  appendPadding: [0, 0, 30, 20],
+  type: 'rect',
+  fields: ['cut'],
+  cols: 3, // 超过3个换行
+  data: [],
+  axes: {},
+  meta: {
+    carat: {
+      sync: true,
+    },
+    price: {
+      sync: true,
+    },
+    clarity: {
+      sync: true,
+    },
+  },
+  eachView: (view, f) => {
+    return {
+      type: 'scatter',
+      options: {
+        data: f.data,
+        xField: 'carat',
+        yField: 'price',
+        colorField: 'clarity',
+        shape: 'circle',
+        pointStyle: { fillOpacity: 0.3, stroke: null },
+      },
+    }
+  },
+}
+
+describe('FacetChart', () => {
+  test('should render without crashed', () => {
+    mount(() => <FacetChart {...config} />)
+  })
+})

__tests__/plots/violin.spec.tsx

@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils'
+import ViolinChart, { ViolinChartProps } from '../../src/plots/violin'
+
+const config: ViolinChartProps = {
+  data: [],
+  xField: 'a',
+  yField: 'b',
+}
+
+describe('ViolinChart', () => {
+  test('should render without crashed', () => {
+    mount(() => <ViolinChart {...config} />)
+  })
+})

scripts/sync.ts

@@ -69,6 +69,7 @@ import { App, defineComponent } from 'vue-demi'
 import { ${chart}, ${chart}Options } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
 
 export type ${chart}ChartProps = Writeable<Omit<BaseChartProps<${chart}Options>, 'chart'> &
   ${chart}Options>

src/components/base.tsx

@@ -62,14 +62,15 @@ const BaseChart = defineComponent<
   mounted() {
     const chartRef = this.$attrs.chartRef as Ref<BasePlot<any> | null>
     const { chart: Chart } = this.attrConfig
-    this.plot = new Chart(this.$el as HTMLElement, {
+    const plot = new Chart(this.$el as HTMLElement, {
       data: this.chartData,
       ...this.chartConfig,
     })
-    this.plot.render()
+    plot.render()
     if (chartRef) {
-      chartRef.value = this.plot
+      chartRef.value = plot
     }
+    this.plot = plot
   },
   beforeUnmount() {
     /* istanbul ignore else */

src/index.ts

@@ -45,6 +45,10 @@ import { MultiViewChartProps as _MultiViewChartProps } from './plots/multi-view'
 
 import { MixChartProps as _MixChartProps } from './plots/mix'
 
+import { ViolinChartProps as _ViolinChartProps } from './plots/violin'
+
+import { FacetChartProps as _FacetChartProps } from './plots/facet'
+
 export { default as AreaChart } from './plots/area'
 export type AreaChartProps = _AreaChartProps
 
@@ -129,3 +133,7 @@ export { default as MultiViewChart } from './plots/multi-view'
 export type MultiViewChartProps = _MultiViewChartProps
 export { default as MixChart } from './plots/mix'
 export type MixChartProps = _MixChartProps
+export { default as ViolinChart } from './plots/violin'
+export type ViolinChartProps = _ViolinChartProps
+export { default as FacetChart } from './plots/facet'
+export type FacetChartProps = _FacetChartProps

src/plots/facet/index.tsx

@@ -0,0 +1,23 @@
+import { App, defineComponent } from 'vue-demi'
+import { Facet, FacetOptions } from '@antv/g2plot'
+import BaseChart, { BaseChartProps } from '../../components/base'
+import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
+
+export type FacetChartProps = Writeable<
+  Omit<BaseChartProps<FacetOptions>, 'chart'> & FacetOptions
+>
+
+const FacetChart = defineComponent<FacetChartProps>({
+  name: 'FacetChart',
+  setup(props, ctx) {
+    return () => <BaseChart chart={Facet} {...mergeAttrs(props, ctx.attrs)} />
+  },
+})
+
+/* istanbul ignore next */
+FacetChart.install = (app: App) => {
+  app.component(FacetChart.name, FacetChart)
+}
+
+export default FacetChart

src/plots/violin/index.tsx

@@ -0,0 +1,23 @@
+import { App, defineComponent } from 'vue-demi'
+import { Violin, ViolinOptions } from '@antv/g2plot'
+import BaseChart, { BaseChartProps } from '../../components/base'
+import { Writeable } from '../../types'
+import { mergeAttrs } from '../../utils'
+
+export type ViolinChartProps = Writeable<
+  Omit<BaseChartProps<ViolinOptions>, 'chart'> & ViolinOptions
+>
+
+const ViolinChart = defineComponent<ViolinChartProps>({
+  name: 'ViolinChart',
+  setup(props, ctx) {
+    return () => <BaseChart chart={Violin} {...mergeAttrs(props, ctx.attrs)} />
+  },
+})
+
+/* istanbul ignore next */
+ViolinChart.install = (app: App) => {
+  app.component(ViolinChart.name, ViolinChart)
+}
+
+export default ViolinChart