fix(plugin-chart-echarts): fix tick labels and tooltip (#1447)

* fix(plugin-chart-echarts): fix tick labels and tooltip

* remove redundant conditional expression
This commit is contained in:
Ville Brofeldt
2021-11-01 13:22:17 +01:00
committed by Yongjie Zhao
parent 28dff9b395
commit fb5e5af88a
7 changed files with 15 additions and 49 deletions

View File

@@ -95,12 +95,12 @@ export default function EchartsMixedTimeseries({
handleChange([seriesName], seriesIndex); handleChange([seriesName], seriesIndex);
} }
}, },
mousemove: params => {
currentSeries.name = params.seriesName;
},
mouseout: () => { mouseout: () => {
currentSeries.name = ''; currentSeries.name = '';
}, },
mouseover: params => {
currentSeries.name = params.seriesName;
},
}; };
return ( return (

View File

@@ -283,30 +283,6 @@ const config: ControlPanelConfig = {
...legendSection, ...legendSection,
[<h1 className="section-header">{t('X Axis')}</h1>], [<h1 className="section-header">{t('X Axis')}</h1>],
['x_axis_time_format'], ['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', name: 'xAxisLabelRotation',

View File

@@ -99,8 +99,6 @@ export default function transformProps(
tooltipTimeFormat, tooltipTimeFormat,
yAxisFormat, yAxisFormat,
yAxisFormatSecondary, yAxisFormatSecondary,
xAxisShowMinLabel,
xAxisShowMaxLabel,
xAxisTimeFormat, xAxisTimeFormat,
yAxisBounds, yAxisBounds,
yAxisIndex, yAxisIndex,
@@ -244,8 +242,6 @@ export default function transformProps(
nameGap: xAxisTitleMargin, nameGap: xAxisTitleMargin,
nameLocation: 'middle', nameLocation: 'middle',
axisLabel: { axisLabel: {
showMinLabel: xAxisShowMinLabel,
showMaxLabel: xAxisShowMaxLabel,
formatter: xAxisFormatter, formatter: xAxisFormatter,
rotate: xAxisLabelRotation, rotate: xAxisLabelRotation,
}, },
@@ -282,14 +278,14 @@ export default function transformProps(
appendToBody: true, appendToBody: true,
trigger: richTooltip ? 'axis' : 'item', trigger: richTooltip ? 'axis' : 'item',
formatter: (params: any) => { formatter: (params: any) => {
const value: number = !richTooltip ? params.value : params[0].value[0]; const xValue: number = richTooltip ? params[0].value[0] : params.value[0];
const prophetValue: any[] = !richTooltip ? [params] : params; const prophetValue: any[] = richTooltip ? params : [params];
if (richTooltip && tooltipSortByMetric) { if (richTooltip && tooltipSortByMetric) {
prophetValue.sort((a, b) => b.data[1] - a.data[1]); prophetValue.sort((a, b) => b.data[1] - a.data[1]);
} }
const rows: Array<string> = [`${tooltipTimeFormatter(value)}`]; const rows: Array<string> = [`${tooltipTimeFormatter(xValue)}`];
const prophetValues = extractProphetValuesFromTooltipParams(prophetValue); const prophetValues = extractProphetValuesFromTooltipParams(prophetValue);
Object.keys(prophetValues).forEach(key => { Object.keys(prophetValues).forEach(key => {

View File

@@ -57,8 +57,6 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & {
zoomable: boolean; zoomable: boolean;
richTooltip: boolean; richTooltip: boolean;
xAxisLabelRotation: number; xAxisLabelRotation: number;
xAxisShowMinLabel?: boolean;
xAxisShowMaxLabel?: boolean;
colorScheme?: string; colorScheme?: string;
// types specific to Query A and Query B // types specific to Query A and Query B
area: boolean; area: boolean;
@@ -127,8 +125,6 @@ export const DEFAULT_FORM_DATA: EchartsMixedTimeseriesFormData = {
yAxisIndexB: 0, yAxisIndexB: 0,
groupby: [], groupby: [],
groupbyB: [], groupbyB: [],
xAxisShowMinLabel: TIMESERIES_DEFAULTS.xAxisShowMinLabel,
xAxisShowMaxLabel: TIMESERIES_DEFAULTS.xAxisShowMaxLabel,
zoomable: TIMESERIES_DEFAULTS.zoomable, zoomable: TIMESERIES_DEFAULTS.zoomable,
richTooltip: TIMESERIES_DEFAULTS.richTooltip, richTooltip: TIMESERIES_DEFAULTS.richTooltip,
xAxisLabelRotation: TIMESERIES_DEFAULTS.xAxisLabelRotation, xAxisLabelRotation: TIMESERIES_DEFAULTS.xAxisLabelRotation,

View File

@@ -268,14 +268,14 @@ export default function transformProps(
appendToBody: true, appendToBody: true,
trigger: richTooltip ? 'axis' : 'item', trigger: richTooltip ? 'axis' : 'item',
formatter: (params: any) => { formatter: (params: any) => {
const value: number = !richTooltip ? params.value : params[0].value[0]; const xValue: number = richTooltip ? params[0].value[0] : params.value[0];
const prophetValue: any[] = !richTooltip ? [params] : params; const prophetValue: any[] = richTooltip ? params : [params];
if (richTooltip && tooltipSortByMetric) { if (richTooltip && tooltipSortByMetric) {
prophetValue.sort((a, b) => b.data[1] - a.data[1]); prophetValue.sort((a, b) => b.data[1] - a.data[1]);
} }
const rows: Array<string> = [`${tooltipFormatter(value)}`]; const rows: Array<string> = [`${tooltipFormatter(xValue)}`];
const prophetValues: Record<string, ProphetValue> = const prophetValues: Record<string, ProphetValue> =
extractProphetValuesFromTooltipParams(prophetValue); extractProphetValuesFromTooltipParams(prophetValue);

View File

@@ -178,12 +178,12 @@ export function transformSeries(
step: ['start', 'middle', 'end'].includes(seriesType as string) ? seriesType : undefined, step: ['start', 'middle', 'end'].includes(seriesType as string) ? seriesType : undefined,
stack: stackId, stack: stackId,
lineStyle, lineStyle,
areaStyle: { areaStyle: area
opacity: ? {
forecastSeries.type === ForecastSeriesEnum.ForecastUpper || area opacity:
? opacity * areaOpacity forecastSeries.type === ForecastSeriesEnum.ForecastUpper ? opacity * areaOpacity : 0,
: 0, }
}, : undefined,
emphasis, emphasis,
showSymbol, showSymbol,
symbolSize: markerSize, symbolSize: markerSize,

View File

@@ -70,8 +70,6 @@ export type EchartsTimeseriesFormData = QueryFormData & {
tooltipTimeFormat?: string; tooltipTimeFormat?: string;
truncateYAxis: boolean; truncateYAxis: boolean;
yAxisFormat?: string; yAxisFormat?: string;
xAxisShowMinLabel?: boolean;
xAxisShowMaxLabel?: boolean;
xAxisTimeFormat?: string; xAxisTimeFormat?: string;
timeGrainSqla?: TimeGranularity; timeGrainSqla?: TimeGranularity;
yAxisBounds: [number | undefined | null, number | undefined | null]; yAxisBounds: [number | undefined | null, number | undefined | null];