update

package-lock.json

@@ -12,8 +12,13 @@
         "@lukeed/uuid": "^2.0.0",
         "cookie": "^0.4.1",
         "crypto-js": "^4.1.1",
+        "d3-cloud": "^1.2.5",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.0.0",
+        "d3-selection": "^3.0.0",
         "date-fns": "^2.28.0",
-        "ethereum-blockies-base64": "^1.0.2"
+        "ethereum-blockies-base64": "^1.0.2",
+        "svelte-d3-cloud": "^0.0.2"
       },
       "devDependencies": {
         "@faker-js/faker": "^6.1.2",
@@ -578,6 +583,114 @@
         "node": ">=4"
       }
     },
+    "node_modules/d3-array": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.1.6.tgz",
+      "integrity": "sha512-DCbBBNuKOeiR9h04ySRBMW52TFVc91O9wJziuyXw6Ztmy8D3oZbmCkOO3UHKC7ceNJsN2Mavo9+vwV8EAEUXzA==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-cloud": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-cloud/-/d3-cloud-1.2.5.tgz",
+      "integrity": "sha512-4s2hXZgvs0CoUIw31oBAGrHt9Kt/7P9Ik5HIVzISFiWkD0Ga2VLAuO/emO/z1tYIpE7KG2smB4PhMPfFMJpahw==",
+      "dependencies": {
+        "d3-dispatch": "^1.0.3"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/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==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/date-fns": {
       "version": "2.28.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
@@ -1187,6 +1300,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -1776,6 +1897,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/svelte-d3-cloud": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/svelte-d3-cloud/-/svelte-d3-cloud-0.0.2.tgz",
+      "integrity": "sha512-RQM8JjjWoDPuZtRHBF2/1BFOmho5B3jQLJgcxGIwT/D887mxZJMLDn5ctDWeBEgbosdIej5qceWeQKLeffQCbg==",
+      "dependencies": {
+        "d3-cloud": "^1.2.5",
+        "d3-scale": "^4.0.0",
+        "d3-scale-chromatic": "^3.0.0",
+        "d3-selection": "^3.0.0"
+      }
+    },
     "node_modules/svelte-hmr": {
       "version": "0.14.11",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.11.tgz",
@@ -2304,6 +2436,87 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "d3-array": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.1.6.tgz",
+      "integrity": "sha512-DCbBBNuKOeiR9h04ySRBMW52TFVc91O9wJziuyXw6Ztmy8D3oZbmCkOO3UHKC7ceNJsN2Mavo9+vwV8EAEUXzA==",
+      "requires": {
+        "internmap": "1 - 2"
+      }
+    },
+    "d3-cloud": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-cloud/-/d3-cloud-1.2.5.tgz",
+      "integrity": "sha512-4s2hXZgvs0CoUIw31oBAGrHt9Kt/7P9Ik5HIVzISFiWkD0Ga2VLAuO/emO/z1tYIpE7KG2smB4PhMPfFMJpahw==",
+      "requires": {
+        "d3-dispatch": "^1.0.3"
+      }
+    },
+    "d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
+    "d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+    },
+    "d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="
+    },
+    "d3-interpolate": {
+      "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 - 3"
+      }
+    },
+    "d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "requires": {
+        "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-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      }
+    },
+    "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=="
+    },
+    "d3-time": {
+      "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 - 3"
+      }
+    },
+    "d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "requires": {
+        "d3-time": "1 - 3"
+      }
+    },
     "date-fns": {
       "version": "2.28.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
@@ -2663,6 +2876,11 @@
         "resolve-from": "^4.0.0"
       }
     },
+    "internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -3039,6 +3257,17 @@
       "integrity": "sha512-o9nNft/OzCz/9kJpmWa1S52GAM+huCjPIsNWydYmgei74ZWlOA9/hN9+Z12INdklghu31seEXZMRHhS1+8DETw==",
       "dev": true
     },
+    "svelte-d3-cloud": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/svelte-d3-cloud/-/svelte-d3-cloud-0.0.2.tgz",
+      "integrity": "sha512-RQM8JjjWoDPuZtRHBF2/1BFOmho5B3jQLJgcxGIwT/D887mxZJMLDn5ctDWeBEgbosdIej5qceWeQKLeffQCbg==",
+      "requires": {
+        "d3-cloud": "^1.2.5",
+        "d3-scale": "^4.0.0",
+        "d3-scale-chromatic": "^3.0.0",
+        "d3-selection": "^3.0.0"
+      }
+    },
     "svelte-hmr": {
       "version": "0.14.11",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.11.tgz",

package.json

@@ -8,7 +8,6 @@
     "preview": "svelte-kit preview",
     "prepare": "svelte-kit sync",
     "prettier": "prettier --write --plugin-search-dir=. ./**/*.svelte"
-
   },
   "devDependencies": {
     "@faker-js/faker": "^6.1.2",
@@ -29,6 +28,10 @@
     "@lukeed/uuid": "^2.0.0",
     "cookie": "^0.4.1",
     "crypto-js": "^4.1.1",
+    "d3-cloud": "^1.2.5",
+    "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.0.0",
+    "d3-selection": "^3.0.0",
     "date-fns": "^2.28.0",
     "ethereum-blockies-base64": "^1.0.2"
   }

src/lib/WordCloud.svelte

@@ -0,0 +1,108 @@
+<script>
+  import { onMount } from "svelte";
+  import { createEventDispatcher } from "svelte";
+  import cloud from "d3-cloud";
+  import { select } from "d3-selection";
+  import { scaleOrdinal } from "d3-scale";
+  import * as CS from "d3-scale-chromatic";
+
+  // event dispatcher
+  const dispatch = createEventDispatcher();
+
+  // color scheme
+  const color_scheme = {
+    schemeCategory10: CS.schemeCategory10,
+    schemeAccent: CS.schemeAccent,
+    schemeDark2: CS.schemeDark2,
+    schemePaired: CS.schemePaired,
+    schemePastel1: CS.schemePastel1,
+    schemePastel2: CS.schemePastel2,
+    schemeSet1: CS.schemeSet1,
+    schemeSet2: CS.schemeSet2,
+    schemeSet3: CS.schemeSet3,
+    schemeTableau10: CS.schemeTableau10,
+  };
+
+  // props
+  export let words = [];
+  export let width = 900;
+  export let height = 250;
+  export let font = "Montserrat";
+  export let maxFontSize = 40;
+  export let minRotate = 0;
+  export let maxRotate = 0;
+  export let scheme = "schemeTableau10";
+  export let padding = 10;
+  export let backgroundColor = "#fff"
+
+  // count max word occurence
+  const maxWordCount = words.reduce((prev, cur) =>
+    prev.count < cur.count ? prev.count : cur.count
+  );
+
+  // text color scheme
+  const fill = scaleOrdinal(color_scheme[scheme]);
+
+  // events
+  const onWordClick = (d) => dispatch("click", d);
+  const onWordMouserOver = (d) => dispatch("mouseover", d);
+  const onWordMouseOut = (d) => dispatch("mouseout", d);
+  const onWordMouseMove = (d) => dispatch("mousemove", d);
+
+  const layout = cloud()
+    .size([width, height])
+    .words(words)
+    .padding(padding)
+    .rotate(() => ~~(Math.random() * maxRotate) + minRotate)
+    .font(font)
+    .fontSize(
+      //(d) =>  Math.floor((d.count / maxWordCount) * maxFontSize)
+      (d) => d.count + 15
+    )
+    .on("end", draw);
+
+  function draw(words) {
+    select("#wordcloud")
+      .append("svg")
+      .attr("width", layout.size()[0])
+      .attr("height", layout.size()[1])
+      .append("g")
+      .attr(
+        "transform",
+        "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")"
+      )
+      .selectAll("text")
+      .data(words)
+      .enter()
+      .append("text")
+      .style("font-size", (d) => d.size + "px")
+      .style("font-family", font)
+      .style('fill', '#393F67')
+      //.style("fill", (_d, i) => fill(i))
+      .attr("text-anchor", "middle")
+      .attr(
+        "transform",
+        (d) => "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"
+      )
+      .text((d) => d.text)
+      .on("click", onWordClick)
+      .on("mouseover", onWordMouserOver)
+      .on("mouseout", onWordMouseOut)
+      .on("mousemove", onWordMouseMove);
+  }
+
+  // mount
+  onMount(async () => {
+    layout.start();
+  });
+
+</script>
+
+<div id="wordcloud" style="background-color: {backgroundColor};" class="justify-end" />
+
+<style>
+    div#wordcloud {        
+        width: fit-content; 
+        height: fit-content;        
+    }
+</style>

src/lib/events.js

@@ -3,7 +3,6 @@ export function calcDuration(e, bundle) {
   if (!bundle) {
     return 0
   }
-  console.log(e.duration)
   if (e.duration) {
     return e.duration
   }

src/routes/program.svelte

@@ -6,6 +6,34 @@
   import Event from "$lib/Event.svelte";
   import { bundle, userData } from "$lib/stores.js";
   import { calcDuration } from "$lib/events.js";
+  import WordCloud from "$lib/WordCloud.svelte";
+
+  $: tags = getTags($bundle)
+  $: totalDuration = calcTotalDuration($bundle);
+
+  function getTags (data) {
+    let res = {}
+    data.spec.events.forEach(e => {
+      if (!e.tags) {
+        return;
+      }
+      e.tags.forEach(t => {
+        if (!res[t]) {
+          res[t] = { text: t, count: 0 }
+        }
+        //res[t].count++
+        res[t].count += 1
+      })
+    })
+    let arr = Object.keys(res).map(k => res[k])
+    const max = arr.reduce((p, c) => c.count > p ? c.count : p, 0)
+    arr = arr.map(i => {
+      i.count = Math.round(i.count/(max/40))
+      return i
+    })
+    console.log(arr)
+    return arr
+  }
 
   function calcTotalDuration(bundle) {
     if (!bundle) {
@@ -17,7 +45,10 @@
     );
   }
 
-  $: totalDuration = calcTotalDuration($bundle);
+  function wordClick (e) {
+    console.log(e.detail.path[0].innerHTML)
+  }
+
 </script>
 
 <svelte:head>
@@ -44,8 +75,11 @@
       <div class="uppercase font-sm mt-1">hodin obsahu</div>
     </div>
   </div>
+  <div class="mt-10 flex sm:justify-center overflow-auto">
+    <WordCloud words={tags} on:click={wordClick} />
+  </div>
 
-  <h1 class="mt-10 uppercase text-lg font-semibold">Seznam událostí</h1>
+  <h1 class="mt-2 uppercase text-lg font-semibold">Seznam událostí</h1>
   <div class="mt-4">
     {#each $bundle.spec.events.filter((e) => !e.parent) as e}
       <Event event={e} />