125 lines
3.2 KiB
HTML
125 lines
3.2 KiB
HTML
{{- $datasetKey := .Get 0 }}
|
|
{{- $charts := .Get 1 }}
|
|
{{- $data := index $.Page.Params $datasetKey }}
|
|
{{- $dataURL := $data.fileLink }}
|
|
{{- $separator := "," }}
|
|
{{- $dataFile := getCSV $separator $dataURL }}
|
|
|
|
{{- $dataCompactData := dict -}}
|
|
{{- $activeColumn := sub $data.baseChartOn 1 }}
|
|
{{- with .Get 2 }}
|
|
{{- $activeColumn = sub (int .) 1 }}
|
|
{{- end }}
|
|
{{- range $dataFile -}}
|
|
{{- $value := trim (index . $activeColumn) " " -}}
|
|
{{- with index $dataCompactData $value -}}
|
|
{{- $dataCompactData = merge $dataCompactData (dict $value (add 1 .)) -}}
|
|
{{- else -}}
|
|
{{- $dataCompactData = merge $dataCompactData (dict $value 1) -}}
|
|
{{- end -}}
|
|
{{- end -}}
|
|
|
|
{{- $labels := slice }}
|
|
{{- range $key, $value := $dataCompactData }}
|
|
{{- $labels = append $key $labels }}
|
|
{{- end }}
|
|
|
|
{{- if in $charts "table" }}
|
|
<script src = '{{ absURL "js/w3.js" }}'></script>
|
|
<div class="table_wrap">
|
|
{{- if not (in $charts "noFilter") }}
|
|
<p>
|
|
<input oninput="w3.filterHTML('#chartTable', '.row', this.value)" class="form_search search_field forminput" placeholder="Filter Table Values">
|
|
</p>
|
|
{{- end }}
|
|
<table id="chartTable">
|
|
<thead>
|
|
{{- range $index, $title := $data.columnTitles }}
|
|
<th onclick="w3.sortHTML('#chartTable', '.row', 'td:nth-child({{ add $index 1 }})')">{{ $title }} {{ partial "sprite" (dict "icon" "sort") . }}</th>
|
|
{{- end }}
|
|
</thead>
|
|
|
|
{{- range $dataFile }}
|
|
{{- $entry := . }}
|
|
<tr class="row">
|
|
{{- range $index, $_ := $data.columnTitles }}
|
|
<td>{{ index $entry $index }}</td>
|
|
{{- end }}
|
|
</tr>
|
|
{{- end }}
|
|
</table>
|
|
</div>
|
|
{{- end }}
|
|
|
|
{{- $labels = split (delimit $labels ",") "," }}
|
|
{{- $dataTally := split (delimit $dataCompactData ",") "," }}
|
|
|
|
<script src='{{ absURL "js/chart.min.js" }}'></script>
|
|
<script>
|
|
Chart.platform.disableCSSInjection = true;
|
|
function getCanvas(id){
|
|
return document.getElementById(id)
|
|
};
|
|
var dataTally = {{ $dataTally }}.map(value => parseInt(value));
|
|
var labels = {{ $labels }};
|
|
var data = {
|
|
datasets: [{
|
|
data: dataTally,
|
|
backgroundColor: {{ $data.colors }},
|
|
label: {{ $data.title }}
|
|
}],
|
|
|
|
labels: labels
|
|
};
|
|
var options = {};
|
|
</script>
|
|
|
|
{{- if in $charts "pie" }}
|
|
<div class="chart">
|
|
<canvas id="pie{{ $datasetKey }}" width="500" height="500"></canvas>
|
|
</div>
|
|
<script>
|
|
var ctx = getCanvas('pie{{ $datasetKey }}');
|
|
var myPieChart = new Chart(ctx, {
|
|
type: 'pie',
|
|
data: data,
|
|
options: options
|
|
});
|
|
</script>
|
|
{{- end }}
|
|
|
|
{{- if in $charts "bar" }}
|
|
<div class="chart">
|
|
<canvas id="bar{{ $datasetKey }}" width="500" height="500"></canvas>
|
|
</div>
|
|
<script>
|
|
var ctx3 = getCanvas('bar{{ $datasetKey }}');
|
|
var barChart = new Chart(ctx3, {
|
|
type: 'bar',
|
|
data: data,
|
|
options: {
|
|
"scales": {
|
|
"yAxes": [{
|
|
"ticks": {
|
|
"beginAtZero": true
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{{- end }}
|
|
|
|
{{ if in $charts "doughnut" }}
|
|
<div class="chart">
|
|
<canvas id="doughnut{{ $datasetKey }}" width="500" height="500"></canvas>
|
|
</div>
|
|
<script>
|
|
var ctx2 = getCanvas('doughnut{{ $datasetKey }}');
|
|
var doughnutChart = new Chart(ctx2, {
|
|
type: 'doughnut',
|
|
data: data,
|
|
options: options
|
|
});
|
|
</script>
|
|
{{- end }}
|