@tabler/core 1.0.0-beta20 → 1.0.0-beta21

package/docs/components/charts.mdx

@@ -0,0 +1,526 @@
+---
+title: 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.
+---
+
+To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
+
+See also the [ApexCharts](https://apexcharts.com/) documentation.
+
+## Line Chart
+
+Line charts are a typical pictorial representation that depicts trends and behaviors over time.
+
+```html example code centered columns={2} height="25rem"
+<div class="card">
+  <div class="card-body">
+    <div id="chart-demo-line" class="chart-lg"></div>
+  </div>
+</div>
+
+<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-line'), {
+      chart: {
+        type: "line",
+        fontFamily: 'inherit',
+        height: 240,
+        parentHeightOffset: 0,
+        toolbar: {
+          show: false,
+        },
+        animations: {
+          enabled: false
+        },
+      },
+      fill: {
+        opacity: 1,
+      },
+      stroke: {
+        width: 2,
+        lineCap: "round",
+        curve: "straight",
+      },
+      series: [{
+        name: "Session Duration",
+        data: [117, 92, 94, 98, 75, 110, 69, 80, 109, 113, 115, 95]
+      }, {
+        name: "Page Views",
+        data: [59, 80, 61, 66, 70, 84, 87, 64, 94, 56, 55, 67]
+      }, {
+        name: "Total Visits",
+        data: [53, 51, 52, 41, 46, 60, 45, 43, 30, 50, 58, 59]
+      }],
+      tooltip: {
+        theme: 'dark'
+      },
+      grid: {
+        padding: {
+          top: -20,
+          right: 0,
+          left: -4,
+          bottom: -4
+        },
+        strokeDashArray: 4,
+      },
+      xaxis: {
+        labels: {
+          padding: 0,
+        },
+        tooltip: {
+          enabled: false
+        },
+        type: 'datetime',
+      },
+      yaxis: {
+        labels: {
+          padding: 4
+        },
+      },
+      labels: [
+        '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02'
+      ],
+      colors: [tabler.getColor("yellow"), tabler.getColor("green"), tabler.getColor("primary")],
+      legend: {
+        show: true,
+        position: 'bottom',
+        offsetY: 12,
+        markers: {
+          width: 10,
+          height: 10,
+          radius: 100,
+        },
+        itemMargin: {
+          horizontal: 8,
+          vertical: 8
+        },
+      },
+    })).render();
+  });
+</script>
+```
+
+## Area Chart
+
+Area charts are used to represent quantitative variations.
+
+```html example code centered columns={2} height="25rem"
+<div class="card">
+  <div class="card-body">
+    <div id="chart-demo-area" class="chart-lg"></div>
+  </div>
+</div>
+
+<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-area'), {
+      chart: {
+        type: "area",
+        fontFamily: 'inherit',
+        height: 240,
+        parentHeightOffset: 0,
+        toolbar: {
+          show: false,
+        },
+        animations: {
+          enabled: false
+        },
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      fill: {
+        opacity: .16,
+        type: 'solid'
+      },
+      stroke: {
+        width: 2,
+        lineCap: "round",
+        curve: "smooth",
+      },
+      series: [{
+        name: "series1",
+        data: [56, 40, 39, 47, 34, 48, 44]
+      }, {
+        name: "series2",
+        data: [45, 43, 30, 23, 38, 39, 54]
+      }],
+      tooltip: {
+        theme: 'dark'
+      },
+      grid: {
+        padding: {
+          top: -20,
+          right: 0,
+          left: -4,
+          bottom: -4
+        },
+        strokeDashArray: 4,
+      },
+      xaxis: {
+        labels: {
+          padding: 0,
+        },
+        tooltip: {
+          enabled: false
+        },
+        axisBorder: {
+          show: false,
+        },
+        type: 'datetime',
+      },
+      yaxis: {
+        labels: {
+          padding: 4
+        },
+      },
+      labels: [
+        '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27'
+      ],
+      colors: [tabler.getColor("primary"), tabler.getColor("purple")],
+      legend: {
+        show: true,
+        position: 'bottom',
+        offsetY: 12,
+        markers: {
+          width: 10,
+          height: 10,
+          radius: 100,
+        },
+        itemMargin: {
+          horizontal: 8,
+          vertical: 8
+        },
+      },
+    })).render();
+  });
+</script>
+```
+
+## Bar Chart
+
+A bar chart is the best tool for displaying comparisons between categories of data.
+
+```html example code centered columns={2} height="25rem"
+<div class="card">
+  <div class="card-body">
+    <div id="chart-demo-bar" class="chart-lg"></div>
+  </div>
+</div>
+
+<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-bar'), {
+      chart: {
+        type: "bar",
+        fontFamily: 'inherit',
+        height: 240,
+        parentHeightOffset: 0,
+        toolbar: {
+          show: false,
+        },
+        animations: {
+          enabled: false
+        },
+        stacked: true,
+      },
+      plotOptions: {
+        bar: {
+          barHeight: '50%',
+          horizontal: true,
+        }
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      fill: {
+        opacity: 1,
+      },
+      series: [{
+        name: "Container for a Fanta",
+        data: [44, 55, 41, 37, 22, 43, 21]
+      }, {
+        name: "Strange sunglasses",
+        data: [53, 32, 33, 52, 13, 43, 32]
+      }, {
+        name: "Pen Pineapple Apple Pen",
+        data: [12, 17, 11, 9, 15, 11, 20]
+      }, {
+        name: "Binoculars",
+        data: [9, 7, 5, 8, 6, 9, 4]
+      }, {
+        name: "Magical notebook",
+        data: [25, 12, 19, 32, 25, 24, 10]
+      }],
+      tooltip: {
+        theme: 'dark'
+      },
+      grid: {
+        padding: {
+          top: -20,
+          right: 0,
+          left: -4,
+          bottom: -4
+        },
+        strokeDashArray: 4,
+      },
+      xaxis: {
+        labels: {
+          padding: 0,
+          formatter: function(val) {
+            return val + "K"
+          },
+        },
+        tooltip: {
+          enabled: false
+        },
+        axisBorder: {
+          show: false,
+        },
+        categories: ['2008', '2009', '2010', '2011', '2012', '2013', '2014'],
+      },
+      yaxis: {
+        labels: {
+          padding: 4
+        },
+      },
+      colors: [tabler.getColor("purple"), tabler.getColor("green"), tabler.getColor("yellow"), tabler.getColor("red"), tabler.getColor("primary")],
+      legend: {
+        show: true,
+        position: 'bottom',
+        offsetY: 12,
+        markers: {
+          width: 10,
+          height: 10,
+          radius: 100,
+        },
+        itemMargin: {
+          horizontal: 8,
+          vertical: 8
+        },
+      },
+    })).render();
+  });
+</script>
+```
+
+## Pie Chart
+
+Pie charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio.
+
+```html example code centered columns={2} height="25rem"
+<div class="card">
+  <div class="card-body">
+    <div id="chart-demo-pie" class="chart-lg"></div>
+  </div>
+</div>
+
+<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
+      chart: {
+        type: "donut",
+        fontFamily: 'inherit',
+        height: 240,
+        sparkline: {
+          enabled: true
+        },
+        animations: {
+          enabled: false
+        },
+      },
+      fill: {
+        opacity: 1,
+      },
+      series: [44, 55, 12, 2],
+      labels: ["Direct", "Affilliate", "E-mail", "Other"],
+      tooltip: {
+        theme: 'dark'
+      },
+      grid: {
+        strokeDashArray: 4,
+      },
+      colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("primary", 0.6), tabler.getColor("gray-300")],
+      legend: {
+        show: true,
+        position: 'bottom',
+        offsetY: 12,
+        markers: {
+          width: 10,
+          height: 10,
+          radius: 100,
+        },
+        itemMargin: {
+          horizontal: 8,
+          vertical: 8
+        },
+      },
+      tooltip: {
+        fillSeriesColor: false
+      },
+    })).render();
+  });
+</script>
+```
+
+## Heatmap Chart
+
+Heatmap is a visualization tool that employs color the way a bar chart employs height and width in representing data.
+
+```html example code centered columns={2} height="25rem"
+<div class="card">
+  <div class="card-body">
+    <div id="chart-demo-pie" class="chart-lg"></div>
+  </div>
+</div>
+
+<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
+      chart: {
+        type: "donut",
+        fontFamily: 'inherit',
+        height: 240,
+        sparkline: {
+          enabled: true
+        },
+        animations: {
+          enabled: false
+        },
+      },
+      fill: {
+        opacity: 1,
+      },
+      series: [44, 55, 12, 2],
+      labels: ["Direct", "Affilliate", "E-mail", "Other"],
+      tooltip: {
+        theme: 'dark'
+      },
+      grid: {
+        strokeDashArray: 4,
+      },
+      colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("primary", 0.6), tabler.getColor("gray-300")],
+      legend: {
+        show: true,
+        position: 'bottom',
+        offsetY: 12,
+        markers: {
+          width: 10,
+          height: 10,
+          radius: 100,
+        },
+        itemMargin: {
+          horizontal: 8,
+          vertical: 8
+        },
+      },
+      tooltip: {
+        fillSeriesColor: false
+      },
+    })).render();
+  });
+</script>
+```
+
+## Advanced example
+
+```html example code centered columns={2} height="25rem"
+<div class="card">
+  <div class="card-body">
+    <div id="chart-social-referrals" class="chart-lg"></div>
+  </div>
+</div>
+
+<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.ApexCharts && (new ApexCharts(document.getElementById('chart-social-referrals'), {
+      chart: {
+        type: "line",
+        fontFamily: 'inherit',
+        height: 240,
+        parentHeightOffset: 0,
+        toolbar: {
+          show: false,
+        },
+        animations: {
+          enabled: false
+        },
+      },
+      fill: {
+        opacity: 1,
+      },
+      stroke: {
+        width: 2,
+        lineCap: "round",
+        curve: "smooth",
+      },
+      series: [{
+        name: "Facebook",
+        data: [13281, 8521, 15038, 9983, 15417, 8888, 7052, 14270, 5214, 9587, 5950, 16852, 17836, 12217, 17406, 12262, 9147, 14961, 18292, 15230, 13435, 10649, 5140, 13680, 4508, 13271, 13413, 5543, 18727, 18238, 18175, 6246, 5864, 17847, 9170, 6445, 12945, 8142, 8980, 10422, 15535, 11569, 10114, 17621, 16138, 13046, 6652, 9906, 14100, 16495, 6749]
+      }, {
+        name: "Twitter",
+        data: [3680, 1862, 3070, 2252, 5348, 3091, 3000, 3984, 5176, 5325, 2420, 5474, 3098, 1893, 3748, 2879, 4197, 5186, 4213, 4334, 2807, 1594, 4863, 2030, 3752, 4856, 5341, 3954, 3461, 3097, 3404, 4949, 2283, 3227, 3630, 2360, 3477, 4675, 1901, 2252, 3347, 2954, 5029, 2079, 2830, 3292, 4578, 3401, 4104, 3749, 4457, 3734]
+      }, {
+        name: "Dribbble",
+        data: [722, 1866, 961, 1108, 1110, 561, 1753, 1815, 1985, 776, 859, 547, 1488, 766, 702, 621, 1599, 1372, 1620, 963, 759, 764, 739, 789, 1696, 1454, 1842, 734, 551, 1689, 1924, 1875, 908, 1675, 1541, 1953, 534, 502, 1524, 1867, 719, 1472, 1608, 1025, 889, 1150, 654, 1695, 1662, 1285, 1787]
+      }],
+      tooltip: {
+        theme: 'dark'
+      },
+      grid: {
+        padding: {
+          top: -20,
+          right: 0,
+          left: -4,
+          bottom: -4
+        },
+        strokeDashArray: 4,
+        xaxis: {
+          lines: {
+            show: true
+          }
+        },
+      },
+      xaxis: {
+        labels: {
+          padding: 0,
+        },
+        tooltip: {
+          enabled: false
+        },
+        type: 'datetime',
+      },
+      yaxis: {
+        labels: {
+          padding: 4
+        },
+      },
+      labels: [
+        '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26', '2020-07-27', '2020-07-28', '2020-07-29', '2020-07-30', '2020-07-31', '2020-08-01', '2020-08-02', '2020-08-03', '2020-08-04', '2020-08-05', '2020-08-06', '2020-08-07', '2020-08-08', '2020-08-09', '2020-08-10'
+      ],
+      colors: [tabler.getColor("facebook"), tabler.getColor("twitter"), tabler.getColor("dribbble")],
+      legend: {
+        show: true,
+        position: 'bottom',
+        offsetY: 12,
+        markers: {
+          width: 10,
+          height: 10,
+          radius: 100,
+        },
+        itemMargin: {
+          horizontal: 8,
+          vertical: 8
+        },
+      },
+    })).render();
+  });
+</script>
+```

package/docs/components/countup.mdx

@@ -0,0 +1,136 @@
+---
+title: Countup
+description: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
+libs: countup
+---
+
+To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
+
+## Default countup
+
+To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
+
+```html code example
+<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+
+<h1 data-countup>30000</h1>
+```
+
+## Duration
+
+Set the `duration` to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.
+
+```html code example
+<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+
+<h1 data-countup>30000</h1>
+<h1 data-countup='{"duration":4}'>30000</h1>
+<h1 data-countup='{"duration":6}'>30000</h1>
+```
+
+## Starting value
+
+By default the countup will start from zero. If you want to set a different start value use `startVal`.
+You can also set the start value to be greater than the final value, so that it counts down instead of up.
+
+```html code example
+<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+
+<h1 data-countup='{"startVal":12345}'>30000</h1>
+<h1 data-countup='{"startVal":47655}'>30000</h1>
+```
+
+## Decimal places
+
+Set how many decimal numbers should be displayed using `decimalPlaces`.
+
+```html code example
+<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+
+<h1 data-countup>3.123</h1>
+<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
+<h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
+<h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
+```
+
+## Easing
+
+Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration.
+
+```html code example
+<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+
+<h1 data-countup>30000</h1>
+<h1 data-countup='{"useEasing": false}'>30000</h1>
+```
+
+## Use grouping
+
+Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default and the default group separator is a comma.
+
+```html code example
+<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+
+<h1 data-countup>30000</h1>
+<h1 data-countup='{"useGrouping": false}'>30000</h1>
+```
+
+## Separator
+
+You can change the default comma group separator using `separator` and specifying the one you wish to use.
+
+```html code example
+<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+
+<h1 data-countup>3000000</h1>
+<h1 data-countup='{"separator":" "}'>3000000</h1>
+<h1 data-countup='{"separator":"-"}'>3000000</h1>
+<h1 data-countup='{"separator":":"}'>3000000</h1>
+```
+
+## Decimal separator
+
+You can also change the decimal separator which is set to a full stop by default. To do it, use `decimal` and specify the decimal separator of your choice.
+
+```html code example
+<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+
+<h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
+<h1 data-countup='{"decimalPlaces":2,"decimal":".."}'>3.12</h1>
+<h1 data-countup='{"decimalPlaces":2,"decimal":"^"}'>3.12</h1>
+<h1 data-countup='{"decimalPlaces":2,"decimal":":"}'>3.12</h1>
+```
+
+## Prefix
+
+Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.
+
+```html code example
+<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+
+<h1 data-countup='{"prefix":"$"}'>30000</h1>
+<h1 data-countup='{"prefix":"€"}'>30000</h1>
+<h1 data-countup='{"prefix":"£"}'>30000</h1>
+```
+
+## Suffix
+
+Set the countup suffix using `suffix`.
+
+```html code example
+<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+
+<h1 data-countup='{"suffix":"%"}'>30</h1>
+<h1 data-countup='{"suffix":"‰"}'>30</h1>
+<h1 data-countup='{"suffix":"k"}'>30</h1>
+```
+
+Of course you can mix all of these:
+
+```html code example
+<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+
+<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
+```
+
+For more advanced features of countups, click [**here**](https://inorganik.github.io/countUp.js/) and see what more you can do.