mirror of
https://github.com/apache/superset.git
synced 2024-09-06 13:57:40 -04:00
fix(plugin-chart-echarts): show zero value in tooltip (#21296)
Co-authored-by: Ville Brofeldt <ville.brofeldt@apple.com>
This commit is contained in:
parent
c3a00d43d0
commit
1aeb8fd6b7
@ -16,6 +16,7 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
|
import { isNumber } from 'lodash';
|
||||||
import { DataRecord, DTTM_ALIAS, NumberFormatter } from '@superset-ui/core';
|
import { DataRecord, DTTM_ALIAS, NumberFormatter } from '@superset-ui/core';
|
||||||
import { OptionName } from 'echarts/types/src/util/types';
|
import { OptionName } from 'echarts/types/src/util/types';
|
||||||
import { TooltipMarker } from 'echarts/types/src/util/format';
|
import { TooltipMarker } from 'echarts/types/src/util/format';
|
||||||
@ -60,7 +61,7 @@ export const extractForecastValuesFromTooltipParams = (
|
|||||||
const { marker, seriesId, value } = param;
|
const { marker, seriesId, value } = param;
|
||||||
const context = extractForecastSeriesContext(seriesId);
|
const context = extractForecastSeriesContext(seriesId);
|
||||||
const numericValue = isHorizontal ? value[0] : value[1];
|
const numericValue = isHorizontal ? value[0] : value[1];
|
||||||
if (numericValue) {
|
if (isNumber(numericValue)) {
|
||||||
if (!(context.name in values))
|
if (!(context.name in values))
|
||||||
values[context.name] = {
|
values[context.name] = {
|
||||||
marker: marker || '',
|
marker: marker || '',
|
||||||
@ -94,7 +95,7 @@ export const formatForecastTooltipSeries = ({
|
|||||||
}): string => {
|
}): string => {
|
||||||
let row = `${marker}${sanitizeHtml(seriesName)}: `;
|
let row = `${marker}${sanitizeHtml(seriesName)}: `;
|
||||||
let isObservation = false;
|
let isObservation = false;
|
||||||
if (observation) {
|
if (isNumber(observation)) {
|
||||||
isObservation = true;
|
isObservation = true;
|
||||||
row += `${formatter(observation)}`;
|
row += `${formatter(observation)}`;
|
||||||
}
|
}
|
||||||
|
@ -154,103 +154,148 @@ describe('rebaseForecastDatum', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('extractForecastValuesFromTooltipParams', () => {
|
test('extractForecastValuesFromTooltipParams should extract the proper data from tooltip params', () => {
|
||||||
it('should extract the proper data from tooltip params', () => {
|
expect(
|
||||||
expect(
|
extractForecastValuesFromTooltipParams([
|
||||||
extractForecastValuesFromTooltipParams([
|
{
|
||||||
{
|
|
||||||
marker: '<img>',
|
|
||||||
seriesId: 'abc',
|
|
||||||
value: [new Date(0), 10],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
marker: '<img>',
|
|
||||||
seriesId: 'abc__yhat',
|
|
||||||
value: [new Date(0), 1],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
marker: '<img>',
|
|
||||||
seriesId: 'abc__yhat_lower',
|
|
||||||
value: [new Date(0), 5],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
marker: '<img>',
|
|
||||||
seriesId: 'abc__yhat_upper',
|
|
||||||
value: [new Date(0), 6],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
marker: '<img>',
|
|
||||||
seriesId: 'qwerty',
|
|
||||||
value: [new Date(0), 2],
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
).toEqual({
|
|
||||||
abc: {
|
|
||||||
marker: '<img>',
|
marker: '<img>',
|
||||||
observation: 10,
|
seriesId: 'abc',
|
||||||
forecastTrend: 1,
|
value: [new Date(0), 10],
|
||||||
forecastLower: 5,
|
|
||||||
forecastUpper: 6,
|
|
||||||
},
|
},
|
||||||
qwerty: {
|
{
|
||||||
marker: '<img>',
|
marker: '<img>',
|
||||||
observation: 2,
|
seriesId: 'abc__yhat',
|
||||||
|
value: [new Date(0), 1],
|
||||||
},
|
},
|
||||||
});
|
{
|
||||||
|
marker: '<img>',
|
||||||
|
seriesId: 'abc__yhat_lower',
|
||||||
|
value: [new Date(0), 5],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
marker: '<img>',
|
||||||
|
seriesId: 'abc__yhat_upper',
|
||||||
|
value: [new Date(0), 6],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
marker: '<img>',
|
||||||
|
seriesId: 'qwerty',
|
||||||
|
value: [new Date(0), 2],
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
).toEqual({
|
||||||
|
abc: {
|
||||||
|
marker: '<img>',
|
||||||
|
observation: 10,
|
||||||
|
forecastTrend: 1,
|
||||||
|
forecastLower: 5,
|
||||||
|
forecastUpper: 6,
|
||||||
|
},
|
||||||
|
qwerty: {
|
||||||
|
marker: '<img>',
|
||||||
|
observation: 2,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('extractForecastValuesFromTooltipParams should extract valid values', () => {
|
||||||
|
expect(
|
||||||
|
extractForecastValuesFromTooltipParams([
|
||||||
|
{
|
||||||
|
marker: '<img>',
|
||||||
|
seriesId: 'foo',
|
||||||
|
value: [0, 10],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
marker: '<img>',
|
||||||
|
seriesId: 'bar',
|
||||||
|
value: [100, 0],
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
).toEqual({
|
||||||
|
foo: {
|
||||||
|
marker: '<img>',
|
||||||
|
observation: 10,
|
||||||
|
},
|
||||||
|
bar: {
|
||||||
|
marker: '<img>',
|
||||||
|
observation: 0,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const formatter = getNumberFormatter(NumberFormats.INTEGER);
|
const formatter = getNumberFormatter(NumberFormats.INTEGER);
|
||||||
|
|
||||||
describe('formatForecastTooltipSeries', () => {
|
test('formatForecastTooltipSeries should apply format to value', () => {
|
||||||
it('should generate a proper series tooltip', () => {
|
expect(
|
||||||
expect(
|
formatForecastTooltipSeries({
|
||||||
formatForecastTooltipSeries({
|
seriesName: 'abc',
|
||||||
seriesName: 'abc',
|
marker: '<img>',
|
||||||
marker: '<img>',
|
observation: 10.1,
|
||||||
observation: 10.1,
|
formatter,
|
||||||
formatter,
|
}),
|
||||||
}),
|
).toEqual('<img>abc: 10');
|
||||||
).toEqual('<img>abc: 10');
|
});
|
||||||
expect(
|
|
||||||
formatForecastTooltipSeries({
|
test('formatForecastTooltipSeries should show falsy value', () => {
|
||||||
seriesName: 'qwerty',
|
expect(
|
||||||
marker: '<img>',
|
formatForecastTooltipSeries({
|
||||||
observation: 10.1,
|
seriesName: 'abc',
|
||||||
forecastTrend: 20.1,
|
marker: '<img>',
|
||||||
forecastLower: 5.1,
|
observation: 0,
|
||||||
forecastUpper: 7.1,
|
formatter,
|
||||||
formatter,
|
}),
|
||||||
}),
|
).toEqual('<img>abc: 0');
|
||||||
).toEqual('<img>qwerty: 10, ŷ = 20 (5, 12)');
|
});
|
||||||
expect(
|
|
||||||
formatForecastTooltipSeries({
|
test('formatForecastTooltipSeries should format full forecast', () => {
|
||||||
seriesName: 'qwerty',
|
expect(
|
||||||
marker: '<img>',
|
formatForecastTooltipSeries({
|
||||||
forecastTrend: 20,
|
seriesName: 'qwerty',
|
||||||
forecastLower: 5,
|
marker: '<img>',
|
||||||
forecastUpper: 7,
|
observation: 10.1,
|
||||||
formatter,
|
forecastTrend: 20.1,
|
||||||
}),
|
forecastLower: 5.1,
|
||||||
).toEqual('<img>qwerty: ŷ = 20 (5, 12)');
|
forecastUpper: 7.1,
|
||||||
expect(
|
formatter,
|
||||||
formatForecastTooltipSeries({
|
}),
|
||||||
seriesName: 'qwerty',
|
).toEqual('<img>qwerty: 10, ŷ = 20 (5, 12)');
|
||||||
marker: '<img>',
|
});
|
||||||
observation: 10.1,
|
|
||||||
forecastLower: 6,
|
test('formatForecastTooltipSeries should format forecast without observation', () => {
|
||||||
forecastUpper: 7,
|
expect(
|
||||||
formatter,
|
formatForecastTooltipSeries({
|
||||||
}),
|
seriesName: 'qwerty',
|
||||||
).toEqual('<img>qwerty: 10 (6, 13)');
|
marker: '<img>',
|
||||||
expect(
|
forecastTrend: 20,
|
||||||
formatForecastTooltipSeries({
|
forecastLower: 5,
|
||||||
seriesName: 'qwerty',
|
forecastUpper: 7,
|
||||||
marker: '<img>',
|
formatter,
|
||||||
forecastLower: 7,
|
}),
|
||||||
forecastUpper: 8,
|
).toEqual('<img>qwerty: ŷ = 20 (5, 12)');
|
||||||
formatter,
|
});
|
||||||
}),
|
|
||||||
).toEqual('<img>qwerty: (7, 15)');
|
test('formatForecastTooltipSeries should format forecast without point estimate', () => {
|
||||||
});
|
expect(
|
||||||
|
formatForecastTooltipSeries({
|
||||||
|
seriesName: 'qwerty',
|
||||||
|
marker: '<img>',
|
||||||
|
observation: 10.1,
|
||||||
|
forecastLower: 6,
|
||||||
|
forecastUpper: 7,
|
||||||
|
formatter,
|
||||||
|
}),
|
||||||
|
).toEqual('<img>qwerty: 10 (6, 13)');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('formatForecastTooltipSeries should format forecast with only confidence band', () => {
|
||||||
|
expect(
|
||||||
|
formatForecastTooltipSeries({
|
||||||
|
seriesName: 'qwerty',
|
||||||
|
marker: '<img>',
|
||||||
|
forecastLower: 7,
|
||||||
|
forecastUpper: 8,
|
||||||
|
formatter,
|
||||||
|
}),
|
||||||
|
).toEqual('<img>qwerty: (7, 15)');
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user