charts, colors fixes, charts demo

2025-12-21 17:34:25 +04:00 · 2019-12-20 18:08:14 +01:00
parent ba1e1fefb4
commit b83202d7a4
11 changed files with 82 additions and 74 deletions
--- a/js/tabler-charts.js
+++ b/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);
--- a/package.json
+++ b/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",
--- a/pages/_data/charts.yml
+++ b/pages/_data/charts.yml
@@ -1,4 +1,5 @@
 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
--- a/pages/_data/colors.yml
+++ b/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'
--- a/pages/_includes/layout/navbar-search.html
+++ b/pages/_includes/layout/navbar-search.html
@@ -1,4 +1,4 @@
-<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>
--- a/pages/_includes/ui/chart.html
+++ b/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: {
--- a/pages/_includes/ui/sparkline.html
+++ b/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 }}
--- a/pages/snippets.html
+++ b/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 %}
--- a/pages/tmp.html
+++ b/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 %}


--- a/scss/_debug.scss
+++ b/scss/_debug.scss
@@ -1,7 +1,7 @@
-$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}'");