peity remove

package.json

@@ -91,7 +91,6 @@
     "jquery": "^3.5.1",
     "jqvmap": "^1.5.1",
     "nouislider": "^14.6.2",
-    "peity": "^3.3.0",
     "popper.js": "^1.16.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-commonjs": "^10.1.0",

src/pages/_data/libs.json

@@ -15,7 +15,6 @@
     "jqvmap-world": "jqvmap/dist/maps/jquery.vmap.world.js",
     "jqvmap-usa": "jqvmap/dist/maps/jquery.vmap.usa.js",
     "jqvmap-europe": "jqvmap/dist/maps/continents/jquery.vmap.europe.js",
-    "peity": "peity/jquery.peity.min.js",
     "flatpickr": [
       "flatpickr/dist/flatpickr.min.js",
       "flatpickr/dist/plugins/rangePlugin.js"

src/pages/_includes/cards/development-activity.html

@@ -5,7 +5,7 @@
 	<div class="position-relative">
 		<div class="position-absolute top-0 left-0 px-3 mt-1 w-50">
 			<div class="row g-2">
-				<div class="col-auto">{% include ui/sparkline.html percentage=35 type="pie" %}</div>
+				<div class="col-auto">{% include ui/chart-sparkline.html percentage=35 type="donut" %}</div>
 				<div class="col">
 					<div>Today's Earning: $4,262.40</div>
 					<div class="text-muted">{% include ui/icon.html icon="trending-up" color="green" class="icon-inline" %} +5% more than yesterday</div>

src/pages/_includes/cards/most-visited-pages.html

@@ -25,7 +25,7 @@
 				<td class="text-muted">{{ page.unique | format_number }}</td>
 				<td class="text-muted">{{ page.bounce-rate }}</td>
 				<td class="text-right">
-					{% include ui/sparkline.html type="line" data=data %}
+					{% include ui/chart-sparkline.html type="line" data=data %}
 				</td>
 			</tr>
 			{% endfor %}

src/pages/_includes/cards/small-stats.html

@@ -10,7 +10,7 @@
 
 		{% if include.chart-data and chart-position == "left" %}
 		<div class="mr-3">
-			{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
+			{% include ui/chart-sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
 		</div>
 		{% endif %}
 
@@ -26,7 +26,7 @@
 
 		{% if include.chart-data and chart-position=="right" %}
 		<div class="ml-auto">
-			{% include ui/sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
+			{% include ui/chart-sparkline.html data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
 		</div>
 		{% endif %}
 	</div>

src/pages/_includes/cards/table-users.html

@@ -56,7 +56,7 @@
 <!--					     data-thickness="3" data-color="blue">-->
 <!--						<div class="chart-circle-value">{{ percentage }}%</div>-->
 <!--					</div>-->
-					{% include ui/sparkline.html percentage=percentage type="pie" %}
+					{% include ui/chart-sparkline.html percentage=percentage type="donut" %}
 				</td>
 			</tr>
 			{% endfor %}

src/pages/_includes/ui/chart-sparkline.html

+{% assign type = include.type | default: 'bar' %}
+{% assign id = 0 | random_id %}
+{% assign color = include.color | default: 'blue' %}
+{% assign height = include.height | default: 2.5 %}
+
+{% assign data = include.data %}
+
+<div class="chart-sparkline{% if type == 'pie' or type == 'donut' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>
+
+{% capture_global scripts %}
+<script>
+	// @formatter:off
+	document.addEventListener("DOMContentLoaded", function () {
+		{% if jekyll.environment == 'development' %}
+		window.tabler_chart = window.tabler_chart || {};
+		{% endif %}
+
+		window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["sparkline-{{ id }}"] = {% endif %}new ApexCharts(document.getElementById('sparkline-{{ id }}'), {
+			chart: {
+				type: "{% if type == 'donut' %}radialBar{% else %}{{ type }}{% endif %}",
+				fontFamily: 'inherit',
+				height: {{ height | times: 16 | round }},
+				{% if type == 'pie' %}
+				width: {{ height | times: 16 | round }},
+				{% endif %}
+				animations: {
+					enabled: false
+				},
+				sparkline: {
+					enabled: true
+				},
+			},
+			plotOptions: {
+				radialBar: {
+					hollow: {
+						margin: 0,
+						size: '75%'
+					},
+					track: {
+						margin: 0
+					},
+					dataLabels: {
+						show: false
+					}
+				}
+			},
+			{% if type == 'area' or type == 'line' %}
+			stroke: {
+				width: 2,
+				lineCap: "round",
+			},
+			{% endif %}
+
+			{% if type == 'donut' %}
+			colors: ["{{ color | default: 'blue' | tabler_color }}"],
+			series: [{{ data }}],
+			{% else %}
+			series: [{
+				color: "{{ color | default: 'blue' | tabler_color }}",
+				data: [{{ data }}]
+			}],
+			{% endif %}
+		})).render();
+	});
+	// @formatter:on
+</script>
+{% endcapture_global %}

src/pages/_includes/ui/sparkline.html

-{% assign type = include.type | default: 'bar' %}
-{% assign id = 0 | random_id %}
-{% assign color = include.color | default: 'blue' %}
-
-{% assign data = include.data %}
-{% if include.percentage %}
-	{% assign data = include.percentage | append: "/100" %}
-{% endif %}
-
-<div class="chart-sparkline{% if type == 'pie' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}" id="sparkline-{{ id }}"></div>
-
-{% capture_global scripts %}
-<script>
-	document.addEventListener("DOMContentLoaded", function () {
-		$().peity && $('#sparkline-{{ id }}').text("{{ data }}").peity("{{ type | default: 'bar' }}", {
-			width: {% if type == 'pie' %}40{% else %}64{% endif %},
-			height: 40,
-			stroke: "{{ color | tabler_color }}",
-			strokeWidth: 2,
-			fill: {% if type == 'pie' %}["{{ color | default: 'blue' | tabler_color }}", "{{ 'border-color' | tabler_color }}"]{% elsif type == 'line' %}["{{ color | append: '-100' | tabler_color }}"]{% else %}"transparent"{% endif %},
-			padding: .2,
-			{% if type == 'pie' %}innerRadius: 16,{% endif %}
-		});
-	});
-</script>
-{% endcapture_global %}

src/pages/_layouts/homepage.html

@@ -4,7 +4,7 @@ layout: default
 page-header: Dashboard
 page-header-pretitle: Overview
 page-header-actions: buttons
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
+libs: jquery, apexcharts, jqvmap, jqvmap-world
 ---
 
 {% include layout/homepage.html %}

src/pages/layout-horizontal.html

 ---
 page-header: Horizontal layout
 menu: layout.horizontal
-libs: jquery, apexcharts, peity, jqvmap, jqvmap-world
 layout: homepage
 ---
\ No newline at end of file

src/pages/widgets.html

@@ -2,7 +2,7 @@
 title: Widgets
 page-header: Widgets
 menu: extra.widgets
-libs: jquery, apexcharts, peity
+libs: jquery, apexcharts
 ---
 
 <div class="row row-cards">
@@ -49,13 +49,13 @@ libs: jquery, apexcharts, peity
 		{% include cards/small-stats.html icon="message" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
 	</div>
 
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}
 	</div>
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="green" count=78 subtitle="Orders" description="32 shipped" %}
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56" color="green" count=78 subtitle="Orders" description="32 shipped" %}
 	</div>
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="red" count=1352 subtitle="Members" description="163 registered today" %}
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56" color="red" count=1352 subtitle="Members" description="163 registered today" %}
 	</div>
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
 	</div>
 
 	<div class="col-md-6 col-lg-4">
@@ -63,9 +63,9 @@ libs: jquery, apexcharts, peity
 			<div class="col-12">{% include cards/small-stats.html chart-type="line" chart-data="20,0,40,30,40,30,80,60" %}</div>
 			<div class="col-12">{% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,10,40,60,80,70" color="red" icon="heart" %}</div>
 			<div class="col-12">{% include cards/small-stats.html chart-type="bar" chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="brand-github" %}</div>
-			<div class="col-12">{% include cards/small-stats.html chart-type="pie" chart-data="12/100" person-id=10 %}</div>
-			<div class="col-12">{% include cards/small-stats.html chart-type="pie" chart-data="12/100" person-id=11 %}</div>
-			<div class="col-12">{% include cards/small-stats.html chart-type="pie" chart-data="56/100" person-id=1 %}</div>
+			<div class="col-12">{% include cards/small-stats.html chart-type="donut" chart-data="12" person-id=10 %}</div>
+			<div class="col-12">{% include cards/small-stats.html chart-type="donut" chart-data="12" person-id=11 %}</div>
+			<div class="col-12">{% include cards/small-stats.html chart-type="donut" chart-data="56" person-id=1 %}</div>
 			<div class="col-12">{% include cards/small-stats.html color="green" person-id=4 %}</div>
 			<div class="col-12">{% include cards/small-stats.html small-icon="trending-down" color="red" person-id=3 %}</div>
 			<div class="col-12">{% include cards/code.html %}</div>

src/scss/tabler-vendors.scss

 @import "config";
 
-@import "vendor/peity";
 @import "vendor/selectize";
 @import "vendor/jqvmap";
 @import "vendor/apexcharts";

src/scss/ui/_charts.scss

@@ -27,6 +27,7 @@ Chart sparkline
   width: 4rem;
   height: 2.5rem;
   line-height: 1;
+  min-height: 0 !important;
 }
 
 .chart-sparkline-square {

src/scss/vendor/_peity.scss

-.peity {
-  stroke-linejoin: round;
-  stroke-linecap: round;
-}
\ No newline at end of file