fix(COR-1811): Add differentation between states of interactiveLegends

minvws · Oct 19, 2023 · 9ad7576 · 9ad7576
1 parent 876f72d
commit 9ad7576
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 7 deletions.
diff --git a/packages/app/src/domain/variants/logic/use-bar-config.ts b/packages/app/src/domain/variants/logic/use-bar-config.ts
@@ -9,7 +9,6 @@ const extractVariantNamesFromValues = (values: VariantChartValue[]) => {
     .filter((keyName, index, array) => array.indexOf(keyName) === index)
     .filter((keyName) => keyName.endsWith('_occurrence'));
 };
-
 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];
+      const variantDynamicLabel = text.variantCodes[variantCode] + ' '; // THIS IS NECESSARY TO DIFFERENTIATE STATE BETWEEN THE TWO INTERACTIVE LEGENDS ON THE PAGE;
 
       // Match appropriate variant color
       const color = colors.find((variantColors) => variantColors.variant === variantCode)?.color;

diff --git a/packages/app/src/domain/variants/variants-stacked-bar-chart-tile.tsx b/packages/app/src/domain/variants/variants-stacked-bar-chart-tile.tsx
@@ -73,13 +73,11 @@ export const VariantsStackedBarChartTile = ({ title, description, helpText, valu
 
   const { list, toggle, clear } = useList<keyof VariantChartValue>(alwaysEnabled);
 
-  const selectedOptions = list;
-
   const [variantTimeFrame, setVariantTimeFrame] = useState<TimeframeOption>(TimeframeOption.THREE_MONTHS);
 
-  const [barChartConfig, selectionOptions] = useBarConfig(values, selectedOptions, variantLabels, variantColors, variantTimeFrame, today);
+  const [barChartConfig, selectionOptions] = useBarConfig(values, list, variantLabels, variantColors, variantTimeFrame, today);
 
-  const hasTwoColumns = selectedOptions.length === 0 || selectedOptions.length > 4;
+  const hasTwoColumns = list.length === 0 || list.length > 4;
 
   return (
     <ChartTile
@@ -90,7 +88,7 @@ export const VariantsStackedBarChartTile = ({ title, description, helpText, valu
       timeframeInitialValue={TimeframeOption.THREE_MONTHS}
       onSelectTimeframe={setVariantTimeFrame}
     >
-      <InteractiveLegend helpText={helpText} selectOptions={selectionOptions} selection={selectedOptions} onToggleItem={toggle} onReset={clear} />
+      <InteractiveLegend helpText={helpText} selectOptions={selectionOptions} selection={list} onToggleItem={toggle} onReset={clear} />
       <Spacer marginBottom={space[2]} />
       <StackedChart
         accessibility={{