onesight-charts 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) wudong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# onesight-charts
+
+这是 OneSight 前端图表的公共组件库，提供了一系列用于数据可视化的图表组件。
+
+## 开发指南
+
+```bash
+# 安装依赖
+$ pnpm install
+
+# 通过文档演示开发图表库
+$ pnpm start
+
+# 构建图表库源代码
+$ pnpm run build
+
+# 监听模式下构建图表库源代码
+$ pnpm run build:watch
+
+# 构建文档
+$ pnpm run docs:build
+
+# 检查项目潜在问题
+$ pnpm run doctor

package/dist/components/line/demo.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import LineChart from "./index.jsx";
+var xAxis = ['07/25', '07/26', '07/27', '07/28', '07/29', '07/30', '07/31'];
+var seriesData = {
+  Facebook: [1002, 831, 960, 750, 1451, 1717, 903],
+  X: [22094, 20075, 17410, 12374, 13413, 13904, 6895]
+};
+export default (function () {
+  return /*#__PURE__*/React.createElement(LineChart, {
+    xAxis: xAxis,
+    seriesData: seriesData
+  });
+});

package/dist/components/line/index.js

@@ -0,0 +1,294 @@
+import * as echarts from 'echarts';
+import { useEffect, useRef } from 'react';
+import { calculateSeriesTotal, convertSeriesData, dealPath, numberFormatMust, numberFormatNull, toggleAxisPointer } from "../../utils/chartUtils";
+import { defaultChartColors } from "../../utils/colors";
+import { createCustomTooltip } from "./tooltipConfig";
+import "./style.scss";
+function Line(props) {
+  var _props$id = props.id,
+    id = _props$id === void 0 ? 'lineId' : _props$id,
+    _props$width = props.width,
+    width = _props$width === void 0 ? '100%' : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? '400px' : _props$height,
+    color = props.color,
+    xAxis = props.xAxis,
+    seriesData = props.seriesData,
+    tooltipClassName = props.tooltipClassName,
+    _props$legendValue = props.legendValue,
+    legendValue = _props$legendValue === void 0 ? true : _props$legendValue,
+    _props$showRate = props.showRate,
+    showRate = _props$showRate === void 0 ? true : _props$showRate,
+    _props$tooltipTotalNa = props.tooltipTotalName,
+    tooltipTotalName = _props$tooltipTotalNa === void 0 ? '总计' : _props$tooltipTotalNa,
+    _props$tooltipPositio = props.tooltipPosition,
+    tooltipPosition = _props$tooltipPositio === void 0 ? true : _props$tooltipPositio;
+  var chartRef = useRef(null);
+  useEffect(function () {
+    ceartChart();
+  }, [seriesData]);
+  var seriesTotal = legendValue ? calculateSeriesTotal(seriesData) : {};
+  var ceartChart = function ceartChart() {
+    var chartColor = color || defaultChartColors;
+    var myChart = echarts.init(chartRef.current, null, {
+      renderer: 'svg'
+    });
+    var tooltipConfig = createCustomTooltip({
+      id: id,
+      tooltipClassName: tooltipClassName,
+      myChart: myChart,
+      seriesData: seriesData,
+      tooltipTotalName: tooltipTotalName,
+      showRate: showRate,
+      tooltipPosition: tooltipPosition
+    });
+    var series = convertSeriesData(seriesData);
+    var legendData = Object.keys(seriesData).map(function (item) {
+      return {
+        name: item
+      };
+    });
+    var option = {
+      legend: {
+        data: legendData,
+        x: 'center',
+        type: 'plain',
+        bottom: 0,
+        padding: 0,
+        left: 'center',
+        icon: 'rect',
+        itemWidth: 16,
+        itemHeight: 4,
+        itemGap: 8,
+        formatter: function formatter(name) {
+          var value = legendValue ? numberFormatMust(seriesTotal[name] || 0) : 0;
+          var showName = name;
+          if (seriesData.length >= 4) {
+            var strLen = 15;
+            if (name.length > strLen) {
+              showName = name.substring(0, strLen) + '...';
+            }
+          }
+          return legendValue ? "{labelName|".concat(showName, "}\n{labelMark|").concat(value, "}") : "{labelName|".concat(showName, "}");
+        },
+        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: tooltipConfig,
+      color: chartColor,
+      animation: false,
+      grid: {
+        top: '24px',
+        bottom: 40,
+        left: 4,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        axisLine: {
+          lineStyle: {
+            color: '#e5e5e5'
+          }
+        },
+        axisTick: {
+          show: true,
+          alignWithLabel: true,
+          length: 5
+        },
+        axisLabel: {
+          interval: 'auto',
+          margin: 12,
+          color: '#515E5F',
+          fontWeight: 500,
+          fontSize: 12,
+          lineHeight: 20
+        },
+        splitLine: {
+          show: false,
+          interval: 0
+        },
+        boundaryGap: false,
+        data: xAxis
+      },
+      yAxis: {
+        type: 'value',
+        minInterval: 1,
+        axisLabel: {
+          formatter: function formatter(value) {
+            var formatted = 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: series
+    };
+    myChart.off('mouseover');
+    myChart.on('mouseover', function (params) {
+      // 操作线上选中点
+      var updateOption = {
+        series: [],
+        legend: {
+          data: []
+        }
+      };
+      option.series.forEach(function (item) {
+        if (params.seriesName === item.name) {
+          item.showSymbol = true;
+          item.data.forEach(function (val, index) {
+            if (index === params.dataIndex) {
+              val.symbolSize = 12;
+            } else {
+              val.symbolSize = 0;
+            }
+          });
+        }
+      });
+      // 操作图例
+      option.legend.data.forEach(function (item) {
+        if (params.seriesName !== item.name) {
+          item.textStyle = {};
+          item.itemStyle = {};
+          item.textStyle.opacity = 0.2;
+          item.itemStyle.opacity = 0.2;
+        }
+      });
+      updateOption.series = option.series;
+      updateOption.legend.data = option.legend.data;
+      myChart.setOption(updateOption);
+    });
+    myChart.off('mouseout');
+    myChart.on('mouseout', function (params) {
+      var updateOption = {
+        series: [],
+        legend: {
+          data: []
+        }
+      };
+      // 操作线上选中点
+      option.series.forEach(function (item) {
+        if (params.seriesName === item.name) {
+          item.showSymbol = false;
+          item.data.forEach(function (val) {
+            val.symbolSize = 8;
+          });
+        }
+      });
+      // 操作图例
+      option.legend.data.forEach(function (item) {
+        item.textStyle = {};
+        item.itemStyle = {};
+        item.textStyle.opacity = 1;
+        item.itemStyle.opacity = 1;
+      });
+      updateOption.series = option.series;
+      updateOption.legend.data = option.legend.data;
+      myChart.setOption(updateOption);
+      var flag = false;
+      var pixelPoint = myChart.convertToPixel({
+        seriesIndex: params.seriesIndex
+      }, [params.dataIndex, params.value]);
+      if (params && params.event && params.event.offsetX) {
+        if (params.dataIndex === 0 && params.event.offsetX >= pixelPoint[0]) {
+          flag = true;
+        } else if (params.dataIndex === xAxis.length - 1 && params.event.offsetX <= pixelPoint[0]) {
+          flag = true;
+        } else if (params.dataIndex !== 0 && params.dataIndex !== xAxis.length - 1) {
+          flag = true;
+        }
+      }
+      if (flag) {
+        myChart.dispatchAction({
+          type: 'highlight',
+          dataIndex: params.dataIndex
+        });
+      }
+      var mouseoutFlag = true;
+      myChart.on('hideTip', function (event) {
+        if (mouseoutFlag) {
+          myChart.dispatchAction({
+            type: 'downplay',
+            dataIndex: params.dataIndex
+          });
+          mouseoutFlag = false;
+        }
+      });
+    });
+    var currentIndex = 0;
+    var flagIndex = 0;
+    myChart.off('showTip');
+    myChart.on('showTip', function (event) {
+      if (flagIndex !== event.dataIndex) {
+        toggleAxisPointer(myChart, true);
+        myChart.dispatchAction({
+          type: 'highlight',
+          dataIndex: event.dataIndex
+        });
+        currentIndex = event.dataIndex;
+        flagIndex = event.dataIndex;
+      }
+    });
+    myChart.setOption(option, true);
+
+    // 提高图例清晰度
+    myChart.off('rendered');
+    myChart.on('rendered', function () {
+      dealPath(id);
+    });
+
+    // 增强交互效果
+    var element = document.querySelector(".".concat(id));
+    if (element) {
+      element.addEventListener('mouseleave', function (event) {
+        if (event && element.offsetHeight && event.offsetY < element.offsetHeight - 2) {
+          toggleAxisPointer(myChart, false);
+          flagIndex = 0;
+          myChart.dispatchAction({
+            type: 'downplay',
+            dataIndex: currentIndex
+          });
+        }
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: chartRef,
+    id: id,
+    style: {
+      width: width,
+      height: height
+    }
+  });
+}
+export default Line;

package/dist/components/line/style.scss

@@ -0,0 +1,110 @@
+.onesight-line-tooltip {
+  min-width: 280px;
+  border-color: #dddddd;
+  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.13);
+  border-radius: 8px;
+  padding: 0;
+  .tooltip-wrap {
+    position: relative;
+  }
+  .tooltip-head {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-bottom: 1px solid #eeeeee;
+    padding: 10px 16px 10px;
+    font-weight: bold;
+    font-size: 15px;
+    color: #364141;
+    line-height: 22px;
+  }
+  .tooltip-body {
+    padding: 0 0 0 8px;
+    max-height: 213.64px;
+    overflow-y: auto;
+    .total {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      line-height: 20px;
+      font-size: 14px;
+      font-weight: 600;
+      color: #364141;
+      padding: 14px 8px 2px 8px;
+    }
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      line-height: 20px;
+      font-weight: 400;
+      font-size: 14px;
+      color: #515e5f;
+      cursor: pointer;
+      border-radius: 6px;
+      margin-top: 8px;
+      margin-right: 1px;
+      height: 32px;
+      padding: 0 8px;
+      .l {
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: auto;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .l-color {
+        display: inline-block;
+        margin-right: 6px;
+        margin-left: 2px;
+        margin-bottom: 3px;
+        width: 16px;
+        height: 4px;
+        vertical-align: middle;
+      }
+      .r {
+        padding-left: 6px;
+        flex-grow: 0;
+        flex-shrink: 0;
+        white-space: nowrap;
+        .num {
+          vertical-align: baseline;
+          font-weight: bold;
+        }
+      }
+    }
+    .item:last-child {
+      margin-bottom: 8px;
+      border-bottom: none;
+    }
+    .item:only-child {
+      line-height: 32px;
+    }
+    .item:hover {
+      background: #f3f4f4;
+    }
+  }
+  .triangle-down {
+    width: 280px;
+    height: 12px;
+    background: transparent;
+    position: absolute; /* 使用绝对定位 */
+    bottom: -12px; /* 将三角形移动到div的外部 */
+    left: 50%; /* 水平居中 */
+    transform: translateX(-50%); /* 精确调整以确保居中 */
+  }
+
+  .triangle-down::after {
+    content: '';
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid white;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    filter: drop-shadow(0 1px 0 #dddddd);
+  }
+}

package/dist/components/line/tooltipConfig.js

@@ -0,0 +1,93 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { changeDataTypeEn, computeFloatNull, computePos } from "../../utils/chartUtils";
+export var createCustomTooltip = function createCustomTooltip(_ref) {
+  var id = _ref.id,
+    tooltipClassName = _ref.tooltipClassName,
+    myChart = _ref.myChart,
+    seriesData = _ref.seriesData,
+    tooltipTotalName = _ref.tooltipTotalName,
+    showRate = _ref.showRate,
+    tooltipPosition = _ref.tooltipPosition;
+  return {
+    className: "onesight-line-tooltip ".concat(tooltipClassName, " ").concat(id),
+    trigger: 'axis',
+    enterable: true,
+    axisPointer: {
+      z: 1,
+      show: true,
+      type: 'line',
+      lineStyle: {
+        color: 'rgba(0, 0, 0, 0.24)',
+        type: 'solid',
+        width: 2
+      }
+    },
+    padding: 0,
+    // showContent: true,
+    // alwaysShowContent: true,
+    // hideDelay: 1000000000,
+    position: tooltipPosition ? function (point, params) {
+      var pixelPoint = myChart.convertToPixel({
+        seriesIndex: params[0].seriesIndex
+      }, [params[0].dataIndex, params[0].value]);
+      var element = document.querySelector(".".concat(id));
+      var yValue = 0;
+      var currentWidth = 0;
+      if (element) {
+        if (element.offsetHeight) {
+          yValue = -element.offsetHeight + 14;
+        }
+        if (element.offsetWidth) {
+          currentWidth = element.offsetWidth;
+        }
+      }
+      var x = computePos(pixelPoint[0], currentWidth);
+      return [x, yValue];
+    } : undefined,
+    formatter: function formatter(res) {
+      if (!res.some(function (i) {
+        return i.value !== undefined && i.value !== null;
+      })) {
+        return '';
+      }
+      var total = 0;
+      var dataArr = _toConsumableArray(res);
+      res.forEach(function (v) {
+        total += v.value || 0;
+      });
+      var resNameArr = res.map(function (item) {
+        return item.seriesName;
+      });
+      var resColorArr = res.map(function (item) {
+        return item.color;
+      });
+      var allName = Object.keys(seriesData);
+      var currentName = allName.filter(function (item) {
+        return resNameArr.includes(item);
+      });
+      dataArr = currentName.map(function (item, index) {
+        var dataIndex = res[0].dataIndex;
+        var num = seriesData[item][dataIndex];
+        return {
+          color: resColorArr[index],
+          seriesName: item,
+          value: num,
+          proportion: num / total,
+          date: res[0].axisValue
+        };
+      });
+      var marginRight = 7;
+      if (dataArr.length > 4) {
+        marginRight = 3;
+      }
+      return "\n              <div class='tooltip-wrap'>\n                <div class='tooltip-head'>\n                    ".concat(res[0].axisValue, "\n                </div>\n                <div class='tooltip-body' style=\"margin-right:").concat(marginRight, "px\">\n                    ").concat(dataArr.length > 1 ? "\n                        <div class='total'>\n                        <div class='l'>\n                            ".concat(tooltipTotalName, "\n                        </div>\n                        <div class='r'>\n                            ").concat(changeDataTypeEn(total), "\n                        </div>\n                        </div>\n                    ") : '', "\n                    ").concat(dataArr.map(function (item) {
+        return "\n                    <div class='item' key='".concat(item.seriesName, "'>\n                        <div class='l'>\n                        <span class='l-color' style=\"background-color:").concat(item.color, "\"></span>\n                        <span>\n                            ").concat(item.seriesName, "\n                        </span>\n                        </div>\n                        <div class='r'>\n                        ").concat(dataArr.length > 1 && showRate ? "<span class='rate'>(".concat(computeFloatNull(item.proportion), ")</span>") : '', "\n                        <span class='num'>\n                            ").concat(changeDataTypeEn(item.value), "\n                        </span>\n                        </div>\n                    </div>\n                    ");
+      }).join(''), "\n                </div>\n                ").concat(tooltipPosition ? '<div class="triangle-down"></div>' : '', "\n              </div>\n            ");
+    }
+  };
+};