import { h, type FunctionComponent } from 'preact' import { useEffect, useRef } from 'preact/hooks' import * as d3 from 'd3' import rek from 'rek' import Head from './head.ts' import usePromise from '../../shared/hooks/use_promise.ts' type AccountPageProps = { number: number } function empty(element: HTMLElement) { while (element.lastElementChild) { element.removeChild(element.lastElementChild) } } const AccountPage: FunctionComponent = ({ number }) => { const graphRef = useRef(null) const sums = usePromise<{ month: string; totalAmount: number }[]>(() => rek(`/api/accounts/month-sum/${number}`)) useEffect(() => { empty(graphRef.current!) const width = 1000 const height = 1000 const margin = { left: 50, bottom: 40 } const stageWidth = 1000 - margin.left const stageHeight = 1000 - margin.bottom const svg = d3 .select(graphRef.current) .append('svg') .attr('width', width) .attr('height', height) .append('g') .attr('transform', `translate(${margin.left}, 0)`) const x = d3.scaleBand( sums.map(({ month }) => month), [0, stageWidth], ) svg.append('g').attr('transform', `translate(0, ${stageHeight})`).call(d3.axisBottom(x)) const y = d3.scaleLinear([0, d3.max(sums, (d) => Math.abs(d.totalAmount))], [stageHeight, 0]) svg.append('g').call(d3.axisLeft(y)) svg .append('path') .datum(sums) .attr('fill', 'none') .attr('stroke', 'steelblue') .attr('stroke-width', 1.5) .attr( 'd', d3 .line() .x((d) => x(d.month)) .y((d) => y(Math.abs(d.totalAmount))), ) }, []) return (

: Konto

Konto {number}

{sums.map((sum) => ( ))}

Månad	Summa
{sum.month}	{sum.totalAmount}

) } export default AccountPage