feat: show theme editor (#5579)

antvis · Sep 21, 2023 · 9c26412 · 9c26412
1 parent c32bca0
commit 9c26412
Show file tree

Hide file tree

Showing 22 changed files with 161 additions and 131 deletions.
diff --git a/__tests__/plots/api/chart-render-3d-bar-chart-perspective.ts b/__tests__/plots/api/chart-render-3d-bar-chart-perspective.ts
@@ -18,7 +18,6 @@ export function chartRender3dBarChartPerspective(context) {
     container,
     renderer,
     depth: 400,
-    // padding: 10,
   });
 
   const data: { x: string; z: string; y: number; color: number }[] = [];

diff --git a/site/.dumi/theme/components/ConfigPanel.tsx b/site/.dumi/theme/components/ConfigPanel.tsx
@@ -1,21 +1,21 @@
 import * as React from 'react';
 import { Button, Collapse, Radio } from 'antd';
 import { UploadOutlined, CopyOutlined } from '@ant-design/icons';
-import { createLibrary } from '@antv/g2';
+import { stdlib } from '@antv/g2';
 import { copyToClipboard } from '../utils/copyToBoard';
 import { exportDataToLocal } from '../utils/exportDataToLocal';
 import './ConfigPanel.less';
 
 const BUILT_THEMES = [
   { label: '默认风格', key: 'light' },
-  { label: '暗色风格', key: 'dark' },
+  { label: '暗色风格', key: 'classicDark' },
   { label: '学术风格', key: 'academy' },
 ];
 
 function getG2Theme(theme: string | Record<string, any>) {
   if (typeof theme === 'object') return theme;
 
-  const library = createLibrary();
+  const library = stdlib();
   const themeToken = library[`theme.${theme}`]();
   return themeToken;
 }
@@ -63,7 +63,9 @@ export const ConfigPanel = (props) => {
             value={theme}
           >
             {BUILT_THEMES.map((d) => (
-              <Radio.Button value={d.key}>{d.label}</Radio.Button>
+              <Radio.Button value={d.key} key={d.key}>
+                {d.label}
+              </Radio.Button>
             ))}
           </Radio.Group>
         </Collapse.Panel>

diff --git a/site/.dumi/theme/components/DemosView.less b/site/.dumi/theme/components/DemosView.less
@@ -11,7 +11,6 @@
   .demo {
     padding: 18px 12px;
     width: 100%;
-    height: 372px;
     background-color: #fff;
 
     .demo-title {
@@ -24,8 +23,17 @@
     }
 
     .demo-container {
+      position: relative;
       margin-top: 14px;
-      height: calc(100% - 40px);
+      width: 100%;
+      height: 0px;
+      padding-top: 75%;
+    }
+
+    .demo-container > canvas {
+      position: absolute;
+      left: 0px;
+      top: 0px;
     }
   }
 

diff --git a/site/.dumi/theme/components/DemosView.tsx b/site/.dumi/theme/components/DemosView.tsx
@@ -9,26 +9,34 @@ const DemoContainer = ({ theme, className = '', render }) => {
   const chartRef = React.useRef<Chart | null>(null);
 
   function init(theme) {
-    chartRef.current = render(domRef.current, theme);
+    const container = domRef.current;
+    chartRef.current = render({
+      container,
+      theme,
+      width: container.clientWidth,
+      height: container.clientHeight,
+    });
   }
 
   React.useEffect(() => {
     if (!chartRef.current) {
       init(theme);
     } else {
       const chart = chartRef.current;
-      chart.theme({ type: theme });
-      chart.render();
+      chart.destroy();
+      init(theme);
     }
   }, [theme]);
 
   React.useLayoutEffect(() => {
     const el = domRef.current;
 
     const resizeObserver = new ResizeObserver((entries) => {
+      const width = el.clientWidth;
+      const height = el.clientHeight;
       entries.forEach(() => {
         const chart = chartRef.current;
-        chart && chart.forceFit();
+        chart && chart.changeSize(width, height);
       });
     });
 
@@ -40,41 +48,28 @@ const DemoContainer = ({ theme, className = '', render }) => {
 };
 
 export const DemosView = ({ theme, className = '' }) => {
-  function openExample(key, example) {
-    const hash = `${example.name}`.replace(
-      /[A-Z]/g,
-      (a) => `-${a.toLowerCase()}`,
-    );
+  function openExample(example) {
     // @ts-ignore
-    window.open(`/examples/${key}#${hash}`);
+    window.open(`/examples/${example.link}`);
   }
 
   return (
     <div className={`demos-view ${className} theme-${theme}`}>
-      {Object.keys(examples as any).map((key) =>
-        Array.from(examples[key]).map((example: any) => {
-          if (typeof example.render !== 'function') return;
-
-          return (
-            <Badge.Ribbon
-              text={
-                <span onClick={() => openExample(key, example.render)}>
-                  source
-                </span>
-              }
-            >
-              <div className="demo">
-                <div className="demo-title">{example.title}</div>
-                <DemoContainer
-                  className="demo-container"
-                  theme={theme}
-                  render={example.render}
-                />
-              </div>
-            </Badge.Ribbon>
-          );
-        }),
-      )}
+      {examples.map((example) => (
+        <Badge.Ribbon
+          text={<span onClick={() => openExample(example)}>source</span>}
+        >
+          <div className="demo">
+            <div className="demo-title">{example.title}</div>
+            <DemoContainer
+              key={example.link}
+              className="demo-container"
+              theme={theme}
+              render={example.render}
+            />
+          </div>
+        </Badge.Ribbon>
+      ))}
     </div>
   );
 };
diff --git a/site/.dumi/theme/examples/bar-aggregated.ts b/site/.dumi/theme/examples/bar-aggregated.ts
@@ -1,11 +1,10 @@
 import { Chart } from '@antv/g2';
 
-export const barAggregated = (container, theme, plugins = []) => {
+export const barAggregated = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    paddingLeft: 60,
-    plugins,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });

diff --git a/site/.dumi/theme/examples/bar-dodged.ts b/site/.dumi/theme/examples/bar-dodged.ts
@@ -3,16 +3,14 @@
  */
 import { Chart } from '@antv/g2';
 
-export const BarDodged = (container, theme, plugins = []) => {
+export const BarDodged = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    paddingLeft: 50,
-    plugins,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
-  chart.interaction({ type: 'tooltip', shared: true });
 
   chart
     .interval()
@@ -28,7 +26,7 @@ export const BarDodged = (container, theme, plugins = []) => {
     .encode('y', 'population')
     .encode('color', 'age')
     .axis('y', { labelFormatter: '~s' })
-    .legend('color', { size: 20 });
+    .interaction('tooltip', { shared: true });
 
   chart.render();
 

diff --git a/site/.dumi/theme/examples/bar-range.ts b/site/.dumi/theme/examples/bar-range.ts
@@ -1,11 +1,10 @@
 import { Chart } from '@antv/g2';
 
-export const BarRange = (container, theme, plugins = []) => {
+export const BarRange = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    paddingLeft: 60,
-    plugins,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
@@ -32,8 +31,7 @@ export const BarRange = (container, theme, plugins = []) => {
     .encode('color', (d) =>
       d.month === 'Total' ? 'Total' : d.profit > 0 ? 'Increase' : 'Decrease',
     )
-    .axis('y', { labelFormatter: '~s' })
-    .legend('color', { size: 20 });
+    .axis('y', { labelFormatter: '~s' });
 
   chart.render();
 

diff --git a/site/.dumi/theme/examples/grouped-box.ts b/site/.dumi/theme/examples/grouped-box.ts
@@ -1,6 +1,6 @@
 import { Chart } from '@antv/g2';
 
-export const groupedBox = (container, theme, plugins = []) => {
+export const groupedBox = ({ container, theme, width, height }) => {
   const data = [
     {
       Species: 'I. setosa',
@@ -78,12 +78,10 @@ export const groupedBox = (container, theme, plugins = []) => {
 
   const chart = new Chart({
     container,
-    autoFit: true,
-    plugins,
+    width,
+    height,
   });
 
-  chart.theme({ type: theme });
-
   chart
     .box()
     .data(data)
@@ -93,7 +91,16 @@ export const groupedBox = (container, theme, plugins = []) => {
     .encode('color', 'Species')
     .scale('x', { paddingInner: 0.2, paddingOuter: 0.1 })
     .scale('y', { zero: true })
-    .scale('series', { paddingInner: 0.3, paddingOuter: 0.1 });
+    .scale('series', { paddingInner: 0.3, paddingOuter: 0.1 })
+    .tooltip([
+      { name: 'min', channel: 'y' },
+      { name: 'q1', channel: 'y1' },
+      { name: 'q2', channel: 'y2' },
+      { name: 'q3', channel: 'y3' },
+      { name: 'max', channel: 'y4' },
+    ]);
+
+  chart.theme({ type: theme });
 
   chart.render();
 

diff --git a/site/.dumi/theme/examples/index.ts b/site/.dumi/theme/examples/index.ts
@@ -13,25 +13,45 @@ import { treemap } from './treemap';
 // import { barAggregated } from './bar-aggregated';
 // import { sankey } from './sankey';
 
-export const examples = {
-  'general/interval': [
-    { title: '分组柱状图', render: BarDodged },
-    { title: '区间柱状图', render: BarRange },
-  ],
-  'general/line': [
-    { title: '数据缺失折线图', render: lineConnectNulls },
-    { title: '归一化折线图', render: lineNormalized },
-  ],
-  'general/area': [
-    { title: '数据缺失面积图', render: missingDataArea },
-    { title: '堆叠面积图', render: stackedArea },
-  ],
-  'general/point': [{ title: '对数气泡图', render: pointLog }],
-  'general/radial': [
-    { title: '饼图', render: spiderLabel },
-    { title: '', render: roseLabel },
-  ],
-  'general/dual': [{ title: '柱线混合图', render: lineBar }],
-  'general/box': [{ title: '分组箱线图', render: groupedBox }],
-  'graph/hierarchy': [{ title: 'Treemap', render: treemap }],
-};
+export const examples = [
+  {
+    title: '分组柱状图',
+    render: BarDodged,
+    link: 'general/interval/#bar-dodged',
+  },
+  {
+    title: '区间柱状图',
+    render: BarRange,
+    link: 'general/interval/#bar-range',
+  },
+  {
+    title: '数据缺失折线图',
+    render: lineConnectNulls,
+    link: 'general/line/#line-connect-nulls',
+  },
+  {
+    title: '归一化折线图',
+    render: lineNormalized,
+    link: 'general/line/#line-normalized',
+  },
+  {
+    title: '数据缺失面积图',
+    render: missingDataArea,
+    link: 'general/area/#missing-data-area',
+  },
+  {
+    title: '堆叠面积图',
+    render: stackedArea,
+    link: 'general/area/#stacked-area',
+  },
+  { title: '对数气泡图', render: pointLog, link: 'general/point/#point-log' },
+  { title: '饼图', render: spiderLabel, link: 'general/pie/#spider-label' },
+  { title: '玫瑰图', render: roseLabel, link: 'general/rose/#rose-label' },
+  { title: '柱线混合图', render: lineBar, link: 'general/dual/#line-bar' },
+  {
+    title: '分组箱线图',
+    render: groupedBox,
+    link: 'general/box/#grouped-box',
+  },
+  { title: '矩阵树图', render: treemap, link: 'graph/hierarchy/#treemap' },
+];
diff --git a/site/.dumi/theme/examples/line-bar.ts b/site/.dumi/theme/examples/line-bar.ts
@@ -1,6 +1,6 @@
 import { Chart } from '@antv/g2';
 
-export const lineBar = (container, theme, plugins = []) => {
+export const lineBar = ({ container, theme, width, height }) => {
   const data = [
     { time: '10:10', call: 4, waiting: 2, people: 2 },
     { time: '10:15', call: 2, waiting: 6, people: 3 },
@@ -13,8 +13,8 @@ export const lineBar = (container, theme, plugins = []) => {
 
   const chart = new Chart({
     container,
-    autoFit: true,
-    plugins,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });

diff --git a/site/.dumi/theme/examples/line-connect-nulls.ts b/site/.dumi/theme/examples/line-connect-nulls.ts
@@ -3,12 +3,11 @@
  */
 import { Chart } from '@antv/g2';
 
-export const lineConnectNulls = (container, theme, plugins = []) => {
+export const lineConnectNulls = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    plugins,
-    paddingTop: 0,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });