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

package/cjs/spec/combination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spec/combination.ts"],"names":[],"mappings":"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","file":"combination.js","sourcesContent":["export const CombinationSpec = {\n  type: 'common',\n  seriesField: 'color',\n  data: [\n    {\n      id: 'id0',\n      values: [\n        { x: '周一', type: '早餐', y: 15 },\n        { x: '周一', type: '午餐', y: 25 },\n        { x: '周二', type: '早餐', y: 12 },\n        { x: '周二', type: '午餐', y: 30 },\n        { x: '周三', type: '早餐', y: 15 },\n        { x: '周三', type: '午餐', y: 24 },\n        { x: '周四', type: '早餐', y: 10 },\n        { x: '周四', type: '午餐', y: 25 },\n        { x: '周五', type: '早餐', y: 13 },\n        { x: '周五', type: '午餐', y: 20 },\n        { x: '周六', type: '早餐', y: 10 },\n        { x: '周六', type: '午餐', y: 22 },\n        { x: '周日', type: '早餐', y: 12 },\n        { x: '周日', type: '午餐', y: 19 }\n      ]\n    },\n    {\n      id: 'id1',\n      values: [\n        { x: '周一', type: '饮料', y: 22 },\n        { x: '周二', type: '饮料', y: 43 },\n        { x: '周三', type: '饮料', y: 33 },\n        { x: '周四', type: '饮料', y: 22 },\n        { x: '周五', type: '饮料', y: 10 },\n        { x: '周六', type: '饮料', y: 30 },\n        { x: '周日', type: '饮料', y: 50 }\n      ]\n    }\n  ],\n  series: [\n    {\n      type: 'bar',\n      dataIndex: 0,\n      label: { visible: true },\n      seriesField: 'type',\n      //@ts-ignore\n      dataIndex: 0,\n      xField: ['x', 'type'],\n      yField: 'y'\n    },\n    {\n      type: 'line',\n      dataIndex: 1,\n      label: { visible: true },\n      seriesField: 'type',\n      xField: 'x',\n      yField: 'y',\n      stack: false\n    }\n  ],\n  axes: [{ orient: 'left' }, { orient: 'bottom', label: { visible: true }, type: 'band' }],\n  legends: {\n    visible: true,\n    orient: 'bottom'\n  }\n};\n"]}

package/cjs/spec/funnelHorizontal.d.ts

@@ -0,0 +1,131 @@
+export declare const horizontalFunnelSpec: {
+    type: string;
+    padding: {
+        left: number;
+        right: number;
+    };
+    data: {
+        id: string;
+        values: {
+            value: number;
+            name: string;
+            percent: number;
+        }[];
+    }[];
+    color: {
+        type: string;
+        range: string[];
+    };
+    series: {
+        type: string;
+        categoryField: string;
+        valueField: string;
+        maxSize: string;
+        minSize: string;
+        funnelAlign: string;
+        funnelOrient: string;
+        isTransform: boolean;
+        shape: string;
+        transform: {
+            style: {
+                fill: string;
+            };
+        };
+        label: {
+            visible: boolean;
+            style: {
+                lineHeight: number;
+                limit: (datum: any, ctx: any) => number;
+                text: (datum: any) => string;
+                x: (datum: any, ctx: any) => any;
+                y: (datum: any, ctx: any) => number;
+                textAlign: string;
+                textBaseline: string;
+                fontSize: number;
+                fontStyle: string;
+            };
+        };
+        extensionMark: ({
+            type: string;
+            dataId: string;
+            style: {
+                points: (datum: any, ctx: any) => any[];
+                closePath: boolean;
+                lineWidth: number;
+                stroke: string;
+                text?: undefined;
+                x?: undefined;
+                width?: undefined;
+                textAlign?: undefined;
+                y?: undefined;
+                fill?: undefined;
+                ellipsis?: undefined;
+                disableAutoWrapLine?: undefined;
+                image?: undefined;
+                align?: undefined;
+                height?: undefined;
+                background?: undefined;
+                fillOpacity?: undefined;
+            };
+        } | {
+            type: string;
+            dataId: string;
+            style: {
+                text: (datum: any, ctx: any) => {
+                    type: string;
+                    text: ({
+                        text: string;
+                        fontWeight: string;
+                        lineHeight: number;
+                        fontSize?: undefined;
+                        fill?: undefined;
+                    } | {
+                        text: string;
+                        fontWeight: string;
+                        fontSize: number;
+                        lineHeight: number;
+                        fill: string;
+                    })[];
+                };
+                x: (datum: any, ctx: any) => any;
+                width: (datum: any, ctx: any) => number;
+                textAlign: string;
+                y: number;
+                stroke: boolean;
+                fill: string;
+                ellipsis: boolean;
+                disableAutoWrapLine: boolean;
+                points?: undefined;
+                closePath?: undefined;
+                lineWidth?: undefined;
+                image?: undefined;
+                align?: undefined;
+                height?: undefined;
+                background?: undefined;
+                fillOpacity?: undefined;
+            };
+        } | {
+            type: string;
+            dataId: string;
+            style: {
+                image: string;
+                x: (datum: any, ctx: any) => number;
+                y: number;
+                align: string;
+                width: number;
+                height: number;
+                background: string;
+                fillOpacity: number;
+                points?: undefined;
+                closePath?: undefined;
+                lineWidth?: undefined;
+                stroke?: undefined;
+                text?: undefined;
+                textAlign?: undefined;
+                fill?: undefined;
+                ellipsis?: undefined;
+                disableAutoWrapLine?: undefined;
+            };
+        })[];
+    }[];
+};

package/cjs/spec/funnelHorizontal.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.horizontalFunnelSpec = void 0, exports.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/cjs/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/cjs/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/cjs/spec/gauge.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", {
     innerRadius: .7,
     startAngle: -180,
     endAngle: 0,
+    centerY: "60%",
     indicator: [ {
         visible: !0,
         title: {
@@ -59,5 +60,4 @@ Object.defineProperty(exports, "__esModule", {
             }
         }
     } ]
-};
-//# sourceMappingURL=gauge.js.map
+};

package/cjs/spec/gauge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/spec/gauge.ts"],"names":[],"mappings":";;;AAAa,QAAA,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,QAAA,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/cjs/spec/line.js

@@ -150,4 +150,5 @@ Object.defineProperty(exports, "__esModule", {
             }
         }
     }
-};
+};
+//# sourceMappingURL=line.js.map

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.charts = void 0;
 
-const area_1 = require("../spec/area"), barGroup_1 = require("../spec/barGroup"), barGroupHorizontal_1 = require("../spec/barGroupHorizontal"), barStacked_1 = require("../spec/barStacked"), barStackedHorizontal_1 = require("../spec/barStackedHorizontal"), gauge_1 = require("../spec/gauge"), horizontalBar_1 = require("../spec/horizontalBar"), indicatorSankey_1 = require("../spec/indicatorSankey"), line_1 = require("../spec/line"), pie_1 = require("../spec/pie"), radar_1 = require("../spec/radar"), ring_1 = require("../spec/ring"), scatter_1 = require("../spec/scatter");
+const area_1 = require("../spec/area"), barGroup_1 = require("../spec/barGroup"), barGroupHorizontal_1 = require("../spec/barGroupHorizontal"), barStacked_1 = require("../spec/barStacked"), barStackedHorizontal_1 = require("../spec/barStackedHorizontal"), funnelHorizontal_1 = require("../spec/funnelHorizontal"), gauge_1 = require("../spec/gauge"), horizontalBar_1 = require("../spec/horizontalBar"), indicatorSankey_1 = require("../spec/indicatorSankey"), line_1 = require("../spec/line"), pie_1 = require("../spec/pie"), radar_1 = require("../spec/radar"), ring_1 = require("../spec/ring"), scatter_1 = require("../spec/scatter"), funnel_1 = require("../spec/funnel"), combination_1 = require("../spec/combination"), businessFunnel_1 = require("../spec/businessFunnel");
 
 exports.charts = [ {
     title: "Line Chart",
@@ -25,7 +25,7 @@ exports.charts = [ {
 }, {
     title: "Horizontal Grouped Bar Chart",
     spec: barGroupHorizontal_1.barGroupHorizontalSpec,
-    fileName: "horizontalBar"
+    fileName: "barGroupHorizontal"
 }, {
     title: "Horizontal Stacked Bar Chart",
     spec: barStackedHorizontal_1.barStackedHorizontalSpec,
@@ -61,5 +61,21 @@ exports.charts = [ {
     option: {
         enableHtmlAttribute: !0
     }
+}, {
+    title: "Horizontal Funnel",
+    spec: funnelHorizontal_1.horizontalFunnelSpec,
+    fileName: "funnelHorizontal"
+}, {
+    title: "漏斗图",
+    spec: funnel_1.funnelSpec,
+    fileName: "funnel"
+}, {
+    title: "基础组合图",
+    spec: combination_1.CombinationSpec,
+    fileName: "combination"
+}, {
+    title: "业务漏斗图",
+    spec: businessFunnel_1.businessFunnelSpec,
+    fileName: "businessFunnel"
 } ];
 //# sourceMappingURL=chart-list.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/vchart-chart-hub-theme/chart-list.ts"],"names":[],"mappings":";;;AACA,uCAAwC;AACxC,+CAAgD;AAChD,mEAAoE;AACpE,mDAAoD;AACpD,uEAAwE;AACxE,yCAA0C;AAC1C,yDAA0D;AAC1D,6DAA8D;AAC9D,uCAAwC;AACxC,qCAAsC;AACtC,yCAA0C;AAC1C,uCAAwC;AACxC,6CAA8C;AAEjC,QAAA,MAAM,GAAiB;IAClC;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,uBAAY;QAClB,QAAQ,EAAE,UAAU;KACrB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,2BAAc;QACpB,QAAQ,EAAE,YAAY;KACvB;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,2CAAsB;QAC5B,QAAQ,EAAE,eAAe;KAC1B;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,+CAAwB;QAC9B,QAAQ,EAAE,sBAAsB;KACjC;IACD;QACE,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,aAAO;QACb,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,iBAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,sBAAsB;QAC7B,IAAI,EAAE,iCAAiB;QACvB,QAAQ,EAAE,eAAe;KAC1B;IACD;QACE,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,qBAAW;QACjB,QAAQ,EAAE,SAAS;KACpB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,iBAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,qCAAmB;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,uCAAwC;AACxC,+CAAgD;AAChD,mEAAoE;AACpE,mDAAoD;AACpD,uEAAwE;AACxE,+DAAgE;AAChE,yCAA0C;AAC1C,yDAA0D;AAC1D,6DAA8D;AAC9D,uCAAwC;AACxC,qCAAsC;AACtC,yCAA0C;AAC1C,uCAAwC;AACxC,6CAA8C;AAC9C,2CAA4C;AAC5C,qDAAsD;AACtD,2DAA4D;AAE/C,QAAA,MAAM,GAAiB;IAClC;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,uBAAY;QAClB,QAAQ,EAAE,UAAU;KACrB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,2BAAc;QACpB,QAAQ,EAAE,YAAY;KACvB;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,2CAAsB;QAC5B,QAAQ,EAAE,oBAAoB;KAC/B;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,+CAAwB;QAC9B,QAAQ,EAAE,sBAAsB;KACjC;IACD;QACE,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,aAAO;QACb,QAAQ,EAAE,KAAK;KAChB;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;QACd,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,iBAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,sBAAsB;QAC7B,IAAI,EAAE,iCAAiB;QACvB,QAAQ,EAAE,eAAe;KAC1B;IACD;QACE,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,qBAAW;QACjB,QAAQ,EAAE,SAAS;KACpB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,iBAAS;QACf,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,qCAAmB;QACzB,QAAQ,EAAE,iBAAiB;QAC3B,MAAM,EAAE;YACN,mBAAmB,EAAE,IAAI;SAC1B;KACF;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,uCAAoB;QAC1B,QAAQ,EAAE,kBAAkB;KAC7B;IACD;QACE,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,mBAAU;QAChB,QAAQ,EAAE,QAAQ;KACnB;IACD;QACE,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,6BAAe;QACrB,QAAQ,EAAE,aAAa;KACxB;IACD;QACE,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,mCAAkB;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/cjs/vchart-chart-hub-theme/charts.js

@@ -47,17 +47,13 @@ var __createBinding = this && this.__createBinding || (Object.create ? function(
         }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     }));
-}, __importDefault = this && this.__importDefault || function(mod) {
-    return mod && mod.__esModule ? mod : {
-        default: mod
-    };
 };
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.Charts = void 0;
 
-const react_1 = __importStar(require("react")), react_device_detect_1 = require("react-device-detect"), chart_list_1 = require("./chart-list"), react_vchart_1 = require("@visactor/react-vchart"), i18n_1 = require("./i18n"), vchart_1 = __importDefault(require("@visactor/vchart")), vchart_theme_1 = require("@visactor/vchart-theme"), semi_ui_1 = require("@douyinfe/semi-ui"), web_react_1 = require("@arco-design/web-react");
+const react_1 = __importStar(require("react")), react_device_detect_1 = require("react-device-detect"), chart_list_1 = require("./chart-list"), react_vchart_1 = require("@visactor/react-vchart"), i18n_1 = require("./i18n"), vchart_theme_1 = require("@visactor/vchart-theme"), semi_ui_1 = require("@douyinfe/semi-ui"), web_react_1 = require("@arco-design/web-react");
 
 require("@arco-design/web-react/dist/css/arco.css");
 
@@ -100,5 +96,5 @@ function Charts(props) {
     }))))));
 }
 
-vchart_1.default.ThemeManager.registerTheme("chart-hub-light", vchart_theme_1.chartHubLightTheme), 
-vchart_1.default.ThemeManager.setCurrentTheme("chart-hub-light"), exports.Charts = Charts;
+react_vchart_1.VChartCore.ThemeManager.registerTheme("chart-hub-light", vchart_theme_1.chartHubLightTheme), 
+react_vchart_1.VChartCore.ThemeManager.setCurrentTheme("chart-hub-light"), exports.Charts = Charts;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/vchart-chart-hub-theme/charts.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAC3C,6DAA+C;AAC/C,6CAAsC;AACtC,yDAAmE;AACnE,iCAA8B;AAC9B,8DAAsC;AACtC,yDAA4D;AAE5D,+CAAiD;AACjD,sDAA8C;AAC9C,oDAAkD;AAGlD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,gBAAI,CAAC;AAC1B,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,MAAM,kBAAkB,GACtB,gHAAgH,CAAC;AAEnH,gBAAM,CAAC,YAAY,CAAC,aAAa,CAAC,iBAAiB,EAAE,iCAAkB,CAAC,CAAC;AACzE,gBAAM,CAAC,YAAY,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAMvD,SAAgB,MAAM,CAAC,KAAa;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,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,8BAAC,GAAG,IAAC,MAAM,EAAE,MAAM,IAChB,mBAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACvB,OAAO,CACL,8BAAC,GAAG,IAAC,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE;YAChD,8BAAC,cAAI,IACH,SAAS,EAAC,gBAAgB,EAC1B,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,kBAAkB,EAChB,8BAAC,gBAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC,IAEA,WAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb;gBAGX,8BAAC,qBAAe,IACd,IAAI,kCACC,KAAK,CAAC,IAAI,KACb,MAAM,EAAE,WAAW,KAErB,OAAO,kCACF,KAAK,CAAC,MAAM,KACf,IAAI,EAAE,8BAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,MAEvD,CACG,CACH,CACP,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAtDD,wBAsDC","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,+CAA2C;AAC3C,6DAA+C;AAC/C,6CAAsC;AACtC,yDAA+E;AAC/E,iCAA8B;AAC9B,yDAA4D;AAE5D,+CAAiD;AACjD,sDAA8C;AAC9C,oDAAkD;AAGlD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,gBAAI,CAAC;AAC1B,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,MAAM,kBAAkB,GACtB,gHAAgH,CAAC;AAEnH,yBAAU,CAAC,YAAY,CAAC,aAAa,CAAC,iBAAiB,EAAE,iCAAyB,CAAC,CAAC;AACpF,yBAAU,CAAC,YAAY,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAM3D,SAAgB,MAAM,CAAC,KAAa;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAElC,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,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,8BAAC,GAAG,IAAC,MAAM,EAAE,MAAM,IAChB,mBAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QACvB,OAAO,CACL,8BAAC,GAAG,IAAC,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE;YAChD,8BAAC,cAAI,IACH,SAAS,EAAC,gBAAgB,EAC1B,QAAQ,EAAE,KAAK,EACf,UAAU,EAAE,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,kBAAkB,EAChB,8BAAC,gBAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC,IAEA,WAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb;gBAGX,8BAAC,qBAAe,IACd,IAAI,kCACC,KAAK,CAAC,IAAI,KACb,MAAM,EAAE,WAAW,KAErB,OAAO,kCACF,KAAK,CAAC,MAAM,KACf,IAAI,EAAE,8BAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,MAEvD,CACG,CACH,CACP,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAtDD,wBAsDC","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/esm/spec/businessFunnel.d.ts

@@ -0,0 +1,223 @@
+export declare const businessFunnelSpec: {
+    id: string;
+    type: string;
+    seriesField: string;
+    height: number;
+    padding: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+    data: ({
+        id: string;
+        values: {
+            x: string;
+            y: number;
+            percent: number;
+            average: number;
+        }[];
+    } | {
+        id: string;
+        values: {
+            x: string;
+            y0: number;
+            y1: number;
+            y: number;
+            percent: number;
+        }[];
+    })[];
+    series: ({
+        type: string;
+        id: string;
+        dataIndex: number;
+        xField: string;
+        yField: string;
+        barWidth: string;
+        extensionMark: {
+            type: string;
+            dataId: string;
+            style: {
+                x: (datum: any, ctx: any) => any;
+                y: number;
+                textAlign: string;
+                fontSize: number;
+                stroke: boolean;
+                text: (datum: any) => {
+                    type: string;
+                    text: ({
+                        text: string;
+                        fill: string;
+                        textAlign: string;
+                        fontWeight: string;
+                        lineHeight: number;
+                    } | {
+                        text: string;
+                        fill: string;
+                        textAlign: string;
+                        lineHeight: number;
+                        fontWeight?: undefined;
+                    })[];
+                };
+            };
+        }[];
+        bar?: undefined;
+        stack?: undefined;
+        tooltip?: undefined;
+    } | {
+        type: string;
+        id: string;
+        dataIndex: number;
+        xField: string;
+        yField: string;
+        bar: {
+            visible: boolean;
+            style?: undefined;
+        };
+        extensionMark: ({
+            type: string;
+            dataId: string;
+            dataKey: string;
+            style: {
+                points: (datum: any, ctx: any) => {
+                    x: any;
+                    y: any;
+                }[];
+                fill: string;
+                fillOpacity: number;
+                x?: undefined;
+                y?: undefined;
+                textAlign?: undefined;
+                fontSize?: undefined;
+                stroke?: undefined;
+                text?: undefined;
+            };
+            customShape?: undefined;
+        } | {
+            type: string;
+            dataId: string;
+            dataKey: string;
+            customShape: (data: any, attrs: any, path: any) => any;
+            style: {
+                points: (datum: any, ctx: any) => {
+                    x: any;
+                    y: any;
+                }[];
+                fill: string;
+                fillOpacity?: undefined;
+                x?: undefined;
+                y?: undefined;
+                textAlign?: undefined;
+                fontSize?: undefined;
+                stroke?: undefined;
+                text?: undefined;
+            };
+        } | {
+            type: string;
+            dataId: string;
+            dataKey: string;
+            style: {
+                x: (datum: any, ctx: any) => any;
+                y: number;
+                textAlign: string;
+                fontSize: number;
+                stroke: boolean;
+                text: (datum: any) => {
+                    type: string;
+                    text: ({
+                        text: string;
+                        fill: string;
+                        textAlign: string;
+                        fontWeight: string;
+                        lineHeight: number;
+                    } | {
+                        text: string;
+                        fill: string;
+                        textAlign: string;
+                        lineHeight: number;
+                        fontWeight?: undefined;
+                    })[];
+                };
+                points?: undefined;
+                fill?: undefined;
+                fillOpacity?: undefined;
+            };
+            customShape?: undefined;
+        })[];
+        barWidth?: undefined;
+        stack?: undefined;
+        tooltip?: undefined;
+    } | {
+        type: string;
+        stack: boolean;
+        id: string;
+        dataIndex: number;
+        xField: string;
+        yField: string;
+        barWidth: string;
+        bar: {
+            visible: boolean;
+            style: {
+                fill: string;
+                height: number;
+            };
+        };
+        tooltip: {
+            visible: boolean;
+        };
+        extensionMark?: undefined;
+    })[];
+    animation: boolean;
+    tooltip: {
+        mark: {
+            visible: boolean;
+        };
+        dimension: {
+            title: (data: any, params: any) => {
+                value: any;
+            };
+            content: (data: any, params: any) => ({
+                hasShape: boolean;
+                key: (datum: any) => any;
+                value: (datum: any) => any;
+            } | {
+                hasShape: boolean;
+                key: string;
+                value: (datum: any) => any;
+            })[];
+        };
+    };
+    axes: ({
+        orient: string;
+        seriesIndex: number[];
+        visible: boolean;
+        paddingInner?: undefined;
+        paddingOuter?: undefined;
+        domain?: undefined;
+        domainLine?: undefined;
+        tick?: undefined;
+        sampling?: undefined;
+        label?: undefined;
+    } | {
+        orient: string;
+        paddingInner: number;
+        paddingOuter: number;
+        domain: string[];
+        domainLine: {
+            visible: boolean;
+        };
+        tick: {
+            visible: boolean;
+        };
+        sampling: boolean;
+        label: {
+            style: {
+                fill: string;
+            };
+            autoLimit: boolean;
+            formatMethod: (label: any) => any;
+        };
+        seriesIndex?: undefined;
+        visible?: undefined;
+    })[];
+};