charts extend, new params

pages/_data/charts.yml

@@ -6,6 +6,33 @@ completion-tasks:
     - name: Tasks completion
       data: [155, 65, 465, 265, 225, 325, 80]
 
+completion-tasks2:
+  extend: completion-tasks
+  type: line
+
+completion-tasks3:
+  extend: completion-tasks
+  type: area
+
+completion-tasks4:
+  extend: completion-tasks
+  stroke-curve: straight
+  type: line
+
+completion-tasks5:
+  extend: completion-tasks
+  stroke-curve: stepline
+  type: line
+
+completion-tasks6:
+  extend: completion-tasks
+  type: bar
+  horizontal: true
+
+completion-tasks7:
+  extend: completion-tasks
+  type: line
+  datalabels: true
 
 tasks-overview:
   type: bar

pages/_includes/ui/chart.html

@@ -1,7 +1,7 @@
 {% assign data = site.data.charts[include.chart-id] %}
 {% assign id = include.id | default: include.chart-id %}
 {% assign height = include.height | default: 10 %}
-{% assign class = include.class | default: '' %}
+{% assign class = include.class %}
 
 {% if include['size'] == 'sm' %}
 {% assign class = class | append: ' chart-sm' | strip %}
@@ -9,8 +9,11 @@
 {% endif %}
 
 {% if data %}
-<div id="chart-{{ id }}" {% if class %} class="{{ class }}" {% endif %}{% if data.debug %}
-     style="outline: 1px solid red" {% endif %}></div>
+{% if data.extend %}
+{% assign data = site.data.charts[data.extend] | concat_objects: site.data.charts[include.chart-id] %}
+{% endif %}
+
+<div id="chart-{{ id }}" {% if class %} class="{{ class }}" {% endif %}{% if data.debug %} style="outline: 1px solid red" {% endif %}></div>
 
 {% append_lib apexcharts %}
 {% capture script %}
@@ -21,12 +24,10 @@
 		window.tabler_chart = window.tabler_chart || {};
 		{% endif %}
 
-		window.ApexCharts && ({% if jekyll.environment == 'development' %}
-		window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}
-		new ApexCharts(document.getElementById('chart-{{ id }}'), {
+		window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
 			chart: {
 				type: "{{ data.type }}",
-				{% if data.title %}
+				{% if data.title or data.type == "bar" or data.type == "line" %}
 				fontFamily: 'inherit',
 				{% endif %}
 				height: {{ height | times: 16 }},
@@ -52,6 +53,20 @@
 				{% endif %}
 			},
 
+			{% if data.type == 'bar' and data.horizontal %}
+			plotOptions: {
+				bar: {
+			 		horizontal: true,
+				}
+			},
+			{% endif %}
+
+			{% if data.datalabels %}
+			dataLabels: {
+				enabled: true,
+			},
+			{% endif %}
+
 			fill: {
 				opacity: {% if data.type == 'area' %}.16{% else %}1{% endif %},
 				{% if data.type == 'area' %}type: 'solid'{% endif %}

pages/_plugins/jekyll-filters.rb

@@ -80,6 +80,14 @@ module Jekyll
       "rgb(#{r.hex}, #{g.hex}, #{b.hex})"
     end
 
+    def concat_objects(object, object2)
+      if object and object2 and object.is_a?(Hash) and object2.is_a?(Hash)
+        return object.merge(object2)
+      end
+
+      object
+    end
+
     def tabler_color(color, variation = false)
       if variation
         color = color + '-' + variation

pages/tmp.html

@@ -3,13 +3,19 @@ tmp: true
 ---
 
 <div class="row">
-	<div class="col-md-6 col-lg-4">
-		<div class="card">
-			<div class="card-body">
-				{% include ui/chart.html chart-id="completion-tasks" height=15 %}
-			</div>
-		</div>
-	</div>
+
+  {% assign charts = 'completion-tasks,completion-tasks2,completion-tasks3,completion-tasks4,completion-tasks5,completion-tasks6,completion-tasks7' | split: ',' %}
+  {% for chart in charts %}
+  <div class="col-md-6 col-lg-4">
+    <div class="card">
+      <div class="card-body">
+        {% include ui/chart.html chart-id=chart height=15 %}
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+
+
    <div class="col-12">
       <div class="card">
          <div class="card-body">