feat: demo component support link to playground

packages/vchart-theme-demo-component/src/interface.ts

@@ -2,7 +2,8 @@ import type { IInitOption } from '@visactor/vchart';
 
 export interface IChartInfo {
   spec: any;
-  option?: IInitOption;
   title: string;
+  fileName: string;
+  option?: IInitOption;
   description?: string;
 }

packages/vchart-theme-demo-component/src/spec/area.ts

@@ -32,7 +32,6 @@ export const areaSpec = {
       { type: 'Mascara', country: 'USA', value: 11261 }
     ]
   },
-  height: 600,
   xField: ['type'],
   yField: 'value',
   seriesField: 'country',

packages/vchart-theme-demo-component/src/spec/bar.ts

@@ -14,7 +14,6 @@ export const barSpec = {
       { type: 'Autocracies', year: '2018', value: 80 }
     ]
   },
-  height: 500,
   xField: ['year', 'type'],
   yField: 'value',
   seriesField: 'type',

packages/vchart-theme-demo-component/src/spec/barGroup.ts

@@ -34,7 +34,6 @@ export const barGroupSpec = {
       { type: 'Price', year: '2018', value: 99 }
     ]
   },
-  height: 500,
   xField: ['year', 'type'],
   yField: 'value',
   seriesField: 'type',

packages/vchart-theme-demo-component/src/spec/barGroupHorizontal.ts

@@ -18,7 +18,6 @@ export const barGroupHorizontalSpec = {
       { type: 'Democracies', year: '1990', value: 57 }
     ]
   },
-  height: 500,
   direction: 'horizontal',
   xField: 'value',
   yField: ['year', 'type'],

packages/vchart-theme-demo-component/src/spec/barStacked.ts

@@ -35,7 +35,6 @@ export const barStackedSpec = {
       { type: 'Price', year: '2018', value: 99 }
     ]
   },
-  height: 500,
   xField: 'year',
   yField: 'value',
   seriesField: 'type',

packages/vchart-theme-demo-component/src/spec/barStackedHorizontal.ts

@@ -40,7 +40,6 @@ export const barStackedHorizontalSpec = {
       { type: 'E', year: '1990', value: 60 }
     ]
   },
-  height: 500,
   direction: 'horizontal',
   xField: 'value',
   yField: 'year',

packages/vchart-theme-demo-component/src/spec/barStackedPercent.ts

@@ -36,7 +36,6 @@ export const barStackedPercentSpec = {
       { type: 'Price', year: '2018', value: 99 }
     ]
   },
-  height: 500,
   xField: 'year',
   yField: 'value',
   seriesField: 'type',

packages/vchart-theme-demo-component/src/spec/line.ts

@@ -31,7 +31,6 @@ export const lineSpec = {
       { type: 'Mascara', country: 'USA', value: 11261 }
     ]
   },
-  height: 600,
   xField: ['type'],
   yField: 'value',
   seriesField: 'country',

packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/chart-list.ts

@@ -16,55 +16,68 @@ import { scatterSpec } from '../spec/scatter';
 export const charts: IChartInfo[] = [
   {
     title: 'Line Chart',
-    spec: lineSpec
+    spec: lineSpec,
+    fileName: 'line'
   },
   {
     title: 'Area Chart',
-    spec: areaSpec
+    spec: areaSpec,
+    fileName: 'area'
   },
   {
     title: 'Grouped Bar Chart',
-    spec: barGroupSpec
+    spec: barGroupSpec,
+    fileName: 'barGroup'
   },
   {
     title: 'Stacked Bar Chart',
-    spec: barStackedSpec
+    spec: barStackedSpec,
+    fileName: 'barStacked'
   },
   {
     title: 'Horizontal Grouped Bar Chart',
-    spec: barGroupHorizontalSpec
+    spec: barGroupHorizontalSpec,
+    fileName: 'horizontalBar'
   },
   {
     title: 'Horizontal Stacked Bar Chart',
-    spec: barStackedHorizontalSpec
+    spec: barStackedHorizontalSpec,
+    fileName: 'barStackedHorizontal'
   },
   {
     title: 'Pie Chart',
-    spec: pieSpec
+    spec: pieSpec,
+    fileName: 'pie'
   },
   {
     title: 'Ring Chart',
-    spec: ringSpec
+    spec: ringSpec,
+    fileName: 'ring'
   },
   {
     title: 'Gauge Chart',
-    spec: gaugeSpec
+    spec: gaugeSpec,
+    fileName: 'gauge'
   },
   {
     title: 'Horizontal Bar Chart',
-    spec: horizontalBarSpec
+    spec: horizontalBarSpec,
+    fileName: 'horizontalBar'
   },
   {
     title: 'Scatter Chart',
-    spec: scatterSpec
+    spec: scatterSpec,
+    fileName: 'scatter'
   },
   {
     title: 'Radar Chart',
-    spec: radarSpec
+    spec: radarSpec,
+    fileName: 'radar'
   },
   {
     title: 'Indicator Sankey Chart',
     spec: indicatorSankeySpec,
+    fileName: 'indicatorSankey',
     option: {
       enableHtmlAttribute: true
     }

packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/charts.tsx

@@ -1,30 +1,68 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { isMobile } from 'react-device-detect';
 import { charts } from './chart-list';
 import { VChart as VChartComponent } from '@visactor/react-vchart';
+import { i18n } from './i18n';
 import VChart from '@visactor/vchart';
 import { chartHubLightTheme } from '@visactor/vchart-theme';
 
-import { Card } from '@douyinfe/semi-ui';
+import { Button, Card } from '@douyinfe/semi-ui';
 import { Grid } from '@arco-design/web-react';
 import '@arco-design/web-react/dist/css/arco.css';
+import type { IChartInfo } from '../interface';
 
 const { Row, Col } = Grid;
-
 const chartHeight = 400;
 
 const gutter = 16;
 
+const DEMO_SOURCE_PREFIX =
+  'https://raw.githubusercontent.com/VisActor/vchart-theme/develop/packages/vchart-theme-demo-component/src/spec/';
+
 VChart.ThemeManager.registerTheme('chart-hub-light', chartHubLightTheme);
 VChart.ThemeManager.setCurrentTheme('chart-hub-light');
 
-export const Charts = () => {
+export interface IProps {
+  language?: 'en' | 'zh';
+}
+
+export function Charts(props: IProps) {
+  const { language = 'zh' } = props;
+
+  const onClick = useCallback(async (chartInfo: IChartInfo) => {
+    const { fileName, option } = chartInfo;
+    if (!fileName) {
+      return;
+    }
+    const specUrl = `${DEMO_SOURCE_PREFIX}${fileName}.ts`;
+    let url = `/vchart/playground?specUrl=${specUrl}`;
+    if (option) {
+      url += `&initOption=${JSON.stringify(option)}`;
+    }
+    window.open(url);
+  }, []);
+
   return (
     <Row gutter={gutter}>
       {charts.map((chart, i) => {
         return (
           <Col span={12} key={i} style={{ marginBottom: 16 }}>
-            <Card className="chartContainer" bordered={false} headerLine={true} title={chart.title}>
+            <Card
+              className="chartContainer"
+              bordered={false}
+              headerLine={true}
+              title={chart.title}
+              headerExtraContent={
+                <Button
+                  size="small"
+                  onClick={() => {
+                    onClick(chart);
+                  }}
+                >
+                  {i18n.link[language]}
+                </Button>
+              }
+            >
               <VChartComponent
                 spec={{
                   ...chart.spec,
@@ -41,4 +79,4 @@ export const Charts = () => {
       })}
     </Row>
   );
-};
+}

packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/frame.tsx

@@ -4,7 +4,7 @@ import { IconFeishuLogo, IconHelpCircle, IconBell } from '@douyinfe/semi-icons';
 import './style/style';
 import { Charts } from './charts';
 
-export const Frame = () => {
+export function Frame(props: { language?: 'zh' | 'en' }) {
   return (
     <div className="rootSidenav">
       <Nav
@@ -32,12 +32,10 @@ export const Frame = () => {
       <div className="main">
         <div className="right">
           <div className="frame1321317607">
-            <Charts />
+            <Charts language={props.language} />
           </div>
         </div>
       </div>
     </div>
   );
-};
-
-// export default Frame;
+}

packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/i18n.ts

@@ -0,0 +1,6 @@
+export const i18n = {
+  link: {
+    zh: '试一试',
+    en: 'Try It'
+  }
+};