@visactor/vchart-theme-demo-component 0.0.1-alpha.3 → 0.0.1-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/cjs/index.d.ts +1 -1
  2. package/cjs/index.js +1 -1
  3. package/cjs/index.js.map +1 -1
  4. package/cjs/vchart-chart-hub-theme/charts.d.ts +2 -2
  5. package/cjs/vchart-chart-hub-theme/charts.js +7 -3
  6. package/cjs/vchart-chart-hub-theme/charts.js.map +1 -1
  7. package/cjs/vchart-chart-hub-theme/frame.d.ts +1 -2
  8. package/cjs/vchart-chart-hub-theme/frame.js +4 -4
  9. package/cjs/vchart-chart-hub-theme/frame.js.map +1 -1
  10. package/cjs/vchart-chart-hub-theme/index.d.ts +1 -1
  11. package/cjs/vchart-chart-hub-theme/index.js +3 -13
  12. package/cjs/vchart-chart-hub-theme/index.js.map +1 -1
  13. package/cjs/vchart-chart-hub-theme/index.module.less +129 -0
  14. package/cjs/vchart-chart-hub-theme/style/style.css +1 -0
  15. package/cjs/vchart-chart-hub-theme/style/style.less +114 -0
  16. package/esm/index.d.ts +1 -1
  17. package/esm/index.js +1 -1
  18. package/esm/index.js.map +1 -1
  19. package/esm/vchart-chart-hub-theme/charts.d.ts +2 -2
  20. package/esm/vchart-chart-hub-theme/charts.js +4 -4
  21. package/esm/vchart-chart-hub-theme/charts.js.map +1 -1
  22. package/esm/vchart-chart-hub-theme/frame.d.ts +1 -2
  23. package/esm/vchart-chart-hub-theme/frame.js +2 -4
  24. package/esm/vchart-chart-hub-theme/frame.js.map +1 -1
  25. package/esm/vchart-chart-hub-theme/index.d.ts +1 -1
  26. package/esm/vchart-chart-hub-theme/index.js +1 -3
  27. package/esm/vchart-chart-hub-theme/index.js.map +1 -1
  28. package/esm/vchart-chart-hub-theme/index.module.less +129 -0
  29. package/esm/vchart-chart-hub-theme/style/style.css +1 -0
  30. package/esm/vchart-chart-hub-theme/style/style.less +114 -0
  31. package/package.json +7 -3
package/cjs/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { ChartHubThemePage } from './vchart-chart-hub-theme/index';
1
+ import { Frame as ChartHubThemePage } from './vchart-chart-hub-theme/index';
2
2
  export { ChartHubThemePage };
package/cjs/index.js CHANGED
@@ -9,7 +9,7 @@ const index_1 = require("./vchart-chart-hub-theme/index");
9
9
  Object.defineProperty(exports, "ChartHubThemePage", {
10
10
  enumerable: !0,
11
11
  get: function() {
12
- return index_1.ChartHubThemePage;
12
+ return index_1.Frame;
13
13
  }
14
14
  });
15
15
  //# sourceMappingURL=index.js.map
package/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,0DAAmE;AAC1D,kGADA,yBAAiB,OACA","file":"index.js","sourcesContent":["import { ChartHubThemePage } from './vchart-chart-hub-theme/index';\nexport { ChartHubThemePage };\n"]}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,0DAA4E;AACnE,kGADS,aAAiB,OACT","file":"index.js","sourcesContent":["import { Frame as ChartHubThemePage } from './vchart-chart-hub-theme/index';\nexport { ChartHubThemePage };\n"]}
package/cjs/vchart-chart-hub-theme/charts.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
- declare const Charts: () => React.JSX.Element;
3
- export default Charts;
2
+ import '@arco-design/web-react/dist/css/arco.css';
3
+ export declare const Charts: () => React.JSX.Element;
package/cjs/vchart-chart-hub-theme/charts.js CHANGED
@@ -8,9 +8,13 @@ var __importDefault = this && this.__importDefault || function(mod) {
8
8
 
9
9
  Object.defineProperty(exports, "__esModule", {
10
10
  value: !0
11
- });
11
+ }), exports.Charts = void 0;
12
12
 
13
- 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"), {Row: Row, Col: Col} = web_react_1.Grid, chartHeight = 400, gutter = 16;
13
+ 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");
14
+
15
+ require("@arco-design/web-react/dist/css/arco.css");
16
+
17
+ const {Row: Row, Col: Col} = web_react_1.Grid, chartHeight = 400, gutter = 16;
14
18
 
15
19
  vchart_1.default.ThemeManager.registerTheme("chart-hub-light", vchart_theme_1.chartHubLightTheme),
16
20
  vchart_1.default.ThemeManager.setCurrentTheme("chart-hub-light");
@@ -37,4 +41,4 @@ const Charts = () => react_1.default.createElement(Row, {
37
41
  })
38
42
  }))))));
39
43
 
40
- exports.default = Charts;
44
+ exports.Charts = Charts;
package/cjs/vchart-chart-hub-theme/charts.js.map CHANGED
@@ -1 +1 @@
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;AAE9C,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;AAEvD,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,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;AAEF,kBAAe,MAAM,CAAC","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';\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\nconst 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\nexport default Charts;\n"]}
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 CHANGED
@@ -1,4 +1,3 @@
1
1
  import React from 'react';
2
2
  import './style/style';
3
- declare const Frame: () => React.JSX.Element;
4
- export default Frame;
3
+ export declare const Frame: () => React.JSX.Element;
package/cjs/vchart-chart-hub-theme/frame.js CHANGED
@@ -8,13 +8,13 @@ var __importDefault = this && this.__importDefault || function(mod) {
8
8
 
9
9
  Object.defineProperty(exports, "__esModule", {
10
10
  value: !0
11
- });
11
+ }), exports.Frame = void 0;
12
12
 
13
13
  const react_1 = __importDefault(require("react")), semi_ui_1 = require("@douyinfe/semi-ui"), semi_icons_1 = require("@douyinfe/semi-icons");
14
14
 
15
15
  require("./style/style");
16
16
 
17
- const charts_jsx_1 = __importDefault(require("./charts.jsx")), Frame = () => react_1.default.createElement("div", {
17
+ const charts_1 = require("./charts"), Frame = () => react_1.default.createElement("div", {
18
18
  className: "rootSidenav"
19
19
  }, react_1.default.createElement(semi_ui_1.Nav, {
20
20
  mode: "horizontal",
@@ -45,7 +45,7 @@ const charts_jsx_1 = __importDefault(require("./charts.jsx")), Frame = () => rea
45
45
  className: "right"
46
46
  }, react_1.default.createElement("div", {
47
47
  className: "frame1321317607"
48
- }, react_1.default.createElement(charts_jsx_1.default, null)))));
48
+ }, react_1.default.createElement(charts_1.Charts, null)))));
49
49
 
50
- exports.default = Frame;
50
+ exports.Frame = Frame;
51
51
  //# sourceMappingURL=frame.js.map
package/cjs/vchart-chart-hub-theme/frame.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/vchart-chart-hub-theme/frame.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,+CAAgD;AAChD,qDAAgF;AAChF,yBAAuB;AACvB,8DAAkC;AAElC,MAAM,KAAK,GAAG,GAAG,EAAE;IACjB,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,oBAAM,OAAG,CACN,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,KAAK,CAAC","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.jsx';\n\nconst 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\nexport default Frame;\n"]}
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 CHANGED
@@ -1 +1 @@
1
- export * as ChartHubThemePage from './frame';
1
+ export * from './frame';
package/cjs/vchart-chart-hub-theme/index.js CHANGED
@@ -11,21 +11,11 @@ var __createBinding = this && this.__createBinding || (Object.create ? function(
11
11
  }), Object.defineProperty(o, k2, desc);
12
12
  } : function(o, m, k, k2) {
13
13
  void 0 === k2 && (k2 = k), o[k2] = m[k];
14
- }), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
15
- Object.defineProperty(o, "default", {
16
- enumerable: !0,
17
- value: v
18
- });
19
- } : function(o, v) {
20
- o.default = v;
21
- }), __importStar = this && this.__importStar || function(mod) {
22
- if (mod && mod.__esModule) return mod;
23
- var result = {};
24
- if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
25
- return __setModuleDefault(result, mod), result;
14
+ }), __exportStar = this && this.__exportStar || function(m, exports) {
15
+ for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
26
16
  };
27
17
 
28
18
  Object.defineProperty(exports, "__esModule", {
29
19
  value: !0
30
- }), exports.ChartHubThemePage = void 0, exports.ChartHubThemePage = __importStar(require("./frame"));
20
+ }), __exportStar(require("./frame"), exports);
31
21
  //# sourceMappingURL=index.js.map
package/cjs/vchart-chart-hub-theme/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/vchart-chart-hub-theme/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6DAA6C","file":"index.js","sourcesContent":["export * as ChartHubThemePage from './frame';\n"]}
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 ADDED
@@ -0,0 +1,129 @@
1
+ .rootSidenav {
2
+ align-items: flex-start;
3
+ background: var(--semi-color-fill-0);
4
+ flex-direction: column;
5
+ overflow: hidden;
6
+ row-gap: 0;
7
+ display: flex;
8
+ color: var(--semi-color-text-0);
9
+ font-family: Inter;
10
+ font-size: 20px;
11
+ font-weight: 600;
12
+ letter-spacing: -0.6px;
13
+ line-height: 28px;
14
+ text-align: left;
15
+
16
+ .nav {
17
+ align-self: stretch;
18
+ height: 60px;
19
+
20
+ .navigationHeaderLogo {
21
+ align-items: flex-start;
22
+ column-gap: 0;
23
+ display: inline-flex;
24
+ flex-shrink: 0;
25
+
26
+ .semiIconsSemiLogo {
27
+ font-size: 36px;
28
+ color: var(--semi-color-text-0);
29
+ }
30
+ }
31
+
32
+ .dIV {
33
+ align-items: center;
34
+ column-gap: 16px;
35
+ display: inline-flex;
36
+ flex-shrink: 0;
37
+
38
+ .semiIconsFeishuLogo,
39
+ .semiIconsHelpCircle,
40
+ .semiIconsBell {
41
+ font-size: 20px;
42
+ color: var(--semi-color-text-2);
43
+ }
44
+
45
+ .avatar {
46
+ height: 32px;
47
+ width: 32px;
48
+ }
49
+ }
50
+ }
51
+
52
+ .main {
53
+ align-items: flex-start;
54
+ column-gap: 0;
55
+ display: flex;
56
+ flex-shrink: 0;
57
+ align-self: stretch;
58
+
59
+ .left {
60
+ height: calc(100vh - 60px);
61
+
62
+ .navItem,
63
+ .navItem5 {
64
+ width: 223px;
65
+
66
+ .iconIntro,
67
+ .iconRadio {
68
+ height: 20px;
69
+ position: relative;
70
+ width: 20px;
71
+ }
72
+ }
73
+
74
+ .navItem1,
75
+ .navItem2,
76
+ .navItem3,
77
+ .navItem4,
78
+ .navItem6,
79
+ .navItem7 {
80
+ width: 223px;
81
+
82
+ .iconHeart,
83
+ .iconCalendar,
84
+ .iconCheckbox,
85
+ .iconCalendar,
86
+ .iconList,
87
+ .iconToast {
88
+ height: 20px;
89
+ width: 20px;
90
+ }
91
+ }
92
+ }
93
+
94
+ .right {
95
+ height: calc(100vh - 60px);
96
+ overflow-y: auto;
97
+ align-items: flex-start;
98
+ display: flex;
99
+ flex-basis: 0;
100
+ flex-direction: column;
101
+ padding: 40px;
102
+ row-gap: 24px;
103
+ flex-grow: 1;
104
+
105
+ .item {
106
+ min-width: 90px;
107
+ vertical-align: middle;
108
+ flex-shrink: 0;
109
+ }
110
+
111
+ .frame1321317607 {
112
+ align-items: center;
113
+ border-radius: 12px;
114
+ display: flex;
115
+ flex-direction: row;
116
+ flex-shrink: 0;
117
+ color: var(--semi-color-disabled-text);
118
+ font-size: 14px;
119
+ letter-spacing: -0.14px;
120
+ line-height: 20px;
121
+
122
+ .yourContentHere {
123
+ vertical-align: middle;
124
+ min-width: 123px;
125
+ }
126
+ }
127
+ }
128
+ }
129
+ }
package/cjs/vchart-chart-hub-theme/style/style.css CHANGED
@@ -12,6 +12,7 @@
12
12
  letter-spacing: -0.6px;
13
13
  line-height: 28px;
14
14
  text-align: left;
15
+ min-width: 1100px;
15
16
  }
16
17
  .rootSidenav .nav {
17
18
  align-self: stretch;
package/cjs/vchart-chart-hub-theme/style/style.less ADDED
@@ -0,0 +1,114 @@
1
+ .rootSidenav {
2
+ align-items: flex-start;
3
+ background: var(--semi-color-fill-0);
4
+ flex-direction: column;
5
+ overflow: hidden;
6
+ row-gap: 0;
7
+ display: flex;
8
+ color: var(--semi-color-text-0);
9
+ font-family: Inter;
10
+ font-size: 20px;
11
+ font-weight: 600;
12
+ letter-spacing: -0.6px;
13
+ line-height: 28px;
14
+ text-align: left;
15
+ min-width: 1100px;
16
+ .nav {
17
+ align-self: stretch;
18
+ height: 60px;
19
+ .navigationHeaderLogo {
20
+ align-items: flex-start;
21
+ column-gap: 0;
22
+ display: inline-flex;
23
+ flex-shrink: 0;
24
+ .semiIconsSemiLogo {
25
+ font-size: 36px;
26
+ color: var(--semi-color-text-0);
27
+ }
28
+ }
29
+ .dIV {
30
+ align-items: center;
31
+ column-gap: 16px;
32
+ display: inline-flex;
33
+ flex-shrink: 0;
34
+ .semiIconsFeishuLogo,
35
+ .semiIconsHelpCircle,
36
+ .semiIconsBell {
37
+ font-size: 20px;
38
+ color: var(--semi-color-text-2);
39
+ }
40
+ .avatar {
41
+ height: 32px;
42
+ width: 32px;
43
+ }
44
+ }
45
+ }
46
+ .main {
47
+ align-items: flex-start;
48
+ column-gap: 0;
49
+ display: flex;
50
+ flex-shrink: 0;
51
+ align-self: stretch;
52
+ .left {
53
+ height: calc(100vh - 60px);
54
+ .navItem,
55
+ .navItem5 {
56
+ width: 223px;
57
+ .iconIntro,
58
+ .iconRadio {
59
+ height: 20px;
60
+ position: relative;
61
+ width: 20px;
62
+ }
63
+ }
64
+ .navItem1,
65
+ .navItem2,
66
+ .navItem3,
67
+ .navItem4,
68
+ .navItem6,
69
+ .navItem7 {
70
+ width: 223px;
71
+ .iconHeart,
72
+ .iconCalendar,
73
+ .iconCheckbox,
74
+ .iconCalendar,
75
+ .iconList,
76
+ .iconToast {
77
+ height: 20px;
78
+ width: 20px;
79
+ }
80
+ }
81
+ }
82
+ .right {
83
+ height: calc(100vh - 60px);
84
+ overflow-y: auto;
85
+ align-items: flex-start;
86
+ display: flex;
87
+ flex-basis: 0;
88
+ flex-direction: column;
89
+ padding: 40px;
90
+ row-gap: 24px;
91
+ flex-grow: 1;
92
+ .item {
93
+ min-width: 90px;
94
+ vertical-align: middle;
95
+ flex-shrink: 0;
96
+ }
97
+ .frame1321317607 {
98
+ align-items: center;
99
+ border-radius: 12px;
100
+ display: flex;
101
+ flex-direction: row;
102
+ flex-shrink: 0;
103
+ color: var(--semi-color-disabled-text);
104
+ font-size: 14px;
105
+ letter-spacing: -0.14px;
106
+ line-height: 20px;
107
+ .yourContentHere {
108
+ vertical-align: middle;
109
+ min-width: 123px;
110
+ }
111
+ }
112
+ }
113
+ }
114
+ }
package/esm/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { ChartHubThemePage } from './vchart-chart-hub-theme/index';
1
+ import { Frame as ChartHubThemePage } from './vchart-chart-hub-theme/index';
2
2
  export { ChartHubThemePage };
package/esm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { ChartHubThemePage } from "./vchart-chart-hub-theme/index";
1
+ import { Frame as ChartHubThemePage } from "./vchart-chart-hub-theme/index";
2
2
 
3
3
  export { ChartHubThemePage };
4
4
  //# sourceMappingURL=index.js.map
package/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,CAAC","file":"index.js","sourcesContent":["import { ChartHubThemePage } from './vchart-chart-hub-theme/index';\nexport { ChartHubThemePage };\n"]}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,CAAC","file":"index.js","sourcesContent":["import { Frame as ChartHubThemePage } from './vchart-chart-hub-theme/index';\nexport { ChartHubThemePage };\n"]}
package/esm/vchart-chart-hub-theme/charts.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
- declare const Charts: () => React.JSX.Element;
3
- export default Charts;
2
+ import '@arco-design/web-react/dist/css/arco.css';
3
+ export declare const Charts: () => React.JSX.Element;
package/esm/vchart-chart-hub-theme/charts.js CHANGED
@@ -14,11 +14,13 @@ import { Card } from "@douyinfe/semi-ui";
14
14
 
15
15
  import { Grid } from "@arco-design/web-react";
16
16
 
17
+ import "@arco-design/web-react/dist/css/arco.css";
18
+
17
19
  const {Row: Row, Col: Col} = Grid, chartHeight = 400, gutter = 16;
18
20
 
19
21
  VChart.ThemeManager.registerTheme("chart-hub-light", chartHubLightTheme), VChart.ThemeManager.setCurrentTheme("chart-hub-light");
20
22
 
21
- const Charts = () => React.createElement(Row, {
23
+ export const Charts = () => React.createElement(Row, {
22
24
  gutter: 16
23
25
  }, charts.map(((chart, i) => React.createElement(Col, {
24
26
  span: 12,
@@ -38,6 +40,4 @@ const Charts = () => React.createElement(Row, {
38
40
  options: Object.assign(Object.assign({}, chart.option), {
39
41
  mode: isMobile ? "mobile-browser" : "desktop-browser"
40
42
  })
41
- }))))));
42
-
43
- export default Charts;
43
+ }))))));
package/esm/vchart-chart-hub-theme/charts.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/vchart-chart-hub-theme/charts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,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,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,CAAC;AACzE,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAEvD,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,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,IAAC,SAAS,EAAC,gBAAgB,EAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;gBACpF,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,CAAC;AAEF,eAAe,MAAM,CAAC","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';\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\nconst 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\nexport default Charts;\n"]}
1
+ {"version":3,"sources":["../src/vchart-chart-hub-theme/charts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,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,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,0CAA0C,CAAC;AAElD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,MAAM,MAAM,GAAG,EAAE,CAAC;AAElB,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,iBAAiB,EAAE,kBAAkB,CAAC,CAAC;AACzE,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,iBAAiB,CAAC,CAAC;AAEvD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE;IACzB,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,IAAC,SAAS,EAAC,gBAAgB,EAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;gBACpF,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,CAAC","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/esm/vchart-chart-hub-theme/frame.d.ts CHANGED
@@ -1,4 +1,3 @@
1
1
  import React from 'react';
2
2
  import './style/style';
3
- declare const Frame: () => React.JSX.Element;
4
- export default Frame;
3
+ export declare const Frame: () => React.JSX.Element;
package/esm/vchart-chart-hub-theme/frame.js CHANGED
@@ -6,9 +6,9 @@ import { IconFeishuLogo, IconHelpCircle, IconBell } from "@douyinfe/semi-icons";
6
6
 
7
7
  import "./style/style";
8
8
 
9
- import Charts from "./charts.jsx";
9
+ import { Charts } from "./charts";
10
10
 
11
- const Frame = () => React.createElement("div", {
11
+ export const Frame = () => React.createElement("div", {
12
12
  className: "rootSidenav"
13
13
  }, React.createElement(Nav, {
14
14
  mode: "horizontal",
@@ -40,6 +40,4 @@ const Frame = () => React.createElement("div", {
40
40
  }, React.createElement("div", {
41
41
  className: "frame1321317607"
42
42
  }, React.createElement(Charts, null)))));
43
-
44
- export default Frame;
45
43
  //# sourceMappingURL=frame.js.map
package/esm/vchart-chart-hub-theme/frame.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/vchart-chart-hub-theme/frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,eAAe,CAAC;AACvB,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,MAAM,KAAK,GAAG,GAAG,EAAE;IACjB,OAAO,CACL,6BAAK,SAAS,EAAC,aAAa;QAC1B,oBAAC,GAAG,IACF,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE;gBACN,IAAI,EAAE,oBAAoB;aAC3B,EACD,MAAM,EACJ,6BAAK,SAAS,EAAC,KAAK;gBAClB,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,qBAAqB,GAAG;gBAC/D,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,qBAAqB,GAAG;gBAC/D,oBAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,eAAe,GAAG;gBACnD,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,8GAA8G,EAClH,KAAK,EAAC,MAAM,EACZ,SAAS,EAAC,QAAQ,mBAGX,CACL,EAER,SAAS,EAAC,KAAK,GACV;QACP,6BAAK,SAAS,EAAC,MAAM;YACnB,6BAAK,SAAS,EAAC,OAAO;gBACpB,6BAAK,SAAS,EAAC,iBAAiB;oBAC9B,oBAAC,MAAM,OAAG,CACN,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","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.jsx';\n\nconst 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\nexport default Frame;\n"]}
1
+ {"version":3,"sources":["../src/vchart-chart-hub-theme/frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,OAAO,CACL,6BAAK,SAAS,EAAC,aAAa;QAC1B,oBAAC,GAAG,IACF,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE;gBACN,IAAI,EAAE,oBAAoB;aAC3B,EACD,MAAM,EACJ,6BAAK,SAAS,EAAC,KAAK;gBAClB,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,qBAAqB,GAAG;gBAC/D,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,qBAAqB,GAAG;gBAC/D,oBAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,eAAe,GAAG;gBACnD,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,8GAA8G,EAClH,KAAK,EAAC,MAAM,EACZ,SAAS,EAAC,QAAQ,mBAGX,CACL,EAER,SAAS,EAAC,KAAK,GACV;QACP,6BAAK,SAAS,EAAC,MAAM;YACnB,6BAAK,SAAS,EAAC,OAAO;gBACpB,6BAAK,SAAS,EAAC,iBAAiB;oBAC9B,oBAAC,MAAM,OAAG,CACN,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC","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/esm/vchart-chart-hub-theme/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * as ChartHubThemePage from './frame';
1
+ export * from './frame';
package/esm/vchart-chart-hub-theme/index.js CHANGED
@@ -1,4 +1,2 @@
1
- import * as ChartHubThemePage_1 from "./frame";
2
-
3
- export { ChartHubThemePage_1 as ChartHubThemePage };
1
+ export * from "./frame";
4
2
  //# sourceMappingURL=index.js.map
package/esm/vchart-chart-hub-theme/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/vchart-chart-hub-theme/index.tsx"],"names":[],"mappings":"qCAAmC,SAAS;gCAAhC,iBAAiB","file":"index.js","sourcesContent":["export * as ChartHubThemePage from './frame';\n"]}
1
+ {"version":3,"sources":["../src/vchart-chart-hub-theme/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC","file":"index.js","sourcesContent":["export * from './frame';\n"]}
package/esm/vchart-chart-hub-theme/index.module.less ADDED
@@ -0,0 +1,129 @@
1
+ .rootSidenav {
2
+ align-items: flex-start;
3
+ background: var(--semi-color-fill-0);
4
+ flex-direction: column;
5
+ overflow: hidden;
6
+ row-gap: 0;
7
+ display: flex;
8
+ color: var(--semi-color-text-0);
9
+ font-family: Inter;
10
+ font-size: 20px;
11
+ font-weight: 600;
12
+ letter-spacing: -0.6px;
13
+ line-height: 28px;
14
+ text-align: left;
15
+
16
+ .nav {
17
+ align-self: stretch;
18
+ height: 60px;
19
+
20
+ .navigationHeaderLogo {
21
+ align-items: flex-start;
22
+ column-gap: 0;
23
+ display: inline-flex;
24
+ flex-shrink: 0;
25
+
26
+ .semiIconsSemiLogo {
27
+ font-size: 36px;
28
+ color: var(--semi-color-text-0);
29
+ }
30
+ }
31
+
32
+ .dIV {
33
+ align-items: center;
34
+ column-gap: 16px;
35
+ display: inline-flex;
36
+ flex-shrink: 0;
37
+
38
+ .semiIconsFeishuLogo,
39
+ .semiIconsHelpCircle,
40
+ .semiIconsBell {
41
+ font-size: 20px;
42
+ color: var(--semi-color-text-2);
43
+ }
44
+
45
+ .avatar {
46
+ height: 32px;
47
+ width: 32px;
48
+ }
49
+ }
50
+ }
51
+
52
+ .main {
53
+ align-items: flex-start;
54
+ column-gap: 0;
55
+ display: flex;
56
+ flex-shrink: 0;
57
+ align-self: stretch;
58
+
59
+ .left {
60
+ height: calc(100vh - 60px);
61
+
62
+ .navItem,
63
+ .navItem5 {
64
+ width: 223px;
65
+
66
+ .iconIntro,
67
+ .iconRadio {
68
+ height: 20px;
69
+ position: relative;
70
+ width: 20px;
71
+ }
72
+ }
73
+
74
+ .navItem1,
75
+ .navItem2,
76
+ .navItem3,
77
+ .navItem4,
78
+ .navItem6,
79
+ .navItem7 {
80
+ width: 223px;
81
+
82
+ .iconHeart,
83
+ .iconCalendar,
84
+ .iconCheckbox,
85
+ .iconCalendar,
86
+ .iconList,
87
+ .iconToast {
88
+ height: 20px;
89
+ width: 20px;
90
+ }
91
+ }
92
+ }
93
+
94
+ .right {
95
+ height: calc(100vh - 60px);
96
+ overflow-y: auto;
97
+ align-items: flex-start;
98
+ display: flex;
99
+ flex-basis: 0;
100
+ flex-direction: column;
101
+ padding: 40px;
102
+ row-gap: 24px;
103
+ flex-grow: 1;
104
+
105
+ .item {
106
+ min-width: 90px;
107
+ vertical-align: middle;
108
+ flex-shrink: 0;
109
+ }
110
+
111
+ .frame1321317607 {
112
+ align-items: center;
113
+ border-radius: 12px;
114
+ display: flex;
115
+ flex-direction: row;
116
+ flex-shrink: 0;
117
+ color: var(--semi-color-disabled-text);
118
+ font-size: 14px;
119
+ letter-spacing: -0.14px;
120
+ line-height: 20px;
121
+
122
+ .yourContentHere {
123
+ vertical-align: middle;
124
+ min-width: 123px;
125
+ }
126
+ }
127
+ }
128
+ }
129
+ }
package/esm/vchart-chart-hub-theme/style/style.css CHANGED
@@ -12,6 +12,7 @@
12
12
  letter-spacing: -0.6px;
13
13
  line-height: 28px;
14
14
  text-align: left;
15
+ min-width: 1100px;
15
16
  }
16
17
  .rootSidenav .nav {
17
18
  align-self: stretch;
package/esm/vchart-chart-hub-theme/style/style.less ADDED
@@ -0,0 +1,114 @@
1
+ .rootSidenav {
2
+ align-items: flex-start;
3
+ background: var(--semi-color-fill-0);
4
+ flex-direction: column;
5
+ overflow: hidden;
6
+ row-gap: 0;
7
+ display: flex;
8
+ color: var(--semi-color-text-0);
9
+ font-family: Inter;
10
+ font-size: 20px;
11
+ font-weight: 600;
12
+ letter-spacing: -0.6px;
13
+ line-height: 28px;
14
+ text-align: left;
15
+ min-width: 1100px;
16
+ .nav {
17
+ align-self: stretch;
18
+ height: 60px;
19
+ .navigationHeaderLogo {
20
+ align-items: flex-start;
21
+ column-gap: 0;
22
+ display: inline-flex;
23
+ flex-shrink: 0;
24
+ .semiIconsSemiLogo {
25
+ font-size: 36px;
26
+ color: var(--semi-color-text-0);
27
+ }
28
+ }
29
+ .dIV {
30
+ align-items: center;
31
+ column-gap: 16px;
32
+ display: inline-flex;
33
+ flex-shrink: 0;
34
+ .semiIconsFeishuLogo,
35
+ .semiIconsHelpCircle,
36
+ .semiIconsBell {
37
+ font-size: 20px;
38
+ color: var(--semi-color-text-2);
39
+ }
40
+ .avatar {
41
+ height: 32px;
42
+ width: 32px;
43
+ }
44
+ }
45
+ }
46
+ .main {
47
+ align-items: flex-start;
48
+ column-gap: 0;
49
+ display: flex;
50
+ flex-shrink: 0;
51
+ align-self: stretch;
52
+ .left {
53
+ height: calc(100vh - 60px);
54
+ .navItem,
55
+ .navItem5 {
56
+ width: 223px;
57
+ .iconIntro,
58
+ .iconRadio {
59
+ height: 20px;
60
+ position: relative;
61
+ width: 20px;
62
+ }
63
+ }
64
+ .navItem1,
65
+ .navItem2,
66
+ .navItem3,
67
+ .navItem4,
68
+ .navItem6,
69
+ .navItem7 {
70
+ width: 223px;
71
+ .iconHeart,
72
+ .iconCalendar,
73
+ .iconCheckbox,
74
+ .iconCalendar,
75
+ .iconList,
76
+ .iconToast {
77
+ height: 20px;
78
+ width: 20px;
79
+ }
80
+ }
81
+ }
82
+ .right {
83
+ height: calc(100vh - 60px);
84
+ overflow-y: auto;
85
+ align-items: flex-start;
86
+ display: flex;
87
+ flex-basis: 0;
88
+ flex-direction: column;
89
+ padding: 40px;
90
+ row-gap: 24px;
91
+ flex-grow: 1;
92
+ .item {
93
+ min-width: 90px;
94
+ vertical-align: middle;
95
+ flex-shrink: 0;
96
+ }
97
+ .frame1321317607 {
98
+ align-items: center;
99
+ border-radius: 12px;
100
+ display: flex;
101
+ flex-direction: row;
102
+ flex-shrink: 0;
103
+ color: var(--semi-color-disabled-text);
104
+ font-size: 14px;
105
+ letter-spacing: -0.14px;
106
+ line-height: 20px;
107
+ .yourContentHere {
108
+ vertical-align: middle;
109
+ min-width: 123px;
110
+ }
111
+ }
112
+ }
113
+ }
114
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@visactor/vchart-theme-demo-component",
3
- "version": "0.0.1-alpha.3",
3
+ "version": "0.0.1-alpha.5",
4
4
  "description": "theme demo page in vchart site",
5
5
  "sideEffects": false,
6
6
  "main": "cjs/index.js",
@@ -24,11 +24,15 @@
24
24
  "@douyinfe/semi-icons": "latest",
25
25
  "@douyinfe/semi-icons-lab": "latest",
26
26
  "@arco-design/web-react": "^2.32.2",
27
- "@visactor/vchart-theme-utils": "1.11.0",
28
- "@visactor/vchart-theme": "1.11.0",
27
+ "@visactor/vchart-theme-utils": "1.11.1-alpha.2",
28
+ "@visactor/vchart-theme": "1.11.1-alpha.2",
29
29
  "@visactor/vchart": "1.11.0",
30
30
  "@visactor/react-vchart": "1.11.0"
31
31
  },
32
+ "peerDependencies": {
33
+ "react": ">=16.0.0",
34
+ "react-dom": ">=16.0.0"
35
+ },
32
36
  "devDependencies": {
33
37
  "@rushstack/eslint-patch": "~1.1.4",
34
38
  "react": "^18.0.0",