feat(stats): add animation to graph

components/graphs.templ

@@ -11,19 +11,20 @@ templ Graph(data []types.Bar, title string) {
 		<svg role="img" viewBox="0 0 536 200">
 			for _, bar := range data {
 				<g
- 					class="fill-neutral-100 [@media(any-hover:hover){&amp;:hover}]:fill-neutral-200 dark:fill-neutral-800 dark:[@media(any-hover:hover){&amp;:hover}]:fill-neutral-700"
- 					_="on mouseenter add .opacity-100 to &lt;text /&gt; in me
-         on mouseleave remove .opacity-100 from &lt;text /&gt; in me
+ 					class="fill-neutral-100 [@media(any-hover:hover){&:hover}]:fill-neutral-200 dark:fill-neutral-800 dark:[@media(any-hover:hover){&:hover}]:fill-neutral-700"
+ 					_="on mouseenter add .opacity-100 to <text /> in me
+         on mouseleave remove .opacity-100 from <text /> in me
          on touchstart 
-          add .opacity-100 to &lt;text /&gt; in me
-          add .fill-neutral-200 .dark:fill-neutral-700 to &lt;rect /&gt; in me
+          add .opacity-100 to <text /> in me
+          add .fill-neutral-200 .dark:fill-neutral-700 to <rect /> in me
          on touchend wait 1s then
-            remove .fill-neutral-200 .dark:fill-neutral-700 from &lt;rect /&gt; in me
-            remove .opacity-100 from &lt;text /&gt; in me
+            remove .fill-neutral-200 .dark:fill-neutral-700 from <rect /> in me
+            remove .opacity-100 from <text /> in me
          end"
 				>
 					<rect
- 						class="stroke-neutral-400 dark:stroke-neutral-600"
+ 						class="stroke-neutral-400 dark:stroke-neutral-600 transition-transform delay-200 duration-1000 scale-y-0 origin-[center_180px]"
+ 						_="init add .scale-y-100 to me"
  						width={ strconv.Itoa(bar.BarWidth) }
  						height={ strconv.Itoa(bar.BarHeight) }
  						stroke-dasharray="4 2"