Enhancement/charts (#131)

* fix: import grafana dashboard error * refactor: add colorMode to table settings * refactor: complete breakpoints
n9e · Jun 24, 2022 · 4f9f1f1 · 4f9f1f1
1 parent bd1a4e7
commit 4f9f1f1
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 17 deletions.
diff --git a/src/pages/dashboard/Editor/Options/Table/GraphStyles.tsx b/src/pages/dashboard/Editor/Options/Table/GraphStyles.tsx
@@ -15,7 +15,7 @@
  *
  */
 import React, { useContext } from 'react';
-import { Form, Select, Row, Col, Switch } from 'antd';
+import { Form, Select, Row, Col, Switch, Radio } from 'antd';
 import { CaretDownOutlined } from '@ant-design/icons';
 import _ from 'lodash';
 import { Panel } from '../../Components/Collapse';
@@ -35,6 +35,14 @@ export default function GraphStyles({ chartForm }) {
               <Switch size='small' />
             </Form.Item>
           </Col>
+          <Col span={12}>
+            <Form.Item label='颜色模式' name={[...namePrefix, 'colorMode']}>
+              <Radio.Group buttonStyle='solid'>
+                <Radio.Button value='value'>值</Radio.Button>
+                <Radio.Button value='background'>背景</Radio.Button>
+              </Radio.Group>
+            </Form.Item>
+          </Col>
         </Row>
         <Form.Item label='取值计算' name={[...namePrefix, 'calc']}>
           <Select suffixIcon={<CaretDownOutlined />}>

diff --git a/src/pages/dashboard/Editor/config.tsx b/src/pages/dashboard/Editor/config.tsx
@@ -123,6 +123,7 @@ export const defaultCustomValuesMap = {
   },
   table: {
     showHeader: true,
+    colorMode: 'value',
     calc: 'lastNotNull',
     displayMode: 'seriesToRows',
   },

diff --git a/src/pages/dashboard/Editor/index.tsx b/src/pages/dashboard/Editor/index.tsx
@@ -166,7 +166,7 @@ function index(props: ModalWrapProps & IProps) {
           id={id}
           render={(innerVariableConfig) => {
             return (
-              <div style={{ height: 300, border: '1px solid #d9d9d9' }}>
+              <div style={{ height: 300 }}>
                 <Renderer dashboardId={id} time={range} step={step} type={type} values={values} variableConfig={innerVariableConfig} isPreview />
               </div>
             );

diff --git a/src/pages/dashboard/Renderer/Renderer/Table/index.tsx b/src/pages/dashboard/Renderer/Renderer/Table/index.tsx
@@ -51,7 +51,7 @@ export default function Stat(props: IProps) {
   const { dispatch } = useContext(Context);
   const { values, series } = props;
   const { custom, options, overrides } = values;
-  const { showHeader, calc, aggrDimension, displayMode, columns, sortColumn, sortOrder } = custom;
+  const { showHeader, calc, aggrDimension, displayMode, columns, sortColumn, sortOrder, colorMode = 'value' } = custom;
   const [calculatedValues, setCalculatedValues] = React.useState([]);
   const [sortObj, setSortObj] = React.useState({
     sortColumn,
@@ -104,17 +104,24 @@ export default function Stat(props: IProps) {
         return a.stat - b.stat;
       },
       sortOrder: getSortOrder('value', sortObj),
+      className: 'renderer-table-td-content-value-container',
       render: (text, record) => {
         let textObj = {
           text,
-          color: record.color,
+          color: record.color || '#000',
         };
         const overrideProps = getOverridePropertiesByName(overrides, record.fields.refId);
         if (!_.isEmpty(overrideProps)) {
           textObj = getSerieTextObj(record?.stat, overrideProps?.standardOptions, overrideProps?.valueMappings);
         }
         return (
-          <div className='renderer-table-td-content' style={{ color: textObj.color }}>
+          <div
+            className='renderer-table-td-content'
+            style={{
+              color: colorMode === 'background' ? '#fff' : textObj?.color,
+              backgroundColor: colorMode === 'background' ? textObj.color : 'unset',
+            }}
+          >
             {textObj.text}
           </div>
         );
@@ -136,9 +143,24 @@ export default function Stat(props: IProps) {
           return localeCompare(a.name, b.name);
         },
         sortOrder: getSortOrder(key, sortObj),
+        className: key === 'value' ? 'renderer-table-td-content-value-container' : '',
         render: (_text, record) => {
           if (key === 'value') {
-            return _.get(record, 'text');
+            const textObj = {
+              text: record?.text,
+              color: record?.color || '#000',
+            };
+            return (
+              <div
+                className='renderer-table-td-content'
+                style={{
+                  color: colorMode === 'background' ? '#fff' : textObj?.color,
+                  backgroundColor: colorMode === 'background' ? textObj.color : 'unset',
+                }}
+              >
+                {textObj?.text}
+              </div>
+            );
           }
           return _.get(record.metric, key);
         },
@@ -179,17 +201,24 @@ export default function Stat(props: IProps) {
           return _.get(a[name], 'stat') - _.get(b[name], 'stat');
         },
         sortOrder: getSortOrder('value', sortObj),
+        className: 'renderer-table-td-content-value-container',
         render: (text) => {
           let textObj = {
             text: text?.text,
-            color: text?.color,
+            color: text?.color || '#000',
           };
           const overrideProps = getOverridePropertiesByName(overrides, name);
           if (!_.isEmpty(overrideProps)) {
             textObj = getSerieTextObj(text?.stat, overrideProps?.standardOptions, overrideProps?.valueMappings);
           }
           return (
-            <div className='renderer-table-td-content' style={{ color: textObj?.color }}>
+            <div
+              className='renderer-table-td-content'
+              style={{
+                color: colorMode === 'background' ? '#fff' : textObj?.color,
+                backgroundColor: colorMode === 'background' ? textObj.color : 'unset',
+              }}
+            >
               {textObj?.text}
             </div>
           );

diff --git a/src/pages/dashboard/Renderer/Renderer/Table/style.less b/src/pages/dashboard/Renderer/Renderer/Table/style.less
@@ -17,4 +17,16 @@
       border: 0 none;
     }
   }
+  .ant-table-body {
+    .renderer-table-td-content-value-container {
+      height: 40px;
+      padding: 5px;
+      .renderer-table-td-content {
+        padding: 0 16px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
 }
diff --git a/src/pages/dashboard/Renderer/Renderer/index.tsx b/src/pages/dashboard/Renderer/Renderer/index.tsx
@@ -155,7 +155,7 @@ function index(props: IProps) {
         <div className='renderer-header-loading'>{loading && <SyncOutlined spin />}</div>
       </div>
       <div className='renderer-body' style={{ height: `calc(100% - 36px)` }}>
-        {RendererCptMap[type] ? RendererCptMap[type]() : `无效的图表类型 ${type}`}
+        {RendererCptMap[type] ? RendererCptMap[type]() : <div className='unknown-type'>{`无效的图表类型 ${type}`}</div>}
       </div>
     </div>
   );

diff --git a/src/pages/dashboard/Renderer/Renderer/style.less b/src/pages/dashboard/Renderer/Renderer/style.less
@@ -55,4 +55,10 @@
 }
 .renderer-body {
   background-color: #fff;
+  .unknown-type {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
 }
diff --git a/src/pages/dashboard/Renderer/datasource/usePrometheus.tsx b/src/pages/dashboard/Renderer/datasource/usePrometheus.tsx
@@ -22,6 +22,7 @@ import { ITarget } from '../../types';
 import { replaceExpressionVars, getVaraiableSelected } from '../../VariableConfig/constant';
 import { IVariable } from '../../VariableConfig/definition';
 import replaceExpressionBracket from '../utils/replaceExpressionBracket';
+import { completeBreakpoints } from './utils';
 
 interface IProps {
   id?: string;
@@ -103,7 +104,7 @@ export default function usePrometheus(props: IProps) {
               name: target?.legend ? replaceExpressionBracket(target?.legend, serie.metric) : getSerieName(serie.metric, item.expr),
               metric: serie.metric,
               expr: item.expr,
-              data: serie.values,
+              data: completeBreakpoints(_step, serie.values),
             });
           });
         });

diff --git a/src/pages/dashboard/Renderer/datasource/utils/index.tsx b/src/pages/dashboard/Renderer/datasource/utils/index.tsx
@@ -0,0 +1,20 @@
+import _ from 'lodash';
+
+/**
+ * prometheus 接口默认不会把 null 点返回
+ * 会导致视觉上该时间点有数据存在的假象
+ * 目前先前端处理补全断点
+ */
+export function completeBreakpoints(step, data) {
+  const result: any[] = [];
+  _.forEach(data, (item, idx) => {
+    if (idx > 0) {
+      const prev = result[result.length - 1];
+      if (prev[0] + step < item[0]) {
+        result.push([prev[0] + step, null]);
+      }
+    }
+    result.push(item);
+  });
+  return result;
+}
diff --git a/src/pages/dashboard/VariableConfig/constant.tsx b/src/pages/dashboard/VariableConfig/constant.tsx
@@ -215,7 +215,7 @@ export function getVaraiableSelected(name: string, id: string) {
 
 export const replaceExpressionVars = (expression: string, formData: IVariable[], limit: number, id: string) => {
   var newExpression = expression;
-  const vars = newExpression.match(/\$[0-9a-zA-Z_]+/g);
+  const vars = newExpression ? newExpression.match(/\$[0-9a-zA-Z_]+/g) : [];
   if (vars && vars.length > 0) {
     for (let i = 0; i < limit; i++) {
       if (formData[i]) {
@@ -245,8 +245,11 @@ export const replaceExpressionVars = (expression: string, formData: IVariable[],
 
 export const extractExpressionVars = (expression: string) => {
   var newExpression = expression;
-  const vars = newExpression.match(/\$[0-9a-zA-Z\._\-]+/g);
-  return vars;
+  if (newExpression) {
+    const vars = newExpression.match(/\$[0-9a-zA-Z\._\-]+/g);
+    return vars;
+  }
+  return [];
 };
 
 export function stringStartsAsRegEx(str: string): boolean {

diff --git a/src/pages/dashboard/utils.ts b/src/pages/dashboard/utils.ts
@@ -83,11 +83,11 @@ function convertOptionsGrafanaToN9E(panel: any) {
   };
   // 这里有 default 和 overrides 区别，目前 n9e 暂不支持 overrides
   return {
-    valueMappings: config.mappings, // TODO: 待验证
+    valueMappings: config?.mappings, // TODO: 待验证
     thresholds: {
-      mode: config.thresholds.mode, // mode 目前是不支持的
+      mode: config.thresholds?.mode, // mode 目前是不支持的
       style: 'line', // 目前只有固定的 line 风格，但是这个只用于折线图
-      steps: config.thresholds.steps,
+      steps: config.thresholds?.steps,
     },
     standardOptions: {
       util: unitMap[config.unit] ? unitMap[config.unit] : 'none',
@@ -101,7 +101,7 @@ function convertOptionsGrafanaToN9E(panel: any) {
       placement: options?.legend?.placement,
     },
     tooltip: {
-      mode: options.tooltip === 'single' ? 'single' : 'multi',
+      mode: options?.tooltip === 'single' ? 'single' : 'multi',
     },
   };
 }
@@ -160,6 +160,10 @@ function convertPanlesGrafanaToN9E(panels: any) {
       type: 'stat',
       fn: convertStatGrafanaToN9E,
     },
+    singlestat: {
+      type: 'stat',
+      fn: convertStatGrafanaToN9E,
+    },
     stat: {
       type: 'stat',
       fn: convertStatGrafanaToN9E,