From 3c3c3b1e4350170a3a2e279a59f372515335ab6b Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" Date: Tue, 30 Apr 2024 08:35:28 -0300 Subject: [PATCH] Adds tests --- .../superset-ui-core/src/utils/tooltip.ts | 8 +- .../test/utils/tooltip.test.ts | 115 ++++++++++++++++++ .../BigNumberWithTrendline/transformProps.ts | 1 - .../src/Bubble/transformProps.ts | 1 - .../src/Funnel/transformProps.ts | 2 +- .../src/Gauge/transformProps.ts | 6 +- .../src/Graph/transformProps.ts | 6 +- .../src/Heatmap/transformProps.ts | 2 +- .../src/MixedTimeseries/transformProps.ts | 1 - .../src/Pie/transformProps.ts | 1 - .../src/Sunburst/transformProps.ts | 2 +- .../src/Timeseries/transformProps.ts | 1 - .../src/Tree/transformProps.ts | 2 +- .../src/Treemap/transformProps.ts | 2 +- .../src/Waterfall/transformProps.ts | 2 +- .../src/utils/forecast.ts | 7 +- .../plugin-chart-echarts/src/utils/tooltip.ts | 1 + .../test/Funnel/transformProps.test.ts | 70 ++--------- .../test/Pie/transformProps.test.ts | 54 ++------ 19 files changed, 146 insertions(+), 138 deletions(-) create mode 100644 superset-frontend/packages/superset-ui-core/test/utils/tooltip.test.ts diff --git a/superset-frontend/packages/superset-ui-core/src/utils/tooltip.ts b/superset-frontend/packages/superset-ui-core/src/utils/tooltip.ts index 7cf344969ae53..2a3d9aaccd4e9 100644 --- a/superset-frontend/packages/superset-ui-core/src/utils/tooltip.ts +++ b/superset-frontend/packages/superset-ui-core/src/utils/tooltip.ts @@ -24,11 +24,8 @@ const TRUNCATION_STYLE = ` text-overflow: ellipsis; `; -// TODO Check if there's any column alignment different than ['left', 'right', 'right'] -// TODO: Remove colored border from all chart types? export function tooltipHtml( data: string[][], - columnAlignments: ('left' | 'right' | 'middle')[], title?: string, focusedRow?: number, ) { @@ -43,12 +40,11 @@ export function tooltipHtml( ${data .map((row, i) => { const rowStyle = - i === focusedRow ? 'font-weight: 700;' : 'opacity: 0.7;'; + i === focusedRow ? 'font-weight: 700;' : 'opacity: 0.8;'; let padding = 0; const cells = row.map((cell, j) => { - // TODO: Maybe make the font a little darker const cellStyle = ` - text-align: ${columnAlignments[j]}; + text-align: ${j > 0 ? 'right' : 'left'}; padding-left: ${padding}px; ${TRUNCATION_STYLE} `; diff --git a/superset-frontend/packages/superset-ui-core/test/utils/tooltip.test.ts b/superset-frontend/packages/superset-ui-core/test/utils/tooltip.test.ts new file mode 100644 index 0000000000000..fbd29175ec41e --- /dev/null +++ b/superset-frontend/packages/superset-ui-core/test/utils/tooltip.test.ts @@ -0,0 +1,115 @@ +/** + * 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 { tooltipHtml } from '@superset-ui/core'; + +const TITLE_STYLE = + 'style="font-weight: 700;max-width:300px;overflow:hidden;text-overflow:ellipsis;"'; +const TR_STYLE = 'style="opacity:0.8;"'; +const TR_FOCUS_STYLE = 'style="font-weight:700;"'; +const TD_TEXT_STYLE = + 'style="text-align:left;padding-left:0px;max-width:300px;overflow:hidden;text-overflow:ellipsis;"'; +const TD_NUMBER_STYLE = + 'style="text-align:right;padding-left:16px;max-width:300px;overflow:hidden;text-overflow:ellipsis;"'; + +const data = [ + ['a', 'b', 'c'], + ['1', '2', '3'], +]; + +function removeWhitespaces(text: string) { + return text.replace(/\s/g, ''); +} + +test('should return a table with the given data', () => { + const title = 'Title'; + const html = removeWhitespaces(tooltipHtml(data, title)); + const expectedHtml = removeWhitespaces(` +
+ Title + + + + + + + + + + + +
abc
123
+
`); + expect(html).toMatch(expectedHtml); +}); + +test('should return a table with the given data and a focused row', () => { + const title = 'Title'; + const focusedRow = 1; + const html = removeWhitespaces(tooltipHtml(data, title, focusedRow)); + const expectedHtml = removeWhitespaces(` +
+ Title + + + + + + + + + + + +
abc
123
+
`); + expect(html).toMatch(expectedHtml); +}); + +test('should return a table with no data', () => { + const title = 'Title'; + const html = removeWhitespaces(tooltipHtml([], title)); + const expectedHtml = removeWhitespaces(` +
+ Title + + +
No data
+
`); + expect(html).toMatch(expectedHtml); +}); + +test('should return a table with the given data and no title', () => { + const html = removeWhitespaces(tooltipHtml(data)); + const expectedHtml = removeWhitespaces(` +
+ + + + + + + + + + + +
abc
123
+
`); + expect(html).toMatch(expectedHtml); +}); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts index e94183161470e..015f0feee55b5 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts @@ -239,7 +239,6 @@ export default function transformProps( : headerFormatter.format(params[0].data[1]), ], ], - ['left', 'right'], formatTime(params[0].data[0]), ), }, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts index 1a6bbda41f7fd..b60ad99161a26 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts @@ -70,7 +70,6 @@ export function formatTooltip( [yAxisLabel, yAxisFormatter(params.data[1])], [sizeLabel, tooltipSizeFormatter(params.data[2])], ], - ['left', 'right'], title, ); } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts index 034cf44fa50ac..daca2eb678907 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts @@ -283,7 +283,7 @@ export default function transformProps( if (enumName.includes('Percent')) { row.push(formattedPercent); } - return tooltipHtml([row], ['left', 'right', 'right'], title); + return tooltipHtml([row], title); }, }, legend: { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts index 977fe4d738685..868cc0df361f7 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts @@ -288,11 +288,7 @@ export default function transformProps( ...getDefaultTooltip(refs), formatter: (params: CallbackDataParams) => { const { name, value } = params; - return tooltipHtml( - [[metricLabel, formatValue(value as number)]], - ['left', 'right'], - name, - ); + return tooltipHtml([[metricLabel, formatValue(value as number)]], name); }, }; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts index 40baacf280fb9..e79b5ac874e06 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts @@ -317,11 +317,7 @@ export default function transformProps( getKeyByValue(nodes, Number(params.data.target)), ); const title = `${source} > ${target}`; - return tooltipHtml( - [[metricLabel, `${params.value}`]], - ['left', 'right'], - title, - ); + return tooltipHtml([[metricLabel, `${params.value}`]], title); }, }, legend: { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts index d8cad8bd57822..805f671481e31 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts @@ -195,7 +195,7 @@ export default function transformProps( if (showPercentage) { row.push(`${percentFormatter(percentage)} (${suffix})`); } - return tooltipHtml([row], ['left', 'right', 'right'], title); + return tooltipHtml([row], title); }, }, visualMap: { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index 405b2cf4dc0f8..49cb210552dce 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts @@ -648,7 +648,6 @@ export default function transformProps( } return tooltipHtml( rows, - ['left', 'right', 'right'], tooltipFormatter(xValue), keys.findIndex(key => key === focusedSeries), ); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts index 6fee726354417..82986ffcb6367 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts @@ -326,7 +326,6 @@ export default function transformProps( }); return tooltipHtml( [[metricLabel, formattedValue, formattedPercent]], - ['left', 'right', 'right'], name, ); }, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts index 3de6bf0f5f848..7006e2178db35 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts @@ -152,7 +152,7 @@ export function formatTooltip({ compareValuePercentage, ]); } - return tooltipHtml(rows, ['left', 'right'], title); + return tooltipHtml(rows, title); } export default function transformProps( diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index 74b49878cf56b..ca6835706bd35 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -579,7 +579,6 @@ export default function transformProps( } return tooltipHtml( rows, - ['left', 'right', 'right'], tooltipFormatter(xValue), keys.findIndex(key => key === focusedSeries), ); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts index 7d2b8ca086be2..a0b08816db5d2 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Tree/transformProps.ts @@ -49,7 +49,7 @@ export function formatTooltip({ .map(pathInfo => pathInfo?.name || '') .filter(path => path !== ''); const row = value ? [metricLabel, String(value)] : []; - return tooltipHtml([row], ['left', 'right'], treePath.join(' ▸ ')); + return tooltipHtml([row], treePath.join(' ▸ ')); } export default function transformProps( diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts index aa77830b99540..09bdd191541dd 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts @@ -101,7 +101,7 @@ export function formatTooltip({ if (formattedPercent) { row.push(formattedPercent); } - return tooltipHtml([row], ['left', 'right', 'right'], treePath.join(' ▸ ')); + return tooltipHtml([row], treePath.join(' ▸ ')); } export default function transformProps( diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts index a7a243fa709fe..f9ff6c68dc8fb 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts @@ -80,7 +80,7 @@ function formatTooltip({ ]); } rows.push([TOTAL_MARK, defaultFormatter(series.data.totalSum)]); - return tooltipHtml(rows, ['left', 'right'], title); + return tooltipHtml(rows, title); } function transformer({ diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/forecast.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/forecast.ts index b77db8ec3b931..3241be43cd50e 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/forecast.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/forecast.ts @@ -17,12 +17,7 @@ * under the License. */ import { isNumber } from 'lodash'; -import { - DataRecord, - DataRecordValue, - DTTM_ALIAS, - ValueFormatter, -} from '@superset-ui/core'; +import { DataRecord, DTTM_ALIAS, ValueFormatter } from '@superset-ui/core'; import { OptionName } from 'echarts/types/src/util/types'; import { TooltipMarker } from 'echarts/types/src/util/format'; import { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/tooltip.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/tooltip.ts index c1fd7ac0a3f7f..7110cae6d5cdb 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/tooltip.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/tooltip.ts @@ -24,6 +24,7 @@ import { Refs } from '../types'; export function getDefaultTooltip(refs: Refs) { return { appendToBody: true, + borderColor: 'transparent', position: ( canvasMousePos: [number, number], params: CallbackDataParams, diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts index 4d326ab3020b4..08f225feda3ed 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts @@ -21,12 +21,9 @@ import { getNumberFormatter, supersetTheme, } from '@superset-ui/core'; -import transformProps, { - formatFunnelLabel, -} from '../../src/Funnel/transformProps'; +import transformProps, { parseParams } from '../../src/Funnel/transformProps'; import { EchartsFunnelChartProps, - EchartsFunnelLabelTypeType, PercentCalcType, } from '../../src/Funnel/types'; @@ -89,85 +86,40 @@ describe('formatFunnelLabel', () => { data: { firstStepPercent: 0.5, prevStepPercent: 0.85 }, }; expect( - formatFunnelLabel({ + parseParams({ params, numberFormatter, - labelType: EchartsFunnelLabelTypeType.Key, percentCalculationType: PercentCalcType.Total, }), - ).toEqual('My Label'); + ).toEqual(['My Label', '1.23k', '12.34%']); expect( - formatFunnelLabel({ + parseParams({ params, numberFormatter, - labelType: EchartsFunnelLabelTypeType.Value, - percentCalculationType: PercentCalcType.Total, - }), - ).toEqual('1.23k'); - expect( - formatFunnelLabel({ - params, - numberFormatter, - labelType: EchartsFunnelLabelTypeType.Percent, - percentCalculationType: PercentCalcType.Total, - }), - ).toEqual('12.34%'); - expect( - formatFunnelLabel({ - params, - numberFormatter, - labelType: EchartsFunnelLabelTypeType.Percent, percentCalculationType: PercentCalcType.FirstStep, }), - ).toEqual('50.00%'); + ).toEqual(['My Label', '1.23k', '50.00%']); expect( - formatFunnelLabel({ + parseParams({ params, numberFormatter, - labelType: EchartsFunnelLabelTypeType.Percent, percentCalculationType: PercentCalcType.PreviousStep, }), - ).toEqual('85.00%'); - expect( - formatFunnelLabel({ - params, - numberFormatter, - labelType: EchartsFunnelLabelTypeType.KeyValue, - percentCalculationType: PercentCalcType.Total, - }), - ).toEqual('My Label: 1.23k'); - expect( - formatFunnelLabel({ - params, - numberFormatter, - labelType: EchartsFunnelLabelTypeType.KeyPercent, - percentCalculationType: PercentCalcType.Total, - }), - ).toEqual('My Label: 12.34%'); - expect( - formatFunnelLabel({ - params, - numberFormatter, - labelType: EchartsFunnelLabelTypeType.KeyValuePercent, - percentCalculationType: PercentCalcType.Total, - }), - ).toEqual('My Label: 1.23k (12.34%)'); + ).toEqual(['My Label', '1.23k', '85.00%']); expect( - formatFunnelLabel({ + parseParams({ params: { ...params, name: '' }, numberFormatter, - labelType: EchartsFunnelLabelTypeType.Key, percentCalculationType: PercentCalcType.Total, }), - ).toEqual(''); + ).toEqual(['', '1.23k', '12.34%']); expect( - formatFunnelLabel({ + parseParams({ params: { ...params, name: '' }, numberFormatter, - labelType: EchartsFunnelLabelTypeType.Key, percentCalculationType: PercentCalcType.Total, sanitizeName: true, }), - ).toEqual('<NULL>'); + ).toEqual(['<NULL>', '1.23k', '12.34%']); }); }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts index 070e27df62be3..1add75d40151f 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts @@ -22,8 +22,8 @@ import { SqlaFormData, supersetTheme, } from '@superset-ui/core'; -import transformProps, { formatPieLabel } from '../../src/Pie/transformProps'; -import { EchartsPieChartProps, EchartsPieLabelType } from '../../src/Pie/types'; +import transformProps, { parseParams } from '../../src/Pie/transformProps'; +import { EchartsPieChartProps } from '../../src/Pie/types'; describe('Pie transformProps', () => { const formData: SqlaFormData = { @@ -81,61 +81,23 @@ describe('formatPieLabel', () => { const numberFormatter = getNumberFormatter(); const params = { name: 'My Label', value: 1234, percent: 12.34 }; expect( - formatPieLabel({ + parseParams({ params, numberFormatter, - labelType: EchartsPieLabelType.Key, }), - ).toEqual('My Label'); + ).toEqual(['My Label', '1.23k', '12.34%']); expect( - formatPieLabel({ - params, - numberFormatter, - labelType: EchartsPieLabelType.Value, - }), - ).toEqual('1.23k'); - expect( - formatPieLabel({ - params, - numberFormatter, - labelType: EchartsPieLabelType.Percent, - }), - ).toEqual('12.34%'); - expect( - formatPieLabel({ - params, - numberFormatter, - labelType: EchartsPieLabelType.KeyValue, - }), - ).toEqual('My Label: 1.23k'); - expect( - formatPieLabel({ - params, - numberFormatter, - labelType: EchartsPieLabelType.KeyPercent, - }), - ).toEqual('My Label: 12.34%'); - expect( - formatPieLabel({ - params, - numberFormatter, - labelType: EchartsPieLabelType.KeyValuePercent, - }), - ).toEqual('My Label: 1.23k (12.34%)'); - expect( - formatPieLabel({ + parseParams({ params: { ...params, name: '' }, numberFormatter, - labelType: EchartsPieLabelType.Key, }), - ).toEqual(''); + ).toEqual(['', '1.23k', '12.34%']); expect( - formatPieLabel({ + parseParams({ params: { ...params, name: '' }, numberFormatter, - labelType: EchartsPieLabelType.Key, sanitizeName: true, }), - ).toEqual('<NULL>'); + ).toEqual(['<NULL>', '1.23k', '12.34%']); }); });