/** * 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, ChartPropsConfig, getNumberFormatter, SqlaFormData, } from '@superset-ui/core'; import { supersetTheme } from '@apache-superset/core/ui'; import { EchartsBubbleChartProps } from '../../src/Bubble/types'; import transformProps, { formatTooltip } from '../../src/Bubble/transformProps'; const defaultFormData: SqlaFormData = { datasource: '1__table', viz_type: 'echarts_bubble', entity: 'customer_name', x: 'count', y: { aggregate: 'sum', column: { column_name: 'price_each', }, expressionType: 'simple', label: 'SUM(price_each)', }, size: { aggregate: 'sum', column: { column_name: 'sales', }, expressionType: 'simple', label: 'SUM(sales)', }, xAxisBounds: [null, null], yAxisBounds: [null, null], }; const queriesData = [ { data: [ { customer_name: 'AV Stores, Co.', count: 10, 'SUM(price_each)': 20, 'SUM(sales)': 30, }, { customer_name: 'Alpha Cognac', count: 40, 'SUM(price_each)': 50, 'SUM(sales)': 60, }, { customer_name: 'Amica Models & Co.', count: 70, 'SUM(price_each)': 80, 'SUM(sales)': 90, }, ], }, ]; const chartConfig: ChartPropsConfig = { formData: defaultFormData, height: 800, width: 800, queriesData, theme: supersetTheme, }; describe('Bubble transformProps', () => { it('Should transform props for viz', () => { const chartProps = new ChartProps(chartConfig); expect(transformProps(chartProps as EchartsBubbleChartProps)).toEqual( expect.objectContaining({ width: 800, height: 800, echartOptions: expect.objectContaining({ series: expect.arrayContaining([ expect.objectContaining({ data: expect.arrayContaining([ [10, 20, 30, 'AV Stores, Co.', null], ]), }), expect.objectContaining({ data: expect.arrayContaining([ [40, 50, 60, 'Alpha Cognac', null], ]), }), expect.objectContaining({ data: expect.arrayContaining([ [70, 80, 90, 'Amica Models & Co.', null], ]), }), ]), }), }), ); }); it('Should transform props with undefined control values', () => { const formData: SqlaFormData = { ...defaultFormData, xAxisBounds: undefined, yAxisBounds: undefined, }; const chartProps = new ChartProps({ ...chartConfig, formData, }); expect(transformProps(chartProps as EchartsBubbleChartProps)).toEqual( expect.objectContaining({ width: 800, height: 800, echartOptions: expect.objectContaining({ series: expect.arrayContaining([ expect.objectContaining({ data: expect.arrayContaining([ [10, 20, 30, 'AV Stores, Co.', null], ]), }), expect.objectContaining({ data: expect.arrayContaining([ [40, 50, 60, 'Alpha Cognac', null], ]), }), expect.objectContaining({ data: expect.arrayContaining([ [70, 80, 90, 'Amica Models & Co.', null], ]), }), ]), }), }), ); }); }); describe('Bubble formatTooltip', () => { const dollerFormatter = getNumberFormatter('$,.2f'); const percentFormatter = getNumberFormatter(',.1%'); it('Should generate correct bubble label content with dimension', () => { const params = { data: [10000, 20000, 3, 'bubble title', 'bubble dimension'], }; const html = formatTooltip( params, 'x-axis-label', 'y-axis-label', 'size-label', dollerFormatter, dollerFormatter, percentFormatter, ); expect(html).toContain('bubble title'); expect(html).toContain('bubble dimension'); expect(html).toContain('x-axis-label'); expect(html).toContain('y-axis-label'); expect(html).toContain('size-label'); expect(html).toContain('$10,000.00'); expect(html).toContain('$20,000.00'); expect(html).toContain('300.0%'); }); it('Should generate correct bubble label content without dimension', () => { const params = { data: [10000, 25000, 3, 'bubble title', null], }; const html = formatTooltip( params, 'x-axis-label', 'y-axis-label', 'size-label', dollerFormatter, dollerFormatter, percentFormatter, ); expect(html).toContain('bubble title'); expect(html).not.toContain('bubble dimension'); expect(html).toContain('x-axis-label'); expect(html).toContain('y-axis-label'); expect(html).toContain('size-label'); expect(html).toContain('$10,000.00'); expect(html).toContain('$25,000.00'); expect(html).toContain('300.0%'); }); }); describe('legend sorting', () => { const createChartProps = (overrides = {}) => new ChartProps({ ...chartConfig, formData: { ...defaultFormData, ...overrides, }, }); it('preserves original data order when no sort specified', () => { const props = createChartProps({ legendSort: null }); const result = transformProps(props as EchartsBubbleChartProps); const legendData = (result.echartOptions.legend as any).data; expect(legendData).toEqual([ 'AV Stores, Co.', 'Alpha Cognac', 'Amica Models & Co.', ]); }); it('sorts alphabetically ascending when legendSort is "asc"', () => { const props = createChartProps({ legendSort: 'asc' }); const result = transformProps(props as EchartsBubbleChartProps); const legendData = (result.echartOptions.legend as any).data; expect(legendData).toEqual([ 'Alpha Cognac', 'Amica Models & Co.', 'AV Stores, Co.', ]); }); it('sorts alphabetically descending when legendSort is "desc"', () => { const props = createChartProps({ legendSort: 'desc' }); const result = transformProps(props as EchartsBubbleChartProps); const legendData = (result.echartOptions.legend as any).data; expect(legendData).toEqual([ 'AV Stores, Co.', 'Amica Models & Co.', 'Alpha Cognac', ]); }); });