onesight-charts 0.7.2 → 0.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import BrushLine from "../index";
|
|
3
3
|
function App() {
|
|
4
|
-
var xData = ['2025
|
|
4
|
+
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'];
|
|
5
5
|
var yData = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300];
|
|
6
6
|
|
|
7
7
|
// type: 'dataPointType' | 'tooltipType'
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
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."); }
|
|
3
|
+
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); }
|
|
4
|
+
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; }
|
|
5
|
+
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; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
1
7
|
import * as echarts from 'echarts';
|
|
2
8
|
import React, { useEffect, useRef } from 'react';
|
|
3
9
|
import { numberFormat } from "../../utils/chartUtils";
|
|
@@ -16,9 +22,40 @@ function BrushLine(props) {
|
|
|
16
22
|
_props$handleClick = props.handleClick,
|
|
17
23
|
handleClick = _props$handleClick === void 0 ? function () {} : _props$handleClick;
|
|
18
24
|
var chartRef = useRef(null);
|
|
25
|
+
|
|
26
|
+
// 创建别名映射（目前为空，如果将来需要支持别名可以扩展）
|
|
27
|
+
var aliasMap = {};
|
|
19
28
|
useEffect(function () {
|
|
20
29
|
init();
|
|
30
|
+
bindClickEvents();
|
|
31
|
+
return function () {
|
|
32
|
+
unbindClickEvents();
|
|
33
|
+
};
|
|
21
34
|
}, []);
|
|
35
|
+
var onChartClick = function onChartClick(event) {
|
|
36
|
+
var seriesNameElement = event.target.closest('.item');
|
|
37
|
+
if (seriesNameElement) {
|
|
38
|
+
var seriesItem = seriesNameElement.getAttribute('data-series-item');
|
|
39
|
+
var seriesData = JSON.parse(seriesItem);
|
|
40
|
+
// 使用 dataIndex 从原始 xData 获取原始日期
|
|
41
|
+
if (seriesData.dataIndex !== undefined && xData && Array.isArray(xData) && xData[seriesData.dataIndex]) {
|
|
42
|
+
seriesData.date = xData[seriesData.dataIndex];
|
|
43
|
+
}
|
|
44
|
+
// 添加 alias 到 seriesData
|
|
45
|
+
if (seriesData.seriesName && aliasMap[seriesData.seriesName]) {
|
|
46
|
+
seriesData.alias = aliasMap[seriesData.seriesName];
|
|
47
|
+
}
|
|
48
|
+
handleClick && handleClick('tooltipType', seriesData);
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
var bindClickEvents = function bindClickEvents() {
|
|
52
|
+
var chartElement = chartRef.current;
|
|
53
|
+
chartElement && chartElement.addEventListener('click', onChartClick);
|
|
54
|
+
};
|
|
55
|
+
var unbindClickEvents = function unbindClickEvents() {
|
|
56
|
+
var chartElement = chartRef.current;
|
|
57
|
+
chartElement && chartElement.removeEventListener('click', onChartClick);
|
|
58
|
+
};
|
|
22
59
|
function formatNum(d) {
|
|
23
60
|
if (isNaN(d) || d === null) {
|
|
24
61
|
return '-';
|
|
@@ -26,6 +63,48 @@ function BrushLine(props) {
|
|
|
26
63
|
return numberFormat(d);
|
|
27
64
|
}
|
|
28
65
|
}
|
|
66
|
+
function formatDateTime(dateTimeStr) {
|
|
67
|
+
// 将 "2025-10-14 08:00:00" 格式转换为 "10/14\n08:00" (两行显示)
|
|
68
|
+
if (typeof dateTimeStr === 'string' && dateTimeStr.includes('-')) {
|
|
69
|
+
var dateTime = dateTimeStr.split(' ');
|
|
70
|
+
if (dateTime.length === 2) {
|
|
71
|
+
var datePart = dateTime[0]; // "2025-10-14"
|
|
72
|
+
var timePart = dateTime[1]; // "08:00:00"
|
|
73
|
+
var _datePart$split = datePart.split('-'),
|
|
74
|
+
_datePart$split2 = _slicedToArray(_datePart$split, 3),
|
|
75
|
+
year = _datePart$split2[0],
|
|
76
|
+
month = _datePart$split2[1],
|
|
77
|
+
day = _datePart$split2[2];
|
|
78
|
+
var _timePart$split = timePart.split(':'),
|
|
79
|
+
_timePart$split2 = _slicedToArray(_timePart$split, 2),
|
|
80
|
+
hour = _timePart$split2[0],
|
|
81
|
+
minute = _timePart$split2[1];
|
|
82
|
+
return "".concat(month, "/").concat(day, "\n").concat(hour, ":").concat(minute);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
return dateTimeStr;
|
|
86
|
+
}
|
|
87
|
+
function formatDateTimeForTooltip(dateTimeStr) {
|
|
88
|
+
// 将 "2025-10-14 08:00:00" 格式转换为 "10/14 08:00" (tooltip 中单行显示)
|
|
89
|
+
if (typeof dateTimeStr === 'string' && dateTimeStr.includes('-')) {
|
|
90
|
+
var dateTime = dateTimeStr.split(' ');
|
|
91
|
+
if (dateTime.length === 2) {
|
|
92
|
+
var datePart = dateTime[0]; // "2025-10-14"
|
|
93
|
+
var timePart = dateTime[1]; // "08:00:00"
|
|
94
|
+
var _datePart$split3 = datePart.split('-'),
|
|
95
|
+
_datePart$split4 = _slicedToArray(_datePart$split3, 3),
|
|
96
|
+
year = _datePart$split4[0],
|
|
97
|
+
month = _datePart$split4[1],
|
|
98
|
+
day = _datePart$split4[2];
|
|
99
|
+
var _timePart$split3 = timePart.split(':'),
|
|
100
|
+
_timePart$split4 = _slicedToArray(_timePart$split3, 2),
|
|
101
|
+
hour = _timePart$split4[0],
|
|
102
|
+
minute = _timePart$split4[1];
|
|
103
|
+
return "".concat(month, "/").concat(day, " ").concat(hour, ":").concat(minute);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
return dateTimeStr;
|
|
107
|
+
}
|
|
29
108
|
var init = function init() {
|
|
30
109
|
var myChart = null;
|
|
31
110
|
var myDom = chartRef.current;
|
|
@@ -49,8 +128,17 @@ function BrushLine(props) {
|
|
|
49
128
|
formatter: function formatter(res) {
|
|
50
129
|
var _res$ = res[0],
|
|
51
130
|
axisValue = _res$.axisValue,
|
|
52
|
-
data = _res$.data
|
|
53
|
-
|
|
131
|
+
data = _res$.data,
|
|
132
|
+
dataIndex = _res$.dataIndex;
|
|
133
|
+
// 构建 seriesData 对象，用于点击事件
|
|
134
|
+
var seriesData = {
|
|
135
|
+
seriesName: tooltipItemName,
|
|
136
|
+
value: data,
|
|
137
|
+
date: axisValue,
|
|
138
|
+
dataIndex: dataIndex,
|
|
139
|
+
color: '#1DA9A0'
|
|
140
|
+
};
|
|
141
|
+
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>");
|
|
54
142
|
}
|
|
55
143
|
},
|
|
56
144
|
grid: {
|
|
@@ -80,7 +168,7 @@ function BrushLine(props) {
|
|
|
80
168
|
fontSize: 12,
|
|
81
169
|
lineHeight: 15,
|
|
82
170
|
formatter: function formatter(v) {
|
|
83
|
-
return
|
|
171
|
+
return formatDateTime(v);
|
|
84
172
|
}
|
|
85
173
|
},
|
|
86
174
|
axisPointer: {
|
|
@@ -36,19 +36,19 @@ var import_react = __toESM(require("react"));
|
|
|
36
36
|
var import__ = __toESM(require("../index"));
|
|
37
37
|
function App() {
|
|
38
38
|
const xData = [
|
|
39
|
-
"2025
|
|
40
|
-
"2025
|
|
41
|
-
"2025
|
|
42
|
-
"2025
|
|
43
|
-
"2025
|
|
44
|
-
"2025
|
|
45
|
-
"2025
|
|
46
|
-
"2025
|
|
47
|
-
"2025
|
|
48
|
-
"2025
|
|
49
|
-
"2025
|
|
50
|
-
"2025
|
|
51
|
-
"2025
|
|
39
|
+
"2025-10-14 08:00:00",
|
|
40
|
+
"2025-10-15 08:00:00",
|
|
41
|
+
"2025-10-16 08:00:00",
|
|
42
|
+
"2025-10-17 08:00:00",
|
|
43
|
+
"2025-10-18 08:00:00",
|
|
44
|
+
"2025-10-19 08:00:00",
|
|
45
|
+
"2025-10-20 08:00:00",
|
|
46
|
+
"2025-10-21 08:00:00",
|
|
47
|
+
"2025-10-22 08:00:00",
|
|
48
|
+
"2025-10-23 08:00:00",
|
|
49
|
+
"2025-10-24 08:00:00",
|
|
50
|
+
"2025-10-25 08:00:00",
|
|
51
|
+
"2025-10-26 08:00:00"
|
|
52
52
|
];
|
|
53
53
|
const yData = [
|
|
54
54
|
100,
|
|
@@ -47,9 +47,36 @@ function BrushLine(props) {
|
|
|
47
47
|
}
|
|
48
48
|
} = props;
|
|
49
49
|
const chartRef = (0, import_react.useRef)(null);
|
|
50
|
+
const aliasMap = {};
|
|
50
51
|
(0, import_react.useEffect)(() => {
|
|
51
52
|
init2();
|
|
53
|
+
bindClickEvents();
|
|
54
|
+
return () => {
|
|
55
|
+
unbindClickEvents();
|
|
56
|
+
};
|
|
52
57
|
}, []);
|
|
58
|
+
const onChartClick = (event) => {
|
|
59
|
+
const seriesNameElement = event.target.closest(".item");
|
|
60
|
+
if (seriesNameElement) {
|
|
61
|
+
const seriesItem = seriesNameElement.getAttribute("data-series-item");
|
|
62
|
+
const seriesData = JSON.parse(seriesItem);
|
|
63
|
+
if (seriesData.dataIndex !== void 0 && xData && Array.isArray(xData) && xData[seriesData.dataIndex]) {
|
|
64
|
+
seriesData.date = xData[seriesData.dataIndex];
|
|
65
|
+
}
|
|
66
|
+
if (seriesData.seriesName && aliasMap[seriesData.seriesName]) {
|
|
67
|
+
seriesData.alias = aliasMap[seriesData.seriesName];
|
|
68
|
+
}
|
|
69
|
+
handleClick && handleClick("tooltipType", seriesData);
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
const bindClickEvents = () => {
|
|
73
|
+
const chartElement = chartRef.current;
|
|
74
|
+
chartElement && chartElement.addEventListener("click", onChartClick);
|
|
75
|
+
};
|
|
76
|
+
const unbindClickEvents = () => {
|
|
77
|
+
const chartElement = chartRef.current;
|
|
78
|
+
chartElement && chartElement.removeEventListener("click", onChartClick);
|
|
79
|
+
};
|
|
53
80
|
function formatNum(d) {
|
|
54
81
|
if (isNaN(d) || d === null) {
|
|
55
82
|
return "-";
|
|
@@ -57,6 +84,33 @@ function BrushLine(props) {
|
|
|
57
84
|
return (0, import_chartUtils.numberFormat)(d);
|
|
58
85
|
}
|
|
59
86
|
}
|
|
87
|
+
function formatDateTime(dateTimeStr) {
|
|
88
|
+
if (typeof dateTimeStr === "string" && dateTimeStr.includes("-")) {
|
|
89
|
+
const dateTime = dateTimeStr.split(" ");
|
|
90
|
+
if (dateTime.length === 2) {
|
|
91
|
+
const datePart = dateTime[0];
|
|
92
|
+
const timePart = dateTime[1];
|
|
93
|
+
const [year, month, day] = datePart.split("-");
|
|
94
|
+
const [hour, minute] = timePart.split(":");
|
|
95
|
+
return `${month}/${day}
|
|
96
|
+
${hour}:${minute}`;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
return dateTimeStr;
|
|
100
|
+
}
|
|
101
|
+
function formatDateTimeForTooltip(dateTimeStr) {
|
|
102
|
+
if (typeof dateTimeStr === "string" && dateTimeStr.includes("-")) {
|
|
103
|
+
const dateTime = dateTimeStr.split(" ");
|
|
104
|
+
if (dateTime.length === 2) {
|
|
105
|
+
const datePart = dateTime[0];
|
|
106
|
+
const timePart = dateTime[1];
|
|
107
|
+
const [year, month, day] = datePart.split("-");
|
|
108
|
+
const [hour, minute] = timePart.split(":");
|
|
109
|
+
return `${month}/${day} ${hour}:${minute}`;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
return dateTimeStr;
|
|
113
|
+
}
|
|
60
114
|
const init2 = () => {
|
|
61
115
|
let myChart = null;
|
|
62
116
|
const myDom = chartRef.current;
|
|
@@ -78,11 +132,22 @@ function BrushLine(props) {
|
|
|
78
132
|
// alwaysShowContent: true,
|
|
79
133
|
// hideDelay: 1000000000,
|
|
80
134
|
formatter: function(res) {
|
|
81
|
-
const { axisValue, data } = res[0];
|
|
135
|
+
const { axisValue, data, dataIndex } = res[0];
|
|
136
|
+
const seriesData = {
|
|
137
|
+
seriesName: tooltipItemName,
|
|
138
|
+
value: data,
|
|
139
|
+
date: axisValue,
|
|
140
|
+
dataIndex,
|
|
141
|
+
color: "#1DA9A0"
|
|
142
|
+
};
|
|
82
143
|
return `<div class="brush-line-tooltip-wrap">
|
|
83
|
-
<div class='brush-line-tooltip-title'>${
|
|
144
|
+
<div class='brush-line-tooltip-title'>${formatDateTimeForTooltip(
|
|
145
|
+
axisValue
|
|
146
|
+
)}</div>
|
|
84
147
|
<div class="brush-line-tooltip-content">
|
|
85
|
-
<span class="brush-line-tooltip-item"
|
|
148
|
+
<span class="brush-line-tooltip-item item" data-series-item='${JSON.stringify(
|
|
149
|
+
seriesData
|
|
150
|
+
)}'>
|
|
86
151
|
<i class="brush-line-tooltip-icon" style="background:#1DA9A0"></i>
|
|
87
152
|
${tooltipItemName}
|
|
88
153
|
</span>
|
|
@@ -120,7 +185,7 @@ function BrushLine(props) {
|
|
|
120
185
|
fontSize: 12,
|
|
121
186
|
lineHeight: 15,
|
|
122
187
|
formatter: function(v) {
|
|
123
|
-
return
|
|
188
|
+
return formatDateTime(v);
|
|
124
189
|
}
|
|
125
190
|
},
|
|
126
191
|
axisPointer: {
|