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:
parent
28dff9b395
commit
fb5e5af88a
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
|
|
|
|||
Loading…
Reference in New Issue