feat: supply more chart types into vchart libs

src/components/GoVChart/transformProps/areas.ts

@@ -0,0 +1,32 @@
+import { cloneDeep } from "lodash"
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+  delete spec.category
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+  // axis
+  const { name: xAxisName, ...restXAxisProps } = chartProps.xAxis
+  const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
+  spec.axes = [{
+    orient: 'bottom',
+    ...restXAxisProps
+  }, {
+    orient: 'left',
+    ...restYAxisProps
+  }]
+  delete spec.xAxis
+  delete spec.yAxis
+  // console.log('spec-area-transform', spec)
+  return spec
+}

src/components/GoVChart/transformProps/bars.ts

@@ -20,13 +20,15 @@ export default (chartProps: any) => {
   const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
   spec.axes = [{
     orient: 'bottom',
-    ...restXAxisProps
+    ...restXAxisProps,
+    // paddingInner: 0.5
   }, {
     orient: 'left',
     ...restYAxisProps
   }]
+
   delete spec.xAxis
   delete spec.yAxis
-  console.log('spec-transform', spec)
+  // console.log('spec-bar-transform', spec)
   return spec
 }

src/components/GoVChart/transformProps/funnels.ts

@@ -0,0 +1,28 @@
+import { Datum } from "@visactor/vchart/esm/typings"
+import { cloneDeep } from "lodash"
+const INNER_RADIUS = 0.75
+const OUTER_RADIUS = 0.68
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+  // label
+  spec.label = {
+    visible: true,
+  }
+
+  // console.log('spec-funnel-transform', spec)
+  return spec
+}

src/components/GoVChart/transformProps/index.ts

@@ -1,8 +1,20 @@
 import { ChatCategoryEnum, IOption } from "@/packages/components/VChart/index.d";
 import bars from './bars'
+import pies from './pies'
+import lines from './lines'
+import areas from './areas'
+import funnels from "./funnels";
+import wordClouds from "./wordClouds";
+import scatters from "./scatters";
 export const transformHandler: {
   [key: string]: (args: IOption) => any
 } = {
   [ChatCategoryEnum.BAR]: bars,
+  [ChatCategoryEnum.PIE]: pies,
+  [ChatCategoryEnum.LINE]: lines,
+  [ChatCategoryEnum.AREA]: areas,
+  [ChatCategoryEnum.FUNNEL]: funnels,
+  [ChatCategoryEnum.WORDCLOUD]: wordClouds,
+  [ChatCategoryEnum.SCATTER]: scatters,
   // todo: more charts handler
 }

src/components/GoVChart/transformProps/lines.ts

@@ -0,0 +1,32 @@
+import { cloneDeep } from "lodash"
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+  delete spec.category
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+  // axis
+  const { name: xAxisName, ...restXAxisProps } = chartProps.xAxis
+  const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
+  spec.axes = [{
+    orient: 'bottom',
+    ...restXAxisProps
+  }, {
+    orient: 'left',
+    ...restYAxisProps
+  }]
+  delete spec.xAxis
+  delete spec.yAxis
+  // console.log('spec-line-transform', spec)
+  return spec
+}

src/components/GoVChart/transformProps/pies.ts

@@ -0,0 +1,139 @@
+import { Datum } from "@visactor/vchart/esm/typings"
+import { cloneDeep } from "lodash"
+const INNER_RADIUS = 0.75
+const OUTER_RADIUS = 0.68
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+  delete spec.category
+
+  spec.innerRadius = INNER_RADIUS
+  spec.outerRadius = OUTER_RADIUS
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+  // extensionMark
+  spec.extensionMark = [
+    {
+      name: 'arc_inner_shadow',
+      type: 'arc',
+      dataId: 'id0',
+      style: {
+        interactive: false,
+        startAngle: (datum: Datum) => {
+          console.log('startAngle', datum)
+          return datum['__VCHART_ARC_START_ANGLE'];
+        },
+        endAngle: (datum: Datum) => {
+          return datum['__VCHART_ARC_END_ANGLE'];
+        },
+        innerRadius: (datum: Datum, context: any) => {
+          return context.getLayoutRadius() * spec.innerRadius - 30;
+        },
+        outerRadius: (datum: Datum, context: any) => {
+          return context.getLayoutRadius() * spec.innerRadius;
+        },
+        fillOpacity: 0.3,
+        fill: (datum: Datum, context: any) => {
+          console.log('context', context.seriesColor(datum[spec.seriesField]))
+          return context.seriesColor(datum[spec.seriesField]);
+        },
+        visible: true,
+        x: (datum: Datum, context: any) => {
+          return context.getCenter().x();
+        },
+        y: (datum: Datum, context: any) => {
+          return context.getCenter().y();
+        }
+      }
+    },
+    {
+      name: 'arc_inner',
+      type: 'symbol',
+      // dataId: 'id0',
+      style: {
+        interactive: false,
+        size: (datum: Datum, context: any) => {
+          return context.getLayoutRadius() * 2 * spec.innerRadius - 100;
+        },
+        fillOpacity: 0,
+        lineWidth: 1,
+        strokeOpacity: 0.5,
+        stroke: {
+          gradient: 'conical',
+          startAngle: 0,
+          endAngle: Math.PI * 2,
+          stops: [
+            {
+              offset: 0,
+              color: '#FFF',
+              opacity: 0
+            },
+            {
+              offset: 1,
+              color: '#FFF',
+              opacity: 1
+            }
+          ]
+        },
+        visible: true,
+        x: (datum: Datum, context: any) => {
+          return context.getCenter().x();
+        },
+        y: (datum: Datum, context: any) => {
+          return context.getCenter().y();
+        }
+      }
+    },
+    {
+      name: 'arc_outer',
+      type: 'symbol',
+      // dataId: 'id0',
+      style: {
+        interactive: false,
+        size: (datum: Datum, context: any) => {
+          return context.getLayoutRadius() * 2 * spec.outerRadius + 50;
+        },
+        fillOpacity: 0,
+        lineWidth: 1,
+        strokeOpacity: 0.5,
+        stroke: {
+          gradient: 'conical',
+          startAngle: 0,
+          endAngle: Math.PI * 2,
+          stops: [
+            {
+              offset: 0,
+              color: '#FFF',
+              opacity: 0
+            },
+            {
+              offset: 1,
+              color: '#FFF',
+              opacity: 1
+            }
+          ]
+        },
+        visible: true,
+        x: (datum: Datum, context: any) => {
+          return context.getCenter().x();
+        },
+        y: (datum: Datum, context: any) => {
+          return context.getCenter().y();
+        }
+      }
+    }
+  ]
+
+  // console.log('spec-pie-transform', spec)
+  return spec
+}

src/components/GoVChart/transformProps/scatters.ts

@@ -0,0 +1,35 @@
+import { cloneDeep } from "lodash"
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+  // axis
+  const { name: xAxisName, ...restXAxisProps } = chartProps.xAxis
+  const { name: yAxisName, ...restYAxisProps } = chartProps.yAxis
+  spec.axes = [{
+    orient: 'bottom',
+    ...restXAxisProps,
+    label: {
+      formatMethod: (value: string) => Number(value).toFixed(2)
+    }
+  }, {
+    orient: 'left',
+    ...restYAxisProps
+  }]
+
+  delete spec.xAxis
+  delete spec.yAxis
+  // console.log('spec-scatter-transform', spec)
+  return spec
+}

src/components/GoVChart/transformProps/wordClouds.ts

@@ -0,0 +1,21 @@
+import { Datum } from "@visactor/vchart/esm/typings"
+import { cloneDeep } from "lodash"
+
+export default (chartProps: any) => {
+  const spec = cloneDeep(chartProps)
+
+  // tooltip
+  const keyFill = spec.tooltip.style.keyLabel.fill
+  const valueFill = spec.tooltip.style.valueLabel.fill
+  const titleFill = spec.tooltip.style.titleLabel.keyFill
+  delete spec.tooltip.style.keyLabel.fill
+  delete spec.tooltip.style.valueLabel.fill
+  delete spec.tooltip.style.titleLabel.keyFill
+  spec.tooltip.style.keyLabel.fontColor = keyFill
+  spec.tooltip.style.valueLabel.fontColor = valueFill
+  spec.tooltip.style.titleLabel.fontColor = titleFill
+
+
+  // console.log('spec-word-cloud-transform', spec)
+  return spec
+}