Select Git revision
our-spider-chart.component.ts
-
zdenko.vuk@ijs.si authored
parent 5c598641 author zdenevuk <zdenko.vuk@ijs.si> 1669368055 +0100 committer zdenevuk <zdenko.vuk@ijs.si> 1669388562 +0100 This is a combination of 4 commits. Updates on geojson buttons, spider chart max increased from 4 to 5, css fixes. WIP WIP 2 WIP 3 WIP 4 updates on load geojson buttons, style, maximum value for spider chart increased from 4 to 5. improved button disabling fixed rounding issue updated messina location increased button size buton label and value are now not the same fixed newly generated bug, buttons now work again changed messina zoom lat lgn
zdenko.vuk@ijs.si authoredparent 5c598641 author zdenevuk <zdenko.vuk@ijs.si> 1669368055 +0100 committer zdenevuk <zdenko.vuk@ijs.si> 1669388562 +0100 This is a combination of 4 commits. Updates on geojson buttons, spider chart max increased from 4 to 5, css fixes. WIP WIP 2 WIP 3 WIP 4 updates on load geojson buttons, style, maximum value for spider chart increased from 4 to 5. improved button disabling fixed rounding issue updated messina location increased button size buton label and value are now not the same fixed newly generated bug, buttons now work again changed messina zoom lat lgn
our-spider-chart.component.ts 7.43 KiB
import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
import { SimulationService } from "../utils/services/simulation.service";
import { NbToastrService } from "@nebular/theme";
import { Simulation } from "../utils/data/simulation";
@Component({
selector: "ngx-our-spider-chart",
templateUrl: "./our-spider-chart.component.html",
styleUrls: ["./our-spider-chart.component.scss"],
})
export class OurSpiderChartComponent implements OnChanges {
chartjsOptions: any;
chartjsData: {};
responseFromApi = {};
allKpis: { label: string; isChecked: boolean }[] = [];
checkedKpis: boolean[] = [];
@Input() selectedSimulation: Simulation;
colorA: string = "rgb(255, 99, 132)";
colorB: string = "rgb(75, 192, 192)";
colorA_reducedOpacity: string = "rgba(255, 99, 132, 0.2)";
colorB_reducedOpacity: string = "rgba(75, 192, 192, 0.2)";
entries: string[][] = [];
errorMsg: string = undefined;
allDeselected: boolean = false;
constructor(
private simulationService: SimulationService,
private toastrService: NbToastrService
) {
this.chartjsOptions = {
responsive: true,
maintainAspectRatio: false,
scaleFontColor: "#fff",
legend: {
labels: {
fontColor: "#000",
},
},
elements: {
line: {
borderWidth: 3,
},
},
scale: {
pointLabels: {
fontSize: 12,
fontColor: "#262626",
},
ticks: {
beginAtZero: true,
max: 5,
min: 0,
stepSize: 1,
},
},
};
}
ngOnChanges(changes: SimpleChanges) {
if (changes.selectedSimulation.currentValue) this.loadDataFromApi();
}
loadDataFromApi() {
this.simulationService
.postEvaluated([this.selectedSimulation["id"]])
.subscribe({
next: (data) => {
this.toastrService.show(
"Evaluated.json for spider chart successfully loaded.",
"Loaded",
{ status: "success" }
);
this.errorMsg = undefined;
this.responseFromApi = data;
let tmpDatasets = [];
let tmpLabels = [];
let values_A = [];
let values_B = [];
const rootKeys = Object.keys(this.responseFromApi);
const l = this.responseFromApi[rootKeys[0]];
const m = Object.keys(l);
for (let j = 0; j < m.length; j++) {
let entries = Object.entries(l[m[j]]);
entries.forEach((entry) => {
if (tmpLabels.indexOf(entry[0]) === -1) tmpLabels.push(entry[0]);
this.allKpis.push({
label: entry[0],
isChecked: true,
});
for (let i = 0; i < tmpLabels.length; i++) {
if (tmpLabels[i] == entry[0]) {
if (/^[0-5]$/.test(entry[1] as string)) {
if (j == 0) {
values_A.push(entry[1] as string);
} else if (j == 1) {
values_B.push(entry[1] as string);
}
} else {
console.log("🚀☢ Setting 0 for ", entry[0]);
if (j == 0) {
values_A.push(0);
} else if (j == 1) {
values_B.push(0);
}
}
break;
}
}
});
}
tmpDatasets.push({
data: values_A,
label: m[0],
fill: true,
backgroundColor: this.colorA_reducedOpacity,
borderColor: this.colorA,
pointBackgroundColor: this.colorA,
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: this.colorA,
});
tmpDatasets.push({
data: values_B,
label: m[1],
fill: true,
backgroundColor: this.colorB_reducedOpacity,
borderColor: this.colorB,
pointBackgroundColor: this.colorB,
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: this.colorB,
});
this.chartjsData = {
labels: tmpLabels,
datasets: tmpDatasets,
};
while (this.allKpis.length > 0) {
this.allKpis.pop();
}
tmpLabels.forEach((element) => {
this.allKpis.push({
label: element,
isChecked: true,
});
});
},
error: (error) => {
this.toastrService.show("Evaluated.json loading failed.", "Warning", {
status: "warning",
});
console.log("🚀☢ ~ Error", error);
this.errorMsg = "Working on it, please wait ...";
this.chartjsData = {};
},
});
}
public deselectAll() {
let index = this.allKpis.length;
while (index--) {
this.allKpis[index].isChecked = false;
}
this.updateSpiderChart();
this.allDeselected = true;
}
public selectAll() {
let index = this.allKpis.length;
while (index--) {
this.allKpis[index].isChecked = true;
}
this.updateSpiderChart();
this.allDeselected = false;
}
public onInputChange(item: any) {
let index = this.allKpis.length;
while (index--) {
if (this.allKpis[index].label == item.label) {
this.allKpis[index].isChecked = !this.allKpis[index].isChecked;
break;
}
}
this.updateSpiderChart();
this.allDeselected = true;
}
private updateSpiderChart() {
let tmpLabels = [];
let tmpDatasets = [];
let values_A = [];
let values_B = [];
for (let i = 0; i < this.allKpis.length; i++) {
if (this.allKpis[i].isChecked == true) {
tmpLabels.push(this.allKpis[i]["label"]);
}
}
const rootKeys = Object.keys(this.responseFromApi);
const l = this.responseFromApi[rootKeys[0]];
const m = Object.keys(l);
for (let j = 0; j < m.length; j++) {
let entries = Object.entries(l[m[j]]);
entries.forEach((entry) => {
for (let i = 0; i < tmpLabels.length; i++) {
if (tmpLabels[i] == entry[0]) {
if (/^[0-5]$/.test(entry[1] as string)) {
if (j == 0) {
values_A.push(entry[1] as string);
} else if (j == 1) {
values_B.push(entry[1] as string);
}
} else {
console.log("🚀☢ Setting 0");
if (j == 0) {
values_A.push(0);
} else if (j == 1) {
values_B.push(0);
}
}
break;
}
}
});
}
tmpDatasets.push({
data: values_A,
label: m[0],
fill: true,
backgroundColor: this.colorA_reducedOpacity,
borderColor: this.colorA,
pointBackgroundColor: this.colorA,
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: this.colorA,
});
tmpDatasets.push({
data: values_B,
label: m[1],
fill: true,
backgroundColor: this.colorB_reducedOpacity,
borderColor: this.colorB,
pointBackgroundColor: this.colorB,
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: this.colorB,
});
this.chartjsData = {
labels: tmpLabels,
datasets: tmpDatasets,
};
}
}