From 886875f3e87b2e2af01dab968c561a0f57c25d13 Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Tue, 30 Jun 2020 17:40:58 +0800 Subject: [PATCH 1/3] remember the selected legends for metric chart --- ui/lib/components/MetricChart/index.tsx | 13 ++++++++++--- ui/package.json | 4 ++-- ui/yarn.lock | 4 ++-- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/ui/lib/components/MetricChart/index.tsx b/ui/lib/components/MetricChart/index.tsx index 8c00c99cbe..19f4701efa 100644 --- a/ui/lib/components/MetricChart/index.tsx +++ b/ui/lib/components/MetricChart/index.tsx @@ -9,7 +9,7 @@ import dayjs from 'dayjs' import ReactEchartsCore from 'echarts-for-react/lib/core' import echarts from 'echarts/lib/echarts' import _ from 'lodash' -import React, { useMemo, useRef } from 'react' +import React, { useState, useMemo, useRef } from 'react' import { useInterval } from 'react-use' import format from 'string-template' import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons' @@ -97,6 +97,12 @@ export default function MetricChart({ const valueFormatter = useMemo(() => getValueFormat(unit), [unit]) + const [selectedLegends, setSelectedLegends] = useState({}) + + const handleLegendChange = ({ name, selected }) => { + setSelectedLegends(selected) + } + const opt = useMemo(() => { const s: any[] = [] data.forEach((dataBySeries, seriesIdx) => { @@ -121,7 +127,6 @@ export default function MetricChart({ ...getSeriesProps(type), }) }) - return s }) return { @@ -157,6 +162,7 @@ export default function MetricChart({ orient: 'horizontal', x: 'left', // 'center' | 'left' | {number}, y: 'bottom', + selected: selectedLegends, }, yAxis: { type: 'value', @@ -211,7 +217,7 @@ export default function MetricChart({ }, series: s, } - }, [data, valueFormatter, series, type]) + }, [data, valueFormatter, series, type, selectedLegends]) const showSkeleton = isLoading && _.every(data, (d) => d === null) @@ -239,6 +245,7 @@ export default function MetricChart({ style={{ height: HEIGHT }} option={opt} theme={'light'} + onEvents={{ legendselectchanged: handleLegendChange }} /> ) } diff --git a/ui/package.json b/ui/package.json index d12ed1ab95..e94b6c6100 100644 --- a/ui/package.json +++ b/ui/package.json @@ -18,8 +18,8 @@ "classnames": "^2.2.6", "d3": "^5.15.1", "dayjs": "^1.8.24", - "echarts": "^4.7.0", - "echarts-for-react": "^2.0.15-beta.1", + "echarts": "^4.8.0", + "echarts-for-react": "^2.0.16", "framer-motion": "^1.10.3", "i18next": "^19.4.2", "i18next-browser-languagedetector": "^4.0.1", diff --git a/ui/yarn.lock b/ui/yarn.lock index d3d757783f..1e7e184670 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -4997,7 +4997,7 @@ ecc-jsbn@~0.1.1: jsbn "~0.1.0" safer-buffer "^2.1.0" -echarts-for-react@^2.0.15-beta.1: +echarts-for-react@^2.0.16: version "2.0.16" resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-2.0.16.tgz#8134a53dff90882c1e6a95c45ceab21e00f6c9f5" integrity sha512-VmHCktay2qKt/+wpL/C7thbvIa7dYBEey0/U4Zaqo+qeA4wx+uiCd5NeCsPIhD/0Pv+2qqNswqiNiUCtcgccOw== @@ -5005,7 +5005,7 @@ echarts-for-react@^2.0.15-beta.1: fast-deep-equal "^2.0.1" size-sensor "^1.0.0" -echarts@^4.7.0: +echarts@^4.8.0: version "4.8.0" resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.8.0.tgz#b2c1cfb9229b13d368ee104fc8eea600b574d4c4" integrity sha512-YwShpug8fWngj/RlgxDaYrLBoD+LsZUArrusjNPHpAF+is+gGe38xx4W848AwWMGoi745t3OXM52JedNrv+F6g== From 1031feaf0f54c885337106533cd5892ec995e7f5 Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Wed, 1 Jul 2020 11:51:38 +0800 Subject: [PATCH 2/3] revert code and change noMerge prop value to default false --- ui/lib/components/MetricChart/index.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/ui/lib/components/MetricChart/index.tsx b/ui/lib/components/MetricChart/index.tsx index 19f4701efa..9627366b3c 100644 --- a/ui/lib/components/MetricChart/index.tsx +++ b/ui/lib/components/MetricChart/index.tsx @@ -97,12 +97,6 @@ export default function MetricChart({ const valueFormatter = useMemo(() => getValueFormat(unit), [unit]) - const [selectedLegends, setSelectedLegends] = useState({}) - - const handleLegendChange = ({ name, selected }) => { - setSelectedLegends(selected) - } - const opt = useMemo(() => { const s: any[] = [] data.forEach((dataBySeries, seriesIdx) => { @@ -162,7 +156,6 @@ export default function MetricChart({ orient: 'horizontal', x: 'left', // 'center' | 'left' | {number}, y: 'bottom', - selected: selectedLegends, }, yAxis: { type: 'value', @@ -217,7 +210,7 @@ export default function MetricChart({ }, series: s, } - }, [data, valueFormatter, series, type, selectedLegends]) + }, [data, valueFormatter, series, type]) const showSkeleton = isLoading && _.every(data, (d) => d === null) @@ -240,12 +233,10 @@ export default function MetricChart({ inner = ( ) } From 3b19e8e5da907683be81d70db2da12f8769c2d95 Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Wed, 1 Jul 2020 11:58:03 +0800 Subject: [PATCH 3/3] fix CI --- ui/lib/components/MetricChart/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/lib/components/MetricChart/index.tsx b/ui/lib/components/MetricChart/index.tsx index 9627366b3c..7fe2d6eecb 100644 --- a/ui/lib/components/MetricChart/index.tsx +++ b/ui/lib/components/MetricChart/index.tsx @@ -9,7 +9,7 @@ import dayjs from 'dayjs' import ReactEchartsCore from 'echarts-for-react/lib/core' import echarts from 'echarts/lib/echarts' import _ from 'lodash' -import React, { useState, useMemo, useRef } from 'react' +import React, { useMemo, useRef } from 'react' import { useInterval } from 'react-use' import format from 'string-template' import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons'