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

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

@@ -278,6 +278,20 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'enable_borders',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Enable Borders'),
+              renderTrigger: true,
+              description: t(
+                'To enable black borders to Heatmap elements',
+              ),
+              default: false,
+            },
+          },
+        ],
       ],
     },
   ],

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

@@ -25,6 +25,7 @@ import {
   getSequentialSchemeRegistry,
   getTimeFormatter,
   getValueFormatter,
+  supersetTheme,
   tooltipHtml,
 } from '@superset-ui/core';
 import memoizeOne from 'memoize-one';
@@ -86,6 +87,7 @@ export default function transformProps(
     metric = '',
     normalizeAcross,
     normalized,
+    enableBorders,
     showLegend,
     showPercentage,
     showValues,
@@ -161,6 +163,18 @@ export default function transformProps(
           return valueFormatter(paramsValue?.[2] as number | null | undefined);
         },
       },
+      itemStyle: {
+        borderColor: enableBorders
+          ? supersetTheme.colors.grayscale.dark2
+          : undefined,
+      },
+      emphasis: {
+        itemStyle: {
+          borderColor: supersetTheme.colors.grayscale.light5,
+          shadowBlur: 10,
+          shadowColor: supersetTheme.colors.grayscale.dark2,
+        },
+      },
     },
   ];
 

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

@@ -33,6 +33,7 @@ export interface HeatmapFormData extends QueryFormData {
   metric: QueryFormMetric;
   normalizeAcross: 'heatmap' | 'x' | 'y';
   normalized?: boolean;
+  enableBorders?: boolean;
   showLegend?: boolean;
   showPercentage?: boolean;
   showValues?: boolean;