feat(COR-1811): Different way of using interactive legend (#4908)

Co-authored-by: VWSCoronaDashboard29 <B>
minvws · Oct 23, 2023 · 067ad0f · 067ad0f
1 parent f38f823
commit 067ad0f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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;