Merge pull request #1202 from AndyFong/dev-0.3

fix(Widget): Bar&Line Label format error when exists Color items #1017 #848
edp963 · Sep 10, 2019 · cffc436 · cffc436
2 parents 1870f00 + ecdc868
commit cffc436
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/webapp/app/containers/Widget/render/chart/bar.ts b/webapp/app/containers/Widget/render/chart/bar.ts
@@ -19,6 +19,7 @@
  */
 
 import { IChartProps } from '../../components/Chart'
+import { DEFAULT_SPLITER } from 'app/globalConstants'
 import {
   IFieldFormatConfig,
   getFormattedValue,
@@ -81,8 +82,8 @@ export default function (chartProps: IChartProps, drillOptions) {
     label: {
       ...getLabelOption('bar', label, metrics, false, {
         formatter: (params) => {
-          const { value, seriesName } = params
-          const m = metrics.find((m) => decodeMetricName(m.name) === seriesName)
+          const { value, seriesId } = params
+          const m = metrics.find((m) => m.name === seriesId.split(`${DEFAULT_SPLITER}${DEFAULT_SPLITER}`)[0])
           let format: IFieldFormatConfig = m.format
           let formattedValue = value
           if (percentage) {
@@ -148,6 +149,7 @@ export default function (chartProps: IChartProps, drillOptions) {
 
       Object.entries(grouped).forEach(([k, v]: [string, any[]]) => {
         const serieObj = {
+          id: `${m.name}${DEFAULT_SPLITER}${DEFAULT_SPLITER}${k}`,
           name: `${k} ${localeMetricName}`,
           type: 'bar',
           ...stackOption,
@@ -207,6 +209,7 @@ export default function (chartProps: IChartProps, drillOptions) {
       })
     } else {
       const serieObj = {
+        id: m.name,
         name: decodedMetricName,
         type: 'bar',
         ...stackOption,

diff --git a/webapp/app/containers/Widget/render/chart/line.ts b/webapp/app/containers/Widget/render/chart/line.ts
@@ -19,6 +19,7 @@
  */
 
 import { IChartProps } from '../../components/Chart'
+import { DEFAULT_SPLITER } from 'app/globalConstants'
 import {
   decodeMetricName,
   getChartTooltipLabel,
@@ -86,6 +87,7 @@ export default function (chartProps: IChartProps, drillOptions?: any) {
     if (color.items.length) {
       Object.entries(grouped).forEach(([k, v]: [string, any[]]) => {
         const serieObj = {
+          id: `${m.name}${DEFAULT_SPLITER}${DEFAULT_SPLITER}${k}`,
           name: `${k} ${localeMetricName}`,
           type: 'line',
           sampling: 'average',
@@ -136,6 +138,7 @@ export default function (chartProps: IChartProps, drillOptions?: any) {
       })
     } else {
       const serieObj = {
+        id: m.name,
         name: decodedMetricName,
         type: 'line',
         sampling: 'average',

diff --git a/webapp/app/containers/Widget/render/chart/util.ts b/webapp/app/containers/Widget/render/chart/util.ts
@@ -23,7 +23,7 @@ import { ILabelConfig } from '../../components/Workbench/ConfigSections/LabelSec
 import { ILegendConfig } from '../../components/Workbench/ConfigSections/LegendSection'
 import { metricAxisLabelFormatter, decodeMetricName, getTextWidth } from '../../components/util'
 import { getFormattedValue } from '../../components/Config/Format'
-import { CHART_LEGEND_POSITIONS } from 'app/globalConstants'
+import { CHART_LEGEND_POSITIONS, DEFAULT_SPLITER } from 'app/globalConstants'
 import { EChartOption } from 'echarts'
 
 interface ISplitLineConfig {
@@ -216,8 +216,8 @@ export function getLabelOption (type: string, labelConfig: ILabelConfig, metrics
   switch (type) {
     case 'line':
       formatter = (params) => {
-        const { value, seriesName } = params
-        const m = metrics.find((m) => decodeMetricName(m.name) === seriesName)
+        const { value, seriesId } = params
+        const m = metrics.find((m) => m.name === seriesId.split(`${DEFAULT_SPLITER}${DEFAULT_SPLITER}`)[0])
         const formattedValue = getFormattedValue(value, m.format)
         return formattedValue
       }