2020-09-01 02:00:51 -04:00
|
|
|
/**
|
|
|
|
* Licensed to the Apache Software Foundation (ASF) under one
|
|
|
|
* or more contributor license agreements. See the NOTICE file
|
|
|
|
* distributed with this work for additional information
|
|
|
|
* regarding copyright ownership. The ASF licenses this file
|
|
|
|
* to you under the Apache License, Version 2.0 (the
|
|
|
|
* "License"); you may not use this file except in compliance
|
|
|
|
* with the License. You may obtain a copy of the License at
|
|
|
|
*
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
*
|
|
|
|
* Unless required by applicable law or agreed to in writing,
|
|
|
|
* software distributed under the License is distributed on an
|
|
|
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
|
|
* KIND, either express or implied. See the License for the
|
|
|
|
* specific language governing permissions and limitations
|
|
|
|
* under the License.
|
|
|
|
*/
|
2020-11-10 13:45:42 -05:00
|
|
|
import {
|
2022-01-21 14:23:23 -05:00
|
|
|
AnnotationSourceType,
|
|
|
|
AnnotationStyle,
|
|
|
|
AnnotationType,
|
2020-11-10 13:45:42 -05:00
|
|
|
ChartProps,
|
|
|
|
EventAnnotationLayer,
|
|
|
|
FormulaAnnotationLayer,
|
|
|
|
IntervalAnnotationLayer,
|
2022-03-27 22:20:06 -04:00
|
|
|
SqlaFormData,
|
2022-05-04 08:55:22 -04:00
|
|
|
supersetTheme,
|
2020-11-10 13:45:42 -05:00
|
|
|
TimeseriesAnnotationLayer,
|
|
|
|
} from '@superset-ui/core';
|
2022-03-27 22:20:06 -04:00
|
|
|
import { EchartsTimeseriesChartProps } from '../../src/types';
|
2020-09-01 02:00:51 -04:00
|
|
|
import transformProps from '../../src/Timeseries/transformProps';
|
|
|
|
|
2022-01-12 15:46:27 -05:00
|
|
|
describe('EchartsTimeseries transformProps', () => {
|
2022-03-27 22:20:06 -04:00
|
|
|
const formData: SqlaFormData = {
|
2020-09-01 02:00:51 -04:00
|
|
|
colorScheme: 'bnbColors',
|
|
|
|
datasource: '3__table',
|
|
|
|
granularity_sqla: 'ds',
|
|
|
|
metric: 'sum__num',
|
2020-09-29 03:47:17 -04:00
|
|
|
groupby: ['foo', 'bar'],
|
2022-01-21 14:23:23 -05:00
|
|
|
viz_type: 'my_viz',
|
2020-09-01 02:00:51 -04:00
|
|
|
};
|
2020-12-29 05:10:39 -05:00
|
|
|
const queriesData = [
|
|
|
|
{
|
|
|
|
data: [
|
|
|
|
{ 'San Francisco': 1, 'New York': 2, __timestamp: 599616000000 },
|
|
|
|
{ 'San Francisco': 3, 'New York': 4, __timestamp: 599916000000 },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
];
|
2020-11-10 13:45:42 -05:00
|
|
|
const chartPropsConfig = {
|
2020-09-01 02:00:51 -04:00
|
|
|
formData,
|
|
|
|
width: 800,
|
|
|
|
height: 600,
|
2020-12-29 05:10:39 -05:00
|
|
|
queriesData,
|
2022-05-04 08:55:22 -04:00
|
|
|
theme: supersetTheme,
|
2020-11-10 13:45:42 -05:00
|
|
|
};
|
2020-09-01 02:00:51 -04:00
|
|
|
|
2022-04-26 13:35:01 -04:00
|
|
|
it('should transform chart props for viz', () => {
|
2020-11-10 13:45:42 -05:00
|
|
|
const chartProps = new ChartProps(chartPropsConfig);
|
2022-03-27 22:20:06 -04:00
|
|
|
expect(transformProps(chartProps as EchartsTimeseriesChartProps)).toEqual(
|
2020-09-01 02:00:51 -04:00
|
|
|
expect.objectContaining({
|
|
|
|
width: 800,
|
|
|
|
height: 600,
|
|
|
|
echartOptions: expect.objectContaining({
|
2020-09-10 17:56:38 -04:00
|
|
|
legend: expect.objectContaining({
|
|
|
|
data: ['San Francisco', 'New York'],
|
|
|
|
}),
|
2020-09-01 02:00:51 -04:00
|
|
|
series: expect.arrayContaining([
|
|
|
|
expect.objectContaining({
|
2020-09-10 17:56:38 -04:00
|
|
|
data: [
|
2022-01-21 14:23:23 -05:00
|
|
|
[599616000000, 1],
|
|
|
|
[599916000000, 3],
|
2020-09-10 17:56:38 -04:00
|
|
|
],
|
|
|
|
name: 'San Francisco',
|
|
|
|
}),
|
|
|
|
expect.objectContaining({
|
|
|
|
data: [
|
2022-01-21 14:23:23 -05:00
|
|
|
[599616000000, 2],
|
|
|
|
[599916000000, 4],
|
2020-09-10 17:56:38 -04:00
|
|
|
],
|
|
|
|
name: 'New York',
|
2020-09-01 02:00:51 -04:00
|
|
|
}),
|
|
|
|
]),
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
});
|
2020-10-29 03:21:10 -04:00
|
|
|
|
2023-03-06 04:25:52 -05:00
|
|
|
it('should transform chart props for horizontal viz', () => {
|
|
|
|
const chartProps = new ChartProps({
|
|
|
|
...chartPropsConfig,
|
|
|
|
formData: {
|
|
|
|
...formData,
|
|
|
|
orientation: 'horizontal',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
expect(transformProps(chartProps as EchartsTimeseriesChartProps)).toEqual(
|
|
|
|
expect.objectContaining({
|
|
|
|
width: 800,
|
|
|
|
height: 600,
|
|
|
|
echartOptions: expect.objectContaining({
|
|
|
|
legend: expect.objectContaining({
|
|
|
|
data: ['San Francisco', 'New York'],
|
|
|
|
}),
|
|
|
|
series: expect.arrayContaining([
|
|
|
|
expect.objectContaining({
|
|
|
|
data: [
|
|
|
|
[1, 599616000000],
|
|
|
|
[3, 599916000000],
|
|
|
|
],
|
|
|
|
name: 'San Francisco',
|
|
|
|
}),
|
|
|
|
expect.objectContaining({
|
|
|
|
data: [
|
|
|
|
[2, 599616000000],
|
|
|
|
[4, 599916000000],
|
|
|
|
],
|
|
|
|
name: 'New York',
|
|
|
|
}),
|
|
|
|
]),
|
|
|
|
yAxis: expect.objectContaining({ inverse: true }),
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2020-11-10 13:45:42 -05:00
|
|
|
it('should add a formula annotation to viz', () => {
|
2020-10-29 03:21:10 -04:00
|
|
|
const formula: FormulaAnnotationLayer = {
|
|
|
|
name: 'My Formula',
|
2022-01-12 15:46:27 -05:00
|
|
|
annotationType: AnnotationType.Formula,
|
2020-10-29 03:21:10 -04:00
|
|
|
value: 'x+1',
|
2022-01-12 15:46:27 -05:00
|
|
|
style: AnnotationStyle.Solid,
|
2020-10-29 03:21:10 -04:00
|
|
|
show: true,
|
2022-01-21 14:23:23 -05:00
|
|
|
showLabel: true,
|
2020-10-29 03:21:10 -04:00
|
|
|
};
|
2020-11-10 13:45:42 -05:00
|
|
|
const chartProps = new ChartProps({
|
|
|
|
...chartPropsConfig,
|
2020-10-29 03:21:10 -04:00
|
|
|
formData: {
|
|
|
|
...formData,
|
|
|
|
annotationLayers: [formula],
|
|
|
|
},
|
|
|
|
});
|
2022-03-27 22:20:06 -04:00
|
|
|
expect(transformProps(chartProps as EchartsTimeseriesChartProps)).toEqual(
|
2020-10-29 03:21:10 -04:00
|
|
|
expect.objectContaining({
|
|
|
|
width: 800,
|
|
|
|
height: 600,
|
|
|
|
echartOptions: expect.objectContaining({
|
|
|
|
legend: expect.objectContaining({
|
|
|
|
data: ['San Francisco', 'New York', 'My Formula'],
|
|
|
|
}),
|
|
|
|
series: expect.arrayContaining([
|
|
|
|
expect.objectContaining({
|
|
|
|
data: [
|
2022-01-21 14:23:23 -05:00
|
|
|
[599616000000, 1],
|
|
|
|
[599916000000, 3],
|
2020-10-29 03:21:10 -04:00
|
|
|
],
|
|
|
|
name: 'San Francisco',
|
|
|
|
}),
|
|
|
|
expect.objectContaining({
|
|
|
|
data: [
|
2022-01-21 14:23:23 -05:00
|
|
|
[599616000000, 2],
|
|
|
|
[599916000000, 4],
|
2020-10-29 03:21:10 -04:00
|
|
|
],
|
|
|
|
name: 'New York',
|
|
|
|
}),
|
|
|
|
expect.objectContaining({
|
|
|
|
data: [
|
2022-01-21 14:23:23 -05:00
|
|
|
[599616000000, 599616000001],
|
|
|
|
[599916000000, 599916000001],
|
2020-10-29 03:21:10 -04:00
|
|
|
],
|
|
|
|
name: 'My Formula',
|
|
|
|
}),
|
|
|
|
]),
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
});
|
2020-11-10 13:45:42 -05:00
|
|
|
|
|
|
|
it('should add an interval, event and timeseries annotation to viz', () => {
|
|
|
|
const event: EventAnnotationLayer = {
|
2022-01-12 15:46:27 -05:00
|
|
|
annotationType: AnnotationType.Event,
|
2020-11-10 13:45:42 -05:00
|
|
|
name: 'My Event',
|
|
|
|
show: true,
|
2022-01-12 15:46:27 -05:00
|
|
|
showLabel: true,
|
|
|
|
sourceType: AnnotationSourceType.Native,
|
|
|
|
style: AnnotationStyle.Solid,
|
2020-11-10 13:45:42 -05:00
|
|
|
value: 1,
|
|
|
|
};
|
|
|
|
|
|
|
|
const interval: IntervalAnnotationLayer = {
|
2022-01-12 15:46:27 -05:00
|
|
|
annotationType: AnnotationType.Interval,
|
2020-11-10 13:45:42 -05:00
|
|
|
name: 'My Interval',
|
|
|
|
show: true,
|
2022-01-12 15:46:27 -05:00
|
|
|
showLabel: true,
|
|
|
|
sourceType: AnnotationSourceType.Table,
|
2020-11-10 13:45:42 -05:00
|
|
|
titleColumn: '',
|
|
|
|
timeColumn: 'start',
|
|
|
|
intervalEndColumn: '',
|
|
|
|
descriptionColumns: [],
|
2022-01-12 15:46:27 -05:00
|
|
|
style: AnnotationStyle.Dashed,
|
2020-11-10 13:45:42 -05:00
|
|
|
value: 2,
|
|
|
|
};
|
|
|
|
|
|
|
|
const timeseries: TimeseriesAnnotationLayer = {
|
2022-01-12 15:46:27 -05:00
|
|
|
annotationType: AnnotationType.Timeseries,
|
2020-11-10 13:45:42 -05:00
|
|
|
name: 'My Timeseries',
|
|
|
|
show: true,
|
2022-01-12 15:46:27 -05:00
|
|
|
showLabel: true,
|
|
|
|
sourceType: AnnotationSourceType.Line,
|
|
|
|
style: AnnotationStyle.Solid,
|
2020-11-10 13:45:42 -05:00
|
|
|
titleColumn: '',
|
|
|
|
value: 3,
|
|
|
|
};
|
2022-07-11 18:23:57 -04:00
|
|
|
const annotationData = {
|
|
|
|
'My Event': {
|
|
|
|
columns: [
|
|
|
|
'start_dttm',
|
|
|
|
'end_dttm',
|
|
|
|
'short_descr',
|
|
|
|
'long_descr',
|
|
|
|
'json_metadata',
|
|
|
|
],
|
|
|
|
records: [
|
|
|
|
{
|
|
|
|
start_dttm: 0,
|
|
|
|
end_dttm: 1000,
|
|
|
|
short_descr: '',
|
|
|
|
long_descr: '',
|
|
|
|
json_metadata: null,
|
|
|
|
},
|
|
|
|
],
|
2020-11-10 13:45:42 -05:00
|
|
|
},
|
2022-07-11 18:23:57 -04:00
|
|
|
'My Interval': {
|
|
|
|
columns: ['start', 'end', 'title'],
|
|
|
|
records: [
|
|
|
|
{
|
|
|
|
start: 2000,
|
|
|
|
end: 3000,
|
|
|
|
title: 'My Title',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
'My Timeseries': [
|
|
|
|
{
|
|
|
|
key: 'My Line',
|
|
|
|
values: [
|
2022-06-08 05:06:24 -04:00
|
|
|
{
|
2022-07-11 18:23:57 -04:00
|
|
|
x: 10000,
|
|
|
|
y: 11000,
|
2020-12-29 05:10:39 -05:00
|
|
|
},
|
2022-06-08 05:06:24 -04:00
|
|
|
{
|
2022-07-11 18:23:57 -04:00
|
|
|
x: 20000,
|
|
|
|
y: 21000,
|
2020-11-10 13:45:42 -05:00
|
|
|
},
|
2022-06-08 05:06:24 -04:00
|
|
|
],
|
|
|
|
},
|
2022-07-11 18:23:57 -04:00
|
|
|
],
|
|
|
|
};
|
|
|
|
const chartProps = new ChartProps({
|
|
|
|
...chartPropsConfig,
|
|
|
|
formData: {
|
|
|
|
...formData,
|
|
|
|
annotationLayers: [event, interval, timeseries],
|
2022-06-08 05:06:24 -04:00
|
|
|
},
|
2022-07-11 18:23:57 -04:00
|
|
|
annotationData,
|
2022-06-08 05:06:24 -04:00
|
|
|
queriesData: [
|
|
|
|
{
|
|
|
|
...queriesData[0],
|
2022-07-11 18:23:57 -04:00
|
|
|
annotation_data: annotationData,
|
2020-11-10 13:45:42 -05:00
|
|
|
},
|
2020-12-29 05:10:39 -05:00
|
|
|
],
|
2020-11-10 13:45:42 -05:00
|
|
|
});
|
2022-03-27 22:20:06 -04:00
|
|
|
expect(transformProps(chartProps as EchartsTimeseriesChartProps)).toEqual(
|
2020-11-10 13:45:42 -05:00
|
|
|
expect.objectContaining({
|
|
|
|
echartOptions: expect.objectContaining({
|
|
|
|
legend: expect.objectContaining({
|
|
|
|
data: ['San Francisco', 'New York', 'My Line'],
|
|
|
|
}),
|
|
|
|
series: expect.arrayContaining([
|
|
|
|
expect.objectContaining({
|
|
|
|
type: 'line',
|
|
|
|
id: 'My Line',
|
|
|
|
}),
|
|
|
|
expect.objectContaining({
|
|
|
|
type: 'line',
|
|
|
|
id: 'Event - My Event',
|
|
|
|
}),
|
|
|
|
expect.objectContaining({
|
|
|
|
type: 'line',
|
|
|
|
id: 'Interval - My Interval',
|
|
|
|
}),
|
|
|
|
]),
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
});
|
2023-03-20 07:56:15 -04:00
|
|
|
|
|
|
|
it('Should add a baseline series for stream graph', () => {
|
|
|
|
const streamQueriesData = [
|
|
|
|
{
|
|
|
|
data: [
|
|
|
|
{
|
|
|
|
'San Francisco': 120,
|
|
|
|
'New York': 220,
|
|
|
|
Boston: 150,
|
|
|
|
Miami: 270,
|
|
|
|
Denver: 800,
|
|
|
|
__timestamp: 599616000000,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
'San Francisco': 150,
|
|
|
|
'New York': 190,
|
|
|
|
Boston: 240,
|
|
|
|
Miami: 350,
|
|
|
|
Denver: 700,
|
|
|
|
__timestamp: 599616000001,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
'San Francisco': 130,
|
|
|
|
'New York': 300,
|
|
|
|
Boston: 250,
|
|
|
|
Miami: 410,
|
|
|
|
Denver: 650,
|
|
|
|
__timestamp: 599616000002,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
'San Francisco': 90,
|
|
|
|
'New York': 340,
|
|
|
|
Boston: 300,
|
|
|
|
Miami: 480,
|
|
|
|
Denver: 590,
|
|
|
|
__timestamp: 599616000003,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
'San Francisco': 260,
|
|
|
|
'New York': 200,
|
|
|
|
Boston: 420,
|
|
|
|
Miami: 490,
|
|
|
|
Denver: 760,
|
|
|
|
__timestamp: 599616000004,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
'San Francisco': 250,
|
|
|
|
'New York': 250,
|
|
|
|
Boston: 380,
|
|
|
|
Miami: 360,
|
|
|
|
Denver: 400,
|
|
|
|
__timestamp: 599616000005,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
'San Francisco': 160,
|
|
|
|
'New York': 210,
|
|
|
|
Boston: 330,
|
|
|
|
Miami: 440,
|
|
|
|
Denver: 580,
|
|
|
|
__timestamp: 599616000006,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
];
|
|
|
|
const streamFormData = { ...formData, stack: 'Stream' };
|
|
|
|
const props = {
|
|
|
|
...chartPropsConfig,
|
|
|
|
formData: streamFormData,
|
|
|
|
queriesData: streamQueriesData,
|
|
|
|
};
|
|
|
|
|
|
|
|
const chartProps = new ChartProps(props);
|
|
|
|
expect(
|
|
|
|
(
|
|
|
|
transformProps(chartProps as EchartsTimeseriesChartProps).echartOptions
|
|
|
|
.series as any[]
|
|
|
|
)[0],
|
|
|
|
).toEqual({
|
|
|
|
areaStyle: {
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
lineStyle: {
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
name: 'baseline',
|
|
|
|
showSymbol: false,
|
|
|
|
silent: true,
|
|
|
|
smooth: false,
|
|
|
|
stack: 'obs',
|
|
|
|
stackStrategy: 'all',
|
|
|
|
step: undefined,
|
|
|
|
tooltip: {
|
|
|
|
show: false,
|
|
|
|
},
|
|
|
|
type: 'line',
|
|
|
|
data: [
|
|
|
|
[599616000000, -415.7692307692308],
|
|
|
|
[599616000001, -403.6219915054271],
|
|
|
|
[599616000002, -476.32314093071443],
|
|
|
|
[599616000003, -514.2120298196033],
|
|
|
|
[599616000004, -485.7378514158475],
|
|
|
|
[599616000005, -419.6402904402378],
|
|
|
|
[599616000006, -442.9833136960517],
|
|
|
|
],
|
|
|
|
});
|
|
|
|
});
|
2020-09-01 02:00:51 -04:00
|
|
|
});
|
2022-01-12 15:46:27 -05:00
|
|
|
|
|
|
|
describe('Does transformProps transform series correctly', () => {
|
|
|
|
type seriesDataType = [Date, number];
|
|
|
|
type labelFormatterType = (params: {
|
|
|
|
value: seriesDataType;
|
|
|
|
dataIndex: number;
|
|
|
|
seriesIndex: number;
|
|
|
|
}) => string;
|
|
|
|
type seriesType = {
|
|
|
|
label: { show: boolean; formatter: labelFormatterType };
|
|
|
|
data: seriesDataType[];
|
|
|
|
name: string;
|
|
|
|
};
|
|
|
|
|
2022-03-27 22:20:06 -04:00
|
|
|
const formData: SqlaFormData = {
|
|
|
|
viz_type: 'my_viz',
|
2022-01-12 15:46:27 -05:00
|
|
|
colorScheme: 'bnbColors',
|
|
|
|
datasource: '3__table',
|
|
|
|
granularity_sqla: 'ds',
|
|
|
|
metric: 'sum__num',
|
|
|
|
groupby: ['foo', 'bar'],
|
|
|
|
showValue: true,
|
|
|
|
stack: true,
|
|
|
|
onlyTotal: false,
|
|
|
|
percentageThreshold: 50,
|
|
|
|
};
|
|
|
|
const queriesData = [
|
|
|
|
{
|
|
|
|
data: [
|
|
|
|
{
|
|
|
|
'San Francisco': 1,
|
|
|
|
'New York': 2,
|
|
|
|
Boston: 1,
|
|
|
|
__timestamp: 599616000000,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
'San Francisco': 3,
|
|
|
|
'New York': 4,
|
|
|
|
Boston: 1,
|
|
|
|
__timestamp: 599916000000,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
'San Francisco': 5,
|
|
|
|
'New York': 8,
|
|
|
|
Boston: 6,
|
|
|
|
__timestamp: 600216000000,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
'San Francisco': 2,
|
|
|
|
'New York': 7,
|
|
|
|
Boston: 2,
|
|
|
|
__timestamp: 600516000000,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
];
|
|
|
|
const chartPropsConfig = {
|
|
|
|
formData,
|
|
|
|
width: 800,
|
|
|
|
height: 600,
|
|
|
|
queriesData,
|
2022-05-04 08:55:22 -04:00
|
|
|
theme: supersetTheme,
|
2022-01-12 15:46:27 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
const totalStackedValues = queriesData[0].data.reduce(
|
|
|
|
(totals, currentStack) => {
|
|
|
|
const total = Object.keys(currentStack).reduce((stackSum, key) => {
|
|
|
|
if (key === '__timestamp') return stackSum;
|
|
|
|
return stackSum + currentStack[key];
|
|
|
|
}, 0);
|
|
|
|
totals.push(total);
|
|
|
|
return totals;
|
|
|
|
},
|
|
|
|
[] as number[],
|
|
|
|
);
|
|
|
|
|
|
|
|
it('should show labels when showValue is true', () => {
|
|
|
|
const chartProps = new ChartProps(chartPropsConfig);
|
|
|
|
|
2022-03-27 22:20:06 -04:00
|
|
|
const transformedSeries = transformProps(
|
|
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
|
|
).echartOptions.series as seriesType[];
|
2022-01-12 15:46:27 -05:00
|
|
|
|
|
|
|
transformedSeries.forEach(series => {
|
|
|
|
expect(series.label.show).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not show labels when showValue is false', () => {
|
|
|
|
const updatedChartPropsConfig = {
|
|
|
|
...chartPropsConfig,
|
|
|
|
formData: { ...formData, showValue: false },
|
|
|
|
};
|
|
|
|
|
|
|
|
const chartProps = new ChartProps(updatedChartPropsConfig);
|
|
|
|
|
2022-03-27 22:20:06 -04:00
|
|
|
const transformedSeries = transformProps(
|
|
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
|
|
).echartOptions.series as seriesType[];
|
2022-01-12 15:46:27 -05:00
|
|
|
|
|
|
|
transformedSeries.forEach(series => {
|
|
|
|
expect(series.label.show).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should show only totals when onlyTotal is true', () => {
|
|
|
|
const updatedChartPropsConfig = {
|
|
|
|
...chartPropsConfig,
|
|
|
|
formData: { ...formData, onlyTotal: true },
|
|
|
|
};
|
|
|
|
|
|
|
|
const chartProps = new ChartProps(updatedChartPropsConfig);
|
|
|
|
|
2022-03-27 22:20:06 -04:00
|
|
|
const transformedSeries = transformProps(
|
|
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
|
|
).echartOptions.series as seriesType[];
|
2022-01-12 15:46:27 -05:00
|
|
|
|
|
|
|
const showValueIndexes: number[] = [];
|
|
|
|
|
|
|
|
transformedSeries.forEach((entry, seriesIndex) => {
|
|
|
|
const { data = [] } = entry;
|
|
|
|
(data as [Date, number][]).forEach((datum, dataIndex) => {
|
|
|
|
if (datum[1] !== null) {
|
|
|
|
showValueIndexes[dataIndex] = seriesIndex;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
transformedSeries.forEach((series, seriesIndex) => {
|
|
|
|
expect(series.label.show).toBe(true);
|
|
|
|
series.data.forEach((value, dataIndex) => {
|
|
|
|
const params = {
|
|
|
|
value,
|
|
|
|
dataIndex,
|
|
|
|
seriesIndex,
|
|
|
|
};
|
|
|
|
|
|
|
|
let expectedLabel: string;
|
|
|
|
|
|
|
|
if (seriesIndex === showValueIndexes[dataIndex]) {
|
|
|
|
expectedLabel = String(totalStackedValues[dataIndex]);
|
|
|
|
} else {
|
|
|
|
expectedLabel = '';
|
|
|
|
}
|
|
|
|
|
|
|
|
expect(series.label.formatter(params)).toBe(expectedLabel);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should show labels on values >= percentageThreshold if onlyTotal is false', () => {
|
|
|
|
const chartProps = new ChartProps(chartPropsConfig);
|
|
|
|
|
2022-03-27 22:20:06 -04:00
|
|
|
const transformedSeries = transformProps(
|
|
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
|
|
).echartOptions.series as seriesType[];
|
2022-01-12 15:46:27 -05:00
|
|
|
|
|
|
|
const expectedThresholds = totalStackedValues.map(
|
|
|
|
total => ((formData.percentageThreshold || 0) / 100) * total,
|
|
|
|
);
|
|
|
|
|
|
|
|
transformedSeries.forEach((series, seriesIndex) => {
|
|
|
|
expect(series.label.show).toBe(true);
|
|
|
|
series.data.forEach((value, dataIndex) => {
|
|
|
|
const params = {
|
|
|
|
value,
|
|
|
|
dataIndex,
|
|
|
|
seriesIndex,
|
|
|
|
};
|
|
|
|
const expectedLabel =
|
|
|
|
value[1] >= expectedThresholds[dataIndex] ? String(value[1]) : '';
|
|
|
|
expect(series.label.formatter(params)).toBe(expectedLabel);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not apply percentage threshold when showValue is true and stack is false', () => {
|
|
|
|
const updatedChartPropsConfig = {
|
|
|
|
...chartPropsConfig,
|
|
|
|
formData: { ...formData, stack: false },
|
|
|
|
};
|
|
|
|
|
|
|
|
const chartProps = new ChartProps(updatedChartPropsConfig);
|
|
|
|
|
2022-03-27 22:20:06 -04:00
|
|
|
const transformedSeries = transformProps(
|
|
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
|
|
).echartOptions.series as seriesType[];
|
2022-01-12 15:46:27 -05:00
|
|
|
|
|
|
|
transformedSeries.forEach((series, seriesIndex) => {
|
|
|
|
expect(series.label.show).toBe(true);
|
|
|
|
series.data.forEach((value, dataIndex) => {
|
|
|
|
const params = {
|
|
|
|
value,
|
|
|
|
dataIndex,
|
|
|
|
seriesIndex,
|
|
|
|
};
|
|
|
|
const expectedLabel = String(value[1]);
|
|
|
|
expect(series.label.formatter(params)).toBe(expectedLabel);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2023-03-13 09:32:49 -04:00
|
|
|
|
|
|
|
it('should remove time shift labels from label_map', () => {
|
|
|
|
const updatedChartPropsConfig = {
|
|
|
|
...chartPropsConfig,
|
|
|
|
formData: {
|
|
|
|
...formData,
|
|
|
|
timeCompare: ['1 year ago'],
|
|
|
|
},
|
|
|
|
queriesData: [
|
|
|
|
{
|
|
|
|
...queriesData[0],
|
|
|
|
label_map: {
|
|
|
|
'1 year ago, foo1, bar1': ['1 year ago', 'foo1', 'bar1'],
|
|
|
|
'1 year ago, foo2, bar2': ['1 year ago', 'foo2', 'bar2'],
|
|
|
|
'foo1, bar1': ['foo1', 'bar1'],
|
|
|
|
'foo2, bar2': ['foo2', 'bar2'],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
|
|
|
const chartProps = new ChartProps(updatedChartPropsConfig);
|
|
|
|
const transformedProps = transformProps(
|
|
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
|
|
);
|
|
|
|
expect(transformedProps.labelMap).toEqual({
|
|
|
|
'1 year ago, foo1, bar1': ['foo1', 'bar1'],
|
|
|
|
'1 year ago, foo2, bar2': ['foo2', 'bar2'],
|
|
|
|
'foo1, bar1': ['foo1', 'bar1'],
|
|
|
|
'foo2, bar2': ['foo2', 'bar2'],
|
|
|
|
});
|
|
|
|
});
|
2022-01-12 15:46:27 -05:00
|
|
|
});
|