Merge branches 'tabler-v1' and 'tabler-v1-charts' of https://github.com/tabler/tabler into tabler-v1

js/app/charts.js

@@ -45,28 +45,13 @@ charts default configuration
  */
 if (window.Apex) {
 
+  var borderColor = 'rgba(0, 0, 0, 0.09)';
+  var mutedColor = '#888e9a';
+
   window.Apex = {
-    grid: {
-      show: false,
-      padding: {
-        right: 0,
-        left: 0,
-        bottom: 0,
-        top: 0
-      }
-    },
-
-    dataLabels: {
-      enabled: false
-    },
-
-    plotOptions: {
-      pie: {
-        expandOnClick: false,
-      },
-    },
-
     chart: {
+      fontFamily: 'inherit',
+      foreColor: 'inherit',
       toolbar: {
         show: false,
       },
@@ -78,6 +63,36 @@ if (window.Apex) {
       }
     },
 
+    grid: {
+      show: false,
+      position: 'back',
+      borderColor: borderColor,
+      padding: {
+        right: 0,
+        left: 0,
+        bottom: 0,
+        top: 0
+      }
+    },
+
+    dataLabels: {
+      enabled: false,
+      offsetY: -6,
+      dropShadow: {
+        enabled: false,
+      },
+    },
+
+    plotOptions: {
+      pie: {
+        expandOnClick: false,
+        dataLabels: {
+          offset: -8,
+          minAngleToShowLabel: 10,
+        },
+      },
+    },
+
     stroke: {
       width: 2,
       curve: 'smooth',
@@ -89,17 +104,30 @@ if (window.Apex) {
     },
 
     markers: {
-      strokeWidth: 1
+      size: 0,
+      strokeWidth: 1,
+      radius: 2,
+      hover: {
+        size: 4,
+      }
     },
 
     legend: {
-      show: true
+      show: true,
+      fontSize: '14px',
+      markers: {
+        width: 8,
+        height: 8
+      },
+      itemMargin: {
+        horizontal: 0,
+        vertical: 8
+      },
     },
 
     title: {
       style: {
         fontSize: '14px',
-        fontFamily: 'inherit'
       }
     },
 
@@ -109,13 +137,22 @@ if (window.Apex) {
 
     xaxis: {
       labels: {
-        show: false
+        style: {
+          colors: mutedColor,
+          fontSize: '12px',
+        }
       },
       tooltip: {
         enabled: false
       },
       axisBorder: {
-        show: false
+        color: borderColor,
+        height: 0
+      },
+      axisTicks: {
+        show: true,
+        height: 4,
+        color: borderColor
       }
     },
 

pages/_data/charts.yml

@@ -32,11 +32,11 @@ development-activity:
       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]
 
-employment:
+line:
   name: Employment Growth
   display: true
   type: line
-  hide-legend: true
+  show-grid: true
   categories: ['2013', '2014', '2015', '2016', '2017', '2018']
   series:
     - name: Development
@@ -49,12 +49,13 @@ employment:
       color: green
       data: [17, 18, 21, 20, 30, 29]
 
-line-chart-stroke:
+line-stroke:
   name: Line chart
   display: true
   type: line
   stroke-curve: straight
   hide-legend: true
+  show-grid: true
   categories: ['2013', '2014', '2015', '2016', '2017', '2018', '2019']
   series:
     - name: Development
@@ -67,12 +68,13 @@ line-chart-stroke:
       color: green
       data: [7, 10, 11, 18, 18, 18, 24]
 
-stepline-chart:
+stepline:
   name: Stepline
   display: true
   type: line
   hide-legend: true
   stroke-curve: stepline
+  show-grid: true
   series:
     - name: Development
       color: orange
@@ -83,7 +85,10 @@ temperature:
   display: true
   type: line
   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:
     - name: Tokyo
@@ -228,6 +233,8 @@ pie:
   name: Lorem ipsum
   display: true
   type: pie
+  hide-legend: true
+  show-data-labels: true
   series:
     - name: A
       color: blue-darker
@@ -246,6 +253,7 @@ donut:
   name: Lorem ipsum
   display: true
   type: donut
+  hide-legend: true
   series:
     - name: Maximum
       color: green

pages/_includes/cards/charts/card.html

@@ -0,0 +1,17 @@
+{% if include.data %}
+{% assign data = include.data %}
+{% else %}
+{% assign data = site.data.charts[include.name] %}
+{% endif %}
+{% assign key = 'chart-' | append: include.name %}
+<div class="card">
+   {% unless include.hide-title %}
+   <div class="card-header">
+      <h3 class="card-title">{{ include.title | default: data.name }}</h3>
+   </div>
+   {% endunless %}
+   <div class="card-body">
+      <div id="{{ key }}" style="height: {{ include.height | default: 16 }}rem"></div>
+   </div>
+</div>
+{% include js/charts.html id=key chart-id=include.name %}

pages/_includes/js/charts.html

@@ -49,6 +49,18 @@ $(document).ready(function(){
       {% 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 %}
@@ -95,7 +107,13 @@ $(document).ready(function(){
       {% if data.hide-points %}
       point: {
          show: false
-      }
+      },
+      {% endif %}
+
+      {% if data.show-markers %}
+      markers: {
+         size: 2
+      },
       {% endif %}
    })).render();
 });

pages/charts.html

@@ -6,18 +6,10 @@ menu: charts
 	<div class="row row-cards">
 		{% for chart in site.data.charts %}
 		{% if chart[1].display %}
-		{% assign data = chart[0] %}
-		{% assign key = 'chart-' | append: data %}
+		{% assign chart-name = chart[0] %}
+		{% assign chart-data = chart[1] %}
 		<div class="col-lg-6 col-xl-4">
-			<div class="card">
-				<div class="card-header">
-					<h3 class="card-title">{{ chart[1].name }}</h3>
-				</div>
-				<div class="card-body">
-					<div id="{{ key }}" style="height: 16rem"></div>
-				</div>
-			</div>
-			{% include js/charts.html id=key chart-id=data %}
+			{% include cards/charts/card.html name=chart-name data=chart-data %}
 		</div>
 		{% endif %}
 		{% endfor %}

pages/index.html

@@ -108,6 +108,16 @@ menu: level-1.level-2.level-3.level-4
       {% include cards/small-stats-3.html number=621 title="Products" percentage=-1 %}
    </div>
 
+   <div class="col-4">
+      {% include cards/charts/card.html name="temperature" title="A" height=12 %}
+   </div>
+   <div class="col-4">
+      {% include cards/charts/card.html name="donut" title="B" height=12 %}
+   </div>
+   <div class="col-4">
+      {% include cards/charts/card.html name="pie" title="C" height=12 %}
+   </div>
+
    {% comment %}
    <div class="col-lg-6">
       {% comment %}{% include cards/development-activity.html %}{% endcomment %}

scss/ui/_buttons.scss

@@ -28,7 +28,7 @@
 }
 
 .btn-secondary {
-  @include button-variant(#fff, $border-color, #fff, $border-color);
+  @include button-variant(transparent, $border-color, #fff, $border-color);
   color: $text-muted;
 
   &:hover {