From d55c0e6348559dc28939cd927558da5d723e5dd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1?= <git@imaniti.org>
Date: Tue, 24 Jan 2023 20:18:09 +0100
Subject: [PATCH] added charts (wip)
---
package-lock.json | 17 +++++++++-
package.json | 1 +
.../02-organisms/11-chart/chart.mustache | 3 ++
source/js/components/RegionMap.vue | 2 +-
source/js/main.js | 34 +++++++++++++++++++
tailwind.config.js | 1 +
6 files changed, 56 insertions(+), 2 deletions(-)
create mode 100644 source/_patterns/02-organisms/11-chart/chart.mustache
diff --git a/package-lock.json b/package-lock.json
index 6dd6cf0..d486a82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "edition-node-gulp",
- "version": "2.3.3",
+ "version": "2.3.4",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -136,6 +136,12 @@
}
}
},
+ "@kurkle/color": {
+ "version": "0.3.2",
+ "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+ "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
+ "dev": true
+ },
"@rollup/plugin-buble": {
"version": "0.21.3",
"resolved": "https://registry.npmjs.org/@rollup/plugin-buble/-/plugin-buble-0.21.3.tgz",
@@ -1558,6 +1564,15 @@
"is-regex": "^1.0.3"
}
},
+ "chart.js": {
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.2.0.tgz",
+ "integrity": "sha512-wbtcV+QKeH0F7gQZaCJEIpsNriFheacouJQTVIjITi3eQA8bTlIBoknz0+dgV79aeKLNMAX+nDslIVE/nJ3rzA==",
+ "dev": true,
+ "requires": {
+ "@kurkle/color": "^0.3.0"
+ }
+ },
"chokidar": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
diff --git a/package.json b/package.json
index 006ceaf..8efd572 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/source/_patterns/02-organisms/11-chart/chart.mustache b/source/_patterns/02-organisms/11-chart/chart.mustache
new file mode 100644
index 0000000..f91cae4
--- /dev/null
+++ b/source/_patterns/02-organisms/11-chart/chart.mustache
@@ -0,0 +1,3 @@
+<div class="max-h-80">
+ <canvas class="__chart-example"></canvas>
+</div>
diff --git a/source/js/components/RegionMap.vue b/source/js/components/RegionMap.vue
index ebff748..d247af1 100644
--- a/source/js/components/RegionMap.vue
+++ b/source/js/components/RegionMap.vue
@@ -1,5 +1,5 @@
<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">
diff --git a/source/js/main.js b/source/js/main.js
index b42e2bf..ea79399 100644
--- a/source/js/main.js
+++ b/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);
diff --git a/tailwind.config.js b/tailwind.config.js
index ee8eef7..2daa9c7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -54,6 +54,7 @@ module.exports = {
/^break-*/,
/^overflow-*/,
/^duration-*/,
+ /^max-h-*/,
/^max-w-*/,
/ico--*/,
],
--
GitLab