fix(colors): Multiple charts using ContinuousColorsLegendSvg share the same legend color scale (#2695)

Co-authored-by: Hugh Williams <[email protected]>

Author: HughWilliams90

packages/legends/src/svg/ContinuousColorsLegendSvg.tsx

@@ -52,8 +52,10 @@ export const ContinuousColorsLegendSvg = ({
 
     const theme = useTheme()
 
+    // remove commas, parentheses and spaces from stop color, this will then create a unique id depending on which color scheme you use.
+    // so if you have two or more heatmaps on a single page with differing color schemes the legend will be correct for each.
     const id = `ContinuousColorsLegendSvgGradient.${direction}.${colorStops
-        .map(stop => stop.offset)
+        .map(stop => `${stop.stopColor.replace(/[(),\s]/g, '')}.${stop.offset}`)
         .join('_')}`
 
     return (

storybook/stories/heatmap/HeatMap.stories.tsx

@@ -100,6 +100,15 @@ export const CustomTooltip: Story = {
     ),
 }
 
+export const MultipleHeatMaps: Story = {
+    render: () => (
+        <>
+            <HeatMapWithColor colorConfig={'sequential (full domain)'} />
+            <HeatMapWithColor colorConfig={'diverging at 0.5'} />
+        </>
+    ),
+}
+
 const customColorConfigs = {
     'sequential (full domain)': {
         type: 'sequential',