fix(TCDICORE-475): fix manual colors for csv

Author: timothygachengo

.changeset/odd-pants-admire.md

@@ -0,0 +1,5 @@
+---
+"@devgateway/dvz-wp-commons": patch
+---
+
+Fix manual CSV colors

packages/commons/src/ChartColors.jsx

@@ -157,7 +157,7 @@ export const ChartColors = (props) => {
 
     useEffect(() => {
         let nextUseColors = useColors;
-        if (app != "csv") {
+        if (app !== "csv") {
             // All conditions for coloring by measures
             if ((dimension2 == "none" && colorBy === "index" && swap) ||
                 (dimension1 == "none" && dimension2 == "none")) { //Multi measure colored by first dimension but  swapped (Colored by Measure) or dimensionless bar charts
@@ -198,13 +198,26 @@ export const ChartColors = (props) => {
 
     const updateColor = (value, color, colorByMode = null) => {
 
-        const newColors = Object.assign({}, manualColors)
+        const newColors = {
+            ...manualColors,
+            [app]: {
+                ...manualColors[app],
+            }
+        }
         if (colorByMode) {
-            // For CSV colors, nest by colorBy mode
-            if (!newColors[app][colorByMode]) {
-                newColors[app][colorByMode] = {}
+            // For CSV colors, nest by colorBy mode.
+            // If the key exists as a flat (legacy) entry, remove it to avoid duplicates.
+            const appColors = newColors[app];
+            const baseApp = typeof appColors[value] === "string"
+                ? (({ [value]: _removed, ...rest }) => rest)(appColors)
+                : appColors;
+            newColors[app] = {
+                ...baseApp,
+                [colorByMode]: {
+                    ...(baseApp[colorByMode] || {}),
+                    [value]: color
+                }
             }
-            newColors[app][colorByMode][value] = color
         } else {
             // For non-CSV colors, use flat structure
             newColors[app][value] = color
@@ -399,7 +412,9 @@ export const ChartColors = (props) => {
         return null
     }
 
-    const csvColors = () => {
+    const csvColors = (colorByParams) => {
+        console.log("color by params...", colorByParams)
+        console.log("csv colors...", manualColors, colorBy)
         const data = Papa.parse(csv, {header: true, dynamicTyping: true});
         const values = [];
 
@@ -416,11 +431,12 @@ export const ChartColors = (props) => {
 
         if (manualColors[app] && values) {
             return values.map(v => {
-                // Get the current colorBy mode's color storage, creating it if needed
+                // Get the current colorBy mode's color storage, falling back to flat structure for legacy data
                 const colorByColors = manualColors[app][colorBy] || {};
+                const color = colorByColors[v] !== undefined ? colorByColors[v] : manualColors[app][v];
                 return <PanelColorSettings
                     colorSettings={[{
-                        value: colorByColors[v],
+                        value: color,
 
                         onChange: (color) => {
                             if (color) {

plugins/wp-react-blocks-plugin/blocks/charts/Bar.jsx

@@ -55,9 +55,10 @@ const BarOptions = (props) => {
             enableGridY,
             sort,
             sortReverse,
+            manualColors
         }
     } = props;
-
+ 
     const getSeries = () => {
         if (allCategories) {
 
@@ -127,10 +128,12 @@ const BarOptions = (props) => {
     }
     const series = app == 'csv' ? getCSVSeries() : getSeries();
 
+   
+
     return [
       <PanelBody initialOpen={false} title={__("Bar Options")}>
         <PanelBody initialOpen={false} title={__("Colors")}>
-          <ChartColors {...props}></ChartColors>
+          <ChartColors {...props} manualColors={manualColors}></ChartColors>
         </PanelBody>
         <PanelBody initialOpen={false} title={"Layout"}>
           <PanelRow>

plugins/wp-react-blocks-plugin/blocks/format-bar/text-color.js

@@ -4,9 +4,9 @@ import { RichTextToolbarButton, ColorPalette } from '@wordpress/block-editor';
 import { Popover, Panel, PanelBody, Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { tag as tagIcon } from '@wordpress/icons';
-import { BLOCK_NS } from '@devgateway/dvz-wp-commons'
+import { BLOCKS_NS } from '@devgateway/dvz-wp-commons'
 
-const name = BLOCK_NS + '/text-color';
+const name = BLOCKS_NS + '/text-color';
 
 function Edit(props) {
   const { isActive, value, onChange, contentRef } = props;