fix(agora): increase boxplot height and allow boxes to take up more s…

…pace as in current agora (AG-1678) (#3007)
Sage-Bionetworks · Feb 13, 2025 · 2d9db13 · 2d9db13
1 parent c0c7a92
commit 2d9db13
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/libs/agora/charts/src/lib/box-plot-chart/box-plot-chart.component.html b/libs/agora/charts/src/lib/box-plot-chart/box-plot-chart.component.html
@@ -1,5 +1,6 @@
 <div
   sageBoxplot
+  [style.height]="plotHeight"
   [points]="points"
   [summaries]="summaries"
   [title]="heading"

diff --git a/libs/agora/charts/src/lib/box-plot-chart/box-plot-chart.component.ts b/libs/agora/charts/src/lib/box-plot-chart/box-plot-chart.component.ts
@@ -44,6 +44,7 @@ export class BoxPlotComponent {
   @Input() yAxisLabel = 'LOG 2 FOLD CHANGE';
   @Input() yAxisMin: number | undefined;
   @Input() yAxisMax: number | undefined;
+  @Input() plotHeight = '480px';
 
   reset() {
     this.points = [];

diff --git a/libs/agora/genes/src/lib/components/gene-evidence-rna/gene-evidence-rna.component.html b/libs/agora/genes/src/lib/components/gene-evidence-rna/gene-evidence-rna.component.html
@@ -97,6 +97,7 @@ <h3>
               [yAxisMax]="differentialExpressionYAxisMax"
               [heading]="selectedStatisticalModel"
               [data]="differentialExpressionChartData"
+              plotHeight="520px"
             ></agora-box-plot-chart>
           </div>
         </div>

diff --git a/libs/shared/typescript/charts/src/lib/boxplot-chart/boxplot-chart.ts b/libs/shared/typescript/charts/src/lib/boxplot-chart/boxplot-chart.ts
@@ -127,6 +127,7 @@ export class BoxplotChart {
       type: 'boxplot',
       z: 1,
       itemStyle: boxplotStyle,
+      boxWidth: [7, 115],
       silent: true,
       tooltip: {
         show: false,
@@ -183,29 +184,34 @@ export class BoxplotChart {
       },
     });
 
+    const titles = [
+      // Add x-axis title as a title rather than xAxis.name, because
+      // setting via xAxis.name causes cursor to change to pointer when
+      // x-axis label tooltips are used
+      {
+        text: xAxisTitle,
+        textStyle: titleTextStyle,
+        left: 'center',
+        top: 'bottom',
+      },
+    ];
+    if (title) {
+      titles.push({
+        text: title,
+        left: 'center',
+        top: 'top',
+        textStyle: titleTextStyle,
+      });
+    }
+
     const option: EChartsOption = {
       grid: {
+        top: title ? 60 : 20,
         left: 25,
         right: 20,
         containLabel: true,
       },
-      title: [
-        {
-          text: title,
-          left: 'center',
-          top: 'top',
-          textStyle: titleTextStyle,
-        },
-        // Add x-axis title as a title rather than xAxis.name, because
-        // setting via xAxis.name causes cursor to change to pointer when
-        // x-axis label tooltips are used
-        {
-          text: xAxisTitle,
-          textStyle: titleTextStyle,
-          left: 'center',
-          top: 'bottom',
-        },
-      ],
+      title: titles,
       aria: {
         enabled: true,
       },