@visactor/react-vchart 1.10.0-alpha.0 → 1.10.0-alpha.10

package/cjs/components/tooltip/util.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function(mod) {
+    return mod && mod.__esModule ? mod : {
+        default: mod
+    };
+};
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.initCustomTooltip = void 0;
+
+const react_1 = __importDefault(require("react")), vutils_1 = require("@visactor/vutils"), constant_1 = require("./constant"), react_dom_1 = require("react-dom"), initCustomTooltip = (setTooltipNode, props, spec) => {
+    let render;
+    if ((null == spec ? void 0 : spec.tooltipRender) ? (render = spec.tooltipRender, 
+    delete spec.tooltipRender) : (null == spec ? void 0 : spec.children) ? render = (tooltipElement, actualTooltip, params) => react_1.default.Children.map(spec.children, (child => (0, 
+    vutils_1.isObject)(child) ? react_1.default.cloneElement(child, {
+        tooltipElement: tooltipElement,
+        actualTooltip: actualTooltip,
+        params: params
+    }) : child)) : props.tooltipRender && (render = props.tooltipRender), render) {
+        let reserve;
+        return (null == spec ? void 0 : spec.reserveDefaultTooltip) ? (reserve = spec.reserveDefaultTooltip, 
+        delete spec.reserveDefaultTooltip) : reserve = props.reserveDefaultTooltip, Object.assign(Object.assign({}, spec), {
+            updateElement: (el, actualTooltip, params) => {
+                const {changePositionOnly: changePositionOnly} = params;
+                if (!changePositionOnly) {
+                    if (!reserve) {
+                        el.style.width = "auto", el.style.height = "auto", el.style.minHeight = "auto", 
+                        el.style.padding = "0px";
+                        for (let i = 0; i < el.children.length; i++) {
+                            const childNode = el.children[i];
+                            childNode.className !== constant_1.REACT_TOOLTIP_ClASS_NAME && "none" !== childNode.style.display && (childNode.style.display = "none");
+                        }
+                    }
+                    setTooltipNode((0, react_dom_1.createPortal)(react_1.default.createElement("div", {
+                        className: constant_1.REACT_TOOLTIP_ClASS_NAME
+                    }, render(el, actualTooltip, params)), el));
+                }
+            }
+        });
+    }
+    return spec;
+};
+
+exports.initCustomTooltip = initCustomTooltip;
+//# sourceMappingURL=util.js.map

package/cjs/components/tooltip/util.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tooltip/util.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,6CAA4C;AAE5C,yCAAsD;AACtD,yCAAyC;AAGlC,MAAM,iBAAiB,GAAG,CAC/B,cAAqE,EACrE,KAAqB,EACrB,IAAmB,EACnB,EAAE;IACF,IAAI,MAAM,GAAkB,SAAS,CAAC;IACtC,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,EAAE;QACvB,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAC5B,OAAO,IAAI,CAAC,aAAa,CAAC;KAC3B;SAAM,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,EAAE;QACzB,MAAM,GAAG,CAAC,cAAc,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,CACjD,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CACxC,IAAA,iBAAQ,EAAC,KAAK,CAAC;YACb,CAAC,CAAC,eAAK,CAAC,YAAY,CAAC,KAAkE,EAAE;gBACrF,cAAc;gBACd,aAAa;gBACb,MAAM;aACP,CAAC;YACJ,CAAC,CAAC,KAAK,CACV,CAAC;KACL;SAAM,IAAI,KAAK,CAAC,aAAa,EAAE;QAC9B,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC;KAC9B;IAED,IAAI,MAAM,EAAE;QACV,IAAI,OAAO,GAAY,SAAS,CAAC;QACjC,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,qBAAqB,EAAE;YAC/B,OAAO,GAAG,IAAI,CAAC,qBAAqB,CAAC;YACrC,OAAO,IAAI,CAAC,qBAAqB,CAAC;SACnC;aAAM;YACL,OAAO,GAAG,KAAK,CAAC,qBAAqB,CAAC;SACvC;QACD,OAAO,gCACF,IAAI,KACP,aAAa,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE;gBAC3C,MAAM,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAAC;gBACtC,IAAI,kBAAkB,EAAE;oBACtB,OAAO;iBACR;gBACD,IAAI,CAAC,OAAO,EAAE;oBACZ,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;oBACxB,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;oBACzB,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;oBAC5B,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;oBACzB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;wBAC3C,MAAM,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAgB,CAAC;wBAChD,IAAI,SAAS,CAAC,SAAS,KAAK,mCAAwB,IAAI,SAAS,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;4BAC1F,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;yBAClC;qBACF;iBACF;gBACD,cAAc,CACZ,IAAA,wBAAY,EAAC,uCAAK,SAAS,EAAE,mCAAwB,IAAG,MAAM,CAAC,EAAE,EAAE,aAAa,EAAE,MAAM,CAAC,CAAO,EAAE,EAAE,CAAC,CACtG,CAAC;YACJ,CAAC,GACc,CAAC;KACnB;IAED,OAAO,IAAoB,CAAC;AAC9B,CAAC,CAAC;AA3DW,QAAA,iBAAiB,qBA2D5B","file":"util.js","sourcesContent":["import React from 'react';\nimport type { BaseChartProps } from '../../charts/BaseChart';\nimport { TooltipProps, TooltipRender } from './interface';\nimport { isObject } from '@visactor/vutils';\nimport { ITooltipSpec } from '@visactor/vchart';\nimport { REACT_TOOLTIP_ClASS_NAME } from './constant';\nimport { createPortal } from 'react-dom';\n\n/** tooltip 自定义插槽 */\nexport const initCustomTooltip = (\n  setTooltipNode: React.Dispatch<React.SetStateAction<React.ReactNode>>,\n  props: BaseChartProps,\n  spec?: TooltipProps\n) => {\n  let render: TooltipRender = undefined;\n  if (spec?.tooltipRender) {\n    render = spec.tooltipRender;\n    delete spec.tooltipRender;\n  } else if (spec?.children) {\n    render = (tooltipElement, actualTooltip, params) =>\n      React.Children.map(spec.children, child =>\n        isObject(child)\n          ? React.cloneElement(child as React.ReactElement<any, React.JSXElementConstructor<any>>, {\n              tooltipElement,\n              actualTooltip,\n              params\n            })\n          : child\n      );\n  } else if (props.tooltipRender) {\n    render = props.tooltipRender;\n  }\n\n  if (render) {\n    let reserve: boolean = undefined;\n    if (spec?.reserveDefaultTooltip) {\n      reserve = spec.reserveDefaultTooltip;\n      delete spec.reserveDefaultTooltip;\n    } else {\n      reserve = props.reserveDefaultTooltip;\n    }\n    return {\n      ...spec,\n      updateElement: (el, actualTooltip, params) => {\n        const { changePositionOnly } = params;\n        if (changePositionOnly) {\n          return;\n        }\n        if (!reserve) {\n          el.style.width = 'auto';\n          el.style.height = 'auto';\n          el.style.minHeight = 'auto';\n          el.style.padding = '0px';\n          for (let i = 0; i < el.children.length; i++) {\n            const childNode = el.children[i] as HTMLElement;\n            if (childNode.className !== REACT_TOOLTIP_ClASS_NAME && childNode.style.display !== 'none') {\n              childNode.style.display = 'none';\n            }\n          }\n        }\n        setTooltipNode(\n          createPortal(<div className={REACT_TOOLTIP_ClASS_NAME}>{render(el, actualTooltip, params)}</div>, el)\n        );\n      }\n    } as ITooltipSpec;\n  }\n\n  return spec as ITooltipSpec;\n};\n"]}

package/cjs/containers/withContainer.d.ts

@@ -5,4 +5,4 @@ export interface ContainerProps {
     width?: number | string;
     height?: number | string;
 }
-export default function withContainer<Props extends ContainerProps, CompProps>(Comp: typeof React.Component<any, CompProps>, name?: string, getProps?: (props: any) => CompProps): React.ForwardRefExoticComponent<React.PropsWithoutRef<CompProps & Props> & React.RefAttributes<any>>;
+export default function withContainer<Props extends ContainerProps, CompProps>(Comp: any, name?: string, getProps?: (props: any) => CompProps): React.ForwardRefExoticComponent<React.PropsWithoutRef<CompProps & Props> & React.RefAttributes<any>>;

package/cjs/containers/withContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/containers/withContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiE;AASjE,SAAwB,aAAa,CACnC,IAA4C,EAC5C,IAAI,GAAG,gBAAgB,EACvB,QAAoC;IAEpC,MAAM,GAAG,GAAG,eAAK,CAAC,UAAU,CAAyB,CAAC,KAAwB,EAAE,GAAG,EAAE,EAAE;QACrF,MAAM,SAAS,GAAG,IAAA,cAAM,GAAE,CAAC;QAC3B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAiB,KAAK,EAAjB,OAAO,UAAK,KAAK,EAA/C,+BAAuC,CAAQ,CAAC;QAEtD,IAAA,uBAAe,EAAC,GAAG,EAAE;YACnB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,CACL,uCACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,SAAS,EACpB,KAAK,kBACH,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,MAAM,EAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,MAAM,IACzB,KAAK,KAGT,MAAM,CAAC,CAAC,CAAC,CACR,8BAAC,IAAI,kBAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,CAAC,OAAO,IAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAE,OAAqB,CAAC,EAAI,CAC9G,CAAC,CAAC,CAAC,CACF,6DAAK,CACN,CACG,CACP,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,GAAG,CAAC,WAAW,GAAG,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC;IACpC,OAAO,GAAG,CAAC;AACb,CAAC;AAnCD,gCAmCC","file":"withContainer.js","sourcesContent":["import React, { useRef, useState, useLayoutEffect } from 'react';\n\nexport interface ContainerProps {\n  style?: React.CSSProperties;\n  className?: string;\n  width?: number | string;\n  height?: number | string;\n}\n\nexport default function withContainer<Props extends ContainerProps, CompProps>(\n  Comp: typeof React.Component<any, CompProps>,\n  name = 'ChartContainer',\n  getProps?: (props: any) => CompProps\n) {\n  const Cls = React.forwardRef<any, CompProps & Props>((props: CompProps & Props, ref) => {\n    const container = useRef();\n    const [inited, setInited] = useState(false);\n    const { className, style, width, ...options } = props;\n\n    useLayoutEffect(() => {\n      setInited(true);\n    }, []);\n\n    return (\n      <div\n        ref={container}\n        className={className}\n        style={{\n          position: 'relative',\n          height: props.height || '100%',\n          width: props.width || '100%',\n          ...style\n        }}\n      >\n        {inited ? (\n          <Comp ref={ref} container={container.current} {...(getProps ? getProps(options) : (options as CompProps))} />\n        ) : (\n          <></>\n        )}\n      </div>\n    );\n  });\n  Cls.displayName = name || Comp.name;\n  return Cls;\n}\n"]}
+{"version":3,"sources":["../src/containers/withContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiE;AASjE,SAAwB,aAAa,CACnC,IAAS,EACT,IAAI,GAAG,gBAAgB,EACvB,QAAoC;IAEpC,MAAM,GAAG,GAAG,eAAK,CAAC,UAAU,CAAyB,CAAC,KAAwB,EAAE,GAAG,EAAE,EAAE;QACrF,MAAM,SAAS,GAAG,IAAA,cAAM,GAAE,CAAC;QAC3B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAiB,KAAK,EAAjB,OAAO,UAAK,KAAK,EAA/C,+BAAuC,CAAQ,CAAC;QAEtD,IAAA,uBAAe,EAAC,GAAG,EAAE;YACnB,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,CACL,uCACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,SAAS,EACpB,KAAK,kBACH,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,MAAM,EAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,MAAM,IACzB,KAAK,KAGT,MAAM,CAAC,CAAC,CAAC,CACR,8BAAC,IAAI,kBAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,CAAC,OAAO,IAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAE,OAAqB,CAAC,EAAI,CAC9G,CAAC,CAAC,CAAC,CACF,6DAAK,CACN,CACG,CACP,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,GAAG,CAAC,WAAW,GAAG,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC;IACpC,OAAO,GAAG,CAAC;AACb,CAAC;AAnCD,gCAmCC","file":"withContainer.js","sourcesContent":["import React, { useRef, useState, useLayoutEffect } from 'react';\n\nexport interface ContainerProps {\n  style?: React.CSSProperties;\n  className?: string;\n  width?: number | string;\n  height?: number | string;\n}\n\nexport default function withContainer<Props extends ContainerProps, CompProps>(\n  Comp: any,\n  name = 'ChartContainer',\n  getProps?: (props: any) => CompProps\n) {\n  const Cls = React.forwardRef<any, CompProps & Props>((props: CompProps & Props, ref) => {\n    const container = useRef();\n    const [inited, setInited] = useState(false);\n    const { className, style, width, ...options } = props;\n\n    useLayoutEffect(() => {\n      setInited(true);\n    }, []);\n\n    return (\n      <div\n        ref={container}\n        className={className}\n        style={{\n          position: 'relative',\n          height: props.height || '100%',\n          width: props.width || '100%',\n          ...style\n        }}\n      >\n        {inited ? (\n          <Comp ref={ref} container={container.current} {...(getProps ? getProps(options) : (options as CompProps))} />\n        ) : (\n          <></>\n        )}\n      </div>\n    );\n  });\n  Cls.displayName = name || Comp.name;\n  return Cls;\n}\n"]}

package/cjs/context/chart.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import type { IVChart } from '@visactor/vchart';
 export interface ChartContextType {
     chart?: IVChart;
-    specFromChildren: any;
     isChildrenUpdated?: boolean;
 }
 declare const ChartContext: React.Context<ChartContextType>;

package/cjs/context/chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/context/chart.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAS1B,MAAM,YAAY,GAAG,eAAK,CAAC,aAAa,CAAmB,IAAI,CAAC,CAAC;AACjE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,SAAgB,iBAAiB,CAAI,SAAiC;IACpE,MAAM,GAAG,GAAG,eAAK,CAAC,UAAU,CAAS,CAAC,KAAQ,EAAE,GAAG,EAAE,EAAE;QACrD,OAAO,CACL,8BAAC,YAAY,CAAC,QAAQ,QACnB,CAAC,GAAqB,EAAE,EAAE,CAAC,8BAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,IAAM,KAAK,EAAI,CAC1D,CACzB,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC;IACjC,OAAO,GAAG,CAAC;AACb,CAAC;AAVD,8CAUC;AAED,kBAAe,YAAY,CAAC","file":"chart.js","sourcesContent":["import React from 'react';\nimport type { IVChart } from '@visactor/vchart';\n\nexport interface ChartContextType {\n  chart?: IVChart;\n  specFromChildren: any;\n  isChildrenUpdated?: boolean;\n}\n\nconst ChartContext = React.createContext<ChartContextType>(null);\nChartContext.displayName = 'ChartContext';\n\nexport function withChartInstance<T>(Component: typeof React.Component) {\n  const Com = React.forwardRef<any, T>((props: T, ref) => {\n    return (\n      <ChartContext.Consumer>\n        {(ctx: ChartContextType) => <Component ref={ref} chart={ctx.chart} {...props} />}\n      </ChartContext.Consumer>\n    );\n  });\n  Com.displayName = Component.name;\n  return Com;\n}\n\nexport default ChartContext;\n"]}
+{"version":3,"sources":["../src/context/chart.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQ1B,MAAM,YAAY,GAAG,eAAK,CAAC,aAAa,CAAmB,IAAI,CAAC,CAAC;AACjE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAE1C,SAAgB,iBAAiB,CAAI,SAAiC;IACpE,MAAM,GAAG,GAAG,eAAK,CAAC,UAAU,CAAS,CAAC,KAAQ,EAAE,GAAG,EAAE,EAAE;QACrD,OAAO,CACL,8BAAC,YAAY,CAAC,QAAQ,QACnB,CAAC,GAAqB,EAAE,EAAE,CAAC,8BAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,IAAM,KAAK,EAAI,CAC1D,CACzB,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,IAAI,CAAC;IACjC,OAAO,GAAG,CAAC;AACb,CAAC;AAVD,8CAUC;AAED,kBAAe,YAAY,CAAC","file":"chart.js","sourcesContent":["import React from 'react';\nimport type { IVChart } from '@visactor/vchart';\n\nexport interface ChartContextType {\n  chart?: IVChart;\n  isChildrenUpdated?: boolean;\n}\n\nconst ChartContext = React.createContext<ChartContextType>(null);\nChartContext.displayName = 'ChartContext';\n\nexport function withChartInstance<T>(Component: typeof React.Component) {\n  const Com = React.forwardRef<any, T>((props: T, ref) => {\n    return (\n      <ChartContext.Consumer>\n        {(ctx: ChartContextType) => <Component ref={ref} chart={ctx.chart} {...props} />}\n      </ChartContext.Consumer>\n    );\n  });\n  Com.displayName = Component.name;\n  return Com;\n}\n\nexport default ChartContext;\n"]}

package/cjs/index.d.ts

@@ -3,5 +3,5 @@ export * from './series';
 export * from './components';
 export * from './VChart';
 export * from './VChartSimple';
-export declare const version = "1.10.0-alpha.0";
+export declare const version = "1.10.0-alpha.10";
 export type { IAreaChartSpec, IBarChartSpec, IBar3dChartSpec, IBoxPlotChartSpec, ICirclePackingChartSpec, ICommonChartSpec, IFunnelChartSpec, IFunnel3dChartSpec, IGaugeChartSpec, IHeatmapChartSpec, IHistogramChartSpec, IHistogram3dChartSpec, ILineChartSpec, IMapChartSpec, IPieChartSpec, IPie3dChartSpec, ICircularProgressChartSpec, ILinearProgressChartSpec, IRadarChartSpec, IRangeColumnChartSpec, IRangeColumn3dChartSpec, IRangeAreaChartSpec, IRoseChartSpec, IScatterChartSpec, ISankeyChartSpec, ISequenceChartSpec, ISunburstChartSpec, ITreemapChartSpec, IWaterfallChartSpec, ICorrelationChartSpec, ILiquidChartSpec, IWordCloud3dChartSpec, IWordCloudChartSpec, IPolarChartSpec, ICartesianChartSpec, ITheme, IInitOption, ISpec, IVChart } from '@visactor/vchart';

package/cjs/index.js

@@ -19,5 +19,5 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.version = void 0, __exportStar(require("./charts"), exports), __exportStar(require("./series"), exports), 
 __exportStar(require("./components"), exports), __exportStar(require("./VChart"), exports), 
-__exportStar(require("./VChartSimple"), exports), exports.version = "1.10.0-alpha.0";
+__exportStar(require("./VChartSimple"), exports), exports.version = "1.10.0-alpha.10";
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,2CAAyB;AACzB,+CAA6B;AAC7B,2CAAyB;AACzB,iDAA+B;AAGlB,QAAA,OAAO,GAAG,gBAAgB,CAAC","file":"index.js","sourcesContent":["export * from './charts';\nexport * from './series';\nexport * from './components';\nexport * from './VChart';\nexport * from './VChartSimple';\n\n// export the version, since @1.8.3\nexport const version = \"1.10.0-alpha.0\";\n\nexport type {\n  IAreaChartSpec,\n  IBarChartSpec,\n  IBar3dChartSpec,\n  IBoxPlotChartSpec,\n  ICirclePackingChartSpec,\n  ICommonChartSpec,\n  IFunnelChartSpec,\n  IFunnel3dChartSpec,\n  IGaugeChartSpec,\n  IHeatmapChartSpec,\n  IHistogramChartSpec,\n  IHistogram3dChartSpec,\n  ILineChartSpec,\n  IMapChartSpec,\n  IPieChartSpec,\n  IPie3dChartSpec,\n  ICircularProgressChartSpec,\n  ILinearProgressChartSpec,\n  IRadarChartSpec,\n  IRangeColumnChartSpec,\n  IRangeColumn3dChartSpec,\n  IRangeAreaChartSpec,\n  IRoseChartSpec,\n  IScatterChartSpec,\n  ISankeyChartSpec,\n  ISequenceChartSpec,\n  ISunburstChartSpec,\n  ITreemapChartSpec,\n  IWaterfallChartSpec,\n  ICorrelationChartSpec,\n  ILiquidChartSpec,\n  IWordCloud3dChartSpec,\n  IWordCloudChartSpec,\n  IPolarChartSpec,\n  ICartesianChartSpec,\n  ITheme,\n  IInitOption,\n  ISpec,\n  IVChart\n} from '@visactor/vchart';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,2CAAyB;AACzB,+CAA6B;AAC7B,2CAAyB;AACzB,iDAA+B;AAGlB,QAAA,OAAO,GAAG,iBAAiB,CAAC","file":"index.js","sourcesContent":["export * from './charts';\nexport * from './series';\nexport * from './components';\nexport * from './VChart';\nexport * from './VChartSimple';\n\n// export the version, since @1.8.3\nexport const version = \"1.10.0-alpha.10\";\n\nexport type {\n  IAreaChartSpec,\n  IBarChartSpec,\n  IBar3dChartSpec,\n  IBoxPlotChartSpec,\n  ICirclePackingChartSpec,\n  ICommonChartSpec,\n  IFunnelChartSpec,\n  IFunnel3dChartSpec,\n  IGaugeChartSpec,\n  IHeatmapChartSpec,\n  IHistogramChartSpec,\n  IHistogram3dChartSpec,\n  ILineChartSpec,\n  IMapChartSpec,\n  IPieChartSpec,\n  IPie3dChartSpec,\n  ICircularProgressChartSpec,\n  ILinearProgressChartSpec,\n  IRadarChartSpec,\n  IRangeColumnChartSpec,\n  IRangeColumn3dChartSpec,\n  IRangeAreaChartSpec,\n  IRoseChartSpec,\n  IScatterChartSpec,\n  ISankeyChartSpec,\n  ISequenceChartSpec,\n  ISunburstChartSpec,\n  ITreemapChartSpec,\n  IWaterfallChartSpec,\n  ICorrelationChartSpec,\n  ILiquidChartSpec,\n  IWordCloud3dChartSpec,\n  IWordCloudChartSpec,\n  IPolarChartSpec,\n  ICartesianChartSpec,\n  ITheme,\n  IInitOption,\n  ISpec,\n  IVChart\n} from '@visactor/vchart';\n"]}

package/cjs/series/Area.d.ts

@@ -3,4 +3,5 @@ import type { IAreaSeriesSpec } from '@visactor/vchart';
 export type AreaProps = BaseSeriesProps & Omit<IAreaSeriesSpec, 'type'>;
 export declare const Area: import("react").FC<BaseSeriesProps & Omit<IAreaSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/Bar.d.ts

@@ -3,4 +3,5 @@ import type { IBarSeriesSpec } from '@visactor/vchart';
 export type BarProps = BaseSeriesProps & Omit<IBarSeriesSpec, 'type'>;
 export declare const Bar: import("react").FC<BaseSeriesProps & Omit<IBarSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/BaseSeries.d.ts

@@ -5,4 +5,5 @@ export interface BaseSeriesProps extends EventsProps {
 }
 export declare const createSeries: <T extends BaseSeriesProps>(componentName: string, markNames: string[], type?: string) => React.FC<T & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/BaseSeries.js

@@ -10,67 +10,41 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.createSeries = void 0;
 
-const react_1 = __importDefault(require("react")), vutils_1 = require("@visactor/vutils"), chart_1 = __importDefault(require("../context/chart")), eventsUtils_1 = require("../eventsUtils"), util_1 = require("../util"), createSeries = (componentName, markNames, type) => {
-    const notSpecKeys = eventsUtils_1.COMMON_EVENTK_KEYS.concat([ "id", "updateId" ]), Comp = props => {
-        const context = react_1.default.useContext(chart_1.default), id = react_1.default.useRef((0, 
-        vutils_1.isNil)(props.id) ? (0, util_1.uid)(null != type ? type : "series") : props.id), seriesSpec = react_1.default.useRef(), bindedEvents = react_1.default.useRef({}), updateId = react_1.default.useRef(props.updateId), handleEvent = e => {
-            const markIds = markNames.map((markName => `${id.current}-${markName}`));
+const react_1 = __importDefault(require("react")), vutils_1 = require("@visactor/vutils"), chart_1 = __importDefault(require("../context/chart")), eventsUtils_1 = require("../eventsUtils"), createSeries = (componentName, markNames, type) => {
+    const notSpecKeys = eventsUtils_1.COMMON_EVENTK_KEYS.concat([ "id", "updateId", "componentId" ]), Comp = props => {
+        var _a;
+        const context = react_1.default.useContext(chart_1.default), id = null !== (_a = props.id) && void 0 !== _a ? _a : props.componentId, bindedEvents = react_1.default.useRef({}), handleEvent = e => {
+            const markIds = markNames.map((markName => `${id}-${markName}`));
             (null == e ? void 0 : e.mark) && markIds.includes(e.mark.getUserId()) && props[eventsUtils_1.VCHART_TO_REACT_EVENTS[e.event.type]](e);
         }, addMarkEvent = events => {
-            events && context.chart && (bindedEvents && Object.keys(bindedEvents).forEach((eventKey => {
-                events[eventKey] || context.chart.off(eventsUtils_1.REACT_TO_VCHART_EVENTS[eventKey], handleEvent), 
-                bindedEvents.current[eventKey] = !1;
-            })), Object.keys(events).forEach((eventKey => {
-                (null == bindedEvents ? void 0 : bindedEvents[eventKey]) || (context.chart.on(eventsUtils_1.REACT_TO_VCHART_EVENTS[eventKey], handleEvent), 
-                bindedEvents || (bindedEvents.current = {}), bindedEvents.current[eventKey] = !0);
+            events && context.chart && (bindedEvents.current && Object.keys(bindedEvents.current).forEach((eventKey => {
+                context.chart.off(eventsUtils_1.REACT_TO_VCHART_EVENTS[eventKey], bindedEvents.current[eventKey]), 
+                bindedEvents.current[eventKey] = null;
+            })), events && Object.keys(events).forEach((eventKey => {
+                var _a;
+                (null === (_a = bindedEvents.current) || void 0 === _a ? void 0 : _a[eventKey]) || (context.chart.on(eventsUtils_1.REACT_TO_VCHART_EVENTS[eventKey], handleEvent), 
+                bindedEvents.current || (bindedEvents.current = {}), bindedEvents.current[eventKey] = handleEvent);
             })));
-        }, addMarkId = spec => {
-            markNames.forEach((markName => {
-                const defaultMarkId = `${id.current}-${markName}`;
-                (0, vutils_1.isNil)(spec[markName]) ? spec[markName] = {
-                    id: defaultMarkId
-                } : (0, vutils_1.isNil)(spec[markName].id) && (spec[markName].id = defaultMarkId);
-            }));
-        }, insertToContext = props => {
-            if (context.specFromChildren) {
-                context.specFromChildren.series || (context.specFromChildren.series = []);
-                const spec = (0, vutils_1.isNil)(type) ? Object.assign(Object.assign({}, props), {
-                    id: id.current
-                }) : Object.assign(Object.assign({}, props), {
-                    id: id.current,
-                    type: type
-                });
-                addMarkId(spec), context.specFromChildren.series.push(spec), context.isChildrenUpdated = !0;
-            }
         };
-        if (addMarkEvent((0, eventsUtils_1.findEventProps)(props)), props.updateId !== updateId.current) updateId.current = props.updateId; else {
-            const newSeriesSpec = (0, vutils_1.pickWithout)(props, notSpecKeys);
-            addMarkId(newSeriesSpec), (0, vutils_1.isEqual)(newSeriesSpec, seriesSpec.current) || (seriesSpec.current = newSeriesSpec, 
-            (props => {
-                if (!context.specFromChildren) return;
-                if (!context.specFromChildren.series) return void insertToContext(props);
-                const series = context.specFromChildren.series, index = series.findIndex((entry => entry.id === id.current));
-                index >= 0 ? (series[index] = (0, vutils_1.isNil)(type) ? Object.assign(Object.assign({}, props), {
-                    id: id.current
-                }) : Object.assign(Object.assign({}, props), {
-                    id: id.current,
-                    type: type
-                }), addMarkId(series[index])) : insertToContext(props), context.isChildrenUpdated = !0;
-            })(newSeriesSpec));
-        }
-        return react_1.default.useEffect((() => () => {
-            (() => {
-                var _a;
-                if (!context.specFromChildren) return;
-                const series = null !== (_a = context.specFromChildren.series) && void 0 !== _a ? _a : [], index = series.findIndex((entry => entry.id === id.current));
-                if (index >= 0) {
-                    const newSeries = series.slice(0, index - 1).concat(series.slice(index + 1));
-                    context.specFromChildren.series = newSeries, context.isChildrenUpdated = !0;
-                }
-            })(), addMarkEvent({});
+        return addMarkEvent((0, eventsUtils_1.findEventProps)(props)), react_1.default.useEffect((() => () => {
+            addMarkEvent({}), bindedEvents.current = {};
         }), []), null;
     };
-    return Comp.displayName = componentName, Comp;
+    return Comp.displayName = componentName, Comp.parseSpec = compProps => {
+        var _a;
+        const newSeriesSpec = (0, vutils_1.pickWithout)(compProps, notSpecKeys);
+        var spec, seriesId;
+        return spec = newSeriesSpec, seriesId = null !== (_a = compProps.id) && void 0 !== _a ? _a : compProps.componentId, 
+        markNames.forEach((markName => {
+            const defaultMarkId = `${seriesId}-${markName}`;
+            (0, vutils_1.isNil)(spec[markName]) ? spec[markName] = {
+                id: defaultMarkId
+            } : (0, vutils_1.isNil)(spec[markName].id) && (spec[markName].id = defaultMarkId);
+        })), (0, vutils_1.isNil)(type) || (newSeriesSpec.type = type), {
+            spec: newSeriesSpec,
+            specName: "series"
+        };
+    }, Comp;
 };
 
 exports.createSeries = createSeries;

package/cjs/series/BaseSeries.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/series/BaseSeries.tsx"],"names":[],"mappings":"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","file":"BaseSeries.js","sourcesContent":["import React from 'react';\nimport { isNil, isEqual, pickWithout } from '@visactor/vutils';\nimport RootChartContext from '../context/chart';\nimport {\n  REACT_TO_VCHART_EVENTS,\n  EventsProps,\n  findEventProps,\n  COMMON_EVENTK_KEYS,\n  VCHART_TO_REACT_EVENTS\n} from '../eventsUtils';\nimport { uid } from '../util';\n\nexport interface BaseSeriesProps extends EventsProps {\n  id?: string | number;\n}\n\nexport const createSeries = <T extends BaseSeriesProps>(componentName: string, markNames: string[], type?: string) => {\n  const ignoreKeys = ['id', 'updateId'];\n  const notSpecKeys = COMMON_EVENTK_KEYS.concat(ignoreKeys);\n\n  const Comp: React.FC<T & { updateId?: number }> = props => {\n    const context = React.useContext(RootChartContext);\n\n    const id = React.useRef<string | number>(isNil(props.id) ? uid(type ?? 'series') : props.id);\n\n    const seriesSpec = React.useRef<Partial<T>>();\n    const bindedEvents = React.useRef<Record<string, boolean>>({});\n    const updateId = React.useRef<number>(props.updateId);\n\n    const handleEvent = (e: any) => {\n      const markIds = markNames.map(markName => `${id.current}-${markName}`);\n      if (e?.mark && markIds.includes(e.mark.getUserId())) {\n        props[VCHART_TO_REACT_EVENTS[e.event.type]](e);\n      }\n    };\n\n    const addMarkEvent = (events: EventsProps) => {\n      if (!events || !context.chart) {\n        return;\n      }\n\n      if (bindedEvents) {\n        Object.keys(bindedEvents).forEach(eventKey => {\n          if (!events[eventKey]) {\n            context.chart.off(REACT_TO_VCHART_EVENTS[eventKey], handleEvent);\n          }\n          bindedEvents.current[eventKey] = false;\n        });\n      }\n\n      Object.keys(events).forEach(eventKey => {\n        if (!bindedEvents?.[eventKey]) {\n          context.chart.on(REACT_TO_VCHART_EVENTS[eventKey], handleEvent);\n\n          if (!bindedEvents) {\n            bindedEvents.current = {};\n          }\n          bindedEvents.current[eventKey] = true;\n        }\n      });\n    };\n\n    const removeMarkEvent = () => {\n      addMarkEvent({});\n    };\n\n    const addMarkId = (spec: any) => {\n      markNames.forEach(markName => {\n        const defaultMarkId = `${id.current}-${markName}`;\n\n        if (isNil(spec[markName])) {\n          spec[markName] = { id: defaultMarkId };\n        } else if (isNil(spec[markName].id)) {\n          spec[markName].id = defaultMarkId;\n        }\n      });\n    };\n\n    const insertToContext = (props: Partial<T>) => {\n      if (context.specFromChildren) {\n        if (!context.specFromChildren.series) {\n          context.specFromChildren.series = [];\n        }\n\n        const spec = isNil(type) ? { ...props, id: id.current } : { ...props, id: id.current, type };\n\n        addMarkId(spec);\n        context.specFromChildren.series.push(spec);\n        context.isChildrenUpdated = true;\n      }\n    };\n\n    const updateToContext = (props: Partial<T>) => {\n      if (!context.specFromChildren) {\n        return;\n      }\n\n      if (!context.specFromChildren.series) {\n        insertToContext(props);\n        return;\n      }\n\n      const series = context.specFromChildren.series;\n      const index = series.findIndex((entry: any) => entry.id === id.current);\n\n      if (index >= 0) {\n        series[index] = isNil(type) ? { ...props, id: id.current } : { ...props, id: id.current, type };\n        addMarkId(series[index]);\n      } else {\n        insertToContext(props);\n      }\n      context.isChildrenUpdated = true;\n    };\n\n    const deleteToContext = () => {\n      if (!context.specFromChildren) {\n        return;\n      }\n      const series = context.specFromChildren.series ?? [];\n      const index = series.findIndex((entry: any) => entry.id === id.current);\n\n      if (index >= 0) {\n        const newSeries = series.slice(0, index - 1).concat(series.slice(index + 1));\n        context.specFromChildren.series = newSeries;\n        context.isChildrenUpdated = true;\n      }\n    };\n\n    addMarkEvent(findEventProps(props));\n    if (props.updateId !== updateId.current) {\n      // chart render\n      updateId.current = props.updateId;\n    } else {\n      const newSeriesSpec = pickWithout<T>(props, notSpecKeys);\n\n      addMarkId(newSeriesSpec);\n      if (!isEqual(newSeriesSpec, seriesSpec.current)) {\n        seriesSpec.current = newSeriesSpec;\n        updateToContext(newSeriesSpec);\n      }\n    }\n\n    React.useEffect(() => {\n      return () => {\n        deleteToContext();\n        removeMarkEvent();\n      };\n    }, []);\n\n    return null;\n  };\n\n  Comp.displayName = componentName;\n  return Comp;\n};\n"]}
+{"version":3,"sources":["../src/series/BaseSeries.tsx"],"names":[],"mappings":"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","file":"BaseSeries.js","sourcesContent":["import React from 'react';\nimport { isNil, pickWithout } from '@visactor/vutils';\nimport RootChartContext from '../context/chart';\nimport {\n  REACT_TO_VCHART_EVENTS,\n  EventsProps,\n  findEventProps,\n  COMMON_EVENTK_KEYS,\n  VCHART_TO_REACT_EVENTS\n} from '../eventsUtils';\nexport interface BaseSeriesProps extends EventsProps {\n  id?: string | number;\n}\n\nexport const createSeries = <T extends BaseSeriesProps>(componentName: string, markNames: string[], type?: string) => {\n  const ignoreKeys = ['id', 'updateId', 'componentId'];\n  const notSpecKeys = COMMON_EVENTK_KEYS.concat(ignoreKeys);\n\n  const addMarkId = (spec: any, seriesId: string | number) => {\n    markNames.forEach(markName => {\n      const defaultMarkId = `${seriesId}-${markName}`;\n\n      if (isNil(spec[markName])) {\n        spec[markName] = { id: defaultMarkId };\n      } else if (isNil(spec[markName].id)) {\n        spec[markName].id = defaultMarkId;\n      }\n    });\n  };\n\n  const Comp: React.FC<T & { updateId?: number; componentId?: string }> = props => {\n    const context = React.useContext(RootChartContext);\n\n    const id = props.id ?? props.componentId;\n    const bindedEvents = React.useRef<Record<string, (e: any) => void>>({});\n\n    const handleEvent = (e: any) => {\n      const markIds = markNames.map(markName => `${id}-${markName}`);\n      if (e?.mark && markIds.includes(e.mark.getUserId())) {\n        props[VCHART_TO_REACT_EVENTS[e.event.type]](e);\n      }\n    };\n\n    const addMarkEvent = (events: EventsProps) => {\n      if (!events || !context.chart) {\n        return;\n      }\n\n      if (bindedEvents.current) {\n        Object.keys(bindedEvents.current).forEach(eventKey => {\n          context.chart.off(REACT_TO_VCHART_EVENTS[eventKey], bindedEvents.current[eventKey]);\n          bindedEvents.current[eventKey] = null;\n        });\n      }\n\n      events &&\n        Object.keys(events).forEach(eventKey => {\n          if (!bindedEvents.current?.[eventKey]) {\n            context.chart.on(REACT_TO_VCHART_EVENTS[eventKey], handleEvent);\n\n            if (!bindedEvents.current) {\n              bindedEvents.current = {};\n            }\n            bindedEvents.current[eventKey] = handleEvent;\n          }\n        });\n    };\n\n    const removeMarkEvent = () => {\n      addMarkEvent({});\n    };\n\n    addMarkEvent(findEventProps(props));\n\n    React.useEffect(() => {\n      return () => {\n        removeMarkEvent();\n        bindedEvents.current = {};\n      };\n    }, []);\n\n    return null;\n  };\n\n  Comp.displayName = componentName;\n  (Comp as any).parseSpec = (compProps: T & { updateId?: number; componentId?: string }) => {\n    const newSeriesSpec = pickWithout<T>(compProps, notSpecKeys);\n\n    addMarkId(newSeriesSpec, compProps.id ?? compProps.componentId);\n\n    if (!isNil(type)) {\n      (newSeriesSpec as any).type = type;\n    }\n\n    return {\n      spec: newSeriesSpec,\n      specName: 'series'\n    };\n  };\n  return Comp;\n};\n"]}

package/cjs/series/BoxPlot.d.ts

@@ -3,4 +3,5 @@ import type { IBoxPlotSeriesSpec } from '@visactor/vchart';
 export type BoxPlotProps = BaseSeriesProps & Omit<IBoxPlotSeriesSpec, 'type'>;
 export declare const BoxPlot: import("react").FC<BaseSeriesProps & Omit<IBoxPlotSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/CircularProgress.d.ts

@@ -3,4 +3,5 @@ import type { ICircularProgressSeriesSpec } from '@visactor/vchart';
 export type CircularProgressProps = BaseSeriesProps & Omit<ICircularProgressSeriesSpec, 'type'>;
 export declare const CircularProgress: import("react").FC<BaseSeriesProps & Omit<ICircularProgressSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/Dot.d.ts

@@ -3,4 +3,5 @@ import type { IDotSeriesSpec } from '@visactor/vchart';
 export type DotProps = BaseSeriesProps & Omit<IDotSeriesSpec, 'type'>;
 export declare const Dot: import("react").FC<BaseSeriesProps & Omit<IDotSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/Funnel.d.ts

@@ -3,4 +3,5 @@ import type { IFunnelSeriesSpec } from '@visactor/vchart';
 export type FunnelProps = BaseSeriesProps & Omit<IFunnelSeriesSpec, 'type'>;
 export declare const Funnel: import("react").FC<BaseSeriesProps & Omit<IFunnelSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/Line.d.ts

@@ -3,4 +3,5 @@ import type { ILineSeriesSpec } from '@visactor/vchart';
 export type LineProps = BaseSeriesProps & Omit<ILineSeriesSpec, 'type'>;
 export declare const Line: import("react").FC<BaseSeriesProps & Omit<ILineSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/LinearProgress.d.ts

@@ -3,4 +3,5 @@ import type { ILinearProgressSeriesSpec } from '@visactor/vchart';
 export type LinearProgressProps = BaseSeriesProps & Omit<ILinearProgressSeriesSpec, 'type'>;
 export declare const LinearProgress: import("react").FC<BaseSeriesProps & Omit<ILinearProgressSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/LinearProgress.js

@@ -6,4 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 
 const BaseSeries_1 = require("./BaseSeries");
 
-exports.LinearProgress = (0, BaseSeries_1.createSeries)("LinearProgress", [ "linearProgress" ], "linearProgress");
+exports.LinearProgress = (0, BaseSeries_1.createSeries)("LinearProgress", [ "linearProgress" ], "linearProgress");
+//# sourceMappingURL=LinearProgress.js.map

package/cjs/series/Link.d.ts

@@ -3,4 +3,5 @@ import type { ILinkSeriesSpec } from '@visactor/vchart';
 export type LinkProps = BaseSeriesProps & Omit<ILinkSeriesSpec, 'type'>;
 export declare const Link: import("react").FC<BaseSeriesProps & Omit<ILinkSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/Link.js

@@ -6,5 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 
 const BaseSeries_1 = require("./BaseSeries");
 
-exports.Link = (0, BaseSeries_1.createSeries)("Link", [ "link" ], "link");
-//# sourceMappingURL=Link.js.map
+exports.Link = (0, BaseSeries_1.createSeries)("Link", [ "link" ], "link");

package/cjs/series/Map.d.ts

@@ -3,4 +3,5 @@ import type { IMapSeriesSpec } from '@visactor/vchart';
 export type MapProps = BaseSeriesProps & Omit<IMapSeriesSpec, 'type'>;
 export declare const Map: import("react").FC<BaseSeriesProps & Omit<IMapSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/Pie.d.ts

@@ -3,4 +3,5 @@ import type { IPieSeriesSpec } from '@visactor/vchart';
 export type PieProps = BaseSeriesProps & Omit<IPieSeriesSpec, 'type'>;
 export declare const Pie: import("react").FC<BaseSeriesProps & Omit<IPieSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/Radar.d.ts

@@ -3,4 +3,5 @@ import type { IRadarSeriesSpec } from '@visactor/vchart';
 export type RadarProps = BaseSeriesProps & Omit<IRadarSeriesSpec, 'type'>;
 export declare const Radar: import("react").FC<BaseSeriesProps & Omit<IRadarSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/RangeColumn.d.ts

@@ -3,4 +3,5 @@ import type { IRangeColumnSeriesSpec } from '@visactor/vchart';
 export type RangeColumnProps = BaseSeriesProps & Omit<IRangeColumnSeriesSpec, 'type'>;
 export declare const RangeColumn: import("react").FC<BaseSeriesProps & Omit<IRangeColumnSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/Rose.d.ts

@@ -3,4 +3,5 @@ import type { IRoseSeriesSpec } from '@visactor/vchart';
 export type RoseProps = BaseSeriesProps & Omit<IRoseSeriesSpec, 'type'>;
 export declare const Rose: import("react").FC<BaseSeriesProps & Omit<IRoseSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/Scatter.d.ts

@@ -3,4 +3,5 @@ import type { IScatterSeriesSpec } from '@visactor/vchart';
 export type ScatterProps = BaseSeriesProps & Omit<IScatterSeriesSpec, 'type'>;
 export declare const Scatter: import("react").FC<BaseSeriesProps & Omit<IScatterSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/Series.d.ts

@@ -3,4 +3,5 @@ import type { IBarSeriesSpec, IAreaSeriesSpec, IBoxPlotSeriesSpec, ICircularProg
 export type SeriesProps = (IBarSeriesSpec | IAreaSeriesSpec | IBoxPlotSeriesSpec | ICircularProgressSeriesSpec | IDotSeriesSpec | IFunnelSeriesSpec | ILineSeriesSpec | ILinearProgressSeriesSpec | ILinkSeriesSpec | IMapSeriesSpec | IPieSeriesSpec | IRadarSeriesSpec | IRangeColumnSeriesSpec | IRoseSeriesSpec | IScatterSeriesSpec | IWordCloudSeriesSpec) & BaseSeriesProps;
 export declare const Series: import("react").FC<SeriesProps & {
     updateId?: number;
+    componentId?: string;
 }>;

package/cjs/series/Series.js

@@ -7,4 +7,4 @@ Object.defineProperty(exports, "__esModule", {
 const BaseSeries_1 = require("./BaseSeries");
 
 exports.Series = (0, BaseSeries_1.createSeries)("Series", [ "bar", "line", "area" ]);
-//# sourceMappingURL=Series.js.map
+//# sourceMappingURL=Series.js.map

package/cjs/series/WordCloud.d.ts

@@ -3,4 +3,5 @@ import type { IWordCloudSeriesSpec } from '@visactor/vchart';
 export type WordCloudProps = BaseSeriesProps & Omit<IWordCloudSeriesSpec, 'type'>;
 export declare const WordCloud: import("react").FC<BaseSeriesProps & Omit<IWordCloudSeriesSpec, "type"> & {
     updateId?: number;
+    componentId?: string;
 }>;

package/esm/VChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/VChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAItB,MAAM,CAAC,MAAM,MAAM,GAAG,WAAW,CAAc,QAAQ,EAAE;IACvD,kBAAkB,EAAE,UAAU;CAC/B,CAAC,CAAC","file":"VChart.js","sourcesContent":["import { BaseChartProps, createChart } from './charts/BaseChart';\nimport type { IVChartConstructor } from '@visactor/vchart';\nimport VChartCore from '@visactor/vchart';\nexport { VChartCore };\n\nexport type VChartProps = Omit<BaseChartProps, 'container' | 'data' | 'width' | 'height' | 'type'>;\n\nexport const VChart = createChart<VChartProps>('VChart', {\n  vchartConstrouctor: VChartCore\n});\n"]}
+{"version":3,"sources":["../src/VChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAItB,MAAM,CAAC,MAAM,MAAM,GAAG,WAAW,CAAc,QAAQ,EAAE;IACvD,kBAAkB,EAAE,UAAU;CAC/B,CAAC,CAAC","file":"VChart.js","sourcesContent":["import { BaseChartProps, createChart } from './charts/BaseChart';\nimport VChartCore from '@visactor/vchart';\nexport { VChartCore };\n\nexport type VChartProps = Omit<BaseChartProps, 'container' | 'data' | 'width' | 'height' | 'type'>;\n\nexport const VChart = createChart<VChartProps>('VChart', {\n  vchartConstrouctor: VChartCore\n});\n"]}

package/esm/charts/BaseChart.d.ts

@@ -2,8 +2,9 @@ import type { IVChart, IData, IInitOption, ISpec, IVChartConstructor } from '@vi
 import React from 'react';
 import { ContainerProps } from '../containers/withContainer';
 import { EventsProps, LegendEventProps, ScrollBarEventProps, BrushEventProps, DataZoomEventProps, PlayerEventProps, DimensionEventProps, HierarchyEventProps, ChartLifeCycleEventProps } from '../eventsUtils';
+import { IReactTooltipProps } from '../components/tooltip/interface';
 export type ChartOptions = Omit<IInitOption, 'dom'>;
-export interface BaseChartProps extends EventsProps, LegendEventProps, ScrollBarEventProps, BrushEventProps, DataZoomEventProps, PlayerEventProps, DimensionEventProps, HierarchyEventProps, ChartLifeCycleEventProps {
+export interface BaseChartProps extends EventsProps, LegendEventProps, ScrollBarEventProps, BrushEventProps, DataZoomEventProps, PlayerEventProps, DimensionEventProps, HierarchyEventProps, ChartLifeCycleEventProps, IReactTooltipProps {
     vchartConstrouctor?: IVChartConstructor;
     type?: string;
     container?: HTMLDivElement;

package/esm/charts/BaseChart.js

@@ -4,7 +4,7 @@ import withContainer from "../containers/withContainer";
 
 import RootChartContext from "../context/chart";
 
-import { isEqual, pickWithout } from "@visactor/vutils";
+import { isEqual, isNil, pickWithout } from "@visactor/vutils";
 
 import ViewContext from "../context/view";
 
@@ -14,17 +14,30 @@ import { REACT_PRIVATE_PROPS } from "../constants";
 
 import { bindEventsToChart, CHART_EVENTS_KEYS, CHART_EVENTS } from "../eventsUtils";
 
-const notSpecKeys = [ ...REACT_PRIVATE_PROPS, ...CHART_EVENTS_KEYS, "skipFunctionDiff", "onError", "onReady", "spec", "container", "options" ], BaseChart = React.forwardRef(((props, ref) => {
-    const [updateId, setUpdateId] = useState(0), chartContext = useRef({
-        specFromChildren: {}
-    });
+import { initCustomTooltip } from "../components/tooltip/util";
+
+const notSpecKeys = [ ...REACT_PRIVATE_PROPS, ...CHART_EVENTS_KEYS, "vchartConstrouctor", "useSyncRender", "skipFunctionDiff", "onError", "onReady", "spec", "container", "options" ], getComponentId = (child, index) => `${child && child.type && (child.type.displayName || child.type.name)}-${index}`, parseSpecFromChildren = props => {
+    const specFromChildren = {};
+    return toArray(props.children).map(((child, index) => {
+        const parseSpec = child && child.type && child.type.parseSpec;
+        if (parseSpec && child.props) {
+            const specResult = parseSpec(isNil(child.props.componentId) ? Object.assign(Object.assign({}, child.props), {
+                componentId: getComponentId(child, index)
+            }) : child.props);
+            specResult.isSingle ? specFromChildren[specResult.specName] = specResult.spec : (specFromChildren[specResult.specName] || (specFromChildren[specResult.specName] = []), 
+            specFromChildren[specResult.specName].push(specResult.spec));
+        }
+    })), specFromChildren;
+}, BaseChart = React.forwardRef(((props, ref) => {
+    const [updateId, setUpdateId] = useState(0), chartContext = useRef({});
     useImperativeHandle(ref, (() => {
         var _a;
         return null === (_a = chartContext.current) || void 0 === _a ? void 0 : _a.chart;
     }));
-    const hasSpec = !!props.spec, [view, setView] = useState(null), isUnmount = useRef(!1), prevSpec = useRef(pickWithout(props, notSpecKeys)), eventsBinded = React.useRef(null), skipFunctionDiff = !!props.skipFunctionDiff, parseSpec = props => {
-        var _a;
-        return hasSpec && props.spec ? props.spec : Object.assign(Object.assign({}, prevSpec.current), null === (_a = chartContext.current) || void 0 === _a ? void 0 : _a.specFromChildren);
+    const hasSpec = !!props.spec, [view, setView] = useState(null), isUnmount = useRef(!1), prevSpec = useRef(pickWithout(props, notSpecKeys)), specFromChildren = useRef(null), eventsBinded = React.useRef(null), skipFunctionDiff = !!props.skipFunctionDiff, [tooltipNode, setTooltipNode] = useState(null), parseSpec = props => {
+        let spec;
+        return spec = hasSpec && props.spec ? props.spec : Object.assign(Object.assign({}, prevSpec.current), specFromChildren.current), 
+        spec.tooltip = initCustomTooltip(setTooltipNode, props, spec.tooltip), spec;
     }, handleChartRender = () => {
         if (!isUnmount.current) {
             if (!chartContext.current || !chartContext.current.chart) return;
@@ -36,7 +49,9 @@ const notSpecKeys = [ ...REACT_PRIVATE_PROPS, ...CHART_EVENTS_KEYS, "skipFunctio
     };
     return useEffect((() => {
         var _a;
-        if (!(null === (_a = chartContext.current) || void 0 === _a ? void 0 : _a.chart)) return (props => {
+        const newSpecFromChildren = hasSpec ? null : parseSpecFromChildren(props);
+        if (!(null === (_a = chartContext.current) || void 0 === _a ? void 0 : _a.chart)) return hasSpec || (specFromChildren.current = newSpecFromChildren), 
+        (props => {
             const cs = new props.vchartConstrouctor(parseSpec(props), Object.assign(Object.assign({}, props.options), {
                 onError: props.onError,
                 autoFit: !0,
@@ -44,13 +59,10 @@ const notSpecKeys = [ ...REACT_PRIVATE_PROPS, ...CHART_EVENTS_KEYS, "skipFunctio
             }));
             chartContext.current = Object.assign(Object.assign({}, chartContext.current), {
                 chart: cs
-            });
+            }), isUnmount.current = !1;
         })(props), chartContext.current.chart && (chartContext.current.chart.renderSync({
             reuse: !1
-        }), handleChartRender()), bindEventsToChart(chartContext.current.chart, props, null, CHART_EVENTS), 
-        chartContext.current = Object.assign(Object.assign({}, chartContext.current), {
-            isChildrenUpdated: !1
-        }), void (eventsBinded.current = props);
+        }), handleChartRender()), void (eventsBinded.current = props);
         if (hasSpec) return void (isEqual(eventsBinded.current.spec, props.spec, {
             skipFunction: skipFunctionDiff
         }) || (eventsBinded.current = props, chartContext.current.chart.updateSpecSync(parseSpec(props), void 0, {
@@ -60,27 +72,28 @@ const notSpecKeys = [ ...REACT_PRIVATE_PROPS, ...CHART_EVENTS_KEYS, "skipFunctio
         const newSpec = pickWithout(props, notSpecKeys);
         isEqual(newSpec, prevSpec.current, {
             skipFunction: skipFunctionDiff
-        }) && !chartContext.current.isChildrenUpdated || (prevSpec.current = newSpec, chartContext.current.chart.updateSpecSync(parseSpec(props), void 0, {
+        }) && isEqual(newSpecFromChildren, specFromChildren.current) || (prevSpec.current = newSpec, 
+        specFromChildren.current = newSpecFromChildren, chartContext.current.chart.updateSpecSync(parseSpec(props), void 0, {
             morph: !1,
             enableExitAnimation: !1
-        }), handleChartRender()), chartContext.current = Object.assign(Object.assign({}, chartContext.current), {
-            isChildrenUpdated: !1
-        });
+        }), handleChartRender());
     }), [ props ]), useEffect((() => () => {
-        chartContext && (chartContext.current.chart && chartContext.current.chart.release(), 
-        chartContext.current = null), isUnmount.current = !0;
+        chartContext && chartContext.current && chartContext.current.chart && (chartContext.current.chart.release(), 
+        chartContext.current.chart = null), eventsBinded.current = null, isUnmount.current = !0;
     }), []), React.createElement(RootChartContext.Provider, {
         value: chartContext.current
     }, React.createElement(ViewContext.Provider, {
         value: view
     }, toArray(props.children).map(((child, index) => {
-        var _a, _b, _c;
+        if ("string" == typeof child) return;
+        const childId = getComponentId(child, index);
         return React.createElement(React.Fragment, {
-            key: null !== (_c = null !== (_b = null === (_a = null == child ? void 0 : child.props) || void 0 === _a ? void 0 : _a.id) && void 0 !== _b ? _b : null == child ? void 0 : child.id) && void 0 !== _c ? _c : `child-${index}`
+            key: childId
         }, React.cloneElement(child, {
-            updateId: updateId
+            updateId: updateId,
+            componentId: childId
         }));
-    }))));
+    })), tooltipNode));
 }));
 
 export const createChart = (componentName, defaultProps, callback) => {