style: modify style of tooltip (#56)

* feat: modify color and background color of tooltip in chart

* feat: get dashboard version

* feat: add node to build to get dashboard version

* refactor: refactor code

src/common/utils/agent.ts

@@ -14,7 +14,7 @@ function getCookies(key: string) {
   return key ? cookies[key] : cookies;
 }
 
-function getHeaders(method: string) {
+function getHeaders(method: string, withoutDefaultHeader: boolean) {
   const headers = {
     Accept: 'application/vnd.dice+json;version=1.0',
     Lang: localStorage.getItem('dashboardLang') === 'zh' ? 'zh-CN' : 'en-US',
@@ -28,14 +28,17 @@ function getHeaders(method: string) {
   if (method === 'POST') {
     headers['content-type'] = 'application/json';
   }
-  return headers;
+  return withoutDefaultHeader ? {} : headers;
 }
 
 /* 简单封装 Fetch
  * @Author: licao
  * @Date: 2020-12-29 16:37:41
  */
-const client = (url: string, { method, body, query, ...restConfig }: Record<string, any>) => {
+const client = (
+  url: string,
+  { method, body, query, withoutDefaultHeader = false, ...restConfig }: Record<string, any>,
+) => {
   const defaultMethod = body ? 'POST' : 'GET';
   const _method = (method || defaultMethod).toUpperCase();
   const resultRequest = pickBy(query, (item) => !isNil(item));
@@ -44,7 +47,7 @@ const client = (url: string, { method, body, query, ...restConfig }: Record<stri
     method: _method,
     ...restConfig,
     headers: {
-      ...getHeaders(_method),
+      ...getHeaders(_method, withoutDefaultHeader),
       ...restConfig.headers,
     },
   };

src/components/DcCharts/chart-funnel/option.ts

@@ -1,12 +1,12 @@
 import { get, map, merge, set } from 'lodash';
 import { getCustomOption } from 'src/components/DcCharts/common/custom-option';
+import { getCommonFormatter } from 'src/common/utils';
 import getDefaultOption from './default-option';
 
 export function getOption(data: DC.StaticData, config: DC.ChartConfig) {
   const { option: _option = {} } = config || {};
   const option = merge(getDefaultOption(), getCustomOption(data, config));
-  const { metricData = [], legendData = [] } = data || {};
-  const unit = get(config, ['optionProps', 'unit']);
+  const { metricData = [], legendData = [], unit } = data || {};
 
   if (legendData.length) {
     set(option, ['legend', 'data'], legendData);
@@ -21,5 +21,20 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig) {
     type: 'funnel',
   }));
 
-  return merge(option, { series, tooltip: { formatter: `{a} <br/>{b} : {c}${unit || '%'}` } }, _option);
+  return merge(
+    option,
+    {
+      series,
+      tooltip: {
+        formatter: ({ seriesName, name, value, percent, marker }: any) => {
+          return `${seriesName} <br/> ${marker} ${name} : ${getCommonFormatter(unit, value)} (${percent}%)`;
+        },
+        backgroundColor: 'rgba(48,38,71,0.96)',
+        textStyle: {
+          color: '#fff',
+        },
+      },
+    },
+    _option,
+  );
 }

src/components/DcCharts/chart-line/option.ts

@@ -138,10 +138,12 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig = {}) {
     const curYAxis = yAxis[i] || yAxis[yAxis.length - 1];
     return [curYAxis.unitType, curYAxis.unit];
   };
+
   const genTTArray = (param: any[]) =>
     param.map(
       (unit, i) =>
-        `<span style='color: ${unit.color}'>${showAllTooltip ? unit.seriesName : cutStr(unit.seriesName, 40)} : ${
+        `${unit.marker}<span>
+        ${showAllTooltip ? unit.seriesName : cutStr(unit.seriesName, 40)} : ${
           preciseTooltip || isNaN(unit.value)
             ? isNaN(unit.value)
               ? nullDisplay || '--'
@@ -186,7 +188,11 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig = {}) {
 
   const computedOption = {
     tooltip: {
+      backgroundColor: 'rgba(48,38,71,0.96)',
       formatter: (useBrush && brushFormatter) || tooltipFormatter || defaultTTFormatter,
+      textStyle: {
+        color: '#fff',
+      },
     },
     legend: {
       data: legendData,

src/components/DcCharts/chart-map/index.tsx

@@ -43,7 +43,7 @@ const ChartMap = React.forwardRef((props: IProps, ref: React.Ref<any>) => {
 
   useMount(() => {
     // 初始化全国地图
-    agent('https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json', { referrer: '' })
+    agent('https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json', { referrer: '', withoutDefaultHeader: true })
       .then((res) => registerMap('中华人民共和国', res))
       .catch((err) => {
         message.error(err);
@@ -100,7 +100,10 @@ const ChartMap = React.forwardRef((props: IProps, ref: React.Ref<any>) => {
     }
 
     const adcode = adcodeMap.get(mapType);
-    agent(`https://geo.datav.aliyun.com/areas_v2/bound/${adcode}_full.json`, { referrer: '' })
+    agent(`https://geo.datav.aliyun.com/areas_v2/bound/${adcode}_full.json`, {
+      referrer: '',
+      withoutDefaultHeader: true,
+    })
       .then((res) => registerMap(mapType, res))
       .catch((err) => {
         message.error(err);

src/components/DcCharts/chart-pie/option.ts

@@ -23,8 +23,16 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig) {
       })),
       tooltip: {
         trigger: 'item',
-        formatter: ({ seriesName, name, value, percent }: any) =>
-          `${seriesName} <br/>${name} : ${getCommonFormatter(unit, value)} (${percent}%)`,
+        formatter: ({ seriesName, name, value, percent, marker }: any) => {
+          return `${seriesName} <br/> <span> ${marker}${name} : ${getCommonFormatter(
+            unit,
+            value,
+          )} (${percent}%) </span>`;
+        },
+        backgroundColor: 'rgba(48,38,71,0.96)',
+        textStyle: {
+          color: '#fff',
+        },
       },
     },
     isShowTotal

src/index.ts

@@ -9,3 +9,4 @@ export { createLoadDataFn as createOldLoadDataFn } from 'src/components/DcChartE
 export { colorMap } from 'src/theme/dice';
 export { getLocale, setLocale, getTheme, setTheme };
 export { PureBoardGrid, BoardGrid };
+export { DashboardVersion } from 'src/utils/version';

src/types/index.d.ts

@@ -329,6 +329,8 @@ declare namespace DC {
 
   const dcRegisterComp: DcRegisterComp;
 
+  const DashboardVersion: string;
+
   const colorMap: {
     darkPurple: string;
     darkGreen: string;

src/utils/version.tsx

@@ -0,0 +1,2 @@
+import pkg from '../../package.json';
+export const DashboardVersion = pkg.version;

tsconfig.json

@@ -9,6 +9,7 @@
       "dom",
       "esnext"
     ],
+    "resolveJsonModule": true,
     /* Specify library files to be included in the compilation. */
     "allowJs": true,
     /* Allow javascript files to be compiled. */