onesight-charts 0.7.2 → 0.7.4

package/es/components/brush-line/demo/base.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import BrushLine from "../index";
 function App() {
-  var xData = ['2025.10.29', '2025.10.30', '2025.10.31', '2025.11.01', '2025.11.02', '2025.11.03', '2025.11.04', '2025.11.05', '2025.11.06', '2025.11.07', '2025.11.08', '2025.11.09', '2025.11.10'];
+  var xData = ['2025-10-14 08:00:00', '2025-10-15 08:00:00', '2025-10-16 08:00:00', '2025-10-17 08:00:00', '2025-10-18 08:00:00', '2025-10-19 08:00:00', '2025-10-20 08:00:00', '2025-10-21 08:00:00', '2025-10-22 08:00:00', '2025-10-23 08:00:00', '2025-10-24 08:00:00', '2025-10-25 08:00:00', '2025-10-26 08:00:00'];
   var yData = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300];
 
   // type: 'dataPointType' | 'tooltipType'

package/es/components/brush-line/index.js

@@ -1,3 +1,9 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import * as echarts from 'echarts';
 import React, { useEffect, useRef } from 'react';
 import { numberFormat } from "../../utils/chartUtils";
@@ -16,9 +22,40 @@ function BrushLine(props) {
     _props$handleClick = props.handleClick,
     handleClick = _props$handleClick === void 0 ? function () {} : _props$handleClick;
   var chartRef = useRef(null);
+
+  // 创建别名映射（目前为空，如果将来需要支持别名可以扩展）
+  var aliasMap = {};
   useEffect(function () {
     init();
+    bindClickEvents();
+    return function () {
+      unbindClickEvents();
+    };
   }, []);
+  var onChartClick = function onChartClick(event) {
+    var seriesNameElement = event.target.closest('.item');
+    if (seriesNameElement) {
+      var seriesItem = seriesNameElement.getAttribute('data-series-item');
+      var seriesData = JSON.parse(seriesItem);
+      // 使用 dataIndex 从原始 xData 获取原始日期
+      if (seriesData.dataIndex !== undefined && xData && Array.isArray(xData) && xData[seriesData.dataIndex]) {
+        seriesData.date = xData[seriesData.dataIndex];
+      }
+      // 添加 alias 到 seriesData
+      if (seriesData.seriesName && aliasMap[seriesData.seriesName]) {
+        seriesData.alias = aliasMap[seriesData.seriesName];
+      }
+      handleClick && handleClick('tooltipType', seriesData);
+    }
+  };
+  var bindClickEvents = function bindClickEvents() {
+    var chartElement = chartRef.current;
+    chartElement && chartElement.addEventListener('click', onChartClick);
+  };
+  var unbindClickEvents = function unbindClickEvents() {
+    var chartElement = chartRef.current;
+    chartElement && chartElement.removeEventListener('click', onChartClick);
+  };
   function formatNum(d) {
     if (isNaN(d) || d === null) {
       return '-';
@@ -26,6 +63,48 @@ function BrushLine(props) {
       return numberFormat(d);
     }
   }
+  function formatDateTime(dateTimeStr) {
+    // 将 "2025-10-14 08:00:00" 格式转换为 "10/14\n08:00" (两行显示)
+    if (typeof dateTimeStr === 'string' && dateTimeStr.includes('-')) {
+      var dateTime = dateTimeStr.split(' ');
+      if (dateTime.length === 2) {
+        var datePart = dateTime[0]; // "2025-10-14"
+        var timePart = dateTime[1]; // "08:00:00"
+        var _datePart$split = datePart.split('-'),
+          _datePart$split2 = _slicedToArray(_datePart$split, 3),
+          year = _datePart$split2[0],
+          month = _datePart$split2[1],
+          day = _datePart$split2[2];
+        var _timePart$split = timePart.split(':'),
+          _timePart$split2 = _slicedToArray(_timePart$split, 2),
+          hour = _timePart$split2[0],
+          minute = _timePart$split2[1];
+        return "".concat(month, "/").concat(day, "\n").concat(hour, ":").concat(minute);
+      }
+    }
+    return dateTimeStr;
+  }
+  function formatDateTimeForTooltip(dateTimeStr) {
+    // 将 "2025-10-14 08:00:00" 格式转换为 "10/14 08:00" (tooltip 中单行显示)
+    if (typeof dateTimeStr === 'string' && dateTimeStr.includes('-')) {
+      var dateTime = dateTimeStr.split(' ');
+      if (dateTime.length === 2) {
+        var datePart = dateTime[0]; // "2025-10-14"
+        var timePart = dateTime[1]; // "08:00:00"
+        var _datePart$split3 = datePart.split('-'),
+          _datePart$split4 = _slicedToArray(_datePart$split3, 3),
+          year = _datePart$split4[0],
+          month = _datePart$split4[1],
+          day = _datePart$split4[2];
+        var _timePart$split3 = timePart.split(':'),
+          _timePart$split4 = _slicedToArray(_timePart$split3, 2),
+          hour = _timePart$split4[0],
+          minute = _timePart$split4[1];
+        return "".concat(month, "/").concat(day, " ").concat(hour, ":").concat(minute);
+      }
+    }
+    return dateTimeStr;
+  }
   var init = function init() {
     var myChart = null;
     var myDom = chartRef.current;
@@ -49,8 +128,17 @@ function BrushLine(props) {
         formatter: function formatter(res) {
           var _res$ = res[0],
             axisValue = _res$.axisValue,
-            data = _res$.data;
-          return "<div class=\"brush-line-tooltip-wrap\">\n                    <div class='brush-line-tooltip-title'>".concat(axisValue, "</div>\n                    <div class=\"brush-line-tooltip-content\">\n                      <span class=\"brush-line-tooltip-item\">\n                        <i class=\"brush-line-tooltip-icon\" style=\"background:#1DA9A0\"></i>\n                        ").concat(tooltipItemName, "\n                      </span>\n                      <span class=\"brush-line-tooltip-item-value\">").concat(formatNum(data), "</span>\n                    </div>\n                  </div>");
+            data = _res$.data,
+            dataIndex = _res$.dataIndex;
+          // 构建 seriesData 对象，用于点击事件
+          var seriesData = {
+            seriesName: tooltipItemName,
+            value: data,
+            date: axisValue,
+            dataIndex: dataIndex,
+            color: '#1DA9A0'
+          };
+          return "<div class=\"brush-line-tooltip-wrap\">\n                    <div class='brush-line-tooltip-title'>".concat(formatDateTimeForTooltip(axisValue), "</div>\n                    <div class=\"brush-line-tooltip-content\">\n                      <span class=\"brush-line-tooltip-item item\" data-series-item='").concat(JSON.stringify(seriesData), "'>\n                        <i class=\"brush-line-tooltip-icon\" style=\"background:#1DA9A0\"></i>\n                        ").concat(tooltipItemName, "\n                      </span>\n                      <span class=\"brush-line-tooltip-item-value\">").concat(formatNum(data), "</span>\n                    </div>\n                  </div>");
         }
       },
       grid: {
@@ -80,7 +168,7 @@ function BrushLine(props) {
           fontSize: 12,
           lineHeight: 15,
           formatter: function formatter(v) {
-            return '2025.10.29';
+            return formatDateTime(v);
           }
         },
         axisPointer: {

package/es/components/stacked-bar/demo/base.js

@@ -1,7 +1,9 @@
 import { StackedBar } from "../../..";
+import React from 'react';
 var yAxisData = ['英语', '中文', '日语', '西班牙语', '韩语', '法语', '越南语'];
 var series = [{
   name: '编辑人测试5',
+  alias: '别名1',
   type: 'bar',
   stack: 'total',
   label: {
@@ -17,6 +19,7 @@ var series = [{
   },
   barWidth: 16,
   barMinHeight: 2,
+  color: 'red',
   data: [{
     total: 104,
     monitor_id: 7230265,
@@ -69,6 +72,7 @@ var series = [{
   }]
 }, {
   name: '编辑人测试1',
+  alias: '别名2',
   type: 'bar',
   stack: 'total',
   label: {
@@ -84,6 +88,7 @@ var series = [{
   },
   barWidth: 16,
   barMinHeight: 2,
+  color: 'blue',
   data: [{
     total: 210,
     monitor_id: 7020210,
@@ -137,6 +142,7 @@ var series = [{
   }]
 }, {
   name: '测试对比分享3',
+  alias: '别名3',
   type: 'bar',
   stack: 'total',
   label: {
@@ -152,6 +158,7 @@ var series = [{
   },
   barWidth: 16,
   barMinHeight: 2,
+  color: 'green',
   data: [{
     total: null,
     monitor_id: 7230266,
@@ -209,6 +216,7 @@ var series = [{
   }]
 }, {
   name: '测试时间更新5',
+  alias: '别名4',
   type: 'bar',
   stack: 'total',
   label: {
@@ -224,6 +232,7 @@ var series = [{
   },
   barWidth: 16,
   barMinHeight: 2,
+  color: 'yellow',
   data: [{
     total: 144,
     monitor_id: 7080262,

package/es/components/stacked-bar/index.js

@@ -243,7 +243,8 @@ function StackedBar(props) {
                 value: num,
                 proportion: num / total,
                 name: res[0].name,
-                originalName: originalName
+                originalName: originalName,
+                alias: item.alias
               };
             });
           }
@@ -385,7 +386,14 @@ function StackedBar(props) {
     myChart.off('click');
     myChart.on('click', function (params) {
       // 点击回调函数
-      handleClick && handleClick('dataPointType', params);
+      // 从 series 中找到对应的 alias 字段
+      var seriesItem = series.find(function (s) {
+        return s.name === params.seriesName;
+      });
+      var paramsWithAlias = _objectSpread(_objectSpread({}, params), {}, {
+        alias: seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.alias
+      });
+      handleClick && handleClick('dataPointType', paramsWithAlias);
     });
     var currentIndex = 0;
     myChart.off('showTip');

package/lib/components/brush-line/demo/base.js

@@ -36,19 +36,19 @@ var import_react = __toESM(require("react"));
 var import__ = __toESM(require("../index"));
 function App() {
   const xData = [
-    "2025.10.29",
-    "2025.10.30",
-    "2025.10.31",
-    "2025.11.01",
-    "2025.11.02",
-    "2025.11.03",
-    "2025.11.04",
-    "2025.11.05",
-    "2025.11.06",
-    "2025.11.07",
-    "2025.11.08",
-    "2025.11.09",
-    "2025.11.10"
+    "2025-10-14 08:00:00",
+    "2025-10-15 08:00:00",
+    "2025-10-16 08:00:00",
+    "2025-10-17 08:00:00",
+    "2025-10-18 08:00:00",
+    "2025-10-19 08:00:00",
+    "2025-10-20 08:00:00",
+    "2025-10-21 08:00:00",
+    "2025-10-22 08:00:00",
+    "2025-10-23 08:00:00",
+    "2025-10-24 08:00:00",
+    "2025-10-25 08:00:00",
+    "2025-10-26 08:00:00"
   ];
   const yData = [
     100,

package/lib/components/brush-line/index.js

@@ -47,9 +47,36 @@ function BrushLine(props) {
     }
   } = props;
   const chartRef = (0, import_react.useRef)(null);
+  const aliasMap = {};
   (0, import_react.useEffect)(() => {
     init2();
+    bindClickEvents();
+    return () => {
+      unbindClickEvents();
+    };
   }, []);
+  const onChartClick = (event) => {
+    const seriesNameElement = event.target.closest(".item");
+    if (seriesNameElement) {
+      const seriesItem = seriesNameElement.getAttribute("data-series-item");
+      const seriesData = JSON.parse(seriesItem);
+      if (seriesData.dataIndex !== void 0 && xData && Array.isArray(xData) && xData[seriesData.dataIndex]) {
+        seriesData.date = xData[seriesData.dataIndex];
+      }
+      if (seriesData.seriesName && aliasMap[seriesData.seriesName]) {
+        seriesData.alias = aliasMap[seriesData.seriesName];
+      }
+      handleClick && handleClick("tooltipType", seriesData);
+    }
+  };
+  const bindClickEvents = () => {
+    const chartElement = chartRef.current;
+    chartElement && chartElement.addEventListener("click", onChartClick);
+  };
+  const unbindClickEvents = () => {
+    const chartElement = chartRef.current;
+    chartElement && chartElement.removeEventListener("click", onChartClick);
+  };
   function formatNum(d) {
     if (isNaN(d) || d === null) {
       return "-";
@@ -57,6 +84,33 @@ function BrushLine(props) {
       return (0, import_chartUtils.numberFormat)(d);
     }
   }
+  function formatDateTime(dateTimeStr) {
+    if (typeof dateTimeStr === "string" && dateTimeStr.includes("-")) {
+      const dateTime = dateTimeStr.split(" ");
+      if (dateTime.length === 2) {
+        const datePart = dateTime[0];
+        const timePart = dateTime[1];
+        const [year, month, day] = datePart.split("-");
+        const [hour, minute] = timePart.split(":");
+        return `${month}/${day}
+${hour}:${minute}`;
+      }
+    }
+    return dateTimeStr;
+  }
+  function formatDateTimeForTooltip(dateTimeStr) {
+    if (typeof dateTimeStr === "string" && dateTimeStr.includes("-")) {
+      const dateTime = dateTimeStr.split(" ");
+      if (dateTime.length === 2) {
+        const datePart = dateTime[0];
+        const timePart = dateTime[1];
+        const [year, month, day] = datePart.split("-");
+        const [hour, minute] = timePart.split(":");
+        return `${month}/${day} ${hour}:${minute}`;
+      }
+    }
+    return dateTimeStr;
+  }
   const init2 = () => {
     let myChart = null;
     const myDom = chartRef.current;
@@ -78,11 +132,22 @@ function BrushLine(props) {
         // alwaysShowContent: true,
         // hideDelay: 1000000000,
         formatter: function(res) {
-          const { axisValue, data } = res[0];
+          const { axisValue, data, dataIndex } = res[0];
+          const seriesData = {
+            seriesName: tooltipItemName,
+            value: data,
+            date: axisValue,
+            dataIndex,
+            color: "#1DA9A0"
+          };
           return `<div class="brush-line-tooltip-wrap">
-                    <div class='brush-line-tooltip-title'>${axisValue}</div>
+                    <div class='brush-line-tooltip-title'>${formatDateTimeForTooltip(
+            axisValue
+          )}</div>
                     <div class="brush-line-tooltip-content">
-                      <span class="brush-line-tooltip-item">
+                      <span class="brush-line-tooltip-item item" data-series-item='${JSON.stringify(
+            seriesData
+          )}'>
                         <i class="brush-line-tooltip-icon" style="background:#1DA9A0"></i>
                         ${tooltipItemName}
                       </span>
@@ -120,7 +185,7 @@ function BrushLine(props) {
           fontSize: 12,
           lineHeight: 15,
           formatter: function(v) {
-            return "2025.10.29";
+            return formatDateTime(v);
           }
         },
         axisPointer: {

package/lib/components/stacked-bar/demo/base.js

@@ -1,6 +1,8 @@
+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)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/stacked-bar/demo/base.jsx
@@ -23,6 +33,7 @@ __export(base_exports, {
 });
 module.exports = __toCommonJS(base_exports);
 var import_onesight_charts = require("../../..");
+var import_react = __toESM(require("react"));
 var yAxisData = [
   "英语",
   "中文",
@@ -35,6 +46,7 @@ var yAxisData = [
 var series = [
   {
     name: "编辑人测试5",
+    alias: "别名1",
     type: "bar",
     stack: "total",
     label: {
@@ -50,6 +62,7 @@ var series = [
     },
     barWidth: 16,
     barMinHeight: 2,
+    color: "red",
     data: [
       {
         total: 104,
@@ -111,6 +124,7 @@ var series = [
   },
   {
     name: "编辑人测试1",
+    alias: "别名2",
     type: "bar",
     stack: "total",
     label: {
@@ -126,6 +140,7 @@ var series = [
     },
     barWidth: 16,
     barMinHeight: 2,
+    color: "blue",
     data: [
       {
         total: 210,
@@ -188,6 +203,7 @@ var series = [
   },
   {
     name: "测试对比分享3",
+    alias: "别名3",
     type: "bar",
     stack: "total",
     label: {
@@ -203,6 +219,7 @@ var series = [
     },
     barWidth: 16,
     barMinHeight: 2,
+    color: "green",
     data: [
       {
         total: null,
@@ -269,6 +286,7 @@ var series = [
   },
   {
     name: "测试时间更新5",
+    alias: "别名4",
     type: "bar",
     stack: "total",
     label: {
@@ -284,6 +302,7 @@ var series = [
     },
     barWidth: 16,
     barMinHeight: 2,
+    color: "yellow",
     data: [
       {
         total: 144,
@@ -351,7 +370,7 @@ var handleClick = (type, params) => {
   console.log("params", params);
 };
 function App() {
-  return /* @__PURE__ */ React.createElement("div", { style: { height: "340px" } }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { height: "340px" } }, /* @__PURE__ */ import_react.default.createElement(
     import_onesight_charts.StackedBar,
     {
       yAxisData,

package/lib/components/stacked-bar/index.js

@@ -247,7 +247,8 @@ function StackedBar(props) {
                 value: num,
                 proportion: num / total,
                 name: res[0].name,
-                originalName
+                originalName,
+                alias: item.alias
               };
             });
           }
@@ -419,7 +420,12 @@ function StackedBar(props) {
     };
     myChart.off("click");
     myChart.on("click", function(params) {
-      handleClick && handleClick("dataPointType", params);
+      const seriesItem = series.find((s) => s.name === params.seriesName);
+      const paramsWithAlias = {
+        ...params,
+        alias: seriesItem == null ? void 0 : seriesItem.alias
+      };
+      handleClick && handleClick("dataPointType", paramsWithAlias);
     });
     let currentIndex = 0;
     myChart.off("showTip");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onesight-charts",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "private": false,
   "description": "OneSight前端图表公共组件库",
   "license": "MIT",