homepage charts

js/tabler-charts.js

@@ -72,7 +72,6 @@ if (window.Apex) {
 
     dataLabels: {
       enabled: false,
-      offsetY: -6,
       dropShadow: {
         enabled: false,
       },
@@ -83,7 +82,6 @@ if (window.Apex) {
         customScale: 1,
         expandOnClick: false,
         dataLabels: {
-          offset: -8,
           minAngleToShowLabel: 10,
         },
       },
@@ -145,6 +143,12 @@ if (window.Apex) {
           colors: mutedColor,
           fontSize: '12px',
         },
+        datetimeFormatter: {
+          year: 'yyyy',
+          month: 'MMM \'yy',
+          day: 'd MMM',
+          hour: 'HH:mm'
+        }
       },
       tooltip: {
         enabled: false,

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;
+   var chartElement = document.getElementById('chart-{{ id }}');
-   window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts((el = 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 %}

scss/tabler.scss

@@ -53,6 +53,7 @@
 @import "vendor/selectize";
 @import "vendor/jqvmap";
 @import "vendor/apexcharts";
+@import "vendor/sparkline";
 
 @import "utils/border";
 @import "utils/background";

scss/ui/_charts.scss

@@ -22,54 +22,3 @@
   background-size: 14.14px 14.14px;
 }
 
-.sparkline {
-  position: relative;
-  width: 4rem;
-  height: 2.5rem;
-  line-height: 1;
-}
-
-.sparkline-square {
-  width: 2.5rem;
-}
-
-.sparkline-wide {
-  width: 6rem;
-}
-
-.sparkline-label {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: px2rem(11px);
-
-  .icon {
-    width: 1rem;
-    height: 1rem;
-  }
-}
-
-
-// stylelint-disable declaration-no-important
-.apexcharts-tooltip {
-  line-height: 1;
-  color: #fff;
-  background: $dark !important;
-  border: 0 !important;
-  border-radius: 3px !important;
-}
-
-.apexcharts-tooltip-title {
-  margin: 0 !important;
-  background: transparent !important;
-  border: 0 !important;
-}
-
-.apexcharts-tooltip-series-group {
-  padding: 0 8px !important;
-}

scss/vendor/_apexcharts.scss

@@ -1,3 +1,31 @@
 .apexcharts-title-text {
-  font-weight: 600;
+  font-weight: 600 !important;
+}
+
+.apexcharts-tooltip-title {
+  font-weight: 600 !important;
+  padding-bottom: .25rem !important;
+}
+
+.apexcharts-tooltip {
+  line-height: 1;
+  color: #fff;
+  background: $dark !important;
+  border: 0 !important;
+  border-radius: 3px !important;
+}
+
+.apexcharts-tooltip-title {
+  margin: 0 !important;
+  background: transparent !important;
+  border: 0 !important;
+}
+
+.apexcharts-tooltip-series-group {
+  padding: 0 8px !important;
+}
+
+.apexcharts-tooltip-marker {
+  width: .5rem;
+  height: .5rem;
 }

scss/vendor/_sparkline.scss

@@ -0,0 +1,31 @@
+.sparkline {
+  position: relative;
+  width: 4rem;
+  height: 2.5rem;
+  line-height: 1;
+}
+
+.sparkline-square {
+  width: 2.5rem;
+}
+
+.sparkline-wide {
+  width: 6rem;
+}
+
+.sparkline-label {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: px2rem(11px);
+
+  .icon {
+    width: 1rem;
+    height: 1rem;
+  }
+}