55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
class ChartComponent {
|
|
constructor(parent, df) {
|
|
this.parent = parent;
|
|
this.df = df || {};
|
|
|
|
this.make();
|
|
}
|
|
|
|
make() {
|
|
this.wrapper = $(`<div class="chart-component">`).appendTo(this.parent);
|
|
new SectionHead(this.wrapper, this.df);
|
|
|
|
let chart_section = $(`<div class="chart">`).appendTo(this.wrapper);
|
|
if (this.df.data) {
|
|
if (this.df.type === 'mixed-bars') {
|
|
let mixed_bar_section = $(`<div class="mixed-bars mt-4">`).appendTo(
|
|
chart_section,
|
|
);
|
|
for (let value of this.df.data.datasets[0].values) {
|
|
var bar;
|
|
if (value === undefined) {
|
|
bar = `<div class="bg-light m-1 float-left" style="height: 40px; width: 2px">`;
|
|
} else if (value === 1) {
|
|
bar = `<div class="bg-success m-1 float-left" style="height: 40px; width: 2px">`;
|
|
} else if (value === 0) {
|
|
bar = `<div class="bg-danger m-1 float-left" style="height: 40px; width: 2px">`;
|
|
} else {
|
|
bar = `<div class="bg-warning m-1 float-left" style="height: 40px; width: 2px">`;
|
|
}
|
|
mixed_bar_section.append($(bar));
|
|
}
|
|
} else {
|
|
new jingrow.Chart(chart_section.get(0), {
|
|
data: this.df.data,
|
|
type: this.df.type, // or 'bar', 'line', 'scatter', 'pie', 'percentage'
|
|
height: 250,
|
|
colors: this.df.colors,
|
|
});
|
|
}
|
|
} else {
|
|
chart_section.append(`
|
|
<table style="height: 250px">
|
|
<tbody>
|
|
<tr>
|
|
<td/>
|
|
<td class="align-middle text-center w-100 pb-4">No data yet</td>
|
|
<td/>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`);
|
|
}
|
|
}
|
|
}
|