mirror of
https://github.com/apache/superset.git
synced 2026-04-26 19:44:58 +00:00
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:
committed by
Yongjie Zhao
parent
28dff9b395
commit
fb5e5af88a
@@ -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 (
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
@@ -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 => {
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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];
|
||||||
|
|||||||
Reference in New Issue
Block a user