From ad0320f1cd2fb5c511a6ff4b3913f88addfdc393 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Wed, 19 Jun 2024 19:20:04 +0800 Subject: [PATCH] feat: demo component support link to playground --- .../src/interface.ts | 3 +- .../src/spec/area.ts | 1 - .../src/spec/bar.ts | 1 - .../src/spec/barGroup.ts | 1 - .../src/spec/barGroupHorizontal.ts | 1 - .../src/spec/barStacked.ts | 1 - .../src/spec/barStackedHorizontal.ts | 1 - .../src/spec/barStackedPercent.ts | 1 - .../src/spec/line.ts | 1 - .../src/vchart-chart-hub-theme/chart-list.ts | 37 +++++++++----- .../src/vchart-chart-hub-theme/charts.tsx | 50 ++++++++++++++++--- .../src/vchart-chart-hub-theme/frame.tsx | 8 ++- .../src/vchart-chart-hub-theme/i18n.ts | 6 +++ 13 files changed, 80 insertions(+), 32 deletions(-) create mode 100644 packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/i18n.ts diff --git a/packages/vchart-theme-demo-component/src/interface.ts b/packages/vchart-theme-demo-component/src/interface.ts index b57ac9f..7f002f3 100644 --- a/packages/vchart-theme-demo-component/src/interface.ts +++ b/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; } diff --git a/packages/vchart-theme-demo-component/src/spec/area.ts b/packages/vchart-theme-demo-component/src/spec/area.ts index e3b7a0f..fb53fae 100644 --- a/packages/vchart-theme-demo-component/src/spec/area.ts +++ b/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', diff --git a/packages/vchart-theme-demo-component/src/spec/bar.ts b/packages/vchart-theme-demo-component/src/spec/bar.ts index abcc931..0bbb741 100644 --- a/packages/vchart-theme-demo-component/src/spec/bar.ts +++ b/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', diff --git a/packages/vchart-theme-demo-component/src/spec/barGroup.ts b/packages/vchart-theme-demo-component/src/spec/barGroup.ts index cdd5415..c6baaa2 100644 --- a/packages/vchart-theme-demo-component/src/spec/barGroup.ts +++ b/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', diff --git a/packages/vchart-theme-demo-component/src/spec/barGroupHorizontal.ts b/packages/vchart-theme-demo-component/src/spec/barGroupHorizontal.ts index 8e3d94a..f8847ae 100644 --- a/packages/vchart-theme-demo-component/src/spec/barGroupHorizontal.ts +++ b/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'], diff --git a/packages/vchart-theme-demo-component/src/spec/barStacked.ts b/packages/vchart-theme-demo-component/src/spec/barStacked.ts index e45b112..cb2a762 100644 --- a/packages/vchart-theme-demo-component/src/spec/barStacked.ts +++ b/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', diff --git a/packages/vchart-theme-demo-component/src/spec/barStackedHorizontal.ts b/packages/vchart-theme-demo-component/src/spec/barStackedHorizontal.ts index 60be6b2..16e5ada 100644 --- a/packages/vchart-theme-demo-component/src/spec/barStackedHorizontal.ts +++ b/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', diff --git a/packages/vchart-theme-demo-component/src/spec/barStackedPercent.ts b/packages/vchart-theme-demo-component/src/spec/barStackedPercent.ts index 978069c..06a7fb3 100644 --- a/packages/vchart-theme-demo-component/src/spec/barStackedPercent.ts +++ b/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', diff --git a/packages/vchart-theme-demo-component/src/spec/line.ts b/packages/vchart-theme-demo-component/src/spec/line.ts index 4470469..399aee2 100644 --- a/packages/vchart-theme-demo-component/src/spec/line.ts +++ b/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', diff --git a/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/chart-list.ts b/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/chart-list.ts index 0402090..7a820be 100644 --- a/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/chart-list.ts +++ b/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 } diff --git a/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/charts.tsx b/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/charts.tsx index b1396e6..e339487 100644 --- a/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/charts.tsx +++ b/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 ( {charts.map((chart, i) => { return ( - + { + onClick(chart); + }} + > + {i18n.link[language]} + + } + > { })} ); -}; +} diff --git a/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/frame.tsx b/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/frame.tsx index 053af88..8ef3f33 100644 --- a/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/frame.tsx +++ b/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 (
); -}; - -// export default Frame; +} diff --git a/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/i18n.ts b/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/i18n.ts new file mode 100644 index 0000000..ac9b682 --- /dev/null +++ b/packages/vchart-theme-demo-component/src/vchart-chart-hub-theme/i18n.ts @@ -0,0 +1,6 @@ +export const i18n = { + link: { + zh: '试一试', + en: 'Try It' + } +};