diff --git a/src/pages/_data/charts.yml b/src/pages/_data/charts.yml index 088aad604..f223d32d5 100644 --- a/src/pages/_data/charts.yml +++ b/src/pages/_data/charts.yml @@ -1,3 +1,74 @@ +demo-pie: + type: donut + demo: true + sparkline: true + legend: true + series: + - name: Direct + color: blue + data: 44 + - name: Affilliate + color: blue-300 + data: 55 + - name: E-mail + color: blue-100 + data: 12 + - name: Other + color: gray-300 + data: 2 + +demo-bar: + type: bar + legend: true + horizontal: true + stacked: true + categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014] + x-formatter: 'val + "K"' + series: + - name: Container for a Fanta + color: purple + data: [ 44, 55, 41, 37, 22, 43, 21 ] + - name: Strange sunglasses + color: green + data: [ 53, 32, 33, 52, 13, 43, 32 ] + - name: Pen Pineapple Apple Pen + color: yellow + data: [ 12, 17, 11, 9, 15, 11, 20 ] + - name: Binoculars + color: red + data: [ 9, 7, 5, 8, 6, 9, 4 ] + - name: Magical notebook + color: blue + data: [ 25, 12, 19, 32, 25, 24, 10 ] + +demo-area: + type: area + legend: true + datetime: true + series: + - name: series1 + color: blue + data: [ 56, 40, 39, 47, 34, 48, 44 ] + - name: series2 + color: purple + data: [ 45, 43, 30, 23, 38, 39, 54 ] + +demo-line: + type: line + datetime: true + stroke-curve: straight + legend: true + series: + - name: Session Duration + color: yellow + data: [ 117, 92, 94, 98, 75, 110, 69, 80, 109, 113, 115, 95 ] + - name: Page Views + color: green + data: [ 59, 80, 61, 66, 70, 84, 87, 64, 94, 56, 55, 67 ] + - name: Total Visits + color: blue + data: [ 53, 51, 52, 41, 46, 60, 45, 43, 30, 50, 58, 59 ] + social-referrals: demo: false type: line @@ -5,6 +76,7 @@ social-referrals: height: 12 legend: true show-x: true + name: Social referrals series: - name: Facebook color: facebook @@ -40,41 +112,41 @@ completion-tasks: - name: Tasks completion data: [155, 65, 465, 265, 225, 325, 80] -completion-tasks2: +completion-tasks-2: demo: true extend: completion-tasks type: line -completion-tasks3: +completion-tasks-3: demo: true extend: completion-tasks type: area -completion-tasks4: +completion-tasks-4: demo: true extend: completion-tasks stroke-curve: straight type: line -completion-tasks5: +completion-tasks-5: demo: true extend: completion-tasks stroke-curve: stepline type: line -completion-tasks6: +completion-tasks-6: demo: true extend: completion-tasks type: bar horizontal: true -completion-tasks7: +completion-tasks-7: demo: true extend: completion-tasks type: line datalabels: true -completion-tasks8: +completion-tasks-8: demo: true datetime: true type: bar @@ -83,19 +155,19 @@ completion-tasks8: - data: [113, 42, 65, 54, 76, 65, 35] color: red -completion-tasks9: +completion-tasks-9: demo: true - extend: completion-tasks8 + extend: completion-tasks-8 stacked: true -completion-tasks10: +completion-tasks-10: demo: true - extend: completion-tasks8 + extend: completion-tasks-8 type: area -completion-tasks11: +completion-tasks-11: demo: true - extend: completion-tasks8 + extend: completion-tasks-8 type: area stacked: true @@ -107,23 +179,7 @@ tasks-overview: - name: A data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22] -total-sales: - type: donut - demo: true - sparkline: true - series: - - name: Direct - color: blue - data: 44 - - name: Affilliate - color: blue-300 - data: 55 - - name: E-mail - color: green-200 - data: 12 - - name: Other - color: gray-300 - data: 2 + campaigns: type: radialBar @@ -148,7 +204,6 @@ tasks: fill: true remove-padding: true hide-tooltip: true - legend-position: 'top' series: - name: 'New' color: blue @@ -165,7 +220,6 @@ development-activity: groups: [1, 2, 3] hide-points: true remove-padding: true - legend-position: 'top' sparkline: true datetime: true series: diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml index 35ee823fb..48dab4ab6 100644 --- a/src/pages/_data/menu.yml +++ b/src/pages/_data/menu.yml @@ -53,9 +53,6 @@ base: charts: url: charts.html title: Charts - charts-heatmap: - url: charts-heatmap.html - title: Charts heatmap pagination: url: pagination.html title: Pagination diff --git a/src/pages/_docs/charts.md b/src/pages/_docs/charts.md index 75cd5c256..c9c7fecb4 100644 --- a/src/pages/_docs/charts.md +++ b/src/pages/_docs/charts.md @@ -1,26 +1,60 @@ --- title: Charts menu: docs.plugins.charts +libs: apexcharts +description: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages. --- +[ApexCharts](https://apexcharts.com/) documentation. -## Default markup +## Line Chart + +Line charts are a typical pictorial representation that depicts trends and behaviors over time. -{% for chart in site.data.charts %} -{% if chart[1].display %} {% capture code %} -{% assign data = chart[0] %} -{% assign key = 'chart-' | append: data %} -
-
-

{{ chart[1].name }} {{ chart[0] }}

-
-
-
-
-
- {% include ui/chart.html id=key chart-id=data show-scripts=true %} +{% include docs/chart.html chart="demo-line" %} {% endcapture %} -{% include example.html code=code %} -{% endif %} -{% endfor %} +{% include example.html code=code columns=1 %} + +## Area Chart + +Area charts are used to represent quantitative variations. + +{% capture code %} +{% include docs/chart.html chart="demo-area" %} +{% endcapture %} +{% include example.html code=code columns=1 %} + +## Bar Chart + +A bar chart is the best tool for displaying comparisons between categories of data. + +{% capture code %} +{% include docs/chart.html chart="demo-bar" %} +{% endcapture %} +{% include example.html code=code columns=2 %} + +## Pie Chart + +Pie charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio. + +{% capture code %} +{% include docs/chart.html chart="demo-pie" %} +{% endcapture %} +{% include example.html code=code columns=1 %} + +# Heatmap Chart + +Heatmap is a visualization tool that employs color the way a bar chart employs height and width in representing data. + +{% capture code %} +{% include docs/chart.html chart="heatmap-basic" heatmap=true %} +{% endcapture %} +{% include example.html code=code columns=2 %} + +# Advanced example + +{% capture code %} +{% include docs/chart.html chart="social-referrals" %} +{% endcapture %} +{% include example.html code=code columns=2 %} \ No newline at end of file diff --git a/src/pages/_includes/docs/chart.html b/src/pages/_includes/docs/chart.html new file mode 100644 index 000000000..095da7d2f --- /dev/null +++ b/src/pages/_includes/docs/chart.html @@ -0,0 +1,19 @@ +{% assign chart-id = include.chart %} +{% assign data = site.data.charts[chart-id] %} + +{% if data or include.heatmap %} +
+ {% if include.title %} +
+

{{ include.title }}

+
+ {% endif %} +
+ {% if include.heatmap %} + {% include ui/chart-heatmap.html chart-id=chart-id show-scripts=true size="lg" %} + {% else %} + {% include ui/chart.html chart-id=chart-id show-scripts=true size="lg" %} + {% endif %} +
+
+{% endif %} \ No newline at end of file diff --git a/src/pages/_includes/example.html b/src/pages/_includes/example.html index 15c51f6bf..a03fda053 100644 --- a/src/pages/_includes/example.html +++ b/src/pages/_includes/example.html @@ -1,5 +1,3 @@ -{% assign code = code | replace_regex: '// @formatter:(off|on)', '' %} - {% assign demo-code = code %} {% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %} {% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void(0)"' %} @@ -19,23 +17,34 @@ -{% assign code = code | strip %} + +{% capture html %} +{{ code }} + +{% removeemptylines %} +{{ site.captured_global.scripts | last }} +{% endremoveemptylines %} +{% endcapture %} + +{% assign html = html | strip %} +{% assign html = html | replace_regex: '// @formatter:(off|on)', '' %} + {% capture new_line %} {% endcapture %} -{% assign code = code | replace_regex: "\n\n+", new_line %} +{% assign html = html | replace_regex: "\n\n+", new_line %} {% unless include.show-svg %} - {% assign code = code | replace_regex: ']*class="icon ([^"]+)"[^>]*>.*?<\/svg>', '' %} - {% assign code = code | replace_regex: ']*>.*?<\/svg>', '' %} +{% assign html = html | replace_regex: ']*class="icon ([^"]+)"[^>]*>.*?<\/svg>', '' %} +{% assign html = html | replace_regex: ']*>.*?<\/svg>', '' %} {% endunless %} -{% assign code = code | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %} -{% assign code = code | replace_regex: 'src="([^"]+)"', 'src="..."' %} -{% assign code = code | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %} -{% assign code = code | replace_regex: '\{% hide %\}.*?\{% endhide %\}', '' %} -{% assign code = code | htmlbeautifier %} +{% assign html = html | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %} +{% assign html = html | replace_regex: 'src="([^"]+)"', 'src="..."' %} +{% assign html = html | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %} +{% assign html = html | replace_regex: '\{% hide %\}.*?\{% endhide %\}', '' %} + +{% assign html = html | htmlbeautifier %}
- {% highlight html %}{{ code }}{% endhighlight %} + {% highlight html %}{{ html }}{% endhighlight %}
- diff --git a/src/pages/_includes/ui/chart-heatmap.html b/src/pages/_includes/ui/chart-heatmap.html index 59da929fb..1db3c4ffb 100644 --- a/src/pages/_includes/ui/chart-heatmap.html +++ b/src/pages/_includes/ui/chart-heatmap.html @@ -58,17 +58,30 @@ ], xaxis: { type: "category" - } + }, + legend: { + {% if include.legend %} + show: true, + position: 'bottom', + offsetY: 8, + markers: { + width: 10, + height: 10, + radius: 100, + }, + itemMargin: { + horizontal: 8, + }, + {% else %} + show: false, + {% endif %} + }, }; (new ApexCharts(document.querySelector("#chart-{{ id }}"),options)).render(); {% endcapture %} -{% if include.show-scripts %} -{{ script }} -{% else %} {% capture_global scripts %} {{ script }} {% endcapture_global %} -{% endif %} diff --git a/src/pages/_includes/ui/chart.html b/src/pages/_includes/ui/chart.html index 7ab5c6e6a..00fe26ac8 100644 --- a/src/pages/_includes/ui/chart.html +++ b/src/pages/_includes/ui/chart.html @@ -26,7 +26,7 @@ {% 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: "{{ chart-type }}", @@ -144,7 +144,12 @@ {% if data.categories or data.datetime %} xaxis: { labels: { - padding: 0 + padding: 0, + {% if data.x-formatter %} + formatter: function(val) { + return {{ data.x-formatter }} + }, + {% endif %} }, tooltip: { enabled: false @@ -155,7 +160,7 @@ }, {% endif %} {% if data.categories %} - categories: [{% for category in data.categories %}"{{ category }}"{% unless forloop.last %}, {% endunless %}{% endfor %}], + categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}], {% endif %} {% if data.datetime %} @@ -191,14 +196,13 @@ {% endif %} legend: { - {% if include.legend %} + {% if data.legend %} show: true, position: 'bottom', - height: 32, offsetY: 8, markers: { - width: 8, - height: 8, + width: 10, + height: 10, radius: 100, }, itemMargin: { @@ -238,12 +242,8 @@ {% endcapture %} -{% if include.show-scripts %} -{{ script }} -{% else %} {% capture_global scripts %} {{ script }} {% endcapture_global %} -{% endif %} {% endif %} diff --git a/src/pages/charts-heatmap.html b/src/pages/charts-heatmap.html deleted file mode 100644 index 02a4b4254..000000000 --- a/src/pages/charts-heatmap.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Heatmap Charts -page-header: Heatmap Charts -libs: apexcharts ---- - -
-
- {% include cards/charts/heatmap.html id="heatmap-basic" title="Basic Heatmap - Single Series" %} -
- {% unless jekyll.environment == 'development' %} -
- {% include cards/charts/heatmap.html id="heatmap-multiple" title="Heatmap - Multiple series" colors=12 %} -
-
- {% include cards/charts/heatmap.html id="heatmap-labels" title="Heatmap - Labels included" labels=true %} -
-
- {% include cards/charts/heatmap.html id="heatmap-colors" title="Heatmap - Color range" scale=true %} -
- {% endunless %} -
diff --git a/src/scss/demo/_examples.scss b/src/scss/demo/_examples.scss index 06dfc787b..89cd2330b 100644 --- a/src/scss/demo/_examples.scss +++ b/src/scss/demo/_examples.scss @@ -1,6 +1,6 @@ .example { padding: 2rem; - margin: 2rem 0; + margin: 1rem 0 2rem; border: 1px solid $border-color; border-radius: 3px 3px 0 0; position: relative; diff --git a/src/scss/tabler-vendors.scss b/src/scss/tabler-vendors.scss index 216ae601a..619b1b420 100644 --- a/src/scss/tabler-vendors.scss +++ b/src/scss/tabler-vendors.scss @@ -1,6 +1,5 @@ @import "config"; -@import "vendor/apexcharts"; @import "vendor/nouislider"; @import "vendor/litepicker"; @import "vendor/choices"; \ No newline at end of file diff --git a/src/scss/vendor/_apexcharts.scss b/src/scss/vendor/_apexcharts.scss deleted file mode 100644 index cae870a76..000000000 --- a/src/scss/vendor/_apexcharts.scss +++ /dev/null @@ -1,48 +0,0 @@ -.apexcharts-title-text { - font-weight: $font-weight-bold !important; -} - -.apexcharts-tooltip-title { - font-weight: $font-weight-bold !important; - padding-bottom: .25rem !important; -} - -.apexcharts-gridline, -.apexcharts-ycrosshairs, -.apexcharts-xaxis-tick { - stroke: $border-color !important; -} - -.apexcharts-tooltip { - line-height: 1; - color: $white; - background: $dark !important; - border: 0 !important; - border-radius: 3px !important; -} - -.apexcharts-tooltip-title { - margin: 0 !important; - background: transparent !important; - border: 0 !important; -} - -.apexcharts-tooltip-series-group { - padding: 0 8px !important; -} - -.apexcharts-tooltip-marker { - width: .5rem; - height: .5rem; -} - -.apexcharts-gridline, -.apexcharts-ycrosshairs, -.apexcharts-xaxis-tick { - stroke: $gray-300; -} - -.apexcharts-yaxis-label, -.apexcharts-xaxis-label { - fill: $text-muted; -}