Romain/lara-bermite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add perfictible tooltip

Browse Source
This commit is contained in:
Romulus21
2024-02-25 16:13:06 +01:00
parent 05644918cc
commit 3ab78dcc28
1 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
resources/js/components/rainfall/RainfallGraph.tsx
View File

@@ -17,12 +17,13 @@ const RainfallGraph: FC<RainfallGraphProps> = ({width, height, data, start_date,
d3.select(svgRef.current).selectAll("*").remove() d3.select(svgRef.current).selectAll("*").remove()
const svg = d3.select(svgRef.current) const svg = d3.select(svgRef.current)
.attr('id', 'rain-graph')
.attr('width', gWidth + margin.left + margin.right) .attr('width', gWidth + margin.left + margin.right)
.attr('height', gHeight + margin.top + margin.bottom) .attr('height', gHeight + margin.top + margin.bottom)
.attr('class', 'relative') .attr('class', 'relative')
.append('g') .append('g')
.attr('transform', "translate(" + margin.left + "," + margin.top + ")") .attr('transform', "translate(" + margin.left + "," + margin.top + ")")
console.log(data)
const yMax = data.reduce((result, item) => item.value > result ? item.value : result, 0) const yMax = data.reduce((result, item) => item.value > result ? item.value : result, 0)
const y = d3.scaleLinear() const y = d3.scaleLinear()
.domain([0, yMax + 10]) .domain([0, yMax + 10])
@@ -72,6 +73,15 @@ const RainfallGraph: FC<RainfallGraphProps> = ({width, height, data, start_date,
.attr("stroke-opacity", 0.1)) .attr("stroke-opacity", 0.1))
} }
const showDetails = (event: Event, data: rainfallGraphData) => {
const toolTip = document.getElementById('tooltip')
if (toolTip) {
toolTip.style.opacity = '1'
toolTip.innerText = `${data.label} : ${data.value}`
}
}
const diffDays = Math.round(Math.abs(((new Date(start_date)).getTime() - (new Date(end_date)).getTime()) / (24 * 60 * 60 * 1000))) + 1 const diffDays = Math.round(Math.abs(((new Date(start_date)).getTime() - (new Date(end_date)).getTime()) / (24 * 60 * 60 * 1000))) + 1
const dayWidth = (width - 44) / diffDays const dayWidth = (width - 44) / diffDays
svg.selectAll(".bar") svg.selectAll(".bar")
@@ -84,11 +94,15 @@ const RainfallGraph: FC<RainfallGraphProps> = ({width, height, data, start_date,
.attr("y", d => y(d.value)) .attr("y", d => y(d.value))
.attr("width", d => (dayWidth * d.days - 3)) .attr("width", d => (dayWidth * d.days - 3))
.attr("height", d => height - margin.bottom - 10 - y(d.value)) .attr("height", d => height - margin.bottom - 10 - y(d.value))
.on('click', showDetails)
.append('title') .append('title')
.text(d => `${d.label} : ${d.value}`) .text(d => `${d.label} : ${d.value}`)
} }
return <svg ref={svgRef} /> return <div className="relative">
<svg ref={svgRef} />
<div id="tooltip" className="absolute px-2 py-2 top-3 left-10 rounded border" style={{opacity: 0}}></div>
</div>
} }
export default RainfallGraph export default RainfallGraph