(() => {
- const values = data.map((d) => d.value);
- const maxValue = max(values) ?? 0;
- const minValue = min(values) ?? 0;
-
- const isTrendingMode = monitorInfo?.trendingMode ?? false; // if true, y axis not start from 0
-
- const yMin = isTrendingMode
- ? Math.max(minValue - (maxValue - minValue) / 10, 0)
- : 0;
-
- return {
- data,
- height: 200,
- xField: 'time',
- yField: 'value',
- smooth: true,
- meta: {
- value: {
- min: yMin,
- },
- time: {
- formatter(value) {
- return dayjs(value).format(
- rangeType === '1w' ? 'MM-DD HH:mm' : 'HH:mm'
- );
- },
- },
- },
- // need explore how to display null data
- // xAxis: {
- // type: 'time',
- // },
- color: 'rgb(34 197 94 / 0.8)',
- areaStyle: () => {
- return {
- fill: 'l(270) 0:rgb(34 197 94 / 0.2) 0.5:rgb(34 197 94 / 0.5) 1:rgb(34 197 94 / 0.8)',
- };
- },
- annotations,
- tooltip: {
- title: (title, datum) => {
- return dayjs(datum.time).format('YYYY-MM-DD HH:mm');
- },
- formatter(datum) {
- const { name, text } = getProviderDisplay(
- datum.value,
- providerInfo
- );
-
- return {
- name,
- value: datum.value ? text : 'null',
- };
- },
- },
- };
- }, [data, rangeType]);
+ const isTrendingMode = monitorInfo?.trendingMode ?? false; // if true, y axis not start from 0
return (
@@ -172,9 +120,122 @@ export const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo(
-
+
+
+
+
+
+
+
+
+
+ dayjs(date).format(rangeType === '1w' ? 'MM-DD HH:mm' : 'HH:mm')
+ }
+ />
+
+
+
+ dayjs(get(payload, [0, 'payload', 'time'])).format(
+ 'YYYY-MM-DD HH:mm:ss'
+ )
+ }
+ formatter={(value, defaultText, item, index, payload) => {
+ if (typeof value !== 'number') {
+ return defaultText;
+ }
+ const { name, text } = getProviderDisplay(
+ Number(value),
+ providerInfo
+ );
+
+ return (
+
+ {name}:
+ {text}
+
+ );
+ }}
+ content={}
+ />
+
+
+
+
+
+
);
}
);
MonitorDataChart.displayName = 'MonitorDataChart';
+
+const CustomizedErrorArea: React.FC = (props) => {
+ const { colors } = useTheme();
+ const y = get(props, 'offset.top', 10);
+ const height = get(props, 'offset.height', 160);
+ const points = get(props, 'formattedGraphicalItems.0.props.points', []) as {
+ x: number;
+ y: number | null;
+ }[];
+
+ const errorArea = useMemo(() => {
+ const _errorArea: { x: number; width: number }[] = [];
+ let prevX: number | null = null;
+ points.forEach((item, i, arr) => {
+ if (i === 0 && !item.y) {
+ prevX = 0;
+ } else if (!item.y && prevX === null && arr[i - 1].y) {
+ prevX = arr[i - 1].x;
+ } else if (item.y && prevX !== null) {
+ _errorArea.push({
+ x: prevX,
+ width: item.x - prevX,
+ });
+ prevX = null;
+ }
+ });
+
+ return _errorArea;
+ }, [points]);
+
+ return errorArea.map((area, i) => {
+ return (
+
+ );
+ });
+};
+CustomizedErrorArea.displayName = 'CustomizedErrorArea';
diff --git a/src/client/hooks/useTheme.ts b/src/client/hooks/useTheme.ts
index 8748f52..3dd90d2 100644
--- a/src/client/hooks/useTheme.ts
+++ b/src/client/hooks/useTheme.ts
@@ -2,6 +2,7 @@ import { useColorSchema } from '@/store/settings';
import { theme, ThemeConfig } from 'antd';
import { useEffect, useMemo } from 'react';
import { colord } from 'colord';
+import twColors from 'tailwindcss/colors';
const THEME_CONFIG = 'tianji.theme';
@@ -19,6 +20,9 @@ const THEME_COLORS = {
gray700: '#6e6e6e',
gray800: '#4b4b4b',
gray900: '#2c2c2c',
+ green400: twColors.green['400'],
+ green500: twColors.green['500'],
+ green600: twColors.green['600'],
},
dark: {
primary: '#2680eb',
@@ -33,6 +37,9 @@ const THEME_COLORS = {
gray700: '#b9b9b9',
gray800: '#e3e3e3',
gray900: '#ffffff',
+ green400: twColors.green['600'],
+ green500: twColors.green['500'],
+ green600: twColors.green['400'],
},
};
@@ -55,7 +62,14 @@ export function useTheme() {
const customTheme = window.localStorage.getItem(THEME_CONFIG);
const theme = isValidTheme(customTheme) ? customTheme : defaultTheme;
- const primaryColor = useMemo(() => colord(THEME_COLORS[theme].primary), []);
+ const primaryColor = useMemo(
+ () => colord(THEME_COLORS[theme].primary),
+ [theme]
+ );
+ const healthColor = useMemo(
+ () => colord(THEME_COLORS[theme].green400),
+ [theme]
+ );
const colors = useMemo(
() => ({
@@ -63,10 +77,12 @@ export function useTheme() {
...THEME_COLORS[theme],
},
chart: {
+ error: twColors.red[500],
text: THEME_COLORS[theme].gray700,
line: THEME_COLORS[theme].gray200,
pv: primaryColor.alpha(0.4).toRgbString(),
uv: primaryColor.alpha(0.6).toRgbString(),
+ monitor: healthColor.alpha(0.8).toRgbString(),
},
map: {
baseColor: THEME_COLORS[theme].primary,
diff --git a/src/client/package.json b/src/client/package.json
index 9a0acc6..82cc2c1 100644
--- a/src/client/package.json
+++ b/src/client/package.json
@@ -17,7 +17,6 @@
"keywords": [],
"author": "moonrailgun ",
"dependencies": {
- "@ant-design/charts": "^1.4.2",
"@ant-design/icons": "^5.3.6",
"@antv/l7": "^2.20.14",
"@antv/larkmap": "^1.4.13",