@visactor/vchart-theme-demo-component 1.11.1 → 1.11.2-alpha.0

package/cjs/spec/scatter.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.scatterSpec = void 0, exports.scatterSpec = {
+    type: "scatter",
+    data: [ {
+        id: "barData",
+        values: [ {
+            gender: "female",
+            height: 156.5,
+            weight: 51.6,
+            age: 26
+        }, {
+            gender: "female",
+            height: 158,
+            weight: 59,
+            age: 22
+        }, {
+            gender: "female",
+            height: 159,
+            weight: 49.2,
+            age: 23
+        }, {
+            gender: "female",
+            height: 160,
+            weight: 63,
+            age: 31
+        }, {
+            gender: "female",
+            height: 162,
+            weight: 53.6,
+            age: 30
+        }, {
+            gender: "female",
+            height: 163,
+            weight: 59,
+            age: 17
+        }, {
+            gender: "female",
+            height: 168,
+            weight: 47.6,
+            age: 18
+        }, {
+            gender: "female",
+            height: 170,
+            weight: 69.8,
+            age: 26
+        }, {
+            gender: "female",
+            height: 170.2,
+            weight: 66.8,
+            age: 25
+        }, {
+            gender: "female",
+            height: 171,
+            weight: 75.2,
+            age: 27
+        }, {
+            gender: "male",
+            height: 171.5,
+            weight: 65.6,
+            age: 29
+        }, {
+            gender: "male",
+            height: 172,
+            weight: 71.8,
+            age: 15
+        }, {
+            gender: "male",
+            height: 175,
+            weight: 80.7,
+            age: 18
+        }, {
+            gender: "male",
+            height: 178,
+            weight: 72.6,
+            age: 19
+        }, {
+            gender: "male",
+            height: 180,
+            weight: 78.8,
+            age: 21
+        }, {
+            gender: "male",
+            height: 183,
+            weight: 74.8,
+            age: 25
+        }, {
+            gender: "male",
+            height: 184,
+            weight: 86.4,
+            age: 27
+        }, {
+            gender: "male",
+            height: 184,
+            weight: 78.4,
+            age: 23
+        }, {
+            gender: "male",
+            height: 185,
+            weight: 62,
+            age: 28
+        }, {
+            gender: "male",
+            height: 187,
+            weight: 91.6,
+            age: 50
+        } ]
+    } ],
+    xField: "height",
+    yField: "weight",
+    seriesField: "gender",
+    legends: {
+        visible: !0
+    },
+    crosshair: {
+        xField: {
+            visible: !1
+        }
+    },
+    interactions: [ {
+        type: "element-active-by-legend",
+        state: "active"
+    } ],
+    tooltip: {
+        dimension: {
+            visible: !1
+        }
+    },
+    point: {
+        state: {
+            active: {
+                size: 10,
+                fillOpacity: .6,
+                strokeOpacity: .6,
+                outerBorder: {
+                    lineWidth: 1,
+                    strokeOpacity: .2,
+                    distance: 2
+                }
+            }
+        }
+    },
+    axes: [ {
+        orient: "bottom",
+        type: "linear",
+        zero: !1,
+        domainLine: {
+            visible: !0
+        },
+        grid: {
+            visible: !1
+        }
+    } ]
+};
+//# sourceMappingURL=scatter.js.map

package/cjs/spec/scatter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spec/scatter.ts"],"names":[],"mappings":"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","file":"scatter.js","sourcesContent":["export const scatterSpec = {\n  type: 'scatter',\n  data: [\n    {\n      id: 'barData',\n      values: [\n        {\n          gender: 'female',\n          height: 156.5,\n          weight: 51.6,\n          age: 26\n        },\n        {\n          gender: 'female',\n          height: 158,\n          weight: 59,\n          age: 22\n        },\n        {\n          gender: 'female',\n          height: 159,\n          weight: 49.2,\n          age: 23\n        },\n        {\n          gender: 'female',\n          height: 160,\n          weight: 63,\n          age: 31\n        },\n        {\n          gender: 'female',\n          height: 162,\n          weight: 53.6,\n          age: 30\n        },\n        {\n          gender: 'female',\n          height: 163,\n          weight: 59,\n          age: 17\n        },\n        {\n          gender: 'female',\n          height: 168,\n          weight: 47.6,\n          age: 18\n        },\n        {\n          gender: 'female',\n          height: 170,\n          weight: 69.8,\n          age: 26\n        },\n        {\n          gender: 'female',\n          height: 170.2,\n          weight: 66.8,\n          age: 25\n        },\n        {\n          gender: 'female',\n          height: 171,\n          weight: 75.2,\n          age: 27\n        },\n        {\n          gender: 'male',\n          height: 171.5,\n          weight: 65.6,\n          age: 29\n        },\n        {\n          gender: 'male',\n          height: 172,\n          weight: 71.8,\n          age: 15\n        },\n        {\n          gender: 'male',\n          height: 175,\n          weight: 80.7,\n          age: 18\n        },\n        {\n          gender: 'male',\n          height: 178,\n          weight: 72.6,\n          age: 19\n        },\n        {\n          gender: 'male',\n          height: 180,\n          weight: 78.8,\n          age: 21\n        },\n        {\n          gender: 'male',\n          height: 183,\n          weight: 74.8,\n          age: 25\n        },\n        {\n          gender: 'male',\n          height: 184,\n          weight: 86.4,\n          age: 27\n        },\n        {\n          gender: 'male',\n          height: 184,\n          weight: 78.4,\n          age: 23\n        },\n        {\n          gender: 'male',\n          height: 185,\n          weight: 62,\n          age: 28\n        },\n        {\n          gender: 'male',\n          height: 187,\n          weight: 91.6,\n          age: 50\n        }\n      ]\n    }\n  ],\n  xField: 'height',\n  yField: 'weight',\n  seriesField: 'gender',\n  legends: { visible: true },\n  crosshair: {\n    xField: { visible: false }\n  },\n  interactions: [\n    {\n      type: 'element-active-by-legend',\n      state: 'active'\n    }\n  ],\n  tooltip: {\n    dimension: { visible: false }\n  },\n  point: {\n    state: {\n      active: {\n        size: 10,\n        fillOpacity: 0.6,\n        strokeOpacity: 0.6,\n        outerBorder: {\n          lineWidth: 1,\n          strokeOpacity: 0.2,\n          distance: 2\n        }\n      }\n    }\n  },\n  axes: [\n    {\n      orient: 'bottom',\n      type: 'linear',\n      zero: false,\n      domainLine: { visible: true },\n      grid: { visible: false }\n    }\n  ]\n};\n"]}

package/cjs/vchart-chart-hub-theme/chart-list.d.ts

@@ -0,0 +1,2 @@
+import type { IChartInfo } from '../interface';
+export declare const charts: IChartInfo[];

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

@@ -0,0 +1,52 @@
+"use strict";
+
+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");
+
+exports.charts = [ {
+    title: "Line Chart",
+    spec: line_1.lineSpec
+}, {
+    title: "Area Chart",
+    spec: area_1.areaSpec
+}, {
+    title: "Grouped Bar Chart",
+    spec: barGroup_1.barGroupSpec
+}, {
+    title: "Stacked Bar Chart",
+    spec: barStacked_1.barStackedSpec
+}, {
+    title: "Horizontal Grouped Bar Chart",
+    spec: barGroupHorizontal_1.barGroupHorizontalSpec
+}, {
+    title: "Horizontal Stacked Bar Chart",
+    spec: barStackedHorizontal_1.barStackedHorizontalSpec
+}, {
+    title: "Pie Chart",
+    spec: pie_1.pieSpec
+}, {
+    title: "Ring Chart",
+    spec: ring_1.ringSpec
+}, {
+    title: "Gauge Chart",
+    spec: gauge_1.gaugeSpec
+}, {
+    title: "Horizontal Bar Chart",
+    spec: horizontalBar_1.horizontalBarSpec
+}, {
+    title: "Scatter Chart",
+    spec: scatter_1.scatterSpec
+}, {
+    title: "Radar Chart",
+    spec: radar_1.radarSpec
+}, {
+    title: "Indicator Sankey Chart",
+    spec: indicatorSankey_1.indicatorSankeySpec,
+    option: {
+        enableHtmlAttribute: !0
+    }
+} ];
+//# sourceMappingURL=chart-list.js.map

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

@@ -0,0 +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;KACf;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;KACf;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,uBAAY;KACnB;IACD;QACE,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,2BAAc;KACrB;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,2CAAsB;KAC7B;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,IAAI,EAAE,+CAAwB;KAC/B;IACD;QACE,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,aAAO;KACd;IACD;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,eAAQ;KACf;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,iBAAS;KAChB;IACD;QACE,KAAK,EAAE,sBAAsB;QAC7B,IAAI,EAAE,iCAAiB;KACxB;IACD;QACE,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,qBAAW;KAClB;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,iBAAS;KAChB;IACD;QACE,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,qCAAmB;QACzB,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  },\n  {\n    title: 'Area Chart',\n    spec: areaSpec\n  },\n  {\n    title: 'Grouped Bar Chart',\n    spec: barGroupSpec\n  },\n  {\n    title: 'Stacked Bar Chart',\n    spec: barStackedSpec\n  },\n  {\n    title: 'Horizontal Grouped Bar Chart',\n    spec: barGroupHorizontalSpec\n  },\n  {\n    title: 'Horizontal Stacked Bar Chart',\n    spec: barStackedHorizontalSpec\n  },\n  {\n    title: 'Pie Chart',\n    spec: pieSpec\n  },\n  {\n    title: 'Ring Chart',\n    spec: ringSpec\n  },\n  {\n    title: 'Gauge Chart',\n    spec: gaugeSpec\n  },\n  {\n    title: 'Horizontal Bar Chart',\n    spec: horizontalBarSpec\n  },\n  {\n    title: 'Scatter Chart',\n    spec: scatterSpec\n  },\n  {\n    title: 'Radar Chart',\n    spec: radarSpec\n  },\n  {\n    title: 'Indicator Sankey Chart',\n    spec: indicatorSankeySpec,\n    option: {\n      enableHtmlAttribute: true\n    }\n  }\n];\n"]}

package/cjs/vchart-chart-hub-theme/charts.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import '@arco-design/web-react/dist/css/arco.css';
+export declare const Charts: () => React.JSX.Element;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var __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 = __importDefault(require("react")), react_device_detect_1 = require("react-device-detect"), chart_list_1 = require("./chart-list"), react_vchart_1 = require("@visactor/react-vchart"), 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");
+
+require("@arco-design/web-react/dist/css/arco.css");
+
+const {Row: Row, Col: Col} = web_react_1.Grid, chartHeight = 400, gutter = 16;
+
+vchart_1.default.ThemeManager.registerTheme("chart-hub-light", vchart_theme_1.chartHubLightTheme), 
+vchart_1.default.ThemeManager.setCurrentTheme("chart-hub-light");
+
+const Charts = () => react_1.default.createElement(Row, {
+    gutter: 16
+}, chart_list_1.charts.map(((chart, i) => react_1.default.createElement(Col, {
+    span: 12,
+    key: i,
+    style: {
+        marginBottom: 16
+    }
+}, react_1.default.createElement(semi_ui_1.Card, {
+    className: "chartContainer",
+    bordered: !1,
+    headerLine: !0,
+    title: chart.title
+}, react_1.default.createElement(react_vchart_1.VChart, {
+    spec: Object.assign(Object.assign({}, chart.spec), {
+        height: 400
+    }),
+    options: Object.assign(Object.assign({}, chart.option), {
+        mode: react_device_detect_1.isMobile ? "mobile-browser" : "desktop-browser"
+    })
+}))))));
+
+exports.Charts = Charts;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vchart-chart-hub-theme/charts.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,6DAA+C;AAC/C,6CAAsC;AACtC,yDAAmE;AACnE,8DAAsC;AACtC,yDAA4D;AAE5D,+CAAyC;AACzC,sDAA8C;AAC9C,oDAAkD;AAElD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,gBAAI,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,gBAAM,CAAC,YAAY,CAAC,aAAa,CAAC,iBAAiB,EAAE,iCAAkB,CAAC,CAAC;AACzE,gBAAM,CAAC,YAAY,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAEhD,MAAM,MAAM,GAAG,GAAG,EAAE;IACzB,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,IAAC,SAAS,EAAC,gBAAgB,EAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;gBACpF,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,CAAC;AAvBW,QAAA,MAAM,UAuBjB","file":"charts.js","sourcesContent":["import React from 'react';\nimport { isMobile } from 'react-device-detect';\nimport { charts } from './chart-list';\nimport { VChart as VChartComponent } from '@visactor/react-vchart';\nimport VChart from '@visactor/vchart';\nimport { chartHubLightTheme } from '@visactor/vchart-theme';\n\nimport { Card } from '@douyinfe/semi-ui';\nimport { Grid } from '@arco-design/web-react';\nimport '@arco-design/web-react/dist/css/arco.css';\n\nconst { Row, Col } = Grid;\n\nconst chartHeight = 400;\n\nconst gutter = 16;\n\nVChart.ThemeManager.registerTheme('chart-hub-light', chartHubLightTheme);\nVChart.ThemeManager.setCurrentTheme('chart-hub-light');\n\nexport const Charts = () => {\n  return (\n    <Row gutter={gutter}>\n      {charts.map((chart, i) => {\n        return (\n          <Col span={12} key={i} style={{ marginBottom: 16 }}>\n            <Card className=\"chartContainer\" bordered={false} headerLine={true} title={chart.title}>\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/cjs/vchart-chart-hub-theme/frame.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './style/style';
+export declare const Frame: () => React.JSX.Element;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function(mod) {
+    return mod && mod.__esModule ? mod : {
+        default: mod
+    };
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Frame = void 0;
+
+const react_1 = __importDefault(require("react")), semi_ui_1 = require("@douyinfe/semi-ui"), semi_icons_1 = require("@douyinfe/semi-icons");
+
+require("./style/style");
+
+const charts_1 = require("./charts"), Frame = () => react_1.default.createElement("div", {
+    className: "rootSidenav"
+}, react_1.default.createElement(semi_ui_1.Nav, {
+    mode: "horizontal",
+    header: {
+        text: "ChartHub Templates"
+    },
+    footer: react_1.default.createElement("div", {
+        className: "dIV"
+    }, react_1.default.createElement(semi_icons_1.IconFeishuLogo, {
+        size: "large",
+        className: "semiIconsFeishuLogo"
+    }), react_1.default.createElement(semi_icons_1.IconHelpCircle, {
+        size: "large",
+        className: "semiIconsHelpCircle"
+    }), react_1.default.createElement(semi_icons_1.IconBell, {
+        size: "large",
+        className: "semiIconsBell"
+    }), react_1.default.createElement(semi_ui_1.Avatar, {
+        size: "small",
+        src: "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg",
+        color: "blue",
+        className: "avatar"
+    }, "示例")),
+    className: "nav"
+}), react_1.default.createElement("div", {
+    className: "main"
+}, react_1.default.createElement("div", {
+    className: "right"
+}, react_1.default.createElement("div", {
+    className: "frame1321317607"
+}, react_1.default.createElement(charts_1.Charts, null)))));
+
+exports.Frame = Frame;
+//# sourceMappingURL=frame.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vchart-chart-hub-theme/frame.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAAgD;AAChD,qDAAgF;AAChF,yBAAuB;AACvB,qCAAkC;AAE3B,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,OAAO,CACL,uCAAK,SAAS,EAAC,aAAa;QAC1B,8BAAC,aAAG,IACF,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE;gBACN,IAAI,EAAE,oBAAoB;aAC3B,EACD,MAAM,EACJ,uCAAK,SAAS,EAAC,KAAK;gBAClB,8BAAC,2BAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,qBAAqB,GAAG;gBAC/D,8BAAC,2BAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,qBAAqB,GAAG;gBAC/D,8BAAC,qBAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,eAAe,GAAG;gBACnD,8BAAC,gBAAM,IACL,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,8GAA8G,EAClH,KAAK,EAAC,MAAM,EACZ,SAAS,EAAC,QAAQ,mBAGX,CACL,EAER,SAAS,EAAC,KAAK,GACV;QACP,uCAAK,SAAS,EAAC,MAAM;YACnB,uCAAK,SAAS,EAAC,OAAO;gBACpB,uCAAK,SAAS,EAAC,iBAAiB;oBAC9B,8BAAC,eAAM,OAAG,CACN,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,KAAK,SAkChB","file":"frame.js","sourcesContent":["import React from 'react';\nimport { Nav, Avatar } from '@douyinfe/semi-ui';\nimport { IconFeishuLogo, IconHelpCircle, IconBell } from '@douyinfe/semi-icons';\nimport './style/style';\nimport { Charts } from './charts';\n\nexport const Frame = () => {\n  return (\n    <div className=\"rootSidenav\">\n      <Nav\n        mode=\"horizontal\"\n        header={{\n          text: 'ChartHub Templates'\n        }}\n        footer={\n          <div className=\"dIV\">\n            <IconFeishuLogo size=\"large\" className=\"semiIconsFeishuLogo\" />\n            <IconHelpCircle size=\"large\" className=\"semiIconsHelpCircle\" />\n            <IconBell size=\"large\" className=\"semiIconsBell\" />\n            <Avatar\n              size=\"small\"\n              src=\"https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg\"\n              color=\"blue\"\n              className=\"avatar\"\n            >\n              示例\n            </Avatar>\n          </div>\n        }\n        className=\"nav\"\n      ></Nav>\n      <div className=\"main\">\n        <div className=\"right\">\n          <div className=\"frame1321317607\">\n            <Charts />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n// export default Frame;\n"]}

package/cjs/vchart-chart-hub-theme/index.d.ts

@@ -0,0 +1 @@
+export * from './frame';

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

@@ -0,0 +1,21 @@
+"use strict";
+
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __exportStar = this && this.__exportStar || function(m, exports) {
+    for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), __exportStar(require("./frame"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vchart-chart-hub-theme/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB","file":"index.js","sourcesContent":["export * from './frame';\n"]}

package/cjs/vchart-chart-hub-theme/index.module.less

@@ -0,0 +1,129 @@
+.rootSidenav {
+  align-items: flex-start;
+  background: var(--semi-color-fill-0);
+  flex-direction: column;
+  overflow: hidden;
+  row-gap: 0;
+  display: flex;
+  color: var(--semi-color-text-0);
+  font-family: Inter;
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.6px;
+  line-height: 28px;
+  text-align: left;
+
+  .nav {
+    align-self: stretch;
+    height: 60px;
+
+    .navigationHeaderLogo {
+      align-items: flex-start;
+      column-gap: 0;
+      display: inline-flex;
+      flex-shrink: 0;
+
+      .semiIconsSemiLogo {
+        font-size: 36px;
+        color: var(--semi-color-text-0);
+      }
+    }
+
+    .dIV {
+      align-items: center;
+      column-gap: 16px;
+      display: inline-flex;
+      flex-shrink: 0;
+
+      .semiIconsFeishuLogo,
+      .semiIconsHelpCircle,
+      .semiIconsBell {
+        font-size: 20px;
+        color: var(--semi-color-text-2);
+      }
+
+      .avatar {
+        height: 32px;
+        width: 32px;
+      }
+    }
+  }
+
+  .main {
+    align-items: flex-start;
+    column-gap: 0;
+    display: flex;
+    flex-shrink: 0;
+    align-self: stretch;
+
+    .left {
+      height: calc(100vh - 60px);
+
+      .navItem,
+      .navItem5 {
+        width: 223px;
+
+        .iconIntro,
+        .iconRadio {
+          height: 20px;
+          position: relative;
+          width: 20px;
+        }
+      }
+
+      .navItem1,
+      .navItem2,
+      .navItem3,
+      .navItem4,
+      .navItem6,
+      .navItem7 {
+        width: 223px;
+
+        .iconHeart,
+        .iconCalendar,
+        .iconCheckbox,
+        .iconCalendar,
+        .iconList,
+        .iconToast {
+          height: 20px;
+          width: 20px;
+        }
+      }
+    }
+
+    .right {
+      height: calc(100vh - 60px);
+      overflow-y: auto;
+      align-items: flex-start;
+      display: flex;
+      flex-basis: 0;
+      flex-direction: column;
+      padding: 40px;
+      row-gap: 24px;
+      flex-grow: 1;
+
+      .item {
+        min-width: 90px;
+        vertical-align: middle;
+        flex-shrink: 0;
+      }
+
+      .frame1321317607 {
+        align-items: center;
+        border-radius: 12px;
+        display: flex;
+        flex-direction: row;
+        flex-shrink: 0;
+        color: var(--semi-color-disabled-text);
+        font-size: 14px;
+        letter-spacing: -0.14px;
+        line-height: 20px;
+
+        .yourContentHere {
+          vertical-align: middle;
+          min-width: 123px;
+        }
+      }
+    }
+  }
+}

package/cjs/vchart-chart-hub-theme/style/style.css

@@ -0,0 +1,149 @@
+.rootSidenav {
+  align-items: flex-start;
+  background: var(--semi-color-fill-0);
+  flex-direction: column;
+  overflow: hidden;
+  row-gap: 0;
+  display: flex;
+  color: var(--semi-color-text-0);
+  font-family: Inter;
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.6px;
+  line-height: 28px;
+  text-align: left;
+  min-width: 1100px;
+}
+.rootSidenav .nav {
+  align-self: stretch;
+  height: 60px;
+}
+.rootSidenav .nav .navigationHeaderLogo {
+  align-items: flex-start;
+  -moz-column-gap: 0;
+       column-gap: 0;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.rootSidenav .nav .navigationHeaderLogo .semiIconsSemiLogo {
+  font-size: 36px;
+  color: var(--semi-color-text-0);
+}
+.rootSidenav .nav .dIV {
+  align-items: center;
+  -moz-column-gap: 16px;
+       column-gap: 16px;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.rootSidenav .nav .dIV .semiIconsFeishuLogo,
+.rootSidenav .nav .dIV .semiIconsHelpCircle,
+.rootSidenav .nav .dIV .semiIconsBell {
+  font-size: 20px;
+  color: var(--semi-color-text-2);
+}
+.rootSidenav .nav .dIV .avatar {
+  height: 32px;
+  width: 32px;
+}
+.rootSidenav .main {
+  align-items: flex-start;
+  -moz-column-gap: 0;
+       column-gap: 0;
+  display: flex;
+  flex-shrink: 0;
+  align-self: stretch;
+}
+.rootSidenav .main .left {
+  height: calc(100vh - 60px);
+}
+.rootSidenav .main .left .navItem,
+.rootSidenav .main .left .navItem5 {
+  width: 223px;
+}
+.rootSidenav .main .left .navItem .iconIntro,
+.rootSidenav .main .left .navItem5 .iconIntro,
+.rootSidenav .main .left .navItem .iconRadio,
+.rootSidenav .main .left .navItem5 .iconRadio {
+  height: 20px;
+  position: relative;
+  width: 20px;
+}
+.rootSidenav .main .left .navItem1,
+.rootSidenav .main .left .navItem2,
+.rootSidenav .main .left .navItem3,
+.rootSidenav .main .left .navItem4,
+.rootSidenav .main .left .navItem6,
+.rootSidenav .main .left .navItem7 {
+  width: 223px;
+}
+.rootSidenav .main .left .navItem1 .iconHeart,
+.rootSidenav .main .left .navItem2 .iconHeart,
+.rootSidenav .main .left .navItem3 .iconHeart,
+.rootSidenav .main .left .navItem4 .iconHeart,
+.rootSidenav .main .left .navItem6 .iconHeart,
+.rootSidenav .main .left .navItem7 .iconHeart,
+.rootSidenav .main .left .navItem1 .iconCalendar,
+.rootSidenav .main .left .navItem2 .iconCalendar,
+.rootSidenav .main .left .navItem3 .iconCalendar,
+.rootSidenav .main .left .navItem4 .iconCalendar,
+.rootSidenav .main .left .navItem6 .iconCalendar,
+.rootSidenav .main .left .navItem7 .iconCalendar,
+.rootSidenav .main .left .navItem1 .iconCheckbox,
+.rootSidenav .main .left .navItem2 .iconCheckbox,
+.rootSidenav .main .left .navItem3 .iconCheckbox,
+.rootSidenav .main .left .navItem4 .iconCheckbox,
+.rootSidenav .main .left .navItem6 .iconCheckbox,
+.rootSidenav .main .left .navItem7 .iconCheckbox,
+.rootSidenav .main .left .navItem1 .iconCalendar,
+.rootSidenav .main .left .navItem2 .iconCalendar,
+.rootSidenav .main .left .navItem3 .iconCalendar,
+.rootSidenav .main .left .navItem4 .iconCalendar,
+.rootSidenav .main .left .navItem6 .iconCalendar,
+.rootSidenav .main .left .navItem7 .iconCalendar,
+.rootSidenav .main .left .navItem1 .iconList,
+.rootSidenav .main .left .navItem2 .iconList,
+.rootSidenav .main .left .navItem3 .iconList,
+.rootSidenav .main .left .navItem4 .iconList,
+.rootSidenav .main .left .navItem6 .iconList,
+.rootSidenav .main .left .navItem7 .iconList,
+.rootSidenav .main .left .navItem1 .iconToast,
+.rootSidenav .main .left .navItem2 .iconToast,
+.rootSidenav .main .left .navItem3 .iconToast,
+.rootSidenav .main .left .navItem4 .iconToast,
+.rootSidenav .main .left .navItem6 .iconToast,
+.rootSidenav .main .left .navItem7 .iconToast {
+  height: 20px;
+  width: 20px;
+}
+.rootSidenav .main .right {
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+  align-items: flex-start;
+  display: flex;
+  flex-basis: 0;
+  flex-direction: column;
+  padding: 40px;
+  row-gap: 24px;
+  flex-grow: 1;
+}
+.rootSidenav .main .right .item {
+  min-width: 90px;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+.rootSidenav .main .right .frame1321317607 {
+  align-items: center;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  color: var(--semi-color-disabled-text);
+  font-size: 14px;
+  letter-spacing: -0.14px;
+  line-height: 20px;
+}
+.rootSidenav .main .right .frame1321317607 .yourContentHere {
+  vertical-align: middle;
+  min-width: 123px;
+}

package/cjs/vchart-chart-hub-theme/style/style.d.ts

@@ -0,0 +1 @@
+import './style.less';

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), require("./style.css");
+//# sourceMappingURL=style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vchart-chart-hub-theme/style/style.ts"],"names":[],"mappings":";;AAAA,wBAAsB","file":"style.js","sourcesContent":["import './style.less';\n"]}