Merge branch 'feat/charts' into 'master'

Add charts - 2.11.0

See merge request !2

package.json

 {
   "name": "edition-node-gulp",
   "description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.",
-  "version": "2.3.4",
+  "version": "2.11.0",
   "dependencies": {
     "browser-sync": "^2.26.7",
     "gulp": "^4.0.2",
@@ -53,6 +53,7 @@
     "@rollup/stream": "^1.0.0",
     "acorn": "^6.4.1",
     "autoprefixer": "^9.5.1",
+    "chart.js": "^4.2.0",
     "color": "^3.1.2",
     "gulp-add-src": "^1.0.0",
     "gulp-concat": "^2.6.1",

source/_patterns/02-organisms/12-chart/chart.mustache

+<div class="py-4">
+    <canvas
+      class="lg:h-120 lg:w-auto w-full mx-auto __chart-example"
+    ></canvas>
+</div>

source/js/components/RegionMap.vue

 <template>
-  <div class="region-map flex justify-start items-center space-x-16 ">
+  <div class="region-map flex justify-start items-center space-x-16">
     <div class="">
       <h1 class="head-alt-sm mb-2">Vyberte kraj</h1>
       <ul class="region-map__list leading-loose whitespace-no-wrap text-sm">

source/js/main.js

@@ -11,6 +11,8 @@ import Navbar from "./components/navbar/Navbar";
 import FooterCollapsible from "./components/footer/FooterCollapsible";
 import FlipClock from "./components/FlipClock";
 
+import Chart from 'chart.js/auto';
+
 
 Vue.component("ui-calendar-renderer", Renderer);
 Vue.component("ui-calendar-dummy-provider", DummyProvider);
@@ -51,9 +53,41 @@ function renderVueAppElement(el) {
 }
 
 
+function renderChart(element) {
+  const data = [
+    { year: 2010, count: 10 },
+    { year: 2011, count: 20 },
+    { year: 2012, count: 15 },
+    { year: 2013, count: 25 },
+    { year: 2014, count: 22 },
+    { year: 2015, count: 30 },
+    { year: 2016, count: 28 },
+  ];
+
+  new Chart(
+    element,
+    {
+      type: 'bar',
+      data: {
+        labels: data.map(row => row.year),
+        datasets: [
+          {
+            label: 'Firemní akvizice každý rok',
+            data: data.map(row => row.count)
+          }
+        ]
+      }
+    }
+  );
+}
+
+
 function init(event) {
   // Initialize Vue.js apps.
   forEachNode(document.querySelectorAll('.__js-root'), renderVueAppElement)
+
+  // Show example charts.
+  forEachNode(document.querySelectorAll('.__chart-example'), renderChart);
 }
 
 document.addEventListener('DOMContentLoaded', init);

tailwind.config.js

@@ -18,7 +18,7 @@ module.exports = {
       whitelistPatterns: [
         /^((sm|md|lg|xl)\:)?(block|inline|fixed|absolute|inline-block|flex|inline-flex|grid)/,
         /^((sm|md|lg|xl)\:)?w-\d\d?/,
-        /^((sm|md|lg|xl)\:)?w-screen/,
+        /^((sm|md|lg|xl)\:)?w-(auto|full|screen)/,
         /^((sm|md|lg|xl)\:)?h-\d\d?/,
         /^((sm|md|lg|xl)\:)?h-screen/,
         /^((sm|md|lg|xl)\:)?-?m.?-\d\d?/,
@@ -55,6 +55,7 @@ module.exports = {
         /^overflow-*/,
         /^duration-*/,
         /^max-w-*/,
+        /^max-h-*/,
         /ico--*/,
       ],
     }
@@ -64,6 +65,9 @@ module.exports = {
       maxWidth: {
         'xxs': '16rem',
       },
+      height: {
+        '120': '30rem',
+      },
       opacity: {
         '85': '0.85',
       },
@@ -77,7 +81,7 @@ module.exports = {
         '36': '9rem',
         '44': '11rem',
         '52': '13rem',
-        '80': '20rem'
+        '80': '20rem',
       },
       // flip-x
       scale: {