Skip to content

Commit

Permalink
fix: add a crosshair of the same point in each chart when hover in a …
Browse files Browse the repository at this point in the history 
…chart (#16)

Co-authored-by: yaojiping <[email protected]>
  • Loading branch information
@yaojp123
yaojp123 and yaojiping authored Dec 9, 2024
1 parent 356f710 commit 8aa77ca
Show file tree
Hide file tree
Showing 7 changed files with 117 additions and 23 deletions.
4 changes: 2 additions & 2 deletions web/src/pages/Platform/Overview/Cluster/Monitor/advanced.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ export default ({
"request_cache_miss"
]
]
]}
].filter((item) => !!item && !!item[1])}
/>
</Tabs.TabPane>
<Tabs.TabPane
Expand Down Expand Up @@ -402,7 +402,7 @@ export default ({
"force_merge_threads"
]
]
].filter((item) => !!item)}
].filter((item) => !!item && !!item[1])}
/>
</Tabs.TabPane>
</Tabs>
Expand Down
4 changes: 2 additions & 2 deletions web/src/pages/Platform/Overview/Node/Monitor/advanced.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ export default ({
"request_cache_miss"
]
]
]}
].filter((item) => !!item && !!item[1])}
/>
</Tabs.TabPane>
<Tabs.TabPane
Expand Down Expand Up @@ -286,7 +286,7 @@ export default ({
"force_merge_threads"
]
]
]}
].filter((item) => !!item && !!item[1])}
/>
</Tabs.TabPane>
</Tabs>
Expand Down
14 changes: 4 additions & 10 deletions web/src/pages/Platform/Overview/components/MetricChart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,9 @@ export default (props) => {
style,
formatMetric,
height = 200,
customRenderChart
customRenderChart,
instance,
pointerUpdate
} = props;

const [loading, setLoading] = useState(false)
Expand Down Expand Up @@ -119,14 +121,6 @@ export default (props) => {
};
}, [isInView]);

const chartRef = useRef();

const pointerUpdate = (event) => {
if (chartRef.current) {
chartRef.current.dispatchExternalPointerEvent(event);
}
};

const handleChartBrush = ({ x }) => {
if (!x) {
return;
Expand Down Expand Up @@ -168,7 +162,7 @@ export default (props) => {
<Chart
size={[, height]}
className={styles.vizChartItem}
ref={chartRef}
ref={instance}
>
<Settings
pointerUpdateDebounce={0}
Expand Down
28 changes: 25 additions & 3 deletions web/src/pages/Platform/Overview/components/cluster_metric.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import styles from "./Metrics.scss";
import "./node_metric.scss";
import { calculateBounds } from "@/components/vendor/data/common/query/timefilter";
import MetricChart from "./MetricChart";
import { useMemo } from "react";
import { createRef, useEffect, useMemo, useRef, useState } from "react";
import { formatMessage } from "umi/locale";
import { formatTimeRange } from "@/lib/elasticsearch/util";

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

const extra = renderExtra ? renderExtra() : null;

const [charts, setCharts] = useState([])

useEffect(() => {
setCharts(() => {
const cs = {}
metrics.forEach((metricKey) => {
cs[metricKey] = createRef()
})
return cs
})
}, [JSON.stringify(metrics)])

const pointerUpdate = (event) => {
Object.keys(charts).forEach((key) => {
if (charts[key].current) {
charts[key].current.dispatchExternalPointerEvent(event);
}
});
};

return (
<div id="cluster-metric">
<div className={styles.metricList}>
{metrics.map((metricKey, i) => (
{metrics.filter((item) => !!item).map((metricKey) => (
<MetricChart
key={metricKey}
key={metricKey}
instance={charts[metricKey]}
pointerUpdate={pointerUpdate}
timezone={timezone}
timeRange={timeRange}
timeout={timeout}
Expand Down
30 changes: 28 additions & 2 deletions web/src/pages/Platform/Overview/components/index_metric.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
import NodeSelect from "@/components/NodeSelect";
import Anchor from "@/components/Anchor";
import MetricChart from "./MetricChart";
import { useMemo } from "react";
import { createRef, useEffect, useMemo, useState } from "react";

export default (props) => {

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

const [charts, setCharts] = useState([])

useEffect(() => {
setCharts(() => {
const cs = {}
metrics.forEach((item) => {
if (item[1]?.length > 0) {
item[1].forEach((metricKey) => {
cs[metricKey] = createRef()
})
}
})
return cs
})
}, [JSON.stringify(metrics)])

const pointerUpdate = (event) => {
Object.keys(charts).forEach((key) => {
if (charts[key].current) {
charts[key].current.dispatchExternalPointerEvent(event);
}
});
};

return (
<div id="node-metric">
{showTop ? (
Expand Down Expand Up @@ -109,7 +133,7 @@ export default (props) => {

<div className="px-box">
<div className="px">
{metrics.map((item, i) => {
{metrics.filter((item) => !!item && !!item[1]).map((item) => {
return (
<div key={item[0]} style={{ margin: "8px 0" }}>
<MetricContainer
Expand All @@ -122,6 +146,8 @@ export default (props) => {
item[1].map((metricKey) => (
<MetricChart
key={metricKey}
instance={charts[metricKey]}
pointerUpdate={pointerUpdate}
timezone={timezone}
timeRange={timeRange}
handleTimeChange={handleTimeChange}
Expand Down
30 changes: 28 additions & 2 deletions web/src/pages/Platform/Overview/components/node_metric.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
import NodeSelect from "@/components/NodeSelect";
import Anchor from "@/components/Anchor";
import MetricChart from "./MetricChart";
import { useCallback, useMemo } from "react";
import { createRef, useCallback, useEffect, useMemo, useState } from "react";

export default (props) => {

Expand Down Expand Up @@ -94,6 +94,30 @@ export default (props) => {
});
}, [nodes]);

const [charts, setCharts] = useState([])

useEffect(() => {
setCharts(() => {
const cs = {}
metrics.forEach((item) => {
if (item[1]?.length > 0) {
item[1].forEach((metricKey) => {
cs[metricKey] = createRef()
})
}
})
return cs
})
}, [JSON.stringify(metrics)])

const pointerUpdate = (event) => {
Object.keys(charts).forEach((key) => {
if (charts[key].current) {
charts[key].current.dispatchExternalPointerEvent(event);
}
});
};

return (
<div id="node-metric">
{showTop ? (
Expand Down Expand Up @@ -132,7 +156,7 @@ export default (props) => {

<div className="px-box">
<div className="px">
{metrics.map((item, i) => {
{metrics.filter((item) => !!item && !!item[1]).map((item) => {
return (
<div key={item[0]} style={{ margin: "8px 0" }}>
<MetricContainer
Expand All @@ -145,6 +169,8 @@ export default (props) => {
item[1].map((metricKey) => (
<MetricChart
key={metricKey}
instance={charts[metricKey]}
pointerUpdate={pointerUpdate}
timezone={timezone}
timeRange={timeRange}
handleTimeChange={handleTimeChange}
Expand Down
30 changes: 28 additions & 2 deletions web/src/pages/Platform/Overview/components/queue_metric.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { formatTimeRange } from "@/lib/elasticsearch/util";
import NodeSelect from "@/components/NodeSelect";
import Anchor from "@/components/Anchor";
import MetricChart from "./MetricChart";
import { useCallback, useMemo } from "react";
import { createRef, useCallback, useEffect, useMemo, useState } from "react";

export default (props) => {

Expand Down Expand Up @@ -94,6 +94,30 @@ export default (props) => {
});
}, [nodes]);

const [charts, setCharts] = useState([])

useEffect(() => {
setCharts(() => {
const cs = {}
metrics.forEach((item) => {
if (item[1]?.length > 0) {
item[1].forEach((metricKey) => {
cs[metricKey] = createRef()
})
}
})
return cs
})
}, [JSON.stringify(metrics)])

const pointerUpdate = (event) => {
Object.keys(charts).forEach((key) => {
if (charts[key].current) {
charts[key].current.dispatchExternalPointerEvent(event);
}
});
};

return (
<div id="node-metric">
{showTop ? (
Expand Down Expand Up @@ -132,7 +156,7 @@ export default (props) => {

<div className="px-box">
<div className="px">
{metrics.map((item, i) => {
{metrics.filter((item) => !!item && !!item[1]).map((item) => {
return (
<div key={item[0]} style={{ margin: "8px 0" }}>
<MetricContainer
Expand All @@ -145,6 +169,8 @@ export default (props) => {
item[1].map((metricKey) => (
<MetricChart
key={metricKey}
instance={charts[metricKey]}
pointerUpdate={pointerUpdate}
timezone={timezone}
timeRange={timeRange}
handleTimeChange={handleTimeChange}
Expand Down

0 comments on commit 8aa77ca

Please sign in to comment.