From 778db700b65b92de2e8675094c4e0598c8472ca2 Mon Sep 17 00:00:00 2001
From: carlaagullosoler <cagullo@dexma.com>
Date: Thu, 5 May 2022 15:49:25 +0200
Subject: [PATCH] fix(chart): default values

correct little thingui
---
 src/components/Chart.js | 62 +++++++++++++++++++++++++----------------
 1 file changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/components/Chart.js b/src/components/Chart.js
index ee5e489c..789da17a 100644
--- a/src/components/Chart.js
+++ b/src/components/Chart.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled, { withTheme } from 'styled-components';
 import omit from 'lodash/omit';
@@ -233,7 +233,8 @@ const Chart = props => {
   const loading = isLoading && !showError;
   const error = !isLoading && showError && errorContent;
   const showChart = !loading && !error && options;
-  const { backgroundColor, fontFamily } = theme;
+  const [aggregateOptions, setAggregateOptions] = useState();
+  const { fontFamily, backgroundColor } = theme;
   const highchartsReactProps = omit(props, [
     'isLoading',
     'showError',
@@ -252,7 +253,27 @@ const Chart = props => {
   ]);
 
   useEffect(() => {
-    Highcharts.setOptions({
+    const currentOptions = { ...options };
+
+    if (!currentOptions.chart) {
+      currentOptions.chart = { style: {} };
+    } else if (!currentOptions.chart.style) {
+      currentOptions.chart.style = {};
+    }
+    if (!currentOptions.legend) {
+      currentOptions.legend = {};
+    }
+    if (!currentOptions.tooltip) {
+      currentOptions.tooltip = {};
+    }
+    if (!currentOptions.title) {
+      currentOptions.title = {};
+    } else if (!currentOptions.title.style) {
+      currentOptions.title.style = {};
+    }
+
+    setAggregateOptions({
+      ...options,
       lang: {
         decimalPoint,
         thousandsSep,
@@ -261,46 +282,39 @@ const Chart = props => {
         shortMonths,
         weekdays,
       },
-      chart: {
-        backgroundColor: backgroundColor,
-        style: {
-          fontFamily: fontFamily,
-        },
-      },
       title: {
+        ...currentOptions.title,
         style: {
+          ...currentOptions.title.style,
           fontWeight: 'bold',
         },
       },
       tooltip: {
+        ...currentOptions.tooltip,
         backgroundColor: backgroundColor,
         shadow: false,
       },
       legend: {
+        ...currentOptions.legend,
         backgroundColor: backgroundColor,
         itemStyle: {},
       },
-      xAxis: {
-        labels: {
-          style: {},
-        },
-      },
-      yAxis: {
-        title: {
-          style: {},
-        },
-        labels: {
-          style: {},
-        },
-      },
       credits: {
         enabled: false,
       },
       exporting: {
         enabled: false,
       },
+      chart: {
+        ...currentOptions.chart,
+        backgroundColor: backgroundColor,
+        style: {
+          ...currentOptions.chart.style,
+          fontFamily: fontFamily,
+        },
+      },
     });
-  }, []);
+  }, [options, fontFamily, backgroundColor]);
 
   return (
     <StyledChart data-id={dataId} data-testid={dataTestId}>
@@ -310,7 +324,7 @@ const Chart = props => {
         <HighchartsReact
           highcharts={Highcharts}
           {...highchartsReactProps}
-          options={options}
+          options={aggregateOptions}
         />
       )}
     </StyledChart>