compose-theme/layouts/shortcodes/chart.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 }}