{% assign data = site.data.charts[include.chart-id] %}
{% assign id = include.id | default: include.chart-id %}
{% assign height = include.height %}

{% if data %}
<div id="chart-{{ id }}"{% if include.class %} class="{{ include.class }}"{% endif %}{% if height %} style="height: {% if height == '100%' %}100%{% else %}{{ height }}rem{% endif %}"{% endif %}></div>
{% capture_global scripts %}
<script>
document.addEventListener("DOMContentLoaded", function(event) {
   {% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
   
   var chartEl = document.getElementById('chart-{{ id }}');
   window.ApexCharts && chartEl && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(chartEl, {
      chart: {
         type: '{{ data.type }}',
         height: chartEl.offsetHeight,
         {% if data.sparkline %}
         sparkline: {
            enabled: true
         },
         {% endif %}
         {% if data.stacked %}
         stacked: true,
         {% endif %}
      },

      {% if data.type == 'area' %}
      fill: {
        opacity: .16
      },
      {% endif %}

      {% if data.title %}
      title: {
         text: '{{ data.title | escape }}'
      },
      {% endif %}

      {% if data.dashed-history or data.stroke-curve %}
      stroke: {
         {% if data.dashed-history %}
         width: [2, 1],
            dashArray: [0, 3],
         {% endif %}
         {% if data.stroke-curve %}
         curve: '{{ data.stroke-curve }}',
         {% endif %}
      },
      {% endif %}

      {% if data.series %}
      {% if data.type == 'pie' or data.type == 'donut' %}
      series: [{% for serie in data.series %}{{ serie.data[0] }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
      {% else %}
      series: [{% for serie in data.series %}{
         name: '{{ serie.name }}',
         data: [{{ serie.data | join: ', '}}]
      }{% unless forloop.last %},{% endunless %}{% endfor %}],
      {% endif %}
      {% endif %}

      {% if data.type == 'pie' or data.type == 'donut' %}
      pie: {
         height: chartEl.offsetHeight
      },
      {% endif %}

      {% if data.show-grid %}
      grid: {
         show: true,
      },
      {% endif %}

      {% if data.show-data-labels %}
      dataLabels: {
         enabled: true,
      },
      {% endif %}

      {% if data.categories or data.days-labels-count %}
      xaxis: {
         {% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
         {% if data.days-labels-count %}type: 'datetime',{% endif %}
      },
      {% endif %}

      {% if data.auto-min %}
      yaxis: {
         min: function(min) { return min },
      },
      {% endif %}

      {% if data.days-labels-count %}
      labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
      {% endif %}

      {% if data.rotated %}
      plotOptions: {
         bar: {
            horizontal: true,
         }
      },
      {% endif %}

      {% if data.series %}
      colors: [ {% for serie in data.series %}
         {{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
      ],
      {% endif %}

      {% if data.hide-legend %}
      legend: {
         show: false, //hide legend
      },
      {% endif %}

      {% if data.hide-tooltip %}
      tooltip: {
         enabled: false
      },
      {% endif %}

      {% if data.hide-points %}
      point: {
         show: false
      },
      {% endif %}

      {% if data.show-markers %}
      markers: {
         size: 2
      },
      {% endif %}
   })).render();
   
   console.log('chartEl.offsetHeight', chartEl.offsetHeight);
});
</script>
{% endcapture_global %}
{% endif %}