Merge branch 'dev-doc-datatables' of https://github.com/tabler/tabler into dev-doc-datatables

2025-12-26 11:16:12 +04:00 · 2019-12-21 23:06:05 +01:00
parent 48231559da 8af1003da8
commit 5af2a5b4f7
8 changed files with 154 additions and 165 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -10,8 +10,8 @@ indent_style=tab
 tab_width=3

 [*.html]
-indent_style=space
 indent_size=3
+insert_final_newline=false

 [*.md]
 indent_style=tab
@@ -20,12 +20,3 @@ tab_width=3
 [*.js.map]
 indent_style=tab
 indent_size=3
-
-[{*.css,*.scss}]
-indent_style=space
-indent_size=2
-insert_final_newline = true
-
-[{*.yml,*.yaml}]
-indent_style=space
-indent_size=2
--- a/pages/_data/charts.yml
+++ b/pages/_data/charts.yml
@@ -1,7 +1,9 @@
 total-sales:
  type: donut
+  demo: true
  sparkline: true
  hide-legend: true
+  name: Total sales
  series:
    - name: Direct
      color: blue
@@ -16,26 +18,26 @@ total-sales:
      color: yellow
      data: 12

-total-sales2:
-  type: radalBar
+campaigns:
+  name: Campaigns
+  demo: true
+  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
+  demo: true
  type: line
  categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
  groups: [1, 2, 3]
@@ -72,7 +74,7 @@ development-activity:

 line:
  name: Employment Growth
-  display: true
+  demo: true
  type: line
  show-grid: true
  categories: ['2013', '2014', '2015', '2016', '2017', '2018']
@@ -89,7 +91,7 @@ line:

 line-stroke:
  name: Line chart
-  display: true
+  demo: true
  type: line
  stroke-curve: straight
  hide-legend: true
@@ -108,7 +110,7 @@ line-stroke:

 stepline:
  name: Stepline
-  display: true
+  demo: true
  type: line
  hide-legend: true
  stroke-curve: stepline
@@ -120,7 +122,7 @@ stepline:

 temperature:
  name: Monthly Average Temperature
-  display: true
+  demo: true
  type: line
  show-labels: true
  show-data-labels: true
@@ -139,7 +141,7 @@ temperature:

 area:
  name: Lorem ipsum
-  display: true
+  demo: true
  type: area
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -154,7 +156,7 @@ area:

 area-spline:
  name: Lorem ipsum
-  display: true
+  demo: true
  type: area
  spline: true
  hide-legend: true
@@ -170,12 +172,11 @@ area-spline:

 area-spline-stacked:
  name: Lorem ipsum
-  display: true
+  demo: true
  type: area
  spline: true
  hide-legend: true
  stacked: true
-#  groups: [1, 2]
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
@@ -188,7 +189,7 @@ area-spline-stacked:

 spline:
  name: Wind speed during two days
-  display: true
+  demo: true
  type: line
  spline: true
  show-labels: true
@@ -205,7 +206,7 @@ spline:

 spline-rotated:
  name: Lorem ipsum
-  display: true
+  demo: true
  type: line
  spline: true
  rotated: true
@@ -222,7 +223,7 @@ spline-rotated:

 bar:
  name: Lorem ipsum
-  display: true
+  demo: true
  type: bar
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -236,7 +237,7 @@ bar:

 bar-rotated:
  name: Lorem ipsum
-  display: true
+  demo: true
  type: bar
  rotated: true
  hide-legend: true
@@ -252,10 +253,9 @@ bar-rotated:

 bar-stacked:
  name: Lorem ipsum
-  display: true
+  demo: true
  type: bar
  stacked: true
-#  groups: [1, 2]
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
@@ -269,7 +269,7 @@ bar-stacked:

 pie:
  name: Lorem ipsum
-  display: true
+  demo: true
  type: pie
  hide-legend: true
  show-data-labels: true
@@ -290,7 +290,7 @@ pie:

 donut:
  name: Lorem ipsum
-  display: true
+  demo: true
  type: donut
  sparkline: true
  hide-legend: true
@@ -305,7 +305,7 @@ donut:

 scatter:
  name: Lorem ipsum
-  display: true
+  demo: true
  type: scatter
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -320,7 +320,7 @@ scatter:

 combination:
  name: Combination chart
-  display: true
+  demo: true
  type: bar
  types:
    2: 'line'
--- a/pages/_includes/cards/charts/card.html
+++ b/pages/_includes/cards/charts/card.html
@@ -1,10 +0,0 @@
-{% assign data = site.data.charts[include.chart-id] %}
-{% assign height = include.height | default: 10 %}
-<div class="card">
-   <div class="card-body">
-      {% if include.title %}
-         <h3 class="card-title">{{ include.title }}</h3>
-      {% endif %}
-      {% include ui/chart.html height=height chart-id=include.chart-id %}
-   </div>
-</div>
--- a/pages/_includes/cards/charts/total-sales.html
+++ b/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>
--- a/pages/_includes/cards/invoices.html
+++ b/pages/_includes/cards/invoices.html
@@ -2,7 +2,7 @@
      <div class="card-header">
         <h3 class="card-title">Invoices</h3>
      </div>
-      <div class="card-body d-flex justify-content-between flex-nowrap table-responsive border-bottom text-nowrap">
+      <div class="card-body d-flex justify-content-between flex-nowrap table-responsive border-bottom text-nowrap overflow-hidden">
   
         <div class="mb-0">
            Show
--- a/pages/_includes/layout/homepage.html
+++ b/pages/_includes/layout/homepage.html
@@ -43,10 +43,10 @@
   <div class="col-lg-6">
      <div class="row row-deck">
         <div class="col-md-12">
-            {% include cards/charts/card.html chart-id="temperature" height=10 %}
+            {% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
         </div>
         <div class="col-md-12">
-            {% include cards/charts/card.html chart-id="donut" height=10 %}
+            {% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
         </div>
      </div>
   </div>
--- a/pages/_includes/ui/chart.html
+++ b/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 %}
+   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 %}
-	},
+      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.type == 'area' %}
+      fill: {
+         opacity: .16
+      },
+      {% endif %}

-		{% if data.title %}
-		title: {
-			text: '{{ data.title | escape }}'
-		},
-		{% 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.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 %}],
+      {% 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 %}],

-		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 %}

-		{% 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-grid %}
-		grid: {
-			show: true,
-		},
-		{% endif %}
+      {% if data.show-data-labels %}
+      dataLabels: {
+         enabled: 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.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.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.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.rotated %}
-		plotOptions: {
-			bar: {
-				horizontal: true,
-			}
-		},
-		{% endif %}
+      {% if data.series %}
+      colors: [
+         {% for serie in data.series %}
+         {{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
+      ],
+      {% 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-legend %}
-		legend: {
-			show: false, //hide legend
-		},
-		{% endif %}
+      {% if data.hide-tooltip %}
+      tooltip: {
+         enabled: false
+      },
+      {% endif %}

-		{% if data.hide-tooltip %}
-		tooltip: {
-			enabled: false
-		},
-		{% endif %}
+      {% if data.hide-points %}
+      point: {
+         show: false
+      },
+      {% endif %}

-		{% if data.hide-points %}
-		point: {
-			show: false
-		},
-		{% endif %}
-
-		{% if data.show-markers %}
-		markers: {
-			size: 2
-		},
-		{% endif %}
-	})).render();
-	});
+      {% if data.show-markers %}
+      markers: {
+         size: 2
+      },
+      {% endif %}
+   })).render();
+   });
 </script>
 {% endcapture %}

--- a/pages/charts.html
+++ b/pages/charts.html
@@ -1,16 +1,25 @@
 ---
 title: Charts
+page-title: Charts
 menu: charts
 ---

 <div class="row">
   {% for chart in site.data.charts %}
-   {% if chart[1].display %}
-   {% assign chart-name = chart[0] %}
+   {% if chart[1].demo %}
+   {% assign chart-id = chart[0] %}
   <div class="col-lg-6 col-xl-4">
-      {% include cards/charts/card.html chart-id=chart-name %}
+      <div class="card">
+         {% if chart[1].name %}
+         <div class="card-header">
+            <h3 class="card-title">{{ chart[1].name }}</h3>
+         </div>
+         {% endif %}
+         <div class="card-body">
+            {% include ui/chart.html chart-id=chart-id height=15 %}
+         </div>
+      </div>
   </div>
   {% endif %}
   {% endfor %}
-
 </div>