mirror of https://github.com/prometheus/prometheus
Try out uPlot for new UI
Signed-off-by: Julius Volz <julius.volz@gmail.com>mantine-ui-uplot
Julius Volz
parent
9252826659
commit
d9520b1a79
|
|
@ -30,13 +30,14 @@
|
|||
"@types/lodash": "^4.17.7",
|
||||
"@uiw/react-codemirror": "^4.21.22",
|
||||
"dayjs": "^1.11.10",
|
||||
"echarts": "^5.5.1",
|
||||
"lodash": "^4.17.21",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-infinite-scroll-component": "^6.1.0",
|
||||
"react-redux": "^9.1.0",
|
||||
"react-router-dom": "^6.22.1"
|
||||
"react-router-dom": "^6.22.1",
|
||||
"uplot": "^1.6.30",
|
||||
"uplot-react": "^1.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.55",
|
||||
|
|
|
|||
|
|
@ -1,272 +0,0 @@
|
|||
// Copyright 2023 The Perses Authors
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
import React, { useEffect, useLayoutEffect, useRef } from "react";
|
||||
import {
|
||||
ECharts,
|
||||
EChartsCoreOption,
|
||||
EChartsOption,
|
||||
init,
|
||||
connect,
|
||||
BarSeriesOption,
|
||||
LineSeriesOption,
|
||||
GaugeSeriesOption,
|
||||
} from "echarts";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import debounce from "lodash/debounce";
|
||||
import { Box } from "@mantine/core";
|
||||
|
||||
// https://github.com/apache/echarts/issues/12489#issuecomment-643185207
|
||||
export interface EChartsTheme extends EChartsOption {
|
||||
bar?: BarSeriesOption;
|
||||
line?: LineSeriesOption;
|
||||
gauge?: GaugeSeriesOption;
|
||||
}
|
||||
|
||||
// see docs for info about each property: https://echarts.apache.org/en/api.html#events
|
||||
export interface MouseEventsParameters<T> {
|
||||
componentType: string;
|
||||
seriesType: string;
|
||||
seriesIndex: number;
|
||||
seriesName: string;
|
||||
name: string;
|
||||
dataIndex: number;
|
||||
data: Record<string, unknown> & T;
|
||||
dataType: string;
|
||||
value: number | number[];
|
||||
color: string;
|
||||
info: Record<string, unknown>;
|
||||
}
|
||||
|
||||
type OnEventFunction<T> = (
|
||||
params: MouseEventsParameters<T>,
|
||||
// This is potentially undefined for testing purposes
|
||||
instance?: ECharts
|
||||
) => void;
|
||||
|
||||
const mouseEvents = [
|
||||
"click",
|
||||
"dblclick",
|
||||
"mousedown",
|
||||
"mousemove",
|
||||
"mouseup",
|
||||
"mouseover",
|
||||
"mouseout",
|
||||
"globalout",
|
||||
"contextmenu",
|
||||
] as const;
|
||||
|
||||
export type MouseEventName = (typeof mouseEvents)[number];
|
||||
|
||||
// batch event types
|
||||
export interface DataZoomPayloadBatchItem {
|
||||
dataZoomId: string;
|
||||
// start and end not returned unless dataZoom is based on percentProp,
|
||||
// which is for cases when a dataZoom component controls multiple axes
|
||||
start?: number;
|
||||
end?: number;
|
||||
// startValue and endValue return data index for 'category' axes,
|
||||
// for axis types 'value' and 'time', actual values are returned
|
||||
startValue?: number;
|
||||
endValue?: number;
|
||||
}
|
||||
|
||||
export interface HighlightPayloadBatchItem {
|
||||
dataIndex: number;
|
||||
dataIndexInside: number;
|
||||
seriesIndex: number;
|
||||
// highlight action can effect multiple connected charts
|
||||
escapeConnect?: boolean;
|
||||
// whether blur state was triggered
|
||||
notBlur?: boolean;
|
||||
}
|
||||
|
||||
export interface BatchEventsParameters {
|
||||
type: BatchEventName;
|
||||
batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];
|
||||
}
|
||||
|
||||
type OnBatchEventFunction = (params: BatchEventsParameters) => void;
|
||||
|
||||
const batchEvents = ["datazoom", "downplay", "highlight"] as const;
|
||||
|
||||
export type BatchEventName = (typeof batchEvents)[number];
|
||||
|
||||
type ChartEventName = "finished";
|
||||
|
||||
type EventName = MouseEventName | ChartEventName | BatchEventName;
|
||||
|
||||
export type OnEventsType<T> = {
|
||||
[mouseEventName in MouseEventName]?: OnEventFunction<T>;
|
||||
} & {
|
||||
[batchEventName in BatchEventName]?: OnBatchEventFunction;
|
||||
} & {
|
||||
[eventName in ChartEventName]?: () => void;
|
||||
};
|
||||
|
||||
export interface EChartsProps<T> {
|
||||
option: EChartsCoreOption;
|
||||
theme?: string | EChartsTheme;
|
||||
renderer?: "canvas" | "svg";
|
||||
onEvents?: OnEventsType<T>;
|
||||
_instance?: React.MutableRefObject<ECharts | undefined>;
|
||||
syncGroup?: string;
|
||||
onChartInitialized?: (instance: ECharts) => void;
|
||||
}
|
||||
|
||||
export const chartHeight = 500;
|
||||
export const legendHeight = (numSeries: number) => numSeries * 24;
|
||||
export const legendMargin = 25;
|
||||
|
||||
export const EChart = React.memo(function EChart<T>({
|
||||
option,
|
||||
theme,
|
||||
renderer,
|
||||
onEvents,
|
||||
_instance,
|
||||
syncGroup,
|
||||
onChartInitialized,
|
||||
}: EChartsProps<T>) {
|
||||
const initialOption = useRef<EChartsCoreOption>(option);
|
||||
const prevOption = useRef<EChartsCoreOption>(option);
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const chartElement = useRef<ECharts | null>(null);
|
||||
|
||||
// Initialize chart, dispose on unmount
|
||||
useLayoutEffect(() => {
|
||||
if (containerRef.current === null || chartElement.current !== null) return;
|
||||
chartElement.current = init(containerRef.current, theme, {
|
||||
renderer: renderer ?? "canvas",
|
||||
});
|
||||
if (chartElement.current === undefined) return;
|
||||
chartElement.current.setOption(initialOption.current, true);
|
||||
onChartInitialized?.(chartElement.current);
|
||||
if (_instance !== undefined) {
|
||||
_instance.current = chartElement.current;
|
||||
}
|
||||
return () => {
|
||||
if (chartElement.current === null) return;
|
||||
chartElement.current.dispose();
|
||||
chartElement.current = null;
|
||||
};
|
||||
}, [_instance, onChartInitialized, theme, renderer]);
|
||||
|
||||
// When syncGroup is explicitly set, charts within same group share interactions such as crosshair
|
||||
useEffect(() => {
|
||||
if (!chartElement.current || !syncGroup) return;
|
||||
chartElement.current.group = syncGroup;
|
||||
connect([chartElement.current]); // more info: https://echarts.apache.org/en/api.html#echarts.connect
|
||||
}, [syncGroup, chartElement]);
|
||||
|
||||
// Update chart data when option changes
|
||||
useEffect(() => {
|
||||
if (prevOption.current === undefined || isEqual(prevOption.current, option))
|
||||
return;
|
||||
if (!chartElement.current) return;
|
||||
chartElement.current.setOption(option, true);
|
||||
prevOption.current = option;
|
||||
}, [option]);
|
||||
|
||||
// Resize chart, cleanup listener on unmount
|
||||
useLayoutEffect(() => {
|
||||
const updateSize = debounce(() => {
|
||||
if (!chartElement.current) return;
|
||||
chartElement.current.resize();
|
||||
}, 200);
|
||||
window.addEventListener("resize", updateSize);
|
||||
updateSize();
|
||||
return () => {
|
||||
window.removeEventListener("resize", updateSize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Bind and unbind chart events passed as prop
|
||||
useEffect(() => {
|
||||
const chart = chartElement.current;
|
||||
if (!chart || onEvents === undefined) return;
|
||||
bindEvents(chart, onEvents);
|
||||
return () => {
|
||||
if (chart === undefined) return;
|
||||
if (chart.isDisposed() === true) return;
|
||||
for (const event in onEvents) {
|
||||
chart.off(event);
|
||||
}
|
||||
};
|
||||
}, [onEvents]);
|
||||
|
||||
// // TODO: re-evaluate how this is triggered. It's technically working right
|
||||
// // now because the sx prop is an object that gets re-created, but that also
|
||||
// // means it runs unnecessarily some of the time and theoretically might
|
||||
// // not run in some other cases. Maybe it should use a resize observer?
|
||||
// useEffect(() => {
|
||||
// // TODO: fix this debouncing. This likely isn't working as intended because
|
||||
// // the debounced function is re-created every time this useEffect is called.
|
||||
// const updateSize = debounce(
|
||||
// () => {
|
||||
// if (!chartElement.current) return;
|
||||
// chartElement.current.resize();
|
||||
// },
|
||||
// 200,
|
||||
// {
|
||||
// leading: true,
|
||||
// }
|
||||
// );
|
||||
// updateSize();
|
||||
// }, [sx]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
w="100%"
|
||||
h={
|
||||
chartHeight +
|
||||
legendMargin +
|
||||
legendHeight((option as { series: unknown[] }).series.length)
|
||||
}
|
||||
ref={containerRef}
|
||||
></Box>
|
||||
);
|
||||
});
|
||||
|
||||
// Validate event config and bind custom events
|
||||
function bindEvents<T>(instance: ECharts, events?: OnEventsType<T>) {
|
||||
if (events === undefined) return;
|
||||
|
||||
function bindEvent(eventName: EventName, OnEventFunction: unknown) {
|
||||
if (typeof OnEventFunction === "function") {
|
||||
if (isMouseEvent(eventName)) {
|
||||
instance.on(eventName, (params) => OnEventFunction(params, instance));
|
||||
} else if (isBatchEvent(eventName)) {
|
||||
instance.on(eventName, (params) => OnEventFunction(params));
|
||||
} else {
|
||||
instance.on(eventName, () => OnEventFunction(null, instance));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const eventName in events) {
|
||||
if (Object.prototype.hasOwnProperty.call(events, eventName)) {
|
||||
const customEvent = events[eventName as EventName] ?? null;
|
||||
if (customEvent) {
|
||||
bindEvent(eventName as EventName, customEvent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function isMouseEvent(eventName: EventName): eventName is MouseEventName {
|
||||
return (mouseEvents as readonly string[]).includes(eventName);
|
||||
}
|
||||
|
||||
function isBatchEvent(eventName: EventName): eventName is BatchEventName {
|
||||
return (batchEvents as readonly string[]).includes(eventName);
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.chartWrapper {
|
||||
border: 1px solid
|
||||
light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
|
||||
border-radius: var(--mantine-radius-default);
|
||||
}
|
||||
|
||||
.uplotChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,26 @@
|
|||
.uplot {
|
||||
.u-legend {
|
||||
text-align: left;
|
||||
margin-left: 25px;
|
||||
|
||||
.u-marker {
|
||||
margin-right: 8px;
|
||||
height: 0.8em;
|
||||
width: 0.8em;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 500;
|
||||
font-size: var(--mantine-font-size-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.u-inline tr {
|
||||
display: block;
|
||||
/* display: table;
|
||||
|
||||
* {
|
||||
display: table-cell;
|
||||
} */
|
||||
}
|
||||
}
|
||||
|
|
@ -127,13 +127,14 @@
|
|||
"@types/lodash": "^4.17.7",
|
||||
"@uiw/react-codemirror": "^4.21.22",
|
||||
"dayjs": "^1.11.10",
|
||||
"echarts": "^5.5.1",
|
||||
"lodash": "^4.17.21",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-infinite-scroll-component": "^6.1.0",
|
||||
"react-redux": "^9.1.0",
|
||||
"react-router-dom": "^6.22.1"
|
||||
"react-router-dom": "^6.22.1",
|
||||
"uplot": "^1.6.30",
|
||||
"uplot-react": "^1.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.55",
|
||||
|
|
@ -3855,22 +3856,6 @@
|
|||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.5.1",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.1.tgz",
|
||||
"integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts/node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.678",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.678.tgz",
|
||||
|
|
@ -7365,6 +7350,25 @@
|
|||
"browserslist": ">= 4.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/uplot": {
|
||||
"version": "1.6.30",
|
||||
"resolved": "https://registry.npmjs.org/uplot/-/uplot-1.6.30.tgz",
|
||||
"integrity": "sha512-48oVVRALM/128ttW19F2a2xobc2WfGdJ0VJFX00099CfqbCTuML7L2OrTKxNzeFP34eo1+yJbqFSoFAp2u28/Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/uplot-react": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/uplot-react/-/uplot-react-1.2.2.tgz",
|
||||
"integrity": "sha512-fCe48HsE0sJmHVUs4TC49roTK3FYNXfCxA44g8pe20TMZ8GD3OT/mtXN/S0gJ8bYVOUcheOZ5u7f1Vw09JbTrw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.6",
|
||||
"uplot": "^1.6.20"
|
||||
}
|
||||
},
|
||||
"node_modules/uri-js": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
|
||||
|
|
@ -7693,21 +7697,6 @@
|
|||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.0.tgz",
|
||||
"integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/zrender/node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"react-app": {
|
||||
"name": "@prometheus-io/react-app",
|
||||
"version": "0.51.2",
|
||||
|
|
|
|||
Loading…
Reference in New Issue