fix(plugin-chart-echarts): fix null labels on pie and funnel charts (#…

…1270)
apache · Nov 26, 2021 · 5ed2ba1 · 5ed2ba1
1 parent 7441009
commit 5ed2ba1
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts b/...mporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
@@ -50,13 +50,15 @@ export function formatFunnelLabel({
   params,
   labelType,
   numberFormatter,
+  sanitizeName = false,
 }: {
-  params: CallbackDataParams;
+  params: Pick<CallbackDataParams, 'name' | 'value' | 'percent'>;
   labelType: EchartsFunnelLabelTypeType;
   numberFormatter: NumberFormatter;
+  sanitizeName?: boolean;
 }): string {
   const { name: rawName = '', value, percent } = params;
-  const name = sanitizeHtml(rawName);
+  const name = sanitizeName ? sanitizeHtml(rawName) : rawName;
   const formattedValue = numberFormatter(value as number);
   const formattedPercent = percentFormatter((percent as number) / 100);
   switch (labelType) {

diff --git a/.../temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Pie/transformProps.ts b/.../temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Pie/transformProps.ts
@@ -51,13 +51,15 @@ export function formatPieLabel({
   params,
   labelType,
   numberFormatter,
+  sanitizeName = false,
 }: {
-  params: CallbackDataParams;
+  params: Pick<CallbackDataParams, 'name' | 'value' | 'percent'>;
   labelType: EchartsPieLabelType;
   numberFormatter: NumberFormatter;
+  sanitizeName?: boolean;
 }): string {
   const { name: rawName = '', value, percent } = params;
-  const name = sanitizeHtml(rawName);
+  const name = sanitizeName ? sanitizeHtml(rawName) : rawName;
   const formattedValue = numberFormatter(value as number);
   const formattedPercent = percentFormatter((percent as number) / 100);
 
@@ -221,6 +223,7 @@ export default function transformProps(chartProps: EchartsPieChartProps): PieCha
           params,
           numberFormatter,
           labelType: EchartsPieLabelType.KeyValuePercent,
+          sanitizeName: true,
         }),
     },
     legend: {

diff --git a/...y_superset_ui/superset-ui/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts b/...y_superset_ui/superset-ui/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts
@@ -102,5 +102,20 @@ describe('formatFunnelLabel', () => {
         labelType: EchartsFunnelLabelTypeType.KeyValuePercent,
       }),
     ).toEqual('My Label: 1.23k (12.34%)');
+    expect(
+      formatFunnelLabel({
+        params: { ...params, name: '<NULL>' },
+        numberFormatter,
+        labelType: EchartsFunnelLabelTypeType.Key,
+      }),
+    ).toEqual('<NULL>');
+    expect(
+      formatFunnelLabel({
+        params: { ...params, name: '<NULL>' },
+        numberFormatter,
+        labelType: EchartsFunnelLabelTypeType.Key,
+        sanitizeName: true,
+      }),
+    ).toEqual('&lt;NULL&gt;');
   });
 });
diff --git a/...rary_superset_ui/superset-ui/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts b/...rary_superset_ui/superset-ui/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts
@@ -16,17 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChartProps, getNumberFormatter } from '@superset-ui/core';
+import { ChartProps, getNumberFormatter, SqlaFormData } from '@superset-ui/core';
 import transformProps, { formatPieLabel } from '../../src/Pie/transformProps';
 import { EchartsPieLabelType } from '../../src/Pie/types';
 
 describe('Pie tranformProps', () => {
-  const formData = {
+  const formData: SqlaFormData = {
     colorScheme: 'bnbColors',
     datasource: '3__table',
     granularity_sqla: 'ds',
     metric: 'sum__num',
     groupby: ['foo', 'bar'],
+    viz_type: 'my_viz',
   };
   const chartProps = new ChartProps({
     formData,
@@ -91,5 +92,20 @@ describe('formatPieLabel', () => {
     expect(
       formatPieLabel({ params, numberFormatter, labelType: EchartsPieLabelType.KeyValuePercent }),
     ).toEqual('My Label: 1.23k (12.34%)');
+    expect(
+      formatPieLabel({
+        params: { ...params, name: '<NULL>' },
+        numberFormatter,
+        labelType: EchartsPieLabelType.Key,
+      }),
+    ).toEqual('<NULL>');
+    expect(
+      formatPieLabel({
+        params: { ...params, name: '<NULL>' },
+        numberFormatter,
+        labelType: EchartsPieLabelType.Key,
+        sanitizeName: true,
+      }),
+    ).toEqual('&lt;NULL&gt;');
   });
 });