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
+
+
+ | a |
+ b |
+ c |
+
+
+ | 1 |
+ 2 |
+ 3 |
+
+
+
+
Title
+
+
+ | a |
+ b |
+ c |
+
+
+ | 1 |
+ 2 |
+ 3 |
+
+
+
+
+
+ | a |
+ b |
+ c |
+
+
+ | 1 |
+ 2 |
+ 3 |
+
+
+
bubble title bubble dimension
- x-axis-label: $10,000.00
- y-axis-label: $20,000.00
- size-label: 300.0%`,
+ 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],
};
- expect(
- formatTooltip(
- params,
- 'x-axis-label',
- 'y-axis-label',
- 'size-label',
- dollerFormatter,
- dollerFormatter,
- percentFormatter,
- ),
- ).toEqual(
- `bubble title
- x-axis-label: $10,000.00
- y-axis-label: $25,000.00
- size-label: 300.0%`,
+ 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%');
});
});
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/Graph/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Graph/transformProps.test.ts
index 100e39a27e82a..3c2e6e238445a 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Graph/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Graph/transformProps.test.ts
@@ -81,11 +81,7 @@ describe('EchartsGraph transformProps', () => {
label: { fontWeight: 'bolder' },
},
symbolSize: 50,
- tooltip: {
- appendToBody: true,
- formatter: '{b}: {c}',
- position: expect.anything(),
- },
+ tooltip: expect.anything(),
value: 6,
},
{
@@ -99,11 +95,7 @@ describe('EchartsGraph transformProps', () => {
label: { fontWeight: 'bolder' },
},
symbolSize: 50,
- tooltip: {
- appendToBody: true,
- formatter: '{b}: {c}',
- position: expect.anything(),
- },
+ tooltip: expect.anything(),
value: 6,
},
{
@@ -117,11 +109,7 @@ describe('EchartsGraph transformProps', () => {
label: { fontWeight: 'bolder' },
},
symbolSize: 10,
- tooltip: {
- appendToBody: true,
- formatter: '{b}: {c}',
- position: expect.anything(),
- },
+ tooltip: expect.anything(),
value: 5,
},
{
@@ -135,11 +123,7 @@ describe('EchartsGraph transformProps', () => {
label: { fontWeight: 'bolder' },
},
symbolSize: 10,
- tooltip: {
- appendToBody: true,
- formatter: '{b}: {c}',
- position: expect.anything(),
- },
+ tooltip: expect.anything(),
value: 5,
},
],
@@ -239,11 +223,7 @@ describe('EchartsGraph transformProps', () => {
symbolSize: 10,
category: 'category_value_1',
select: DEFAULT_GRAPH_SERIES_OPTION.select,
- tooltip: {
- appendToBody: true,
- formatter: '{b}: {c}',
- position: expect.anything(),
- },
+ tooltip: expect.anything(),
label: { show: true },
},
{
@@ -254,11 +234,7 @@ describe('EchartsGraph transformProps', () => {
symbolSize: 10,
category: 'category_value_2',
select: DEFAULT_GRAPH_SERIES_OPTION.select,
- tooltip: {
- appendToBody: true,
- formatter: '{b}: {c}',
- position: expect.anything(),
- },
+ tooltip: expect.anything(),
label: { show: true },
},
],
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%']);
});
});
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/utils/forecast.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/utils/forecast.test.ts
index f3d6f60267207..1d35a2b117eda 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/utils/forecast.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/utils/forecast.test.ts
@@ -234,7 +234,7 @@ test('formatForecastTooltipSeries should apply format to value', () => {
observation: 10.1,
formatter,
}),
- ).toEqual('![]()
abc: 10');
+ ).toEqual(['![]()
abc', '10']);
});
test('formatForecastTooltipSeries should show falsy value', () => {
@@ -245,7 +245,7 @@ test('formatForecastTooltipSeries should show falsy value', () => {
observation: 0,
formatter,
}),
- ).toEqual('![]()
abc: 0');
+ ).toEqual(['![]()
abc', '0']);
});
test('formatForecastTooltipSeries should format full forecast', () => {
@@ -259,7 +259,7 @@ test('formatForecastTooltipSeries should format full forecast', () => {
forecastUpper: 7.1,
formatter,
}),
- ).toEqual('![]()
qwerty: 10, ŷ = 20 (5, 12)');
+ ).toEqual(['![]()
qwerty', '10, ŷ = 20 (5, 12)']);
});
test('formatForecastTooltipSeries should format forecast without observation', () => {
@@ -272,7 +272,7 @@ test('formatForecastTooltipSeries should format forecast without observation', (
forecastUpper: 7,
formatter,
}),
- ).toEqual('![]()
qwerty: ŷ = 20 (5, 12)');
+ ).toEqual(['![]()
qwerty', 'ŷ = 20 (5, 12)']);
});
test('formatForecastTooltipSeries should format forecast without point estimate', () => {
@@ -285,7 +285,7 @@ test('formatForecastTooltipSeries should format forecast without point estimate'
forecastUpper: 7,
formatter,
}),
- ).toEqual('![]()
qwerty: 10 (6, 13)');
+ ).toEqual(['![]()
qwerty', '10 (6, 13)']);
});
test('formatForecastTooltipSeries should format forecast with only confidence band', () => {
@@ -297,5 +297,5 @@ test('formatForecastTooltipSeries should format forecast with only confidence ba
forecastUpper: 8,
formatter,
}),
- ).toEqual('![]()
qwerty: (7, 15)');
+ ).toEqual(['![]()
qwerty', '(7, 15)']);
});