Update program section

src/lib/WordCloud.svelte

@@ -35,9 +35,11 @@
   export let minRotate = 0;
   export let maxRotate = 0;
   export let scheme = "schemeTableau10";
-  export let padding = 10;
+  export let padding = 2;
   export let backgroundColor = "#fff";
 
+  //words = words.map(w => { w.text = w.text.toUpperCase(); return w; })
+
   // count max word occurence
   const maxWordCount = words.reduce((prev, cur) =>
     prev.count < cur.count ? prev.count : cur.count
@@ -94,6 +96,7 @@
       .style("font-size", (d) => d.size + "px")
       .style("font-family", font)
       .style("fill", "#393F67")
+      .style("cursor", "pointer")
       //.style("fill", (_d, i) => fill(i))
       .attr("text-anchor", "middle")
       .attr(
@@ -123,11 +126,13 @@
           drawAll();
           fwidth = outerWidth;
         }
+      }, 500);
     }, 100);
-    }, 0);
     setTimeout(() => {
+      drawAll();
+      fwidth = outerWidth;
       show = true;
-    }, 100);
+    }, 0);
   });
 
   onDestroy(() => {
@@ -143,7 +148,7 @@
     style="background-color: {backgroundColor}; width: {cwidth}px; height: {cheight}px;"
     class="justify-end {show
       ? 'opacity-100'
-      : 'opacity-0'} transition transition-all duration-500"
+      : 'opacity-0'} transition transition-all"
   />
 </div>
 
@@ -152,4 +157,7 @@
     width: fit-content;
     height: fit-content;
   }
+  #wordcloud > svg > g > text {
+    cursor: pointer;
+  }
 </style>

src/routes/program.svelte

@@ -7,6 +7,7 @@
   import { bundle, userData } from "$lib/stores.js";
   import { calcDuration } from "$lib/events.js";
   import WordCloud from "$lib/WordCloud.svelte";
+  import WordCloud2 from "$lib/WordCloud2.svelte";
 
   $: tags = getTags($bundle);
   $: totalDuration = calcTotalDuration($bundle);
@@ -79,7 +80,9 @@
     <WordCloud words={tags} on:click={wordClick} />
   </div>
 
-  <h1 class="mt-6 uppercase text-lg font-semibold">Seznam událostí</h1>
+  <h1 class="mt-6 uppercase text-lg font-semibold">
+    Seznam událostí ({$bundle.spec.events.length})
+  </h1>
   <div class="mt-4">
     {#each $bundle.spec.events.filter((e) => !e.parent) as e}
       <Event event={e} />