From b83202d7a4a85ad4b46ad8887424f7b943891468 Mon Sep 17 00:00:00 2001 From: codecalm Date: Fri, 20 Dec 2019 18:08:14 +0100 Subject: [PATCH] charts, colors fixes, charts demo --- js/tabler-charts.js | 2 +- package.json | 8 +- pages/_data/charts.yml | 90 ++++++++++------------- pages/_data/colors.yml | 11 +++ pages/_includes/layout/navbar-search.html | 2 +- pages/_includes/layout/topmenu.html | 12 +-- pages/_includes/ui/chart.html | 9 ++- pages/_includes/ui/sparkline.html | 2 +- pages/snippets.html | 2 +- pages/tmp.html | 14 +++- scss/_debug.scss | 4 +- 11 files changed, 82 insertions(+), 74 deletions(-) diff --git a/js/tabler-charts.js b/js/tabler-charts.js index e201ef75f..9aaec558c 100644 --- 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 = $('
').html(data); diff --git a/package.json b/package.json index 4b1790e07..70a6826d4 100644 --- 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", diff --git a/pages/_data/charts.yml b/pages/_data/charts.yml index 08cbe4e10..421b6ad54 100644 --- 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 diff --git a/pages/_data/colors.yml b/pages/_data/colors.yml index 24d89163f..3fa9c24be 100644 --- 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' diff --git a/pages/_includes/layout/navbar-search.html b/pages/_includes/layout/navbar-search.html index 9bc2fa422..3f15c1678 100644 --- a/pages/_includes/layout/navbar-search.html +++ b/pages/_includes/layout/navbar-search.html @@ -1,4 +1,4 @@ -
+
{% include ui/form/input-icon.html prepend=true light=true %}
diff --git a/pages/_includes/layout/topmenu.html b/pages/_includes/layout/topmenu.html index 57666da66..05e39982c 100644 --- a/pages/_includes/layout/topmenu.html +++ b/pages/_includes/layout/topmenu.html @@ -1,9 +1,9 @@
-
-
- {% include layout/menu.html top=true %} +
+
+ {% include layout/menu.html top=true %} - {% include_cached layout/navbar-search.html %} -
-
+ {% include_cached layout/navbar-search.html %} +
+
diff --git a/pages/_includes/ui/chart.html b/pages/_includes/ui/chart.html index 654e728bb..d26b8adcb 100644 --- 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: { diff --git a/pages/_includes/ui/sparkline.html b/pages/_includes/ui/sparkline.html index d32f65934..d5d7b751c 100644 --- a/pages/_includes/ui/sparkline.html +++ b/pages/_includes/ui/sparkline.html @@ -5,7 +5,7 @@ {% endif %} {% append_lib peity %} -
+
{% if include.label %}
{{ include.label }} diff --git a/pages/snippets.html b/pages/snippets.html index c8ea225b5..82bc1fe6a 100644 --- 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 %} diff --git a/pages/tmp.html b/pages/tmp.html index 376389e42..a96a562a8 100644 --- a/pages/tmp.html +++ b/pages/tmp.html @@ -3,16 +3,22 @@ tmp: true ---
+
+ {% include cards/small-stats.html chart-position="right" %} +
- {% assign charts = 'completion-tasks,completion-tasks2,completion-tasks3,completion-tasks4,completion-tasks5,completion-tasks6,completion-tasks7' | split: ',' %} - {% for chart in charts %} -
+ {% for chart in site.data.charts %} + {% if chart[1].demo %} +
- {% include ui/chart.html chart-id=chart height=15 %} + {% assign chart-id = chart[0] %} +

{{ chart-id }}

+ {% include ui/chart.html chart-id=chart-id height=15 %}
+ {% endif %} {% endfor %} diff --git a/scss/_debug.scss b/scss/_debug.scss index c23c1aa56..cff7d531f 100644 --- 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}'");