/** * 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 { ChartProps, VizType } from '@superset-ui/core'; import { supersetTheme } from '@apache-superset/core/ui'; import { LegendOrientation, LegendType, EchartsTimeseriesSeriesType, } from '../../src'; import transformProps from '../../src/MixedTimeseries/transformProps'; import { EchartsMixedTimeseriesFormData, EchartsMixedTimeseriesProps, } from '../../src/MixedTimeseries/types'; const formData: EchartsMixedTimeseriesFormData = { annotationLayers: [], area: false, areaB: false, legendMargin: null, logAxis: false, logAxisSecondary: false, markerEnabled: false, markerEnabledB: false, markerSize: 0, markerSizeB: 0, minorSplitLine: false, minorTicks: false, opacity: 0, opacityB: 0, orderDesc: false, orderDescB: false, richTooltip: false, rowLimit: 0, rowLimitB: 0, legendOrientation: LegendOrientation.Top, legendType: LegendType.Scroll, showLegend: false, showValue: false, showValueB: false, stack: true, stackB: true, truncateYAxis: false, truncateYAxisSecondary: false, xAxisLabelRotation: 0, xAxisTitle: '', xAxisTitleMargin: 0, yAxisBounds: [undefined, undefined], yAxisBoundsSecondary: [undefined, undefined], yAxisTitle: '', yAxisTitleMargin: 0, yAxisTitlePosition: '', yAxisTitleSecondary: '', zoomable: false, colorScheme: 'bnbColors', datasource: '3__table', x_axis: 'ds', metrics: ['sum__num'], metricsB: ['sum__num'], groupby: ['gender'], groupbyB: ['gender'], seriesType: EchartsTimeseriesSeriesType.Line, seriesTypeB: EchartsTimeseriesSeriesType.Bar, viz_type: VizType.MixedTimeseries, forecastEnabled: false, forecastPeriods: [], forecastInterval: 0, forecastSeasonalityDaily: 0, legendSort: null, }; const queriesData = [ { data: [ { boy: 1, girl: 2, ds: 599616000000 }, { boy: 3, girl: 4, ds: 599916000000 }, ], label_map: { ds: ['ds'], boy: ['boy'], girl: ['girl'], }, }, { data: [ { boy: 1, girl: 2, ds: 599616000000 }, { boy: 3, girl: 4, ds: 599916000000 }, ], label_map: { ds: ['ds'], boy: ['boy'], girl: ['girl'], }, }, ]; const chartPropsConfig = { formData, width: 800, height: 600, queriesData, theme: supersetTheme, }; test('should transform chart props for viz with showQueryIdentifiers=false', () => { const chartPropsConfigWithoutIdentifiers = { ...chartPropsConfig, formData: { ...formData, showQueryIdentifiers: false, }, }; const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers); const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps); // Check that series IDs don't include query identifiers const seriesIds = (transformed.echartOptions.series as any[]).map( (s: any) => s.id, ); expect(seriesIds).toContain('sum__num, girl'); expect(seriesIds).toContain('sum__num, boy'); expect(seriesIds).not.toContain('sum__num (Query A), girl'); expect(seriesIds).not.toContain('sum__num (Query A), boy'); expect(seriesIds).not.toContain('sum__num (Query B), girl'); expect(seriesIds).not.toContain('sum__num (Query B), boy'); // Check that series name include query identifiers const seriesName = (transformed.echartOptions.series as any[]).map( (s: any) => s.name, ); expect(seriesName).toContain('sum__num, girl'); expect(seriesName).toContain('sum__num, boy'); expect(seriesName).not.toContain('sum__num (Query A), girl'); expect(seriesName).not.toContain('sum__num (Query A), boy'); expect(seriesName).not.toContain('sum__num (Query B), girl'); expect(seriesName).not.toContain('sum__num (Query B), boy'); expect((transformed.echartOptions.legend as any).data).toEqual([ 'sum__num, girl', 'sum__num, boy', 'sum__num, girl', 'sum__num, boy', ]); }); test('should transform chart props for viz with showQueryIdentifiers=true', () => { const chartPropsConfigWithIdentifiers = { ...chartPropsConfig, formData: { ...formData, showQueryIdentifiers: true, }, }; const chartProps = new ChartProps(chartPropsConfigWithIdentifiers); const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps); // Check that series IDs include query identifiers const seriesIds = (transformed.echartOptions.series as any[]).map( (s: any) => s.id, ); expect(seriesIds).toContain('sum__num (Query A), girl'); expect(seriesIds).toContain('sum__num (Query A), boy'); expect(seriesIds).toContain('sum__num (Query B), girl'); expect(seriesIds).toContain('sum__num (Query B), boy'); expect(seriesIds).not.toContain('sum__num, girl'); expect(seriesIds).not.toContain('sum__num, boy'); // Check that series name include query identifiers const seriesName = (transformed.echartOptions.series as any[]).map( (s: any) => s.name, ); expect(seriesName).toContain('sum__num (Query A), girl'); expect(seriesName).toContain('sum__num (Query A), boy'); expect(seriesName).toContain('sum__num (Query B), girl'); expect(seriesName).toContain('sum__num (Query B), boy'); expect(seriesName).not.toContain('sum__num, girl'); expect(seriesName).not.toContain('sum__num, boy'); expect((transformed.echartOptions.legend as any).data).toEqual([ 'sum__num (Query A), girl', 'sum__num (Query A), boy', 'sum__num (Query B), girl', 'sum__num (Query B), boy', ]); }); describe('legend sorting', () => { const getChartProps = (overrides = {}) => new ChartProps({ ...chartPropsConfig, formData: { ...formData, ...overrides, showQueryIdentifiers: true, }, }); it('sort legend by data', () => { const chartProps = getChartProps({ legendSort: null, }); const transformed = transformProps( chartProps as EchartsMixedTimeseriesProps, ); expect((transformed.echartOptions.legend as any).data).toEqual([ 'sum__num (Query A), girl', 'sum__num (Query A), boy', 'sum__num (Query B), girl', 'sum__num (Query B), boy', ]); }); it('sort legend by label ascending', () => { const chartProps = getChartProps({ legendSort: 'asc', }); const transformed = transformProps( chartProps as EchartsMixedTimeseriesProps, ); expect((transformed.echartOptions.legend as any).data).toEqual([ 'sum__num (Query A), boy', 'sum__num (Query A), girl', 'sum__num (Query B), boy', 'sum__num (Query B), girl', ]); }); it('sort legend by label descending', () => { const chartProps = getChartProps({ legendSort: 'desc', }); const transformed = transformProps( chartProps as EchartsMixedTimeseriesProps, ); expect((transformed.echartOptions.legend as any).data).toEqual([ 'sum__num (Query B), girl', 'sum__num (Query B), boy', 'sum__num (Query A), girl', 'sum__num (Query A), boy', ]); }); }); test('legend margin: top orientation sets grid.top correctly', () => { const chartPropsConfigWithoutIdentifiers = { ...chartPropsConfig, formData: { ...formData, legendMargin: 250, showLegend: true, }, }; const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers); const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps); expect((transformed.echartOptions.grid as any).top).toEqual(270); }); test('legend margin: bottom orientation sets grid.bottom correctly', () => { const chartPropsConfigWithoutIdentifiers = { ...chartPropsConfig, formData: { ...formData, legendMargin: 250, showLegend: true, legendOrientation: LegendOrientation.Bottom, }, }; const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers); const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps); expect((transformed.echartOptions.grid as any).bottom).toEqual(270); }); test('legend margin: left orientation sets grid.left correctly', () => { const chartPropsConfigWithoutIdentifiers = { ...chartPropsConfig, formData: { ...formData, legendMargin: 250, showLegend: true, legendOrientation: LegendOrientation.Left, }, }; const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers); const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps); expect((transformed.echartOptions.grid as any).left).toEqual(270); }); test('legend margin: right orientation sets grid.right correctly', () => { const chartPropsConfigWithoutIdentifiers = { ...chartPropsConfig, formData: { ...formData, legendMargin: 270, showLegend: true, legendOrientation: LegendOrientation.Right, }, }; const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers); const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps); expect((transformed.echartOptions.grid as any).right).toEqual(270); });