Jean-Baptiste-Lasselle
commented
1 year ago Tâche à effectuer après la première livraison en prod :
- on veut un template astro qui permette de créer un projet astro intégrant preact et d3js
- pour faire du d3js en typescript et react , on peut utiliser https://medium.com/geekculture/integrating-d3-js-to-a-typescript-react-application-d77580756b20
- d'abord essayer de voir si c'est adapatable à preact
- sinon, faire un template astro/react au lieu de astro/preact
- ok la bonne et plsu simple solution preact typescript d3 est là :
- cette intégration d3js/preact : https://github.com/phoobynet/vite-preact-d3-tw
- et pour faire un "radar chart", qui permettra de comparer par exemple les 3 dernières versions de résultats: https://yangdanny97.github.io/blog/2019/03/01/D3-Spider-Chart.
- pour ajouter un nouveau rapport de tests, on ajoute un nouveau fichier markdown avec un frontmatter contenant le JSON généré par lighthouse
- j'aimerais arriver à faire celui-là : https://gist.github.com/nbremer/21746a9668ffdf6d8242 cf. https://d3-graph-gallery.com/spider.html
il suffit d'installer :
pnpm add --save d3 && pnpm add -D @types/d3 preact/compatet 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>
)
}
pnpm add -g lightspeed,