chore(chart): Update y-axis label positioning in ApexChartTimelineOpt…

…ions
GladysAssistant · Sep 4, 2024 · ead8043 · ead8043
1 parent cebce56
commit ead8043
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 35 deletions.
diff --git a/front/src/components/boxs/chart/ApexChartComponent.jsx b/front/src/components/boxs/chart/ApexChartComponent.jsx
@@ -181,7 +181,8 @@ class ApexChartComponent extends Component {
     } else if (this.props.size === 'big' && !this.props.display_axes) {
       height = 80;
     } else {
-      height = 200 + this.props.heightAdditional;
+      // 95 is the height display of the timeline chart when there is no additional height
+      height = 95 + this.props.heightAdditional;
     }
     const options = getApexChartTimelineOptions({
       height,

diff --git a/front/src/components/boxs/chart/ApexChartTimelineOptions.js b/front/src/components/boxs/chart/ApexChartTimelineOptions.js
@@ -9,17 +9,17 @@ const addYAxisStyles = () => {
       let countLineBreak = (textContent.match(/\n/g) || []).length;
       let marginDy;
       if (countLineBreak === 2) {
-        marginDy = '-1.5em';
+        marginDy = '-1.0em';
       } else if (countLineBreak === 1) {
-        marginDy = '-0.6em';
+        marginDy = '-0.4em';
       } else if (countLineBreak === 0) {
         marginDy = '0em';
       }
       text.innerHTML = '';
       lines.forEach((line, index) => {
         const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
         tspan.setAttribute('x', text.getAttribute('x'));
-        tspan.setAttribute('dy', index === 0 ? marginDy : '1.3em');
+        tspan.setAttribute('dy', index === 0 ? marginDy : '1.2em');
         tspan.setAttribute('font-size', fontSize);
         tspan.textContent = line;
         text.appendChild(tspan);
@@ -100,7 +100,7 @@ const getApexChartTimelineOptions = ({ displayAxes, height, series, colors, loca
         margin: 5,
         formatter: function(value) {
           const nbLines = 3;
-          if (value.length > 13) {
+          if (value.length > 15) {
             let [deviceName, featureName] = value.split(' (');
             if (featureName) {
               featureName = featureName.replace(')', '');
@@ -111,7 +111,7 @@ const getApexChartTimelineOptions = ({ displayAxes, height, series, colors, loca
 
             for (let i = 0; i < deviceName.length; i++) {
               currentLine += deviceName[i].replace('-', ' ').replace('_', ' ');
-              if (currentLine.length >= 13) {
+              if (currentLine.length >= 15) {
                 let lastSpaceIndex = currentLine.lastIndexOf(' ');
                 if (lastSpaceIndex > -1) {
                   result.push(currentLine.slice(0, lastSpaceIndex).trim());
@@ -157,12 +157,12 @@ const getApexChartTimelineOptions = ({ displayAxes, height, series, colors, loca
       }
     },
     tooltip: {
-      // theme: 'dark',
+      //theme: 'dark',
       marker: {
         show: true
       },
       onDatasetHover: {
-        highlightDataSeries: true
+        highlightDataSeries: false
       },
       items: {
         display: 'flex'

diff --git a/front/src/components/boxs/chart/Chart.jsx b/front/src/components/boxs/chart/Chart.jsx
@@ -117,6 +117,7 @@ class Chartbox extends Component {
   getData = async () => {
     let deviceFeatures = this.props.box.device_features;
     let deviceFeatureNames = this.props.box.device_feature_names;
+    let nbFeaturesDisplayed = deviceFeatures.length;
 
     if (!deviceFeatures) {
       // migrate all box (one device feature)
@@ -162,29 +163,32 @@ class Chartbox extends Component {
           let previousValue = null;
           let lastChangeTime = null;
           const lastValueTime = Math.round(new Date().getTime() / 1000) * 1000;
+          if (values.length === 0) {
+            nbFeaturesDisplayed = nbFeaturesDisplayed - 1;
+          } else {
+            values.forEach(value => {
+              emptySeries = false;
+              if (previousValue === null) {
+                lastChangeTime = Math.round(new Date(value.created_at).getTime() / 1000) * 1000;
+                previousValue = value.value;
+                return;
+              }
 
-          values.forEach(value => {
-            emptySeries = false;
-            if (previousValue === null) {
-              lastChangeTime = Math.round(new Date(value.created_at).getTime() / 1000) * 1000;
-              previousValue = value.value;
-              return;
-            }
-
-            if (value.value !== previousValue) {
-              const newData = {
-                x: deviceFeatureName || getDeviceName(device, deviceFeature),
-                y: [lastChangeTime, Math.round(new Date(value.created_at).getTime() / 1000) * 1000]
-              };
-              if (previousValue === 0) {
-                serie0.data.push(newData);
-              } else {
-                serie1.data.push(newData);
+              if (value.value !== previousValue) {
+                const newData = {
+                  x: deviceFeatureName || getDeviceName(device, deviceFeature),
+                  y: [lastChangeTime, Math.round(new Date(value.created_at).getTime() / 1000) * 1000]
+                };
+                if (previousValue === 0) {
+                  serie0.data.push(newData);
+                } else {
+                  serie1.data.push(newData);
+                }
+                lastChangeTime = Math.round(new Date(value.created_at).getTime() / 1000) * 1000;
+                previousValue = value.value;
               }
-              lastChangeTime = Math.round(new Date(value.created_at).getTime() / 1000) * 1000;
-              previousValue = value.value;
-            }
-          });
+            });
+          }
 
           if (previousValue !== null) {
             const newData = {
@@ -220,7 +224,8 @@ class Chartbox extends Component {
         series,
         loading: false,
         initialized: true,
-        emptySeries
+        emptySeries,
+        nbFeaturesDisplayed
       };
 
       if (data.length > 0 && this.props.box.chart_type !== 'timeline') {
@@ -292,7 +297,8 @@ class Chartbox extends Component {
       interval: this.props.box.interval ? intervalByName[this.props.box.interval] : ONE_HOUR_IN_MINUTES,
       loading: true,
       initialized: false,
-      height: 'small'
+      height: 'small',
+      nbFeaturesDisplayed: 0
     };
   }
   componentDidMount() {
@@ -333,15 +339,15 @@ class Chartbox extends Component {
       lastValueRounded,
       interval,
       emptySeries,
-      unit
+      unit,
+      nbFeaturesDisplayed
     }
   ) {
     const { box } = this.props;
     const displayVariation = box.display_variation;
-    const nbDeviceFeatures = box.device_features.length;
     let heightAdditional = 0;
-    if (props.box.chart_type === 'timeline' && nbDeviceFeatures > 1) {
-      heightAdditional = 40 * nbDeviceFeatures + 10;
+    if (props.box.chart_type === 'timeline') {
+      heightAdditional = 55 * nbFeaturesDisplayed;
     }
     return (
       <div class={cx('card', { 'loading-border': initialized && loading })}>