superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts

/**
 * 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.
 */
import {
  AnnotationSourceType,
  AnnotationStyle,
  AnnotationType,
  ChartProps,
  EventAnnotationLayer,
  FormulaAnnotationLayer,
  IntervalAnnotationLayer,
  SqlaFormData,
  supersetTheme,
  TimeseriesAnnotationLayer,
} from '@superset-ui/core';
import { EchartsTimeseriesChartProps } from '../../src/types';
import transformProps from '../../src/Timeseries/transformProps';

const formData: SqlaFormData = {
  colorScheme: 'bnbColors',
  datasource: '3__table',
  granularity_sqla: 'ds',
  metric: 'sum__num',
  groupby: ['foo', 'bar'],
  viz_type: 'my_viz',
};
const queriesData = [
  {
    data: [
      { 'San Francisco': 1, 'New York': 2, __timestamp: 599616000000 },
      { 'San Francisco': 3, 'New York': 4, __timestamp: 599916000000 },
    ],
  },
];
const chartPropsConfig = {
  formData,
  width: 800,
  height: 600,
  queriesData,
  theme: supersetTheme,
};

describe('EchartsTimeseries transformProps', () => {
  it('should transform chart props for viz', () => {
    const chartProps = new ChartProps(chartPropsConfig);
    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: [
                [599616000000, 1],
                [599916000000, 3],
              ],
              name: 'San Francisco',
            }),
            expect.objectContaining({
              data: [
                [599616000000, 2],
                [599916000000, 4],
              ],
              name: 'New York',
            }),
          ]),
        }),
      }),
    );
  });

  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',
            }),
          ]),
        }),
      }),
    );
  });

  it('should add a formula annotation to viz', () => {
    const formula: FormulaAnnotationLayer = {
      name: 'My Formula',
      annotationType: AnnotationType.Formula,
      value: 'x+1',
      style: AnnotationStyle.Solid,
      show: true,
      showLabel: true,
    };
    const chartProps = new ChartProps({
      ...chartPropsConfig,
      formData: {
        ...formData,
        annotationLayers: [formula],
      },
    });
    expect(transformProps(chartProps as EchartsTimeseriesChartProps)).toEqual(
      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: [
                [599616000000, 1],
                [599916000000, 3],
              ],
              name: 'San Francisco',
            }),
            expect.objectContaining({
              data: [
                [599616000000, 2],
                [599916000000, 4],
              ],
              name: 'New York',
            }),
            expect.objectContaining({
              data: [
                [599616000000, 599616000001],
                [599916000000, 599916000001],
              ],
              name: 'My Formula',
            }),
          ]),
        }),
      }),
    );
  });

  it('should add an interval, event and timeseries annotation to viz', () => {
    const event: EventAnnotationLayer = {
      annotationType: AnnotationType.Event,
      name: 'My Event',
      show: true,
      showLabel: true,
      sourceType: AnnotationSourceType.Native,
      style: AnnotationStyle.Solid,
      value: 1,
    };

    const interval: IntervalAnnotationLayer = {
      annotationType: AnnotationType.Interval,
      name: 'My Interval',
      show: true,
      showLabel: true,
      sourceType: AnnotationSourceType.Table,
      titleColumn: '',
      timeColumn: 'start',
      intervalEndColumn: '',
      descriptionColumns: [],
      style: AnnotationStyle.Dashed,
      value: 2,
    };

    const timeseries: TimeseriesAnnotationLayer = {
      annotationType: AnnotationType.Timeseries,
      name: 'My Timeseries',
      show: true,
      showLabel: true,
      sourceType: AnnotationSourceType.Line,
      style: AnnotationStyle.Solid,
      titleColumn: '',
      value: 3,
    };
    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,
          },
        ],
      },
      'My Interval': {
        columns: ['start', 'end', 'title'],
        records: [
          {
            start: 2000,
            end: 3000,
            title: 'My Title',
          },
        ],
      },
      'My Timeseries': {
        records: [
          { x: 10000, y: 11000 },
          { x: 20000, y: 21000 },
        ],
      },
    };
    const chartProps = new ChartProps({
      ...chartPropsConfig,
      formData: {
        ...formData,
        annotationLayers: [event, interval, timeseries],
      },
      annotationData,
      queriesData: [
        {
          ...queriesData[0],
          annotation_data: annotationData,
        },
      ],
    });
    expect(transformProps(chartProps as EchartsTimeseriesChartProps)).toEqual(
      expect.objectContaining({
        echartOptions: expect.objectContaining({
          legend: expect.objectContaining({
            data: ['San Francisco', 'New York', 'My Timeseries'],
          }),
          series: expect.arrayContaining([
            expect.objectContaining({
              type: 'line',
              id: 'My Timeseries',
            }),
            expect.objectContaining({
              type: 'line',
              id: 'Event - My Event',
            }),
            expect.objectContaining({
              type: 'line',
              id: 'Interval - My Interval',
            }),
          ]),
        }),
      }),
    );
  });

  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],
      ],
    });
  });
});

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;
  };

  const formData: SqlaFormData = {
    viz_type: 'my_viz',
    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,
    theme: supersetTheme,
  };

  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 as keyof typeof currentStack];
      }, 0);
      totals.push(total);
      return totals;
    },
    [] as number[],
  );

  it('should show labels when showValue is true', () => {
    const chartProps = new ChartProps(chartPropsConfig);

    const transformedSeries = transformProps(
      chartProps as EchartsTimeseriesChartProps,
    ).echartOptions.series as seriesType[];

    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);

    const transformedSeries = transformProps(
      chartProps as EchartsTimeseriesChartProps,
    ).echartOptions.series as seriesType[];

    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);

    const transformedSeries = transformProps(
      chartProps as EchartsTimeseriesChartProps,
    ).echartOptions.series as seriesType[];

    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);

    const transformedSeries = transformProps(
      chartProps as EchartsTimeseriesChartProps,
    ).echartOptions.series as seriesType[];

    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);

    const transformedSeries = transformProps(
      chartProps as EchartsTimeseriesChartProps,
    ).echartOptions.series as seriesType[];

    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);
      });
    });
  });

  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'],
    });
  });
});

describe('legend sorting', () => {
  const legendSortData = [
    {
      data: [
        {
          Milton: 40,
          'San Francisco': 1,
          'New York': 2,
          Boston: 1,
          __timestamp: 599616000000,
        },
        {
          Milton: 20,
          'San Francisco': 3,
          'New York': 4,
          Boston: 1,
          __timestamp: 599916000000,
        },
        {
          Milton: 60,
          'San Francisco': 5,
          'New York': 8,
          Boston: 6,
          __timestamp: 600216000000,
        },
        {
          Milton: 10,
          'San Francisco': 2,
          'New York': 7,
          Boston: 2,
          __timestamp: 600516000000,
        },
      ],
    },
  ];

  const getChartProps = (formData: Partial<SqlaFormData>) =>
    new ChartProps({
      ...chartPropsConfig,
      formData: { ...formData },
      queriesData: legendSortData,
    });

  it('sort legend by data', () => {
    const chartProps = getChartProps({
      legendSort: null,
      sortSeriesType: 'min',
      sortSeriesAscending: true,
    });
    const transformed = transformProps(
      chartProps as EchartsTimeseriesChartProps,
    );

    expect((transformed.echartOptions.legend as any).data).toEqual([
      'San Francisco',
      'Boston',
      'New York',
      'Milton',
    ]);
  });

  it('sort legend by label ascending', () => {
    const chartProps = getChartProps({
      legendSort: 'asc',
      sortSeriesType: 'min',
      sortSeriesAscending: true,
    });
    const transformed = transformProps(
      chartProps as EchartsTimeseriesChartProps,
    );

    expect((transformed.echartOptions.legend as any).data).toEqual([
      'Boston',
      'Milton',
      'New York',
      'San Francisco',
    ]);
  });

  it('sort legend by label descending', () => {
    const chartProps = getChartProps({
      legendSort: 'desc',
      sortSeriesType: 'min',
      sortSeriesAscending: true,
    });
    const transformed = transformProps(
      chartProps as EchartsTimeseriesChartProps,
    );

    expect((transformed.echartOptions.legend as any).data).toEqual([
      'San Francisco',
      'New York',
      'Milton',
      'Boston',
    ]);
  });
});