From d7575a3e55eabcf15df04faca684c7f9b989528a Mon Sep 17 00:00:00 2001 From: Ville Brofeldt Date: Mon, 1 Nov 2021 09:35:34 +0200 Subject: [PATCH 1/2] fix(plugin-chart-echarts): fix tick labels and tooltip --- .../EchartsMixedTimeseries.tsx | 6 ++--- .../src/MixedTimeseries/controlPanel.tsx | 24 ------------------- .../src/MixedTimeseries/transformProps.ts | 10 +++----- .../src/MixedTimeseries/types.ts | 4 ---- .../src/Timeseries/transformProps.ts | 6 ++--- .../src/Timeseries/transformers.ts | 14 ++++++----- .../src/Timeseries/types.ts | 2 -- 7 files changed, 17 insertions(+), 49 deletions(-) diff --git a/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx b/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx index 72cc641814..f319fb97a1 100644 --- a/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx +++ b/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx @@ -95,12 +95,12 @@ export default function EchartsMixedTimeseries({ handleChange([seriesName], seriesIndex); } }, - mousemove: params => { - currentSeries.name = params.seriesName; - }, mouseout: () => { currentSeries.name = ''; }, + mouseover: params => { + currentSeries.name = params.seriesName; + }, }; return ( diff --git a/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx index 0de436613c..d30339185b 100644 --- a/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx +++ b/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx @@ -283,30 +283,6 @@ const config: ControlPanelConfig = { ...legendSection, [

{t('X Axis')}

], ['x_axis_time_format'], - [ - { - name: 'xAxisShowMinLabel', - config: { - type: 'CheckboxControl', - label: t('Show Min Label'), - default: true, - renderTrigger: true, - description: t('Show Min Label'), - }, - }, - ], - [ - { - name: 'xAxisShowMaxLabel', - config: { - type: 'CheckboxControl', - label: t('Show Max Label'), - default: true, - renderTrigger: true, - description: t('Show Max Label'), - }, - }, - ], [ { name: 'xAxisLabelRotation', diff --git a/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index aecfd1f148..7c912e7fb1 100644 --- a/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts @@ -99,8 +99,6 @@ export default function transformProps( tooltipTimeFormat, yAxisFormat, yAxisFormatSecondary, - xAxisShowMinLabel, - xAxisShowMaxLabel, xAxisTimeFormat, yAxisBounds, yAxisIndex, @@ -244,8 +242,6 @@ export default function transformProps( nameGap: xAxisTitleMargin, nameLocation: 'middle', axisLabel: { - showMinLabel: xAxisShowMinLabel, - showMaxLabel: xAxisShowMaxLabel, formatter: xAxisFormatter, rotate: xAxisLabelRotation, }, @@ -282,14 +278,14 @@ export default function transformProps( appendToBody: true, trigger: richTooltip ? 'axis' : 'item', formatter: (params: any) => { - const value: number = !richTooltip ? params.value : params[0].value[0]; - const prophetValue: any[] = !richTooltip ? [params] : params; + const xValue: number = richTooltip ? params[0].value[0] : params.value[0]; + const prophetValue: any[] = richTooltip ? params : [params]; if (richTooltip && tooltipSortByMetric) { prophetValue.sort((a, b) => b.data[1] - a.data[1]); } - const rows: Array = [`${tooltipTimeFormatter(value)}`]; + const rows: Array = [`${tooltipTimeFormatter(xValue)}`]; const prophetValues = extractProphetValuesFromTooltipParams(prophetValue); Object.keys(prophetValues).forEach(key => { diff --git a/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts b/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts index e78c2c7f73..a16c596aa1 100644 --- a/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts +++ b/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts @@ -57,8 +57,6 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & { zoomable: boolean; richTooltip: boolean; xAxisLabelRotation: number; - xAxisShowMinLabel?: boolean; - xAxisShowMaxLabel?: boolean; colorScheme?: string; // types specific to Query A and Query B area: boolean; @@ -127,8 +125,6 @@ export const DEFAULT_FORM_DATA: EchartsMixedTimeseriesFormData = { yAxisIndexB: 0, groupby: [], groupbyB: [], - xAxisShowMinLabel: TIMESERIES_DEFAULTS.xAxisShowMinLabel, - xAxisShowMaxLabel: TIMESERIES_DEFAULTS.xAxisShowMaxLabel, zoomable: TIMESERIES_DEFAULTS.zoomable, richTooltip: TIMESERIES_DEFAULTS.richTooltip, xAxisLabelRotation: TIMESERIES_DEFAULTS.xAxisLabelRotation, diff --git a/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index 713a487b8d..90639e65b2 100644 --- a/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -268,14 +268,14 @@ export default function transformProps( appendToBody: true, trigger: richTooltip ? 'axis' : 'item', formatter: (params: any) => { - const value: number = !richTooltip ? params.value : params[0].value[0]; - const prophetValue: any[] = !richTooltip ? [params] : params; + const xValue: number = richTooltip ? params[0].value[0] : params.value[0]; + const prophetValue: any[] = richTooltip ? params : [params]; if (richTooltip && tooltipSortByMetric) { prophetValue.sort((a, b) => b.data[1] - a.data[1]); } - const rows: Array = [`${tooltipFormatter(value)}`]; + const rows: Array = [`${tooltipFormatter(xValue)}`]; const prophetValues: Record = extractProphetValuesFromTooltipParams(prophetValue); diff --git a/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index f8bc52765f..3d34b68fb2 100644 --- a/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -178,12 +178,14 @@ export function transformSeries( step: ['start', 'middle', 'end'].includes(seriesType as string) ? seriesType : undefined, stack: stackId, lineStyle, - areaStyle: { - opacity: - forecastSeries.type === ForecastSeriesEnum.ForecastUpper || area - ? opacity * areaOpacity - : 0, - }, + areaStyle: area + ? { + opacity: + forecastSeries.type === ForecastSeriesEnum.ForecastUpper || area + ? opacity * areaOpacity + : 0, + } + : undefined, emphasis, showSymbol, symbolSize: markerSize, diff --git a/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/plugins/plugin-chart-echarts/src/Timeseries/types.ts index d1d550ee7a..060e43950b 100644 --- a/plugins/plugin-chart-echarts/src/Timeseries/types.ts +++ b/plugins/plugin-chart-echarts/src/Timeseries/types.ts @@ -70,8 +70,6 @@ export type EchartsTimeseriesFormData = QueryFormData & { tooltipTimeFormat?: string; truncateYAxis: boolean; yAxisFormat?: string; - xAxisShowMinLabel?: boolean; - xAxisShowMaxLabel?: boolean; xAxisTimeFormat?: string; timeGrainSqla?: TimeGranularity; yAxisBounds: [number | undefined | null, number | undefined | null]; From 5406bce421bb7914b4d0b5cb00803ac1c3abbbc8 Mon Sep 17 00:00:00 2001 From: Ville Brofeldt Date: Mon, 1 Nov 2021 12:33:49 +0200 Subject: [PATCH 2/2] remove redundant conditional expression --- plugins/plugin-chart-echarts/src/Timeseries/transformers.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index 3d34b68fb2..e411dad348 100644 --- a/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -181,9 +181,7 @@ export function transformSeries( areaStyle: area ? { opacity: - forecastSeries.type === ForecastSeriesEnum.ForecastUpper || area - ? opacity * areaOpacity - : 0, + forecastSeries.type === ForecastSeriesEnum.ForecastUpper ? opacity * areaOpacity : 0, } : undefined, emphasis,