From 226377e380045c1cb649381ce1f44a76fb28ad0f Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 1 Sep 2021 20:46:43 +0200
Subject: [PATCH 01/17] feat: do not generate new random colors

---
 webcomponents/charts/CHANGELOG.md             |  6 +++
 webcomponents/charts/package-lock.json        |  2 +-
 webcomponents/charts/package.json             | 44 +++++++++----------
 .../deckdeckgo-bar-chart.tsx                  |  4 +-
 .../deckdeckgo-line-chart.tsx                 |  8 +++-
 .../deckdeckgo-pie-chart.tsx                  | 12 ++---
 webcomponents/charts/src/index.html           | 36 +++++++++++++++
 7 files changed, 82 insertions(+), 30 deletions(-)

diff --git a/webcomponents/charts/CHANGELOG.md b/webcomponents/charts/CHANGELOG.md
index fb774788e..55e76d046 100644
--- a/webcomponents/charts/CHANGELOG.md
+++ b/webcomponents/charts/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 2.2.0 (2021-09-01)
+
+### Features
+
+- do not generate new random colors on redraw
+
 # 2.1.0 (2021-05-29)
 
 ### Build
diff --git a/webcomponents/charts/package-lock.json b/webcomponents/charts/package-lock.json
index 23473661f..9986bf45c 100644
--- a/webcomponents/charts/package-lock.json
+++ b/webcomponents/charts/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/charts",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/webcomponents/charts/package.json b/webcomponents/charts/package.json
index 4fc1d4cb6..256d20ec3 100644
--- a/webcomponents/charts/package.json
+++ b/webcomponents/charts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/charts",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A collection of Web Components to easily draw charts",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -23,33 +23,33 @@
     "test.watch": "stencil test --spec --e2e --watchAll"
   },
   "dependencies": {
-    "d3-array": "^2.12.1",
-    "d3-axis": "^2.1.0",
-    "d3-ease": "^2.0.0",
-    "d3-scale": "^3.3.0",
-    "d3-selection": "^2.0.0",
-    "d3-shape": "^2.1.0",
-    "d3-transition": "^2.0.0",
-    "date-fns": "^2.22.1"
+    "d3-array": "^3.0.2",
+    "d3-axis": "^3.0.0",
+    "d3-ease": "^3.0.1",
+    "d3-scale": "^4.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.0.1",
+    "d3-transition": "^3.0.1",
+    "date-fns": "^2.23.0"
   },
   "devDependencies": {
     "@deckdeckgo/types": "^2.0.1",
-    "@stencil/core": "^2.5.2",
+    "@stencil/core": "^2.8.0",
     "@stencil/postcss": "^2.0.0",
     "@stencil/sass": "^1.4.1",
     "@stencil/utils": "0.0.5",
-    "@types/d3-array": "^2.12.1",
-    "@types/d3-axis": "^2.1.0",
-    "@types/d3-ease": "^2.0.0",
-    "@types/d3-scale": "^3.3.0",
-    "@types/d3-scale-chromatic": "^2.0.0",
-    "@types/d3-selection": "^2.0.0",
-    "@types/d3-shape": "^2.1.0",
-    "@types/d3-transition": "^2.0.0",
-    "autoprefixer": "^10.2.6",
-    "husky": "^6.0.0",
-    "prettier": "2.3.0",
-    "pretty-quick": "^3.1.0"
+    "@types/d3-array": "^3.0.1",
+    "@types/d3-axis": "^3.0.1",
+    "@types/d3-ease": "^3.0.0",
+    "@types/d3-scale": "^4.0.1",
+    "@types/d3-scale-chromatic": "^3.0.0",
+    "@types/d3-selection": "^3.0.1",
+    "@types/d3-shape": "^3.0.2",
+    "@types/d3-transition": "^3.0.1",
+    "autoprefixer": "^10.3.3",
+    "husky": "^7.0.2",
+    "prettier": "2.3.2",
+    "pretty-quick": "^3.1.1"
   },
   "repository": {
     "type": "git",
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
index 802059cfe..9645e3d4a 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
@@ -183,7 +183,9 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
 
     await this.drawAxis();
 
-    this.randomColors = Array.from({length: this.chartData[0].values.length}, (_v, _i) => Math.floor(Math.random() * 16777215).toString(16));
+    if (!this.randomColors || this.randomColors.length !== this.chartData[0].values.length) {
+      this.randomColors = Array.from({length: this.chartData[0].values.length}, (_v, _i) => Math.floor(Math.random() * 16777215).toString(16));
+    }
 
     await this.drawBars(0, 0);
   }
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx
index a8b975ec3..7df72cc81 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx
@@ -127,6 +127,8 @@ export class DeckdeckgoLineChart implements DeckdeckgoChart {
   private series: DeckdeckgoLineChartSerie[];
   private serieIndex: number = 0;
 
+  private randomFillColors: string[] = [];
+
   async componentDidLoad() {
     await this.draw();
   }
@@ -524,9 +526,13 @@ export class DeckdeckgoLineChart implements DeckdeckgoChart {
                     ? series[i - 1]
                     : {
                         data: [],
-                        randomFillColor: randomFillColor,
+                        randomFillColor: this.randomFillColors[i - 1] || randomFillColor,
                       };
 
+                if (series?.length < i) {
+                  this.randomFillColors.push(randomFillColor);
+                }
+
                 if (!data.data || data.data.length <= 0) {
                   data.data = [];
                 }
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
index ebfdfc148..6c3713e19 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
@@ -95,6 +95,8 @@ export class DeckdeckgoPieChart implements DeckdeckgoChart {
 
   private pieDataIndex: number = 0;
 
+  private randomColors: string[] | undefined;
+
   async componentDidLoad() {
     await this.draw();
   }
@@ -364,14 +366,14 @@ export class DeckdeckgoPieChart implements DeckdeckgoChart {
       }
 
       let results: DeckdeckgoPieChartData[] = [];
-      let randomColors: string[];
 
       lines.forEach((line: string, lineIndex: number) => {
         const values: string[] = line.split(this.separator);
 
         if (values && values.length >= 2) {
-          if (!randomColors) {
-            randomColors = Array.from({length: lines.length}, (_v, _i) => Math.floor(Math.random() * 16777215).toString(16));
+          if (!this.randomColors || this.randomColors.length !== lines.length) {
+            console.log('new');
+            this.randomColors = Array.from({length: lines.length}, (_v, _i) => Math.floor(Math.random() * 16777215).toString(16));
           }
 
           const label: string = values[0];
@@ -379,7 +381,7 @@ export class DeckdeckgoPieChart implements DeckdeckgoChart {
           const pieData: DeckdeckgoPieChartDataValue = {
             label: label,
             value: parseInt(values[1]),
-            randomFillColor: randomColors.length >= 1 ? randomColors[lineIndex] : undefined,
+            randomFillColor: this.randomColors?.[lineIndex] || undefined,
             key: lineIndex + 1,
           };
 
@@ -406,7 +408,7 @@ export class DeckdeckgoPieChart implements DeckdeckgoChart {
                 const pieData: DeckdeckgoPieChartDataValue = {
                   label: label,
                   value: parseInt(values[i]),
-                  randomFillColor: randomColors.length >= i ? randomColors[lineIndex] : undefined,
+                  randomFillColor: this.randomColors.length >= i ? this.randomColors[lineIndex] : undefined,
                   key: lineIndex + 1,
                 };
 
diff --git a/webcomponents/charts/src/index.html b/webcomponents/charts/src/index.html
index 4d844af62..186c9322b 100644
--- a/webcomponents/charts/src/index.html
+++ b/webcomponents/charts/src/index.html
@@ -54,6 +54,19 @@ <h1>Src</h1>
       style="--deckgo-chart-fill-color-1: #ff0000; --deckgo-chart-fill-color-2: #00ff00; --deckgo-chart-fill-color-3: #0000ff"
     ></deckgo-bar-chart>
 
+    <deckgo-bar-chart
+      y-axis="false"
+      animation="true"
+      width="500"
+      height="400"
+      src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-bar-chart-to-compare-with-titles.csv"
+    ></deckgo-bar-chart>
+
+    <div style="margin: 64px 8px">
+      <button onclick="nextBar()">Next</button>
+      <button onclick="drawBar()">Redraw</button>
+    </div>
+
     <deckgo-pie-chart
       animation="true"
       width="500"
@@ -65,6 +78,7 @@ <h1>Src</h1>
     <div style="margin: 64px 8px">
       <button onclick="prev('deckgo-pie-chart')">Prev</button>
       <button onclick="next('deckgo-pie-chart')">Next</button>
+      <button onclick="drawPie()">Redraw</button>
     </div>
 
     <deckgo-pie-chart
@@ -190,6 +204,28 @@ <h1>Data (all zero values)</h1>
         }
       }
 
+      const drawPie = () => {
+        const chart = document.querySelector('deckgo-pie-chart');
+        chart?.draw().then(() => {});
+      };
+
+      const drawBar = () => {
+        const chart = document.querySelector('deckgo-bar-chart:nth-of-type(3)');
+        chart?.draw().then(() => {});
+      };
+
+      const nextBar = () => {
+        const chart = document.querySelector('deckgo-bar-chart:nth-of-type(3)');
+        chart?.next().then(() => {});
+      }
+
+      function next(cmp) {
+        const elem = document.getElementsByTagName(cmp);
+        if (elem && elem.length > 0) {
+          elem[0].next().then(() => {});
+        }
+      }
+
       function prev(cmp) {
         const elem = document.getElementsByTagName(cmp);
         if (elem && elem.length > 0) {

From 6b47c4d9d29bdd0d9e5a811a6b944400e784b66a Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 1 Sep 2021 20:50:14 +0200
Subject: [PATCH 02/17] build: bump dependencies

---
 webcomponents/charts/CHANGELOG.md      |   4 +
 webcomponents/charts/package-lock.json | 290 +++++++++++++------------
 2 files changed, 157 insertions(+), 137 deletions(-)

diff --git a/webcomponents/charts/CHANGELOG.md b/webcomponents/charts/CHANGELOG.md
index 55e76d046..db714cd1f 100644
--- a/webcomponents/charts/CHANGELOG.md
+++ b/webcomponents/charts/CHANGELOG.md
@@ -4,6 +4,10 @@
 
 - do not generate new random colors on redraw
 
+### Build
+
+- bump dependencies
+
 # 2.1.0 (2021-05-29)
 
 ### Build
diff --git a/webcomponents/charts/package-lock.json b/webcomponents/charts/package-lock.json
index 9986bf45c..c406a85e7 100644
--- a/webcomponents/charts/package-lock.json
+++ b/webcomponents/charts/package-lock.json
@@ -11,9 +11,9 @@
       "dev": true
     },
     "@stencil/core": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.2.tgz",
-      "integrity": "sha512-bgjPXkSzzg1WnTgVUm6m5ZzpKt602WmA/QljODAW1xVN40OHJdbGblzF/F6MFzqv2c5Cy30CB41arc8qADIdcQ==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.8.0.tgz",
+      "integrity": "sha512-WazFGUMnbumg8ePNvej8cIOEcxvuZ0ugKQkkE1xFbDYcl7DgJd62MiG+bIqCcQlIdLEfhjAdoixxlFdJgrgjyA==",
       "dev": true
     },
     "@stencil/postcss": {
@@ -38,81 +38,81 @@
       "dev": true
     },
     "@types/d3-array": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-2.12.1.tgz",
-      "integrity": "sha512-kVHqB3kfLpU0WYEmx5Y2hi3LRhUGIEIQXFdGazNNWQhyhzHx8xrgLtpAOKYzpfS3a+GjFMdKsI82QUH4q5dACQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.1.tgz",
+      "integrity": "sha512-D/G7oG0czeszALrkdUiV68CDiHDxXf+M2mLVqAyKktGd12VKQQljj1sHJGBKjcK4jRH1biBd6ZPQPHpJ0mNa0w==",
       "dev": true
     },
     "@types/d3-axis": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-2.1.0.tgz",
-      "integrity": "sha512-6ekm+D+EG/LVT3oiwwU9wsm0+SBAQpxSSOsZq92fp+tnpaa19YMHpj8sRZQAeksSBcqNWzEMjuRPXR9s38YFaw==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.1.tgz",
+      "integrity": "sha512-zji/iIbdd49g9WN0aIsGcwcTBUkgLsCSwB+uH+LPVDAiKWENMtI3cJEWt+7/YYwelMoZmbBfzA3qCdrZ2XFNnw==",
       "dev": true,
       "requires": {
         "@types/d3-selection": "*"
       }
     },
     "@types/d3-ease": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-2.0.0.tgz",
-      "integrity": "sha512-6aZrTyX5LG+ptofVHf+gTsThLRY1nhLotJjgY4drYqk1OkJMu2UvuoZRlPw2fffjRHeYepue3/fxTufqKKmvsA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz",
+      "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==",
       "dev": true
     },
     "@types/d3-path": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.9.tgz",
-      "integrity": "sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz",
+      "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==",
       "dev": true
     },
     "@types/d3-scale": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.3.0.tgz",
-      "integrity": "sha512-rJj4nh/71Rw5bZgTF5cA5rW60WT3x8RbivEsScgQ66sqFnYZRmuyKSayyo7JiP+c9KJJiQhY9JXBmY16FZa3+g==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.1.tgz",
+      "integrity": "sha512-GDuXcRcR6mKcpUVMhPNttpOzHi2dP6YcDqLZYSZHgwTZ+sfCa8e9q0VEBwZomblAPNMYpVqxojnSyIEb4s/Pwg==",
       "dev": true,
       "requires": {
         "@types/d3-time": "*"
       }
     },
     "@types/d3-scale-chromatic": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz",
-      "integrity": "sha512-Y62+2clOwZoKua84Ha0xU77w7lePiaBoTjXugT4l8Rd5LAk+Mn/ZDtrgs087a+B5uJ3jYUHHtKw5nuEzp0WBHw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==",
       "dev": true
     },
     "@types/d3-selection": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-2.0.0.tgz",
-      "integrity": "sha512-EF0lWZ4tg7oDFg4YQFlbOU3936e3a9UmoQ2IXlBy1+cv2c2Pv7knhKUzGlH5Hq2sF/KeDTH1amiRPey2rrLMQA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.1.tgz",
+      "integrity": "sha512-aJ1d1SCUtERHH65bB8NNoLpUOI3z8kVcfg2BGm4rMMUwuZF4x6qnIEKjT60Vt0o7gP/a/xkRVs4D9CpDifbyRA==",
       "dev": true
     },
     "@types/d3-shape": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-2.1.0.tgz",
-      "integrity": "sha512-xTMEs8eITRksXclcVxMHIONRdyjj2TjDIwO4XFOPTVBNK9/oC4ZOhUbvTz1IpcsEsS/mClwuulP+OoawSAbSGA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.0.2.tgz",
+      "integrity": "sha512-5+ButCmIfNX8id5seZ7jKj3igdcxx+S9IDBiT35fQGTLZUfkFgTv+oBH34xgeoWDKpWcMITSzBILWQtBoN5Piw==",
       "dev": true,
       "requires": {
-        "@types/d3-path": "^1"
+        "@types/d3-path": "*"
       }
     },
     "@types/d3-time": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.0.tgz",
-      "integrity": "sha512-qVCiT93utxN0cawScyQuNx8H82vBvZXSClZfgOu3l3dRRlRO6FjKEZlaPgXG9XUFjIAOsA4kAJY101vobHeJLQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==",
       "dev": true
     },
     "@types/d3-transition": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-2.0.0.tgz",
-      "integrity": "sha512-UJDzI98utcZQUJt3uIit/Ho0/eBIANzrWJrTmi4+TaKIyWL2iCu7ShP0o4QajCskhyjOA7C8+4CE3b1YirTzEQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-Sv4qEI9uq3bnZwlOANvYK853zvpdKEm1yz9rcc8ZTsxvRklcs9Fx4YFuGA3gXoQN/c/1T6QkVNjhaRO/cWj94g==",
       "dev": true,
       "requires": {
         "@types/d3-selection": "*"
       }
     },
     "@types/minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
       "dev": true
     },
     "ansi-styles": {
@@ -143,17 +143,25 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "10.2.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.6.tgz",
-      "integrity": "sha512-8lChSmdU6dCNMCQopIf4Pe5kipkAGj/fvTMslCsih0uHpOrXOPUEVOmYMMqmw3cekQkSD7EhIeuYl5y0BLdKqg==",
+      "version": "10.3.3",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.3.tgz",
+      "integrity": "sha512-yRzjxfnggrP/+qVHlUuZz5FZzEbkT+Yt0/Df6ScEMnbbZBLzYB2W0KLxoQCW+THm1SpOsM1ZPcTHAwuvmibIsQ==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.16.6",
-        "caniuse-lite": "^1.0.30001230",
-        "colorette": "^1.2.2",
+        "browserslist": "^4.16.8",
+        "caniuse-lite": "^1.0.30001252",
+        "colorette": "^1.3.0",
         "fraction.js": "^4.1.1",
         "normalize-range": "^0.1.2",
         "postcss-value-parser": "^4.1.0"
+      },
+      "dependencies": {
+        "colorette": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz",
+          "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
+          "dev": true
+        }
       }
     },
     "balanced-match": {
@@ -173,22 +181,30 @@
       }
     },
     "browserslist": {
-      "version": "4.16.6",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
-      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+      "version": "4.16.8",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.8.tgz",
+      "integrity": "sha512-sc2m9ohR/49sWEbPj14ZSSZqp+kbi16aLao42Hmn3Z8FpjuMaq2xCA2l4zl9ITfyzvnvyE0hcg62YkIGKxgaNQ==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001219",
-        "colorette": "^1.2.2",
-        "electron-to-chromium": "^1.3.723",
+        "caniuse-lite": "^1.0.30001251",
+        "colorette": "^1.3.0",
+        "electron-to-chromium": "^1.3.811",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.71"
+        "node-releases": "^1.1.75"
+      },
+      "dependencies": {
+        "colorette": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz",
+          "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
+          "dev": true
+        }
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001230",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz",
-      "integrity": "sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==",
+      "version": "1.0.30001252",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001252.tgz",
+      "integrity": "sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw==",
       "dev": true
     },
     "chalk": {
@@ -240,118 +256,118 @@
       }
     },
     "d3-array": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
-      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.0.2.tgz",
+      "integrity": "sha512-nTN4OC6ufZueotlexbxBd2z8xmG1eIfhvP2m1auH2ONps0L+AZn1r0JWuzMXZ6XgOj1VBOp7GGZmEs9NUFEBbA==",
       "requires": {
-        "internmap": "^1.0.0"
+        "internmap": "1 - 2"
       }
     },
     "d3-axis": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-2.1.0.tgz",
-      "integrity": "sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
     },
     "d3-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
-      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz",
+      "integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw=="
     },
     "d3-dispatch": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
-      "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
     },
     "d3-ease": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
-      "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
     },
     "d3-format": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
-      "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.0.1.tgz",
+      "integrity": "sha512-hdL7+HBIohpgfolhBxr1KX47VMD6+vVD/oEFrxk5yhmzV2prk99EkFKYpXuhVkFpTgHdJ6/4bYcjdLPPXV4tIA=="
     },
     "d3-interpolate": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
-      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
       "requires": {
-        "d3-color": "1 - 2"
+        "d3-color": "1 - 3"
       }
     },
     "d3-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
-      "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.0.1.tgz",
+      "integrity": "sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w=="
     },
     "d3-scale": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
-      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.0.tgz",
+      "integrity": "sha512-foHQYKpWQcyndH1CGoHdUC4PECxTxonzwwBXGT8qu+Drb1FIc6ON6dG2P5f4hRRMkLiIKeWK7iFtdznDUrnuPQ==",
       "requires": {
-        "d3-array": "^2.3.0",
-        "d3-format": "1 - 2",
-        "d3-interpolate": "1.2.0 - 2",
-        "d3-time": "^2.1.1",
-        "d3-time-format": "2 - 3"
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
       }
     },
     "d3-selection": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
-      "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
     },
     "d3-shape": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
-      "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.0.1.tgz",
+      "integrity": "sha512-HNZNEQoDhuCrDWEc/BMbF/hKtzMZVoe64TvisFLDp2Iyj0UShB/E6/lBsLlJTfBMbYgftHj90cXJ0SEitlE6Xw==",
       "requires": {
-        "d3-path": "1 - 2"
+        "d3-path": "1 - 3"
       }
     },
     "d3-time": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
-      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
       "requires": {
-        "d3-array": "2"
+        "d3-array": "2 - 3"
       }
     },
     "d3-time-format": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
-      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.0.0.tgz",
+      "integrity": "sha512-nzaCwlj+ZVBIlFuVOT1RmU+6xb/7D5IcnhHzHQcBgS/aTa5K9fWZNN5LCXA27LgF5WxoSNJqKBbLcGMtM6Ca6A==",
       "requires": {
-        "d3-time": "1 - 2"
+        "d3-time": "1 - 3"
       }
     },
     "d3-timer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
-      "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
     },
     "d3-transition": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
-      "integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
       "requires": {
-        "d3-color": "1 - 2",
-        "d3-dispatch": "1 - 2",
-        "d3-ease": "1 - 2",
-        "d3-interpolate": "1 - 2",
-        "d3-timer": "1 - 2"
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
       }
     },
     "date-fns": {
-      "version": "2.22.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
-      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg=="
+      "version": "2.23.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.23.0.tgz",
+      "integrity": "sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA=="
     },
     "electron-to-chromium": {
-      "version": "1.3.742",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.742.tgz",
-      "integrity": "sha512-ihL14knI9FikJmH2XUIDdZFWJxvr14rPSdOhJ7PpS27xbz8qmaRwCwyg/bmFwjWKmWK9QyamiCZVCvXm5CH//Q==",
+      "version": "1.3.826",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.826.tgz",
+      "integrity": "sha512-bpLc4QU4B8PYmdO4MSu2ZBTMD8lAaEXRS43C09lB31BvYwuk9UxgBRXbY5OJBw7VuMGcg2MZG5FyTaP9u4PQnw==",
       "dev": true
     },
     "end-of-stream": {
@@ -424,9 +440,9 @@
       "dev": true
     },
     "husky": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-6.0.0.tgz",
-      "integrity": "sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz",
+      "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
       "dev": true
     },
     "ignore": {
@@ -436,14 +452,14 @@
       "dev": true
     },
     "internmap": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
-      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.1.tgz",
+      "integrity": "sha512-Ujwccrj9FkGqjbY3iVoxD1VV+KdZZeENx0rphrtzmRXbFvkFO88L80BL/zeSIguX/7T+y8k04xqtgWgS5vxwxw=="
     },
     "is-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
       "dev": true
     },
     "isexe": {
@@ -508,9 +524,9 @@
       "dev": true
     },
     "node-releases": {
-      "version": "1.1.72",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.72.tgz",
-      "integrity": "sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==",
+      "version": "1.1.75",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.75.tgz",
+      "integrity": "sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==",
       "dev": true
     },
     "normalize-range": {
@@ -600,15 +616,15 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz",
-      "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+      "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
       "dev": true
     },
     "pretty-quick": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.1.0.tgz",
-      "integrity": "sha512-DtxIxksaUWCgPFN7E1ZZk4+Aav3CCuRdhrDSFZENb404sYMtuo9Zka823F+Mgeyt8Zt3bUiCjFzzWYE9LYqkmQ==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.1.1.tgz",
+      "integrity": "sha512-ZYLGiMoV2jcaas3vTJrLvKAYsxDoXQBUn8OSTxkl67Fyov9lyXivJTl0+2WVh+y6EovGcw7Lm5ThYpH+Sh3XxQ==",
       "dev": true,
       "requires": {
         "chalk": "^3.0.0",

From 38affffe11f20dbbd2f2d4c6bf76d4649d6e0742 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 1 Sep 2021 21:06:22 +0200
Subject: [PATCH 03/17] feat: random colors background extended to border

---
 webcomponents/charts/CHANGELOG.md                    |  1 +
 .../deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx    | 10 +++++++---
 .../deckdeckgo-line-chart/deckdeckgo-line-chart.tsx  | 12 ++++++------
 .../charts/deckdeckgo-line-chart/readme.md           |  1 +
 .../deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx    | 10 +++++++---
 webcomponents/charts/src/index.html                  |  2 +-
 6 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/webcomponents/charts/CHANGELOG.md b/webcomponents/charts/CHANGELOG.md
index db714cd1f..815f4fc11 100644
--- a/webcomponents/charts/CHANGELOG.md
+++ b/webcomponents/charts/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### Features
 
 - do not generate new random colors on redraw
+- random colors applied as background with an opacity of `0.8` and as stroke (border) width of `3px` (instead of only applied to background)
 
 ### Build
 
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
index 9645e3d4a..e2a21f8d1 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
@@ -357,18 +357,22 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
         .append('rect')
         .merge(section)
         .attr('style', (d, i) => {
+          const fillColor: string = this.randomColors && this.randomColors.length > i ? `#${this.randomColors[i]}` : '';
+
           return (
             'fill: var(--deckgo-chart-fill-color-' +
             d.key +
             ', ' +
-            (this.randomColors && this.randomColors.length > i ? `#${this.randomColors[i]}` : '') +
+            fillColor +
             '); fill-opacity: var(--deckgo-chart-fill-opacity-' +
             d.key +
-            '); stroke: var(--deckgo-chart-stroke-' +
+            ', 0.8); stroke: var(--deckgo-chart-stroke-' +
             d.key +
+            ', ' +
+            fillColor +
             '); stroke-width: var(--deckgo-chart-stroke-width-' +
             d.key +
-            ')'
+            ', 3px)'
           );
         })
         .transition()
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx
index 7df72cc81..d34c2514c 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx
@@ -429,9 +429,9 @@ export class DeckdeckgoLineChart implements DeckdeckgoChart {
       .datum(data)
       .attr('class', 'area')
       .style('fill', `var(--deckgo-chart-fill-color-${styleIndex}, #${randomFillColor})`)
-      .style('fill-opacity', `var(--deckgo-chart-fill-opacity-${styleIndex})`)
-      .style('stroke', `var(--deckgo-chart-stroke-${styleIndex}, var(--deckgo-chart-stroke))`)
-      .style('stroke-width', `var(--deckgo-chart-stroke-width-${styleIndex})`)
+      .style('fill-opacity', `var(--deckgo-chart-fill-opacity-${styleIndex}, 0.8)`)
+      .style('stroke', `var(--deckgo-chart-stroke-${styleIndex}, var(--deckgo-chart-stroke, #${randomFillColor}))`)
+      .style('stroke-width', `var(--deckgo-chart-stroke-width-${styleIndex}, 3px)`)
       .attr('d', line);
   }
 
@@ -448,9 +448,9 @@ export class DeckdeckgoLineChart implements DeckdeckgoChart {
       .append('path')
       .merge(section)
       .style('fill', `var(--deckgo-chart-fill-color-${styleIndex}, #${randomFillColor})`)
-      .style('fill-opacity', `var(--deckgo-chart-fill-opacity-${styleIndex})`)
-      .style('stroke', `var(--deckgo-chart-stroke-${styleIndex}, var(--deckgo-chart-stroke))`)
-      .style('stroke-width', `var(--deckgo-chart-stroke-width-${styleIndex})`)
+      .style('fill-opacity', `var(--deckgo-chart-fill-opacity-${styleIndex}, 0.8)`)
+      .style('stroke', `var(--deckgo-chart-stroke-${styleIndex}, var(--deckgo-chart-stroke, #${randomFillColor}))`)
+      .style('stroke-width', `var(--deckgo-chart-stroke-width-${styleIndex}, 3px)`)
       .transition()
       .duration(this.animationDuration)
       .ease(easeLinear)
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/readme.md b/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/readme.md
index c6b87b11a..d2cca4348 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/readme.md
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/readme.md
@@ -48,6 +48,7 @@ deckDeckGoElement();
 ## Usage
 
 The main idea behind the [DeckDeckGo](https://deckdeckgo.com) charts is to be able to drop a **csv** file, provide it to the component and let it do the job respectively draw the chart.
+
 #### CSV
 
 The csv file should contain two or multiple columns.
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
index 6c3713e19..da3b96f49 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
@@ -235,18 +235,22 @@ export class DeckdeckgoPieChart implements DeckdeckgoChart {
         .append('path')
         .merge(section)
         .attr('style', (d) => {
+          const randomColor: string = d.data.randomFillColor ? `#${d.data.randomFillColor}` : '';
+
           return (
             'fill: var(--deckgo-chart-fill-color-' +
             d.data.key +
             ', ' +
-            (d.data.randomFillColor ? `#${d.data.randomFillColor}` : '') +
+            randomColor +
             '); fill-opacity: var(--deckgo-chart-fill-opacity-' +
             d.data.key +
-            '); stroke: var(--deckgo-chart-stroke-' +
+            ', 0.8); stroke: var(--deckgo-chart-stroke-' +
             d.data.key +
+            ', ' +
+            randomColor +
             '); stroke-width: var(--deckgo-chart-stroke-width-' +
             d.data.key +
-            ')'
+            ', 3px)'
           );
         })
         .transition()
diff --git a/webcomponents/charts/src/index.html b/webcomponents/charts/src/index.html
index 186c9322b..461e289b6 100644
--- a/webcomponents/charts/src/index.html
+++ b/webcomponents/charts/src/index.html
@@ -106,7 +106,7 @@ <h1>Src</h1>
       height="400"
       y-axis-domain="extent"
       date-pattern="dd.MM.yyyy"
-      style="--deckgo-chart-fill-color-0: #3880ff; --deckgo-chart-fill-color-1: #7044ff; --deckgo-chart-fill-opacity-1: 0.7"
+      style="--deckgo-chart-fill-color-0: #3880ff; --deckgo-chart-fill-color-1: #7044ff; --deckgo-chart-fill-opacity-1: 0.8"
       src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-line-chart-to-compare.csv"
     ></deckgo-line-chart>
 

From df0ea4b74d56dc0ee79e2395e3081bddefbdc1ae Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Wed, 1 Sep 2021 21:14:04 +0200
Subject: [PATCH 04/17] chore: remove console.log

---
 .../charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
index da3b96f49..88c00f7fe 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
@@ -376,7 +376,6 @@ export class DeckdeckgoPieChart implements DeckdeckgoChart {
 
         if (values && values.length >= 2) {
           if (!this.randomColors || this.randomColors.length !== lines.length) {
-            console.log('new');
             this.randomColors = Array.from({length: lines.length}, (_v, _i) => Math.floor(Math.random() * 16777215).toString(16));
           }
 

From 1e2aa82f7ce5cf2ff1daec40dd9f4fccc46108aa Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 2 Sep 2021 07:08:48 +0200
Subject: [PATCH 05/17] build: update charts

---
 CHANGELOG.md                           |   8 ++
 remote/package-lock.json               | 151 ++++++++++++-----------
 remote/package.json                    |   2 +-
 studio/package-lock.json               | 161 +++++++++++++------------
 studio/package.json                    |   2 +-
 webcomponents/charts/CHANGELOG.md      |   6 +
 webcomponents/charts/package-lock.json |   2 +-
 webcomponents/charts/package.json      |   2 +-
 8 files changed, 181 insertions(+), 153 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d39de85e4..694d89593 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+<a name="4.10.0"></a>
+
+# [4.10.0](https://github.com/deckgo/deckdeckgo/compare/v4.9.0...v4.10.0) (2021-XX-YY)
+
+### Web Components
+
+- charts: v2.2.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/charts/CHANGELOG.md))
+- 
 <a name="4.9.0"></a>
 
 # [4.9.0](https://github.com/deckgo/deckdeckgo/compare/v4.8.0...v4.9.0) (2021-08-20)
diff --git a/remote/package-lock.json b/remote/package-lock.json
index c31d2dfa3..aee1941f8 100644
--- a/remote/package-lock.json
+++ b/remote/package-lock.json
@@ -1177,18 +1177,25 @@
       }
     },
     "@deckdeckgo/charts": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/charts/-/charts-2.1.0.tgz",
-      "integrity": "sha512-kqyuajXebJQEJnqlqF2GpqQeP0xsvvcg0EHp/DK/LhRYYSW29AaYMt58bYRCpn9Y1WQlH01ca1L7dmr0zAcHGA==",
-      "requires": {
-        "d3-array": "^2.12.1",
-        "d3-axis": "^2.1.0",
-        "d3-ease": "^2.0.0",
-        "d3-scale": "^3.3.0",
-        "d3-selection": "^2.0.0",
-        "d3-shape": "^2.1.0",
-        "d3-transition": "^2.0.0",
-        "date-fns": "^2.22.1"
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/charts/-/charts-2.2.1.tgz",
+      "integrity": "sha512-YTvg5UCZZ8o5ZOTmiuum4ykK+Z1nUCNv+PBoUCy3gOD7lVjofOwYx7ka0liCC/IVwMeuX3a/ksOiXLok0b1Ttw==",
+      "requires": {
+        "d3-array": "^3.0.2",
+        "d3-axis": "^3.0.0",
+        "d3-ease": "^3.0.1",
+        "d3-scale": "^4.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-shape": "^3.0.1",
+        "d3-transition": "^3.0.1",
+        "date-fns": "^2.23.0"
+      },
+      "dependencies": {
+        "d3-selection": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+          "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+        }
       }
     },
     "@deckdeckgo/core": {
@@ -2274,17 +2281,17 @@
       "dev": true
     },
     "d3-array": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
-      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.0.2.tgz",
+      "integrity": "sha512-nTN4OC6ufZueotlexbxBd2z8xmG1eIfhvP2m1auH2ONps0L+AZn1r0JWuzMXZ6XgOj1VBOp7GGZmEs9NUFEBbA==",
       "requires": {
-        "internmap": "^1.0.0"
+        "internmap": "1 - 2"
       }
     },
     "d3-axis": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-2.1.0.tgz",
-      "integrity": "sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
     },
     "d3-cloud": {
       "version": "1.2.5",
@@ -2302,48 +2309,48 @@
       }
     },
     "d3-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
-      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz",
+      "integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw=="
     },
     "d3-dispatch": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
-      "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
     },
     "d3-ease": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
-      "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
     },
     "d3-format": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
-      "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.0.1.tgz",
+      "integrity": "sha512-hdL7+HBIohpgfolhBxr1KX47VMD6+vVD/oEFrxk5yhmzV2prk99EkFKYpXuhVkFpTgHdJ6/4bYcjdLPPXV4tIA=="
     },
     "d3-interpolate": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
-      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
       "requires": {
-        "d3-color": "1 - 2"
+        "d3-color": "1 - 3"
       }
     },
     "d3-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
-      "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.0.1.tgz",
+      "integrity": "sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w=="
     },
     "d3-scale": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
-      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.0.tgz",
+      "integrity": "sha512-foHQYKpWQcyndH1CGoHdUC4PECxTxonzwwBXGT8qu+Drb1FIc6ON6dG2P5f4hRRMkLiIKeWK7iFtdznDUrnuPQ==",
       "requires": {
-        "d3-array": "^2.3.0",
-        "d3-format": "1 - 2",
-        "d3-interpolate": "1.2.0 - 2",
-        "d3-time": "^2.1.1",
-        "d3-time-format": "2 - 3"
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
       }
     },
     "d3-selection": {
@@ -2352,44 +2359,44 @@
       "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
     },
     "d3-shape": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
-      "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.0.1.tgz",
+      "integrity": "sha512-HNZNEQoDhuCrDWEc/BMbF/hKtzMZVoe64TvisFLDp2Iyj0UShB/E6/lBsLlJTfBMbYgftHj90cXJ0SEitlE6Xw==",
       "requires": {
-        "d3-path": "1 - 2"
+        "d3-path": "1 - 3"
       }
     },
     "d3-time": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
-      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
       "requires": {
-        "d3-array": "2"
+        "d3-array": "2 - 3"
       }
     },
     "d3-time-format": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
-      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.0.0.tgz",
+      "integrity": "sha512-nzaCwlj+ZVBIlFuVOT1RmU+6xb/7D5IcnhHzHQcBgS/aTa5K9fWZNN5LCXA27LgF5WxoSNJqKBbLcGMtM6Ca6A==",
       "requires": {
-        "d3-time": "1 - 2"
+        "d3-time": "1 - 3"
       }
     },
     "d3-timer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
-      "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
     },
     "d3-transition": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
-      "integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
       "requires": {
-        "d3-color": "1 - 2",
-        "d3-dispatch": "1 - 2",
-        "d3-ease": "1 - 2",
-        "d3-interpolate": "1 - 2",
-        "d3-timer": "1 - 2"
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
       }
     },
     "date-fns": {
@@ -2940,9 +2947,9 @@
       "dev": true
     },
     "internmap": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
-      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.1.tgz",
+      "integrity": "sha512-Ujwccrj9FkGqjbY3iVoxD1VV+KdZZeENx0rphrtzmRXbFvkFO88L80BL/zeSIguX/7T+y8k04xqtgWgS5vxwxw=="
     },
     "ionicons": {
       "version": "5.5.3",
diff --git a/remote/package.json b/remote/package.json
index b925e7738..5b12081b2 100644
--- a/remote/package.json
+++ b/remote/package.json
@@ -17,7 +17,7 @@
     "test.watch": "stencil test --spec --e2e --watch"
   },
   "dependencies": {
-    "@deckdeckgo/charts": "^2.1.0",
+    "@deckdeckgo/charts": "^2.2.1",
     "@deckdeckgo/core": "^8.3.0",
     "@deckdeckgo/deck-utils": "^4.1.0",
     "@deckdeckgo/demo": "^2.1.0",
diff --git a/studio/package-lock.json b/studio/package-lock.json
index 63940ca3d..9647ea50c 100644
--- a/studio/package-lock.json
+++ b/studio/package-lock.json
@@ -1126,18 +1126,18 @@
       }
     },
     "@deckdeckgo/charts": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/charts/-/charts-2.1.0.tgz",
-      "integrity": "sha512-kqyuajXebJQEJnqlqF2GpqQeP0xsvvcg0EHp/DK/LhRYYSW29AaYMt58bYRCpn9Y1WQlH01ca1L7dmr0zAcHGA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/charts/-/charts-2.2.1.tgz",
+      "integrity": "sha512-YTvg5UCZZ8o5ZOTmiuum4ykK+Z1nUCNv+PBoUCy3gOD7lVjofOwYx7ka0liCC/IVwMeuX3a/ksOiXLok0b1Ttw==",
       "requires": {
-        "d3-array": "^2.12.1",
-        "d3-axis": "^2.1.0",
-        "d3-ease": "^2.0.0",
-        "d3-scale": "^3.3.0",
-        "d3-selection": "^2.0.0",
-        "d3-shape": "^2.1.0",
-        "d3-transition": "^2.0.0",
-        "date-fns": "^2.22.1"
+        "d3-array": "^3.0.2",
+        "d3-axis": "^3.0.0",
+        "d3-ease": "^3.0.1",
+        "d3-scale": "^4.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-shape": "^3.0.1",
+        "d3-transition": "^3.0.1",
+        "date-fns": "^2.23.0"
       }
     },
     "@deckdeckgo/color": {
@@ -1441,6 +1441,13 @@
         "@deckdeckgo/utils": "^2.0.1",
         "d3-cloud": "^1.2.5",
         "d3-selection": "^2.0.0"
+      },
+      "dependencies": {
+        "d3-selection": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
+          "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
+        }
       }
     },
     "@deckdeckgo/youtube": {
@@ -2374,17 +2381,17 @@
       "dev": true
     },
     "d3-array": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
-      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.0.2.tgz",
+      "integrity": "sha512-nTN4OC6ufZueotlexbxBd2z8xmG1eIfhvP2m1auH2ONps0L+AZn1r0JWuzMXZ6XgOj1VBOp7GGZmEs9NUFEBbA==",
       "requires": {
-        "internmap": "^1.0.0"
+        "internmap": "1 - 2"
       }
     },
     "d3-axis": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-2.1.0.tgz",
-      "integrity": "sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
     },
     "d3-cloud": {
       "version": "1.2.5",
@@ -2402,100 +2409,100 @@
       }
     },
     "d3-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
-      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz",
+      "integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw=="
     },
     "d3-dispatch": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
-      "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
     },
     "d3-ease": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
-      "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
     },
     "d3-format": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
-      "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.0.1.tgz",
+      "integrity": "sha512-hdL7+HBIohpgfolhBxr1KX47VMD6+vVD/oEFrxk5yhmzV2prk99EkFKYpXuhVkFpTgHdJ6/4bYcjdLPPXV4tIA=="
     },
     "d3-interpolate": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
-      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
       "requires": {
-        "d3-color": "1 - 2"
+        "d3-color": "1 - 3"
       }
     },
     "d3-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
-      "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.0.1.tgz",
+      "integrity": "sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w=="
     },
     "d3-scale": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
-      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.0.tgz",
+      "integrity": "sha512-foHQYKpWQcyndH1CGoHdUC4PECxTxonzwwBXGT8qu+Drb1FIc6ON6dG2P5f4hRRMkLiIKeWK7iFtdznDUrnuPQ==",
       "requires": {
-        "d3-array": "^2.3.0",
-        "d3-format": "1 - 2",
-        "d3-interpolate": "1.2.0 - 2",
-        "d3-time": "^2.1.1",
-        "d3-time-format": "2 - 3"
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
       }
     },
     "d3-selection": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
-      "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
     },
     "d3-shape": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
-      "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.0.1.tgz",
+      "integrity": "sha512-HNZNEQoDhuCrDWEc/BMbF/hKtzMZVoe64TvisFLDp2Iyj0UShB/E6/lBsLlJTfBMbYgftHj90cXJ0SEitlE6Xw==",
       "requires": {
-        "d3-path": "1 - 2"
+        "d3-path": "1 - 3"
       }
     },
     "d3-time": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
-      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
       "requires": {
-        "d3-array": "2"
+        "d3-array": "2 - 3"
       }
     },
     "d3-time-format": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
-      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.0.0.tgz",
+      "integrity": "sha512-nzaCwlj+ZVBIlFuVOT1RmU+6xb/7D5IcnhHzHQcBgS/aTa5K9fWZNN5LCXA27LgF5WxoSNJqKBbLcGMtM6Ca6A==",
       "requires": {
-        "d3-time": "1 - 2"
+        "d3-time": "1 - 3"
       }
     },
     "d3-timer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
-      "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
     },
     "d3-transition": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
-      "integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
       "requires": {
-        "d3-color": "1 - 2",
-        "d3-dispatch": "1 - 2",
-        "d3-ease": "1 - 2",
-        "d3-interpolate": "1 - 2",
-        "d3-timer": "1 - 2"
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
       }
     },
     "date-fns": {
-      "version": "2.22.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
-      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg=="
+      "version": "2.23.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.23.0.tgz",
+      "integrity": "sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA=="
     },
     "debug": {
       "version": "3.1.0",
@@ -2867,9 +2874,9 @@
       "dev": true
     },
     "internmap": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
-      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.1.tgz",
+      "integrity": "sha512-Ujwccrj9FkGqjbY3iVoxD1VV+KdZZeENx0rphrtzmRXbFvkFO88L80BL/zeSIguX/7T+y8k04xqtgWgS5vxwxw=="
     },
     "ionicons": {
       "version": "5.5.3",
diff --git a/studio/package.json b/studio/package.json
index ed3ba319a..7a847f6d3 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -20,7 +20,7 @@
     "test.watch": "stencil test --spec --e2e --watch"
   },
   "dependencies": {
-    "@deckdeckgo/charts": "^2.1.0",
+    "@deckdeckgo/charts": "^2.2.1",
     "@deckdeckgo/color": "^4.1.0",
     "@deckdeckgo/core": "^8.4.0",
     "@deckdeckgo/deck-utils": "^4.1.0",
diff --git a/webcomponents/charts/CHANGELOG.md b/webcomponents/charts/CHANGELOG.md
index 815f4fc11..de2336591 100644
--- a/webcomponents/charts/CHANGELOG.md
+++ b/webcomponents/charts/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 2.2.1 (2021-09-02)
+
+### Chore
+
+- remove console.log
+
 # 2.2.0 (2021-09-01)
 
 ### Features
diff --git a/webcomponents/charts/package-lock.json b/webcomponents/charts/package-lock.json
index c406a85e7..0f9ee3cdf 100644
--- a/webcomponents/charts/package-lock.json
+++ b/webcomponents/charts/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/charts",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/webcomponents/charts/package.json b/webcomponents/charts/package.json
index 256d20ec3..0253e8fd3 100644
--- a/webcomponents/charts/package.json
+++ b/webcomponents/charts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/charts",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "A collection of Web Components to easily draw charts",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

From d50c6974146181040bfe06c2b6045b5c6558a3ce Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 2 Sep 2021 07:10:57 +0200
Subject: [PATCH 06/17] build: bump dependencies

---
 CHANGELOG.md                               |   3 +-
 webcomponents/word-cloud/CHANGELOG.md      |   6 +
 webcomponents/word-cloud/package-lock.json | 122 ++++++++++++---------
 webcomponents/word-cloud/package.json      |  18 +--
 4 files changed, 86 insertions(+), 63 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 694d89593..690510157 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,8 @@
 ### Web Components
 
 - charts: v2.2.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/charts/CHANGELOG.md))
-- 
+- word-cloud: v1.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/word-cloud/CHANGELOG.md))
+
 <a name="4.9.0"></a>
 
 # [4.9.0](https://github.com/deckgo/deckdeckgo/compare/v4.8.0...v4.9.0) (2021-08-20)
diff --git a/webcomponents/word-cloud/CHANGELOG.md b/webcomponents/word-cloud/CHANGELOG.md
index 19cdb75b0..1f20dba0a 100644
--- a/webcomponents/word-cloud/CHANGELOG.md
+++ b/webcomponents/word-cloud/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 1.1.0 (2021-09-02)
+
+### Build
+
+- bump dependencies
+
 # 1.1.0 (2021-05-29)
 
 ### Build
diff --git a/webcomponents/word-cloud/package-lock.json b/webcomponents/word-cloud/package-lock.json
index 68d92edea..99eb245cb 100644
--- a/webcomponents/word-cloud/package-lock.json
+++ b/webcomponents/word-cloud/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/word-cloud",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -19,9 +19,9 @@
       "integrity": "sha512-wS6KqJZYOB5V6lIYauv4ij5Q2S0e9BAHw+786FsFZ0UZ22GOxBHvG3Cq7kIxRs8Zr3wAw2eTvcSOZ0TIj/tfSQ=="
     },
     "@stencil/core": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.2.tgz",
-      "integrity": "sha512-bgjPXkSzzg1WnTgVUm6m5ZzpKt602WmA/QljODAW1xVN40OHJdbGblzF/F6MFzqv2c5Cy30CB41arc8qADIdcQ==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.8.0.tgz",
+      "integrity": "sha512-WazFGUMnbumg8ePNvej8cIOEcxvuZ0ugKQkkE1xFbDYcl7DgJd62MiG+bIqCcQlIdLEfhjAdoixxlFdJgrgjyA==",
       "dev": true
     },
     "@stencil/postcss": {
@@ -40,30 +40,30 @@
       "dev": true
     },
     "@types/d3": {
-      "version": "3.5.44",
-      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-3.5.44.tgz",
-      "integrity": "sha512-hFEcf03YGJ2uQoDYEp3nFD5mXWxly5kf6KOstuOQFEs9sUCN7kNlKhcYkpZ3gK6PiHz4XRLkoHa80NVCJNeLBw==",
+      "version": "3.5.45",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-3.5.45.tgz",
+      "integrity": "sha512-wLICfMtjDEoAJie1MF6OuksAzOapRXgJy+l5HQVpyC1yMAlvHz2QKrrasUHru8xD6cbgQNGeO+CeyjOlKtly2A==",
       "dev": true
     },
     "@types/d3-cloud": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-cloud/-/d3-cloud-1.2.3.tgz",
-      "integrity": "sha512-VUcRA9YWM1V5Srg444/zVxgmhVyIYBrChIr5lg+0cPGNM4J4fLdBqEeAkk9ggRPM3Um4fUy/p/gtEKbAqL/hcw==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@types/d3-cloud/-/d3-cloud-1.2.5.tgz",
+      "integrity": "sha512-vEIER9DsEBUOdpRiwCh3n1qE+cV6h4e1LhxhY2sLt+m8LPNAIkOOhTlqk0JDiBwD+ZPM8ynFAOU3AuPuVYBFBA==",
       "dev": true,
       "requires": {
         "@types/d3": "^3"
       }
     },
     "@types/d3-selection": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-2.0.0.tgz",
-      "integrity": "sha512-EF0lWZ4tg7oDFg4YQFlbOU3936e3a9UmoQ2IXlBy1+cv2c2Pv7knhKUzGlH5Hq2sF/KeDTH1amiRPey2rrLMQA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.1.tgz",
+      "integrity": "sha512-aJ1d1SCUtERHH65bB8NNoLpUOI3z8kVcfg2BGm4rMMUwuZF4x6qnIEKjT60Vt0o7gP/a/xkRVs4D9CpDifbyRA==",
       "dev": true
     },
     "@types/minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
       "dev": true
     },
     "ansi-styles": {
@@ -94,17 +94,25 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "10.2.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.6.tgz",
-      "integrity": "sha512-8lChSmdU6dCNMCQopIf4Pe5kipkAGj/fvTMslCsih0uHpOrXOPUEVOmYMMqmw3cekQkSD7EhIeuYl5y0BLdKqg==",
+      "version": "10.3.3",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.3.tgz",
+      "integrity": "sha512-yRzjxfnggrP/+qVHlUuZz5FZzEbkT+Yt0/Df6ScEMnbbZBLzYB2W0KLxoQCW+THm1SpOsM1ZPcTHAwuvmibIsQ==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.16.6",
-        "caniuse-lite": "^1.0.30001230",
-        "colorette": "^1.2.2",
+        "browserslist": "^4.16.8",
+        "caniuse-lite": "^1.0.30001252",
+        "colorette": "^1.3.0",
         "fraction.js": "^4.1.1",
         "normalize-range": "^0.1.2",
         "postcss-value-parser": "^4.1.0"
+      },
+      "dependencies": {
+        "colorette": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz",
+          "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
+          "dev": true
+        }
       }
     },
     "balanced-match": {
@@ -124,22 +132,30 @@
       }
     },
     "browserslist": {
-      "version": "4.16.6",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
-      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+      "version": "4.16.8",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.8.tgz",
+      "integrity": "sha512-sc2m9ohR/49sWEbPj14ZSSZqp+kbi16aLao42Hmn3Z8FpjuMaq2xCA2l4zl9ITfyzvnvyE0hcg62YkIGKxgaNQ==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001219",
-        "colorette": "^1.2.2",
-        "electron-to-chromium": "^1.3.723",
+        "caniuse-lite": "^1.0.30001251",
+        "colorette": "^1.3.0",
+        "electron-to-chromium": "^1.3.811",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.71"
+        "node-releases": "^1.1.75"
+      },
+      "dependencies": {
+        "colorette": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz",
+          "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
+          "dev": true
+        }
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001230",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz",
-      "integrity": "sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==",
+      "version": "1.0.30001252",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001252.tgz",
+      "integrity": "sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw==",
       "dev": true
     },
     "chalk": {
@@ -206,14 +222,14 @@
       }
     },
     "d3-selection": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
-      "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
     },
     "electron-to-chromium": {
-      "version": "1.3.742",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.742.tgz",
-      "integrity": "sha512-ihL14knI9FikJmH2XUIDdZFWJxvr14rPSdOhJ7PpS27xbz8qmaRwCwyg/bmFwjWKmWK9QyamiCZVCvXm5CH//Q==",
+      "version": "1.3.827",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.827.tgz",
+      "integrity": "sha512-ye+4uQOY/jbjRutMcE/EmOcNwUeo1qo9aKL2tPyb09cU3lmxNeyDF4RWiemmkknW+p29h7dyDqy02higTxc9/A==",
       "dev": true
     },
     "end-of-stream": {
@@ -286,9 +302,9 @@
       "dev": true
     },
     "husky": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-6.0.0.tgz",
-      "integrity": "sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz",
+      "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
       "dev": true
     },
     "ignore": {
@@ -298,9 +314,9 @@
       "dev": true
     },
     "is-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
       "dev": true
     },
     "isexe": {
@@ -365,9 +381,9 @@
       "dev": true
     },
     "node-releases": {
-      "version": "1.1.72",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.72.tgz",
-      "integrity": "sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==",
+      "version": "1.1.75",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.75.tgz",
+      "integrity": "sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==",
       "dev": true
     },
     "normalize-range": {
@@ -457,15 +473,15 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz",
-      "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+      "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
       "dev": true
     },
     "pretty-quick": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.1.0.tgz",
-      "integrity": "sha512-DtxIxksaUWCgPFN7E1ZZk4+Aav3CCuRdhrDSFZENb404sYMtuo9Zka823F+Mgeyt8Zt3bUiCjFzzWYE9LYqkmQ==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.1.1.tgz",
+      "integrity": "sha512-ZYLGiMoV2jcaas3vTJrLvKAYsxDoXQBUn8OSTxkl67Fyov9lyXivJTl0+2WVh+y6EovGcw7Lm5ThYpH+Sh3XxQ==",
       "dev": true,
       "requires": {
         "chalk": "^3.0.0",
diff --git a/webcomponents/word-cloud/package.json b/webcomponents/word-cloud/package.json
index 9160b6ae6..040768de3 100644
--- a/webcomponents/word-cloud/package.json
+++ b/webcomponents/word-cloud/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/word-cloud",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A Web Component for creating word clouds",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -25,20 +25,20 @@
   "dependencies": {
     "@deckdeckgo/utils": "^2.0.1",
     "d3-cloud": "^1.2.5",
-    "d3-selection": "^2.0.0"
+    "d3-selection": "^3.0.0"
   },
   "license": "MIT",
   "devDependencies": {
     "@deckdeckgo/slide-utils": "^4.0.3",
-    "@stencil/core": "^2.5.2",
+    "@stencil/core": "^2.8.0",
     "@stencil/postcss": "^2.0.0",
     "@stencil/sass": "^1.4.1",
-    "@types/d3-cloud": "^1.2.3",
-    "@types/d3-selection": "^2.0.0",
-    "autoprefixer": "^10.2.6",
-    "husky": "^6.0.0",
-    "prettier": "2.3.0",
-    "pretty-quick": "^3.1.0"
+    "@types/d3-cloud": "^1.2.5",
+    "@types/d3-selection": "^3.0.1",
+    "autoprefixer": "^10.3.3",
+    "husky": "^7.0.2",
+    "prettier": "2.3.2",
+    "pretty-quick": "^3.1.1"
   },
   "repository": {
     "type": "git",

From ffb179dff18e2038994722900d07585893269901 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 2 Sep 2021 07:16:35 +0200
Subject: [PATCH 07/17] feat: preserve color if content does not change

---
 webcomponents/word-cloud/CHANGELOG.md               |  4 ++++
 .../src/components/word-cloud/word-cloud.tsx        | 13 ++++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/webcomponents/word-cloud/CHANGELOG.md b/webcomponents/word-cloud/CHANGELOG.md
index 1f20dba0a..fb3cc9833 100644
--- a/webcomponents/word-cloud/CHANGELOG.md
+++ b/webcomponents/word-cloud/CHANGELOG.md
@@ -1,5 +1,9 @@
 # 1.1.0 (2021-09-02)
 
+### Features
+
+- preserve color if content does not change
+
 ### Build
 
 - bump dependencies
diff --git a/webcomponents/word-cloud/src/components/word-cloud/word-cloud.tsx b/webcomponents/word-cloud/src/components/word-cloud/word-cloud.tsx
index 849521692..f200e16f6 100644
--- a/webcomponents/word-cloud/src/components/word-cloud/word-cloud.tsx
+++ b/webcomponents/word-cloud/src/components/word-cloud/word-cloud.tsx
@@ -57,7 +57,7 @@ export class DeckdeckgoWordCloud implements DeckdeckgoComponent {
 
   private svgRef!: SVGGElement;
 
-  private colors: string[] = Array.from({length: 5}, (_v, _i) => Math.floor(Math.random() * 16777215).toString(16));
+  private colors: string[] | undefined;
 
   private width: number;
   private height: number;
@@ -189,13 +189,17 @@ export class DeckdeckgoWordCloud implements DeckdeckgoComponent {
       return;
     }
 
+    if (!this.colors || this.colors.length !== words.length) {
+      this.colors = Array.from({length: words.length}, (_v, _i) => Math.floor(Math.random() * 16777215).toString(16));
+    }
+
     const layout = cloud()
       .size([this.width, this.height])
       .words(
         words.map((d: string, index: number) => ({
           text: d,
           size: 10 + Math.random() * 110,
-          color: `var(--deckgo-word-count-fill-color-${index}, ${this.getRandomColor()})`,
+          color: `var(--deckgo-word-count-fill-color-${index}, #${this.colors?.[index]})`,
         }))
       )
       .rotate(() => ~~(Math.random() * 2) * 90)
@@ -209,11 +213,6 @@ export class DeckdeckgoWordCloud implements DeckdeckgoComponent {
     layout.start();
   }
 
-  private getRandomColor(): string {
-    const index: number = Math.floor(Math.random() * this.colors.length);
-    return `#${this.colors[index]}`;
-  }
-
   private async applyChanges() {
     await Promise.all([this.wordCloud(), this.stopEditing(), this.updatePlaceholder()]);
   }

From d63cda999487b4f960af7048e279e417819ff4d3 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 2 Sep 2021 07:45:31 +0200
Subject: [PATCH 08/17] feat: do not repaint on edit or draw if list of words
 did not change

---
 webcomponents/word-cloud/CHANGELOG.md              |  3 ++-
 .../src/components/word-cloud/word-cloud.tsx       | 11 +++++++++++
 webcomponents/word-cloud/src/index.html            | 14 ++++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/webcomponents/word-cloud/CHANGELOG.md b/webcomponents/word-cloud/CHANGELOG.md
index fb3cc9833..45dab554f 100644
--- a/webcomponents/word-cloud/CHANGELOG.md
+++ b/webcomponents/word-cloud/CHANGELOG.md
@@ -1,8 +1,9 @@
-# 1.1.0 (2021-09-02)
+# 1.2.0 (2021-09-02)
 
 ### Features
 
 - preserve color if content does not change
+- do not repaint on edit or draw if list of words did not change
 
 ### Build
 
diff --git a/webcomponents/word-cloud/src/components/word-cloud/word-cloud.tsx b/webcomponents/word-cloud/src/components/word-cloud/word-cloud.tsx
index f200e16f6..6bf72a880 100644
--- a/webcomponents/word-cloud/src/components/word-cloud/word-cloud.tsx
+++ b/webcomponents/word-cloud/src/components/word-cloud/word-cloud.tsx
@@ -62,6 +62,8 @@ export class DeckdeckgoWordCloud implements DeckdeckgoComponent {
   private width: number;
   private height: number;
 
+  private editWords: string;
+
   async componentDidLoad() {
     this.initWindowResize();
 
@@ -189,6 +191,13 @@ export class DeckdeckgoWordCloud implements DeckdeckgoComponent {
       return;
     }
 
+    const sizeMatch: boolean = this.svgRef.getAttribute('width') === `${this.width}` && this.svgRef.getAttribute('height') === `${this.height}`;
+
+    if (words.join('') === this.editWords && sizeMatch) {
+      // We do not repaint if the list of words did not change
+      return;
+    }
+
     if (!this.colors || this.colors.length !== words.length) {
       this.colors = Array.from({length: words.length}, (_v, _i) => Math.floor(Math.random() * 16777215).toString(16));
     }
@@ -211,6 +220,8 @@ export class DeckdeckgoWordCloud implements DeckdeckgoComponent {
       });
 
     layout.start();
+
+    this.editWords = words?.join('');
   }
 
   private async applyChanges() {
diff --git a/webcomponents/word-cloud/src/index.html b/webcomponents/word-cloud/src/index.html
index 83af3a94b..1822f6fca 100644
--- a/webcomponents/word-cloud/src/index.html
+++ b/webcomponents/word-cloud/src/index.html
@@ -17,6 +17,20 @@ <h1>You can edit this awesome word cloud</h1>
       </deckgo-word-cloud>
     </div>
 
+    <div>
+      <button onclick="redraw()">Resize</button>
+
+      <script type="text/javascript">
+        const redraw = () => {
+          const div = document.querySelector('div');
+          div.style.width = '300px';
+
+          const word = document.querySelector('deckgo-word-cloud');
+          word.lazyLoadContent().then(() => {});
+        }
+      </script>
+    </div>
+
     <h1>Or make it not editable</h1>
 
     <div style="width: 560px; height: 560px">

From dccff6d9af170d3d6d6dac02d03b4bae8c4fdd16 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 2 Sep 2021 07:47:54 +0200
Subject: [PATCH 09/17] build: update word-cloud

---
 remote/package-lock.json | 14 +++++++-------
 remote/package.json      |  2 +-
 studio/package-lock.json | 15 ++++-----------
 studio/package.json      |  2 +-
 4 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/remote/package-lock.json b/remote/package-lock.json
index aee1941f8..0e2da4e44 100644
--- a/remote/package-lock.json
+++ b/remote/package-lock.json
@@ -1469,13 +1469,13 @@
       "integrity": "sha512-wS6KqJZYOB5V6lIYauv4ij5Q2S0e9BAHw+786FsFZ0UZ22GOxBHvG3Cq7kIxRs8Zr3wAw2eTvcSOZ0TIj/tfSQ=="
     },
     "@deckdeckgo/word-cloud": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/word-cloud/-/word-cloud-1.1.0.tgz",
-      "integrity": "sha512-lSzVI71jz4IqhT59X9n5bdTYnHL73++Ri6/bF4L0n9DcEXDyGPpyjJqZ7qXFFH4jwhY/JN2Qzi1Xq+8Kg86I+Q==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/word-cloud/-/word-cloud-1.2.0.tgz",
+      "integrity": "sha512-m/pyWyI5BZqiGwQUIccGtY1KTjJkdPqUa9+q/s+djTHY7/x/gUiw5F9ZcxOHFxTYQc30eQaK1UOfPQGfuuRG1g==",
       "requires": {
         "@deckdeckgo/utils": "^2.0.1",
         "d3-cloud": "^1.2.5",
-        "d3-selection": "^2.0.0"
+        "d3-selection": "^3.0.0"
       }
     },
     "@deckdeckgo/youtube": {
@@ -2354,9 +2354,9 @@
       }
     },
     "d3-selection": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
-      "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
     },
     "d3-shape": {
       "version": "3.0.1",
diff --git a/remote/package.json b/remote/package.json
index 5b12081b2..ec3feeac1 100644
--- a/remote/package.json
+++ b/remote/package.json
@@ -46,7 +46,7 @@
     "@deckdeckgo/slide-youtube": "^2.4.0",
     "@deckdeckgo/social": "^4.1.0",
     "@deckdeckgo/utils": "^2.0.1",
-    "@deckdeckgo/word-cloud": "^1.1.0",
+    "@deckdeckgo/word-cloud": "^1.2.0",
     "@deckdeckgo/youtube": "^2.1.0",
     "@ionic/core": "^5.6.14",
     "date-fns": "^2.23.0",
diff --git a/studio/package-lock.json b/studio/package-lock.json
index 9647ea50c..ac0b6baa6 100644
--- a/studio/package-lock.json
+++ b/studio/package-lock.json
@@ -1434,20 +1434,13 @@
       "integrity": "sha512-wS6KqJZYOB5V6lIYauv4ij5Q2S0e9BAHw+786FsFZ0UZ22GOxBHvG3Cq7kIxRs8Zr3wAw2eTvcSOZ0TIj/tfSQ=="
     },
     "@deckdeckgo/word-cloud": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/word-cloud/-/word-cloud-1.1.0.tgz",
-      "integrity": "sha512-lSzVI71jz4IqhT59X9n5bdTYnHL73++Ri6/bF4L0n9DcEXDyGPpyjJqZ7qXFFH4jwhY/JN2Qzi1Xq+8Kg86I+Q==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/word-cloud/-/word-cloud-1.2.0.tgz",
+      "integrity": "sha512-m/pyWyI5BZqiGwQUIccGtY1KTjJkdPqUa9+q/s+djTHY7/x/gUiw5F9ZcxOHFxTYQc30eQaK1UOfPQGfuuRG1g==",
       "requires": {
         "@deckdeckgo/utils": "^2.0.1",
         "d3-cloud": "^1.2.5",
-        "d3-selection": "^2.0.0"
-      },
-      "dependencies": {
-        "d3-selection": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
-          "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
-        }
+        "d3-selection": "^3.0.0"
       }
     },
     "@deckdeckgo/youtube": {
diff --git a/studio/package.json b/studio/package.json
index 7a847f6d3..f4d7c61fa 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -49,7 +49,7 @@
     "@deckdeckgo/slide-youtube": "^2.4.0",
     "@deckdeckgo/social": "^4.1.0",
     "@deckdeckgo/utils": "^2.0.1",
-    "@deckdeckgo/word-cloud": "^1.1.0",
+    "@deckdeckgo/word-cloud": "^1.2.0",
     "@deckdeckgo/youtube": "^2.1.0",
     "@ionic/core": "^5.6.14",
     "firebase": "^8.9.1",

From 2d5efb2f03d8fa028d900e1aca7e76c6e462aad6 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 2 Sep 2021 08:00:19 +0200
Subject: [PATCH 10/17] feat: inherit stroke color from fill color

---
 CHANGELOG.md                                       |  2 +-
 webcomponents/charts/CHANGELOG.md                  |  6 ++++++
 webcomponents/charts/package-lock.json             |  2 +-
 webcomponents/charts/package.json                  |  2 +-
 .../deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx  | 14 +++++++-------
 .../deckdeckgo-line-chart.tsx                      | 12 ++++++++----
 .../deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx  | 14 +++++++-------
 7 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 690510157..d96980353 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### Web Components
 
-- charts: v2.2.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/charts/CHANGELOG.md))
+- charts: v2.2.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/charts/CHANGELOG.md))
 - word-cloud: v1.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/word-cloud/CHANGELOG.md))
 
 <a name="4.9.0"></a>
diff --git a/webcomponents/charts/CHANGELOG.md b/webcomponents/charts/CHANGELOG.md
index de2336591..8ed3a333d 100644
--- a/webcomponents/charts/CHANGELOG.md
+++ b/webcomponents/charts/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 2.2.2 (2021-09-02)
+
+### Features
+
+- inherit stroke color from random fill color
+
 # 2.2.1 (2021-09-02)
 
 ### Chore
diff --git a/webcomponents/charts/package-lock.json b/webcomponents/charts/package-lock.json
index 0f9ee3cdf..d2ce2f7b4 100644
--- a/webcomponents/charts/package-lock.json
+++ b/webcomponents/charts/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/charts",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/webcomponents/charts/package.json b/webcomponents/charts/package.json
index 0253e8fd3..f4ab6ae7c 100644
--- a/webcomponents/charts/package.json
+++ b/webcomponents/charts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/charts",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "A collection of Web Components to easily draw charts",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
index e2a21f8d1..fa3f01c7b 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
@@ -357,19 +357,19 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
         .append('rect')
         .merge(section)
         .attr('style', (d, i) => {
-          const fillColor: string = this.randomColors && this.randomColors.length > i ? `#${this.randomColors[i]}` : '';
+          const fillColor: string = this.randomColors && this.randomColors.length > i ? `, #${this.randomColors[i]}` : '';
+
+          const background: string = `var(--deckgo-chart-fill-color-${d.key}${fillColor})`;
 
           return (
-            'fill: var(--deckgo-chart-fill-color-' +
-            d.key +
-            ', ' +
-            fillColor +
-            '); fill-opacity: var(--deckgo-chart-fill-opacity-' +
+            'fill: ' +
+            background +
+            '; fill-opacity: var(--deckgo-chart-fill-opacity-' +
             d.key +
             ', 0.8); stroke: var(--deckgo-chart-stroke-' +
             d.key +
             ', ' +
-            fillColor +
+            background +
             '); stroke-width: var(--deckgo-chart-stroke-width-' +
             d.key +
             ', 3px)'
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx
index d34c2514c..814142abf 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx
@@ -424,13 +424,15 @@ export class DeckdeckgoLineChart implements DeckdeckgoChart {
     // Starting with line 1 instead of 0 is more readable. Also Pie chart style start with 1 too
     const styleIndex: number = index + 1;
 
+    const background: string = `var(--deckgo-chart-fill-color-${styleIndex}, #${randomFillColor})`;
+
     this.svg
       .append('path')
       .datum(data)
       .attr('class', 'area')
-      .style('fill', `var(--deckgo-chart-fill-color-${styleIndex}, #${randomFillColor})`)
+      .style('fill', background)
       .style('fill-opacity', `var(--deckgo-chart-fill-opacity-${styleIndex}, 0.8)`)
-      .style('stroke', `var(--deckgo-chart-stroke-${styleIndex}, var(--deckgo-chart-stroke, #${randomFillColor}))`)
+      .style('stroke', `var(--deckgo-chart-stroke-${styleIndex}, var(--deckgo-chart-stroke, ${background}))`)
       .style('stroke-width', `var(--deckgo-chart-stroke-width-${styleIndex}, 3px)`)
       .attr('d', line);
   }
@@ -443,13 +445,15 @@ export class DeckdeckgoLineChart implements DeckdeckgoChart {
     // Starting with line 1 instead of 0 is more readable. Also Pie chart style start with 1 too
     const styleIndex: number = index + 1;
 
+    const background: string = `var(--deckgo-chart-fill-color-${styleIndex}, #${randomFillColor})`;
+
     section
       .enter()
       .append('path')
       .merge(section)
-      .style('fill', `var(--deckgo-chart-fill-color-${styleIndex}, #${randomFillColor})`)
+      .style('fill', background)
       .style('fill-opacity', `var(--deckgo-chart-fill-opacity-${styleIndex}, 0.8)`)
-      .style('stroke', `var(--deckgo-chart-stroke-${styleIndex}, var(--deckgo-chart-stroke, #${randomFillColor}))`)
+      .style('stroke', `var(--deckgo-chart-stroke-${styleIndex}, var(--deckgo-chart-stroke, ${background}))`)
       .style('stroke-width', `var(--deckgo-chart-stroke-width-${styleIndex}, 3px)`)
       .transition()
       .duration(this.animationDuration)
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
index 88c00f7fe..91f0abe4b 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
@@ -235,19 +235,19 @@ export class DeckdeckgoPieChart implements DeckdeckgoChart {
         .append('path')
         .merge(section)
         .attr('style', (d) => {
-          const randomColor: string = d.data.randomFillColor ? `#${d.data.randomFillColor}` : '';
+          const randomColor: string = d.data.randomFillColor ? `, #${d.data.randomFillColor}` : '';
+
+          const background: string = `var(--deckgo-chart-fill-color-${d.data.key}${randomColor})`;
 
           return (
-            'fill: var(--deckgo-chart-fill-color-' +
-            d.data.key +
-            ', ' +
-            randomColor +
-            '); fill-opacity: var(--deckgo-chart-fill-opacity-' +
+            'fill: ' +
+            background +
+            '; fill-opacity: var(--deckgo-chart-fill-opacity-' +
             d.data.key +
             ', 0.8); stroke: var(--deckgo-chart-stroke-' +
             d.data.key +
             ', ' +
-            randomColor +
+            background +
             '); stroke-width: var(--deckgo-chart-stroke-width-' +
             d.data.key +
             ', 3px)'

From dd944d09bad3a708bb779aa7806e0193a711fadd Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 2 Sep 2021 08:07:33 +0200
Subject: [PATCH 11/17] build: update charts

---
 remote/package-lock.json | 13 +++----------
 remote/package.json      |  2 +-
 studio/package-lock.json |  6 +++---
 studio/package.json      |  2 +-
 4 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/remote/package-lock.json b/remote/package-lock.json
index 0e2da4e44..66d68446f 100644
--- a/remote/package-lock.json
+++ b/remote/package-lock.json
@@ -1177,9 +1177,9 @@
       }
     },
     "@deckdeckgo/charts": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/charts/-/charts-2.2.1.tgz",
-      "integrity": "sha512-YTvg5UCZZ8o5ZOTmiuum4ykK+Z1nUCNv+PBoUCy3gOD7lVjofOwYx7ka0liCC/IVwMeuX3a/ksOiXLok0b1Ttw==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/charts/-/charts-2.2.2.tgz",
+      "integrity": "sha512-mGRpOSkLf0M+dECEo8XGziQp4KME+t2CHJW6OXPrvFrUF7Ovz5keCfkgwNaYSLFdrl/Aget+xZaJl38haX4CWA==",
       "requires": {
         "d3-array": "^3.0.2",
         "d3-axis": "^3.0.0",
@@ -1189,13 +1189,6 @@
         "d3-shape": "^3.0.1",
         "d3-transition": "^3.0.1",
         "date-fns": "^2.23.0"
-      },
-      "dependencies": {
-        "d3-selection": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
-          "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
-        }
       }
     },
     "@deckdeckgo/core": {
diff --git a/remote/package.json b/remote/package.json
index ec3feeac1..4af740be4 100644
--- a/remote/package.json
+++ b/remote/package.json
@@ -17,7 +17,7 @@
     "test.watch": "stencil test --spec --e2e --watch"
   },
   "dependencies": {
-    "@deckdeckgo/charts": "^2.2.1",
+    "@deckdeckgo/charts": "^2.2.2",
     "@deckdeckgo/core": "^8.3.0",
     "@deckdeckgo/deck-utils": "^4.1.0",
     "@deckdeckgo/demo": "^2.1.0",
diff --git a/studio/package-lock.json b/studio/package-lock.json
index ac0b6baa6..a933b4859 100644
--- a/studio/package-lock.json
+++ b/studio/package-lock.json
@@ -1126,9 +1126,9 @@
       }
     },
     "@deckdeckgo/charts": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/charts/-/charts-2.2.1.tgz",
-      "integrity": "sha512-YTvg5UCZZ8o5ZOTmiuum4ykK+Z1nUCNv+PBoUCy3gOD7lVjofOwYx7ka0liCC/IVwMeuX3a/ksOiXLok0b1Ttw==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/charts/-/charts-2.2.2.tgz",
+      "integrity": "sha512-mGRpOSkLf0M+dECEo8XGziQp4KME+t2CHJW6OXPrvFrUF7Ovz5keCfkgwNaYSLFdrl/Aget+xZaJl38haX4CWA==",
       "requires": {
         "d3-array": "^3.0.2",
         "d3-axis": "^3.0.0",
diff --git a/studio/package.json b/studio/package.json
index f4d7c61fa..3cc5e0e91 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -20,7 +20,7 @@
     "test.watch": "stencil test --spec --e2e --watch"
   },
   "dependencies": {
-    "@deckdeckgo/charts": "^2.2.1",
+    "@deckdeckgo/charts": "^2.2.2",
     "@deckdeckgo/color": "^4.1.0",
     "@deckdeckgo/core": "^8.4.0",
     "@deckdeckgo/deck-utils": "^4.1.0",

From d9fb016fdfbfd1e18aae1d457cc9a731aff4af1e Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 2 Sep 2021 08:18:17 +0200
Subject: [PATCH 12/17] style: charts in thumbnails size

---
 .../app-slide-thumbnail/app-slide-thumbnail.tsx    | 14 ++++++++++----
 studio/src/global/theme/mixins/_deck.scss          |  4 ++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/studio/src/app/components/editor/slide/app-slide-thumbnail/app-slide-thumbnail.tsx b/studio/src/app/components/editor/slide/app-slide-thumbnail/app-slide-thumbnail.tsx
index cf4103066..63857b472 100644
--- a/studio/src/app/components/editor/slide/app-slide-thumbnail/app-slide-thumbnail.tsx
+++ b/studio/src/app/components/editor/slide/app-slide-thumbnail/app-slide-thumbnail.tsx
@@ -84,10 +84,16 @@ export class AppSlideThumbnail {
   }
 
   private async lazyLoadCharts() {
-    const imgs: NodeListOf<HTMLDeckgoSlideChartElement> = this.deckPreviewRef.querySelectorAll('deckgo-slide-chart');
-    const promises: Promise<void>[] = Array.from(imgs).map((img: HTMLDeckgoSlideChartElement) => {
-      img.customLoader = true;
-      return img.lazyLoadContent();
+    const charts: NodeListOf<HTMLDeckgoSlideChartElement> = this.deckPreviewRef.querySelectorAll('deckgo-slide-chart');
+    const promises: Promise<void>[] = Array.from(charts).map((chart: HTMLDeckgoSlideChartElement) => {
+      chart.customLoader = true;
+
+      chart.marginTop = 8;
+      chart.marginBottom = 8;
+      chart.marginLeft = 8;
+      chart.marginRight = 8;
+
+      return chart.lazyLoadContent();
     });
     await Promise.all(promises);
   }
diff --git a/studio/src/global/theme/mixins/_deck.scss b/studio/src/global/theme/mixins/_deck.scss
index 98f618f56..2bea5d9ad 100644
--- a/studio/src/global/theme/mixins/_deck.scss
+++ b/studio/src/global/theme/mixins/_deck.scss
@@ -30,6 +30,10 @@
 
   --deckgo-markdown-container-padding: 4px 8px;
 
+  deckgo-slide-chart:not([type="pie"]) {
+    --deckgo-chart-margin: 8px;;
+  }
+
   .deckgo-slide-container {
     > * {
       margin: 0;

From e84fe95ce3caa97e89783c093138a884f3976e22 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Sat, 4 Sep 2021 08:24:33 +0200
Subject: [PATCH 13/17] feat: event chartRandomColor

---
 webcomponents/charts/CHANGELOG.md             |  6 ++
 webcomponents/charts/package-lock.json        |  2 +-
 webcomponents/charts/package.json             |  2 +-
 webcomponents/charts/src/components.d.ts      | 12 +++
 .../deckdeckgo-bar-chart.tsx                  | 76 ++++++++++---------
 .../charts/deckdeckgo-bar-chart/readme.md     |  7 +-
 .../deckdeckgo-line-chart.tsx                 |  8 ++
 .../charts/deckdeckgo-line-chart/readme.md    |  7 +-
 .../deckdeckgo-pie-chart.tsx                  | 20 ++++-
 .../charts/deckdeckgo-pie-chart/readme.md     |  7 +-
 10 files changed, 96 insertions(+), 51 deletions(-)

diff --git a/webcomponents/charts/CHANGELOG.md b/webcomponents/charts/CHANGELOG.md
index 8ed3a333d..7c969c89c 100644
--- a/webcomponents/charts/CHANGELOG.md
+++ b/webcomponents/charts/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 2.3.0 (2021-09-04)
+
+### Features
+
+- event `chartRandomColor` to emit the random colors that have been automatically generated to plot the chart 
+
 # 2.2.2 (2021-09-02)
 
 ### Features
diff --git a/webcomponents/charts/package-lock.json b/webcomponents/charts/package-lock.json
index d2ce2f7b4..7f3c4bae5 100644
--- a/webcomponents/charts/package-lock.json
+++ b/webcomponents/charts/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/charts",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/webcomponents/charts/package.json b/webcomponents/charts/package.json
index f4ab6ae7c..d42912992 100644
--- a/webcomponents/charts/package.json
+++ b/webcomponents/charts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/charts",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "A collection of Web Components to easily draw charts",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
diff --git a/webcomponents/charts/src/components.d.ts b/webcomponents/charts/src/components.d.ts
index 65a1f398e..86711adc3 100644
--- a/webcomponents/charts/src/components.d.ts
+++ b/webcomponents/charts/src/components.d.ts
@@ -332,6 +332,10 @@ declare namespace LocalJSX {
           * @private
          */
         "onChartCustomLoad"?: (event: CustomEvent<string>) => void;
+        /**
+          * Emit the random colors that are generated for the charts.
+         */
+        "onChartRandomColor"?: (event: CustomEvent<string[]>) => void;
         /**
           * The line separator use in your csv file
          */
@@ -403,6 +407,10 @@ declare namespace LocalJSX {
           * @private
          */
         "onChartCustomLoad"?: (event: CustomEvent<string>) => void;
+        /**
+          * Emit the random colors that are generated for the charts.
+         */
+        "onChartRandomColor"?: (event: CustomEvent<string[]>) => void;
         /**
           * The line separator use in your csv file
          */
@@ -470,6 +478,10 @@ declare namespace LocalJSX {
           * @private
          */
         "onChartCustomLoad"?: (event: CustomEvent<string>) => void;
+        /**
+          * Emit the random colors that are generated for the charts.
+         */
+        "onChartRandomColor"?: (event: CustomEvent<string[]>) => void;
         /**
           * The line separator use in your csv file
          */
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
index fa3f01c7b..52bb9c271 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
@@ -99,6 +99,12 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
   @Event()
   chartCustomLoad: EventEmitter<string>;
 
+  /**
+   * Emit the random colors that are generated for the charts.
+   */
+  @Event()
+  chartRandomColor: EventEmitter<string[]>;
+
   async componentDidLoad() {
     await this.draw();
   }
@@ -183,13 +189,21 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
 
     await this.drawAxis();
 
-    if (!this.randomColors || this.randomColors.length !== this.chartData[0].values.length) {
-      this.randomColors = Array.from({length: this.chartData[0].values.length}, (_v, _i) => Math.floor(Math.random() * 16777215).toString(16));
-    }
+    await this.initRandomColors();
 
     await this.drawBars(0, 0);
   }
 
+  private async initRandomColors() {
+    if (this.randomColors?.length === this.chartData[0].values.length) {
+      return;
+    }
+
+    this.randomColors = Array.from({length: this.chartData[0].values.length}, (_v, _i) => Math.floor(Math.random() * 16777215).toString(16));
+
+    this.chartRandomColor.emit(this.randomColors);
+  }
+
   private async drawBars(index: number, animationDuration: number) {
     await this.initAxisXDomain();
     await this.initAxisYDomain();
@@ -356,25 +370,7 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
         .enter()
         .append('rect')
         .merge(section)
-        .attr('style', (d, i) => {
-          const fillColor: string = this.randomColors && this.randomColors.length > i ? `, #${this.randomColors[i]}` : '';
-
-          const background: string = `var(--deckgo-chart-fill-color-${d.key}${fillColor})`;
-
-          return (
-            'fill: ' +
-            background +
-            '; fill-opacity: var(--deckgo-chart-fill-opacity-' +
-            d.key +
-            ', 0.8); stroke: var(--deckgo-chart-stroke-' +
-            d.key +
-            ', ' +
-            background +
-            '); stroke-width: var(--deckgo-chart-stroke-width-' +
-            d.key +
-            ', 3px)'
-          );
-        })
+        .attr('style', (d, i) => this.style(d, i))
         .transition()
         .duration(animationDuration)
         .attr('x', (d) => {
@@ -421,26 +417,32 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
           const height: number = this.height - this.marginTop - this.marginBottom - this.y(d.value);
           return height >= 0 ? height : 0;
         })
-        .attr('style', (d, i) => {
-          return (
-            'fill: var(--deckgo-chart-fill-color-' +
-            d.key +
-            ', ' +
-            (this.randomColors && this.randomColors.length > i ? `#${this.randomColors[i]}` : '') +
-            '); fill-opacity: var(--deckgo-chart-fill-opacity-' +
-            d.key +
-            '); stroke: var(--deckgo-chart-stroke-' +
-            d.key +
-            '); stroke-width: var(--deckgo-chart-stroke-width-' +
-            d.key +
-            ')'
-          );
-        });
+        .attr('style', (d, i) => this.style(d, i));
 
       resolve();
     });
   }
 
+  private style(d, i: number): string {
+    const fillColor: string = this.randomColors && this.randomColors.length > i ? `, #${this.randomColors[i]}` : '';
+
+    const background: string = `var(--deckgo-chart-fill-color-${d.key}${fillColor})`;
+
+    return (
+      'fill: ' +
+      background +
+      '; fill-opacity: var(--deckgo-chart-fill-opacity-' +
+      d.key +
+      ', 0.8); stroke: var(--deckgo-chart-stroke-' +
+      d.key +
+      ', ' +
+      background +
+      '); stroke-width: var(--deckgo-chart-stroke-width-' +
+      d.key +
+      ', 3px)'
+    );
+  }
+
   fetchData(): Promise<DeckdeckgoBarChartData[]> {
     return new Promise<DeckdeckgoBarChartData[]>(async (resolve) => {
       if (!this.src) {
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/readme.md b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/readme.md
index 9735bc08f..15dcfac68 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/readme.md
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/readme.md
@@ -117,9 +117,10 @@ You could find other examples of bar charts in the [src/index.html](https://gith
 
 ## Events
 
-| Event             | Description                                                                  | Type                  |
-| ----------------- | ---------------------------------------------------------------------------- | --------------------- |
-| `chartCustomLoad` | The event to be processed to load the data if you are using a custom loader. | `CustomEvent<string>` |
+| Event              | Description                                                                  | Type                    |
+| ------------------ | ---------------------------------------------------------------------------- | ----------------------- |
+| `chartCustomLoad`  | The event to be processed to load the data if you are using a custom loader. | `CustomEvent<string>`   |
+| `chartRandomColor` | Emit the random colors that are generated for the charts.                    | `CustomEvent<string[]>` |
 
 
 ## Methods
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx
index 814142abf..e145177ec 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/deckdeckgo-line-chart.tsx
@@ -120,6 +120,12 @@ export class DeckdeckgoLineChart implements DeckdeckgoChart {
   @Event()
   chartCustomLoad: EventEmitter<string>;
 
+  /**
+   * Emit the random colors that are generated for the charts.
+   */
+  @Event()
+  chartRandomColor: EventEmitter<string[]>;
+
   private svg: Selection<BaseType, any, HTMLElement, any>;
   private x: any;
   private y: any;
@@ -557,6 +563,8 @@ export class DeckdeckgoLineChart implements DeckdeckgoChart {
         }
       }
 
+      this.chartRandomColor.emit(this.randomFillColors);
+
       resolve(series);
     });
   }
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/readme.md b/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/readme.md
index d2cca4348..b7b1515b2 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/readme.md
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-line-chart/readme.md
@@ -133,9 +133,10 @@ You could find other examples of line charts in the [src/index.html](https://git
 
 ## Events
 
-| Event             | Description                                                                  | Type                  |
-| ----------------- | ---------------------------------------------------------------------------- | --------------------- |
-| `chartCustomLoad` | The event to be processed to load the data if you are using a custom loader. | `CustomEvent<string>` |
+| Event              | Description                                                                  | Type                    |
+| ------------------ | ---------------------------------------------------------------------------- | ----------------------- |
+| `chartCustomLoad`  | The event to be processed to load the data if you are using a custom loader. | `CustomEvent<string>`   |
+| `chartRandomColor` | Emit the random colors that are generated for the charts.                    | `CustomEvent<string[]>` |
 
 
 ## Methods
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
index 91f0abe4b..1308e4769 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/deckdeckgo-pie-chart.tsx
@@ -88,6 +88,12 @@ export class DeckdeckgoPieChart implements DeckdeckgoChart {
   @Event()
   chartCustomLoad: EventEmitter<string>;
 
+  /**
+   * Emit the random colors that are generated for the charts.
+   */
+  @Event()
+  chartRandomColor: EventEmitter<string[]>;
+
   private svg: Selection<BaseType, any, HTMLElement, any>;
   private myPath: Arc<any, DefaultArcObject>;
 
@@ -375,9 +381,7 @@ export class DeckdeckgoPieChart implements DeckdeckgoChart {
         const values: string[] = line.split(this.separator);
 
         if (values && values.length >= 2) {
-          if (!this.randomColors || this.randomColors.length !== lines.length) {
-            this.randomColors = Array.from({length: lines.length}, (_v, _i) => Math.floor(Math.random() * 16777215).toString(16));
-          }
+          this.initRandomColors(lines);
 
           const label: string = values[0];
 
@@ -426,6 +430,16 @@ export class DeckdeckgoPieChart implements DeckdeckgoChart {
     });
   }
 
+  private initRandomColors(lines: string[]) {
+    if (this.randomColors?.length === lines.length) {
+      return;
+    }
+
+    this.randomColors = Array.from({length: lines.length}, (_v, _i) => Math.floor(Math.random() * 16777215).toString(16));
+
+    this.chartRandomColor.emit(this.randomColors);
+  }
+
   render() {
     return (
       <Host style={{width: `${this.width}px`, height: `${this.height}px`}}>
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/readme.md b/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/readme.md
index 1dde9f67d..7f5a865ac 100644
--- a/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/readme.md
+++ b/webcomponents/charts/src/components/charts/deckdeckgo-pie-chart/readme.md
@@ -97,9 +97,10 @@ Qualified Hydropower;6.93%
 
 ## Events
 
-| Event             | Description                                                                  | Type                  |
-| ----------------- | ---------------------------------------------------------------------------- | --------------------- |
-| `chartCustomLoad` | The event to be processed to load the data if you are using a custom loader. | `CustomEvent<string>` |
+| Event              | Description                                                                  | Type                    |
+| ------------------ | ---------------------------------------------------------------------------- | ----------------------- |
+| `chartCustomLoad`  | The event to be processed to load the data if you are using a custom loader. | `CustomEvent<string>`   |
+| `chartRandomColor` | Emit the random colors that are generated for the charts.                    | `CustomEvent<string[]>` |
 
 
 ## Methods

From 04d596d7bd70064c3cfb90e38b5f40fe80b6850e Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Sat, 4 Sep 2021 08:26:48 +0200
Subject: [PATCH 14/17] feat: apply random colors

---
 webcomponents/slides/chart/CHANGELOG.md       |  6 ++
 webcomponents/slides/chart/package-lock.json  |  2 +-
 webcomponents/slides/chart/package.json       |  2 +-
 .../slides/chart/src/components.d.ts          |  4 ++
 .../slide/deckdeckgo-slide-chart.tsx          | 67 ++++++++++++++-----
 .../chart/src/components/slide/readme.md      | 10 +++
 6 files changed, 74 insertions(+), 17 deletions(-)

diff --git a/webcomponents/slides/chart/CHANGELOG.md b/webcomponents/slides/chart/CHANGELOG.md
index ed74037cd..e453144cc 100644
--- a/webcomponents/slides/chart/CHANGELOG.md
+++ b/webcomponents/slides/chart/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 2.5.0 (2021-09-04)
+
+### Features
+
+- apply generated random colors as style attributes (so that colors remains the same even on updates)
+
 # 2.4.0 (2021-05-29)
 
 ### Build
diff --git a/webcomponents/slides/chart/package-lock.json b/webcomponents/slides/chart/package-lock.json
index c9b7dae2c..379db8864 100644
--- a/webcomponents/slides/chart/package-lock.json
+++ b/webcomponents/slides/chart/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/slide-chart",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/webcomponents/slides/chart/package.json b/webcomponents/slides/chart/package.json
index 1657515a9..09bb0733c 100644
--- a/webcomponents/slides/chart/package.json
+++ b/webcomponents/slides/chart/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/slide-chart",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "The Chart template is handy to plot and animate charts in your presentations",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
diff --git a/webcomponents/slides/chart/src/components.d.ts b/webcomponents/slides/chart/src/components.d.ts
index a6f2e3644..db0bbf8b4 100644
--- a/webcomponents/slides/chart/src/components.d.ts
+++ b/webcomponents/slides/chart/src/components.d.ts
@@ -23,6 +23,10 @@ export namespace Components {
         "customLoader": boolean;
         "datePattern": string;
         "draw": () => Promise<void>;
+        /**
+          * Returns the list of the random colors that have been generated.
+         */
+        "getRandomColors": () => Promise<string[] | undefined | null>;
         "grid": string;
         "height": number;
         "hideContent": () => Promise<void>;
diff --git a/webcomponents/slides/chart/src/components/slide/deckdeckgo-slide-chart.tsx b/webcomponents/slides/chart/src/components/slide/deckdeckgo-slide-chart.tsx
index 68ba7d16e..d83f17520 100644
--- a/webcomponents/slides/chart/src/components/slide/deckdeckgo-slide-chart.tsx
+++ b/webcomponents/slides/chart/src/components/slide/deckdeckgo-slide-chart.tsx
@@ -9,6 +9,19 @@ enum DeckdeckgoSlideChartType {
   BAR = 'bar',
 }
 
+/**
+ * Manually define the list of methods of the charts as we do not want to explicitly add these to the bundle.
+ */
+interface HTMLDeckgoChartElement extends HTMLElement {
+  postCustomLoad(content: string | undefined): Promise<void>;
+  getRandomColors(): Promise<string[]>;
+  draw(width?: number, height?: number): Promise<void>;
+  next(): Promise<void>;
+  prev(): Promise<void>;
+  isBeginning(): Promise<boolean>;
+  isEnd(): Promise<boolean>;
+}
+
 /**
  * @slot title - A title
  * @slot notes - Some notes related to this slide
@@ -119,7 +132,7 @@ export class DeckdeckgoSlideChart implements DeckdeckgoSlideResize {
         return;
       }
 
-      const chart: HTMLElement = this.el.shadowRoot.querySelector(
+      const chart: HTMLDeckgoChartElement = this.el.shadowRoot.querySelector(
         this.type === DeckdeckgoSlideChartType.LINE ? 'deckgo-line-chart' : this.type === DeckdeckgoSlideChartType.BAR ? 'deckgo-bar-chart' : 'deckgo-pie-chart'
       );
 
@@ -128,7 +141,7 @@ export class DeckdeckgoSlideChart implements DeckdeckgoSlideResize {
         return;
       }
 
-      const couldSwipe: boolean = enter ? await (chart as any).isEnd() : await (chart as any).isBeginning();
+      const couldSwipe: boolean = enter ? await chart.isEnd() : await chart.isBeginning();
 
       if (couldSwipe) {
         resolve(true);
@@ -136,9 +149,9 @@ export class DeckdeckgoSlideChart implements DeckdeckgoSlideResize {
       }
 
       if (enter) {
-        await (chart as any).next();
+        await chart.next();
       } else {
-        await (chart as any).prev();
+        await chart.prev();
       }
 
       resolve(false);
@@ -208,13 +221,11 @@ export class DeckdeckgoSlideChart implements DeckdeckgoSlideResize {
   private async drawChart() {
     await this.initSize();
 
-    const element: HTMLElement = this.el.shadowRoot.querySelector(
+    const element: HTMLDeckgoChartElement = this.el.shadowRoot.querySelector(
       this.type === DeckdeckgoSlideChartType.LINE ? 'deckgo-line-chart' : this.type === DeckdeckgoSlideChartType.BAR ? 'deckgo-bar-chart' : 'deckgo-pie-chart'
     );
 
-    if (element) {
-      await (element as any).draw(this.chartWidth, this.chartHeight);
-    }
+    await element?.draw(this.chartWidth, this.chartHeight);
   }
 
   @Method()
@@ -233,18 +244,41 @@ export class DeckdeckgoSlideChart implements DeckdeckgoSlideResize {
 
   @Method()
   async postCustomLoad(content: string | undefined) {
-    let chartElement: HTMLElement;
+    const chartElement: HTMLDeckgoChartElement = this.getChartElement();
+    await chartElement?.postCustomLoad(content);
+  }
+
+  /**
+   * Returns the list of the random colors that have been generated.
+   */
+  @Method()
+  async getRandomColors(): Promise<string[] | undefined | null> {
+    const chartElement: HTMLDeckgoChartElement = this.getChartElement();
+    return chartElement?.getRandomColors();
+  }
+
+  private getChartElement(): HTMLDeckgoChartElement | null {
     if (this.type === DeckdeckgoSlideChartType.LINE) {
-      chartElement = this.el.shadowRoot.querySelector('deckgo-line-chart');
+      return this.el.shadowRoot.querySelector('deckgo-line-chart') as HTMLDeckgoChartElement | null;
     } else if (this.type === DeckdeckgoSlideChartType.BAR) {
-      chartElement = this.el.shadowRoot.querySelector('deckgo-bar-chart');
+      return this.el.shadowRoot.querySelector('deckgo-bar-chart') as HTMLDeckgoChartElement | null;
     } else {
-      chartElement = this.el.shadowRoot.querySelector('deckgo-pie-chart');
+      return this.el.shadowRoot.querySelector('deckgo-pie-chart') as HTMLDeckgoChartElement | null;
     }
+  }
 
-    if (chartElement) {
-      await (chartElement as any).postCustomLoad(content);
-    }
+  private onChartRandomColor($event: CustomEvent<string[]>) {
+    $event.detail.forEach((color: string, i: number) => {
+      const key: string = `--deckgo-chart-fill-color-${i + 1}`;
+
+      const css: CSSStyleDeclaration = window.getComputedStyle(this.el);
+
+      // Do not overwrite if style already set on the host
+      const style: string | undefined = css.getPropertyValue(key);
+      if (style === undefined || style === '') {
+        this.el.style.setProperty(key, `#${color}`);
+      }
+    });
   }
 
   render() {
@@ -283,6 +317,7 @@ export class DeckdeckgoSlideChart implements DeckdeckgoSlideResize {
           margin-left={this.marginLeft}
           animation={this.animation}
           animation-duration={this.animationDuration}
+          onChartRandomColor={($event: CustomEvent<string[]>) => this.onChartRandomColor($event)}
           {...attrs}></deckgo-bar-chart>
       );
     } else {
@@ -319,6 +354,7 @@ export class DeckdeckgoSlideChart implements DeckdeckgoSlideResize {
         margin-left={this.marginLeft}
         animation={this.animation}
         animation-duration={this.animationDuration}
+        onChartRandomColor={($event: CustomEvent<string[]>) => this.onChartRandomColor($event)}
         {...attrs}></deckgo-line-chart>
     );
   }
@@ -340,6 +376,7 @@ export class DeckdeckgoSlideChart implements DeckdeckgoSlideResize {
         margin-left={this.marginLeft}
         animation={this.animation}
         animation-duration={this.animationDuration}
+        onChartRandomColor={($event: CustomEvent<string[]>) => this.onChartRandomColor($event)}
         {...attrs}></deckgo-pie-chart>
     );
   }
diff --git a/webcomponents/slides/chart/src/components/slide/readme.md b/webcomponents/slides/chart/src/components/slide/readme.md
index 1d22ffb3e..efa5ff9ad 100644
--- a/webcomponents/slides/chart/src/components/slide/readme.md
+++ b/webcomponents/slides/chart/src/components/slide/readme.md
@@ -134,6 +134,16 @@ Type: `Promise<void>`
 
 
 
+### `getRandomColors() => Promise<string[] | undefined | null>`
+
+Returns the list of the random colors that have been generated.
+
+#### Returns
+
+Type: `Promise<string[]>`
+
+
+
 ### `hideContent() => Promise<void>`
 
 

From e7955ff5366eb61776596c604af545263c120d0b Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Sat, 4 Sep 2021 08:27:37 +0200
Subject: [PATCH 15/17] build: bump dependencies

---
 webcomponents/slides/chart/CHANGELOG.md      |   4 +
 webcomponents/slides/chart/package-lock.json | 196 ++++++++++---------
 webcomponents/slides/chart/package.json      |  10 +-
 3 files changed, 114 insertions(+), 96 deletions(-)

diff --git a/webcomponents/slides/chart/CHANGELOG.md b/webcomponents/slides/chart/CHANGELOG.md
index e453144cc..b004702cc 100644
--- a/webcomponents/slides/chart/CHANGELOG.md
+++ b/webcomponents/slides/chart/CHANGELOG.md
@@ -4,6 +4,10 @@
 
 - apply generated random colors as style attributes (so that colors remains the same even on updates)
 
+### Build
+
+- bump dependencies
+
 # 2.4.0 (2021-05-29)
 
 ### Build
diff --git a/webcomponents/slides/chart/package-lock.json b/webcomponents/slides/chart/package-lock.json
index 379db8864..446a6c6fc 100644
--- a/webcomponents/slides/chart/package-lock.json
+++ b/webcomponents/slides/chart/package-lock.json
@@ -18,9 +18,9 @@
       "integrity": "sha512-wS6KqJZYOB5V6lIYauv4ij5Q2S0e9BAHw+786FsFZ0UZ22GOxBHvG3Cq7kIxRs8Zr3wAw2eTvcSOZ0TIj/tfSQ=="
     },
     "@stencil/core": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.2.tgz",
-      "integrity": "sha512-bgjPXkSzzg1WnTgVUm6m5ZzpKt602WmA/QljODAW1xVN40OHJdbGblzF/F6MFzqv2c5Cy30CB41arc8qADIdcQ==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.8.0.tgz",
+      "integrity": "sha512-WazFGUMnbumg8ePNvej8cIOEcxvuZ0ugKQkkE1xFbDYcl7DgJd62MiG+bIqCcQlIdLEfhjAdoixxlFdJgrgjyA==",
       "dev": true
     },
     "@stencil/postcss": {
@@ -39,11 +39,20 @@
       "dev": true
     },
     "@types/minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-1z8k4wzFnNjVK/tlxvrWuK5WMt6mydWWP7+zvH5eFep4oj+UkrfiJTRtjCeBXNpwaA/FYqqtb4/QS4ianFpIRA==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
       "dev": true
     },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
     "array-differ": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
@@ -63,17 +72,25 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "10.2.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.6.tgz",
-      "integrity": "sha512-8lChSmdU6dCNMCQopIf4Pe5kipkAGj/fvTMslCsih0uHpOrXOPUEVOmYMMqmw3cekQkSD7EhIeuYl5y0BLdKqg==",
+      "version": "10.3.4",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.4.tgz",
+      "integrity": "sha512-EKjKDXOq7ug+jagLzmnoTRpTT0q1KVzEJqrJd0hCBa7FiG0WbFOBCcJCy2QkW1OckpO3qgttA1aWjVbeIPAecw==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.16.6",
-        "caniuse-lite": "^1.0.30001230",
-        "colorette": "^1.2.2",
+        "browserslist": "^4.16.8",
+        "caniuse-lite": "^1.0.30001252",
+        "colorette": "^1.3.0",
         "fraction.js": "^4.1.1",
         "normalize-range": "^0.1.2",
         "postcss-value-parser": "^4.1.0"
+      },
+      "dependencies": {
+        "colorette": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz",
+          "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
+          "dev": true
+        }
       }
     },
     "balanced-match": {
@@ -93,22 +110,55 @@
       }
     },
     "browserslist": {
-      "version": "4.16.6",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
-      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+      "version": "4.16.8",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.8.tgz",
+      "integrity": "sha512-sc2m9ohR/49sWEbPj14ZSSZqp+kbi16aLao42Hmn3Z8FpjuMaq2xCA2l4zl9ITfyzvnvyE0hcg62YkIGKxgaNQ==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001219",
-        "colorette": "^1.2.2",
-        "electron-to-chromium": "^1.3.723",
+        "caniuse-lite": "^1.0.30001251",
+        "colorette": "^1.3.0",
+        "electron-to-chromium": "^1.3.811",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.71"
+        "node-releases": "^1.1.75"
+      },
+      "dependencies": {
+        "colorette": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz",
+          "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
+          "dev": true
+        }
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001230",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz",
-      "integrity": "sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==",
+      "version": "1.0.30001252",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001252.tgz",
+      "integrity": "sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      }
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
     "colorette": {
@@ -135,9 +185,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.742",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.742.tgz",
-      "integrity": "sha512-ihL14knI9FikJmH2XUIDdZFWJxvr14rPSdOhJ7PpS27xbz8qmaRwCwyg/bmFwjWKmWK9QyamiCZVCvXm5CH//Q==",
+      "version": "1.3.830",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.830.tgz",
+      "integrity": "sha512-gBN7wNAxV5vl1430dG+XRcQhD4pIeYeak6p6rjdCtlz5wWNwDad8jwvphe5oi1chL5MV6RNRikfffBBiFuj+rQ==",
       "dev": true
     },
     "end-of-stream": {
@@ -197,6 +247,12 @@
         "pump": "^3.0.0"
       }
     },
+    "has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true
+    },
     "human-signals": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
@@ -204,9 +260,9 @@
       "dev": true
     },
     "husky": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-6.0.0.tgz",
-      "integrity": "sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.2.tgz",
+      "integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
       "dev": true
     },
     "ignore": {
@@ -216,9 +272,9 @@
       "dev": true
     },
     "is-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
       "dev": true
     },
     "isexe": {
@@ -283,9 +339,9 @@
       "dev": true
     },
     "node-releases": {
-      "version": "1.1.72",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.72.tgz",
-      "integrity": "sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==",
+      "version": "1.1.75",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.75.tgz",
+      "integrity": "sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==",
       "dev": true
     },
     "normalize-range": {
@@ -375,15 +431,15 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz",
-      "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+      "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
       "dev": true
     },
     "pretty-quick": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.1.0.tgz",
-      "integrity": "sha512-DtxIxksaUWCgPFN7E1ZZk4+Aav3CCuRdhrDSFZENb404sYMtuo9Zka823F+Mgeyt8Zt3bUiCjFzzWYE9LYqkmQ==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-3.1.1.tgz",
+      "integrity": "sha512-ZYLGiMoV2jcaas3vTJrLvKAYsxDoXQBUn8OSTxkl67Fyov9lyXivJTl0+2WVh+y6EovGcw7Lm5ThYpH+Sh3XxQ==",
       "dev": true,
       "requires": {
         "chalk": "^3.0.0",
@@ -392,57 +448,6 @@
         "ignore": "^5.1.4",
         "mri": "^1.1.5",
         "multimatch": "^4.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
       }
     },
     "pump": {
@@ -488,6 +493,15 @@
       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true
     },
+    "supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/webcomponents/slides/chart/package.json b/webcomponents/slides/chart/package.json
index 09bb0733c..edfabd80b 100644
--- a/webcomponents/slides/chart/package.json
+++ b/webcomponents/slides/chart/package.json
@@ -27,13 +27,13 @@
     "@deckdeckgo/utils": "^2.0.1"
   },
   "devDependencies": {
-    "@stencil/core": "^2.5.2",
+    "@stencil/core": "^2.8.0",
     "@stencil/postcss": "^2.0.0",
     "@stencil/sass": "^1.4.1",
-    "autoprefixer": "^10.2.6",
-    "husky": "^6.0.0",
-    "prettier": "2.3.0",
-    "pretty-quick": "^3.1.0"
+    "autoprefixer": "^10.3.4",
+    "husky": "^7.0.2",
+    "prettier": "2.3.2",
+    "pretty-quick": "^3.1.1"
   },
   "repository": {
     "type": "git",

From d989d8228eeea48709787e40e6d291c23e5513cc Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Sat, 4 Sep 2021 08:28:54 +0200
Subject: [PATCH 16/17] feat: replicate chart style in thumbnail on lazy
 loading

---
 .../editor/slide/app-slide-thumbnail/app-slide-thumbnail.tsx    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/studio/src/app/components/editor/slide/app-slide-thumbnail/app-slide-thumbnail.tsx b/studio/src/app/components/editor/slide/app-slide-thumbnail/app-slide-thumbnail.tsx
index 63857b472..009c04eb1 100644
--- a/studio/src/app/components/editor/slide/app-slide-thumbnail/app-slide-thumbnail.tsx
+++ b/studio/src/app/components/editor/slide/app-slide-thumbnail/app-slide-thumbnail.tsx
@@ -93,6 +93,8 @@ export class AppSlideThumbnail {
       chart.marginLeft = 8;
       chart.marginRight = 8;
 
+      chart.setAttribute('style', this.slide.getAttribute('style'));
+
       return chart.lazyLoadContent();
     });
     await Promise.all(promises);

From 86fd5d6a9c832394eaa44f412e1cb4e21113471a Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Sat, 4 Sep 2021 08:29:49 +0200
Subject: [PATCH 17/17] build: update charts

---
 remote/package-lock.json | 12 ++++++------
 remote/package.json      |  4 ++--
 studio/package-lock.json | 12 ++++++------
 studio/package.json      |  4 ++--
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/remote/package-lock.json b/remote/package-lock.json
index 66d68446f..2b9ccf7a9 100644
--- a/remote/package-lock.json
+++ b/remote/package-lock.json
@@ -1177,9 +1177,9 @@
       }
     },
     "@deckdeckgo/charts": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/charts/-/charts-2.2.2.tgz",
-      "integrity": "sha512-mGRpOSkLf0M+dECEo8XGziQp4KME+t2CHJW6OXPrvFrUF7Ovz5keCfkgwNaYSLFdrl/Aget+xZaJl38haX4CWA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/charts/-/charts-2.3.0.tgz",
+      "integrity": "sha512-WHXsv4ITtE590xE2y6+RZ+Ow/HmW8UkkUh7F7X8lBVW01fXW0lGGvUHJUfJ62ReAdxCfujhKEm2pCr9i0SfKSg==",
       "requires": {
         "d3-array": "^3.0.2",
         "d3-axis": "^3.0.0",
@@ -1294,9 +1294,9 @@
       }
     },
     "@deckdeckgo/slide-chart": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/slide-chart/-/slide-chart-2.4.0.tgz",
-      "integrity": "sha512-lBTGWYxEf8sqaP4b1G3fh6qzPGVKIDMcDzGYrVAWKhMcqHBnicjQYxT90zDuUIMb10tW40tJgk1pC4AqsBTaSw==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/slide-chart/-/slide-chart-2.5.0.tgz",
+      "integrity": "sha512-CLJM9SpiuXTMAmH3+pl/kv5R1rseKtxhLpqdYgOKZQDLZBNU4W2ob3GX72GDq/Phne0+BXbw/mVfwIHz9YWbZw==",
       "requires": {
         "@deckdeckgo/slide-utils": "^4.0.3",
         "@deckdeckgo/utils": "^2.0.1"
diff --git a/remote/package.json b/remote/package.json
index 4af740be4..da796ce9e 100644
--- a/remote/package.json
+++ b/remote/package.json
@@ -17,7 +17,7 @@
     "test.watch": "stencil test --spec --e2e --watch"
   },
   "dependencies": {
-    "@deckdeckgo/charts": "^2.2.2",
+    "@deckdeckgo/charts": "^2.3.0",
     "@deckdeckgo/core": "^8.3.0",
     "@deckdeckgo/deck-utils": "^4.1.0",
     "@deckdeckgo/demo": "^2.1.0",
@@ -32,7 +32,7 @@
     "@deckdeckgo/slide-aspect-ratio": "^3.4.0",
     "@deckdeckgo/slide-author": "^2.4.0",
     "@deckdeckgo/slide-big-img": "^2.3.0",
-    "@deckdeckgo/slide-chart": "^2.4.0",
+    "@deckdeckgo/slide-chart": "^2.5.0",
     "@deckdeckgo/slide-content": "^2.5.0",
     "@deckdeckgo/slide-countdown": "^2.4.0",
     "@deckdeckgo/slide-gif": "^3.4.0",
diff --git a/studio/package-lock.json b/studio/package-lock.json
index a933b4859..9ac4bca54 100644
--- a/studio/package-lock.json
+++ b/studio/package-lock.json
@@ -1126,9 +1126,9 @@
       }
     },
     "@deckdeckgo/charts": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/charts/-/charts-2.2.2.tgz",
-      "integrity": "sha512-mGRpOSkLf0M+dECEo8XGziQp4KME+t2CHJW6OXPrvFrUF7Ovz5keCfkgwNaYSLFdrl/Aget+xZaJl38haX4CWA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/charts/-/charts-2.3.0.tgz",
+      "integrity": "sha512-WHXsv4ITtE590xE2y6+RZ+Ow/HmW8UkkUh7F7X8lBVW01fXW0lGGvUHJUfJ62ReAdxCfujhKEm2pCr9i0SfKSg==",
       "requires": {
         "d3-array": "^3.0.2",
         "d3-axis": "^3.0.0",
@@ -1270,9 +1270,9 @@
       }
     },
     "@deckdeckgo/slide-chart": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/slide-chart/-/slide-chart-2.4.0.tgz",
-      "integrity": "sha512-lBTGWYxEf8sqaP4b1G3fh6qzPGVKIDMcDzGYrVAWKhMcqHBnicjQYxT90zDuUIMb10tW40tJgk1pC4AqsBTaSw==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/slide-chart/-/slide-chart-2.5.0.tgz",
+      "integrity": "sha512-CLJM9SpiuXTMAmH3+pl/kv5R1rseKtxhLpqdYgOKZQDLZBNU4W2ob3GX72GDq/Phne0+BXbw/mVfwIHz9YWbZw==",
       "requires": {
         "@deckdeckgo/slide-utils": "^4.0.3",
         "@deckdeckgo/utils": "^2.0.1"
diff --git a/studio/package.json b/studio/package.json
index 3cc5e0e91..4919cb1b9 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -20,7 +20,7 @@
     "test.watch": "stencil test --spec --e2e --watch"
   },
   "dependencies": {
-    "@deckdeckgo/charts": "^2.2.2",
+    "@deckdeckgo/charts": "^2.3.0",
     "@deckdeckgo/color": "^4.1.0",
     "@deckdeckgo/core": "^8.4.0",
     "@deckdeckgo/deck-utils": "^4.1.0",
@@ -37,7 +37,7 @@
     "@deckdeckgo/reveal": "^2.1.0",
     "@deckdeckgo/slide-aspect-ratio": "^3.4.0",
     "@deckdeckgo/slide-author": "^2.4.0",
-    "@deckdeckgo/slide-chart": "^2.4.0",
+    "@deckdeckgo/slide-chart": "^2.5.0",
     "@deckdeckgo/slide-content": "^2.5.0",
     "@deckdeckgo/slide-gif": "^3.4.0",
     "@deckdeckgo/slide-playground": "^2.4.0",