Skip to content

Commit 8aa77ca

Browse files
yaojp123yaojiping
yaojp123
and
yaojiping
authored
fix: add a crosshair of the same point in each chart when hover in a chart (#16)
Co-authored-by: yaojiping <[email protected]>
1 parent 356f710 commit 8aa77ca

File tree

7 files changed

+117
-23
lines changed

7 files changed

+117
-23
lines changed

‎web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ export default ({
239239
"request_cache_miss"
240240
]
241241
]
242-
]}
242+
].filter((item) => !!item && !!item[1])}
243243
/>
244244
</Tabs.TabPane>
245245
<Tabs.TabPane
@@ -402,7 +402,7 @@ export default ({
402402
"force_merge_threads"
403403
]
404404
]
405-
].filter((item) => !!item)}
405+
].filter((item) => !!item && !!item[1])}
406406
/>
407407
</Tabs.TabPane>
408408
</Tabs>

‎web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ export default ({
201201
"request_cache_miss"
202202
]
203203
]
204-
]}
204+
].filter((item) => !!item && !!item[1])}
205205
/>
206206
</Tabs.TabPane>
207207
<Tabs.TabPane
@@ -286,7 +286,7 @@ export default ({
286286
"force_merge_threads"
287287
]
288288
]
289-
]}
289+
].filter((item) => !!item && !!item[1])}
290290
/>
291291
</Tabs.TabPane>
292292
</Tabs>

‎web/src/pages/Platform/Overview/components/MetricChart.jsx

+4-10
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ export default (props) => {
3737
style,
3838
formatMetric,
3939
height = 200,
40-
customRenderChart
40+
customRenderChart,
41+
instance,
42+
pointerUpdate
4143
} = props;
4244

4345
const [loading, setLoading] = useState(false)
@@ -119,14 +121,6 @@ export default (props) => {
119121
};
120122
}, [isInView]);
121123

122-
const chartRef = useRef();
123-
124-
const pointerUpdate = (event) => {
125-
if (chartRef.current) {
126-
chartRef.current.dispatchExternalPointerEvent(event);
127-
}
128-
};
129-
130124
const handleChartBrush = ({ x }) => {
131125
if (!x) {
132126
return;
@@ -168,7 +162,7 @@ export default (props) => {
168162
<Chart
169163
size={[, height]}
170164
className={styles.vizChartItem}
171-
ref={chartRef}
165+
ref={instance}
172166
>
173167
<Settings
174168
pointerUpdateDebounce={0}

‎web/src/pages/Platform/Overview/components/cluster_metric.jsx

+25-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import styles from "./Metrics.scss";
22
import "./node_metric.scss";
33
import { calculateBounds } from "@/components/vendor/data/common/query/timefilter";
44
import MetricChart from "./MetricChart";
5-
import { useMemo } from "react";
5+
import { createRef, useEffect, useMemo, useRef, useState } from "react";
66
import { formatMessage } from "umi/locale";
77
import { formatTimeRange } from "@/lib/elasticsearch/util";
88

@@ -27,12 +27,34 @@ export default (props) => {
2727

2828
const extra = renderExtra ? renderExtra() : null;
2929

30+
const [charts, setCharts] = useState([])
31+
32+
useEffect(() => {
33+
setCharts(() => {
34+
const cs = {}
35+
metrics.forEach((metricKey) => {
36+
cs[metricKey] = createRef()
37+
})
38+
return cs
39+
})
40+
}, [JSON.stringify(metrics)])
41+
42+
const pointerUpdate = (event) => {
43+
Object.keys(charts).forEach((key) => {
44+
if (charts[key].current) {
45+
charts[key].current.dispatchExternalPointerEvent(event);
46+
}
47+
});
48+
};
49+
3050
return (
3151
<div id="cluster-metric">
3252
<div className={styles.metricList}>
33-
{metrics.map((metricKey, i) => (
53+
{metrics.filter((item) => !!item).map((metricKey) => (
3454
<MetricChart
35-
key={metricKey}
55+
key={metricKey}
56+
instance={charts[metricKey]}
57+
pointerUpdate={pointerUpdate}
3658
timezone={timezone}
3759
timeRange={timeRange}
3860
timeout={timeout}

‎web/src/pages/Platform/Overview/components/index_metric.jsx

+28-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
99
import NodeSelect from "@/components/NodeSelect";
1010
import Anchor from "@/components/Anchor";
1111
import MetricChart from "./MetricChart";
12-
import { useMemo } from "react";
12+
import { createRef, useEffect, useMemo, useState } from "react";
1313

1414
export default (props) => {
1515

@@ -79,6 +79,30 @@ export default (props) => {
7979
return Object.values(indices || []);
8080
}, [indices]);
8181

82+
const [charts, setCharts] = useState([])
83+
84+
useEffect(() => {
85+
setCharts(() => {
86+
const cs = {}
87+
metrics.forEach((item) => {
88+
if (item[1]?.length > 0) {
89+
item[1].forEach((metricKey) => {
90+
cs[metricKey] = createRef()
91+
})
92+
}
93+
})
94+
return cs
95+
})
96+
}, [JSON.stringify(metrics)])
97+
98+
const pointerUpdate = (event) => {
99+
Object.keys(charts).forEach((key) => {
100+
if (charts[key].current) {
101+
charts[key].current.dispatchExternalPointerEvent(event);
102+
}
103+
});
104+
};
105+
82106
return (
83107
<div id="node-metric">
84108
{showTop ? (
@@ -109,7 +133,7 @@ export default (props) => {
109133

110134
<div className="px-box">
111135
<div className="px">
112-
{metrics.map((item, i) => {
136+
{metrics.filter((item) => !!item && !!item[1]).map((item) => {
113137
return (
114138
<div key={item[0]} style={{ margin: "8px 0" }}>
115139
<MetricContainer
@@ -122,6 +146,8 @@ export default (props) => {
122146
item[1].map((metricKey) => (
123147
<MetricChart
124148
key={metricKey}
149+
instance={charts[metricKey]}
150+
pointerUpdate={pointerUpdate}
125151
timezone={timezone}
126152
timeRange={timeRange}
127153
handleTimeChange={handleTimeChange}

‎web/src/pages/Platform/Overview/components/node_metric.jsx

+28-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
88
import NodeSelect from "@/components/NodeSelect";
99
import Anchor from "@/components/Anchor";
1010
import MetricChart from "./MetricChart";
11-
import { useCallback, useMemo } from "react";
11+
import { createRef, useCallback, useEffect, useMemo, useState } from "react";
1212

1313
export default (props) => {
1414

@@ -94,6 +94,30 @@ export default (props) => {
9494
});
9595
}, [nodes]);
9696

97+
const [charts, setCharts] = useState([])
98+
99+
useEffect(() => {
100+
setCharts(() => {
101+
const cs = {}
102+
metrics.forEach((item) => {
103+
if (item[1]?.length > 0) {
104+
item[1].forEach((metricKey) => {
105+
cs[metricKey] = createRef()
106+
})
107+
}
108+
})
109+
return cs
110+
})
111+
}, [JSON.stringify(metrics)])
112+
113+
const pointerUpdate = (event) => {
114+
Object.keys(charts).forEach((key) => {
115+
if (charts[key].current) {
116+
charts[key].current.dispatchExternalPointerEvent(event);
117+
}
118+
});
119+
};
120+
97121
return (
98122
<div id="node-metric">
99123
{showTop ? (
@@ -132,7 +156,7 @@ export default (props) => {
132156

133157
<div className="px-box">
134158
<div className="px">
135-
{metrics.map((item, i) => {
159+
{metrics.filter((item) => !!item && !!item[1]).map((item) => {
136160
return (
137161
<div key={item[0]} style={{ margin: "8px 0" }}>
138162
<MetricContainer
@@ -145,6 +169,8 @@ export default (props) => {
145169
item[1].map((metricKey) => (
146170
<MetricChart
147171
key={metricKey}
172+
instance={charts[metricKey]}
173+
pointerUpdate={pointerUpdate}
148174
timezone={timezone}
149175
timeRange={timeRange}
150176
handleTimeChange={handleTimeChange}

‎web/src/pages/Platform/Overview/components/queue_metric.jsx

+28-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
88
import NodeSelect from "@/components/NodeSelect";
99
import Anchor from "@/components/Anchor";
1010
import MetricChart from "./MetricChart";
11-
import { useCallback, useMemo } from "react";
11+
import { createRef, useCallback, useEffect, useMemo, useState } from "react";
1212

1313
export default (props) => {
1414

@@ -94,6 +94,30 @@ export default (props) => {
9494
});
9595
}, [nodes]);
9696

97+
const [charts, setCharts] = useState([])
98+
99+
useEffect(() => {
100+
setCharts(() => {
101+
const cs = {}
102+
metrics.forEach((item) => {
103+
if (item[1]?.length > 0) {
104+
item[1].forEach((metricKey) => {
105+
cs[metricKey] = createRef()
106+
})
107+
}
108+
})
109+
return cs
110+
})
111+
}, [JSON.stringify(metrics)])
112+
113+
const pointerUpdate = (event) => {
114+
Object.keys(charts).forEach((key) => {
115+
if (charts[key].current) {
116+
charts[key].current.dispatchExternalPointerEvent(event);
117+
}
118+
});
119+
};
120+
97121
return (
98122
<div id="node-metric">
99123
{showTop ? (
@@ -132,7 +156,7 @@ export default (props) => {
132156

133157
<div className="px-box">
134158
<div className="px">
135-
{metrics.map((item, i) => {
159+
{metrics.filter((item) => !!item && !!item[1]).map((item) => {
136160
return (
137161
<div key={item[0]} style={{ margin: "8px 0" }}>
138162
<MetricContainer
@@ -145,6 +169,8 @@ export default (props) => {
145169
item[1].map((metricKey) => (
146170
<MetricChart
147171
key={metricKey}
172+
instance={charts[metricKey]}
173+
pointerUpdate={pointerUpdate}
148174
timezone={timezone}
149175
timeRange={timeRange}
150176
handleTimeChange={handleTimeChange}

0 commit comments

Comments
 (0)