♻️ create standalone components for discs

src/app/discs-chart/disc-legend.component.html

@@ -0,0 +1 @@
+<div [id]="divId"></div>

src/app/discs-chart/disc-legend.component.ts

@@ -0,0 +1,65 @@
+import {AfterViewInit, Component, Input, OnInit} from '@angular/core';
+
+import {select} from 'd3';
+
+import {SdmDihService} from '../sdm-dih.service';
+
+@Component({
+  selector: 'disc-legend',
+  templateUrl: './disc-legend.component.html',
+})
+export class DiscLegendComponent implements OnInit, AfterViewInit {
+  @Input() region = 'all';
+  @Input() scenario = 'baseline';
+  divId = 'graph-legend-place';
+
+  constructor(public sdmDihService: SdmDihService) {}
+
+  ngOnInit(): void {
+    this.divId = `graph-legend-place-${this.region.replace(
+      ' ',
+      '_'
+    )}-${this.scenario.replace(' ', '_')}`;
+  }
+
+  ngAfterViewInit(): void {
+    this.sdmDihService.dataLoads.subscribe((loaded) => {
+      if (!loaded) {
+        return;
+      }
+      this.drawLegend();
+    });
+  }
+
+  drawLegend(): void {
+    //select(`#graph-legend-place`).remove();
+    const width = 200;
+    const height = 20;
+    const g = select(`#${this.divId}`)
+      .append('svg')
+      .attr('width', width)
+      .attr('height', height)
+      .attr('viewBox', [0, 0, width, height])
+      .style('overflow', 'visible')
+      .style('display', 'block')
+      .append('g');
+    for (let i = 0; i < 10; i++) {
+      g.append('rect')
+        .attr('x', i * 20)
+        .attr('y', 0)
+        .attr('width', width / 10)
+        .attr('height', height / 2)
+        .attr('fill', this.sdmDihService.perc2color(i / 10));
+    }
+    g.append('text')
+      .attr('x', 0 - 10)
+      .attr('y', 20)
+      .attr('dy', '.5em')
+      .text('0 %');
+    g.append('text')
+      .attr('x', 200 - 10)
+      .attr('y', 20)
+      .attr('dy', '.5em')
+      .text('100 %');
+  }
+}

src/app/discs-chart/disc.component.html

@@ -0,0 +1 @@
+<div [id]="divId"></div>

src/app/discs-chart/disc.component.ts

@@ -0,0 +1,184 @@
+import {AfterViewInit, Component, Input, OnInit} from '@angular/core';
+
+import {select} from 'd3';
+
+import {SdmDihService} from '../sdm-dih.service';
+import {YearGraphService} from './year-graph.service';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'disc',
+  templateUrl: 'disc.component.html',
+})
+export class DiscComponent implements OnInit, AfterViewInit {
+  @Input() domain = 'baseline'; //TODO: useless? scenario is unique and contains domain per se
+  @Input() factor = 'aggregated';
+  @Input() region: string;
+  @Input() scenario = 'baseline';
+  @Input() show: 'name' | 'factor' = 'name';
+  divId = 'graph-place';
+  private arrowUse;
+  private regionData;
+  private svgContent;
+  private svgContentText;
+
+  constructor(
+    public sdmDihService: SdmDihService,
+    public yearGraphService: YearGraphService
+  ) {}
+
+  ngOnInit(): void {
+    const regionSafeName = this.region.replace(' ', '_');
+    const scenarioSafeName = this.scenario.replace(' ', '_');
+    const factorSafeName = this.factor.split('/').slice(-1).pop();
+    const nonce = Math.round(Math.random() * 10000) + '';
+    this.divId = `graph-place-${regionSafeName}-${scenarioSafeName}-${factorSafeName}-${nonce}`;
+  }
+
+  ngAfterViewInit(): void {
+    this.sdmDihService.dataLoads.subscribe((loaded) => {
+      if (!loaded) {
+        return;
+      }
+      this.drawGraph();
+    });
+    this.yearGraphService.graphRefreshes.subscribe(() => {
+      this.updateGraph();
+    });
+  }
+
+  drawGraph(): void {
+    const year = this.yearGraphService.selectedYear.toString().includes('.')
+      ? this.yearGraphService.selectedYear
+      : this.yearGraphService.selectedYear + '.0';
+    this.regionData = this.sdmDihService.sdmData[year].find(
+      (row) => row['MODEL'] === this.region && row['SCENARIO'] === this.scenario
+    );
+    /* When the parent element has position "flex", this can be set to 100% */
+    const width = 100; // / this.sdmDihService.regions.length;
+    const height = 100; // / this.sdmDihService.regions.length;
+    /* append the svg object to the div called 'graph-place-...' */
+    const svg = select(`#${this.divId}`)
+      .append('svg')
+      .attr('width', `${width}%`)
+      .attr('height', `${height}%`)
+      .append('svg')
+      .attr('x', '50%')
+      .attr('y', '50%')
+      .attr('overflow', 'visible');
+    // arrow symbol for later re-use
+    const arrow = svg.append('symbol').attr('id', 'arrow');
+    // horizontal line
+    arrow
+      .append('line')
+      .attr('x1', 0)
+      .attr('y1', 30)
+      .attr('x2', 60)
+      .attr('y2', 30)
+      .attr('stroke', 'black')
+      .style('stroke-width', 4);
+    // upper line
+    arrow
+      .append('line')
+      .attr('x1', 40)
+      .attr('y1', 10)
+      .attr('x2', 60)
+      .attr('y2', 30)
+      .attr('stroke', 'black')
+      .style('stroke-width', 4);
+    // bottom line
+    arrow
+      .append('line')
+      .attr('x1', 40)
+      .attr('y1', 50)
+      .attr('x2', 60)
+      .attr('y2', 30)
+      .attr('stroke', 'black')
+      .style('stroke-width', 4);
+    this.svgContent = svg.append('g');
+    this.svgContent.data(() => [this.regionData]);
+    //.attr('transform', 'translate(' + width / 2 + '% ,' + height / 2 + '% )');
+    this.svgContent
+      .append('circle')
+      .attr('cx', 0)
+      .attr('cy', 0)
+      .attr('r', 50)
+      .attr('stroke', 'black')
+      .attr('fill', (d) => {
+        return this.sdmDihService.perc2color(
+          d[this.factor]?.index ?? d[this.factor]
+        );
+      });
+    this.svgContent
+      .append('text')
+      .attr('x', 0)
+      .attr('y', -60)
+      .attr('dy', '.35em')
+      .text((d) =>
+        this.show == 'name'
+          ? d['MODEL']
+          : this.factor.split('/').slice(-1).pop()
+      )
+      .style('text-anchor', 'middle');
+    this.svgContentText = this.svgContent.append('text');
+    this.svgContentText
+      .attr('x', 0)
+      .attr('y', 60)
+      .attr('dy', '.35em')
+      .text(
+        (d) =>
+          `${(
+            Number.parseFloat(d[this.factor]?.index ?? d[this.factor]) * 100
+          ).toFixed(2)} %`
+      )
+      .style('text-anchor', 'middle');
+    this.arrowUse = this.svgContent
+      .append('use')
+      .attr('xlink:href', '#arrow')
+      .attr('x', -30)
+      .attr('y', -30)
+      .attr(
+        'transform',
+        // rotation is defined clockwise, hence -45 deg will turn the arrow up
+        (d) =>
+          `rotate(${
+            -45 *
+            this.yearGraphService.getRegionProgress(d, {factor: this.factor})
+          }, 0, 0)`
+      );
+  }
+
+  updateGraph(): void {
+    const year = this.yearGraphService.selectedYear.toString().includes('.')
+      ? this.yearGraphService.selectedYear
+      : this.yearGraphService.selectedYear + '.0';
+    this.regionData = this.sdmDihService.sdmData[year].find(
+      (row) => row['MODEL'] === this.region && row['SCENARIO'] === this.scenario
+    );
+    this.svgContent
+      .data(() => [this.regionData])
+      .select('circle')
+      .attr('fill', (d) => {
+        return this.sdmDihService.perc2color(
+          d[this.factor]?.index ?? d[this.factor]
+        );
+      });
+    this.svgContentText
+      .data([this.regionData])
+      .text(
+        (d) =>
+          `${(
+            Number.parseFloat(d[this.factor]?.index ?? d[this.factor]) * 100
+          ).toFixed(2)} %`
+      );
+    this.arrowUse.data([this.regionData]).attr(
+      'transform',
+      // rotation is defined clockwise, hence -45 deg will turn the arrow up
+      (d) =>
+        `rotate(${
+          -45 *
+          this.yearGraphService.getRegionProgress(d, {factor: this.factor})
+        }, 0, 0)`
+    );
+  }
+}

src/app/discs-chart/discs.module.ts

@@ -2,14 +2,33 @@ import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {NgModule} from '@angular/core';
 
+import {DiscComponent} from './disc.component';
+import {DiscLegendComponent} from './disc-legend.component';
 import {FactorYearGraphComponent} from './factor-year-graph/factor-year-graph.component';
 import {QuarterPipe} from './quarter.pipe';
+//import {ScenarioFactorYearGraphComponent} from './scenario-factor-year-graph/scenario-factor-year-graph.component';
+//import {ScenarioYearGraphComponent} from './scenario-year-graph/scenario-year-graph.component';
 import {YearGraphComponent} from './year-graph/year-graph.component';
 
 @NgModule({
   imports: [CommonModule, FormsModule],
-  exports: [FactorYearGraphComponent, YearGraphComponent],
-  declarations: [FactorYearGraphComponent, YearGraphComponent, QuarterPipe],
+  exports: [
+    DiscComponent,
+    DiscLegendComponent,
+    FactorYearGraphComponent,
+    YearGraphComponent,
+    //ScenarioFactorYearGraphComponent,
+    //ScenarioYearGraphComponent,
+  ],
+  declarations: [
+    DiscComponent,
+    DiscLegendComponent,
+    FactorYearGraphComponent,
+    YearGraphComponent,
+    //ScenarioFactorYearGraphComponent,
+    //ScenarioYearGraphComponent,
+    QuarterPipe,
+  ],
   providers: [],
 })
 export class DiscsModule {}

src/app/discs-chart/factor-year-graph/factor-year-graph.component.html

@@ -8,7 +8,11 @@
   >
     <option [ngValue]="year" *ngFor="let year of years">{{ year }}</option>
   </select-->
+  <div class="d-flex">
+    <div *ngFor="let factor of factors">
+      <disc [region]="region" [factor]="factor" [show]="'factor'"></disc>
+    </div>
+  </div>
+  <disc-legend [region]="region"></disc-legend>
 </div>
 <ng-template #loading> Loading data... </ng-template>
-<div id="year-graph-place-{{region.replace(' ', '-')}}"></div>
-<div id="year-graph-legend-place-{{region.replace(' ', '-')}}"></div>

src/app/discs-chart/factor-year-graph/factor-year-graph.component.scss

@@ -0,0 +1 @@
+@use "../year-graph/year-graph.component.scss";

src/app/discs-chart/factor-year-graph/factor-year-graph.component.ts

@@ -29,161 +29,7 @@ export class FactorYearGraphComponent implements OnInit {
       if (!loaded) {
         return;
       }
-      this.redrawGraphs();
-      this.drawLegend();
-      console.log('data loads true');
+      //TODO: fill in factors here dynamically?
     });
-    this.yearGraphService.graphRefreshes.subscribe(() => {
-      this.redrawGraphs();
-      this.drawLegend();
-    });
-  }
-
-  drawGraph(
-    region: string,
-    {factor}: {factor?: string} = {factor: 'aggregated'}
-  ) {
-    const year = this.yearGraphService.selectedYear.toString().includes('.')
-      ? this.yearGraphService.selectedYear
-      : this.yearGraphService.selectedYear + '.0';
-    const regionData = this.sdmDihService.sdmData[year].find(
-      (row) => row['MODEL'] === region
-    );
-    const width = 100 / this.sdmDihService.regions.length;
-    const height = 100 / this.sdmDihService.regions.length;
-    // append the svg object to the div called 'year-graph-place-Apulia' or alike
-    const svg = select(`#year-graph-place-${region.replace(' ', '-')}`)
-      .append('svg')
-      .attr('width', `${width}%`)
-      .attr('height', `${height}%`)
-      .append('svg')
-      .attr('x', '50%')
-      .attr('y', '50%')
-      .attr('overflow', 'visible');
-    // arrow symbol for later re-use
-    const arrow = svg.append('symbol').attr('id', 'arrow');
-    // horizontal line
-    arrow
-      .append('line')
-      .attr('x1', 0)
-      .attr('y1', 30)
-      .attr('x2', 60)
-      .attr('y2', 30)
-      .attr('stroke', 'black')
-      .style('stroke-width', 4);
-    // upper line
-    arrow
-      .append('line')
-      .attr('x1', 40)
-      .attr('y1', 10)
-      .attr('x2', 60)
-      .attr('y2', 30)
-      .attr('stroke', 'black')
-      .style('stroke-width', 4);
-    // bottom line
-    arrow
-      .append('line')
-      .attr('x1', 40)
-      .attr('y1', 50)
-      .attr('x2', 60)
-      .attr('y2', 30)
-      .attr('stroke', 'black')
-      .style('stroke-width', 4);
-    const svgContent = svg.append('g').data([regionData]);
-    //.attr('transform', 'translate(' + width / 2 + '% ,' + height / 2 + '% )');
-    svgContent
-      .append('circle')
-      .attr('cx', 0)
-      .attr('cy', 0)
-      .attr('r', 50)
-      .attr('stroke', 'black')
-      .attr('fill', (d) => {
-        return this.sdmDihService.perc2color(d[factor]?.index ?? d[factor]);
-      });
-    svgContent
-      .append('text')
-      .attr('x', 0)
-      .attr('y', -60)
-      .attr('dy', '.35em')
-      .text((d) => factor.split('/').pop())
-      .style('text-anchor', 'middle');
-    svgContent
-      .append('text')
-      .attr('x', 0)
-      .attr('y', 60)
-      .attr('dy', '.35em')
-      .text(
-        (d) =>
-          `${(Number.parseFloat(d[factor]?.index ?? d[factor]) * 100).toFixed(
-            2
-          )} %`
-      )
-      .style('text-anchor', 'middle');
-    svgContent
-      .append('use')
-      .attr('xlink:href', '#arrow')
-      .attr('x', -30)
-      .attr('y', -30)
-      .attr(
-        'transform',
-        // rotation is defined clockwise, hence -45 deg will turn the arrow up
-        (d) =>
-          `rotate(${
-            -45 * this.yearGraphService.getRegionProgress(d, {factor})
-          }, 0, 0)`
-      );
-    console.log(
-      'drawing finished'
-      //select(`#year-graph-place-${region.replace(' ', '-')}`)
-    );
-  }
-
-  drawLegend() {
-    select(
-      `#year-graph-legend-place-${this.region.replace(' ', '-')}`
-    ).remove();
-    const width = 200;
-    const height = 20;
-    const g = select(
-      `#year-graph-legend-place-${this.region.replace(' ', '-')}`
-    )
-      .append('svg')
-      .attr('width', width)
-      .attr('height', height)
-      .attr('viewBox', [0, 0, width, height])
-      .style('overflow', 'visible')
-      .style('display', 'block')
-      .append('g');
-    for (let i = 0; i < 10; i++) {
-      g.append('rect')
-        .attr('x', i * 20)
-        .attr('y', 0)
-        .attr('width', width / 10)
-        .attr('height', height / 2)
-        .attr('fill', this.sdmDihService.perc2color(i / 10));
-    }
-    g.append('text')
-      .attr('x', 0 - 10)
-      .attr('y', 20)
-      .attr('dy', '.5em')
-      .text('0 %');
-    g.append('text')
-      .attr('x', 200 - 10)
-      .attr('y', 20)
-      .attr('dy', '.5em')
-      .text('100 %');
-  }
-
-  redrawGraphs() {
-    const width = 200;
-    const height = 200;
-    select(`#year-graph-place-${this.region.replace(' ', '-')}`)
-      .selectAll('svg')
-      ?.remove();
-    for (const factor of this.factors) {
-      this.drawGraph(this.region, {
-        factor: factor,
-      });
-    }
   }
 }

src/app/discs-chart/year-graph/year-graph.component.html

@@ -28,5 +28,9 @@
   </select-->
 </div>
 <ng-template #loading> Loading data... </ng-template>
-<div id="year-graph-place"></div>
-<div id="year-graph-legend-place"></div>
+<div class="d-flex">
+  <div *ngFor="let region of sdmDihService.regions">
+    <disc [region]="region"></disc>
+  </div>
+</div>
+<disc-legend></disc-legend>

src/app/discs-chart/year-graph/year-graph.component.scss

@@ -15,3 +15,7 @@
 .form-range {
   max-width: 20rem;
 }
+
+.d-flex {
+  display: flex;
+}

src/app/discs-chart/year-graph/year-graph.component.ts

@@ -1,5 +1,4 @@
-import {Component, OnInit} from '@angular/core';
-import {interpolate, quantize, select} from 'd3';
+import {Component} from '@angular/core';
 
 import {SdmDihService} from '../../sdm-dih.service';
 import {YearGraphService} from '../year-graph.service';
@@ -9,26 +8,12 @@ import {YearGraphService} from '../year-graph.service';
   templateUrl: './year-graph.component.html',
   styleUrls: ['./year-graph.component.scss'],
 })
-export class YearGraphComponent implements OnInit {
+export class YearGraphComponent {
   constructor(
     public sdmDihService: SdmDihService,
     public yearGraphService: YearGraphService
   ) {}
 
-  ngOnInit() {
-    this.sdmDihService.dataLoads.subscribe((loaded) => {
-      if (!loaded) {
-        return;
-      }
-      this.redrawGraphs();
-      this.drawLegend();
-    });
-    this.yearGraphService.graphRefreshes.subscribe(() => {
-      this.redrawGraphs();
-      this.drawLegend();
-    });
-  }
-
   animateGraphs() {
     const MILLISECONDS_TO_ANIMATE = 100 as const;
     let i = 1;
@@ -41,123 +26,6 @@ export class YearGraphComponent implements OnInit {
     }
   }
 
-  drawGraph(region: string) {
-    const year = this.yearGraphService.selectedYear.toString().includes('.')
-      ? this.yearGraphService.selectedYear
-      : this.yearGraphService.selectedYear + '.0';
-    const regionData = this.sdmDihService.sdmData[year].find(
-      (row) => row['MODEL'] === region
-    );
-    const width = 100 / this.sdmDihService.regions.length;
-    const height = 100 / this.sdmDihService.regions.length;
-    // append the svg object to the div called 'year-graph-place'
-    const svg = select('#year-graph-place')
-      .append('svg')
-      .attr('width', `${width}%`)
-      .attr('height', `${height}%`)
-      .append('svg')
-      .attr('x', '50%')
-      .attr('y', '50%')
-      .attr('overflow', 'visible');
-    // arrow symbol for later re-use
-    const arrow = svg.append('symbol').attr('id', 'arrow');
-    // horizontal line
-    arrow
-      .append('line')
-      .attr('x1', 0)
-      .attr('y1', 30)
-      .attr('x2', 60)
-      .attr('y2', 30)
-      .attr('stroke', 'black')
-      .style('stroke-width', 4);
-    // upper line
-    arrow
-      .append('line')
-      .attr('x1', 40)
-      .attr('y1', 10)
-      .attr('x2', 60)
-      .attr('y2', 30)
-      .attr('stroke', 'black')
-      .style('stroke-width', 4);
-    // bottom line
-    arrow
-      .append('line')
-      .attr('x1', 40)
-      .attr('y1', 50)
-      .attr('x2', 60)
-      .attr('y2', 30)
-      .attr('stroke', 'black')
-      .style('stroke-width', 4);
-    const svgContent = svg.append('g').data([regionData]);
-    //.attr('transform', 'translate(' + width / 2 + '% ,' + height / 2 + '% )');
-    svgContent
-      .append('circle')
-      .attr('cx', 0)
-      .attr('cy', 0)
-      .attr('r', 50)
-      .attr('stroke', 'black')
-      .attr('fill', (d) => {
-        return this.sdmDihService.perc2color(d['aggregated']);
-      });
-    svgContent
-      .append('text')
-      .attr('x', 0)
-      .attr('y', -60)
-      .attr('dy', '.35em')
-      .text((d) => d['MODEL'])
-      .style('text-anchor', 'middle');
-    svgContent
-      .append('text')
-      .attr('x', 0)
-      .attr('y', 60)
-      .attr('dy', '.35em')
-      .text((d) => `${(Number.parseFloat(d['aggregated']) * 100).toFixed(2)} %`)
-      .style('text-anchor', 'middle');
-    svgContent
-      .append('use')
-      .attr('xlink:href', '#arrow')
-      .attr('x', -30)
-      .attr('y', -30)
-      .attr(
-        'transform',
-        // rotation is defined clockwise, hence -45 deg will turn the arrow up
-        (d) =>
-          `rotate(${-45 * this.yearGraphService.getRegionProgress(d)}, 0, 0)`
-      );
-  }
-
-  drawLegend() {
-    select(`#year-graph-legend-place`).remove();
-    const width = 200;
-    const height = 20;
-    const g = select('#year-graph-legend-place')
-      .append('svg')
-      .attr('width', width)
-      .attr('height', height)
-      .attr('viewBox', [0, 0, width, height])
-      .style('overflow', 'visible')
-      .style('display', 'block')
-      .append('g');
-    for (let i = 0; i < 10; i++) {
-      g.append('rect')
-        .attr('x', i * 20)
-        .attr('y', 0)
-        .attr('width', width / 10)
-        .attr('height', height / 2)
-        .attr('fill', this.sdmDihService.perc2color(i / 10));
-    }
-    g.append('text')
-      .attr('x', 0 - 10)
-      .attr('y', 20)
-      .attr('dy', '.5em')
-      .text('0 %');
-    g.append('text')
-      .attr('x', 200 - 10)
-      .attr('y', 20)
-      .attr('dy', '.5em')
-      .text('100 %');
-  }
-
   nextYear() {
     const selectedYearIndex = this.sdmDihService.years.findIndex(
       (val) => val == this.yearGraphService.selectedYear
@@ -177,17 +45,4 @@ export class YearGraphComponent implements OnInit {
       this.yearGraphService.selectedYear;
     this.yearGraphService.redrawGraphs();
   }
-
-  redrawGraphs() {
-    // Data not loaded yet
-    if (!this.sdmDihService.sdmData) {
-      return;
-    }
-    const width = 200;
-    const height = 200;
-    select('#year-graph-place').selectAll('svg')?.remove();
-    for (const region of this.sdmDihService.regions) {
-      this.drawGraph(region);
-    }
-  }
 }

src/app/sdm-dih.service.ts

@@ -13,6 +13,7 @@ export class SdmDihService {
   firstYear: string;
   lastYear: string;
   regions = [];
+  scenarios = [];
   years = [];
   yearsLoaded = false;
   dataLoads: BehaviorSubject<boolean> = new BehaviorSubject(false);
@@ -31,6 +32,12 @@ export class SdmDihService {
           ),
         ];
         console.log(this.regions);
+        this.scenarios = [
+          ...new Set(
+            this.sdmData[this.firstYear].map((yearData) => yearData['SCENARIO'])
+          ),
+        ];
+        console.log(this.scenarios);
         this.dataLoads.next(true);
       })
       .catch((err) => {
@@ -42,7 +49,12 @@ export class SdmDihService {
     let weightedSum = 0;
     let sumWeight = 0;
     for (const key of Object.keys(regionData) as any) {
-      if (key === 'MODEL' || key === 'TIME_STEP') {
+      if (
+        key === 'MODEL' ||
+        key === 'DOMAIN' ||
+        key === 'SCENARIO' ||
+        key === 'TIME_STEP'
+      ) {
         continue;
       }
       const factorValues = regionData[key];
@@ -109,8 +121,8 @@ export class SdmDihService {
     const regionData = {};
     for (const dataset of Object.keys(inputRegionData)) {
       const datasetValue = inputRegionData[dataset];
-      if (['MODEL', 'TIME_STEP'].includes(dataset)) {
-        // just copy the MODEL and TIME_STEP
+      if (['MODEL', 'DOMAIN', 'SCENARIO', 'TIME_STEP'].includes(dataset)) {
+        // just copy the MODEL, DOMAIN, SCENARIO and TIME_STEP
         regionData[dataset] = datasetValue;
         continue;
       }
@@ -131,10 +143,18 @@ export class SdmDihService {
       });
     }
     for (const key of Object.keys(regionData)) {
-      if (key === 'MODEL' || key === 'TIME_STEP') {
+      if (
+        key === 'MODEL' ||
+        key === 'DOMAIN' ||
+        key === 'SCENARIO' ||
+        key === 'TIME_STEP'
+      ) {
         continue;
       }
       const values = regionData[key];
+      if (values === undefined || values.datasets === undefined) {
+        console.warn('no data for', values, regionData, key);
+      }
       const index = this.calcFactorIndex(values);
       values['index'] = index;
     }