const rectSize = 15; // Size of the color box
        const spacing = 5; // Space between legend items
        let legend = canvas.append('g').attr('class','chart-legend')
        .attr('transform', `translate(${0}, ${height + 3})`);

        // Sample data for the legend
        const legendData = [
            { label: 'low', color: '#1f77b4' },
            { label: 'medium', color: '#ff7f0e' },
            { label: 'high', color: '#2ca02c' },
            { label: 'very high', color: '#2ca02c' }
        ];


        legend.selectAll('g')
            .data(legendData)
            .join('g')
            .attr('class', 'legend-item')
            
            .each(function (d, i) {
                const legendItem = d3.select(this);
                console.log(d.label)
                console.log(d.label?.length)
                let labelWidth = (d.label.length * 5) + 7 + 15
                

                var bbox = legendItem.node().getBBox()
                var width = bbox.width
                console.log(width)
                
                // Add rectangle for color
                legendItem.append('rect')
                    .attr('width', rectSize)
                    .attr('height', rectSize)
                    .attr('fill', d.color);
                    
                    // Add label
                    legendItem.append('text')
                    .attr('x', rectSize + spacing) // Position text to the right of the rectangle
                    .attr('y', rectSize / 2) // Align text vertically with the rectangle
                    .attr('dy', '.35em') // Adjust vertical alignment
                    .attr('text-anchor', 'start') // Align text to the start
                    .text(d.label)
                    .attr('fill', 'black'); // Optional: Text color
                // legendItem.attr('transform', `translate(${i * (rectSize + spacing + labelWidth)}, 0)`) // Position each item horizontally
            });

            const legendItems_spacing = 12
            var legendLength = 0
            legend.selectAll('.legend-item').each(function(d,i) {
              d3.select(this).attr('transform',function() {
                var bbox = d3.select(this).node().getBBox()
                var width = bbox.width
                // if (width == 0) width = (d.text.length * 5) +15  // not in dom yet
                let startingPosition = 0 
                if (i > 0) {
                    startingPosition = legendLength
                }
                legendLength += width + legendItems_spacing
                
                // return `translate(${xx - (width + 30)},0$)`
                return `translate(${startingPosition},0)`
            })
            })

import React, { useEffect, useRef, useState } from 'react';
import * as d3 from 'd3';

export default function useD3(renderChartFn : (svg : d3.Selection<SVGElement,{},HTMLElement>) => any, dependencies : any[]) {
    const ref = useRef<SVGSVGElement>();

    useEffect(() => {
      let d3El = d3.select(ref.current)
        renderChartFn(d3.select(ref.current));
        return () => {};
      }, dependencies);
    return ref;
}

function MyChart(props : {
    w: number,
    h: number,
    data: Array<any>
}) {
    const [currentData,setCurrentData] = useState(props.data)

    let svgRef = useD3((svg) => {
        if (props.data === currentData) return
        setCurrentData(props.data)
        // add d3 code
        svg.selectAll("*").remove();

        const margin = { top: 0, right: 80, bottom: 20, left: 10 };

        const width = props.w - margin.left - margin.right;
        const height = props.h - margin.top - margin.bottom;

        const canvas = svg
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform', `translate(${margin.left},${margin.top})`);

        // data

        const data = props.data
    },[props])

    return (<svg ref={svgRef} />)
}

button::after {
    content: "";
    position: absolute;
    bottom: 0; /* Position underline at the bottom */
    left: 50%; /* Start the underline in the middle */
    transform: translateX(-50%); /* Center it horizontally */
    width: 0; /* Adjust width relative to the button's content */
    height: 4px;
    background-color: #007bff; /* Blue underline */
    border-radius: 2px; /* Optional: Rounded corners for the rectangle */
}

button.selected::after {
    width: 90%; /* Final width when the button is selected */
    transition: width 0.3s ease; /* Smooth animation for width */
}