@antv/gpt-vis 0.0.6 → 0.1.0

package/dist/esm/Area/index.js

@@ -1,40 +1,34 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-// 引入必要的包
 import { Area as ADCArea } from '@ant-design/plots';
+import { get } from 'lodash';
 import React from 'react';
-// 假如你有类型需要引入
-
-var Area = function Area(props) {
-  var _props$data = props.data,
-    data = _props$data === void 0 ? [] : _props$data,
+import { usePlotConfig } from "../ConfigProvider/hooks";
+var defaultConfig = function defaultConfig(props) {
+  var data = props.data,
     _props$xField = props.xField,
-    xField = _props$xField === void 0 ? 'x' : _props$xField,
+    xField = _props$xField === void 0 ? 'time' : _props$xField,
     _props$yField = props.yField,
-    yField = _props$yField === void 0 ? 'y' : _props$yField,
-    stackField = props.stackField,
-    className = props.className,
-    style = props.style;
-
-  // 如果有 stackField，则使用 seriesField 进行分组显示，否则不分组
-  var stackConfig = stackField ? {
-    colorField: stackField,
-    isStack: true
-  } : {};
-  var config = _objectSpread({
-    data: data,
+    yField = _props$yField === void 0 ? 'value' : _props$yField;
+  var hasGroupField = get(data, '[0].group') !== undefined;
+  var axisYTitle = get(props, 'axis.y.title');
+  var defalutStyle = hasGroupField ? {} : {
+    opacity: 0.6
+  };
+  return {
     xField: xField,
     yField: yField,
+    style: defalutStyle,
+    colorField: hasGroupField ? 'group' : undefined,
     tooltip: function tooltip(d) {
+      var tooltipName = axisYTitle || d[xField];
       return {
-        name: d[xField],
+        name: tooltipName,
         value: d[yField]
       };
     }
-  }, stackConfig);
-  return /*#__PURE__*/React.createElement(ADCArea, _extends({
-    className: className,
-    containerStyle: _objectSpread({}, style)
-  }, config));
+  };
+};
+var Area = function Area(props) {
+  var config = usePlotConfig('Area', defaultConfig, props);
+  return /*#__PURE__*/React.createElement(ADCArea, config);
 };
 export default Area;

package/dist/esm/Bar/index.d.ts

@@ -0,0 +1,11 @@
+import type { BarConfig } from '@ant-design/plots';
+import React from 'react';
+import type { BasePlotProps } from '../types';
+type BarDataItem = {
+    category: string;
+    value: number;
+    [key: string]: string | number;
+};
+export type BarProps = BasePlotProps<BarDataItem> & Partial<BarConfig>;
+declare const Bar: (props: BarProps) => React.JSX.Element;
+export default Bar;

package/dist/esm/Bar/index.js

@@ -0,0 +1,35 @@
+import { Bar as ADCBar } from '@ant-design/plots';
+import { get } from 'lodash';
+import React from 'react';
+import { usePlotConfig } from "../ConfigProvider/hooks";
+var defaultConfig = function defaultConfig(props) {
+  var data = props.data,
+    _props$xField = props.xField,
+    xField = _props$xField === void 0 ? 'category' : _props$xField,
+    _props$yField = props.yField,
+    yField = _props$yField === void 0 ? 'value' : _props$yField;
+  var hasGroupField = get(data, '[0].group') !== undefined;
+  var axisYTitle = get(props, 'axis.y.title');
+  return {
+    xField: xField,
+    yField: yField,
+    colorField: hasGroupField ? 'group' : undefined,
+    tooltip: function tooltip(d) {
+      var tooltipName = axisYTitle || d[xField];
+      return {
+        name: tooltipName,
+        value: d[yField]
+      };
+    },
+    style: {
+      // 圆角样式
+      radiusTopLeft: 5,
+      radiusTopRight: 5
+    }
+  };
+};
+var Bar = function Bar(props) {
+  var config = usePlotConfig('Bar', defaultConfig, props);
+  return /*#__PURE__*/React.createElement(ADCBar, config);
+};
+export default Bar;

package/dist/esm/ChartCodeRender/Loading.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Loading: () => React.JSX.Element;
+export default Loading;

package/dist/esm/ChartCodeRender/Loading.js

@@ -0,0 +1,20 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import React from 'react';
+import styled from 'styled-components';
+var StyledLoading = styled.div.withConfig({
+  displayName: "StyledLoading",
+  componentId: "gpt-vis-c7ef__sc-4x7w8p-0"
+})(["display:flex;align-items:center;justify-content:center;flex-direction:column;height:300px;background-image:linear-gradient(135deg,#e3f3ff 0%,#f1eeff 100%);color:rgba(0,0,0,88%);&-icon{margin-bottom:6px;}"]);
+var Loading = function Loading() {
+  return /*#__PURE__*/React.createElement(StyledLoading, {
+    className: "gpt-vis-loading"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "gpt-vis-loading-icon"
+  }, /*#__PURE__*/React.createElement(LoadingOutlined, {
+    style: {
+      fontSize: '24px',
+      color: 'rgb(56, 177, 246)'
+    }
+  })), /*#__PURE__*/React.createElement("p", null, "\u6570\u636E\u751F\u6210\u4E2D"));
+};
+export default Loading;

package/dist/esm/ChartCodeRender/VisChart.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ChartComponents } from './type';
+type RenderVisChartProps = {
+    content: string;
+    components: ChartComponents;
+    debug?: boolean;
+    loadingTimeout: number;
+    style?: React.CSSProperties;
+};
+export declare const RenderVisChart: React.FC<RenderVisChartProps>;
+export {};

package/dist/esm/ChartCodeRender/VisChart.js

@@ -0,0 +1,65 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["type"];
+import React, { memo, useRef, useState } from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+import Loading from "./Loading";
+var StyledGPTVis = styled.div.withConfig({
+  displayName: "StyledGPTVis",
+  componentId: "gpt-vis-c7ef__sc-1f5p953-0"
+})(["min-width:300px;height:300px;max-width:100%;"]);
+var GlobalStyles = createGlobalStyle(["pre:has(.gpt-vis){overflow:hidden;}"]);
+export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
+  var style = _ref.style,
+    content = _ref.content,
+    components = _ref.components,
+    debug = _ref.debug,
+    loadingTimeout = _ref.loadingTimeout;
+  var timeoutRef = useRef();
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var chartJson;
+  try {
+    chartJson = JSON.parse(content);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (e) {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      if (debug) {
+        console.warn('GPT-Vis withChartCode parse content timeout');
+      }
+    }
+    timeoutRef.current = setTimeout(function () {
+      setLoading(false);
+    }, loadingTimeout);
+    if (loading) {
+      return /*#__PURE__*/React.createElement(StyledGPTVis, {
+        className: "gpt-vis",
+        style: style
+      }, /*#__PURE__*/React.createElement(Loading, null));
+    }
+    return /*#__PURE__*/React.createElement("p", null, "Chart generation timeout.");
+  }
+  var _chartJson = chartJson,
+    type = _chartJson.type,
+    chartProps = _objectWithoutProperties(_chartJson, _excluded);
+  var ChartComponent = components[type];
+
+  // debug mode print chartJson
+  if (debug) {
+    console.log('GPT-Vis withChartCode get chartJson parse from vis-chart code block', chartJson);
+  }
+
+  // If the chart type is not supported, display an error message
+  if (!ChartComponent) {
+    return /*#__PURE__*/React.createElement("p", null, "Chart type \"".concat(type, "\" is not supported."));
+  }
+
+  // Render the supported chart component with data
+  return /*#__PURE__*/React.createElement(StyledGPTVis, {
+    className: "gpt-vis",
+    style: style
+  }, /*#__PURE__*/React.createElement(GlobalStyles, null), /*#__PURE__*/React.createElement(ChartComponent, chartProps));
+});

package/dist/esm/ChartCodeRender/index.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
-import { WithChartCodeOptions } from './type';
-export declare const withChartCode: (options: WithChartCodeOptions) => keyof JSX.IntrinsicElements | import("hast-util-to-jsx-runtime/lib/components").Component<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & import("hast-util-to-jsx-runtime/lib/components").ExtraProps> | undefined;
+import type { CodeBlockComponent, WithChartCodeOptions } from './type';
+export declare const withChartCode: (options: WithChartCodeOptions) => CodeBlockComponent;
 /**
  * Includes built-in chart components such as line charts, pie charts, etc.
  * @param componentsArray
  * @returns
  */
-export declare const withDefaultChartCode: (options?: Partial<WithChartCodeOptions>) => keyof JSX.IntrinsicElements | import("hast-util-to-jsx-runtime/lib/components").Component<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & import("hast-util-to-jsx-runtime/lib/components").ExtraProps> | undefined;
+export declare const withDefaultChartCode: (options?: Partial<WithChartCodeOptions>) => CodeBlockComponent;

package/dist/esm/ChartCodeRender/index.js

@@ -1,122 +1,66 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "className", "node"];
-import { LoadingOutlined } from '@ant-design/icons';
 import { get } from 'lodash';
-import React, { useRef, useState } from 'react';
-import styled from 'styled-components';
-import { DEFAULT_CHART_COMPONENTS } from "../constants";
-var StyledGPTVis = styled.div.withConfig({
-  displayName: "StyledGPTVis",
-  componentId: "gpt-vis-ed04__sc-1osp6pj-0"
-})(["min-width:600px;max-width:100%;"]);
-var StyledLoading = styled.div.withConfig({
-  displayName: "StyledLoading",
-  componentId: "gpt-vis-ed04__sc-1osp6pj-1"
-})(["display:flex;align-items:center;justify-content:center;flex-direction:column;width:400px;height:400px;background-image:linear-gradient(135deg,#e3f3ff 0%,#f1eeff 100%);color:rgba(0,0,0,88%);&-icon{margin-bottom:6px;}"]);
-var Loading = function Loading() {
-  return /*#__PURE__*/React.createElement(StyledLoading, {
-    className: "gpt-vis-loading"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "gpt-vis-loading-icon"
-  }, /*#__PURE__*/React.createElement(LoadingOutlined, {
-    style: {
-      fontSize: '24px',
-      color: 'rgb(56, 177, 246)'
-    }
-  })), /*#__PURE__*/React.createElement("p", null, "\u6570\u636E\u751F\u6210\u4E2D"));
+import React from 'react';
+import { DEFAULT_CHART_COMPONENTS } from "../export";
+import { RenderVisChart } from "./VisChart";
+var RenderDefaultCode = function RenderDefaultCode(props) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  var children = props.children,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    node = props.node,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("code", _extends({}, rest, {
+    className: className
+  }), children);
 };
 var withCodeBlock = function withCodeBlock(options) {
   // Render code block component
   return function CodeBlock(props) {
     var _className$match;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var children = props.children,
-      _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      node = props.node,
-      rest = _objectWithoutProperties(props, _excluded);
+      _props$className2 = props.className,
+      className = _props$className2 === void 0 ? '' : _props$className2;
     var content = String(children).trim();
     var isVisChart = className.includes('language-vis-chart');
     var components = options.components,
-      extraRenderers = options.extraRenderers,
       languageRenderers = options.languageRenderers,
       DefaultRenderer = options.defaultRenderer,
       debug = options.debug,
       _options$loadingTimeo = options.loadingTimeout,
-      loadingTimeout = _options$loadingTimeo === void 0 ? 5000 : _options$loadingTimeo;
-    var timeoutRef = useRef();
-    var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      loading = _useState2[0],
-      setLoading = _useState2[1];
+      loadingTimeout = _options$loadingTimeo === void 0 ? 5000 : _options$loadingTimeo,
+      style = options.style;
 
     // If the code block is a VisChart, render the corresponding chart component
     if (isVisChart) {
-      var chartJson;
-      try {
-        chartJson = JSON.parse(content);
-      } catch (e) {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-          if (debug) {
-            console.log('GPT-Vis withChartCode parse content timeout');
-          }
-        }
-        timeoutRef.current = setTimeout(function () {
-          setLoading(false);
-        }, loadingTimeout);
-        return loading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement("code", null, content.toString());
-      }
-      var _chartJson = chartJson,
-        type = _chartJson.type;
-      var ChartComponent = components[type];
-
-      // debug mode print chartJson
-      if (debug) {
-        console.log('GPT-Vis withChartCode get chartJson parse from vis-chart code block', chartJson);
-      }
-
-      // If the chart type is not supported, display an error message
-      if (!ChartComponent) {
-        return /*#__PURE__*/React.createElement("code", null, "Chart type \"".concat(type, "\" is not supported."));
-      }
-
-      // Render the supported chart component with data
-
-      return /*#__PURE__*/React.createElement(StyledGPTVis, {
-        className: "gpt-vis"
-      }, /*#__PURE__*/React.createElement(ChartComponent, chartJson));
+      return /*#__PURE__*/React.createElement(RenderVisChart, {
+        style: style,
+        content: content,
+        components: components,
+        debug: debug,
+        loadingTimeout: loadingTimeout
+      });
     }
 
     // If the code block math extraRenderer  languageName, the corresponding extra languageRenderers component
     var languageName = ((_className$match = className.match(/language-(.*)/)) === null || _className$match === void 0 ? void 0 : _className$match[1]) || '';
-    var extraLanguageRenderers = extraRenderers || languageRenderers;
+    var extraLanguageRenderers = languageRenderers;
     var ExtraRendererComponent = extraLanguageRenderers && extraLanguageRenderers[languageName];
     if (ExtraRendererComponent) {
       return /*#__PURE__*/React.createElement(ExtraRendererComponent, props);
     }
 
     // If the code block is not a VisChart, render plain code
-    return DefaultRenderer ? /*#__PURE__*/React.createElement(DefaultRenderer, props) : /*#__PURE__*/React.createElement("code", _extends({}, rest, {
-      className: className
-    }), children);
+    return DefaultRenderer ? /*#__PURE__*/React.createElement(DefaultRenderer, props) : /*#__PURE__*/React.createElement(RenderDefaultCode, props);
   };
 };
 
 // Create a higher-order component (HOC) with chart code
 export var withChartCode = function withChartCode(options) {
-  var _options$components;
-  // Flatten the components array into a single object
-  var components = ((_options$components = options.components) === null || _options$components === void 0 ? void 0 : _options$components.reduce(function (acc, obj) {
-    return _objectSpread(_objectSpread({}, acc), obj);
-  }, {})) || [];
-  return withCodeBlock(_objectSpread(_objectSpread({}, options), {}, {
-    components: components
-  }));
+  return withCodeBlock(options);
 };
 
 /**
@@ -126,6 +70,6 @@ export var withChartCode = function withChartCode(options) {
  */
 export var withDefaultChartCode = function withDefaultChartCode(options) {
   return withChartCode(_objectSpread(_objectSpread({}, options), {}, {
-    components: [DEFAULT_CHART_COMPONENTS].concat(_toConsumableArray(get(options, 'components', [])))
+    components: _objectSpread(_objectSpread({}, DEFAULT_CHART_COMPONENTS), get(options, 'components', {}))
   }));
 };

package/dist/esm/ChartCodeRender/type.d.ts

@@ -1,16 +1,10 @@
-import { FC } from 'react';
-import { Components, ExtraProps } from 'react-markdown';
-import { BaseChartProps } from '../types';
+import type { FC } from 'react';
+import type { Components, ExtraProps } from 'react-markdown';
 export type WithChartCodeOptions = {
     /**
      * 要额外加载的图表组件
      */
-    components: ChartComponents[];
-    /**
-     * @deprecated
-     * 请使用  languageRenderers
-     */
-    extraRenderers?: LanguageRenderers;
+    components: ChartComponents;
     /**
      * 自定义其它语言代码块渲染器
      */
@@ -27,19 +21,23 @@ export type WithChartCodeOptions = {
      * 设置loading动画的超时时间，默认为 5s
      */
     loadingTimeout?: number;
+    /**
+     * 图表样式，配置容器样式
+     */
+    style?: React.CSSProperties;
 };
 /**
  * 图表渲染数据接口，后续拓展，这里只是写个示例
  */
 export interface ChartJson {
     type: string;
-    data: any[];
+    data: any;
 }
 /**
  * 图表组件字典
  */
 export interface ChartComponents {
-    [key: string]: FC<BaseChartProps<any>>;
+    [key: string]: FC<any>;
 }
 /**
  * 代码块渲染器接口

package/dist/esm/Column/index.d.ts

@@ -1,5 +1,11 @@
+import type { ColumnConfig } from '@ant-design/plots';
 import React from 'react';
-import { StackableChartProps } from '../types';
-export type ColumnProps = StackableChartProps;
+import type { BasePlotProps } from '../types';
+export type ColumnDataItem = {
+    category: string | number;
+    value: number;
+    [key: string]: string | number;
+};
+export type ColumnProps = BasePlotProps<ColumnDataItem> & Partial<ColumnConfig>;
 declare const Column: (props: ColumnProps) => React.JSX.Element;
 export default Column;

package/dist/esm/Column/index.js

@@ -1,40 +1,35 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { Column as ADCColumn } from '@ant-design/plots';
+import { get } from 'lodash';
 import React from 'react';
-var Column = function Column(props) {
-  var _props$data = props.data,
-    data = _props$data === void 0 ? [] : _props$data,
+import { usePlotConfig } from "../ConfigProvider/hooks";
+var defaultConfig = function defaultConfig(props) {
+  var data = props.data,
     _props$xField = props.xField,
-    xField = _props$xField === void 0 ? 'x' : _props$xField,
+    xField = _props$xField === void 0 ? 'category' : _props$xField,
     _props$yField = props.yField,
-    yField = _props$yField === void 0 ? 'y' : _props$yField,
-    stackField = props.stackField,
-    style = props.style,
-    className = props.className;
-  var stackConfig = stackField ? {
-    colorField: stackField,
-    stack: true
-  } : {};
-  var config = _objectSpread({
-    data: data,
+    yField = _props$yField === void 0 ? 'value' : _props$yField;
+  var hasGroupField = get(data, '[0].group') !== undefined;
+  var axisYTitle = get(props, 'axis.y.title');
+  return {
     xField: xField,
     yField: yField,
-    style: {
-      // 圆角样式
-      radiusTopLeft: 10,
-      radiusTopRight: 10
-    },
+    colorField: hasGroupField ? 'group' : undefined,
     tooltip: function tooltip(d) {
+      var tooltipName = axisYTitle || d[xField];
       return {
-        name: d[xField],
+        name: tooltipName,
         value: d[yField]
       };
+    },
+    style: {
+      // 圆角样式
+      radiusTopLeft: 10,
+      radiusTopRight: 10
     }
-  }, stackConfig);
-  return /*#__PURE__*/React.createElement(ADCColumn, _extends({
-    className: className,
-    containerStyle: _objectSpread({}, style)
-  }, config));
+  };
+};
+var Column = function Column(props) {
+  var config = usePlotConfig('Column', defaultConfig, props);
+  return /*#__PURE__*/React.createElement(ADCColumn, config);
 };
 export default Column;

package/dist/esm/ConfigProvider/context.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { GlobalConfig } from '../types';
+export declare const ConfigContext: React.Context<GlobalConfig>;

package/dist/esm/ConfigProvider/context.js

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DEFAULT_GLOBAL_CONFIG } from "../constants";
+export var ConfigContext = /*#__PURE__*/React.createContext(DEFAULT_GLOBAL_CONFIG);

package/dist/esm/ConfigProvider/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useConfig';

package/dist/esm/ConfigProvider/hooks/index.js

@@ -0,0 +1 @@
+export * from "./useConfig";

package/dist/esm/ConfigProvider/hooks/useConfig.d.ts

@@ -0,0 +1,13 @@
+import type { GraphOptions } from '@ant-design/graphs';
+import type { CommonConfig } from '@ant-design/plots';
+import type { MapProps } from '../../Map';
+import type { Charts } from '../../types';
+export declare function useComponentGlobalConfig(name: Charts): Record<string, any> | undefined;
+export declare function usePlotConfig<T extends CommonConfig>(name: Charts, defaultConfig: Partial<T> | ((props: Partial<T>) => Partial<T>), props: Partial<T>): Partial<T>;
+export declare function useMapConfig<T extends MapProps>(name: Charts, props: T): {
+    mapType: string | undefined;
+    token: string | undefined;
+} & T;
+export declare function useGraphConfig<T extends GraphOptions>(name: Charts, defaultConfig: T, props: T): {
+    [x: string]: any;
+};

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

@@ -0,0 +1,55 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import { mergeGraphOptions } from "../../utils/config";
+import { transform2ADCProps } from "../../utils/plot";
+import { ConfigContext } from "../context";
+function useConfig() {
+  var context = React.useContext(ConfigContext);
+  return context;
+}
+export function useComponentGlobalConfig(name) {
+  var globalConfig = useConfig();
+  var _globalConfig$compone = globalConfig.components,
+    components = _globalConfig$compone === void 0 ? {} : _globalConfig$compone;
+  var config = components === null || components === void 0 ? void 0 : components[name];
+  return config;
+}
+function usePlotGlobalConfig(name) {
+  var componentConfig = useComponentGlobalConfig(name);
+  var _useConfig = useConfig(),
+    plotConfig = _useConfig.plot;
+  var config = _objectSpread(_objectSpread({}, plotConfig), componentConfig);
+  return config;
+}
+export function usePlotConfig(name, defaultConfig, props) {
+  var transformedProps = transform2ADCProps(props);
+  var _defaultConfig = typeof defaultConfig === 'function' ? defaultConfig(transformedProps) : defaultConfig;
+  var globalConfig = usePlotGlobalConfig(name);
+  var config = _objectSpread(_objectSpread(_objectSpread({}, _defaultConfig), globalConfig), transformedProps);
+  return config;
+}
+function useMapGlobalConfig(name) {
+  var componentConfig = useComponentGlobalConfig(name);
+  var _useConfig2 = useConfig(),
+    mapConfig = _useConfig2.map;
+  var transformedProps = {
+    mapType: mapConfig === null || mapConfig === void 0 ? void 0 : mapConfig.style,
+    token: mapConfig === null || mapConfig === void 0 ? void 0 : mapConfig.token
+  };
+  var config = _objectSpread(_objectSpread({}, transformedProps), componentConfig);
+  return config;
+}
+export function useMapConfig(name, props) {
+  var globalConfig = useMapGlobalConfig(name);
+  var mapConfig = _objectSpread(_objectSpread({}, globalConfig), props);
+  return mapConfig;
+}
+function useGraphGlobalConfig(name) {
+  // TODO: global config
+  var componentConfig = useComponentGlobalConfig(name);
+  return componentConfig || {};
+}
+export function useGraphConfig(name, defaultConfig, props) {
+  var globalConfig = useGraphGlobalConfig(name);
+  return mergeGraphOptions(defaultConfig, globalConfig, props);
+}

package/dist/esm/ConfigProvider/index.d.ts

@@ -1,10 +1,7 @@
 import React from 'react';
-import { GlobalConfig } from '../types';
-import { setGlobalConfig } from '../utils';
+import type { GlobalConfig } from '../types';
 export type ConfigProviderProps = {
     children?: React.ReactNode;
 } & GlobalConfig;
-declare const ConfigProvider: React.FC<ConfigProviderProps> & {
-    config: typeof setGlobalConfig;
-};
+declare const ConfigProvider: React.FC<ConfigProviderProps>;
 export default ConfigProvider;

package/dist/esm/ConfigProvider/index.js

@@ -1,16 +1,16 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children"];
-import { useRef } from 'react';
-import { setGlobalConfig } from "../utils";
+import React, { useMemo } from 'react';
+import { mergeGlobalConfig } from "../utils/config";
+import { ConfigContext } from "./context";
 var ConfigProvider = function ConfigProvider(props) {
   var children = props.children,
     config = _objectWithoutProperties(props, _excluded);
-  var firstRef = useRef(true);
-  if (firstRef.current) {
-    setGlobalConfig(config);
-    firstRef.current = false;
-  }
-  return children;
+  var contextValue = useMemo(function () {
+    return mergeGlobalConfig(config);
+  }, []);
+  return /*#__PURE__*/React.createElement(ConfigContext.Provider, {
+    value: contextValue
+  }, children);
 };
-ConfigProvider.config = setGlobalConfig;
 export default ConfigProvider;