radalChart fix

pages/_data/charts.yml

@@ -2,6 +2,7 @@ total-sales:
   type: donut
   sparkline: true
   hide-legend: true
+  name: Total sales
   series:
     - name: Direct
       color: blue
@@ -16,23 +17,21 @@ total-sales:
       color: yellow
       data: 12
 
-total-sales2:
-  type: radalBar
+campaigns:
+  name: Campaigns
+  type: radialBar
   sparkline: true
   hide-legend: true
   series:
-    - name: Direct
+    - name: Total Sent
       color: blue
       data: 44
-    - name: Affilliate
-      color: green
-      data: 55
-    - name: Sponsored
-      color: red
-      data: 35
-    - name: E-mail
-      color: yellow
-      data: 12
+    - name: Reached
+      color: blue-light
+      data: 36
+    - name: Opened
+      color: blue-lighten
+      data: 18
 
 tasks:
   name: Tasks
@@ -175,7 +174,6 @@ area-spline-stacked:
   spline: true
   hide-legend: true
   stacked: true
-#  groups: [1, 2]
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
     - name: Maximum
@@ -255,7 +253,6 @@ bar-stacked:
   display: true
   type: bar
   stacked: true
-#  groups: [1, 2]
   hide-legend: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:

pages/_includes/cards/charts/total-sales.html

@@ -4,6 +4,6 @@
       <h3 class="card-title">Total sales</h3>
 
       {% include ui/chart.html chart-id="total-sales" height=15 %}
-      {% include ui/chart.html chart-id="total-sales2" height=15 %}
+      {% include ui/chart.html chart-id="campaigns" height=15 %}
    </div>
 </div>

pages/_includes/ui/chart.html

@@ -13,130 +13,129 @@
 
 {% capture script %}
 <script>
-	document.addEventListener("DOMContentLoaded", function(event) {
-		{% if jekyll.environment == 'development' %}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 }}'), {
-			chart: {
-				type: '{{ data.type }}',
-				height: {{ height | times: 16 }},
-		{% 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 }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
-
-		labels: [{% for serie in data.series %}"{{ serie.name }}"{% 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.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: [ //chart 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();
-	});
+   document.addEventListener("DOMContentLoaded", function(event) {
+      {% if jekyll.environment == 'development' %}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 }}'), {
+         chart: {
+            type: '{{ data.type }}',
+            height: {{ height | times: 16 }},
+      {% 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' or data.type == 'radialBar' %}
+      series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
+      labels: [{% for serie in data.series %}"{{ serie.name }}"{% 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.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: [ //chart 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();
+   });
 </script>
 {% endcapture %}