Fix #9667 Longitudinal profile chart is not visible anymore (#9668)

geosolutions-it · Oct 27, 2023 · 2c97213 · 2c97213
1 parent ceb5f4d
commit 2c97213
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 84 deletions.
diff --git a/web/client/components/charts/WidgetChart.jsx b/web/client/components/charts/WidgetChart.jsx
@@ -651,13 +651,15 @@ export const toPlotly = (_props) => {
  */
 function WidgetChart({
     onInitialized,
+    onHover,
     ...props
 }) {
     const { data, layout, config } = toPlotly(props);
     return (
         <Suspense fallback={<LoadingView />}>
             <Plot
                 onInitialized={onInitialized}
+                onHover={onHover}
                 data={data.flat()}
                 layout={layout}
                 config={config}

diff --git a/web/client/plugins/longitudinalProfile/Chart.jsx b/web/client/plugins/longitudinalProfile/Chart.jsx
diff --git a/web/client/plugins/longitudinalProfile/Dock.jsx b/web/client/plugins/longitudinalProfile/Dock.jsx
@@ -20,7 +20,7 @@ import tooltip from "../../components/misc/enhancers/tooltip";
 import LoadingView from "../../components/misc/LoadingView";
 import ResponsivePanel from "../../components/misc/panels/ResponsivePanel";
 import Toolbar from "../../components/misc/toolbar/Toolbar";
-import Chart from "./Chart";
+import Chart from "../../components/charts/WidgetChart";
 
 const NavItemT = tooltip(NavItem);
 
@@ -74,23 +74,36 @@ const ChartData = ({
         }
     }, [marker]);
 
-    const series = [{dataKey: "altitude", color: `#078aa3`}];
-    const xAxis = {dataKey: "distance", show: false, showgrid: true};
     const options = {
-        xAxisAngle: 0,
-        yAxis: true,
-        yAxisLabel: messages.longitudinalProfile.elevation,
+        traces: [{
+            id: 'longitudinal-profile-trace',
+            type: 'line',
+            style: {
+                line: {
+                    color: `#078aa3`
+                }
+            },
+            options: {
+                groupByAttributes: 'distance',
+                aggregationAttribute: 'altitude'
+            }
+        }],
+        xAxisOpts: [{
+            id: 0,
+            angle: 0,
+            hide: false,
+            title: messages.longitudinalProfile.distance,
+            fontSize: 11
+        }],
+        yAxisOpts: [{
+            id: 0,
+            title: messages.longitudinalProfile.elevation,
+            tickSuffix: ' m',
+            hide: false,
+            fontSize: 11
+        }],
         legend: false,
-        tooltip: false,
-        cartesian: true,
-        popup: false,
-        xAxisOpts: {
-            hide: false
-        },
-        yAxisOpts: {
-            tickSuffix: ' m'
-        },
-        xAxisLabel: messages.longitudinalProfile.distance
+        cartesian: true
     };
 
     const generateChartImageUrl = () => {
@@ -144,9 +157,8 @@ const ChartData = ({
                                 {...options}
                                 height={maximized ? height - 115 : 400}
                                 width={maximized ? width - (dockStyle?.right ?? 0) - (dockStyle?.left ?? 0) : 520 }
-                                data={data}
-                                series={series}
-                                xAxis={xAxis}
+                                // using multiple traces data is array of arrays of data
+                                data={[data]}
                             />
                             {config.referential && projection ? <table className="data-used">
                                 <tr>