Chart: Dynamically adjust height based on number of features (#2117)

GladysAssistant · Oct 9, 2024 · e0e2d37 · e0e2d37
1 parent 7b512fb
commit e0e2d37
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/front/src/components/boxs/chart/ApexChartComponent.jsx b/front/src/components/boxs/chart/ApexChartComponent.jsx
@@ -120,7 +120,7 @@ class ApexChartComponent extends Component {
     } else if (this.props.size === 'big' && !this.props.display_axes) {
       height = 80;
     } else {
-      height = 200;
+      height = 200 + this.props.additionalHeight;
     }
     const options = getApexChartAreaOptions({
       height,
@@ -141,7 +141,7 @@ class ApexChartComponent extends Component {
     } else if (this.props.size === 'big' && !this.props.display_axes) {
       height = 80;
     } else {
-      height = 200;
+      height = 200 + this.props.additionalHeight;
     }
     const options = getApexChartLineOptions({
       height,
@@ -161,7 +161,7 @@ class ApexChartComponent extends Component {
     } else if (this.props.size === 'big' && !this.props.display_axes) {
       height = 80;
     } else {
-      height = 200;
+      height = 200 + this.props.additionalHeight;
     }
     const options = getApexChartStepLineOptions({
       height,

diff --git a/front/src/components/boxs/chart/Chart.jsx b/front/src/components/boxs/chart/Chart.jsx
@@ -330,15 +330,15 @@ class Chartbox extends Component {
   ) {
     const { box } = this.props;
     const displayVariation = box.display_variation;
-    let additionalHeight = 0;
+    let additionalHeight = 30 * (nbFeaturesDisplayed - 1);
     if (props.box.chart_type === 'timeline') {
       additionalHeight = 55 * nbFeaturesDisplayed;
     }
     return (
       <div class={cx('card', { 'loading-border': initialized && loading })}>
         <div class="card-body">
           <div class="d-flex align-items-center">
-            <div class={cx(style.subheader)}>{props.box.title}</div>
+            <div class={cx(style.subheader)}>{box.title}</div>
             <div class={cx(style.msAuto, style.lh1)}>
               {props.box.chart_type && (
                 <div class="dropdown">