1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
{{ $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">
<p>
<input oninput="w3.filterHTML('#chartTable', '.row', this.value)" class="form_search search_field" placeholder="Filter Table Values">
</p>
<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 ",") "," }}
<link rel="stylesheet" href='{{ absURL "js/chart.min.css" }}' />
<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: "Random Data"
}],
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 }}
|
