Merge branch '2020-08' of https://github.com/nie-ine/inseri into 2020-08

src/app/app-engine/apps/d3js/bar-chart/bar-chart.component.html

@@ -27,4 +27,13 @@
       <div class="barChartChart" id="{{ 'barChartChart_' + this.numberOfInitialisedComponent }}"></div>
     </div>
   </div>
+
+  <div class="sortBarChart"><mat-slide-toggle
+    id="{{ 'sortChart_' + this.numberOfInitialisedComponent }}"
+    [(ngModel)]="this.isSorted"
+    (change)="reDrawBarChart()"
+  >
+    Sort by value
+  </mat-slide-toggle>
+  </div>
 </div>

src/app/app-engine/apps/d3js/bar-chart/bar-chart.component.scss

@@ -36,6 +36,11 @@
   position: relative;
   overflow-x: auto;
 }
+
+.sortBarChart {
+  margin:0 0 0 30px;
+}
+
 /* tooltip */
 .barChartTooltip {
   position: fixed;

src/app/app-engine/apps/d3js/bar-chart/bar-chart.component.ts

@@ -77,6 +77,7 @@ export class BarChartComponent implements AfterViewChecked {
 
   imageWidth = 350;
   newImageWidth = 0;
+  isSorted = false;
 
   private posX: number;
   private posY: number;
@@ -150,13 +151,21 @@ export class BarChartComponent implements AfterViewChecked {
    * Initialize the components for the axis.
    */
   private initAxis() {
+
+    if (this.isSorted === true) {
+      // Sort by value
+      this.data.data.sort((a: any, b: any) => b.value - a.value);
+    }
     this.x = d3Scale.scaleBand().range([0, this.imageWidth - this.margin.left - this.margin.right])
       .paddingInner(0.1)
       .paddingOuter(0.1)
       .align(0.5);
     this.y = d3Scale.scaleLinear().rangeRound([this.height, 0]);
     this.x.domain(this.data.data.map((d) => d.label));
     this.y.domain([0, d3Array.max(this.data.data, (d) => d.value)]);
+
+    // Always sort back to initial state (by label)
+    this.data.data.sort((a: any, b: any) => a.label - b.label);
   }
 
   /**

src/app/app-engine/apps/d3js/d3js.module.ts

@@ -14,7 +14,7 @@ import { LeafletExampleComponent } from './leaflet-example/leaflet-example.compo
 import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { ChordDiagramComponent } from './chord-diagram/chord-diagram.component';
 import { SpiralBarChartComponent } from './spiral-bar-chart/spiral-bar-chart.component';
-import { MatButtonModule, MatFormFieldModule, MatInputModule, MatSliderModule } from '@angular/material';
+import {MatButtonModule, MatFormFieldModule, MatInputModule, MatSliderModule, MatSlideToggleModule} from '@angular/material';
 import { FormsModule } from '@angular/forms';
 
 @NgModule({
@@ -38,7 +38,8 @@ import { FormsModule } from '@angular/forms';
       { path: 'leaflet-example', component: LeafletExampleComponent },
       { path: 'chord', component: ChordDiagramComponent }
     ]),
-    AceEditorModule
+    AceEditorModule,
+    MatSlideToggleModule
   ],
   declarations: [
     BarChartComponent,
@@ -64,7 +65,8 @@ import { FormsModule } from '@angular/forms';
     LeafletExampleComponent,
     SankeyComponent,
     ChordDiagramComponent,
-    SpiralBarChartComponent
+    SpiralBarChartComponent,
+    MatSlideToggleModule
 ]
 })
 export class D3jsModule { }

src/app/app-engine/apps/grouped-bar-chart-v2/grouped-bar-chart-v2.component.html

@@ -39,6 +39,6 @@
   [(ngModel)]="this.isSorted"
   (change)="drawD3(this.data.data, this.newWidth)"
   >
-  Sort
+  Sort by value
   </mat-slide-toggle>
 </div>

src/app/app-engine/apps/grouped-bar-chart-v2/grouped-bar-chart-v2.component.ts

@@ -59,8 +59,6 @@ export class GroupedBarChartV2Component implements AfterViewChecked {
     // getting all the key names for the legend
     const keys = Object.keys(data[0]).slice(1);
 
-    console.log(this.isSorted);
-    console.log(data);
     if (this.isSorted === true) {
       data = data.map(v => {
         v.total = keys.map(key => v[key]).reduce((a, b) => a + b, 0);
@@ -123,6 +121,14 @@ export class GroupedBarChartV2Component implements AfterViewChecked {
       .paddingOuter(0.5)
       .align(0.5);
 
+    // Always sort data back by label
+    data.sort((a: any, b: any) => a.label - b.label);
+    console.log(data);
+    // ...and remove the 'total' key
+    data.map((d) => {
+      delete d.total;
+    });
+
     // scale for the bars per above given group (spacing each group's bars)
     const x1 = d3Scale.scaleBand()
       .domain(keys)
@@ -264,10 +270,6 @@ export class GroupedBarChartV2Component implements AfterViewChecked {
         return d;
       });
 
-    data = data.map(t => {
-      delete t.total;
-    });
-
     let filtered = [];
 
     function update(d) {