Implement train type used viz

Author: AlexandreMaquet

via-ui/src/components/TrainTypeChart.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import * as d3 from 'd3'
+import { useGameManager } from '@/api/game/manager.ts'
+
+const { gameState } = useGameManager()
+const svgRef = ref<SVGSVGElement | null>(null)
+const tooltipRef = ref<HTMLDivElement | null>(null)
+
+const getChartData = () => {
+  const trip = gameState.value.trip
+  if (!trip || trip.length === 0) return []
+
+  const typeCounts: Record<string, number> = {}
+
+  trip.forEach(segment => {
+    const rawName = segment.details.route_short_name 
+    const type = rawName.replace(/[0-9\s]/g, '') || "Other"
+
+    typeCounts[type] = (typeCounts[type] || 0) + 1
+  })
+
+  return Object.entries(typeCounts)
+               .map(([type, count]) => ({ type, count }))
+               .sort((a, b) => b.count - a.count)
+}
+
+const drawChart = () => {
+  const data = getChartData()
+  if (data.length === 0 || !svgRef.value || !tooltipRef.value) return
+
+  const width = 500
+  const height = 250
+  const margin = 10
+  const radius = (height / 2) - margin
+
+  const svg = d3.select(svgRef.value)
+    .attr("viewBox", `0 0 ${width} ${height}`)
+    .style("width", "100%")
+    .style("height", "auto")
+
+  svg.selectAll("*").remove()
+  const tooltip = d3.select(tooltipRef.value)
+
+  const donutX = width - radius - margin - 20
+  const g = svg.append("g")
+    .attr("transform", `translate(${donutX},${height / 2})`)
+
+  const color = d3.scaleOrdinal()
+    .domain(data.map(d => d.type))
+    .range([
+      "var(--color-primary)",   
+      "var(--color-secondary)", 
+      "var(--color-accent)",    
+      "var(--color-info)",
+      "var(--color-success)",
+      "var(--color-warning)",
+      "var(--color-neutral)"
+    ])
+
+  const pie = d3.pie<any>()
+    .value(d => d.count)
+    .sort(null)
+
+  const arc = d3.arc<any>()
+    .innerRadius(radius * 0.55) 
+    .outerRadius(radius * 0.9)
+
+  const arcHover = d3.arc<any>()
+    .innerRadius(radius * 0.55)
+    .outerRadius(radius * 0.98) 
+
+  const arcs = g.selectAll(".arc")
+    .data(pie(data))
+    .enter()
+    .append("g")
+    .attr("class", "arc")
+
+  arcs.append("path")
+    .attr("d", arc)
+    .attr("fill", d => color(d.data.type) as string)
+    .attr("stroke", "var(--color-base-100)") 
+    .style("stroke-width", "3px")
+    .style("cursor", "pointer")
+    .on("mouseover", function(event, d) {
+      d3.select(this).transition().duration(200).attr("d", arcHover)
+      tooltip.style("opacity", 1)
+             .html(`<strong>${d.data.type}</strong><br/>${d.data.count} train(s)`)
+    })
+    .on("mousemove", function(event) {
+      const [xPos, yPos] = d3.pointer(event, svgRef.value)
+      tooltip.style("left", (xPos - 110) + "px")
+             .style("top", (yPos - 20) + "px")
+    })
+    .on("mouseout", function() {
+      d3.select(this).transition().duration(200).attr("d", arc)
+      tooltip.style("opacity", 0)
+    })
+
+  const legendSpacing = 24
+  const totalLegendHeight = data.length * legendSpacing
+  const startY = (height - totalLegendHeight) / 2 + 10 
+
+  const legend = svg.append("g")
+    .attr("transform", `translate(10, ${startY})`)
+
+  const legendItems = legend.selectAll(".legend-item")
+    .data(data)
+    .enter()
+    .append("g")
+    .attr("class", "legend-item")
+    .attr("transform", (d, i) => `translate(0, ${i * legendSpacing})`)
+
+  legendItems.append("rect")
+    .attr("width", 16)
+    .attr("height", 16)
+    .attr("fill", d => color(d.type) as string)
+    .attr("rx", 4) 
+
+  legendItems.append("text")
+    .attr("x", 28)
+    .attr("y", 13) 
+    .attr("fill", "currentColor")
+    .style("font-size", "14px")
+    .style("font-weight", "500")
+    .text(d => `${d.type} (${d.count})`)
+}
+
+watch(() => gameState.value.trip, drawChart, { deep: true })
+onMounted(drawChart)
+</script>
+
+<template>
+  <div class="relative w-full h-full flex justify-center items-center py-2">
+    <svg ref="svgRef" class="text-base-content w-full"></svg>
+    
+    <div 
+      ref="tooltipRef" 
+      class="absolute opacity-0 bg-neutral text-neutral-content px-3 py-2 rounded-box shadow-lg pointer-events-none text-sm transition-opacity duration-200 z-[100] text-left"
+    ></div>
+  </div>
+</template>