2 files changed, 106 insertions, 0 deletions
diff --git a/layouts/shortcodes/chart.html b/layouts/shortcodes/chart.html
index 69689cd..2198b63 100644
--- a/layouts/shortcodes/chart.html
+++ b/layouts/shortcodes/chart.html
@@ -1,8 +1,25 @@
 {{- $id := printf "chart-%d" (now.UnixNano) -}}
 {{- $type := .Get "type" | default "bar" -}}
+{{- $preset := .Get "preset" -}}
+{{- $title := .Get "title" -}}
 {{- $data := .Get "data" -}}
 {{- $options := .Get "options" | default "{}" -}}
 
+{{/* Load chart presets */}}
+{{- $presets := site.Data.chart_presets -}}
+
+{{/* Handle preset-based charts */}}
+{{- if $preset -}}
+  {{- $presetData := index $presets.charts $preset -}}
+  {{- if $presetData -}}
+    {{- $data = $presetData.data | jsonify -}}
+    {{- if and $title (not (index $presetData.options.plugins.title "text")) -}}
+      {{- $presetData = merge $presetData (dict "options" (merge $presetData.options (dict "plugins" (merge $presetData.options.plugins (dict "title" (dict "text" $title)))))) -}}
+    {{- end -}}
+    {{- $options = $presetData.options | jsonify -}}
+  {{- end -}}
+{{- end -}}
+
 <div class="chart-container mb-5">
   <canvas id="{{ $id }}"></canvas>
 </div>
diff --git a/layouts/shortcodes/perf-chart.html b/layouts/shortcodes/perf-chart.html
new file mode 100644
index 0000000..8c1734a
--- /dev/null
+++ b/layouts/shortcodes/perf-chart.html
@@ -0,0 +1,89 @@
+{{/* Performance chart shortcode for consistent chart styling */}}
+{{- $title := .Get "title" -}}
+{{- $labelsRaw := .Get "labels" -}}
+{{- $datasetsRaw := .Get "datasets" -}}
+{{- $xAxisLabel := .Get "xAxisLabel" | default "Time (ms)" -}}
+
+{{/* 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 -}}
+      {{- $preset := 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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const ctx = document.getElementById('{{ $id }}').getContext('2d');
+    new Chart(ctx, {
+      type: 'bar',
+      data: {{ dict "labels" $labels "datasets" $parsedDatasets | jsonify | safeJS }},
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        indexAxis: 'y',
+        scales: {
+          x: {
+            stacked: true,
+            title: {
+              display: true,
+              text: '{{ $xAxisLabel }}'
+            }
+          },
+          y: { }
+        },
+        plugins: {
+          legend: { position: 'top' },
+          title: {
+            display: true,
+            text: '{{ $title }}'
+          }
+        }
+      }
+    });
+  });
+</script>
+
+<style>
+  .chart-container {
+    position: relative;
+    height: 400px;
+    width: 100%;
+  }
+</style>