homepage charts

pages/_data/charts.yml

@@ -25,14 +25,14 @@ development-activity:
   type: area
   groups: [1, 2, 3]
   hide-points: true
-  hide-tooltip: true
   remove-padding: true
   legend-position: 'top'
   sparkline: true
+  days-labels-count: 30
   series:
     - name: 'Purchases'
       color: blue
-      data: [0, 5, 1, 2, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 2, 2, 6, 30, 10, 10, 15, 14, 47, 65, 55]
+      data: [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70]
 
 line:
   name: Employment Growth
@@ -256,6 +256,7 @@ donut:
   name: Lorem ipsum
   display: true
   type: donut
+  sparkline: true
   hide-legend: true
   series:
     - name: Maximum

pages/_includes/cards/small-stats.html

@@ -1,7 +1,7 @@
 {% assign chart-type = include.chart-type | default: 'line' %}
 {% assign chart-position = include.chart-position | default: 'right' %}
 <div class="card">
-	<div class="card-body p-3 d-flex align-items-center leading-tight">
+	<div class="card-body p-3 d-flex align-items-center">
 		{% if include.icon %}
 		<span class="{% if include.color %}bg-{{ include.color }} text-white{% endif %} stamp mr-3">{% include ui/icon.html icon=include.icon %}</span>
 		{% elsif include.person-id %}
@@ -21,7 +21,7 @@
 				{% include ui/icon.html icon=include.small-icon color=include.color class="icon-sm ml-1" %}
 				{% endif %}
 			</div>
-			<div class="text-muted">{{ include.description | default: "Users" }}</div>
+			<div class="text-muted text-h5">{{ include.description | default: "Users" }}</div>
 		</div>
 
 		{% if include.second-icon %}

pages/_includes/ui/chart.html

@@ -3,17 +3,17 @@
 {% assign height = include.height %}
 
 {% if data %}
-<div id="chart-{{ id }}"{% if include.class %} class="{{ include.class }}"{% endif %}{% if height %} style="height: {{ height }}rem"{% endif %}></div>
+<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 el;
-   window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts((el = document.getElementById('chart-{{ id }}')), {
+   var chartElement = document.getElementById('chart-{{ id }}');
+   window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(chartElement, {
       chart: {
          type: '{{ data.type }}',
-         height: el.offsetHeight,
+         height: chartElement.offsetHeight,
          {% if data.sparkline %}
          sparkline: {
             enabled: true
@@ -61,7 +61,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
       {% if data.type == 'pie' or data.type == 'donut' %}
       pie: {
-         height: el.offsetHeight
+         height: chartElement.offsetHeight
       },
       {% endif %}
 
@@ -91,7 +91,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
       {% endif %}
 
       {% if data.days-labels-count %}
-      labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-05-${n+1}`),
+      labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
       {% endif %}
 
       {% if data.rotated %}
@@ -132,6 +132,8 @@ document.addEventListener("DOMContentLoaded", function(event) {
       },
       {% endif %}
    })).render();
+   
+   console.log('chartElement.offsetHeight', chartElement.offsetHeight);
 });
 </script>
 {% endcapture_global %}