From 067ad0f2575ebd8526929d39f0b947d87b8fb4df Mon Sep 17 00:00:00 2001
From: BE <137172332+VWSCoronaDashboard29@users.noreply.github.com>
Date: Mon, 23 Oct 2023 17:22:26 +0200
Subject: [PATCH] feat(COR-1811): Different way of using interactive legend
 (#4908)

Co-authored-by: VWSCoronaDashboard29 <B>
---
 packages/app/src/components/interactive-legend.tsx     |  4 ++--
 .../app/src/domain/variants/logic/use-bar-config.ts    | 10 ++++++++++
 .../app/src/domain/variants/logic/use-series-config.ts |  2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/components/interactive-legend.tsx b/packages/app/src/components/interactive-legend.tsx
index 1d8731ed73..6d724ccb1a 100644
--- a/packages/app/src/components/interactive-legend.tsx
+++ b/packages/app/src/components/interactive-legend.tsx
@@ -37,7 +37,7 @@ export function InteractiveLegend<T = string>({ helpText, selectOptions, selecti
             const isSelected = selection.includes(item.metricProperty);
             return (
               <Item key={item.label}>
-                <StyledLabel htmlFor={`checkboxgroup-${item.label}`} isActive={hasSelection && isSelected} borderColor={item.color} data-text={item.label}>
+                <StyledLabel htmlFor={`checkboxgroup-${item.metricProperty}`} isActive={hasSelection && isSelected} borderColor={item.color} data-text={item.label}>
                   {item.label}
                   {item.shape === 'line' && <Line color={item.color} />}
                   {item.shape === 'dashed' && (
@@ -51,7 +51,7 @@ export function InteractiveLegend<T = string>({ helpText, selectOptions, selecti
                 </StyledLabel>
                 <StyledInput
                   type="checkbox"
-                  id={`checkboxgroup-${item.label}`}
+                  id={`checkboxgroup-${item.metricProperty}`}
                   value={item.label}
                   onClick={() => onToggleItem(item.metricProperty)}
                   aria-label={item.legendAriaLabel}
diff --git a/packages/app/src/domain/variants/logic/use-bar-config.ts b/packages/app/src/domain/variants/logic/use-bar-config.ts
index 9de1371762..3d95b3bbf7 100644
--- a/packages/app/src/domain/variants/logic/use-bar-config.ts
+++ b/packages/app/src/domain/variants/logic/use-bar-config.ts
@@ -10,6 +10,16 @@ const extractVariantNamesFromValues = (values: VariantChartValue[]) => {
     .filter((keyName) => keyName.endsWith('_occurrence'));
 };
 
+/**
+ * Create configuration labels for interactive legend
+ * @param values
+ * @param selectedOptions
+ * @param variantLabels
+ * @param tooltipLabels
+ * @param colors
+ * @param timeframe
+ * @param today
+ */
 export const useBarConfig = (
   values: VariantChartValue[],
   selectedOptions: (keyof VariantChartValue)[],
diff --git a/packages/app/src/domain/variants/logic/use-series-config.ts b/packages/app/src/domain/variants/logic/use-series-config.ts
index e0bd1c1e39..aa51e324ec 100644
--- a/packages/app/src/domain/variants/logic/use-series-config.ts
+++ b/packages/app/src/domain/variants/logic/use-series-config.ts
@@ -31,7 +31,7 @@ export const useSeriesConfig = (
       const variantCode = variantCodeFragments.join('_');
 
       // Match mnenonic variant name in lokalize to code-based variant name
-      const variantDynamicLabel = text.variantCodes[variantCode] + ' '; // THIS IS NECESSARY TO DIFFERENTIATE STATE BETWEEN THE TWO INTERACTIVE LEGENDS ON THE PAGE;
+      const variantDynamicLabel = text.variantCodes[variantCode];
 
       // Match appropriate variant color
       const color = colors.find((variantColors) => variantColors.variant === variantCode)?.color;