onesight-charts 0.0.1

package/lib/components/tooltip/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/tooltip/index.jsx
+var tooltip_exports = {};
+__export(tooltip_exports, {
+  default: () => tooltip_default
+});
+module.exports = __toCommonJS(tooltip_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 tooltip_default = LineChart;

package/lib/components/tooltip/index.scss

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

package/lib/index.js

@@ -0,0 +1,39 @@
+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/index.js
+var src_exports = {};
+__export(src_exports, {
+  line: () => import_line.default
+});
+module.exports = __toCommonJS(src_exports);
+var import_line = __toESM(require("./components/line"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  line
+});

package/lib/utils/chartUtils.js

@@ -0,0 +1,226 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/chartUtils.js
+var chartUtils_exports = {};
+__export(chartUtils_exports, {
+  calculateSeriesTotal: () => calculateSeriesTotal,
+  changeDataTypeEn: () => changeDataTypeEn,
+  computeFloatNull: () => computeFloatNull,
+  computePos: () => computePos,
+  convertSeriesData: () => convertSeriesData,
+  dealPath: () => dealPath,
+  numberFormatMust: () => numberFormatMust,
+  numberFormatNull: () => numberFormatNull,
+  toggleAxisPointer: () => toggleAxisPointer
+});
+module.exports = __toCommonJS(chartUtils_exports);
+function isZH() {
+  return true;
+}
+function isFloat(n) {
+  return /^-?\d*\.\d+$/.test(n);
+}
+function changeDataTypeEn(s, number = 2) {
+  let n = number;
+  if (s === null) {
+    return "-";
+  }
+  if (!s && s !== 0 && s !== "0") {
+    return "0";
+  }
+  var f = "";
+  if (Number(s) < 0) {
+    f = "-";
+  }
+  n = n >= 0 && n <= 20 ? n : 2;
+  s = parseFloat((s + "").replace(/[^\d\.]/g, ""));
+  let bese = Math.pow(10, n);
+  s = s * bese;
+  s = s.toFixed() / bese + "";
+  if (isFloat(s)) {
+    let rs = s.indexOf(".");
+    if (rs < 0) {
+      rs = s.length;
+      s += ".";
+    }
+    while (s.length <= rs + n) {
+      s += "0";
+    }
+  }
+  var l = s.split(".")[0].split("").reverse();
+  var r = s.split(".")[1];
+  var t = "";
+  for (var i = 0; i < l.length; i++) {
+    t += l[i] + ((i + 1) % 3 === 0 && i + 1 !== l.length ? "," : "");
+  }
+  var sendStr = "";
+  if (n !== 0 && r) {
+    sendStr = t.split("").reverse().join("") + "." + r;
+  } else {
+    sendStr = t.split("").reverse().join("");
+  }
+  return f + sendStr;
+}
+function numberFormatMust(num, fixed) {
+  let value = num;
+  let fixedNum = isZH() ? 2 : 1;
+  let originNum = num;
+  if (num < 0) {
+    num = Math.abs(num);
+  }
+  isZH() ? num >= 1e8 ? value = changeDataTypeEn(num / 1e8, fixedNum) + "亿" : num >= 1e4 ? value = changeDataTypeEn(num / 1e4, fixedNum) + "万" : value = changeDataTypeEn(num, fixedNum) : num >= 1e9 ? value = changeDataTypeEn(num / 1e9, fixedNum) + "B" : num >= 1e6 ? value = changeDataTypeEn(num / 1e6, fixedNum) + "M" : num >= 1e3 ? value = changeDataTypeEn(num / 1e3, fixedNum) + "K" : value = changeDataTypeEn(num, fixedNum);
+  if (originNum < 0) {
+    return `-${value}`;
+  }
+  return value;
+}
+function isNumNull(num) {
+  return num === null || num === void 0 || isNaN(num);
+}
+function computeFloatNull(num, per = 100, unit = "%") {
+  if (isNumNull(num)) {
+    return "-";
+  } else if (num === 0) {
+    return "0" + unit;
+  } else {
+    return (num >= 4e-5 ? changeDataTypeEn(num * per, 2) : "＜0.01") + unit;
+  }
+}
+function numberFormatNull(num, fixed) {
+  return isNumNull(num) ? "-" : numberFormatMust(num, fixed);
+}
+function dealPath(elementId, sawtooth = false) {
+  const paths = document.querySelectorAll("#" + elementId + " path");
+  paths.forEach(function(path) {
+    const transform = path.getAttribute("transform");
+    if (transform && transform.includes("translate")) {
+      const matches = transform.match(/translate\(([^)]+)\)/);
+      if (matches && matches[1]) {
+        const values = matches[1].split(" ").map(function(value) {
+          return Math.round(parseFloat(value));
+        });
+        const newTransform = "translate(" + values.join(" ") + ")";
+        path.setAttribute("transform", newTransform);
+      }
+    } else {
+      if (sawtooth) {
+        path.style.shapeRendering = "crispEdges";
+      }
+    }
+  });
+}
+function modifyStyle(leftValue, currentWidth) {
+  const style = document.createElement("style");
+  style.innerHTML = `
+    .onesight-line-tooltip .triangle-down {
+      width: ${currentWidth}px !important;
+    }
+    .onesight-line-tooltip .triangle-down::after {
+      left: ${leftValue} !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+function computePos(xPoint, currentWidth) {
+  if (currentWidth) {
+    let res = xPoint - currentWidth / 2;
+    let leftValue = 0;
+    if (currentWidth === 340) {
+      leftValue = 50;
+    } else {
+      leftValue = 30;
+    }
+    if (res < 35) {
+      res = xPoint - leftValue;
+      modifyStyle(`${leftValue}px`, currentWidth);
+    } else if (res > 730) {
+      const val = currentWidth - leftValue;
+      res = xPoint - val;
+      modifyStyle(`${val}px`, currentWidth);
+    } else {
+      modifyStyle("50%", currentWidth);
+    }
+    return res;
+  }
+}
+var calculateSeriesTotal = (data) => {
+  return Object.entries(data).reduce((acc, [key, values]) => {
+    acc[key] = values.reduce((sum, value) => sum + value, 0);
+    return acc;
+  }, {});
+};
+var convertSeriesData = (seriesData) => {
+  return Object.entries(seriesData).map(([name, data]) => {
+    return {
+      type: "line",
+      symbol: "emptyCircle",
+      symbolSize: 8,
+      showSymbol: false,
+      connectNulls: true,
+      lineStyle: {
+        width: 3
+      },
+      smooth: true,
+      triggerLineEvent: false,
+      emphasis: {
+        focus: "series",
+        itemStyle: {
+          borderWidth: 2,
+          color: "#fff"
+        }
+      },
+      z: 2,
+      name,
+      data: data.map((value) => ({
+        value,
+        itemStyle: {
+          opacity: 1
+        },
+        select: {
+          itemStyle: {
+            opacity: 1
+          }
+        }
+      }))
+    };
+  });
+};
+function toggleAxisPointer(myChart, show) {
+  myChart.setOption({
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: show ? "rgba(0, 0, 0, 0.24)" : "rgba(0, 0, 0, 0)"
+        }
+      }
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  calculateSeriesTotal,
+  changeDataTypeEn,
+  computeFloatNull,
+  computePos,
+  convertSeriesData,
+  dealPath,
+  numberFormatMust,
+  numberFormatNull,
+  toggleAxisPointer
+});

package/lib/utils/colors.js

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/colors.js
+var colors_exports = {};
+__export(colors_exports, {
+  darkThemeColors: () => darkThemeColors,
+  defaultChartColors: () => defaultChartColors,
+  getChartColors: () => getChartColors,
+  lightThemeColors: () => lightThemeColors,
+  pieChartColors: () => pieChartColors
+});
+module.exports = __toCommonJS(colors_exports);
+var defaultChartColors = [
+  "#1DA9A0",
+  "#5274E8",
+  "#F8AF1D",
+  "#D54CB6",
+  "#51A6E6",
+  "#CB3432",
+  "#EE6666",
+  "#6C5CCE",
+  "#57C464",
+  "#FFED49",
+  "#8FE6D1",
+  "#71B3D2",
+  "#814F9E",
+  "#E85D9F",
+  "#78FA3C",
+  "#F8C6A4",
+  "#166364",
+  "#E1A1FE",
+  "#D0F52B",
+  "#9ECCF6"
+];
+var lightThemeColors = [];
+var darkThemeColors = [];
+var pieChartColors = [];
+function getChartColors(chartType, theme = "light") {
+  switch (chartType) {
+    case "pie":
+      return pieChartColors;
+    case "line":
+    case "bar":
+    default:
+      return theme === "light" ? lightThemeColors : darkThemeColors;
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  darkThemeColors,
+  defaultChartColors,
+  getChartColors,
+  lightThemeColors,
+  pieChartColors
+});

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "onesight-charts",
+  "version": "0.0.1",
+  "private": false,
+  "description": "OneSight前端图表公共组件库",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "dist"
+  ],
+  "scripts": {
+    "build": "father build",
+    "build:watch": "father dev",
+    "dev": "dumi dev",
+    "docs:build": "dumi build",
+    "doctor": "father doctor",
+    "lint": "npm run lint:es && npm run lint:css",
+    "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
+    "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
+    "prepare": "husky install && dumi setup",
+    "prepublishOnly": "father doctor && npm run build",
+    "start": "npm run dev"
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.{md,json}": [
+      "prettier --write --no-error-on-unmatched-pattern"
+    ],
+    "*.{css,less}": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "dependencies": {
+    "echarts": "^5.4.3",
+    "echarts-for-react": "^3.0.2"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@umijs/lint": "^4.0.0",
+    "dumi": "^2.2.13",
+    "dumi-theme-antd": "^0.3.12",
+    "eslint": "^8.23.0",
+    "father": "^4.1.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^3.0.0",
+    "prettier-plugin-packagejson": "^2.2.18",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "stylelint": "^14.9.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "wudong"
+  ]
+}