{{- $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 := hugo.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>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('{{ $id }}').getContext('2d');
    new Chart(ctx, {
      type: '{{ $type }}',
      data: {{ $data | safeJS }},
      options: Object.assign({
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { position: 'top' }
        }
      }, {{ $options | safeJS }})
    });
  });
</script>

<style>
  .chart-container {
    position: relative;
    height: 400px;
    width: 100%;
  }
</style>