feat: Adding the option and feature to enable borders with color, opacity and width control on heatmaps along with white borders on emphasis (#32358)

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/controlPanel.tsx

@@ -123,6 +123,31 @@ const config: ControlPanelConfig = {
           },
         ],
         ['linear_color_scheme'],
+        [
+          {
+            name: 'border_color',
+            config: {
+              type: 'ColorPickerControl',
+              label: t('Border color'),
+              renderTrigger: true,
+              description: t('The color of the elements border'),
+              default: { r: 0, g: 0, b: 0, a: 1 },
+            },
+          },
+          {
+            name: 'border_width',
+            config: {
+              type: 'SliderControl',
+              label: t('Border width'),
+              renderTrigger: true,
+              min: 0,
+              max: 2,
+              default: 0,
+              step: 0.1,
+              description: t('The width of the elements border'),
+            },
+          },
+        ],
         [
           {
             name: 'xscale_interval',

superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts

@@ -25,6 +25,9 @@ import {
   getSequentialSchemeRegistry,
   getTimeFormatter,
   getValueFormatter,
+  rgbToHex,
+  addAlpha,
+  supersetTheme,
   tooltipHtml,
 } from '@superset-ui/core';
 import memoizeOne from 'memoize-one';
@@ -86,6 +89,8 @@ export default function transformProps(
     metric = '',
     normalizeAcross,
     normalized,
+    borderColor,
+    borderWidth = 0,
     showLegend,
     showPercentage,
     showValues,
@@ -161,6 +166,20 @@ export default function transformProps(
           return valueFormatter(paramsValue?.[2] as number | null | undefined);
         },
       },
+      itemStyle: {
+        borderColor: addAlpha(
+          rgbToHex(borderColor.r, borderColor.g, borderColor.b),
+          borderColor.a,
+        ),
+        borderWidth,
+      },
+      emphasis: {
+        itemStyle: {
+          borderColor: supersetTheme.colors.grayscale.light5,
+          shadowBlur: 10,
+          shadowColor: supersetTheme.colors.grayscale.dark2,
+        },
+      },
     },
   ];
 

superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/types.ts

@@ -21,6 +21,7 @@ import {
   QueryFormColumn,
   QueryFormData,
   QueryFormMetric,
+  RgbaColor,
 } from '@superset-ui/core';
 import { BaseChartProps, BaseTransformedProps } from '../types';
 
@@ -33,6 +34,8 @@ export interface HeatmapFormData extends QueryFormData {
   metric: QueryFormMetric;
   normalizeAcross: 'heatmap' | 'x' | 'y';
   normalized?: boolean;
+  borderColor: RgbaColor;
+  borderWidth: number;
   showLegend?: boolean;
   showPercentage?: boolean;
   showValues?: boolean;