Open Jean-Baptiste-Lasselle opened 1 year ago
Tâche à effectuer après la première livraison en prod :
il suffit d'installer :
pnpm add --save d3 && pnpm add -D @types/d3 preact/compat
et derrièe je peux faire un tsx comme celui-ci :
import { useEffect, useRef } from 'preact/compat'
import * as d3 from 'd3'
export default function App () {
const svgRef = useRef<SVGSVGElement>(null)
useEffect(() => {
const svg = d3.select(svgRef.current)
svg.selectAll('*')
.remove()
const text = svg.append('text')
.attr('font-size', 20)
.attr('x', 20)
.attr('y', 10)
svg.on('mouseover', function () {
d3.select(this)
.style('cursor', 'crosshair')
})
svg.on('mousemove', function (event) {
const [x, y] = d3.pointer(event)
text.attr('x', x)
.attr('y', y)
.attr('fill', 'blue')
.text(`x: ${x}, y: ${y}`)
const n = text.node()
if (n) {
const {
width: textWidth,
height: textHeight,
} = n.getBBox()
// manage horizontal position
if ((x + textWidth) >= 600) {
text.attr('text-anchor', 'end')
} else {
text.attr('text-anchor', 'start')
}
if ((y - textHeight) <= 0) {
text.attr('dominant-baseline', 'hanging')
} else {
text.attr('dominant-baseline', 'middle')
}
}
})
}, [])
return (
<div>
<svg
ref={svgRef}
width={600}
height={300}
className="bg-gray-100"
></svg>
</div>
)
}
j'aimerais bien essayer d'ajouter, pour la comparaison des métriques, les voronoi neighbors : https://d3js.org/d3-delaunay/voronoi#voronoi_neighbors
Je veux absolument essayer d'ajouter une possibilité d'ajouter une évolution dans le temps (l'unité de temps est le commit) : https://observablehq.com/@mbostock/the-wealth-health-of-nations
je l'ai trouvé ici : https://observablehq.com/@d3/gallery?utm_source=d3js-org&utm_medium=nav&utm_campaign=try-observable
celui-ci est hors sujet, mais il est vraiment excellent, pour d'autre report de tests.. (e2e?) : https://observablehq.com/@kerryrodden/sequences-sunburst
Ok donc on peut, et on va, faire un plugin lighthouse, qui utilisera le report astro :
pnpm add -g lightspeed
,