Merge pull request #114 from devgateway/task/TCDICORE-475/fix-manual-csv-colors

Author: timothygachengo

.changeset/odd-pants-admire.md

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

Dockerfile

@@ -12,6 +12,7 @@ WORKDIR /app
 FROM base AS builder
 ENV NODE_ENV=production
 
+
 COPY pnpm-lock.yaml /app/pnpm-lock.yaml
 COPY pnpm-workspace.yaml /app/pnpm-workspace.yaml
 COPY package.json /app/package.json

packages/commons/package.json

@@ -58,6 +58,7 @@
     "start": "tsc -w"
   },
   "dependencies": {
+    "@devgateway/dvz-wp-commons": "workspace:@devgateway/dvz-wp-commons@*",
     "@wordpress/api-fetch": "^7.32.0",
     "@wordpress/block-editor": "^15.5.0",
     "@wordpress/components": "^30.5.0",

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,7 @@ export const ChartColors = (props) => {
         return null
     }
 
-    const csvColors = () => {
+    const csvColors = () => { 
         const data = Papa.parse(csv, {header: true, dynamicTyping: true});
         const values = [];
 
@@ -416,11 +429,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) {
@@ -517,7 +531,7 @@ export const ChartColors = (props) => {
             {/* CSV CHART*/}
 
             {app == "csv" && <PanelBody initialOpen={false} title={__("Set Colors")}>
-                {csvColors(colorBy)}
+                {csvColors()}
             </PanelBody>}
 
 

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/charts/index.js

@@ -368,7 +368,7 @@ registerBlockType(BLOCKS_NS + '/chart',
             },
 
             manualColors: {
-                type: 'Object',
+                type: 'object',
                 default: {}
             },
             barPadding: {

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

@@ -4,8 +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 { BLOCKS_NS } from '@devgateway/dvz-wp-commons'
 
-const name = process.env.BLOCKS_NS + '/text-color';
+const name = BLOCKS_NS + '/text-color';
 
 function Edit(props) {
   const { isActive, value, onChange, contentRef } = props;

plugins/wp-react-blocks-plugin/blocks/webpack.config.js

@@ -17,7 +17,6 @@ module.exports = {
         ...defaultConfig.plugins,
         new Dotenv({
             systemvars: true,
-            safe: true
         }),
     ]
 };