@antv/gpt-vis 0.1.0 → 0.2.1

package/README.md

@@ -4,13 +4,12 @@
 
 <div align="center">
 
-Components for GPTs, generative AI, and LLM projects. Not only UI Components.
+Components for GPTs, generative AI, and LLM projects. **Not only UI Components**.
 
 <p align="center">
-  <a href="https://gpt-vis.antv.com" target="_blank">Document</a> •
+  <a href="https://gpt-vis.antv.vision" target="_blank">Document</a> •
   <a href="/knowledges" target="_blank">Knowledge</a> •
-  <a href="https://huggingface.co/antvis" target="_blank">Huggingface</a> •
-  <a href="https://tbox.alipay.com/share/202410APr1n200110168?platform=WebService" target="_blank">Agent Demo</a>
+  <a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241120WZh400101995" target="_blank">Agent Demo</a>
 </p>
 
 <div align="center">
@@ -42,7 +41,21 @@ const markdownContent = `
 Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.
 
 \`\`\`vis-chart
-{ "type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}] }
+{
+  "type": "line",
+  "data": [
+    { "time":2013,"value":59.3 },
+    { "time":2014,"value":64.4 },
+    { "time":2015,"value":68.9 },
+    { "time":2016,"value":74.4 },
+    { "time":2017,"value":82.7 },
+    { "time":2018,"value":91.9 },
+    { "time":2019,"value":99.1 },
+    { "time":2020,"value":101.6 },
+    { "time":2021,"value":114.4 },
+    { "time":2022,"value":121 }
+  ]
+}
 \`\`\`
 `;
 
@@ -51,30 +64,80 @@ export default () => {
 };
 ```
 
-## 🛠 Custom renderer
+<details>
+<summary>🛠 Custom renderer</summary>
 
 ```jsx
-import { GPTVis, withDefaultChartCode, VisText } from '@antv/gpt-vis';
+import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis';
 
 const markdownContent = `
-<vis-text type="time_desc">本月</vis-text>共产生<vis-text type="metric_name">决策数量</vis-text><vis-text type="metric_value">2,783</vis-text>个，环比<vis-text type="trend_desc">增长</vis-text><vis-text type="ratio_value_pos">15.2%</vis-text>。<vis-text type="dim_name">高优先级决策</vis-text>占比<vis-text type="proportion">56.2%</vis-text>，呈现稳定<vis-text type="trend_desc" origin="[1, 2, 6, 18, 24, 48]">上升</vis-text>趋势，预计<vis-text type="time_desc">下月</vis-text>将突破<vis-text type="metric_value">3,000</vis-text>大关。
-
 \`\`\`my-ui
 my data
 \`\`\`
+
+\`\`\`vis-chart
+{
+  "type": "pie",
+  "data": [
+    { "category": "category 1", "value": 27 },
+    { "category": "category 2", "value": 25 },
+    { "category": "category 3", "value": 18 },
+    { "category": "other", "value": 5 }
+  ]
+}
+\`\`\`
 `;
 
 const customRenderers = { 'my-ui': ({ children }) => <div>{children}</div> };
 const components = {
-  'vis-text': VisText,
-  code: withDefaultChartCode({ languageRenderers: customRenderers }),
+  code: withChartCode({
+    languageRenderers: customRenderers, // register custom block renderer
+    components: { [ChartType.Pie]: Pie }, // register a pie chart
+  }),
 };
 
 export default () => {
-  return <GPTVis components={components}>{markdownContent}</GPTVis>;
+  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
 };
 ```
 
+</details>
+
+## 🐍 Streamlit
+
+```python
+import streamlit as st
+from streamlit_gpt_vis import set_gpt_vis
+
+content = '''
+Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.
+
+\`\`\`vis-chart
+{"type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}]}
+\`\`\`
+'''
+
+set_gpt_vis(content)
+```
+
+Learn more 👉 [streamlit-gpt-vis](https://github.com/antvis/GPT-Vis/tree/main/bindings/streamlit-gpt-vis)
+
+## Visual Knowledge
+
+The purpose of the [Visual Knowledge Base](https://github.com/antvis/GPT-Vis/tree/main/knowledges) is to provide a comprehensive and systematic resource to help Agents understand, select, create various data visualization charts. Below are the metrics for generating accurate chart protocols based on the [evaluation dataset](https://github.com/antvis/GPT-Vis/tree/main/evaluations/datastes/chart) through the RAG.
+
+|               |                         |                      |               |                      |                 |         |
+| ------------- | ----------------------- | -------------------- | ------------- | -------------------- | --------------- | ------- |
+| Line(Multi)   | Column(Grouped/Stacked) | Pie                  | Area(Stacked) | Bar(Grouped/Stacked) | Scatter(Bubble) | Heatmap |
+| 40/40         | 25/27                   | 13/14                | 18/18         | 18/20                | 10/10           | 9/10    |
+| Histogram     | Tree Map                | Word Cloud           | Radar         | Dual Axis            | Rich Text NTV   | Pin Map |
+| 15/16         | 13/15                   | 11/12                | 23/23         | 13/14                | 7.3/10          | 10/11   |
+| Network Graph | Mind Map                | Organizational Chart | Flow Diagram  | Fishbone Diagram     |                 |         |
+| 8/10          | 12/14                   | 10/12                | 10/11         | 10/12                |                 |         |
+|               |                         |                      |               |                      |                 |         |
+
+Note: The numbers in the format of X/Y represent the metrics of the respective chart types when evaluated against the dataset.
+
 ## 💻 Development
 
 ```bash

package/README.zh-CN.md

@@ -4,13 +4,12 @@
 
 <div align="center">
 
-Components for GPTs, generative AI, and LLM projects. Not only UI Components.
+Components for GPTs, generative AI, and LLM projects. **Not only UI Components**.
 
 <p align="center">
-  <a href="https://gpt-vis.antv.com" target="_blank">文档</a> •
+  <a href="https://gpt-vis.antv.vision" target="_blank">文档</a> •
   <a href="/knowledges" target="_blank">知识库</a> •
-  <a href="https://huggingface.co/antvis" target="_blank">Huggingface</a> •
-  <a href="https://tbox.alipay.com/share/202410APr1n200110168?platform=WebService" target="_blank">体验 Agent</a>
+  <a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241120WZh400101995" target="_blank">体验 Agent</a>
 </p>
 
 <div align="center">
@@ -42,7 +41,21 @@ const markdownContent = `
 Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.
 
 \`\`\`vis-chart
-{ "type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}] }
+{
+  "type": "line",
+  "data": [
+    { "time":2013,"value":59.3 },
+    { "time":2014,"value":64.4 },
+    { "time":2015,"value":68.9 },
+    { "time":2016,"value":74.4 },
+    { "time":2017,"value":82.7 },
+    { "time":2018,"value":91.9 },
+    { "time":2019,"value":99.1 },
+    { "time":2020,"value":101.6 },
+    { "time":2021,"value":114.4 },
+    { "time":2022,"value":121 }
+  ]
+}
 \`\`\`
 `;
 
@@ -51,30 +64,78 @@ export default () => {
 };
 ```
 
-## 🛠 定制渲染器
+<details>
+<summary>🛠 定制渲染器</summary>
 
 ```jsx
-import { GPTVis, withDefaultChartCode, VisText } from '@antv/gpt-vis';
+import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis';
 
 const markdownContent = `
-<vis-text type="time_desc">本月</vis-text>共产生<vis-text type="metric_name">决策数量</vis-text><vis-text type="metric_value">2,783</vis-text>个，环比<vis-text type="trend_desc">增长</vis-text><vis-text type="ratio_value_pos">15.2%</vis-text>。<vis-text type="dim_name">高优先级决策</vis-text>占比<vis-text type="proportion">56.2%</vis-text>，呈现稳定<vis-text type="trend_desc" origin="[1, 2, 6, 18, 24, 48]">上升</vis-text>趋势，预计<vis-text type="time_desc">下月</vis-text>将突破<vis-text type="metric_value">3,000</vis-text>大关。
-
 \`\`\`my-ui
 my data
 \`\`\`
+
+\`\`\`vis-chart
+{
+  "type": "pie",
+  "data": [
+    { "category": "分类一", "value": 27 },
+    { "category": "分类二", "value": 25 },
+    { "category": "分类三", "value": 18 },
+    { "category": "其他", "value": 5 }
+  ]
+}
+\`\`\`
 `;
 
 const customRenderers = { 'my-ui': ({ children }) => <div>{children}</div> };
 const components = {
-  'vis-text': VisText,
-  code: withDefaultChartCode({ languageRenderers: customRenderers }),
+  code: withChartCode({
+    languageRenderers: customRenderers, // register custom block renderer
+    components: { [ChartType.Pie]: Pie }, // register a pie chart
+  }),
 };
 
 export default () => {
-  return <GPTVis components={components}>{markdownContent}</GPTVis>;
+  return <GPTVisLite components={components}>{markdownContent}</GPTVisLite>;
 };
 ```
 
+</details>
+
+## 🐍 Streamlit
+
+```python
+import streamlit as st
+from streamlit_gpt_vis import set_gpt_vis
+
+content = '''
+Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.
+
+\`\`\`vis-chart
+{"type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}]}
+\`\`\`
+'''
+
+set_gpt_vis(content)
+```
+
+更多了解 👉 [streamlit-gpt-vis](https://github.com/antvis/GPT-Vis/tree/main/bindings/streamlit-gpt-vis)
+
+## 🗂 可视化知识库
+
+[可视化知识库](https://github.com/antvis/GPT-Vis/tree/main/knowledges)的目的是为了提供一个全面、系统的资源，帮助 Agent 理解、选择、创建各种数据可视化图表，以下是 Agent 通过 RAG 方式接入知识，根据[评测数据集](https://github.com/antvis/GPT-Vis/tree/main/evaluations/datastes/chart)生成准确图表协议的指标。
+
+|               |                         |                      |               |                      |                 |         |
+| ------------- | ----------------------- | -------------------- | ------------- | -------------------- | --------------- | ------- |
+| Line(Multi)   | Column(Grouped/Stacked) | Pie                  | Area(Stacked) | Bar(Grouped/Stacked) | Scatter(Bubble) | Heatmap |
+| 40/40         | 25/27                   | 13/14                | 18/18         | 18/20                | 10/10           | 9/10    |
+| Histogram     | Tree Map                | Word Cloud           | Radar         | Dual Axis            | Rich Text NTV   | Pin Map |
+| 15/16         | 13/15                   | 11/12                | 23/23         | 13/14                | 7.3/10          | 10/11   |
+| Network Graph | Mind Map                | Organizational Chart | Flow Diagram  | Fishbone Diagram     |                 |         |
+| 8/10          | 12/14                   | 10/12                | 10/11         | 10/12                |                 |         |
+|               |                         |                      |               |                      |                 |         |
+
 ## 💻 本地开发
 
 ```bash

package/dist/cjs/ConfigProvider/hooks/useConfig.js

@@ -91,8 +91,9 @@ function useMapConfig(name, props) {
   return mapConfig;
 }
 function useGraphGlobalConfig(name) {
+  const { graph: graphConfig = {} } = useConfig();
   const componentConfig = useComponentGlobalConfig(name);
-  return componentConfig || {};
+  return (0, import_config.mergeGraphOptions)(graphConfig, componentConfig || {});
 }
 function useGraphConfig(name, defaultConfig, props) {
   const globalConfig = useGraphGlobalConfig(name);

package/dist/cjs/FishboneDiagram/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TreeGraphProps } from '../types';
+export interface FishboneDiagramProps extends TreeGraphProps {
+}
+declare const FishboneDiagram: React.FC<FishboneDiagramProps>;
+export default FishboneDiagram;

package/dist/cjs/FishboneDiagram/index.js

@@ -0,0 +1,49 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/FishboneDiagram/index.tsx
+var FishboneDiagram_exports = {};
+__export(FishboneDiagram_exports, {
+  default: () => FishboneDiagram_default
+});
+module.exports = __toCommonJS(FishboneDiagram_exports);
+var import_graphs = require("@ant-design/graphs");
+var import_react = __toESM(require("react"));
+var import_hooks = require("../ConfigProvider/hooks");
+var import_graph = require("../utils/graph");
+var defaultConfig = {
+  autoFit: "view",
+  autoResize: true
+};
+var FishboneDiagram = (props) => {
+  const { data: propsData, ...restProps } = props;
+  const data = (0, import_react.useMemo)(() => (0, import_graph.visTreeData2GraphData)(propsData), [propsData]);
+  const config = (0, import_hooks.useGraphConfig)("FishboneDiagram", defaultConfig, restProps);
+  return /* @__PURE__ */ import_react.default.createElement(import_graphs.Fishbone, { data, ...config });
+};
+var FishboneDiagram_default = FishboneDiagram;

package/dist/cjs/GPTVis/Lite.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Options } from 'react-markdown';
+export interface GPTVisLiteProps extends Options {
+    /** 自定义 markdown components样式 */
+    components?: Options['components'] | {
+        [key: string]: (props: any) => React.ReactNode;
+    };
+}
+declare const _default: React.NamedExoticComponent<GPTVisLiteProps>;
+export default _default;

package/dist/cjs/GPTVis/Lite.js

@@ -0,0 +1,54 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/GPTVis/Lite.tsx
+var Lite_exports = {};
+__export(Lite_exports, {
+  default: () => Lite_default
+});
+module.exports = __toCommonJS(Lite_exports);
+var import_react = __toESM(require("react"));
+var import_react_markdown = __toESM(require("react-markdown"));
+var import_rehype_raw = __toESM(require("rehype-raw"));
+var GPTVisLite = ({
+  children,
+  components,
+  rehypePlugins,
+  ...rest
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_react_markdown.default,
+    {
+      components,
+      rehypePlugins: [import_rehype_raw.default, ...rehypePlugins ? rehypePlugins : []],
+      ...rest
+    },
+    children
+  );
+};
+var Lite_default = (0, import_react.memo)(GPTVisLite);

package/dist/cjs/GPTVis/index.d.ts

@@ -1,10 +1,6 @@
 import React from 'react';
-import type { Options } from 'react-markdown';
-export interface GPTVisProps extends Options {
-    /** 自定义 markdown components样式 */
-    components?: Options['components'] | {
-        [key: string]: (props: any) => React.ReactNode;
-    };
+import { type GPTVisLiteProps } from './Lite';
+export interface GPTVisProps extends GPTVisLiteProps {
 }
 declare const _default: React.NamedExoticComponent<GPTVisProps>;
 export default _default;

package/dist/cjs/GPTVis/index.js

@@ -33,19 +33,10 @@ __export(GPTVis_exports, {
 });
 module.exports = __toCommonJS(GPTVis_exports);
 var import_react = __toESM(require("react"));
-var import_react_markdown = __toESM(require("react-markdown"));
-var import_rehype_raw = __toESM(require("rehype-raw"));
 var import_ChartCodeRender = require("../ChartCodeRender");
+var import_Lite = __toESM(require("./Lite"));
 var CodeBlock = (0, import_ChartCodeRender.withDefaultChartCode)();
-var GPTVis = ({ children, components, rehypePlugins, ...rest }) => {
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_react_markdown.default,
-    {
-      components: { code: CodeBlock, ...components },
-      rehypePlugins: [import_rehype_raw.default, ...rehypePlugins ? rehypePlugins : []],
-      ...rest
-    },
-    children
-  );
+var GPTVis = ({ children, components, ...rest }) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Lite.default, { components: { code: CodeBlock, ...components }, ...rest }, children);
 };
 var GPTVis_default = (0, import_react.memo)(GPTVis);

package/dist/cjs/Text/VisText.js

@@ -37,6 +37,7 @@ var import_lodash = require("lodash");
 var import_react = __toESM(require("react"));
 var import_hooks = require("../ConfigProvider/hooks");
 var import_config = require("./config");
+var import_utils = require("./utils");
 var { Text } = import_antd.Typography;
 function renderPrefixSuffix(symbol, staticsConfig, props) {
   if (!symbol)
@@ -48,6 +49,7 @@ function renderPrefixSuffix(symbol, staticsConfig, props) {
 }
 var VisText = (props) => {
   const { children, className, style, type, origin } = props;
+  const isDark = (0, import_utils.useAntdDarkAlgorithm)();
   const textConfig = (0, import_hooks.useComponentGlobalConfig)("VisText");
   const encoding = type ? textConfig == null ? void 0 : textConfig[type] : {};
   const staticsConfig = textConfig == null ? void 0 : textConfig[import_config.STATICS_KEY];
@@ -58,8 +60,12 @@ var VisText = (props) => {
       {
         className,
         style: {
+          // antd Text 组件写死了 14px，在段落定义了 font-size 的情况下，显示很突兀，这里不设置，跟随上级容器字体大小改变。
+          // TODO @羽熙 之后看能否通过 antd ConfigProvider 统一配置
+          fontSize: "unset",
+          color: (0, import_utils.getThemeColor)({ type, color: encoding == null ? void 0 : encoding.color, theme: isDark ? "dark" : "light" }),
           ...style,
-          ...(0, import_lodash.pick)(encoding, ["color", "backgroundColor", "fontWeight"])
+          ...(0, import_lodash.pick)(encoding, ["backgroundColor", "fontWeight"])
         }
       },
       renderPrefixSuffix(encoding == null ? void 0 : encoding.prefix, staticsConfig, props),

package/dist/cjs/Text/config.js

@@ -23,9 +23,9 @@ __export(config_exports, {
   STATICS_KEY: () => STATICS_KEY
 });
 module.exports = __toCommonJS(config_exports);
-var import_constants = require("./constants");
 var import_custom_icons = require("./custom-icons");
 var import_mini_charts = require("./mini-charts");
+var import_theme = require("./theme");
 var STATICS_KEY = "__statics";
 var DEFAULT_VIS_TEXT_CONFIG = {
   [STATICS_KEY]: {
@@ -36,49 +36,49 @@ var DEFAULT_VIS_TEXT_CONFIG = {
     "mini-chart:line": import_mini_charts.SingleLineChart
   },
   metric_name: {
-    color: import_constants.TEXT_THEME.black88,
+    color: import_theme.TEXT_THEME.light.default88Color,
     fontWeight: 500
   },
   metric_value: {
-    color: import_constants.TEXT_THEME.primaryColor
+    color: import_theme.TEXT_THEME.light.primaryColor
   },
   other_metric_value: {
-    color: import_constants.TEXT_THEME.black65
+    color: import_theme.TEXT_THEME.light.default65Color
   },
   delta_value: {
-    color: import_constants.TEXT_THEME.black65
+    color: import_theme.TEXT_THEME.light.default65Color
   },
   ratio_value: {
-    color: import_constants.TEXT_THEME.black65
+    color: import_theme.TEXT_THEME.light.default65Color
   },
   delta_value_pos: {
-    color: import_constants.TEXT_THEME.posColor,
+    color: import_theme.TEXT_THEME.light.posColor,
     prefix: "+"
   },
   delta_value_neg: {
-    color: import_constants.TEXT_THEME.negColor,
+    color: import_theme.TEXT_THEME.light.negColor,
     prefix: "-"
   },
   ratio_value_pos: {
-    color: import_constants.TEXT_THEME.posColor,
+    color: import_theme.TEXT_THEME.light.posColor,
     prefix: "icon:arrow-up"
   },
   ratio_value_neg: {
-    color: import_constants.TEXT_THEME.negColor,
+    color: import_theme.TEXT_THEME.light.negColor,
     prefix: "icon:arrow-down"
   },
   contribute_ratio: {
-    color: import_constants.TEXT_THEME.statisticsInsightColor
+    color: import_theme.TEXT_THEME.light.conclusionColor
   },
   trend_desc: {
-    color: import_constants.TEXT_THEME.statisticsInsightColor,
+    color: import_theme.TEXT_THEME.light.conclusionColor,
     suffix: "mini-chart:line"
   },
   dim_value: {
-    color: import_constants.TEXT_THEME.black88
+    color: import_theme.TEXT_THEME.light.default88Color
   },
   time_desc: {
-    color: import_constants.TEXT_THEME.black88
+    color: import_theme.TEXT_THEME.light.default88Color
   },
   proportion: {
     suffix: "mini-chart:proportion"

package/dist/cjs/Text/mini-charts/hooks/getElementFontSize.js

@@ -22,7 +22,7 @@ __export(getElementFontSize_exports, {
   getElementFontSize: () => getElementFontSize
 });
 module.exports = __toCommonJS(getElementFontSize_exports);
-var import_constants = require("../../constants");
+var import_theme = require("../../theme");
 function getStyle(ele, style) {
   var _a;
   return window.getComputedStyle ? (
@@ -43,7 +43,7 @@ function getPxNumber(str) {
     return resultNumber;
   return void 0;
 }
-function getElementFontSize(ele, defaultSize = import_constants.TEXT_THEME.fontSizeBase) {
+function getElementFontSize(ele, defaultSize = import_theme.TEXT_THEME.fontSizeBase) {
   const FONT_SIZE = "font-size";
   const eleFontSizeStr = getStyle(ele, FONT_SIZE);
   if (eleFontSizeStr && isAbsoluteUnitPx(eleFontSizeStr)) {

package/dist/cjs/Text/mini-charts/hooks/useSvgWrapper.js

@@ -33,14 +33,14 @@ __export(useSvgWrapper_exports, {
 });
 module.exports = __toCommonJS(useSvgWrapper_exports);
 var import_react = __toESM(require("react"));
-var import_constants = require("../../constants");
+var import_theme = require("../../theme");
 var import_getElementFontSize = require("./getElementFontSize");
 var useSvgWrapper = () => {
   const ele = (0, import_react.useRef)(null);
-  const [fontSize, setFontSize] = (0, import_react.useState)(import_constants.TEXT_THEME.fontSizeBase);
+  const [fontSize, setFontSize] = (0, import_react.useState)(import_theme.TEXT_THEME.fontSizeBase);
   (0, import_react.useLayoutEffect)(() => {
     if (ele.current) {
-      setFontSize((0, import_getElementFontSize.getElementFontSize)(ele.current, import_constants.TEXT_THEME.fontSizeBase));
+      setFontSize((0, import_getElementFontSize.getElementFontSize)(ele.current, import_theme.TEXT_THEME.fontSizeBase));
     }
   }, []);
   const Svg = ({ children, ...otherProps }) => {

package/dist/cjs/Text/mini-charts/line/SingleLineChart.js

@@ -34,10 +34,10 @@ __export(SingleLineChart_exports, {
 module.exports = __toCommonJS(SingleLineChart_exports);
 var import_lodash = require("lodash");
 var import_react = __toESM(require("react"));
+var import_theme = require("../../theme");
 var import_hooks = require("../hooks");
 var import_useLineCompute = require("./useLineCompute");
 var LINEAR_FILL_COLOR_ID = "wsc-line-fill";
-var LINE_STROKE_COLOR = "#5B8FF9";
 function getLineChartData(origin) {
   if ((0, import_lodash.isArray)(origin))
     return origin;
@@ -55,7 +55,7 @@ var SingleLineChart = ({ origin }) => {
   const [Svg, fontSize] = (0, import_hooks.useSvgWrapper)();
   const data = (0, import_react.useMemo)(() => getLineChartData(origin), [origin]);
   const { width, height, linePath, polygonPath } = (0, import_useLineCompute.useLineCompute)(fontSize, data);
-  return (0, import_lodash.size)(data) > 0 && /* @__PURE__ */ import_react.default.createElement(Svg, { width, height }, /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { x1: "50%", y1: "0%", x2: "50%", y2: "122.389541%", id: LINEAR_FILL_COLOR_ID }, /* @__PURE__ */ import_react.default.createElement("stop", { stopColor: LINE_STROKE_COLOR, offset: "0%" }), /* @__PURE__ */ import_react.default.createElement("stop", { stopColor: "#FFFFFF", stopOpacity: "0", offset: "100%" }))), linePath && /* @__PURE__ */ import_react.default.createElement("path", { d: linePath, stroke: LINE_STROKE_COLOR, fill: "transparent" }), polygonPath && /* @__PURE__ */ import_react.default.createElement("polygon", { points: polygonPath, fill: `url(#${LINEAR_FILL_COLOR_ID})` }));
+  return (0, import_lodash.size)(data) > 0 && /* @__PURE__ */ import_react.default.createElement(Svg, { width, height }, /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { x1: "50%", y1: "0%", x2: "50%", y2: "122.389541%", id: LINEAR_FILL_COLOR_ID }, /* @__PURE__ */ import_react.default.createElement("stop", { stopColor: import_theme.TEXT_THEME.chart.lineStrokeColor, offset: "0%" }), /* @__PURE__ */ import_react.default.createElement("stop", { stopColor: "#FFFFFF", stopOpacity: "0", offset: "100%" }))), linePath && /* @__PURE__ */ import_react.default.createElement("path", { d: linePath, stroke: import_theme.TEXT_THEME.chart.lineStrokeColor, fill: "transparent" }), polygonPath && /* @__PURE__ */ import_react.default.createElement("polygon", { points: polygonPath, fill: `url(#${LINEAR_FILL_COLOR_ID})` }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/Text/mini-charts/line/useLineCompute.js

@@ -23,13 +23,13 @@ __export(useLineCompute_exports, {
 });
 module.exports = __toCommonJS(useLineCompute_exports);
 var import_react = require("react");
-var import_constants = require("../../constants");
+var import_theme = require("../../theme");
 var import_scaleLinear = require("./scaleLinear");
 var SCALE_ADJUST = 2;
 var Line = class {
   constructor(size, data) {
     this.data = [];
-    this.size = import_constants.TEXT_THEME.fontSizeBase;
+    this.size = import_theme.TEXT_THEME.fontSizeBase;
     this.height = this.size;
     this.width = this.getWidth();
     this.points = [];

package/dist/cjs/Text/mini-charts/proportion/index.js

@@ -34,10 +34,9 @@ __export(proportion_exports, {
 module.exports = __toCommonJS(proportion_exports);
 var import_lodash = require("lodash");
 var import_react = __toESM(require("react"));
+var import_theme = require("../../theme");
 var import_useSvgWrapper = require("../hooks/useSvgWrapper");
 var import_getArcPath = require("./getArcPath");
-var SHADOW_COLOR = "#CDDDFD";
-var FILL_COLOR = "#3471F9";
 function getProportionNumber(children, origin) {
   var _a;
   let result;
@@ -64,7 +63,7 @@ var ProportionChart = ({ origin, children }) => {
   const data = (0, import_react.useMemo)(() => getProportionNumber(children, origin), [children, origin]);
   const [Svg, fontSize] = (0, import_useSvgWrapper.useSvgWrapper)();
   const r = fontSize / 2;
-  return data && /* @__PURE__ */ import_react.default.createElement(Svg, { width: fontSize, height: fontSize }, /* @__PURE__ */ import_react.default.createElement("circle", { cx: r, cy: r, r, fill: SHADOW_COLOR }), data >= 1 ? /* @__PURE__ */ import_react.default.createElement("circle", { cx: r, cy: r, r, fill: FILL_COLOR }) : /* @__PURE__ */ import_react.default.createElement("path", { d: (0, import_getArcPath.getArcPath)(fontSize, data), fill: FILL_COLOR }));
+  return data && /* @__PURE__ */ import_react.default.createElement(Svg, { width: fontSize, height: fontSize }, /* @__PURE__ */ import_react.default.createElement("circle", { cx: r, cy: r, r, fill: import_theme.TEXT_THEME.chart.proportionShadowColor }), data >= 1 ? /* @__PURE__ */ import_react.default.createElement("circle", { cx: r, cy: r, r, fill: import_theme.TEXT_THEME.chart.proportionFillColor }) : /* @__PURE__ */ import_react.default.createElement("path", { d: (0, import_getArcPath.getArcPath)(fontSize, data), fill: import_theme.TEXT_THEME.chart.proportionFillColor }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {