@visactor/vchart-theme-demo-component 1.11.5 → 1.11.6

package/esm/spec/funnelHorizontal.js

@@ -0,0 +1,122 @@
+export const horizontalFunnelSpec = {
+    type: "common",
+    padding: {
+        left: 20,
+        right: 60
+    },
+    data: [ {
+        id: "funnel",
+        values: [ {
+            value: 100,
+            name: "Screening",
+            percent: 1
+        }, {
+            value: 80,
+            name: "Evaluating",
+            percent: .8
+        }, {
+            value: 50,
+            name: "Passed",
+            percent: .5
+        }, {
+            value: 30,
+            name: "Interview",
+            percent: .3
+        } ]
+    } ],
+    color: {
+        type: "ordinal",
+        range: [ "rgb(54,106,253)", "rgb(103,138,251)", "rgb(146,173,255)", "rgb(191,207,255)" ]
+    },
+    series: [ {
+        type: "funnel",
+        categoryField: "name",
+        valueField: "value",
+        maxSize: "50%",
+        minSize: "10%",
+        funnelAlign: "bottom",
+        funnelOrient: "left",
+        isTransform: !0,
+        shape: "rect",
+        transform: {
+            style: {
+                fill: "rgb(222,231,253)"
+            }
+        },
+        label: {
+            visible: !0,
+            style: {
+                lineHeight: 16,
+                limit: (datum, ctx) => Math.abs(ctx.getPoints(datum)[0].x - ctx.getPoints(datum)[3].x),
+                text: datum => 100 * datum.percent + "%",
+                x: (datum, ctx) => ctx.getPoints(datum)[0].x + 10,
+                y: (datum, ctx) => ctx.getPoints(datum)[0].y - 10,
+                textAlign: "left",
+                textBaseline: "bottom",
+                fontSize: 20,
+                fontStyle: "italic"
+            }
+        },
+        extensionMark: [ {
+            type: "polygon",
+            dataId: "funnel",
+            style: {
+                points: (datum, ctx) => {
+                    const start = ctx.getPoints(datum)[1];
+                    return [ start, {
+                        x: start.x,
+                        y: 0
+                    } ];
+                },
+                closePath: !1,
+                lineWidth: 2,
+                stroke: "rgb(243,244,244)"
+            }
+        }, {
+            type: "text",
+            dataId: "funnel",
+            style: {
+                text: (datum, ctx) => ({
+                    type: "rich",
+                    text: [ {
+                        text: `${datum.name}\n`,
+                        fontWeight: "bold",
+                        lineHeight: 30
+                    }, {
+                        text: datum.value / 10 + "K\n",
+                        fontWeight: "bold",
+                        fontSize: 24,
+                        lineHeight: 40,
+                        fill: "black"
+                    }, {
+                        text: `Percent: ${10 * datum.percent}%`,
+                        fontWeight: "bold",
+                        lineHeight: 30
+                    } ]
+                }),
+                x: (datum, ctx) => ctx.getPoints(datum)[0].x + 10,
+                width: (datum, ctx) => ctx.getPoints(datum)[3].x - ctx.getPoints(datum)[0].x,
+                textAlign: "left",
+                y: 10,
+                stroke: !1,
+                fill: "grey",
+                ellipsis: !0,
+                disableAutoWrapLine: !0
+            }
+        }, {
+            type: "image",
+            dataId: "funnel",
+            style: {
+                image: "https://sf16-scmcdn-sg.ibytedtos.com/obj/static-sg/visactor-site/sg/client/img/visactor/vrender-icon.svg",
+                x: (datum, ctx) => ctx.getPoints(datum)[2].x + .5 * (ctx.getPoints(datum)[2].x - ctx.getPoints(datum)[1].x) - 36,
+                y: 10,
+                align: "right",
+                width: 30,
+                height: 26,
+                background: "rgb(238,238,238)",
+                fillOpacity: .2
+            }
+        } ]
+    } ]
+};
+//# sourceMappingURL=funnelHorizontal.js.map

package/esm/spec/funnelHorizontal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spec/funnelHorizontal.ts"],"names":[],"mappings":"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","file":"funnelHorizontal.js","sourcesContent":["export const horizontalFunnelSpec = {\n  type: 'common',\n  padding: { left: 20, right: 60 },\n  data: [\n    {\n      id: 'funnel',\n      values: [\n        {\n          value: 100,\n          name: 'Screening',\n          percent: 1\n        },\n        {\n          value: 80,\n          name: 'Evaluating',\n          percent: 0.8\n        },\n        {\n          value: 50,\n          name: 'Passed',\n          percent: 0.5\n        },\n        {\n          value: 30,\n          name: 'Interview',\n          percent: 0.3\n        }\n      ]\n    }\n  ],\n  color: {\n    type: 'ordinal',\n    range: ['rgb(54,106,253)', 'rgb(103,138,251)', 'rgb(146,173,255)', 'rgb(191,207,255)']\n  },\n  series: [\n    {\n      type: 'funnel',\n      categoryField: 'name',\n      valueField: 'value',\n      maxSize: '50%',\n      minSize: '10%',\n      funnelAlign: 'bottom',\n      funnelOrient: 'left',\n      isTransform: true,\n      shape: 'rect',\n      transform: {\n        style: {\n          fill: 'rgb(222,231,253)'\n        }\n      },\n      label: {\n        visible: true,\n        style: {\n          lineHeight: 16,\n          limit: (datum: any, ctx: any) => Math.abs(ctx.getPoints(datum)[0].x - ctx.getPoints(datum)[3].x),\n          text: (datum: any) => `${datum.percent * 100}%`,\n          x: (datum: any, ctx: any) => ctx.getPoints(datum)[0].x + 10,\n          y: (datum: any, ctx: any) => ctx.getPoints(datum)[0].y - 10,\n          textAlign: 'left',\n          textBaseline: 'bottom',\n          fontSize: 20,\n          fontStyle: 'italic'\n        }\n      },\n      extensionMark: [\n        {\n          type: 'polygon',\n          dataId: 'funnel',\n          style: {\n            points: (datum: any, ctx: any) => {\n              const start = ctx.getPoints(datum)[1];\n              const end = { x: start.x, y: 0 };\n              return [start, end];\n            },\n            closePath: false,\n            lineWidth: 2,\n            stroke: 'rgb(243,244,244)'\n          }\n        },\n        {\n          type: 'text',\n          dataId: 'funnel',\n          style: {\n            text: (datum: any, ctx: any) => {\n              return {\n                type: 'rich',\n                text: [\n                  { text: `${datum.name}\\n`, fontWeight: 'bold', lineHeight: 30 },\n                  {\n                    text: `${datum.value / 10}K\\n`,\n                    fontWeight: 'bold',\n                    fontSize: 24,\n                    lineHeight: 40,\n                    fill: 'black'\n                  },\n                  {\n                    text: `Percent: ${datum.percent * 10}%`,\n                    fontWeight: 'bold',\n                    lineHeight: 30\n                  }\n                ]\n              };\n            },\n            x: (datum: any, ctx: any) => ctx.getPoints(datum)[0].x + 10,\n            width: (datum: any, ctx: any) => {\n              return ctx.getPoints(datum)[3].x - ctx.getPoints(datum)[0].x;\n            },\n            textAlign: 'left',\n            y: 10,\n            stroke: false,\n            fill: 'grey',\n            ellipsis: true,\n            disableAutoWrapLine: true\n          }\n        },\n        {\n          type: 'image',\n          dataId: 'funnel',\n          style: {\n            image:\n              'https://sf16-scmcdn-sg.ibytedtos.com/obj/static-sg/visactor-site/sg/client/img/visactor/vrender-icon.svg',\n            x: (datum: any, ctx: any) =>\n              ctx.getPoints(datum)[2].x + (ctx.getPoints(datum)[2].x - ctx.getPoints(datum)[1].x) * 0.5 - 36,\n            y: 10,\n            align: 'right',\n            width: 30,\n            height: 26,\n            background: 'rgb(238,238,238)',\n            fillOpacity: 0.2\n          }\n        }\n      ]\n    }\n  ]\n};\n"]}

package/esm/spec/gauge.d.ts

@@ -13,6 +13,7 @@ export declare const gaugeSpec: {
     innerRadius: number;
     startAngle: number;
     endAngle: number;
+    centerY: string;
     indicator: {
         visible: boolean;
         title: {

package/esm/spec/gauge.js

@@ -13,6 +13,7 @@ export const gaugeSpec = {
     innerRadius: .7,
     startAngle: -180,
     endAngle: 0,
+    centerY: "60%",
     indicator: [ {
         visible: !0,
         title: {
@@ -55,5 +56,4 @@ export const gaugeSpec = {
             }
         }
     } ]
-};
-//# sourceMappingURL=gauge.js.map
+};

package/esm/spec/gauge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/spec/gauge.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE;QACJ;YACE,EAAE,EAAE,KAAK;YACT,MAAM,EAAE;gBACN;oBACE,IAAI,EAAE,KAAK;oBACX,KAAK,EAAE,EAAE;iBACV;aACF;SACF;KACF;IACD,aAAa,EAAE,MAAM;IACrB,UAAU,EAAE,OAAO;IACnB,WAAW,EAAE,GAAG;IAChB,WAAW,EAAE,GAAG;IAChB,UAAU,EAAE,CAAC,GAAG;IAChB,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE;QACT;YACE,OAAO,EAAE,IAAI;YACb,KAAK,EAAE;gBACL,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI;oBACV,QAAQ,EAAE,EAAE;oBACZ,UAAU,EAAE,GAAG;iBAChB;aACF;SACF;KACF;IACD,IAAI,EAAE;QACJ;YACE,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,OAAO;YACf,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,EAAE;YACP,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,IAAI;YACZ,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;YACxB,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE;YAC7D,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE;YAChE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE;SACjE;KACF;CACF,CAAC","file":"gauge.js","sourcesContent":["export const gaugeSpec = {\n  type: 'gauge',\n  data: [\n    {\n      id: 'id0',\n      values: [\n        {\n          type: '目标A',\n          value: 45\n        }\n      ]\n    }\n  ],\n  categoryField: 'type',\n  valueField: 'value',\n  outerRadius: 0.8,\n  innerRadius: 0.7,\n  startAngle: -180,\n  endAngle: 0,\n  indicator: [\n    {\n      visible: true,\n      title: {\n        style: {\n          text: '45',\n          fontSize: 60,\n          fontWeight: 800\n        }\n      }\n    }\n  ],\n  axes: [\n    {\n      type: 'linear',\n      orient: 'angle',\n      min: 0,\n      max: 50,\n      offset: 20,\n      radius: 0.81,\n      grid: { visible: false },\n      tick: { visible: true, tickSize: 5, style: { lineWidth: 1 } },\n      subTick: { visible: true, tickSize: 3, style: { lineWidth: 1 } },\n      label: { visible: true, style: { fill: 'black', fontSize: 12 } }\n    }\n  ]\n};\n"]}
+{"version":3,"sources":["../src/spec/gauge.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE;QACJ;YACE,EAAE,EAAE,KAAK;YACT,MAAM,EAAE;gBACN;oBACE,IAAI,EAAE,KAAK;oBACX,KAAK,EAAE,EAAE;iBACV;aACF;SACF;KACF;IACD,aAAa,EAAE,MAAM;IACrB,UAAU,EAAE,OAAO;IACnB,WAAW,EAAE,GAAG;IAChB,WAAW,EAAE,GAAG;IAChB,UAAU,EAAE,CAAC,GAAG;IAChB,QAAQ,EAAE,CAAC;IACX,OAAO,EAAE,KAAK;IACd,SAAS,EAAE;QACT;YACE,OAAO,EAAE,IAAI;YACb,KAAK,EAAE;gBACL,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI;oBACV,QAAQ,EAAE,EAAE;oBACZ,UAAU,EAAE,GAAG;iBAChB;aACF;SACF;KACF;IACD,IAAI,EAAE;QACJ;YACE,IAAI,EAAE,QAAQ;YACd,MAAM,EAAE,OAAO;YACf,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,EAAE;YACP,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,IAAI;YACZ,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;YACxB,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE;YAC7D,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE;YAChE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE;SACjE;KACF;CACF,CAAC","file":"gauge.js","sourcesContent":["export const gaugeSpec = {\n  type: 'gauge',\n  data: [\n    {\n      id: 'id0',\n      values: [\n        {\n          type: '目标A',\n          value: 45\n        }\n      ]\n    }\n  ],\n  categoryField: 'type',\n  valueField: 'value',\n  outerRadius: 0.8,\n  innerRadius: 0.7,\n  startAngle: -180,\n  endAngle: 0,\n  centerY: '60%',\n  indicator: [\n    {\n      visible: true,\n      title: {\n        style: {\n          text: '45',\n          fontSize: 60,\n          fontWeight: 800\n        }\n      }\n    }\n  ],\n  axes: [\n    {\n      type: 'linear',\n      orient: 'angle',\n      min: 0,\n      max: 50,\n      offset: 20,\n      radius: 0.81,\n      grid: { visible: false },\n      tick: { visible: true, tickSize: 5, style: { lineWidth: 1 } },\n      subTick: { visible: true, tickSize: 3, style: { lineWidth: 1 } },\n      label: { visible: true, style: { fill: 'black', fontSize: 12 } }\n    }\n  ]\n};\n"]}

package/esm/spec/line.js

@@ -146,4 +146,5 @@ export const lineSpec = {
             }
         }
     }
-};
+};
+//# sourceMappingURL=line.js.map

package/esm/vchart-chart-hub-theme/chart-list.js

@@ -8,6 +8,8 @@ import { barStackedSpec } from "../spec/barStacked";
 
 import { barStackedHorizontalSpec } from "../spec/barStackedHorizontal";
 
+import { horizontalFunnelSpec } from "../spec/funnelHorizontal";
+
 import { gaugeSpec } from "../spec/gauge";
 
 import { horizontalBarSpec } from "../spec/horizontalBar";
@@ -24,6 +26,12 @@ import { ringSpec } from "../spec/ring";
 
 import { scatterSpec } from "../spec/scatter";
 
+import { funnelSpec } from "../spec/funnel";
+
+import { CombinationSpec } from "../spec/combination";
+
+import { businessFunnelSpec } from "../spec/businessFunnel";
+
 export const charts = [ {
     title: "Line Chart",
     spec: lineSpec,
@@ -43,7 +51,7 @@ export const charts = [ {
 }, {
     title: "Horizontal Grouped Bar Chart",
     spec: barGroupHorizontalSpec,
-    fileName: "horizontalBar"
+    fileName: "barGroupHorizontal"
 }, {
     title: "Horizontal Stacked Bar Chart",
     spec: barStackedHorizontalSpec,
@@ -79,5 +87,21 @@ export const charts = [ {
     option: {
         enableHtmlAttribute: !0
     }
+}, {
+    title: "Horizontal Funnel",
+    spec: horizontalFunnelSpec,
+    fileName: "funnelHorizontal"
+}, {
+    title: "漏斗图",
+    spec: funnelSpec,
+    fileName: "funnel"
+}, {
+    title: "基础组合图",
+    spec: CombinationSpec,
+    fileName: "combination"
+}, {
+    title: "业务漏斗图",
+    spec: businessFunnelSpec,
+    fileName: "businessFunnel"
 } ];
 //# sourceMappingURL=chart-list.js.map

package/esm/vchart-chart-hub-theme/chart-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/vchart-chart-hub-theme/chart-list.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAiB;IAClC;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,UAAU;KACrB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE,YAAY;KACvB;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,sBAAsB;QAC5B,QAAQ,EAAE,eAAe;KAC1B;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,wBAAwB;QAC9B,QAAQ,EAAE,sBAAsB;KACjC;IACD;QACE,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,sBAAsB;QAC7B,IAAI,EAAE,iBAAiB;QACvB,QAAQ,EAAE,eAAe;KAC1B;IACD;QACE,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,WAAW;QACjB,QAAQ,EAAE,SAAS;KACpB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,mBAAmB;QACzB,QAAQ,EAAE,iBAAiB;QAC3B,MAAM,EAAE;YACN,mBAAmB,EAAE,IAAI;SAC1B;KACF;CACF,CAAC","file":"chart-list.js","sourcesContent":["import type { IChartInfo } from '../interface';\nimport { areaSpec } from '../spec/area';\nimport { barGroupSpec } from '../spec/barGroup';\nimport { barGroupHorizontalSpec } from '../spec/barGroupHorizontal';\nimport { barStackedSpec } from '../spec/barStacked';\nimport { barStackedHorizontalSpec } from '../spec/barStackedHorizontal';\nimport { gaugeSpec } from '../spec/gauge';\nimport { horizontalBarSpec } from '../spec/horizontalBar';\nimport { indicatorSankeySpec } from '../spec/indicatorSankey';\nimport { lineSpec } from '../spec/line';\nimport { pieSpec } from '../spec/pie';\nimport { radarSpec } from '../spec/radar';\nimport { ringSpec } from '../spec/ring';\nimport { scatterSpec } from '../spec/scatter';\n\nexport const charts: IChartInfo[] = [\n  {\n    title: 'Line Chart',\n    spec: lineSpec,\n    fileName: 'line'\n  },\n  {\n    title: 'Area Chart',\n    spec: areaSpec,\n    fileName: 'area'\n  },\n  {\n    title: 'Grouped Bar Chart',\n    spec: barGroupSpec,\n    fileName: 'barGroup'\n  },\n  {\n    title: 'Stacked Bar Chart',\n    spec: barStackedSpec,\n    fileName: 'barStacked'\n  },\n  {\n    title: 'Horizontal Grouped Bar Chart',\n    spec: barGroupHorizontalSpec,\n    fileName: 'horizontalBar'\n  },\n  {\n    title: 'Horizontal Stacked Bar Chart',\n    spec: barStackedHorizontalSpec,\n    fileName: 'barStackedHorizontal'\n  },\n  {\n    title: 'Pie Chart',\n    spec: pieSpec,\n    fileName: 'pie'\n  },\n  {\n    title: 'Ring Chart',\n    spec: ringSpec,\n    fileName: 'ring'\n  },\n  {\n    title: 'Gauge Chart',\n    spec: gaugeSpec,\n    fileName: 'gauge'\n  },\n  {\n    title: 'Horizontal Bar Chart',\n    spec: horizontalBarSpec,\n    fileName: 'horizontalBar'\n  },\n  {\n    title: 'Scatter Chart',\n    spec: scatterSpec,\n    fileName: 'scatter'\n  },\n  {\n    title: 'Radar Chart',\n    spec: radarSpec,\n    fileName: 'radar'\n  },\n  {\n    title: 'Indicator Sankey Chart',\n    spec: indicatorSankeySpec,\n    fileName: 'indicatorSankey',\n    option: {\n      enableHtmlAttribute: true\n    }\n  }\n];\n"]}
+{"version":3,"sources":["../src/vchart-chart-hub-theme/chart-list.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,CAAC,MAAM,MAAM,GAAiB;IAClC;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,UAAU;KACrB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE,YAAY;KACvB;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,sBAAsB;QAC5B,QAAQ,EAAE,oBAAoB;KAC/B;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,wBAAwB;QAC9B,QAAQ,EAAE,sBAAsB;KACjC;IACD;QACE,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,sBAAsB;QAC7B,IAAI,EAAE,iBAAiB;QACvB,QAAQ,EAAE,eAAe;KAC1B;IACD;QACE,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,WAAW;QACjB,QAAQ,EAAE,SAAS;KACpB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,mBAAmB;QACzB,QAAQ,EAAE,iBAAiB;QAC3B,MAAM,EAAE;YACN,mBAAmB,EAAE,IAAI;SAC1B;KACF;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,oBAAoB;QAC1B,QAAQ,EAAE,kBAAkB;KAC7B;IACD;QACE,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,QAAQ;KACnB;IACD;QACE,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,eAAe;QACrB,QAAQ,EAAE,aAAa;KACxB;IACD;QACE,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,kBAAkB;QACxB,QAAQ,EAAE,gBAAgB;KAC3B;CACF,CAAC","file":"chart-list.js","sourcesContent":["import type { IChartInfo } from '../interface';\nimport { areaSpec } from '../spec/area';\nimport { barGroupSpec } from '../spec/barGroup';\nimport { barGroupHorizontalSpec } from '../spec/barGroupHorizontal';\nimport { barStackedSpec } from '../spec/barStacked';\nimport { barStackedHorizontalSpec } from '../spec/barStackedHorizontal';\nimport { horizontalFunnelSpec } from '../spec/funnelHorizontal';\nimport { gaugeSpec } from '../spec/gauge';\nimport { horizontalBarSpec } from '../spec/horizontalBar';\nimport { indicatorSankeySpec } from '../spec/indicatorSankey';\nimport { lineSpec } from '../spec/line';\nimport { pieSpec } from '../spec/pie';\nimport { radarSpec } from '../spec/radar';\nimport { ringSpec } from '../spec/ring';\nimport { scatterSpec } from '../spec/scatter';\nimport { funnelSpec } from '../spec/funnel';\nimport { CombinationSpec } from '../spec/combination';\nimport { businessFunnelSpec } from '../spec/businessFunnel';\n\nexport const charts: IChartInfo[] = [\n  {\n    title: 'Line Chart',\n    spec: lineSpec,\n    fileName: 'line'\n  },\n  {\n    title: 'Area Chart',\n    spec: areaSpec,\n    fileName: 'area'\n  },\n  {\n    title: 'Grouped Bar Chart',\n    spec: barGroupSpec,\n    fileName: 'barGroup'\n  },\n  {\n    title: 'Stacked Bar Chart',\n    spec: barStackedSpec,\n    fileName: 'barStacked'\n  },\n  {\n    title: 'Horizontal Grouped Bar Chart',\n    spec: barGroupHorizontalSpec,\n    fileName: 'barGroupHorizontal'\n  },\n  {\n    title: 'Horizontal Stacked Bar Chart',\n    spec: barStackedHorizontalSpec,\n    fileName: 'barStackedHorizontal'\n  },\n  {\n    title: 'Pie Chart',\n    spec: pieSpec,\n    fileName: 'pie'\n  },\n  {\n    title: 'Ring Chart',\n    spec: ringSpec,\n    fileName: 'ring'\n  },\n  {\n    title: 'Gauge Chart',\n    spec: gaugeSpec,\n    fileName: 'gauge'\n  },\n  {\n    title: 'Horizontal Bar Chart',\n    spec: horizontalBarSpec,\n    fileName: 'horizontalBar'\n  },\n  {\n    title: 'Scatter Chart',\n    spec: scatterSpec,\n    fileName: 'scatter'\n  },\n  {\n    title: 'Radar Chart',\n    spec: radarSpec,\n    fileName: 'radar'\n  },\n  {\n    title: 'Indicator Sankey Chart',\n    spec: indicatorSankeySpec,\n    fileName: 'indicatorSankey',\n    option: {\n      enableHtmlAttribute: true\n    }\n  },\n  {\n    title: 'Horizontal Funnel',\n    spec: horizontalFunnelSpec,\n    fileName: 'funnelHorizontal'\n  },\n  {\n    title: '漏斗图',\n    spec: funnelSpec,\n    fileName: 'funnel'\n  },\n  {\n    title: '基础组合图',\n    spec: CombinationSpec,\n    fileName: 'combination'\n  },\n  {\n    title: '业务漏斗图',\n    spec: businessFunnelSpec,\n    fileName: 'businessFunnel'\n  }\n];\n"]}

package/esm/vchart-chart-hub-theme/charts.js

@@ -30,12 +30,10 @@ import { isMobile } from "react-device-detect";
 
 import { charts } from "./chart-list";
 
-import { VChart as VChartComponent } from "@visactor/react-vchart";
+import { VChart as VChartComponent, VChartCore } from "@visactor/react-vchart";
 
 import { i18n } from "./i18n";
 
-import VChart from "@visactor/vchart";
-
 import { chartHubLightTheme } from "@visactor/vchart-theme";
 
 import { Button, Card } from "@douyinfe/semi-ui";
@@ -46,7 +44,7 @@ import "@arco-design/web-react/dist/css/arco.css";
 
 const {Row: Row, Col: Col} = Grid, chartHeight = 400, gutter = 16, DEMO_SOURCE_PREFIX = "https://raw.githubusercontent.com/VisActor/vchart-theme/develop/packages/vchart-theme-demo-component/src/spec/";
 
-VChart.ThemeManager.registerTheme("chart-hub-light", chartHubLightTheme), VChart.ThemeManager.setCurrentTheme("chart-hub-light");
+VChartCore.ThemeManager.registerTheme("chart-hub-light", chartHubLightTheme), VChartCore.ThemeManager.setCurrentTheme("chart-hub-light");
 
 export function Charts(props) {
     const {language: language = "zh"} = props, onClick = useCallback((chartInfo => __awaiter(this, void 0, void 0, (function*() {

package/esm/vchart-chart-hub-theme/charts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/vchart-chart-hub-theme/charts.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,0CAA0C,CAAC;AAGlD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAC1B,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,MAAM,kBAAkB,GACtB,gHAAgH,CAAC;AAEnH,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,CAAC;AACzE,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAMvD,MAAM,UAAU,MAAM,CAAC,KAAa;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,OAAO,GAAG,WAAW,CAAC,CAAO,SAAqB,EAAE,EAAE;QAC1D,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QACvC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QACD,MAAM,OAAO,GAAG,GAAG,kBAAkB,GAAG,QAAQ,KAAK,CAAC;QACtD,IAAI,GAAG,GAAG,8BAA8B,OAAO,EAAE,CAAC;QAClD,IAAI,MAAM,EAAE;YACV,GAAG,IAAI,eAAe,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;SAChD;QACD,GAAG,IAAI,sBAAsB,CAAC;QAC9B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,GAAG,IAAC,MAAM,EAAE,MAAM,IAChB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACvB,OAAO,CACL,oBAAC,GAAG,IAAC,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE;YAChD,oBAAC,IAAI,IACH,SAAS,EAAC,gBAAgB,EAC1B,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,kBAAkB,EAChB,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC,IAEA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb;gBAGX,oBAAC,eAAe,IACd,IAAI,kCACC,KAAK,CAAC,IAAI,KACb,MAAM,EAAE,WAAW,KAErB,OAAO,kCACF,KAAK,CAAC,MAAM,KACf,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,MAEvD,CACG,CACH,CACP,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC","file":"charts.js","sourcesContent":["import React, { useCallback } from 'react';\nimport { isMobile } from 'react-device-detect';\nimport { charts } from './chart-list';\nimport { VChart as VChartComponent } from '@visactor/react-vchart';\nimport { i18n } from './i18n';\nimport VChart from '@visactor/vchart';\nimport { chartHubLightTheme } from '@visactor/vchart-theme';\n\nimport { Button, Card } from '@douyinfe/semi-ui';\nimport { Grid } from '@arco-design/web-react';\nimport '@arco-design/web-react/dist/css/arco.css';\nimport type { IChartInfo } from '../interface';\n\nconst { Row, Col } = Grid;\nconst chartHeight = 400;\n\nconst gutter = 16;\n\nconst DEMO_SOURCE_PREFIX =\n  'https://raw.githubusercontent.com/VisActor/vchart-theme/develop/packages/vchart-theme-demo-component/src/spec/';\n\nVChart.ThemeManager.registerTheme('chart-hub-light', chartHubLightTheme);\nVChart.ThemeManager.setCurrentTheme('chart-hub-light');\n\nexport interface IProps {\n  language?: 'en' | 'zh';\n}\n\nexport function Charts(props: IProps) {\n  const { language = 'zh' } = props;\n\n  const onClick = useCallback(async (chartInfo: IChartInfo) => {\n    const { fileName, option } = chartInfo;\n    if (!fileName) {\n      return;\n    }\n    const specUrl = `${DEMO_SOURCE_PREFIX}${fileName}.ts`;\n    let url = `/vchart/playground?specUrl=${specUrl}`;\n    if (option) {\n      url += `&initOption=${JSON.stringify(option)}`;\n    }\n    url += `&theme=chartHubLight`;\n    window.open(url);\n  }, []);\n\n  return (\n    <Row gutter={gutter}>\n      {charts.map((chart, i) => {\n        return (\n          <Col span={12} key={i} style={{ marginBottom: 16 }}>\n            <Card\n              className=\"chartContainer\"\n              bordered={false}\n              headerLine={true}\n              title={chart.title}\n              headerExtraContent={\n                <Button\n                  size=\"small\"\n                  onClick={() => {\n                    onClick(chart);\n                  }}\n                >\n                  {i18n.link[language]}\n                </Button>\n              }\n            >\n              <VChartComponent\n                spec={{\n                  ...chart.spec,\n                  height: chartHeight\n                }}\n                options={{\n                  ...chart.option,\n                  mode: isMobile ? 'mobile-browser' : 'desktop-browser'\n                }}\n              />\n            </Card>\n          </Col>\n        );\n      })}\n    </Row>\n  );\n}\n"]}
+{"version":3,"sources":["../src/vchart-chart-hub-theme/charts.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,0CAA0C,CAAC;AAGlD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAC1B,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,MAAM,kBAAkB,GACtB,gHAAgH,CAAC;AAEnH,UAAU,CAAC,YAAY,CAAC,aAAa,CAAC,iBAAiB,EAAE,kBAAyB,CAAC,CAAC;AACpF,UAAU,CAAC,YAAY,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAM3D,MAAM,UAAU,MAAM,CAAC,KAAa;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,OAAO,GAAG,WAAW,CAAC,CAAO,SAAqB,EAAE,EAAE;QAC1D,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QACvC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QACD,MAAM,OAAO,GAAG,GAAG,kBAAkB,GAAG,QAAQ,KAAK,CAAC;QACtD,IAAI,GAAG,GAAG,8BAA8B,OAAO,EAAE,CAAC;QAClD,IAAI,MAAM,EAAE;YACV,GAAG,IAAI,eAAe,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;SAChD;QACD,GAAG,IAAI,sBAAsB,CAAC;QAC9B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC,CAAA,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,GAAG,IAAC,MAAM,EAAE,MAAM,IAChB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACvB,OAAO,CACL,oBAAC,GAAG,IAAC,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE;YAChD,oBAAC,IAAI,IACH,SAAS,EAAC,gBAAgB,EAC1B,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,kBAAkB,EAChB,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC,IAEA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb;gBAGX,oBAAC,eAAe,IACd,IAAI,kCACC,KAAK,CAAC,IAAI,KACb,MAAM,EAAE,WAAW,KAErB,OAAO,kCACF,KAAK,CAAC,MAAM,KACf,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,MAEvD,CACG,CACH,CACP,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC","file":"charts.js","sourcesContent":["import React, { useCallback } from 'react';\nimport { isMobile } from 'react-device-detect';\nimport { charts } from './chart-list';\nimport { VChart as VChartComponent, VChartCore } from '@visactor/react-vchart';\nimport { i18n } from './i18n';\nimport { chartHubLightTheme } from '@visactor/vchart-theme';\n\nimport { Button, Card } from '@douyinfe/semi-ui';\nimport { Grid } from '@arco-design/web-react';\nimport '@arco-design/web-react/dist/css/arco.css';\nimport type { IChartInfo } from '../interface';\n\nconst { Row, Col } = Grid;\nconst chartHeight = 400;\n\nconst gutter = 16;\n\nconst DEMO_SOURCE_PREFIX =\n  'https://raw.githubusercontent.com/VisActor/vchart-theme/develop/packages/vchart-theme-demo-component/src/spec/';\n\nVChartCore.ThemeManager.registerTheme('chart-hub-light', chartHubLightTheme as any);\nVChartCore.ThemeManager.setCurrentTheme('chart-hub-light');\n\nexport interface IProps {\n  language?: 'en' | 'zh';\n}\n\nexport function Charts(props: IProps) {\n  const { language = 'zh' } = props;\n\n  const onClick = useCallback(async (chartInfo: IChartInfo) => {\n    const { fileName, option } = chartInfo;\n    if (!fileName) {\n      return;\n    }\n    const specUrl = `${DEMO_SOURCE_PREFIX}${fileName}.ts`;\n    let url = `/vchart/playground?specUrl=${specUrl}`;\n    if (option) {\n      url += `&initOption=${JSON.stringify(option)}`;\n    }\n    url += `&theme=chartHubLight`;\n    window.open(url);\n  }, []);\n\n  return (\n    <Row gutter={gutter}>\n      {charts.map((chart, i) => {\n        return (\n          <Col span={12} key={i} style={{ marginBottom: 16 }}>\n            <Card\n              className=\"chartContainer\"\n              bordered={false}\n              headerLine={true}\n              title={chart.title}\n              headerExtraContent={\n                <Button\n                  size=\"small\"\n                  onClick={() => {\n                    onClick(chart);\n                  }}\n                >\n                  {i18n.link[language]}\n                </Button>\n              }\n            >\n              <VChartComponent\n                spec={{\n                  ...chart.spec,\n                  height: chartHeight\n                }}\n                options={{\n                  ...chart.option,\n                  mode: isMobile ? 'mobile-browser' : 'desktop-browser'\n                }}\n              />\n            </Card>\n          </Col>\n        );\n      })}\n    </Row>\n  );\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vchart-theme-demo-component",
-  "version": "1.11.5",
+  "version": "1.11.6",
   "description": "theme demo page in vchart site",
   "sideEffects": false,
   "main": "cjs/index.js",
@@ -15,10 +15,10 @@
     "@douyinfe/semi-icons": "latest",
     "@douyinfe/semi-icons-lab": "latest",
     "@arco-design/web-react": "^2.32.2",
-    "@visactor/vchart-theme-utils": "1.11.5",
-    "@visactor/vchart-theme": "1.11.5",
-    "@visactor/vchart": "1.11.0",
-    "@visactor/react-vchart": "1.11.0"
+    "@visactor/vchart-theme-utils": "1.11.6",
+    "@visactor/vchart-theme": "1.11.6",
+    "@visactor/vchart": "1.11.10",
+    "@visactor/react-vchart": "1.11.10"
   },
   "peerDependencies": {
     "react": ">=16.0.0",
@@ -40,8 +40,8 @@
     "@types/node": "*",
     "@internal/bundler": "0.0.1",
     "@internal/eslint-config": "0.0.1",
-    "@internal/jest-config": "0.0.1",
-    "@internal/ts-config": "0.0.1"
+    "@internal/ts-config": "0.0.1",
+    "@internal/jest-config": "0.0.1"
   },
   "publishConfig": {
     "access": "public"