@visactor/react-vchart 0.0.1-alpha.2 → 0.10.0-alpha.2

package/cjs/charts/index.js

@@ -1,150 +1,28 @@
 "use strict";
 
+var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k);
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
+        enumerable: !0,
+        get: function() {
+            return m[k];
+        }
+    }), Object.defineProperty(o, k2, desc);
+} : function(o, m, k, k2) {
+    void 0 === k2 && (k2 = k), o[k2] = m[k];
+}), __exportStar = this && this.__exportStar || function(m, exports) {
+    for (var p in m) "default" === p || Object.prototype.hasOwnProperty.call(exports, p) || __createBinding(exports, m, p);
+};
+
 Object.defineProperty(exports, "__esModule", {
     value: !0
-}), exports.CommonChart = exports.RangeColumnChart = exports.LinearProgressChart = exports.CircularProgressChart = exports.BoxPlotChart = exports.FunnelChart = exports.WordCloudChart = exports.HistogramChart = exports.MapChart = exports.RadarChart = exports.RoseChart = exports.PieChart = exports.ScatterChart = exports.LineChart = exports.BarChart = exports.AreaChart = void 0;
-
-var AreaChart_1 = require("./AreaChart");
-
-Object.defineProperty(exports, "AreaChart", {
-    enumerable: !0,
-    get: function() {
-        return AreaChart_1.AreaChart;
-    }
-});
-
-var BarChart_1 = require("./BarChart");
-
-Object.defineProperty(exports, "BarChart", {
-    enumerable: !0,
-    get: function() {
-        return BarChart_1.BarChart;
-    }
-});
-
-var LineChart_1 = require("./LineChart");
-
-Object.defineProperty(exports, "LineChart", {
-    enumerable: !0,
-    get: function() {
-        return LineChart_1.LineChart;
-    }
-});
-
-var ScatterChart_1 = require("./ScatterChart");
-
-Object.defineProperty(exports, "ScatterChart", {
-    enumerable: !0,
-    get: function() {
-        return ScatterChart_1.ScatterChart;
-    }
-});
-
-var PieChart_1 = require("./PieChart");
-
-Object.defineProperty(exports, "PieChart", {
-    enumerable: !0,
-    get: function() {
-        return PieChart_1.PieChart;
-    }
-});
-
-var RoseChart_1 = require("./RoseChart");
-
-Object.defineProperty(exports, "RoseChart", {
-    enumerable: !0,
-    get: function() {
-        return RoseChart_1.RoseChart;
-    }
-});
-
-var RadarChart_1 = require("./RadarChart");
-
-Object.defineProperty(exports, "RadarChart", {
-    enumerable: !0,
-    get: function() {
-        return RadarChart_1.RadarChart;
-    }
-});
-
-var MapChart_1 = require("./MapChart");
-
-Object.defineProperty(exports, "MapChart", {
-    enumerable: !0,
-    get: function() {
-        return MapChart_1.MapChart;
-    }
-});
-
-var HistogramChart_1 = require("./HistogramChart");
-
-Object.defineProperty(exports, "HistogramChart", {
-    enumerable: !0,
-    get: function() {
-        return HistogramChart_1.HistogramChart;
-    }
-});
-
-var WordCloudChart_1 = require("./WordCloudChart");
-
-Object.defineProperty(exports, "WordCloudChart", {
-    enumerable: !0,
-    get: function() {
-        return WordCloudChart_1.WordCloudChart;
-    }
-});
-
-var FunnelChart_1 = require("./FunnelChart");
-
-Object.defineProperty(exports, "FunnelChart", {
-    enumerable: !0,
-    get: function() {
-        return FunnelChart_1.FunnelChart;
-    }
-});
-
-var BoxPlotChart_1 = require("./BoxPlotChart");
-
-Object.defineProperty(exports, "BoxPlotChart", {
-    enumerable: !0,
-    get: function() {
-        return BoxPlotChart_1.BoxPlotChart;
-    }
-});
-
-var CircularProgressChart_1 = require("./CircularProgressChart");
-
-Object.defineProperty(exports, "CircularProgressChart", {
-    enumerable: !0,
-    get: function() {
-        return CircularProgressChart_1.CircularProgressChart;
-    }
-});
-
-var LinearProgressChart_1 = require("./LinearProgressChart");
-
-Object.defineProperty(exports, "LinearProgressChart", {
-    enumerable: !0,
-    get: function() {
-        return LinearProgressChart_1.LinearProgressChart;
-    }
-});
-
-var RangeColumnChart_1 = require("./RangeColumnChart");
-
-Object.defineProperty(exports, "RangeColumnChart", {
-    enumerable: !0,
-    get: function() {
-        return RangeColumnChart_1.RangeColumnChart;
-    }
-});
-
-var CommonChart_1 = require("./CommonChart");
-
-Object.defineProperty(exports, "CommonChart", {
-    enumerable: !0,
-    get: function() {
-        return CommonChart_1.CommonChart;
-    }
-});
-//# sourceMappingURL=index.js.map
+}), __exportStar(require("./AreaChart"), exports), __exportStar(require("./BarChart"), exports), 
+__exportStar(require("./LineChart"), exports), __exportStar(require("./ScatterChart"), exports), 
+__exportStar(require("./PieChart"), exports), __exportStar(require("./RoseChart"), exports), 
+__exportStar(require("./RadarChart"), exports), __exportStar(require("./MapChart"), exports), 
+__exportStar(require("./HistogramChart"), exports), __exportStar(require("./WordCloudChart"), exports), 
+__exportStar(require("./FunnelChart"), exports), __exportStar(require("./BoxPlotChart"), exports), 
+__exportStar(require("./CircularProgressChart"), exports), __exportStar(require("./LinearProgressChart"), exports), 
+__exportStar(require("./RangeColumnChart"), exports), __exportStar(require("./CommonChart"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/charts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["charts/index.ts"],"names":[],"mappings":";;;AAAA,yCAAuC;AAA9B,sGAAA,SAAS,OAAA;AAClB,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA;AACjB,yCAAuC;AAA9B,sGAAA,SAAS,OAAA;AAClB,+CAA6C;AAApC,4GAAA,YAAY,OAAA;AAErB,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA;AACjB,yCAAuC;AAA9B,sGAAA,SAAS,OAAA;AAElB,2CAAyC;AAAhC,wGAAA,UAAU,OAAA;AAEnB,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA;AACjB,mDAAiD;AAAxC,gHAAA,cAAc,OAAA;AACvB,mDAAiD;AAAxC,gHAAA,cAAc,OAAA;AACvB,6CAA2C;AAAlC,0GAAA,WAAW,OAAA;AACpB,+CAA6C;AAApC,4GAAA,YAAY,OAAA;AAErB,iEAA+D;AAAtD,8HAAA,qBAAqB,OAAA;AAC9B,6DAA2D;AAAlD,0HAAA,mBAAmB,OAAA;AAC5B,uDAAqD;AAA5C,oHAAA,gBAAgB,OAAA;AAEzB,6CAA2C;AAAlC,0GAAA,WAAW,OAAA","file":"index.js","sourcesContent":["export { AreaChart } from './AreaChart'\nexport { BarChart } from './BarChart'\nexport { LineChart } from './LineChart'\nexport { ScatterChart } from './ScatterChart'\n\nexport { PieChart } from './PieChart'\nexport { RoseChart } from './RoseChart'\n\nexport { RadarChart } from './RadarChart'\n\nexport { MapChart } from './MapChart'\nexport { HistogramChart } from './HistogramChart'\nexport { WordCloudChart } from './WordCloudChart'\nexport { FunnelChart } from './FunnelChart'\nexport { BoxPlotChart } from './BoxPlotChart'\n\nexport { CircularProgressChart } from './CircularProgressChart'\nexport { LinearProgressChart } from './LinearProgressChart'\nexport { RangeColumnChart } from './RangeColumnChart'\n\nexport { CommonChart } from './CommonChart'"]}
+{"version":3,"sources":["../src/charts/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,6CAA2B;AAC3B,8CAA4B;AAC5B,iDAA+B;AAE/B,6CAA2B;AAC3B,8CAA4B;AAE5B,+CAA6B;AAE7B,6CAA2B;AAC3B,mDAAiC;AACjC,mDAAiC;AACjC,gDAA8B;AAC9B,iDAA+B;AAE/B,0DAAwC;AACxC,wDAAsC;AACtC,qDAAmC;AAEnC,gDAA8B","file":"index.js","sourcesContent":["export * from './AreaChart';\nexport * from './BarChart';\nexport * from './LineChart';\nexport * from './ScatterChart';\n\nexport * from './PieChart';\nexport * from './RoseChart';\n\nexport * from './RadarChart';\n\nexport * from './MapChart';\nexport * from './HistogramChart';\nexport * from './WordCloudChart';\nexport * from './FunnelChart';\nexport * from './BoxPlotChart';\n\nexport * from './CircularProgressChart';\nexport * from './LinearProgressChart';\nexport * from './RangeColumnChart';\n\nexport * from './CommonChart';\n\nexport type { ChartOptions } from './BaseChart';\nexport type { IData, IChartSpec } from '@visactor/vchart';\n"]}

package/cjs/components/Axis.d.ts

@@ -1,5 +1,4 @@
-export interface AxisProps {
-}
-export declare const Axis: import("react").FC<import("./BaseComponent").BaseComponentProps & {
-    updateId?: number;
-}>;
+import { BaseComponentProps } from './BaseComponent';
+import type { ICartesianAxisSpec, IPolarAxisSpec } from '@visactor/vchart';
+export type AxisProps = (ICartesianAxisSpec | IPolarAxisSpec) & BaseComponentProps;
+export declare const Axis: import("react").FC<AxisProps>;

package/cjs/components/Axis.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Axis.tsx"],"names":[],"mappings":";;;AAAA,mDAAkD;AAMrC,QAAA,IAAI,GAAG,IAAA,+BAAe,EAAC,MAAM,EAAE,MAAM,CAAC,CAAC","file":"Axis.js","sourcesContent":["import { createComponent } from \"./BaseComponent\";\n\nexport interface AxisProps {\n  //\n}\n\nexport const Axis = createComponent(\"Axis\", \"axes\");\n"]}
+{"version":3,"sources":["../src/components/Axis.tsx"],"names":[],"mappings":";;;AAAA,mDAAsE;AAKzD,QAAA,IAAI,GAAG,IAAA,+BAAe,EAAY,MAAM,EAAE,MAAM,CAAC,CAAC","file":"Axis.js","sourcesContent":["import { BaseComponentProps, createComponent } from './BaseComponent';\nimport type { ICartesianAxisSpec, IPolarAxisSpec } from '@visactor/vchart';\n\nexport type AxisProps = (ICartesianAxisSpec | IPolarAxisSpec) & BaseComponentProps;\n\nexport const Axis = createComponent<AxisProps>('Axis', 'axes');\n"]}

package/cjs/components/BaseComponent.d.ts

@@ -1,9 +1,10 @@
-import React from "react";
+import React from 'react';
 export interface BaseComponentProps {
     id?: string | number;
 }
 type ComponentProps = BaseComponentProps & {
     updateId?: number;
+    componentId?: number;
 };
 export declare const createComponent: <T extends ComponentProps>(componentName: string, specName: string, supportedEvents?: Record<string, string> | null, isSingle?: boolean) => React.FC<T>;
 export {};

package/cjs/components/BaseComponent.js

@@ -33,44 +33,23 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.createComponent = void 0;
 
-const react_1 = __importStar(require("react")), vutils_1 = require("@visactor/vutils"), chart_1 = __importDefault(require("../context/chart")), eventsUtils_1 = require("../eventsUtils"), util_1 = require("../util"), createComponent = (componentName, specName, supportedEvents, isSingle) => {
-    const ignoreKeys = [ "id", "updateId" ], notSpecKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys, Comp = props => {
-        const context = (0, react_1.useContext)(chart_1.default), id = react_1.default.useRef((0, 
-        vutils_1.isNil)(props.id) ? (0, util_1.uid)(specName) : props.id), eventsBinded = react_1.default.useRef(null), updateId = react_1.default.useRef(props.updateId), componentSpec = (0, 
-        vutils_1.pickWithout)(props, notSpecKeys);
-        return !!supportedEvents && (0, eventsUtils_1.bindEventsToChart)(context.chart, props, eventsBinded.current, supportedEvents) && (eventsBinded.current = props), 
-        props.updateId !== updateId.current ? updateId.current = props.updateId : updateToContext(context, id.current, specName, isSingle, componentSpec), 
-        (0, react_1.useEffect)((() => () => {
-            supportedEvents && (0, eventsUtils_1.bindEventsToChart)(context.chart, null, eventsBinded.current, supportedEvents), 
-            deleteToContext(context, id.current, specName, isSingle);
+const react_1 = __importStar(require("react")), vutils_1 = require("@visactor/vutils"), chart_1 = __importDefault(require("../context/chart")), eventsUtils_1 = require("../eventsUtils"), createComponent = (componentName, specName, supportedEvents, isSingle) => {
+    const ignoreKeys = [ "id", "updateId", "componentId" ], notSpecKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys, Comp = props => {
+        const context = (0, react_1.useContext)(chart_1.default), eventsBinded = react_1.default.useRef(null), updateId = react_1.default.useRef(props.updateId);
+        if (props.updateId !== updateId.current) {
+            updateId.current = props.updateId;
+            !!supportedEvents && (0, eventsUtils_1.bindEventsToChart)(context.chart, props, eventsBinded.current, supportedEvents) && (eventsBinded.current = props);
+        }
+        return (0, react_1.useEffect)((() => () => {
+            supportedEvents && (0, eventsUtils_1.bindEventsToChart)(context.chart, null, eventsBinded.current, supportedEvents);
         }), []), null;
     };
-    return Comp.displayName = componentName, Comp;
+    return Comp.displayName = componentName, Comp.parseSpec = props => ({
+        spec: (0, vutils_1.pickWithout)(props, notSpecKeys),
+        specName: specName,
+        isSingle: isSingle
+    }), Comp;
 };
 
 exports.createComponent = createComponent;
-
-const updateToContext = (context, id, specName, isSingle, props) => {
-    if (context.specFromChildren) {
-        if (isSingle) context.specFromChildren[specName] = Object.assign({}, props); else {
-            context.specFromChildren[specName] || (context.specFromChildren[specName] = []);
-            const comps = context.specFromChildren[specName], index = comps.findIndex((entry => entry.id === id));
-            index >= 0 ? comps[index] = Object.assign({
-                id: id
-            }, props) : context.specFromChildren[specName].push(Object.assign({
-                id: id
-            }, props));
-        }
-        context.isChildrenUpdated = !0;
-    }
-}, deleteToContext = (context, id, specName, isSingle) => {
-    var _a;
-    if (context.specFromChildren) if (isSingle) context.specFromChildren[specName] = null; else {
-        const comps = null !== (_a = context.specFromChildren[specName]) && void 0 !== _a ? _a : [], index = comps.findIndex((entry => entry.id === id));
-        if (index >= 0) {
-            const newComps = comps.slice(0, index - 1).concat(comps.slice(index + 1));
-            context.specFromChildren[specName] = newComps, context.isChildrenUpdated = !0;
-        }
-    }
-};
 //# sourceMappingURL=BaseComponent.js.map

package/cjs/components/BaseComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/BaseComponent.tsx"],"names":[],"mappings":"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","file":"BaseComponent.js","sourcesContent":["import React, { useContext, useEffect } from \"react\";\nimport { isNil, pickWithout } from \"@visactor/vutils\";\n\nimport RootChartContext, { ChartContextType } from \"../context/chart\";\nimport { bindEventsToChart } from \"../eventsUtils\";\nimport { uid } from \"../util\";\n\nexport interface BaseComponentProps {\n  id?: string | number;\n}\n\ntype ComponentProps = BaseComponentProps & { updateId?: number };\n\nexport const createComponent = <T extends ComponentProps>(\n  componentName: string,\n  specName: string,\n  supportedEvents?: Record<string, string> | null,\n  isSingle?: boolean\n) => {\n  const ignoreKeys = [\"id\", \"updateId\"];\n  const notSpecKeys = supportedEvents\n    ? Object.keys(supportedEvents).concat(ignoreKeys)\n    : ignoreKeys;\n\n  const Comp: React.FC<T> = (props: T) => {\n    const context = useContext(RootChartContext);\n    const id = React.useRef<string | number>(\n      isNil(props.id) ? uid(specName) : props.id\n    );\n\n    const eventsBinded = React.useRef<T>(null);\n    const updateId = React.useRef<number>(props.updateId);\n\n    const componentSpec: Partial<T> = pickWithout<T>(props, notSpecKeys);\n    const hasPrevEventsBinded =\n      !!supportedEvents &&\n      bindEventsToChart(\n        context.chart,\n        props,\n        eventsBinded.current,\n        supportedEvents\n      );\n    if (hasPrevEventsBinded) {\n      eventsBinded.current = props;\n    }\n\n    if (props.updateId !== updateId.current) {\n      updateId.current = props.updateId;\n    } else {\n      updateToContext(context, id.current, specName, isSingle, componentSpec);\n    }\n\n    useEffect(() => {\n      return () => {\n        !!supportedEvents &&\n          bindEventsToChart(\n            context.chart,\n            null,\n            eventsBinded.current,\n            supportedEvents\n          );\n        deleteToContext(context, id.current, specName, isSingle);\n      };\n    }, []);\n\n    return null;\n  };\n\n  Comp.displayName = componentName;\n  return Comp;\n};\n\nconst updateToContext = (\n  context: ChartContextType,\n  id: string | number,\n  specName: string,\n  isSingle: boolean,\n  props: Partial<ComponentProps>\n) => {\n  if (!context.specFromChildren) {\n    return;\n  }\n\n  if (isSingle) {\n    context.specFromChildren[specName] = { ...props };\n  } else {\n    if (!context.specFromChildren[specName]) {\n      context.specFromChildren[specName] = [];\n    }\n\n    const comps = context.specFromChildren[specName];\n    const index = comps.findIndex((entry: any) => entry.id === id);\n\n    if (index >= 0) {\n      comps[index] = {\n        id,\n        ...props,\n      };\n    } else {\n      context.specFromChildren[specName].push({\n        id,\n        ...props,\n      });\n    }\n  }\n  context.isChildrenUpdated = true;\n};\n\nconst deleteToContext = (\n  context: ChartContextType,\n  id: string | number,\n  specName: string,\n  isSingle: boolean\n) => {\n  if (!context.specFromChildren) {\n    return;\n  }\n\n  if (isSingle) {\n    context.specFromChildren[specName] = null;\n  } else {\n    const comps = context.specFromChildren[specName] ?? [];\n    const index = comps.findIndex((entry: any) => entry.id === id);\n\n    if (index >= 0) {\n      const newComps = comps.slice(0, index - 1).concat(comps.slice(index + 1));\n\n      context.specFromChildren[specName] = newComps;\n      context.isChildrenUpdated = true;\n    }\n  }\n};\n"]}
+{"version":3,"sources":["../src/components/BaseComponent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,6CAA+C;AAE/C,6DAAgD;AAChD,gDAAmD;AAQ5C,MAAM,eAAe,GAAG,CAC7B,aAAqB,EACrB,QAAgB,EAChB,eAA+C,EAC/C,QAAkB,EAClB,EAAE;IACF,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;IACrD,MAAM,WAAW,GAAG,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;IAEnG,MAAM,IAAI,GAAgB,CAAC,KAAQ,EAAE,EAAE;QACrC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,eAAgB,CAAC,CAAC;QAC7C,MAAM,YAAY,GAAG,eAAK,CAAC,MAAM,CAAI,IAAI,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,eAAK,CAAC,MAAM,CAAS,KAAK,CAAC,QAAQ,CAAC,CAAC;QACtD,IAAI,KAAK,CAAC,QAAQ,KAAK,QAAQ,CAAC,OAAO,EAAE;YAEvC,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC;YAGlC,MAAM,mBAAmB,GAAG,eAAe;gBACzC,CAAC,CAAC,IAAA,+BAAiB,EAAC,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC;gBAChF,CAAC,CAAC,KAAK,CAAC;YACV,IAAI,mBAAmB,EAAE;gBACvB,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;aAC9B;SACF;QAED,IAAA,iBAAS,EAAC,GAAG,EAAE;YACb,OAAO,GAAG,EAAE;gBACV,IAAI,eAAe,EAAE;oBACnB,IAAA,+BAAiB,EAAC,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;iBAC/E;YACH,CAAC,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC;IAChC,IAAY,CAAC,SAAS,GAAG,CAAC,KAAsD,EAAE,EAAE;QACnF,MAAM,gBAAgB,GAAe,IAAA,oBAAW,EAAI,KAAK,EAAE,WAAW,CAAC,CAAC;QAExE,OAAO;YACL,IAAI,EAAE,gBAAgB;YACtB,QAAQ;YACR,QAAQ;SACT,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAjDW,QAAA,eAAe,mBAiD1B","file":"BaseComponent.js","sourcesContent":["import React, { useContext, useEffect } from 'react';\nimport { pickWithout } from '@visactor/vutils';\n\nimport RootChartContext from '../context/chart';\nimport { bindEventsToChart } from '../eventsUtils';\n\nexport interface BaseComponentProps {\n  id?: string | number;\n}\n\ntype ComponentProps = BaseComponentProps & { updateId?: number; componentId?: number };\n\nexport const createComponent = <T extends ComponentProps>(\n  componentName: string,\n  specName: string,\n  supportedEvents?: Record<string, string> | null,\n  isSingle?: boolean\n) => {\n  const ignoreKeys = ['id', 'updateId', 'componentId'];\n  const notSpecKeys = supportedEvents ? Object.keys(supportedEvents).concat(ignoreKeys) : ignoreKeys;\n\n  const Comp: React.FC<T> = (props: T) => {\n    const context = useContext(RootChartContext);\n    const eventsBinded = React.useRef<T>(null);\n    const updateId = React.useRef<number>(props.updateId);\n    if (props.updateId !== updateId.current) {\n      // update triggered by chart when chart is rendered\n      updateId.current = props.updateId;\n\n      // rebind events after chart render\n      const hasPrevEventsBinded = supportedEvents\n        ? bindEventsToChart(context.chart, props, eventsBinded.current, supportedEvents)\n        : false;\n      if (hasPrevEventsBinded) {\n        eventsBinded.current = props;\n      }\n    }\n\n    useEffect(() => {\n      return () => {\n        if (supportedEvents) {\n          bindEventsToChart(context.chart, null, eventsBinded.current, supportedEvents);\n        }\n      };\n    }, []);\n\n    return null;\n  };\n\n  Comp.displayName = componentName;\n  (Comp as any).parseSpec = (props: T & { updateId?: number; componentId?: string }) => {\n    const newComponentSpec: Partial<T> = pickWithout<T>(props, notSpecKeys);\n\n    return {\n      spec: newComponentSpec,\n      specName,\n      isSingle\n    };\n  };\n\n  return Comp;\n};\n"]}

package/cjs/components/Brush.d.ts

@@ -0,0 +1,5 @@
+import { BrushEventProps } from '../eventsUtils';
+import { BaseComponentProps } from './BaseComponent';
+import type { IBrushSpec } from '@visactor/vchart';
+export type BrushProps = IBrushSpec & BaseComponentProps & BrushEventProps;
+export declare const Brush: import("react").FC<BrushProps>;

package/cjs/components/Brush.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Brush = void 0;
+
+const eventsUtils_1 = require("../eventsUtils"), BaseComponent_1 = require("./BaseComponent");
+
+exports.Brush = (0, BaseComponent_1.createComponent)("Brush", "brush", eventsUtils_1.BRUSH_CUSTOMIZED_EVENTS, !0);
+//# sourceMappingURL=Brush.js.map

package/cjs/components/Brush.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Brush.tsx"],"names":[],"mappings":";;;AAAA,gDAA0E;AAC1E,mDAAsE;AAKzD,QAAA,KAAK,GAAG,IAAA,+BAAe,EAAa,OAAO,EAAE,OAAO,EAAE,qCAAuB,EAAE,IAAI,CAAC,CAAC","file":"Brush.js","sourcesContent":["import { BRUSH_CUSTOMIZED_EVENTS, BrushEventProps } from '../eventsUtils';\nimport { BaseComponentProps, createComponent } from './BaseComponent';\nimport type { IBrushSpec } from '@visactor/vchart';\n\nexport type BrushProps = IBrushSpec & BaseComponentProps & BrushEventProps;\n\nexport const Brush = createComponent<BrushProps>('Brush', 'brush', BRUSH_CUSTOMIZED_EVENTS, true);\n"]}

package/cjs/components/Crosshair.d.ts

@@ -0,0 +1,4 @@
+import { BaseComponentProps } from './BaseComponent';
+import type { ICartesianCrosshairSpec, IPolarCrosshairSpec } from '@visactor/vchart';
+export type CrosshairProps = (ICartesianCrosshairSpec | IPolarCrosshairSpec) & BaseComponentProps;
+export declare const Crosshair: import("react").FC<CrosshairProps>;

package/cjs/components/Crosshair.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Crosshair = void 0;
+
+const BaseComponent_1 = require("./BaseComponent");
+
+exports.Crosshair = (0, BaseComponent_1.createComponent)("Crosshair", "crosshair");
+//# sourceMappingURL=Crosshair.js.map

package/cjs/components/Crosshair.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Crosshair.tsx"],"names":[],"mappings":";;;AAAA,mDAAsE;AAKzD,QAAA,SAAS,GAAG,IAAA,+BAAe,EAAiB,WAAW,EAAE,WAAW,CAAC,CAAC","file":"Crosshair.js","sourcesContent":["import { BaseComponentProps, createComponent } from './BaseComponent';\nimport type { ICartesianCrosshairSpec, IPolarCrosshairSpec } from '@visactor/vchart';\n\nexport type CrosshairProps = (ICartesianCrosshairSpec | IPolarCrosshairSpec) & BaseComponentProps;\n\nexport const Crosshair = createComponent<CrosshairProps>('Crosshair', 'crosshair');\n"]}

package/cjs/components/DataZoom.d.ts

@@ -0,0 +1,5 @@
+import { DataZoomEventProps } from '../eventsUtils';
+import { BaseComponentProps } from './BaseComponent';
+import type { IDataZoomSpec } from '@visactor/vchart';
+export type DataZoomProps = IDataZoomSpec & BaseComponentProps & DataZoomEventProps;
+export declare const DataZoom: import("react").FC<DataZoomProps>;

package/cjs/components/DataZoom.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.DataZoom = void 0;
+
+const eventsUtils_1 = require("../eventsUtils"), BaseComponent_1 = require("./BaseComponent");
+
+exports.DataZoom = (0, BaseComponent_1.createComponent)("DataZoom", "dataZoom", eventsUtils_1.DATAZOOM_CUSTOMIZED_EVENTS);
+//# sourceMappingURL=DataZoom.js.map

package/cjs/components/DataZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DataZoom.tsx"],"names":[],"mappings":";;;AAAA,gDAAgF;AAChF,mDAAsE;AAIzD,QAAA,QAAQ,GAAG,IAAA,+BAAe,EAAgB,UAAU,EAAE,UAAU,EAAE,wCAA0B,CAAC,CAAC","file":"DataZoom.js","sourcesContent":["import { DATAZOOM_CUSTOMIZED_EVENTS, DataZoomEventProps } from '../eventsUtils';\nimport { BaseComponentProps, createComponent } from './BaseComponent';\nimport type { IDataZoomSpec } from '@visactor/vchart';\n\nexport type DataZoomProps = IDataZoomSpec & BaseComponentProps & DataZoomEventProps;\nexport const DataZoom = createComponent<DataZoomProps>('DataZoom', 'dataZoom', DATAZOOM_CUSTOMIZED_EVENTS);\n"]}

package/cjs/components/Indicator.d.ts

@@ -0,0 +1,4 @@
+import { BaseComponentProps } from './BaseComponent';
+import type { IIndicatorSpec } from '@visactor/vchart';
+export type IndicatorProps = IIndicatorSpec & BaseComponentProps;
+export declare const Indicator: import("react").FC<IndicatorProps>;

package/cjs/components/Indicator.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Indicator = void 0;
+
+const BaseComponent_1 = require("./BaseComponent");
+
+exports.Indicator = (0, BaseComponent_1.createComponent)("Indicator", "indicator", null, !0);
+//# sourceMappingURL=Indicator.js.map

package/cjs/components/Indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Indicator.tsx"],"names":[],"mappings":";;;AAAA,mDAAsE;AAKzD,QAAA,SAAS,GAAG,IAAA,+BAAe,EAAiB,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC","file":"Indicator.js","sourcesContent":["import { BaseComponentProps, createComponent } from './BaseComponent';\nimport type { IIndicatorSpec } from '@visactor/vchart';\n\nexport type IndicatorProps = IIndicatorSpec & BaseComponentProps;\n\nexport const Indicator = createComponent<IndicatorProps>('Indicator', 'indicator', null, true);\n"]}

package/cjs/components/Legend.d.ts

@@ -1,9 +1,5 @@
+import type { IDiscreteLegendSpec } from '@visactor/vchart';
+import { LegendEventProps } from '../eventsUtils';
 import { BaseComponentProps } from './BaseComponent';
-export interface LegendProps extends BaseComponentProps {
-    onLegendItemHover: (e: any) => void;
-    onLegendItemUnHover: (e: any) => void;
-    onLegendItemClick: (e: any) => void;
-}
-export declare const Legend: import("react").FC<BaseComponentProps & {
-    updateId?: number;
-}>;
+export type LegendProps = BaseComponentProps & IDiscreteLegendSpec & LegendEventProps;
+export declare const Legend: import("react").FC<LegendProps>;

package/cjs/components/Legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Legend.tsx"],"names":[],"mappings":";;;AACA,gDAA0D;AAC1D,mDAAsE;AAQzD,QAAA,MAAM,GAAG,IAAA,+BAAe,EAAC,QAAQ,EAAE,SAAS,EAAE,sCAAwB,CAAC,CAAC","file":"Legend.js","sourcesContent":["// import type { IDiscreteLegendSpec } from '@visactor/vchart'\nimport { LEGEND_CUSTOMIZED_EVENTS } from '../eventsUtils';\nimport { BaseComponentProps, createComponent } from './BaseComponent';\n\nexport interface LegendProps extends BaseComponentProps {\n  onLegendItemHover: (e: any) => void;\n  onLegendItemUnHover: (e: any) => void;\n  onLegendItemClick: (e: any) => void;\n}\n\nexport const Legend = createComponent('Legend', 'legends', LEGEND_CUSTOMIZED_EVENTS);\n"]}
+{"version":3,"sources":["../src/components/Legend.tsx"],"names":[],"mappings":";;;AACA,gDAA4E;AAC5E,mDAAsE;AAIzD,QAAA,MAAM,GAAG,IAAA,+BAAe,EAAc,QAAQ,EAAE,SAAS,EAAE,sCAAwB,CAAC,CAAC","file":"Legend.js","sourcesContent":["import type { IDiscreteLegendSpec } from '@visactor/vchart';\nimport { LEGEND_CUSTOMIZED_EVENTS, LegendEventProps } from '../eventsUtils';\nimport { BaseComponentProps, createComponent } from './BaseComponent';\n\nexport type LegendProps = BaseComponentProps & IDiscreteLegendSpec & LegendEventProps;\n\nexport const Legend = createComponent<LegendProps>('Legend', 'legends', LEGEND_CUSTOMIZED_EVENTS);\n"]}

package/cjs/components/Mark.d.ts

@@ -1,14 +1,4 @@
-import React from 'react';
-import type { MarkSpec } from '@visactor/vgrammar';
-export interface MarkProps extends Omit<MarkSpec, 'name' | 'id'> {
-    id?: string | number;
-    glyphType?: string;
-}
-export interface IMarkElement extends React.ReactElement<Props, React.JSXElementConstructor<Props>> {
-    id: string | number;
-}
-type Props = MarkProps & {
-    updateId: number;
-};
-export declare const Mark: React.FC<Props>;
-export {};
+import type { ICustomMarkSpec, EnableMarkType } from '@visactor/vchart';
+import { BaseComponentProps } from './BaseComponent';
+export type MarkProps = ICustomMarkSpec<EnableMarkType> & BaseComponentProps;
+export declare const Mark: import("react").FC<MarkProps>;

package/cjs/components/Mark.js

@@ -1,68 +1,10 @@
 "use strict";
 
-var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
-    void 0 === k2 && (k2 = k);
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
-        enumerable: !0,
-        get: function() {
-            return m[k];
-        }
-    }), Object.defineProperty(o, k2, desc);
-} : function(o, m, k, k2) {
-    void 0 === k2 && (k2 = k), o[k2] = m[k];
-}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
-    Object.defineProperty(o, "default", {
-        enumerable: !0,
-        value: v
-    });
-} : function(o, v) {
-    o.default = v;
-}), __importStar = this && this.__importStar || function(mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
-    return __setModuleDefault(result, mod), result;
-}, __rest = this && this.__rest || function(s, e) {
-    var t = {};
-    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
-    if (null != s && "function" == typeof Object.getOwnPropertySymbols) {
-        var i = 0;
-        for (p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
-    }
-    return t;
-}, __importDefault = this && this.__importDefault || function(mod) {
-    return mod && mod.__esModule ? mod : {
-        default: mod
-    };
-};
-
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.Mark = void 0;
 
-const react_1 = __importStar(require("react")), vutils_1 = require("@visactor/vutils"), view_1 = __importDefault(require("../context/view")), util_1 = require("../util"), Mark = props => {
-    const context = (0, react_1.useContext)(view_1.default), id = react_1.default.useRef((0, 
-    vutils_1.isNil)(props.id) ? (0, util_1.uid)("mark") : props.id);
-    return context && addOrUpdateMark(context, id.current, props), (0, react_1.useEffect)((() => () => {
-        context && removeMark(context, id.current);
-    }), []), null;
-};
-
-exports.Mark = Mark;
+const BaseComponent_1 = require("./BaseComponent");
 
-const addOrUpdateMark = (view, id, props) => {
-    var _a;
-    if (!view.renderer) return;
-    let mark = view.getMarkById(id);
-    const {group: group, glyphType: glyphType, updateId: updateId} = props, others = __rest(props, [ "group", "glyphType", "updateId" ]);
-    mark || (mark = view.mark(props.type, null !== (_a = props.group) && void 0 !== _a ? _a : view.rootMark, props.glyphType ? {
-        glyphType: props.glyphType
-    } : null).name(id)), mark.parse(others), view.runAsync();
-}, removeMark = (view, id) => {
-    if (view.renderer) {
-        view.getMarkById(id);
-        view.removeGrammar(id);
-    }
-};
+exports.Mark = (0, BaseComponent_1.createComponent)("Mark", "customMark");
 //# sourceMappingURL=Mark.js.map

package/cjs/components/Mark.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Mark.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,6CAAyC;AAGzC,2DAA0C;AAC1C,kCAA8B;AAavB,MAAM,IAAI,GAAoB,CAAC,KAAY,EAAE,EAAE;IACpD,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,cAAW,CAAC,CAAC;IACxC,MAAM,EAAE,GAAG,eAAK,CAAC,MAAM,CAAkB,IAAA,cAAK,EAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAA,UAAG,EAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAEnF,IAAI,OAAO,EAAE;QACX,eAAe,CAAC,OAAO,EAAE,EAAE,CAAC,OAAiB,EAAE,KAAK,CAAC,CAAC;KACvD;IAED,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,IAAI,OAAO,EAAE;gBACX,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,OAAiB,CAAC,CAAC;aAC3C;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAjBW,QAAA,IAAI,QAiBf;AAEF,MAAM,eAAe,GAAG,CAAC,IAAW,EAAE,EAAU,EAAE,KAAY,EAAE,EAAE;;IAChE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAElB,OAAO;KACR;IAED,IAAI,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAChC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,KAAgB,KAAK,EAAhB,MAAM,UAAK,KAAK,EAAjD,kCAAyC,CAAQ,CAAC;IACxD,IAAI,CAAC,IAAI,EAAE;QACT,IAAI,GAAI,IAAY;aACjB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;aACvG,IAAI,CAAC,EAAE,CAAC,CAAC;KACb;IAED,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnB,IAAI,CAAC,QAAQ,EAAE,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,IAAW,EAAE,EAAU,EAAE,EAAE;IAC7C,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QACjC,IAAY,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;KACjC;AACH,CAAC,CAAC","file":"Mark.js","sourcesContent":["import React, { useContext, useEffect } from 'react';\nimport { isNil } from '@visactor/vutils';\nimport type { IView, MarkSpec } from '@visactor/vgrammar';\n\nimport ViewContext from '../context/view';\nimport { uid } from '../util';\n\nexport interface MarkProps extends Omit<MarkSpec, 'name' | 'id'> {\n  id?: string | number;\n  glyphType?: string;\n}\n\nexport interface IMarkElement extends React.ReactElement<Props, React.JSXElementConstructor<Props>> {\n  id: string | number;\n}\n\ntype Props = MarkProps & { updateId: number };\n\nexport const Mark: React.FC<Props> = (props: Props) => {\n  const context = useContext(ViewContext);\n  const id = React.useRef<string | number>(isNil(props.id) ? uid('mark') : props.id);\n\n  if (context) {\n    addOrUpdateMark(context, id.current as string, props);\n  }\n\n  useEffect(() => {\n    return () => {\n      if (context) {\n        removeMark(context, id.current as string);\n      }\n    };\n  }, []);\n\n  return null;\n};\n\nconst addOrUpdateMark = (view: IView, id: string, props: Props) => {\n  if (!view.renderer) {\n    // view has been released\n    return;\n  }\n\n  let mark = view.getMarkById(id);\n  const { group, glyphType, updateId, ...others } = props;\n  if (!mark) {\n    mark = (view as any)\n      .mark(props.type, props.group ?? view.rootMark, props.glyphType ? { glyphType: props.glyphType } : null)\n      .name(id);\n  }\n\n  mark.parse(others);\n  view.runAsync();\n};\n\nconst removeMark = (view: IView, id: string) => {\n  if (view.renderer) {\n    const mark = view.getMarkById(id);\n    (view as any).removeGrammar(id);\n  }\n};\n"]}
+{"version":3,"sources":["../src/components/Mark.tsx"],"names":[],"mappings":";;;AACA,mDAAsE;AAIzD,QAAA,IAAI,GAAG,IAAA,+BAAe,EAAY,MAAM,EAAE,YAAY,CAAC,CAAC","file":"Mark.js","sourcesContent":["import type { ICustomMarkSpec, EnableMarkType } from '@visactor/vchart';\nimport { BaseComponentProps, createComponent } from './BaseComponent';\n\nexport type MarkProps = ICustomMarkSpec<EnableMarkType> & BaseComponentProps;\n\nexport const Mark = createComponent<MarkProps>('Mark', 'customMark');\n"]}

package/cjs/components/MarkArea.d.ts

@@ -0,0 +1,4 @@
+import { BaseComponentProps } from './BaseComponent';
+import type { IMarkAreaSpec } from '@visactor/vchart';
+export type MarkAreaProps = IMarkAreaSpec & BaseComponentProps;
+export declare const MarkArea: import("react").FC<MarkAreaProps>;

package/cjs/components/MarkArea.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.MarkArea = void 0;
+
+const BaseComponent_1 = require("./BaseComponent");
+
+exports.MarkArea = (0, BaseComponent_1.createComponent)("MarkArea", "markArea");
+//# sourceMappingURL=MarkArea.js.map

package/cjs/components/MarkArea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MarkArea.tsx"],"names":[],"mappings":";;;AAAA,mDAAsE;AAKzD,QAAA,QAAQ,GAAG,IAAA,+BAAe,EAAgB,UAAU,EAAE,UAAU,CAAC,CAAC","file":"MarkArea.js","sourcesContent":["import { BaseComponentProps, createComponent } from './BaseComponent';\nimport type { IMarkAreaSpec } from '@visactor/vchart';\n\nexport type MarkAreaProps = IMarkAreaSpec & BaseComponentProps;\n\nexport const MarkArea = createComponent<MarkAreaProps>('MarkArea', 'markArea');\n"]}

package/cjs/components/MarkLine.d.ts

@@ -0,0 +1,4 @@
+import { BaseComponentProps } from './BaseComponent';
+import type { IMarkLineSpec } from '@visactor/vchart';
+export type MarkLineProps = IMarkLineSpec & BaseComponentProps;
+export declare const MarkLine: import("react").FC<MarkLineProps>;

package/cjs/components/MarkLine.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.MarkLine = void 0;
+
+const BaseComponent_1 = require("./BaseComponent");
+
+exports.MarkLine = (0, BaseComponent_1.createComponent)("MarkLine", "markLine");
+//# sourceMappingURL=MarkLine.js.map

package/cjs/components/MarkLine.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MarkLine.tsx"],"names":[],"mappings":";;;AAAA,mDAAsE;AAKzD,QAAA,QAAQ,GAAG,IAAA,+BAAe,EAAgB,UAAU,EAAE,UAAU,CAAC,CAAC","file":"MarkLine.js","sourcesContent":["import { BaseComponentProps, createComponent } from './BaseComponent';\nimport type { IMarkLineSpec } from '@visactor/vchart';\n\nexport type MarkLineProps = IMarkLineSpec & BaseComponentProps;\n\nexport const MarkLine = createComponent<MarkLineProps>('MarkLine', 'markLine');\n"]}

package/cjs/components/MarkPoint.d.ts

@@ -0,0 +1,4 @@
+import { BaseComponentProps } from './BaseComponent';
+import type { IMarkPointSpec } from '@visactor/vchart';
+export type MarkPointProps = IMarkPointSpec & BaseComponentProps;
+export declare const MarkPoint: import("react").FC<MarkPointProps>;

package/cjs/components/MarkPoint.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.MarkPoint = void 0;
+
+const BaseComponent_1 = require("./BaseComponent");
+
+exports.MarkPoint = (0, BaseComponent_1.createComponent)("MarkPoint", "markPoint");
+//# sourceMappingURL=MarkPoint.js.map

package/cjs/components/MarkPoint.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MarkPoint.tsx"],"names":[],"mappings":";;;AAAA,mDAAsE;AAKzD,QAAA,SAAS,GAAG,IAAA,+BAAe,EAAiB,WAAW,EAAE,WAAW,CAAC,CAAC","file":"MarkPoint.js","sourcesContent":["import { BaseComponentProps, createComponent } from './BaseComponent';\nimport type { IMarkPointSpec } from '@visactor/vchart';\n\nexport type MarkPointProps = IMarkPointSpec & BaseComponentProps;\n\nexport const MarkPoint = createComponent<MarkPointProps>('MarkPoint', 'markPoint');\n"]}

package/cjs/components/Player.d.ts

@@ -0,0 +1,5 @@
+import { PlayerEventProps } from '../eventsUtils';
+import { BaseComponentProps } from './BaseComponent';
+import type { IPlayerSpec } from '@visactor/vchart';
+export type PlayerProps = IPlayerSpec & BaseComponentProps & PlayerEventProps;
+export declare const Player: import("react").FC<PlayerProps>;

package/cjs/components/Player.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.Player = void 0;
+
+const eventsUtils_1 = require("../eventsUtils"), BaseComponent_1 = require("./BaseComponent");
+
+exports.Player = (0, BaseComponent_1.createComponent)("Player", "player", eventsUtils_1.PLAYER_CUSTOMIZED_EVENTS, !0);
+//# sourceMappingURL=Player.js.map

package/cjs/components/Player.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Player.tsx"],"names":[],"mappings":";;;AAAA,gDAA4E;AAC5E,mDAAsE;AAKzD,QAAA,MAAM,GAAG,IAAA,+BAAe,EAAc,QAAQ,EAAE,QAAQ,EAAE,sCAAwB,EAAE,IAAI,CAAC,CAAC","file":"Player.js","sourcesContent":["import { PLAYER_CUSTOMIZED_EVENTS, PlayerEventProps } from '../eventsUtils';\nimport { BaseComponentProps, createComponent } from './BaseComponent';\nimport type { IPlayerSpec } from '@visactor/vchart';\n\nexport type PlayerProps = IPlayerSpec & BaseComponentProps & PlayerEventProps;\n\nexport const Player = createComponent<PlayerProps>('Player', 'player', PLAYER_CUSTOMIZED_EVENTS, true);\n"]}