charts, colors fixes, charts demo

js/tabler-charts.js

@@ -5,7 +5,7 @@
       const $this = $(this),
         data = $this.attr('data-spark'),
         color = $this.attr('data-spark-color') || 'blue',
-        bgColor = $this.attr('data-spark-color-bg') || 'blue',
+        bgColor = $this.attr('data-spark-color-bg') || 'blue-100',
         type = $this.attr('data-spark-type') || 'line';
 
       const $div = $('<div/>').html(data);

package.json

@@ -70,7 +70,7 @@
   "main": "dist/js/tabler.js",
   "homepage": "https://tabler.io",
   "devDependencies": {
-    "@babel/preset-env": "7.7.6",
+    "@babel/preset-env": "7.7.7",
     "browser-sync": "2.26.7",
     "bundlesize": "0.18.0",
     "clean-css-cli": "4.3.0",
@@ -97,7 +97,7 @@
     "stylelint": "12.0.0",
     "stylelint-config-twbs-bootstrap": "1.0.0",
     "svgo": "1.3.2",
-    "terser": "4.4.2",
+    "terser": "4.4.3",
     "yaml": "1.7.2"
   },
   "dependencies": {
@@ -106,9 +106,9 @@
     "@fullcalendar/interaction": "4.3.0",
     "@fullcalendar/list": "4.3.0",
     "@fullcalendar/timegrid": "4.3.0",
-    "apexcharts": "3.11.0",
+    "apexcharts": "3.11.1",
     "autosize": "4.0.2",
-    "bootstrap": "twbs/bootstrap#c340897",
+    "bootstrap": "twbs/bootstrap#31038b0",
     "fullcalendar": "3.10.1",
     "imask": "5.2.1",
     "jquery": "3.4.1",

pages/_data/charts.yml

 completion-tasks:
+  demo: true
   type: bar
   days-labels-count: 7
   debug: true
@@ -7,33 +8,62 @@ completion-tasks:
       data: [155, 65, 465, 265, 225, 325, 80]
 
 completion-tasks2:
+  demo: true
   extend: completion-tasks
   type: line
 
 completion-tasks3:
+  demo: true
   extend: completion-tasks
   type: area
 
 completion-tasks4:
+  demo: true
   extend: completion-tasks
   stroke-curve: straight
   type: line
 
 completion-tasks5:
+  demo: true
   extend: completion-tasks
   stroke-curve: stepline
   type: line
 
 completion-tasks6:
+  demo: true
   extend: completion-tasks
   type: bar
   horizontal: true
 
 completion-tasks7:
+  demo: true
   extend: completion-tasks
   type: line
   datalabels: true
 
+completion-tasks8:
+  demo: true
+  series:
+    - data: [155, 65, 465, 265, 225, 325, 80]
+    - data: [113, 42, 65, 54, 76, 65, 35]
+      color: red
+
+completion-tasks9:
+  demo: true
+  extend: completion-tasks8
+  stacked: true
+
+completion-tasks10:
+  demo: true
+  extend: completion-tasks8
+  type: area
+
+completion-tasks11:
+  demo: true
+  extend: completion-tasks8
+  type: area
+  stacked: true
+
 tasks-overview:
   type: bar
   debug: true
@@ -46,7 +76,6 @@ total-sales:
   type: donut
   demo: true
   sparkline: true
-  hide-legend: true
   name: Total sales
   series:
     - name: Direct
@@ -67,7 +96,6 @@ campaigns:
   demo: true
   type: radialBar
   sparkline: true
-  hide-legend: true
   series:
     - name: Total Sent
       color: blue
@@ -104,6 +132,7 @@ tasks:
 development-activity:
   name: Development Activity
   title: Development Activity
+  demo: true
   type: area
   groups: [1, 2, 3]
   hide-points: true
@@ -138,7 +167,6 @@ line-stroke:
   demo: true
   type: line
   stroke-curve: straight
-  hide-legend: true
   show-grid: true
   categories: ['2013', '2014', '2015', '2016', '2017', '2018', '2019']
   series:
@@ -156,7 +184,6 @@ stepline:
   name: Stepline
   demo: true
   type: line
-  hide-legend: true
   stroke-curve: stepline
   show-grid: true
   series:
@@ -171,7 +198,6 @@ temperature:
   show-labels: true
   show-data-labels: true
   show-markers: true
-  hide-legend: true
   show-grid: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
   series:
@@ -187,7 +213,6 @@ area:
   name: Lorem ipsum
   demo: true
   type: area
-  hide-legend: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
     - name: Maximum
@@ -203,7 +228,6 @@ area-spline:
   demo: true
   type: area
   spline: true
-  hide-legend: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
     - name: Maximum
@@ -219,7 +243,6 @@ area-spline-stacked:
   demo: true
   type: area
   spline: true
-  hide-legend: true
   stacked: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
@@ -237,7 +260,6 @@ spline:
   type: line
   spline: true
   show-labels: true
-  hide-legend: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
     - name: Hestavollane
@@ -254,7 +276,6 @@ pie:
   name: Lorem ipsum
   demo: true
   type: pie
-  hide-legend: true
   show-data-labels: true
   sparkline: true
   series:
@@ -276,7 +297,6 @@ donut:
   demo: true
   type: donut
   sparkline: true
-  hide-legend: true
   series:
     - name: Maximum
       color: green
@@ -290,7 +310,6 @@ scatter:
   name: Lorem ipsum
   demo: true
   type: scatter
-  hide-legend: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
     - name: Maximum
@@ -309,7 +328,6 @@ combination:
     2: 'line'
     3: 'spline'
   groups: [1, 4]
-  hide-legend: true
   categories: ['2013', '2014', '2015', '2016', '2017', '2018']
   series:
     - name: Development
@@ -329,6 +347,7 @@ revenue-bg:
   type: area
   days-labels-count: 30
   sparkline: true
+  demo: true
   series:
     - name: Profits
       data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
@@ -339,7 +358,7 @@ new-clients:
   sparkline: true
   stroke-width: [2, 1]
   stroke-dash: [0, 3]
-  hide-legend: true
+  demo: true
   series:
     - name: May
       color: blue
@@ -352,56 +371,27 @@ active-users:
   type: bar
   days-labels-count: 30
   sparkline: true
-  series:
-    - name: Profits
-      data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
-
-goals:
-  type: area
-  days-labels-count: 30
-  sparkline: true
+  demo: true
   series:
     - name: Profits
       data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
 
 traffic-in:
   type: bar
-  days-labels-count: 10
   sparkline: true
+  demo: true
+  color: green
   series:
     - name: Inbound
-      color: azure
-      data: [14, 3, 14, 9, 4, 6, 2, 7, 7, 14, 10, 9, 5, 1]
+      data: [14, -3, 14, 9, 4, 6, -2, 7, 7, 14, 10, 9, 5, -1]
 
 traffic-out:
   type: bar
-  days-labels-count: 10
+  demo: true
   sparkline: true
+  color: red
   series:
     - name: Outbound
-      color: red
-      data: [3, 9, 7, 14, 4, 5, 9, 1, 7, 10, 14, 14, 2, 6]
+      data: [-3, 7, 9, 14, 4, 5, 3, -1, 7, 10, 14, 14, -2, 6]
 
-usd-eur:
-  type: line
-  days-labels-count: 30
-  stroke-curve: straight
-  series:
-    - name: USD/EUR
-      color: black
-      data: [1.1241, 1.0972, 1.0601, 1.0516, 1.2795, 1.0573, 1.065, 1.1892, 1.1243, 1.1421, 1.1835, 1.1917, 1.1811, 1.1649, 1.1888, 1.1995, 1.2412, 1.2193, 1.2325, 1.2077, 1.1692, 1.168, 1.1686, 1.1601, 1.1608, 1.1317, 1.0318, 1.1465, 1.1444]
 
-devices:
-  type: donut
-  sparkline: true
-  hide-legend: true
-  series:
-    - name: a
-      color: blue-700
-      data: 23
-    - name: b
-      color: blue
-      data: 54
-    - name: c
-      color: blue-300
-      data: 34

pages/_data/colors.yml

@@ -9,6 +9,17 @@ blue-700: '#134076'
 blue-800: '#0d2b4e'
 blue-900: '#061527'
 
+azure: '#45aaf2'
+azure-100: '#daeefc'
+azure-200: '#b5ddfa'
+azure-300: '#8fccf7'
+azure-400: '#6abbf5'
+azure-500: '#45aaf2'
+azure-600: '#3788c2'
+azure-700: '#296691'
+azure-800: '#1c4461'
+azure-900: '#0e2230'
+
 indigo: '#6574cd'
 indigo-100: '#e0e3f5'
 indigo-200: '#c1c7eb'

pages/_includes/layout/navbar-search.html

-<div class="navbar-search d-none d-lg-block">
+<div class="navbar-search d-none d-xl-block">
 	<form action="." method="get">
 		{% include ui/form/input-icon.html prepend=true light=true %}
 	</form>

pages/_includes/layout/topmenu.html

 <header class="topnav topbar">
-   <div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
-      <div class="container{% if include.fluid %}-fluid{% endif %}">
-         {% include layout/menu.html top=true %}
+  <div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
+    <div class="container{% if include.fluid %}-fluid{% endif %}">
+      {% include layout/menu.html top=true %}
 
-	      {% include_cached layout/navbar-search.html %}
-      </div>
-   </div>
+      {% include_cached layout/navbar-search.html %}
+    </div>
+  </div>
 </header>

pages/_includes/ui/chart.html

@@ -26,7 +26,7 @@
 
 		window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
 			chart: {
-				type: "{{ data.type }}",
+				type: "{{ data.type | default: 'bar' }}",
 				{% if data.title or data.type == "bar" or data.type == "line" %}
 				fontFamily: 'inherit',
 				{% endif %}
@@ -37,6 +37,7 @@
 					enabled: true
 				},
 				{% else %}
+				parentHeightOffset: 0,
 				toolbar: {
 					show: false,
 				},
@@ -129,18 +130,18 @@
 			{% endif %}
 
 			{% if data.days-labels-count %}
-			labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n + 1}`),
+			labels: [...Array({{ data.days-labels-count }}).keys()].map(n => '2019-09-' + (n + 1)),
 			{% endif %}
 
 			{% if data.series %}
 			colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'blue' %}"{{ color | tabler_color }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
 			{% endif %}
 
-			{% if data.hide-legend %}
+			{% unless data.show-legend %}
 			legend: {
 				show: false,
 			},
-			{% endif %}
+			{% endunless %}
 
 			{% if data.hide-tooltip %}
 			tooltip: {

pages/_includes/ui/sparkline.html

@@ -5,7 +5,7 @@
 {% endif %}
 
 {% append_lib peity %}
-<div class="sparkline{% if square %} sparkline-square{% endif %}{% if include.wide %} sparkline-wide{% endif %}" data-spark="{{ include.data }}" data-spark-type="{{  include.type }}" {% if include.color %}data-spark-color="{{ include.color | tabler_color }}" data-spark-color-bg="{{ include.color | tabler_color: '100' }}"{% endif %}>
+<div class="sparkline{% if square %} sparkline-square{% endif %}{% if include.wide %} sparkline-wide{% endif %}" data-spark="{{ include.data }}" data-spark-type="{{  include.type }}" {% if include.color %}data-spark-color="{{ include.color | default: 'blue' | tabler_color }}" data-spark-color-bg="{{ include.color | tabler_color: '100' }}"{% endif %}>
 	{% if include.label %}
 	<div class="sparkline-label">
 		{{ include.label }}

pages/snippets.html

@@ -43,7 +43,7 @@ page-title-right: date
 		{% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,40,60,80,70" color="red" icon="heart" %}
 		{% include cards/small-stats.html chart-type="bar" chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="github" %}
 		{% include cards/small-stats.html chart-type="donut" chart-data="12/100" chart-label="12%" person-id=10 %}
-		{% include cards/small-stats.html chart-type="donut" chart-data="12/100" chart-label-icon="trending-up" person-id=11 chart-label-icon-color="green" %}
+		{% include cards/small-stats.html chart-type="donut" chart-data="12/100" chart-label-icon="trending-up" person-id=11 %}
 		{% include cards/small-stats.html chart-type="pie" chart-data="56/100" person-id=1 %}
 		{% include cards/small-stats.html second-icon="trending-up" color="green" person-id=4 %}
 		{% include cards/small-stats.html small-icon="trending-down" color="red" person-id=3 %}

pages/tmp.html

@@ -3,16 +3,22 @@ tmp: true
 ---
 
 <div class="row">
+  <div class="col-md-6 col-xl-4">
+    {% include cards/small-stats.html chart-position="right" %}
+  </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">
+  {% for chart in site.data.charts %}
+  {% if chart[1].demo %}
+  <div class="col-md-6 col-xl-4">
     <div class="card">
       <div class="card-body">
-        {% include ui/chart.html chart-id=chart height=15 %}
+        {% assign chart-id = chart[0] %}
+        <p>{{ chart-id }}</p>
+        {% include ui/chart.html chart-id=chart-id height=15 %}
       </div>
     </div>
   </div>
+  {% endif %}
   {% endfor %}
 
 

scss/_debug.scss

-$debug: false;
+$debug: true;
 
 @if $debug {
-	$colors: ("blue": $blue, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan);
+	$colors: ("blue": $blue, "azure": $azure, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan);
 
 	@each $name, $color in $colors {
 		@debug ("#{$name}: '#{$color}'");