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);
}
},
mousemove: params => {
currentSeries.name = params.seriesName;
},
mouseout: () => {
currentSeries.name = '';
},
mouseover: params => {
currentSeries.name = params.seriesName;
},
};
return (

View File

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

View File

@ -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<string> = [`${tooltipTimeFormatter(value)}`];
const rows: Array<string> = [`${tooltipTimeFormatter(xValue)}`];
const prophetValues = extractProphetValuesFromTooltipParams(prophetValue);
Object.keys(prophetValues).forEach(key => {

View File

@ -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,

View File

@ -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<string> = [`${tooltipFormatter(value)}`];
const rows: Array<string> = [`${tooltipFormatter(xValue)}`];
const prophetValues: Record<string, ProphetValue> =
extractProphetValuesFromTooltipParams(prophetValue);

View File

@ -178,12 +178,12 @@ 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 ? opacity * areaOpacity : 0,
}
: undefined,
emphasis,
showSymbol,
symbolSize: markerSize,

View File

@ -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];