onesight-charts 0.0.1

package/lib/components/one-table/index.js

@@ -0,0 +1,156 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/one-table/index.jsx
+var one_table_exports = {};
+__export(one_table_exports, {
+  default: () => one_table_default
+});
+module.exports = __toCommonJS(one_table_exports);
+var import_echarts_for_react = __toESM(require("echarts-for-react"));
+var import_react = __toESM(require("react"));
+var LineChart = ({ data }) => {
+  const getOption = () => {
+    return {
+      legend: {
+        // data: legendData,
+        x: "center",
+        type: "plain",
+        bottom: 0,
+        padding: 0,
+        left: "center",
+        icon: "rect",
+        itemWidth: 16,
+        itemHeight: 4,
+        itemGap: 8,
+        // formatter: function (name) {
+        //   let value = legendCustom
+        //     ? handleCompareSeries(name, series)
+        //     : handleSeries(name, series);
+        //   let showName = name;
+        //   if (series.length >= 4) {
+        //     const strLen = 15;
+        //     if (name.length > strLen) {
+        //       showName = name.substring(0, strLen) + '...';
+        //     }
+        //   }
+        //   return isTranslation
+        //     ? `{labelName|${formatMessage({
+        //         id: `listening_${name}`,
+        //       })} }\n{labelMark|${value}}`
+        //     : legendCustom
+        //     ? `{labelName|${showName}}\n{labelMark|${value}}`
+        //     : `${name}`;
+        // },
+        textStyle: {
+          fontWeight: 500,
+          fontSize: 12,
+          color: "#364141",
+          lineHeight: 6,
+          rich: {
+            // 给labelName添加样式
+            labelName: {
+              fontWeight: 500,
+              fontSize: 12,
+              padding: [6, 6, 0, 0]
+            },
+            // 给labelMark添加样式
+            labelMark: {
+              color: "#7A8283",
+              fontSize: 12,
+              padding: [30, 0, 0, 0]
+            }
+          }
+        }
+      },
+      tooltip: {
+        trigger: "axis"
+      },
+      xAxis: {
+        type: "category",
+        axisLine: {
+          lineStyle: {
+            color: "#e5e5e5"
+          }
+        },
+        axisTick: {
+          show: true,
+          alignWithLabel: true,
+          length: 5
+        },
+        axisLabel: {
+          // formatter: function (value, index) {
+          //   return xAxisType === 'date'
+          //     ? formatDateXaxis(value)
+          //     : formatMessage({ id: `listening_${value}` });
+          // },
+          interval: "auto",
+          margin: 12,
+          color: "#515E5F",
+          fontWeight: 500,
+          fontSize: 12,
+          lineHeight: 20
+        },
+        splitLine: {
+          show: false,
+          interval: 0
+        },
+        boundaryGap: false
+        // data: xAxisData,
+      },
+      yAxis: {
+        type: "value",
+        minInterval: 1,
+        axisLabel: {
+          // formatter: function (value) {
+          //   let formatted = customize.numberFormatNull(value);
+          //   if (formatted.length < 4) {
+          //     // 假设最大长度为4
+          //     formatted = '   ' + formatted; // 在前面添加空格
+          //   }
+          //   return formatted;
+          // },
+          margin: 14,
+          color: "#515E5F",
+          fontSize: 12,
+          lineHeight: 20
+        },
+        splitLine: {
+          lineStyle: {
+            type: "dashed",
+            color: "#E5E5E5"
+          }
+        }
+      },
+      series: data,
+      animation: true
+    };
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_echarts_for_react.default, { option: getOption(), style: { height: 400 } });
+};
+var one_table_default = LineChart;

package/lib/components/one-table/index.scss

@@ -0,0 +1,5 @@
+.onesight-chart-pie {
+  width: 500px;
+  height: 340px;
+  border: 1px solid #e5e5e5;
+}

package/lib/components/pie/index.js

@@ -0,0 +1,131 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pie/index.jsx
+var pie_exports = {};
+__export(pie_exports, {
+  default: () => Pie
+});
+module.exports = __toCommonJS(pie_exports);
+var echarts = __toESM(require("echarts"));
+var import_react = require("react");
+var import_index = require("./index.scss");
+function Pie() {
+  const chartID = "chart-pie";
+  (0, import_react.useEffect)(() => {
+    ceartChart();
+  }, []);
+  const ceartChart = () => {
+    let myChart = echarts.init(document.getElementById(chartID), null, {
+      renderer: "svg"
+    });
+    let option = {
+      tooltip: {
+        show: false,
+        className: "pie-tooltip",
+        trigger: "item",
+        padding: 0
+      },
+      series: [
+        {
+          type: "pie",
+          radius: [70, 95],
+          itemStyle: {
+            borderColor: "#fff",
+            borderWidth: 2
+          },
+          label: {
+            show: false,
+            position: "center"
+          },
+          emphasis: {
+            label: {
+              show: true,
+              formatter: () => {
+                return "";
+              },
+              rich: {
+                n: {
+                  height: 40,
+                  padding: [0, 0, 12, 0],
+                  lineHeight: 16,
+                  fontWeight: 500,
+                  fontSize: 16,
+                  color: "#515e5f",
+                  align: "center"
+                },
+                v: {
+                  lineHeight: 36,
+                  fontWeight: 800,
+                  fontSize: 30,
+                  color: "#273333",
+                  align: "center",
+                  padding: [0, 0, 15, 0]
+                }
+              }
+            }
+          },
+          data: [
+            {
+              value: 5325,
+              name: "positive",
+              proportion: 0.0595,
+              type: 1,
+              itemStyle: {
+                color: "#1DA9A0"
+              }
+            },
+            {
+              value: 1879,
+              name: "negative",
+              proportion: 0.021,
+              type: 2,
+              itemStyle: {
+                color: "#EE6666"
+              }
+            },
+            {
+              value: 82344,
+              name: "neutral",
+              proportion: 0.9195,
+              type: 3,
+              itemStyle: {
+                color: "#bbbbbb"
+              }
+            }
+          ],
+          selectedMode: true,
+          selectedOffset: 0,
+          minAngle: 3
+        }
+      ]
+    };
+    myChart.setOption(option);
+  };
+  return /* @__PURE__ */ React.createElement("div", { id: chartID, className: "onesight-chart-pie" });
+}

package/lib/components/pie/index.scss

@@ -0,0 +1,5 @@
+.onesight-chart-pie {
+  width: 500px;
+  height: 340px;
+  border: 1px solid #e5e5e5;
+}