charts docs

2025-12-24 02:38:15 +04:00 · 2021-02-21 21:06:27 +01:00
parent 1ba76551f9
commit b1af6143d3
11 changed files with 208 additions and 153 deletions
--- 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:
--- 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
--- 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 %}
-	<div class="card">
-		<div class="card-header">
-			<h3 class="card-title">{{ chart[1].name }} {{ chart[0] }}</h3>
-		</div>
-		<div class="card-body">
-			<div id="{{ key }}" style="height: 16rem"></div>
-		</div>
-	</div>
-	{% 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 %}
--- a/src/pages/_includes/docs/chart.html
+++ 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 %}
+<div class="card">
+	{% if include.title %}
+	<div class="card-header">
+		<h3 class="card-title">{{ include.title }}</h3>
+	</div>
+	{% endif %}
+	<div class="card-body">
+		{% 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 %}
+	</div>
+</div>
+{% endif %}
--- 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 @@
 	</div>
 </div>

-{% 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: '<svg[^>]*class="icon ([^"]+)"[^>]*>.*?<\/svg>', '<!-- SVG icon code with class="\1" -->' %}
-	{% assign code = code | replace_regex: '<svg[^>]*>.*?<\/svg>', '<!-- SVG icon code -->' %}
+{% assign html = html | replace_regex: '<svg[^>]*class="icon ([^"]+)"[^>]*>.*?<\/svg>', '<!-- SVG icon code with class="\1" -->' %}
+{% assign html = html | replace_regex: '<svg[^>]*>.*?<\/svg>', '<!-- SVG icon code -->' %}
 {% 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 %}

 <div class="example-code">
-	{% highlight html %}{{ code }}{% endhighlight %}
+	{% highlight html %}{{ html }}{% endhighlight %}
 </div>
-
--- 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();
 </script>
 {% endcapture %}

-{% if include.show-scripts %}
-{{ script }}
-{% else %}
 {% capture_global scripts %}
 {{ script }}
 {% endcapture_global %}
-{% endif %}
--- a/src/pages/_includes/ui/chart.html
+++ b/src/pages/_includes/ui/chart.html
@@ -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 @@
 </script>
 {% endcapture %}

-{% if include.show-scripts %}
-{{ script }}
-{% else %}
 {% capture_global scripts %}
 {{ script }}
 {% endcapture_global %}
-{% endif %}

 {% endif %}
--- a/src/pages/charts-heatmap.html
+++ b/src/pages/charts-heatmap.html
@@ -1,22 +0,0 @@
---
-title: Heatmap Charts
-page-header: Heatmap Charts
-libs: apexcharts
---
-
-<div class="row row-cards">
-	<div class="col-xl-6">
-		{% include cards/charts/heatmap.html id="heatmap-basic" title="Basic Heatmap - Single Series" %}
-	</div>
-	{% unless jekyll.environment == 'development' %}
-	<div class="col-xl-6">
-		{% include cards/charts/heatmap.html id="heatmap-multiple" title="Heatmap - Multiple series" colors=12 %}
-	</div>
-	<div class="col-xl-6">
-		{% include cards/charts/heatmap.html id="heatmap-labels" title="Heatmap - Labels included" labels=true %}
-	</div>
-	<div class="col-xl-6">
-		{% include cards/charts/heatmap.html id="heatmap-colors" title="Heatmap - Color range" scale=true %}
-	</div>
-	{% endunless %}
-</div>
--- 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;
--- 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";
--- a/src/scss/vendor/_apexcharts.scss
+++ b/src/scss/vendor/_apexcharts.scss
@@ -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;
-}