Merge 730055a into 20b2ee7

src/app/features/charts/components/score-chart/score-chart.component.html

@@ -4,8 +4,9 @@ <h4 *ngIf="heading" class="chart-heading">{{ heading }}</h4>
     <div class="chart-body">
       <div #chartContainer class="chart-container"></div>
     </div>
-    <div class="chart-no-data" *ngIf="!_score">
+    <div class="chart-no-data" *ngIf="_score === null">
       <div class="chart-no-data-text">No data is currently available.</div>
     </div>
+    <div>score:{{_score }}</div>
   </div>
 </div>

src/app/features/charts/components/score-chart/score-chart.component.spec.ts

@@ -39,7 +39,7 @@ describe('Component: Chart - Score', () => {
   });
 
   it('should display message if not data', () => {
-    expect(component.score).toEqual(0);
+    expect(component.score).toEqual(null);
     expect(element.querySelector('.chart-no-data')).toBeTruthy();
   });
 

src/app/features/charts/components/score-chart/score-chart.component.ts

@@ -21,11 +21,11 @@ import { HelperService } from '../../../../core/services';
   styleUrls: ['./score-chart.component.scss'],
 })
 export class ScoreChartComponent extends BaseChartComponent {
-  _score = 0;
-  get score(): number {
+  _score: number | null = null;
+  get score(): number | null {
     return this._score;
   }
-  @Input() set score(score: number) {
+  @Input() set score(score: number | null) {
     this._score = score;
     this.init();
   }
@@ -39,7 +39,7 @@ export class ScoreChartComponent extends BaseChartComponent {
   override name = 'score-chart';
   dimension: any;
   group: any;
-  scoreIndex = 0;
+  scoreIndex = -1;
   break: any = {};
 
   constructor(private helperService: HelperService) {
@@ -48,7 +48,6 @@ export class ScoreChartComponent extends BaseChartComponent {
 
   override init() {
     if (
-      !this._score ||
       !this.distribution?.length ||
       !this.chartContainer?.nativeElement
     ) {
@@ -65,21 +64,23 @@ export class ScoreChartComponent extends BaseChartComponent {
 
   initData() {
     this.distribution.forEach((item: any, i: number) => {
-      if (this._score >= item.range[0] && this._score < item.range[1]) {
-        this.scoreIndex = i;
-      }
+      if (this._score !== null) {   
+        if (this._score >= item.range[0] && this._score < item.range[1]) {
+          this.scoreIndex = i;
+        }
 
-      // Introduce a y-axis break if this bar is huge relative to other bars
-      const minDiff = this.getMinDiff(item.value, this.distribution);
-      if (minDiff > 2000) {
-        this.break = {
-          index: i,
-          upper: Math.floor(item.value / 1000) * 1000,
-          lower: Math.ceil((item.value - minDiff) / 1000) * 1000 + 1000,
-        };
-
-        this.distribution[i].truncated =
-          this.break.lower + (item.value - this.break.upper);
+        // Introduce a y-axis break if this bar is huge relative to other bars
+        const minDiff = this.getMinDiff(item.value, this.distribution);
+        if (minDiff > 2000) {
+          this.break = {
+            index: i,
+            upper: Math.floor(item.value / 1000) * 1000,
+            lower: Math.ceil((item.value - minDiff) / 1000) * 1000 + 1000,
+          };
+
+          this.distribution[i].truncated =
+            this.break.lower + (item.value - this.break.upper);
+        }
       }
     });
 
@@ -119,10 +120,12 @@ export class ScoreChartComponent extends BaseChartComponent {
       .xAxis()
       .ticks(2)
       .tickFormat(d3.format('d'));
-
+      
     // Y axis
     this.chart
-      .y(d3.scaleLinear().domain([0, this.group.top(1)[0].value]))
+      .y(d3.scaleLinear()
+        .domain([0, this.group.top(1)[0].value])
+      )
       .yAxisLabel(this.yAxisLabel)
       .yAxis()
       .ticks(yTickCount)
@@ -161,9 +164,11 @@ export class ScoreChartComponent extends BaseChartComponent {
             .attr('x', barBox.x)
             .attr('y', barBox.y - 6)
             .attr('font-size', '12px')
-            .attr('fill', this.barColor)
-            .text(this.helperService.roundNumber(this._score, 2));
-
+            .attr('fill', this.barColor);
+
+          if (this._score !== null)
+            label.text(this.helperService.roundNumber(this._score, 2));
+
           const labelBox = label.node().getBBox();
           const widthDiff = labelBox.width - barBox.width;
           label.attr(

src/app/features/genes/components/gene-soe-charts/gene-soe-charts.component.scss

@@ -52,12 +52,12 @@
     margin: 0;
   }
 
-  .score-chart {
-    min-width: 320px;
-  }
-
-  .chart-body {
-    padding-top: 15px;
-    padding-bottom: 15px;
-  }
+  // .score-chart {
+  //   min-width: 320px;
+  // }
+
+  // .chart-body {
+  //   padding-top: 15px;
+  //   padding-bottom: 15px;
+  // }
 }

src/app/features/genes/components/gene-soe-charts/gene-soe-charts.component.ts

@@ -105,13 +105,13 @@ export class GeneSoeChartsComponent implements OnInit {
       this._gene?.overall_scores || ({} as OverallScores);
 
     if ('Genetic Risk Score' === name) {
-      return scores['genetics_score'] || 0;
+      return scores['genetics_score'];
     } else if ('Multi-omic Risk Score' === name) {
-      return scores['multi_omics_score'] || 0;
+      return scores['multi_omics_score'];
     } else if ('Literature Score' === name) {
-      return scores['literature_score'] || 0;
+      return scores['literature_score'];
     } else if ('Target Risk Score' === name) {
-      return scores['target_risk_score'] || 0;
+      return scores['target_risk_score'];
     }
 
     return 0;