Fix geosolutions-it#11721 Add support for line traces classification - fix switching bar to line classification (geosolutions-it#11906)

Author: subashtiwari1010

web/client/components/charts/WidgetChart.jsx

@@ -626,10 +626,16 @@ export const toPlotly = (_props) => {
             // for pie: Position legend to right and centered vertically
             // for bar: use groupclick to be for item toggle by overriding the default 'togglegroup' with 'toggleitem'
             // ** see: https://plotly.com/javascript/reference/layout/#layout-legend-groupclick
-            ...((types.includes('pie') && isModeBarVisible) ? { legend: {x: 1.05, y: 0.5} } : types.includes('bar') ? {legend: {
-                "tracegroupgap": 10,
-                "groupclick": "toggleitem"
-            }} : {}),
+            ...((types.includes('pie') && isModeBarVisible)
+                ? { legend: {x: 1.05, y: 0.5} }
+                : (types.includes('bar') || types.includes('line'))
+                    ? {
+                        legend: {
+                            "tracegroupgap": 10,
+                            "groupclick": "toggleitem"
+                        }
+                    }
+                    : {}),
             hovermode: 'x unified',
             uirevision: true,
             shapes: [...(layout?.shapes || [])],

web/client/components/charts/__tests__/WidgetChart-test.js

@@ -1186,4 +1186,24 @@ describe('Widget Chart: data conversions ', () => {
             });
         });
     });
+    describe('legend layout for bar and line charts', () => {
+        it('bar: legend has tracegroupgap and groupclick toggleitem', () => {
+            const { layout } = toPlotly({
+                type: 'bar',
+                width: 400,
+                ...DATASET_1,
+                classifyGeoJSONSync
+            });
+            expect(layout.legend).toEqual({ tracegroupgap: 10, groupclick: 'toggleitem' });
+        });
+        it('line: legend has tracegroupgap and groupclick toggleitem', () => {
+            const { layout } = toPlotly({
+                type: 'line',
+                width: 400,
+                ...DATASET_1,
+                classifyGeoJSONSync
+            });
+            expect(layout.legend).toEqual({ tracegroupgap: 10, groupclick: 'toggleitem' });
+        });
+    });
 });

web/client/components/widgets/builder/wizard/chart/ChartStyleEditor.jsx

@@ -14,19 +14,11 @@ import Select from "react-select";
 import Message from "../../../../I18N/Message";
 import ChartClassification from './ChartClassification';
 import set from 'lodash/fp/set';
-import { DEFAULT_CLASSIFICATION } from '../../../../../utils/WidgetsUtils';
 
 const chartStyleEditors = {
     line: ({ data, onChangeStyle, options, onChange }) => {
         const msMode = data?.style?.msMode || 'simple';
         const mode = data?.style?.mode || 'lines';
-        const classificationData = {
-            ...data,
-            style: {
-                ...data?.style,
-                msClassification: data?.style?.msClassification || DEFAULT_CLASSIFICATION
-            }
-        };
 
         // Filter mode options based on msMode
         const modeOptions = [
@@ -77,7 +69,7 @@ const chartStyleEditors = {
                 </FormGroup>
                 {msMode === 'classification' && (
                     <ChartClassification
-                        data={classificationData}
+                        data={data}
                         options={options}
                         onChange={onChange}
                         onChangeStyle={onChangeStyle}

web/client/utils/WidgetsUtils.js

@@ -40,13 +40,6 @@ export const FONT = {
     COLOR: "#000000"
 };
 
-export const DEFAULT_CLASSIFICATION = {
-    intervals: 5,
-    method: "jenks",
-    ramp: "viridis",
-    reverse: false
-};
-
 /**
  * Get a widget by its dependency path
  * @param {string} k - The dependency path