tvision-charts-component 3.3.24

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

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

package/dist/esm/basicFunnel/index.js

@@ -0,0 +1,27 @@
+import { __assign, __extends } from "tslib";
+import { ChartComponent } from '../common/chart';
+import { ChartFunnelComponent, ChartCore } from 'tvision-charts';
+var Funnel = (function (_super) {
+    __extends(Funnel, _super);
+    function Funnel(props) {
+        var _this = _super.call(this, props) || this;
+        _this.chartType = 'funnel';
+        ChartCore.use(ChartFunnelComponent);
+        return _this;
+    }
+    return Funnel;
+}(ChartComponent));
+var BasicFunnel = (function (_super) {
+    __extends(BasicFunnel, _super);
+    function BasicFunnel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BasicFunnel.prototype.getOptions = function (props) {
+        var options = props || this.props;
+        var newOptions = __assign(__assign({}, options), { series: options.dataSource });
+        return newOptions;
+    };
+    return BasicFunnel;
+}(Funnel));
+export default BasicFunnel;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/basicFunnel/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,iBAAiB,CAAC;AAE7D,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAiCjE;IAAoD,0BAAiB;IAEnE,gBAAY,KAAK;QACf,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAFf,eAAS,GAAG,QAAQ,CAAC;QAGnB,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;;IACtC,CAAC;IACH,aAAC;AAAD,CAAC,AAND,CAAoD,cAAc,GAMjE;AAED;IAAyC,+BAAmB;IAA5D;;IASA,CAAC;IARC,gCAAU,GAAV,UAAW,KAAK;QACd,IAAM,OAAO,GAAG,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;QACpC,IAAM,UAAU,yBACX,OAAO,KACV,MAAM,EAAE,OAAO,CAAC,UAAU,GAC3B,CAAC;QACF,OAAO,UAAU,CAAC;IACpB,CAAC;IACH,kBAAC;AAAD,CAAC,AATD,CAAyC,MAAM,GAS9C"}

package/dist/esm/basicFunnel/index.md

@@ -0,0 +1,21 @@
+---
+category: Charts
+title: BasicFunnel
+subtitle: 基础漏斗图
+type: 漏斗图
+author: sukeechen
+---
+
+基础漏斗图
+
+---
+
+## API
+
+按钮的属性说明如下：
+
+属性 | 说明 | 类型 | 默认值
+-----|-----|-----|------
+title | 柱状图的标题 | string | - |
+legend | 图例的配置项。通过该配置项可以配置图例是否显示；类目数据 legend.data 为一个数组 | object | legend:{ show:true, data: [] }|
+dataSource  | 数据列表 | array | - |

package/dist/esm/basicGauge/README.md

@@ -0,0 +1,24 @@
+# BasicGauge 仪表盘
+
+仪表盘
+
+## 使用示例
+
+对于最简单的使用只需要配置少量参数即可
+
+### 基础仪表盘
+
+[Example: 基础仪表盘](./_example/Basic.jsx)
+
+### 带阈值仪表盘
+
+[Example: 带阈值仪表盘](./_example/ThresholdGauge.jsx)
+
+### 带刻度仪表盘
+
+[Example: 带刻度仪表盘](./_example/ScaleGauge.jsx)
+
+## 组件属性
+
+[Interface: GaugeProps](./index.tsx)
+

package/dist/esm/basicGauge/_example/Basic.d.ts

@@ -0,0 +1 @@
+export default function Basic(): JSX.Element;

package/dist/esm/basicGauge/_example/Basic.js

@@ -0,0 +1,31 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicGauge } from '@tencent/tcharts-component';
+export default function Basic() {
+    var options = {
+        dataSource: [
+            {
+                name: 'CPU利用率',
+                type: 'gauge',
+                min: 0,
+                max: 100,
+                thresholds: [],
+                background: '#ebf4ff',
+                axisLabel: { show: false, color: '#888' },
+                axisLine: {
+                    show: true,
+                    lineStyle: { color: ['#78BD6D'] },
+                    width: '3%',
+                    gapWidth: '1%',
+                },
+                title: { show: true, color: '#888' },
+                detail: { show: true, unit: '%' },
+                data: [{ name: 'CPU利用率', value: 10 }],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u57FA\u7840\u4EEA\u8868\u76D8"),
+        React.createElement(BasicGauge, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=Basic.js.map

package/dist/esm/basicGauge/_example/Basic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Basic.js","sourceRoot":"","sources":["../../../../src/basicGauge/_example/Basic.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,KAAK;IAC3B,IAAM,OAAO,GAAG;QACd,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,OAAO;gBACb,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,UAAU,EAAE,EAAE;gBACd,UAAU,EAAE,SAAS;gBACrB,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE;gBACzC,QAAQ,EAAE;oBACR,IAAI,EAAE,IAAI;oBACV,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE;oBACjC,KAAK,EAAE,IAAI;oBACX,QAAQ,EAAE,IAAI;iBACf;gBACD,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;gBACpC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE;gBACjC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;aACtC;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,kEAAgB;QAChB,oBAAC,UAAU,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACvC,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/basicGauge/_example/Basic.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BasicGauge } from '@tencent/tcharts-component';
+
+export default function Basic() {
+  const options = {
+    dataSource: [
+      {
+        name: 'CPU利用率',
+        type: 'gauge',
+        min: 0,
+        max: 100,
+        thresholds: [],
+        background: '#ebf4ff',
+        axisLabel: { show: false, color: '#888' },
+        axisLine: {
+          show: true,
+          lineStyle: { color: ['#78BD6D'] },
+          width: '3%',
+          gapWidth: '1%',
+        },
+        title: { show: true, color: '#888' },
+        detail: { show: true, unit: '%' },
+        data: [{ name: 'CPU利用率', value: 10 }],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>基础仪表盘</div>
+      <BasicGauge height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicGauge/_example/ScaleGauge.d.ts

@@ -0,0 +1 @@
+export default function ScaleGauge(): JSX.Element;

package/dist/esm/basicGauge/_example/ScaleGauge.js

@@ -0,0 +1,31 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicGauge } from '@tencent/tcharts-component';
+export default function ScaleGauge() {
+    var options = {
+        dataSource: [
+            {
+                name: 'CPU利用率',
+                type: 'gauge',
+                min: 0,
+                max: 100,
+                thresholds: [25, 50, 75, 100],
+                background: '#ebf4ff',
+                axisLabel: { show: true, color: '#888' },
+                axisLine: {
+                    show: true,
+                    lineStyle: { color: ['#529DFF', '#78BD6D', '#FF7F47', '#F54E4E'] },
+                    width: '3%',
+                    gapWidth: '1%',
+                },
+                title: { show: true, color: '#888' },
+                detail: { show: true, unit: '%' },
+                data: [{ name: 'CPU利用率', value: 10 }],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u5E26\u523B\u5EA6\u4EEA\u8868\u76D8"),
+        React.createElement(BasicGauge, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=ScaleGauge.js.map

package/dist/esm/basicGauge/_example/ScaleGauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScaleGauge.js","sourceRoot":"","sources":["../../../../src/basicGauge/_example/ScaleGauge.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,UAAU;IAChC,IAAM,OAAO,GAAG;QACd,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,OAAO;gBACb,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;gBAC7B,UAAU,EAAE,SAAS;gBACrB,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;gBACxC,QAAQ,EAAE;oBACR,IAAI,EAAE,IAAI;oBACV,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,EAAE;oBAClE,KAAK,EAAE,IAAI;oBACX,QAAQ,EAAE,IAAI;iBACf;gBACD,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;gBACpC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE;gBACjC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;aACtC;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,wEAAiB;QACjB,oBAAC,UAAU,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACvC,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/basicGauge/_example/ScaleGauge.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BasicGauge } from '@tencent/tcharts-component';
+
+export default function ScaleGauge() {
+  const options = {
+    dataSource: [
+      {
+        name: 'CPU利用率',
+        type: 'gauge',
+        min: 0,
+        max: 100,
+        thresholds: [25, 50, 75, 100],
+        background: '#ebf4ff',
+        axisLabel: { show: true, color: '#888' },
+        axisLine: {
+          show: true,
+          lineStyle: { color: ['#529DFF', '#78BD6D', '#FF7F47', '#F54E4E'] },
+          width: '3%',
+          gapWidth: '1%',
+        },
+        title: { show: true, color: '#888' },
+        detail: { show: true, unit: '%' },
+        data: [{ name: 'CPU利用率', value: 10 }],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>带刻度仪表盘</div>
+      <BasicGauge height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicGauge/_example/ThresholdGauge.d.ts

@@ -0,0 +1 @@
+export default function ThresholdGauge(): JSX.Element;

package/dist/esm/basicGauge/_example/ThresholdGauge.js

@@ -0,0 +1,31 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicGauge } from '@tencent/tcharts-component';
+export default function ThresholdGauge() {
+    var options = {
+        dataSource: [
+            {
+                name: 'CPU利用率',
+                type: 'gauge',
+                min: 0,
+                max: 100,
+                thresholds: [8],
+                background: '#ebf4ff',
+                axisLabel: { show: false, color: '#888' },
+                axisLine: {
+                    show: true,
+                    lineStyle: { color: ['#78BD6D', '#F54E4E'] },
+                    width: '3%',
+                    gapWidth: '1%',
+                },
+                title: { show: true, color: '#888' },
+                detail: { show: true, unit: '%' },
+                data: [{ name: 'CPU利用率', value: 10 }],
+            },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u5E26\u9608\u503C\u4EEA\u8868\u76D8"),
+        React.createElement(BasicGauge, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=ThresholdGauge.js.map

package/dist/esm/basicGauge/_example/ThresholdGauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThresholdGauge.js","sourceRoot":"","sources":["../../../../src/basicGauge/_example/ThresholdGauge.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,cAAc;IACpC,IAAM,OAAO,GAAG;QACd,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,OAAO;gBACb,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,UAAU,EAAE,CAAC,CAAC,CAAC;gBACf,UAAU,EAAE,SAAS;gBACrB,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE;gBACzC,QAAQ,EAAE;oBACR,IAAI,EAAE,IAAI;oBACV,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE;oBAC5C,KAAK,EAAE,IAAI;oBACX,QAAQ,EAAE,IAAI;iBACf;gBACD,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;gBACpC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE;gBACjC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;aACtC;SACF;KACF,CAAC;IAEF,OAAO,CACL;QACE,wEAAiB;QACjB,oBAAC,UAAU,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACvC,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/basicGauge/_example/ThresholdGauge.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BasicGauge } from '@tencent/tcharts-component';
+
+export default function ThresholdGauge() {
+  const options = {
+    dataSource: [
+      {
+        name: 'CPU利用率',
+        type: 'gauge',
+        min: 0,
+        max: 100,
+        thresholds: [8],
+        background: '#ebf4ff',
+        axisLabel: { show: false, color: '#888' },
+        axisLine: {
+          show: true,
+          lineStyle: { color: ['#78BD6D', '#F54E4E'] },
+          width: '3%',
+          gapWidth: '1%',
+        },
+        title: { show: true, color: '#888' },
+        detail: { show: true, unit: '%' },
+        data: [{ name: 'CPU利用率', value: 10 }],
+      },
+    ],
+  };
+
+  return (
+    <>
+      <div>带阈值仪表盘</div>
+      <BasicGauge height={500} {...options} />
+    </>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { ChartComponent, ChartProps } from '../common/chart';
+import { LegendOptions, ChartRef, Data } from '../_type';
+export interface GaugeProps {
+    width?: number | string;
+    height: number | string;
+    legend?: LegendOptions;
+    theme?: string;
+    dataSource?: Data[];
+    series?: Data[];
+    chartRef?: (chart?: ChartRef) => void;
+}
+declare abstract class Gauge<T extends ChartProps> extends ChartComponent<T> {
+    chartType: string;
+    constructor(props: any);
+}
+export default class BasicGauge extends Gauge<GaugeProps> {
+    getOptions(props: any): {
+        legend: any;
+        series: any;
+        chartRef: any;
+    };
+}
+export {};

package/dist/esm/basicGauge/index.js

@@ -0,0 +1,26 @@
+import { __extends } from "tslib";
+import { ChartComponent } from '../common/chart';
+import { addBasicGaugeOption } from '../common/optionsHelp';
+import { ChartGaugeComponent, ChartCore } from 'tvision-charts';
+var Gauge = (function (_super) {
+    __extends(Gauge, _super);
+    function Gauge(props) {
+        var _this = _super.call(this, props) || this;
+        _this.chartType = 'gauge';
+        ChartCore.use(ChartGaugeComponent);
+        return _this;
+    }
+    return Gauge;
+}(ChartComponent));
+var BasicGauge = (function (_super) {
+    __extends(BasicGauge, _super);
+    function BasicGauge() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    BasicGauge.prototype.getOptions = function (props) {
+        return addBasicGaugeOption(props || this.props);
+    };
+    return BasicGauge;
+}(Gauge));
+export default BasicGauge;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/basicGauge/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAiChE;IAAmD,yBAAiB;IAElE,eAAY,KAAK;QACf,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAFf,eAAS,GAAG,OAAO,CAAC;QAGlB,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;;IACrC,CAAC;IACH,YAAC;AAAD,CAAC,AAND,CAAmD,cAAc,GAMhE;AACD;IAAwC,8BAAiB;IAAzD;;IAIA,CAAC;IAHC,+BAAU,GAAV,UAAW,KAAK;QACd,OAAO,mBAAmB,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IACH,iBAAC;AAAD,CAAC,AAJD,CAAwC,KAAK,GAI5C"}

package/dist/esm/basicHBar/README.md

@@ -0,0 +1,15 @@
+# BasicHBar 基础条状图
+
+基础柱状图，使用垂直的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。
+
+## 使用示例
+
+对于最简单的使用只需要配置少量参数即可
+
+[Example: 基本使用](./_example/Basic.jsx)
+
+[Example: 基本使用](./_example/LabelRotate.jsx)
+
+## 组件属性
+
+[Interface: BarProps](./index.tsx)

package/dist/esm/basicHBar/_example/Basic.d.ts

@@ -0,0 +1 @@
+export default function Basic(): JSX.Element;

package/dist/esm/basicHBar/_example/Basic.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { BasicHBar } from '@tencent/tcharts-component';
+export default function Basic() {
+    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,
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u57FA\u7840\u67F1\u72B6\u56FE"),
+        React.createElement(BasicHBar, { yAxis: yAxis, dataSource: dataSource, grid: grid, height: 500 }, "\u9ED8\u8BA4")));
+}
+//# sourceMappingURL=Basic.js.map

package/dist/esm/basicHBar/_example/Basic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Basic.js","sourceRoot":"","sources":["../../../../src/basicHBar/_example/Basic.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,KAAK;IAC3B,IAAM,KAAK,GAAG;QACZ,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE;YACJ,cAAc;YACd,eAAe;YACf,eAAe;YACf,eAAe;YACf,eAAe;YACf,eAAe;YACf,wBAAwB;SACzB;QACD,WAAW,EAAE;YACX,eAAe;YACf,gBAAgB;YAChB,gBAAgB;YAChB,gBAAgB;YAChB,gBAAgB;YAChB,gBAAgB;YAChB,0BAA0B;SAC3B;KACF,CAAC;IACF,IAAM,UAAU,GAAG;QACjB;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,IAAI;YACX,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,aAAa;aACxB;YACD,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;YAClC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;SAC3D;KACF,CAAC;IAEF,IAAM,IAAI,GAAG;QACX,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,GAAG,EAAE,EAAE;QACP,YAAY,EAAE,IAAI;KACnB,CAAC;IAEF,OAAO,CACL;QACE,kEAAgB;QAChB,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,mBAE5D,CACX,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/basicHBar/_example/Basic.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { BasicHBar } from '@tencent/tcharts-component';
+
+export default function Basic() {
+  const 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',
+    ],
+  };
+  const 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],
+    },
+  ];
+
+  const grid = {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 20,
+    containLabel: true,
+  };
+
+  return (
+    <>
+      <div>基础柱状图</div>
+      <BasicHBar yAxis={yAxis} dataSource={dataSource} grid={grid} height={500}>
+        默认
+      </BasicHBar>
+    </>
+  );
+}

package/dist/esm/basicHBar/_example/DiskBasic.d.ts

@@ -0,0 +1 @@
+export default function DiskBasic(): JSX.Element;

package/dist/esm/basicHBar/_example/DiskBasic.js

@@ -0,0 +1,43 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { BasicHBar } from '@tencent/tcharts-component';
+export default function DiskBasic() {
+    var options = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+            },
+        },
+        grid: {
+            left: 20,
+            right: 20,
+            bottom: 20,
+            top: 100,
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'value',
+            unit: 'GB',
+            formatter: function (value) {
+                console.log(value);
+                return value;
+            },
+        },
+        yAxis: {
+            type: 'category',
+            description: [],
+            data: ['ins-dtrqhgh1', 'ins-dtrqhgh2', 'ins-dtrqhgh3'],
+            axisLine: { show: true, lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' } },
+        },
+        dataSource: [
+            { name: 'CPU利用率1', names: ['c', 'd', 'e'], type: 'HBar', data: [3.766, 10, 20], maxData: [40, 50, 50] },
+            { name: 'CPU利用率2', names: ['ins-4jlfdagc-CPU利用率'], type: 'HBar', data: [4.883], maxData: [30] },
+            { name: 'CPU利用率3', names: ['a', 'b'], type: 'HBar', data: [3.11, 6.43], maxData: [20, 60] },
+        ],
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "\u78C1\u76D8\u5206\u533A\u56FE"),
+        React.createElement(BasicHBar, __assign({ height: 500 }, options))));
+}
+//# sourceMappingURL=DiskBasic.js.map

package/dist/esm/basicHBar/_example/DiskBasic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiskBasic.js","sourceRoot":"","sources":["../../../../src/basicHBar/_example/DiskBasic.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,IAAM,OAAO,GAAG;QACd,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE;gBAEX,IAAI,EAAE,QAAQ;aACf;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,GAAG,EAAE,GAAG;YACR,YAAY,EAAE,IAAI;SACnB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,UAAC,KAAK;gBACf,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gBACnB,OAAO,KAAK,CAAC;YACf,CAAC;SACF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,EAAE;YACf,IAAI,EAAE,CAAC,cAAc,EAAE,cAAc,EAAE,cAAc,CAAC;YACtD,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;SACnF;QACD,UAAU,EAAE;YACV,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE;YACvG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE;YAC/F,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE;SAC5F;KACF,CAAC;IACF,OAAO,CACL;QACE,kEAAgB;QAChB,oBAAC,SAAS,aAAC,MAAM,EAAE,GAAG,IAAM,OAAO,EAAI,CACtC,CACJ,CAAC;AACJ,CAAC"}

package/dist/esm/basicHBar/_example/DiskBasic.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { BasicHBar } from '@tencent/tcharts-component';
+
+export default function DiskBasic() {
+  const options = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+      },
+    },
+    grid: {
+      left: 20,
+      right: 20,
+      bottom: 20,
+      top: 100,
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'value',
+      unit: 'GB',
+      formatter: (value) => {
+        console.log(value);
+        return value;
+      },
+    },
+    yAxis: {
+      type: 'category',
+      description: [],
+      data: ['ins-dtrqhgh1', 'ins-dtrqhgh2', 'ins-dtrqhgh3'],
+      axisLine: { show: true, lineStyle: { color: '#f2f2f2', width: 1, type: 'solid' } },
+    },
+    dataSource: [
+      { name: 'CPU利用率1', names: ['c', 'd', 'e'], type: 'HBar', data: [3.766, 10, 20], maxData: [40, 50, 50] },
+      { name: 'CPU利用率2', names: ['ins-4jlfdagc-CPU利用率'], type: 'HBar', data: [4.883], maxData: [30] },
+      { name: 'CPU利用率3', names: ['a', 'b'], type: 'HBar', data: [3.11, 6.43], maxData: [20, 60] },
+    ],
+  };
+  return (
+    <>
+      <div>磁盘分区图</div>
+      <BasicHBar height={500} {...options} />
+    </>
+  );
+}

package/dist/esm/basicHBar/_example/LabelRotate.d.ts

@@ -0,0 +1 @@
+export default function LabelRotate(): JSX.Element;

package/dist/esm/basicHBar/_example/LabelRotate.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BasicHBar } from '@tencent/tcharts-component';
+export default function LabelRotate() {
+    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],
+        },
+    ];
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, "x\u8F74\u6587\u5B57\u65CB\u8F6C\u7684\u67F1\u72B6\u56FE"),
+        React.createElement(BasicHBar, { xAxis: xAxis, dataSource: dataSource, height: 500 }, "\u9ED8\u8BA4")));
+}
+//# sourceMappingURL=LabelRotate.js.map

package/dist/esm/basicHBar/_example/LabelRotate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelRotate.js","sourceRoot":"","sources":["../../../../src/basicHBar/_example/LabelRotate.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,WAAW;IACjC,IAAM,KAAK,GAAG;QACZ,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QACzB,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;KACxD,CAAC;IACF,IAAM,UAAU,GAAG;QACjB;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;SACxC;KACF,CAAC;IAEF,OAAO,CACL;QACE,2FAAqB;QACrB,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,mBAEhD,CACX,CACJ,CAAC;AACJ,CAAC"}