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
|
{{/* Performance chart shortcode for consistent chart styling */}}
{{- $title := .Get "title" -}}
{{- $labelsRaw := .Get "labels" -}}
{{- $datasetsRaw := .Get "datasets" -}}
{{- $xAxisLabel := .Get "xAxisLabel" | default "Time (ms)" -}}
{{- $stackedRaw := .Get "stacked" | default "true" -}}
{{- $stacked := ne $stackedRaw "false" -}}
{{/* Load chart configuration */}}
{{- $config := site.Data.chart_presets -}}
{{- $defaults := $config.defaults -}}
{{- $colors := $config.colors -}}
{{/* Parse labels - split by comma */}}
{{- $labels := split $labelsRaw "," -}}
{{/* Parse datasets parameter: "Label:color:values" */}}
{{- $parsedDatasets := slice -}}
{{- if $datasetsRaw -}}
{{- $datasetList := split $datasetsRaw "|" -}}
{{- range $datasetList -}}
{{- $parts := split . ":" -}}
{{- if ge (len $parts) 3 -}}
{{- $label := index $parts 0 -}}
{{- $colorName := index $parts 1 -}}
{{- $valuesStr := index $parts 2 -}}
{{- $values := split $valuesStr "," -}}
{{- $colorRgb := index $colors $colorName -}}
{{- if $colorRgb -}}
{{- $backgroundColor := printf "rgba(%s, %.1f)" $colorRgb $defaults.backgroundOpacity -}}
{{- $borderColor := printf "rgba(%s, %.1f)" $colorRgb $defaults.borderOpacity -}}
{{- $dataset := dict
"label" $label
"data" $values
"backgroundColor" $backgroundColor
"borderColor" $borderColor
"borderWidth" $defaults.borderWidth
"barThickness" $defaults.barThickness -}}
{{- $parsedDatasets = $parsedDatasets | append $dataset -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{/* Generate unique ID */}}
{{- $id := printf "chart-%d" (now.UnixNano) -}}
<div class="chart-container mb-5">
<canvas id="{{ $id }}"></canvas>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const ctx = document.getElementById('{{ $id }}').getContext('2d');
const chartData = {{ dict "labels" $labels "datasets" $parsedDatasets | jsonify | safeJS }};
chartData.datasets = chartData.datasets.map(ds => ({ ...ds, data: ds.data.map(Number) }));
new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
responsive: true,
maintainAspectRatio: false,
indexAxis: 'y',
scales: {
x: {
stacked: {{ $stacked }},
title: {
display: true,
text: '{{ $xAxisLabel }}'
}
},
y: { stacked: {{ $stacked }} }
},
plugins: {
legend: { position: 'top' },
title: {
display: true,
text: '{{ $title }}'
}
}
}
});
});
</script>
<style>
.chart-container {
position: relative;
height: 400px;
width: 100%;
}
</style>
|
