tvision-charts-component 3.3.24

package/dist/esm/basicTopo/_example/VisioLinkTopo.jsx

@@ -0,0 +1,234 @@
+import React, { useRef, useMemo } from 'react';
+import { BasicTopo } from '@tencent/tcharts-component';
+import { Button } from '@tencent/tea-component';
+
+export default function TaxiLinkTopo() {
+  const chartDom = useRef(null);
+  // const [showMsg, setShowMsg] = useState(false);
+  const options = {
+    grid: { left: 300, right: 0, bottom: 0, top: 300, containLabel: true },
+    // 如果需要定制节点label的最大长度，在props中增加node配置
+    node: {
+      maxLabelLen: 130,
+    },
+    link: {
+      curveStyle: 'visio',
+      // escapeDistance: 30,
+      // slotDistance: 30,
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: (items) => {
+        const content = `节点ID: ${items.id}<br />`;
+        // console.log('tooltip', items)
+        return content;
+      },
+    },
+    chartRef: (chart) => {
+      chartDom.current = chart;
+      chart.network.registerImages([
+        {
+          id: 'application',
+          path: 'M48.872727 446.836364C23.272727 446.836364 0 425.890909 0 397.963636v-349.090909C0 20.945455 20.945455 0 48.872727 0h351.418182c25.6 0 48.872727 20.945455 48.872727 48.872727v351.418182c0 25.6-20.945455 48.872727-48.872727 48.872727H48.872727zM623.709091 446.836364c-25.6 0-48.872727-20.945455-48.872727-48.872728v-349.090909c0-25.6 20.945455-48.872727 48.872727-48.872727h351.418182c27.927273 0 48.872727 20.945455 48.872727 48.872727v351.418182c0 25.6-20.945455 48.872727-48.872727 48.872727H623.709091zM48.872727 1024C20.945455 1024 0 1003.054545 0 975.127273V623.709091c0-25.6 20.945455-48.872727 48.872727-48.872727h351.418182c25.6 0 48.872727 20.945455 48.872727 48.872727v351.418182c0 25.6-20.945455 48.872727-48.872727 48.872727H48.872727zM623.709091 1024c-25.6 0-48.872727-20.945455-48.872727-48.872727V623.709091c0-25.6 20.945455-48.872727 48.872727-48.872727h351.418182c25.6 0 48.872727 20.945455 48.872727 48.872727v351.418182c0 25.6-20.945455 48.872727-48.872727 48.872727H623.709091z',
+          color: '#AAAAAA',
+          width: 32,
+          height: 32,
+        },
+        {
+          id: 'database',
+          path: 'M170.666667 798.464V262.101333C170.666667 235.178667 192.512 213.333333 219.434667 213.333333h585.130666C831.488 213.333333 853.333333 235.178667 853.333333 262.101333v536.362667c0 26.922667-21.845333 48.768-48.768 48.768H219.434667A48.768 48.768 0 0 1 170.666667 798.464z m48.768-146.261333v146.261333h585.130666v-146.261333H219.434667z m0-48.768h585.130666v-146.304H219.434667v146.304z m0-195.072h585.130666V262.101333H219.434667V408.32z m73.130666-97.493334h97.536a24.362667 24.362667 0 1 1 0 48.768H292.565333a24.362667 24.362667 0 1 1 0-48.768z m0 195.029334h97.536a24.362667 24.362667 0 1 1 0 48.768H292.565333a24.362667 24.362667 0 0 1 0-48.768z m0 195.072h97.536a24.362667 24.362667 0 0 1 0 48.725333H292.565333a24.362667 24.362667 0 0 1 0-48.725333z',
+          color: '#AAAAAA',
+          width: 32,
+          height: 32,
+        },
+      ]);
+
+      chart.network.add([
+        {
+          group: 'nodes',
+          data: { id: 'n0', name: 'skywalking-watch', selectable: true, animation: false },
+          position: { x: 100, y: 100 },
+          style: { width: 20, height: 20, color: '#D2514C', borer: 2, imageStyle: 'auto' },
+          property: { type: 'server' },
+        },
+        {
+          group: 'nodes',
+          data: { id: 'n1', name: 'skywalking-agent', grabbable: false, selectable: false },
+          position: { x: 300, y: 300 },
+          style: { width: 20, height: 20, color: '#D2514C', border: 2, imageStyle: 'auto' },
+          property: { type: 'cpu' },
+        },
+        {
+          group: 'nodes',
+          data: { id: 'n2', name: 'skywalking-agent2' },
+          position: { x: 500, y: 100 },
+          style: { width: 20, height: 20, imageStyle: 'auto' },
+        },
+        {
+          group: 'nodes',
+          data: { id: 'n3', name: 'skywalking-agent3' },
+          position: { x: 300, y: 500 },
+          style: { width: 20, height: 20, color: '#F0A139', border: 2, imageStyle: 'auto' },
+        },
+        {
+          group: 'nodes',
+          data: { id: 'n4', name: 'skywalking-agent4', animation: false },
+          position: { x: 200, y: 600 },
+          style: { width: 20, height: 20, color: '#F0A139', border: 2, imageStyle: 'auto' },
+        },
+        {
+          group: 'nodes',
+          data: { id: 'n5', name: 'skywalking-agent5', animation: false },
+          position: { x: 400, y: 600 },
+          style: { width: 20, height: 20, color: '#F0A139', border: 2, imageStyle: 'auto' },
+        },
+        {
+          group: 'nodes',
+          data: { id: 'n6', name: 'skywalking-agent6', animation: false },
+          position: { x: 400, y: 400 },
+          style: { width: 20, height: 20, color: '#F0A139', border: 2, imageStyle: 'auto' },
+        },
+        {
+          group: 'nodes',
+          data: { id: 'n7', name: 'skywalking-agent-v1' },
+          position: { x: 300, y: 300 },
+          style: { width: 20, height: 20, color: '#D2514C', border: 2, imageStyle: 'auto' },
+          property: { type: 'cpu' },
+        },
+        {
+          group: 'nodes',
+          data: { id: 'n8', name: 'skywalking-agent-v2' },
+          position: { x: 300, y: 300 },
+          style: { width: 20, height: 20, color: '#D2514C', border: 2, imageStyle: 'auto' },
+          property: { type: 'cpu' },
+        },
+        {
+          group: 'nodes',
+          data: { id: 'n9', name: 'skywalking-agent-v3' },
+          position: { x: 300, y: 300 },
+          style: { width: 20, height: 20, color: '#D2514C', border: 2, imageStyle: 'auto' },
+          property: { type: 'cpu' },
+        },
+        {
+          group: 'nodes',
+          data: { id: 'n10', name: 'skywalking-agent-v4' },
+          position: { x: 300, y: 300 },
+          style: { width: 20, height: 20, color: '#D2514C', border: 2, imageStyle: 'auto' },
+          property: { type: 'cpu' },
+        },
+        {
+          group: 'edges',
+          data: { id: 'e0', source: 'n0', target: 'n1', selectable: false },
+          style: { color: '#AAAAAA', width: 1, curveStyle: 'visio' },
+        },
+        { group: 'edges', data: { id: 'e1', source: 'n1', target: 'n2' }, style: { color: '#AAAAAA', width: 1 } },
+        { group: 'edges', data: { id: 'e2', source: 'n1', target: 'n3' }, style: { color: '#AAAAAA', width: 1 } },
+        { group: 'edges', data: { id: 'e3', source: 'n3', target: 'n4' }, style: { color: '#AAAAAA', width: 1 } },
+        { group: 'edges', data: { id: 'e4', source: 'n3', target: 'n5' }, style: { color: '#AAAAAA', width: 1 } },
+
+        {
+          group: 'edges',
+          data: { id: 'e7', source: 'n2', target: 'n6' },
+          style: { color: '#AAAAAA', width: 1 },
+        },
+        {
+          group: 'edges',
+          data: { id: 'e8', source: 'n1', target: 'n7' },
+          style: { color: '#AAAAAA', width: 1 },
+        },
+        {
+          group: 'edges',
+          data: { id: 'e9', source: 'n1', target: 'n8' },
+          style: { color: '#AAAAAA', width: 1 },
+        },
+        {
+          group: 'edges',
+          data: { id: 'e10', source: 'n1', target: 'n9' },
+          style: { color: '#AAAAAA', width: 1 },
+        },
+        {
+          group: 'edges',
+          data: { id: 'e11', source: 'n1', target: 'n10' },
+          style: { color: '#AAAAAA', width: 1 },
+        },
+        {
+          group: 'edges',
+          data: { id: 'e8', source: 'n6', target: 'n6' },
+          style: { color: '#AAAAAA', width: 1 },
+        },
+        // {
+        //   group: 'edges',
+        //   data: { id: 'e6', source: 'n4', target: 'n5' },
+        //   style: { color: '#AAAAAA', width: 1 }
+        // },
+      ]);
+
+      chart.network.layout('dagre', { rankDir: 'LR' }, { alignHCenter: false, alignVCenter: true });
+    },
+  };
+
+  function bindClick(e) {
+    switch (e) {
+      case 'zoomOut':
+        chartDom.current.network.zoomOut();
+        break;
+      case 'zoomIn':
+        chartDom.current.network.zoomIn();
+        break;
+      case 'zoomReset':
+        chartDom.current.network.zoomReset();
+        break;
+      case 'remove':
+        chartDom.current.network.remove('n0');
+        break;
+      case 'highlight':
+        chartDom.current.dispatchAction({
+          type: 'highlight',
+          seriesName: ['n0', 'n1', 'e0'],
+        });
+        break;
+      case 'downplay':
+        chartDom.current.dispatchAction({
+          type: 'downplay',
+        });
+        break;
+      case 'dagreH':
+        chartDom.current.network.layout('dagre', { rankDir: 'LR' });
+        break;
+      case 'dagreV':
+        chartDom.current.network.layout('dagre', { rankDir: 'TB' });
+        break;
+      case 'FruchtermanLayout':
+        // setShowMsg(true);
+        chartDom.current.network.layout('FruchtermanLayout', null, {
+          onLayoutEnd: () => {
+            // setShowMsg(false);
+          },
+        });
+        break;
+      case 'ForceLayout':
+        chartDom.current.network.layout('ForceLayout');
+        break;
+      case 'springy':
+        chartDom.current.network.layout('springy');
+        break;
+      default:
+        break;
+    }
+  }
+
+  // 防止无关属性变更引起图表重新初始化
+  const mapRender = useMemo(() => <BasicTopo height={850} {...options} />, []);
+
+  return (
+    <>
+      <Button title="Dagre布局-水平" onClick={() => bindClick('dagreH')}>
+        Dagre布局-水平
+      </Button>
+      <Button title="Dagre布局-竖直" onClick={() => bindClick('dagreV')}>
+        Dagre布局-竖直
+      </Button>
+      {mapRender}
+    </>
+  );
+}

package/dist/esm/basicTopo/demo/basic.md

@@ -0,0 +1,48 @@
+---
+order: 0
+title: 基础柱状图
+---
+
+基础柱状图，使用垂直的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。
+
+````jsx
+import { BasicHBar} from '@tencent/tcharts-component';
+
+var yAxis= {
+    type: 'category',
+    data: ['ins-8zybiffy', 'ins-8zybiffy1', 'ins-8zybiffy2', 'ins-8zybiffy3', 'ins-8zybiffy4', 'ins-8zybiffy5', 'ins-8zybiffy-long-test'],
+    description: ['ins-8zybiffy0', 'ins-8zybiffy10', 'ins-8zybiffy22', 'ins-8zybiffy33', 'ins-8zybiffy44', 'ins-8zybiffy55', 'ins-8zybiffy-long-test66']
+};
+var dataSource = [
+    {
+        name: '磁盘容量',
+        type: 'HBar',
+        stack: '总量',
+        label: {
+            show: true,
+            position: 'insideRight'
+        },
+        data: [10, 23, 50, 10, 15, 30, 40],
+        maxData: [59.01, 40.04, 59.04, 59.04, 59.04, 59.04, 59.04]
+    },
+];
+
+var grid = {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top:20,
+    containLabel: true
+ }; 
+ReactDOM.render(
+  <div>
+    <BasicHBar 
+        yAxis={yAxis}
+        dataSource={dataSource}
+        grid={grid}
+        height = '500px'>
+        默认
+    </BasicHBar>
+  </div>
+, mountNode);
+````

package/dist/esm/basicTopo/demo/labelRotate.md

@@ -0,0 +1,35 @@
+---
+order: 0
+title: x轴文字旋转的柱状图
+---
+
+基础柱状图，使用垂直的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。
+
+````jsx
+import { BasicBar} from '@tencent/tcharts-component';
+
+var xAxis = {
+    axisLabel: { rotate: 60 },
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+};
+var dataSource = [
+    {
+        name: '日志数量',
+        type: 'bar',
+        barWidth: '60%',
+        data: [10, 52, 200, 334, 390, 330, 220]
+    }
+];
+
+  
+ReactDOM.render(
+  <div>
+    <BasicBar 
+        xAxis={xAxis}
+        dataSource={dataSource}
+        height = '500px'>
+        默认
+    </BasicBar>
+  </div>
+, mountNode);
+````

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

@@ -0,0 +1,40 @@
+import { ChartComponent, ChartProps } from '../common/chart';
+import { ToolTipOptions, GridOptions, ChartRef, Data } from '../_type';
+export interface TopoProps {
+    width?: number | string;
+    height: number | string;
+    tooltip?: ToolTipOptions;
+    theme?: string;
+    dataSource?: Data[];
+    grid?: GridOptions;
+    node?: any;
+    link?: any;
+    hooks?: {
+        draw?: (ctx?: any) => void;
+        setSelect?: (ctx?: any) => void;
+        locationChanged?: (pipelines?: any) => void;
+    };
+    hideScroll?: boolean;
+    chartRef?: (chart?: ChartRef) => void;
+}
+declare abstract class Topo<T extends ChartProps> extends ChartComponent<T> {
+    chartType: string;
+}
+export default class BasicTopo extends Topo<TopoProps> {
+    getOptions(props: any): {
+        legend: any;
+        tooltip: any;
+        series: any;
+        grid: any;
+        theme: any;
+        visualMap: any;
+        showSouthChinaSea: any;
+        chartRef: any;
+        link: any;
+        node: any;
+        hooks: any;
+        hideScroll: any;
+        geo: any;
+    };
+}
+export {};

package/dist/esm/basicTopo/index.js

@@ -0,0 +1,24 @@
+import { __extends, __read, __spreadArray } from "tslib";
+import { ChartComponent } from '../common/chart';
+import { addMapOption } from '../common/optionsHelp';
+var Topo = (function (_super) {
+    __extends(Topo, _super);
+    function Topo() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.chartType = 'topo';
+        return _this;
+    }
+    return Topo;
+}(ChartComponent));
+var BasicTopo = (function (_super) {
+    __extends(BasicTopo, _super);
+    function BasicTopo() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BasicTopo.prototype.getOptions = function (props) {
+        return addMapOption(props || this.props);
+    };
+    return BasicTopo;
+}(Topo));
+export default BasicTopo;
+//# sourceMappingURL=index.js.map

package/dist/esm/basicTopo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/basicTopo/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAsDrD;IAAkD,wBAAiB;IAAnE;;QACE,eAAS,GAAG,MAAM,CAAC;;IACrB,CAAC;IAAD,WAAC;AAAD,CAAC,AAFD,CAAkD,cAAc,GAE/D;AACD;IAAuC,6BAAe;IAAtD;;IAIA,CAAC;IAHC,8BAAU,GAAV,UAAW,KAAK;QACd,OAAO,YAAY,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IACH,gBAAC;AAAD,CAAC,AAJD,CAAuC,IAAI,GAI1C"}

package/dist/esm/basicTopo/index.md

@@ -0,0 +1,25 @@
+---
+category: Charts
+title: basicTopo
+subtitle: 基础拓扑图
+cols: 1
+type: 拓扑图
+author: minchang,卢耀和
+---
+
+基础拓扑图
+
+---
+
+## API
+
+按钮的属性说明如下：
+
+属性 | 说明 | 类型 | 默认值
+-----|-----|-----|------
+hooks | 拓扑的扩展 | string | - |
+height |  图表的高度 | number | - |
+
+
+
+

package/dist/esm/basicTreeMap/basicTreeMap.d.ts

@@ -0,0 +1,19 @@
+import { ChartComponent, ChartProps } from '../common/chart';
+import { ToolTipOptions, GridOptions, ChartRef, Data } from '../_type';
+export interface TreeMapProps {
+    width?: number | string;
+    height: number | string;
+    tooltip?: ToolTipOptions;
+    theme?: string;
+    dataSource: Data[];
+    grid?: GridOptions;
+    chartRef?: (chart?: ChartRef) => void;
+}
+declare abstract class TreeMap<T extends ChartProps> extends ChartComponent<T> {
+    chartType: string;
+    constructor(props: any);
+}
+export default class BasicTreeMap extends TreeMap<TreeMapProps> {
+    getOptions(props: any): any;
+}
+export {};

package/dist/esm/basicTreeMap/basicTreeMap.js

@@ -0,0 +1,25 @@
+import { __assign, __extends } from "tslib";
+import { ChartComponent } from '../common/chart';
+import { ChartTreemapComponent, ChartCore } from 'tvision-charts';
+var TreeMap = (function (_super) {
+    __extends(TreeMap, _super);
+    function TreeMap(props) {
+        var _this = _super.call(this, props) || this;
+        _this.chartType = 'treeMap';
+        ChartCore.use(ChartTreemapComponent);
+        return _this;
+    }
+    return TreeMap;
+}(ChartComponent));
+var BasicTreeMap = (function (_super) {
+    __extends(BasicTreeMap, _super);
+    function BasicTreeMap() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BasicTreeMap.prototype.getOptions = function (props) {
+        return __assign({}, (props || this.props));
+    };
+    return BasicTreeMap;
+}(TreeMap));
+export default BasicTreeMap;
+//# sourceMappingURL=basicTreeMap.js.map

package/dist/esm/basicTreeMap/basicTreeMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"basicTreeMap.js","sourceRoot":"","sources":["../../../src/basicTreeMap/basicTreeMap.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,iBAAiB,CAAC;AAE7D,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAmClE;IAAqD,2BAAiB;IAEpE,iBAAY,KAAK;QACf,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAFf,eAAS,GAAG,SAAS,CAAC;QAGpB,SAAS,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;;IACvC,CAAC;IACH,cAAC;AAAD,CAAC,AAND,CAAqD,cAAc,GAMlE;AAED;IAA0C,gCAAqB;IAA/D;;IAIA,CAAC;IAHC,iCAAU,GAAV,UAAW,KAAK;QACd,oBAAY,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,EAAG;IACtC,CAAC;IACH,mBAAC;AAAD,CAAC,AAJD,CAA0C,OAAO,GAIhD"}

package/dist/esm/common/chart.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface ChartProps {
+    height: number | string;
+    width?: number | string;
+    theme?: string;
+    dataSource?: any[];
+    chartRef?: any;
+    geo?: any;
+}
+export declare abstract class ChartComponent<T extends ChartProps> extends React.Component<T, {
+    height: number;
+}> {
+    private dom;
+    private proxyElement;
+    abstract chartType: string;
+    constructor(props: any);
+    getHeight(props: any): any;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentWillReceiveProps(props: any): void;
+    render(): JSX.Element;
+    abstract getOptions(props: any): any;
+}

package/dist/esm/common/chart.js

@@ -0,0 +1,56 @@
+import { __extends } from "tslib";
+import React from 'react';
+import { compareObjWithoutFunction } from './compareObjWithoutFunction';
+import { ChartCore } from 'tvision-charts';
+var ChartComponent = (function (_super) {
+    __extends(ChartComponent, _super);
+    function ChartComponent(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            height: 0,
+        };
+        return _this;
+    }
+    ChartComponent.prototype.getHeight = function (props) {
+        return props.height;
+    };
+    ChartComponent.prototype.componentDidMount = function () {
+        var _this = this;
+        var height = this.getHeight(this.props);
+        this.setState({
+            height: height,
+        }, function () {
+            _this.dom = new ChartCore(_this.chartType, _this.proxyElement);
+            var theme = _this.props.theme;
+            var options = _this.getOptions(null);
+            _this.dom.setOption(options, theme);
+            if (options.chartRef) {
+                options.chartRef(_this.dom);
+            }
+        });
+    };
+    ChartComponent.prototype.componentWillUnmount = function () {
+        var _a, _b;
+        (_b = (_a = this.dom) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.dom = null;
+    };
+    ChartComponent.prototype.componentWillReceiveProps = function (props) {
+        var _a;
+        if (typeof ((_a = this.dom) === null || _a === void 0 ? void 0 : _a.setOption) !== 'function') {
+            return;
+        }
+        if (compareObjWithoutFunction(this.props, props)) {
+            return;
+        }
+        var theme = props.theme;
+        this.dom.setOption(this.getOptions(props) || {}, theme);
+    };
+    ChartComponent.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, width = _a.width, height = _a.height;
+        return (React.createElement("div", { style: { height: height, width: width }, ref: function (e) { return _this.proxyElement = e; } }));
+    };
+    return ChartComponent;
+}(React.Component));
+export { ChartComponent };
+//# sourceMappingURL=chart.js.map

package/dist/esm/common/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","sourceRoot":"","sources":["../../../src/common/chart.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAW3C;IAAmE,kCAAoC;IAOrG,wBAAY,KAAK;QACf,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QACb,KAAI,CAAC,KAAK,GAAG;YACX,MAAM,EAAE,CAAC;SACV,CAAC;;IACJ,CAAC;IAGD,kCAAS,GAAT,UAAU,KAAK;QACb,OAAO,KAAK,CAAC,MAAM,CAAC;IACtB,CAAC;IAID,0CAAiB,GAAjB;QAAA,iBAaC;QAZC,IAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,QAAQ,CAAC;YACZ,MAAM,QAAA;SACP,EAAE;YACD,KAAI,CAAC,GAAG,GAAG,IAAI,SAAS,CAAC,KAAI,CAAC,SAAS,EAAE,KAAI,CAAC,YAAY,CAAC,CAAC;YACpD,IAAA,KAAK,GAAK,KAAI,CAAC,KAAK,MAAf,CAAgB;YAC7B,IAAM,OAAO,GAAG,KAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YACtC,KAAI,CAAC,GAAG,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YACnC,IAAI,OAAO,CAAC,QAAQ,EAAE,CAAC;gBACrB,OAAO,CAAC,QAAQ,CAAC,KAAI,CAAC,GAAG,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAKD,6CAAoB,GAApB;;QACE,MAAA,MAAA,IAAI,CAAC,GAAG,0CAAE,OAAO,kDAAI,CAAC;QACtB,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;IAClB,CAAC;IAED,kDAAyB,GAAzB,UAA0B,KAAK;;QAC7B,IAAI,OAAO,CAAA,MAAA,IAAI,CAAC,GAAG,0CAAE,SAAS,CAAA,KAAK,UAAU,EAAE,CAAC;YAC9C,OAAO;QACT,CAAC;QACD,IAAI,yBAAyB,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;YACjD,OAAO;QACT,CAAC;QACO,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;QACxB,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IAC1D,CAAC;IAKD,+BAAM,GAAN;QAAA,iBAKC;QAJO,IAAA,KAAqB,IAAI,CAAC,KAAK,EAA5B,KAAK,WAAA,EAAE,MAAM,YAAe,CAAC;QACtC,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,MAAM,QAAA,EAAE,KAAK,OAAA,EAAE,EAAE,GAAG,EAAE,UAAA,CAAC,IAAI,OAAA,KAAI,CAAC,YAAY,GAAG,CAAC,EAArB,CAAqB,GAAQ,CACvE,CAAC;IACJ,CAAC;IAGH,qBAAC;AAAD,CAAC,AAlED,CAAmE,KAAK,CAAC,SAAS,GAkEjF"}

package/dist/esm/common/compareObjWithoutFunction.d.ts

@@ -0,0 +1 @@
+export declare function compareObjWithoutFunction(obj1: any, obj2: any): boolean;

package/dist/esm/common/compareObjWithoutFunction.js

@@ -0,0 +1,34 @@
+export function compareObjWithoutFunction(obj1, obj2) {
+    if (obj1 === obj2) {
+        return true;
+    }
+    if ((obj1 == null && obj2 != null) || (obj1 != null && obj2 == null)) {
+        return false;
+    }
+    var keys = [];
+    if (obj1 != null) {
+        keys = Object.keys(obj1);
+    }
+    if (obj2 != null) {
+        var ks = Object.keys(obj2);
+        ks.forEach(function (k) {
+            if (keys.indexOf(k) < 0) {
+                keys.push(k);
+            }
+        });
+    }
+    var notEqual = false;
+    keys.find(function (key) {
+        var value1 = obj1[key];
+        var value2 = obj2[key];
+        var type1 = typeof value1;
+        var type2 = typeof value2;
+        if (type1 !== 'function' && type2 !== 'function' && value1 !== value2) {
+            notEqual = true;
+            return true;
+        }
+        return false;
+    });
+    return !notEqual;
+}
+//# sourceMappingURL=compareObjWithoutFunction.js.map

package/dist/esm/common/compareObjWithoutFunction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compareObjWithoutFunction.js","sourceRoot":"","sources":["../../../src/common/compareObjWithoutFunction.ts"],"names":[],"mappings":"AAOA,MAAM,UAAU,yBAAyB,CAAC,IAAI,EAAE,IAAI;IAClD,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC;QACrE,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,IAAI,GAAa,EAAE,CAAC;IACxB,IAAI,IAAI,IAAI,IAAI,EAAE,CAAC;QAEjB,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IACD,IAAI,IAAI,IAAI,IAAI,EAAE,CAAC;QACjB,IAAM,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,EAAE,CAAC,OAAO,CAAC,UAAC,CAAC;YACX,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;gBAExB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACf,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IACD,IAAI,QAAQ,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,IAAI,CAAC,UAAC,GAAG;QACZ,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;QACzB,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;QACzB,IAAM,KAAK,GAAG,OAAO,MAAM,CAAC;QAC5B,IAAM,KAAK,GAAG,OAAO,MAAM,CAAC;QAE5B,IAAI,KAAK,KAAK,UAAU,IAAI,KAAK,KAAK,UAAU,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtE,QAAQ,GAAG,IAAI,CAAC;YAChB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IACH,OAAO,CAAC,QAAQ,CAAC;AACnB,CAAC"}

package/dist/esm/common/functionChart.d.ts

@@ -0,0 +1,7 @@
+import { ChartProps } from './chart';
+interface InnerProps {
+    chartType: string;
+    getOptions: (options: any) => any;
+}
+export declare function FunctionChart<T extends ChartProps & InnerProps>(props: T): JSX.Element;
+export {};

package/dist/esm/common/functionChart.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useRef } from 'react';
+import { TCharts } from '../proxy';
+import { compareObjWithoutFunction } from './compareObjWithoutFunction';
+export function FunctionChart(props) {
+    var chartType = props.chartType, _a = props.getOptions, getOptions = _a === void 0 ? function (e) { return e; } : _a, _b = props.theme, theme = _b === void 0 ? '' : _b, chartRef = props.chartRef;
+    var chartInstRef = useRef();
+    var oldPropsRef = useRef({});
+    var setDom = function (dom) {
+        var _a;
+        if (dom) {
+            if (!(chartInstRef.current instanceof TCharts)) {
+                chartInstRef.current = new TCharts(chartType, null);
+                chartRef(chartInstRef.current);
+            }
+            (_a = chartInstRef.current) === null || _a === void 0 ? void 0 : _a.init(chartType, dom);
+        }
+    };
+    useEffect(function () { return function () {
+        var _a, _b;
+        (_b = (_a = chartInstRef.current) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+        chartInstRef.current = null;
+        oldPropsRef.current = null;
+    }; }, []);
+    useEffect(function () {
+        var _a, _b;
+        if (chartInstRef.current && !compareObjWithoutFunction(oldPropsRef.current, props)) {
+            var options = getOptions(props);
+            (_b = (_a = chartInstRef.current).setOption) === null || _b === void 0 ? void 0 : _b.call(_a, options, theme);
+        }
+        oldPropsRef.current = props;
+    }, [props]);
+    var width = props.width, height = props.height;
+    return (React.createElement("div", { style: { height: height, width: width }, ref: function (inst) {
+            setDom(inst);
+        } }));
+}
+//# sourceMappingURL=functionChart.js.map

package/dist/esm/common/functionChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"functionChart.js","sourceRoot":"","sources":["../../../src/common/functionChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAQxE,MAAM,UAAU,aAAa,CAAoC,KAAQ;IAC/D,IAAA,SAAS,GAAqD,KAAK,UAA1D,EAAE,KAAmD,KAAK,WAAhC,EAAxB,UAAU,mBAAG,UAAC,CAAI,IAAK,OAAA,CAAC,EAAD,CAAC,KAAA,EAAE,KAAyB,KAAK,MAApB,EAAV,KAAK,mBAAG,EAAE,KAAA,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;IAC5E,IAAM,YAAY,GAAG,MAAM,EAAc,CAAC;IAC1C,IAAM,WAAW,GAAG,MAAM,CAAY,EAAe,CAAC,CAAC;IAEvD,IAAM,MAAM,GAAG,UAAC,GAAuB;;QACrC,IAAI,GAAG,EAAE,CAAC;YACR,IAAI,CAAC,CAAC,YAAY,CAAC,OAAO,YAAY,OAAO,CAAC,EAAE,CAAC;gBAC/C,YAAY,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;gBACpD,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YACjC,CAAC;YACD,MAAA,YAAY,CAAC,OAAO,0CAAE,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,cAAM,OAAA;;QACd,MAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,OAAO,kDAAI,CAAC;QAClC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;IAC7B,CAAC,EAJe,CAIf,EAAE,EAAE,CAAC,CAAC;IAGP,SAAS,CAAC;;QACR,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;YACnF,IAAM,OAAO,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;YAClC,MAAA,MAAA,YAAY,CAAC,OAAO,EAAC,SAAS,mDAAG,OAAO,EAAE,KAAK,CAAC,CAAC;QACnD,CAAC;QACD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEH,IAAA,KAAK,GAAa,KAAK,MAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAW;IACjC,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,MAAM,QAAA,EAAE,KAAK,OAAA,EAAE,EAAE,GAAG,EAAE,UAAC,IAAI;YACvC,MAAM,CAAC,IAAI,CAAC,CAAC;QACf,CAAC,GAAQ,CACZ,CAAC;AACJ,CAAC"}