asb_cloud_front/src/components/d3/renders/needle.ts

import { ChartOffset, ChartRegistry } from '@components/d3/types'

import { appendTransition } from './base'

export const renderNeedle = <DataType extends Record<string, unknown>>(
    xAxis: (value: d3.NumberValue) => number,
    yAxis: (value: d3.NumberValue) => number,
    chart: ChartRegistry<DataType>,
    data: DataType[],
    height: number,
    offset: ChartOffset
): DataType[] => {
    if (chart.type !== 'needle') return data

    data = data.filter(chart.y)

    const currentNeedles = chart()
        .selectAll('line')
        .data(data)

    currentNeedles.exit().remove()
    currentNeedles.enter().append('line')

    appendTransition(chart().selectAll<SVGLineElement, DataType>('line'), chart)
        .attr('x1', (d) => xAxis(chart.x(d)))
        .attr('x2', (d) => xAxis(chart.x(d)))
        .attr('y1', height - offset.bottom - offset.top)
        .attr('y2', (d) => yAxis(chart.y(d)))
        .attr('stroke-dasharray', String(chart.dash ?? ''))

    return data
}