docs: add custom ui demo (#60)

* wip: docs for custom ui

* docs: custom ui

* chore: type

* chore: useGraphConfig type

.dumirc.ts

@@ -13,6 +13,7 @@ Powered by <a herf="https://antv.antgroup.com">AntV</a>`,
     socialLinks: {
       github: 'https://github.com/antvis/GPT-Vis',
     },
+    prefersColor: { default: 'light', switch: false },
   },
   // ssr:
   //   process.env.NODE_ENV === 'production'
@@ -31,6 +32,6 @@ Powered by <a herf="https://antv.antgroup.com">AntV</a>`,
     '@c-primary': '#691eff',
     '@s-content-width': '100%',
     '@s-content-padding': '48px',
-    '@s-sidebar-width': '300px',
+    '@s-sidebar-width': '280px',
   },
 });

docs/guide/custom-ui.md

@@ -0,0 +1,48 @@
+---
+title: 定制模型输出 UI
+nav: { title: '指南', order: 0 }
+toc: content
+order: 1
+---
+
+## 定制模型输出 UI
+
+为模型输出的结构化数据，通过代码块的方式定制 UI。
+
+```tsx | pure
+import { GPTVisLite, withChartCode } from '@antv/gpt-vis';
+
+const markdownContent = `
+\`\`\`weather
+{
+  "locationName": "Hangzhou",
+  "temperature": 11.4,
+  "humidity": 82,
+  "wind": 6.8,
+  "cloudiness": 75,
+  "uv": "0.2 of 11"
+}
+\`\`\`
+
+In Hangzhou, the current weather is as follows: 
+- The temperature is 11.4°C, humidity is 82%, and wind speed is 6.8 kph. 
+- There's 75% cloud cover, and the UV index is very low at 0.2 out of 11. 
+- This indicates cool, humid conditions with overcast skies and minimal UV exposure.
+`;
+
+const customRenderers = {
+  weather: (props) => 'WeatherCard',
+};
+const components = {
+  code: withChartCode({
+    // register custom block renderer
+    languageRenderers: customRenderers,
+  }),
+};
+
+export default () => {
+  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
+};
+```
+
+<code src="./demos/custom-ui.tsx"></code>

docs/guide/customize-style.md

@@ -1,10 +1,12 @@
 ---
-title: 定制样式
+title: 定制图表样式
 nav: { title: '指南', order: 0 }
 toc: content
 order: 3
 ---
 
+# 定制图表样式
+
 通过在 [ConfigProvider](/components/config-provider) 中传入样式属性，来配置图表组件的全局样式。
 
 ## 定制组件级样式

docs/guide/demos/WeatherCard/index.tsx

@@ -0,0 +1,45 @@
+import type { CodeBlockComponent } from '@antv/gpt-vis';
+import React from 'react';
+import StyledComponent from './style';
+
+const WeatherCard: CodeBlockComponent = (props) => {
+  const content = String(props.children).trim();
+  const { locationName, temperature, humidity, wind, cloudiness, uv } = JSON.parse(content);
+
+  return (
+    <StyledComponent>
+      <div className="locationSection">
+        <div className="temperatureWrapper">
+          <div className="temperatureDetails">
+            <img
+              src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1w1nS6N5McoAAAAAAAAAAAAADmJ7AQ/original"
+              className="imageIcon"
+            />
+            <span className="currentTemperature">{temperature}°</span>
+          </div>
+          <span className="locationName">{locationName}</span>
+        </div>
+        <div className="weatherDetails">
+          <div className="humiditySection">
+            <span className="attributeLabel">Humidity</span>
+            <span className="uvIndexValue">{humidity}%</span>
+          </div>
+          <div className="windSection">
+            <span className="windSpeedLabel">Wind</span>
+            <span className="windSpeedValue">{wind}kph</span>
+          </div>
+          <div className="cloudinessSection">
+            <span className="cloudinessLabel">Cloudiness</span>
+            <span className="cloudinessValue">{cloudiness}%</span>
+          </div>
+          <div className="uvIndexSection">
+            <span className="uvIndexLabel">UV Index</span>
+            <span className="uvIndexValue">{uv}</span>
+          </div>
+        </div>
+      </div>
+    </StyledComponent>
+  );
+};
+
+export default WeatherCard;

docs/guide/demos/WeatherCard/style.ts

@@ -0,0 +1,116 @@
+import { styled } from 'styled-components';
+
+const StyledComponent = styled.div`
+  width: 560px;
+  background-color: #60a5fa;
+  border-radius: 10px;
+
+  .locationSection {
+    display: flex;
+    flex-direction: column;
+    padding: 18px 25px;
+  }
+
+  .temperatureWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .temperatureDetails {
+    display: flex;
+    align-items: center;
+    gap: 40px;
+  }
+
+  .imageIcon {
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+  }
+
+  .currentTemperature {
+    color: #feffff;
+    font-size: 25px;
+    font-weight: bold;
+  }
+
+  .locationName {
+    color: #feffff;
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .weatherDetails {
+    display: flex;
+    align-items: center;
+    margin-top: 16px;
+    justify-content: space-between;
+    font-size: 14px;
+  }
+
+  .humiditySection {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 82px;
+  }
+
+  .attributeLabel {
+    min-width: 56px;
+    margin-right: 2px;
+    margin-left: 2px;
+    color: #dbeafe;
+  }
+
+  .uvIndexValue {
+    color: #fff;
+    font-size: 12px;
+  }
+
+  .windSection {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 20px;
+  }
+
+  .windSpeedLabel {
+    color: #dbeafe;
+  }
+
+  .windSpeedValue {
+    color: #feffff;
+  }
+
+  .cloudinessSection {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .cloudinessLabel {
+    color: #dbeafe;
+  }
+
+  .cloudinessValue {
+    align-self: flex-start;
+    color: #fff;
+  }
+
+  .uvIndexSection {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .uvIndexLabel {
+    margin-left: 2px;
+    color: #dbeafe;
+  }
+
+  .uvIndexValue {
+    color: #fff;
+  }
+`;
+
+export default StyledComponent;

docs/guide/demos/custom-ui.tsx

@@ -0,0 +1,48 @@
+import { Bubble } from '@ant-design/x';
+import { GPTVisLite, withChartCode } from '@antv/gpt-vis';
+import React from 'react';
+import WeatherCard from './WeatherCard';
+
+const markdownContent = `
+\`\`\`weather
+{
+  "locationName": "Hangzhou",
+  "temperature": 11.4,
+  "humidity": 82,
+  "wind": 6.8,
+  "cloudiness": 75,
+  "uv": "0.2 of 11"
+}
+\`\`\`
+
+In Hangzhou, the current weather is as follows:
+- The temperature is 11.4°C, humidity is 82%, and wind speed is 6.8 kph.
+- There's 75% cloud cover, and the UV index is very low at 0.2 out of 11.
+- This indicates cool, humid conditions with overcast skies and minimal UV exposure.
+`;
+
+const customRenderers = {
+  weather: WeatherCard,
+};
+const components = {
+  code: withChartCode({
+    // register custom block renderer
+    languageRenderers: customRenderers,
+  }),
+};
+
+const bgStyle = {
+  display: 'grid',
+  gridGap: '20px 0',
+  padding: 20,
+  borderRadius: 8,
+};
+
+export default () => {
+  return (
+    <div style={bgStyle}>
+      <Bubble placement="end" content="How is the weather today?" />
+      <Bubble content={<GPTVisLite components={components}>{markdownContent}</GPTVisLite>} />
+    </div>
+  );
+};

mako.config.json

@@ -5,5 +5,8 @@
   },
   "codeSplitting": {
     "strategy": "auto"
+  },
+  "watch": {
+    "ignorePaths": ["bindings"]
   }
 }

src/Area/index.md

@@ -4,6 +4,7 @@ group:
   order: 1
   title: 统计图
 demo: { cols: 2 }
+toc: content
 nav: { title: '组件', order: 1 }
 ---
 

src/Bar/index.md

@@ -3,6 +3,7 @@ order: 4
 group:
   order: 1
   title: 统计图
+toc: content
 demo: { cols: 2 }
 ---
 

src/ChartCodeRender/index.md

@@ -1,5 +1,6 @@
 ---
 order: 2
+toc: content
 group:
   order: 10
   title: 其他

src/Column/index.md

@@ -1,5 +1,6 @@
 ---
 order: 2
+toc: content
 group:
   order: 1
   title: 统计图

src/ConfigProvider/hooks/useConfig.ts

@@ -85,7 +85,7 @@ function useGraphGlobalConfig(name: Charts) {
   return mergeGraphOptions(graphConfig, componentConfig || {});
 }
 
-export function useGraphConfig<T extends GraphOptions>(
+export function useGraphConfig<T extends Omit<GraphOptions, 'data'>>(
   name: Charts,
   defaultConfig: Partial<T>,
   props: Partial<T>,

src/ConfigProvider/index.md

@@ -1,5 +1,6 @@
 ---
 order: 3
+toc: content
 group:
   order: 10
   title: 其他

src/DualAxes/index.md

@@ -4,6 +4,7 @@ group:
   order: 1
   title: 统计图
 demo: { cols: 2 }
+toc: content
 ---
 
 # DualAxes 双轴图

src/FishboneDiagram/index.md

@@ -3,6 +3,7 @@ order: 6
 group:
   order: 4
   title: 关系图
+toc: content
 ---
 
 # FishboneDiagram 鱼骨图

src/FlowDiagram/index.md

@@ -3,6 +3,7 @@ order: 2
 group:
   order: 3
   title: 关系图
+toc: content
 ---
 
 # FlowDiagram 流程图

src/GPTVis/index.md

@@ -3,6 +3,7 @@ order: 1
 group:
   order: 10
   title: 其他
+toc: content
 ---
 
 # GPTVis 协议渲染器

src/HeatMap/index.md

@@ -3,6 +3,7 @@ order: 3
 group:
   order: 2
   title: 地图
+toc: content
 ---
 
 # HeatMap 热力地图

src/Histogram/index.md

@@ -4,6 +4,7 @@ group:
   order: 1
   title: 统计图
 demo: { cols: 2 }
+toc: content
 ---
 
 # Histogram 直方图