diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts index c07a8b9477b..ada72d61369 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts @@ -194,4 +194,38 @@ describe('BigNumberWithTrendline transformProps', () => { ); expect(result.headerFormatter.format(500)).toBe('$500'); }); + + it('should use last data point for comparison when big number comes from aggregated data', () => { + const chartProps = { + width: 500, + height: 400, + queriesData: [ + { + data: [ + { __timestamp: 3, value: 150 }, + { __timestamp: 2, value: 100 }, + { __timestamp: 1, value: 110 }, + ] as unknown as BigNumberDatum[], + colnames: ['__timestamp', 'value'], + coltypes: ['TEMPORAL', 'NUMERIC'], + }, + { + data: [{ value: 360 }], + colnames: ['value'], + coltypes: ['NUMERIC'], + }, + ], + formData: { ...baseFormData, aggregation: 'SUM' }, + rawFormData: baseRawFormData, + hooks: baseHooks, + datasource: baseDatasource, + theme: { colors: { grayscale: { light5: '#eee' } } }, + }; + + const result = transformProps( + chartProps as unknown as BigNumberWithTrendlineChartProps, + ); + expect(result.bigNumber).toBe(360); + expect(result.subheader).toBe('50.0% WoW'); + }); }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts index a5576074a15..b59e2803c36 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts @@ -157,11 +157,13 @@ export default function transformProps( if (compareLag > 0 && sortedData.length > 0) { const compareIndex = compareLag; if (compareIndex < sortedData.length) { - const compareValue = sortedData[compareIndex][1]; + const compareFromValue = sortedData[compareIndex][1]; + const compareToValue = sortedData[0][1]; // compare values must both be non-nulls - if (bigNumber !== null && compareValue !== null) { - percentChange = compareValue - ? (Number(bigNumber) - compareValue) / Math.abs(compareValue) + if (compareToValue !== null && compareFromValue !== null) { + percentChange = compareFromValue + ? (Number(compareToValue) - compareFromValue) / + Math.abs(compareFromValue) : 0; formattedSubheader = `${formatPercentChange( percentChange,