Merge branch 'enhancement/charts'

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
+    "@ant-design/plots": "^1.0.5",
     "@codemirror/autocomplete": "^0.18.3",
     "@codemirror/basic-setup": "^0.18.0",
     "@codemirror/highlight": "^0.18.3",
@@ -18,6 +19,8 @@
     "@codemirror/state": "^0.18.2",
     "@codemirror/view": "^0.18.1",
     "@d3-charts/ts-graph": "^0.3.7",
+    "@fc-plot/ts-graph": "^0.14.1",
+    "@types/echarts": "^4.9.7",
     "@y0c/react-datepicker": "^1.0.4",
     "ahooks": "^2.10.2",
     "antd": "4.15.3",
@@ -43,11 +46,16 @@
     "react-grid-layout": "^1.2.5",
     "react-highlight-words": "^0.17.0",
     "react-i18next": "^11.11.1",
+    "react-markdown": "^7.0.1",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-saga": "^0.3.1",
     "react-sortable-hoc": "^1.8.3",
     "redux-saga": "^1.1.3",
+    "rehype-raw": "^6.1.1",
+    "remark-gfm": "^1.0.0",
+    "semver": "^7.3.5",
+    "tslib": "^2.3.1",
     "umi-request": "^1.3.5"
   },
   "devDependencies": {
@@ -59,8 +67,8 @@
     "@types/echarts": "^4.9.7",
     "@types/jquery": "^3.5.5",
     "@types/node": "^15.0.1",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.7",
     "@vitejs/plugin-react-refresh": "^1.3.1",
     "babel-generator": "^6.26.1",

src/components/DateRangePicker/index.tsx

@@ -22,6 +22,7 @@ export interface RelativeRange {
   num: number;
   unit: unitOfTime.DurationConstructor;
   description: string;
+  refreshFlag?: string; // 用于刷新的标识
 }
 
 export interface AbsoluteRange {

src/components/G2PieChart/index.tsx

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { Pie, PieConfig, Options } from '@ant-design/plots';
+
+type Marker = {
+  symbol?: string;
+  spacing?: number;
+};
+
+interface ListItem extends DataType {
+  marker?: Marker | string;
+}
+
+type DataType = {
+  name: string;
+  value: number;
+};
+interface Props {
+  data: DataType[];
+  positon: 'top' | 'left' | 'right' | 'bottom';
+  hidden: boolean;
+}
+
+const DemoPie = (props: Props) => {
+  const { data, positon, hidden } = props;
+
+  const config: PieConfig = {
+    padding: [16, 8, 16, 8],
+    appendPadding: 10,
+    data,
+    // autoFit: true,
+    angleField: 'value',
+    colorField: 'name',
+    radius: 0.9,
+    label: {
+      type: 'spider',
+      // offset: '-30%',
+      content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
+      style: {
+        fontSize: 14,
+        textAlign: 'center',
+      },
+    },
+    interactions: [
+      {
+        type: 'element-active',
+      },
+    ],
+    tooltip: {
+      fields: ['name', 'value'],
+      formatter: (datum) => {
+        // console.log(datum);
+        return { name: datum.name, value: `${datum.value.toFixed(3)}` };
+      },
+      // customContent: (title, data) => {
+      //   console.log(title, data);
+      //   return `<div style="color: green">${title}</div>`;
+      // },
+    },
+    legend: hidden
+      ? false
+      : {
+          position: positon,
+          // itemName: {
+          //   formatter(text: string, item: ListItem, index: number) {
+          //     // console.log(text, item, index);
+          //     return text;
+          //   },
+          // },
+        },
+  };
+  return <Pie {...config} />;
+};
+
+export default DemoPie;

src/components/Graph/Graph/Graph.tsx

@@ -75,16 +75,16 @@ export default class Graph extends Component<GraphProps> {
           series: this.props.series,
           points,
           chartWidth: this.graphWrapEle.offsetWidth - 40,
-          chartType: nextProps.graphConfig.chartType
+          chartType: nextProps.graphConfig.chartType,
         });
       },
-    }
+    };
     if (isFormatUnit1024) {
       Object.assign(options, {
-        precision: nextProps.graphConfig.precision
-      })
+        precision: nextProps.graphConfig.precision,
+      });
     }
-    return options
+    return options;
   }
 
   render() {

src/components/Graph/api.ts

@@ -2,10 +2,21 @@ import request from '@/utils/request';
 import { RequestMethod } from '@/store/common';
 import queryString from 'query-string';
 
-export const fetchHistory = (params?) => {
+const signals = {};
+
+export const fetchHistory = (params?, signalKey?) => {
+  const controller = new AbortController();
+  const { signal } = controller;
+  if (signals[signalKey] && signals[signalKey].abort) {
+    signals[signalKey].abort();
+  }
+  signals[signalKey] = controller;
   return request(`/api/n9e/prometheus/api/v1/query_range`, {
     method: RequestMethod.Get,
-    params
+    params,
+    signal,
+  }).finally(() => {
+    delete signals[signalKey];
   });
 }
 

src/components/Graph/util/normalizeSeries.tsx

@@ -7,16 +7,16 @@ export interface SeriesType {
   name: number | string;
   tags: number | string;
   metricLabels: string;
-  data: [Number,Number][];
-  lineWidth: number
+  data: [Number, Number][];
+  lineWidth: number;
   color: string;
   oldColor: string;
   comparison: number;
   legendTitleFormat?: string;
 }
 
 export default function normalizeSeries(data) {
-  const series:SeriesType[] = [];
+  const series: SeriesType[] = [];
   _.each(data, (o, i) => {
     const id = o?.metric?.ident || o?.metric?.__name__;
     const color = getSerieColor(o, i);
@@ -31,7 +31,7 @@ export default function normalizeSeries(data) {
       color,
       oldColor: color,
       comparison: o.offset,
-      legendTitleFormat: o.legendTitleFormat
+      legendTitleFormat: o.legendTitleFormat,
     };
     series.push(serie);
   });