feat: add MultiViewChart

Author: kagawagao

.eslintrc.js

@@ -6,11 +6,9 @@ module.exports = {
   extends: [
     'plugin:vue/vue3-strongly-recommended',
     'standard',
+    'prettier',
     'plugin:prettier/recommended',
-    'prettier/vue',
-    'prettier/@typescript-eslint',
     'plugin:@typescript-eslint/recommended',
-    'prettier/@typescript-eslint',
   ],
   plugins: ['prettier', '@typescript-eslint'],
   parser: 'vue-eslint-parser',

__tests__/plots/multi-view.spec.tsx

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

src/index.ts

@@ -41,6 +41,8 @@ import { SankeyChartProps as _SankeyChartProps } from './plots/sankey'
 
 import { ChordChartProps as _ChordChartProps } from './plots/chord'
 
+import { MultiViewChartProps as _MultiViewChartProps } from './plots/multi-view'
+
 export { default as AreaChart } from './plots/area'
 export type AreaChartProps = _AreaChartProps
 
@@ -121,3 +123,5 @@ export { default as SankeyChart } from './plots/sankey'
 export type SankeyChartProps = _SankeyChartProps
 export { default as ChordChart } from './plots/chord'
 export type ChordChartProps = _ChordChartProps
+export { default as MultiViewChart } from './plots/multi-view'
+export type MultiViewChartProps = _MultiViewChartProps

src/plots/multi-view/index.tsx

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

tsconfig.sync.json

@@ -15,7 +15,7 @@
     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     // "outDir": "./lib" /* Redirect output structure to the directory. */,
-    "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
+    "rootDir": "." /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
     // "composite": true,                     /* Enable project compilation */
     // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
     // "removeComments": true,                /* Do not emit comments to output. */