accurat / react-composable-charts Goto Github PK

   <element.text
            x={xPos}
            y={yPos}
            fill={DEFAULT_BLUE}
            fontSize={14}
            contentScriptType={selectedItem?.label}
            // @ts-expect-error
            text={selectedItem?.label}
          />

fix text attribute in element.text

  const animationEnterProp = {
    y: (_: BarchartCountriesDataset[number], index: number, nodes: SVGTextElement[]) => {
      const selectedNode = nodes[index]
      const y = selectedNode.getAttribute('y')
      return y
    }
  }

  <BarData
                data={countriesRanking}
                dataKey={(d) => d.countryIso3}
                y={(d) => d.countryIso3}
                x={{ to: () => xDomain[0], base: () => xDomain[1] }}
                fill={'#F1F2F5'}
                enter={animationEnterProp}
                opacity={1}
              />

Dare la possibilità di passare una funzione all'attributo enter

Add to the BarData component the event prop. Hence it can handle js events.

It should be useful to use Text based component inside "LabelsData".

If the property "text" of this component will return a JSX element it will be very easy to show text data driven informations near charts element

Tooltip Component

Description:
Tooltip is a functional component used to display tooltip content at a specified position relative to its target.

Props:
x: X-coordinate position of the tooltip.
y: Y-coordinate position of the tooltip.
children (optional): The content to be displayed within the tooltip.
style (optional): Additional CSS styles for the tooltip.
horizontalAnchor (optional): Horizontal anchor position of the tooltip: 'start' | 'center' | 'end'. Default is 'center'.
verticalAnchor (optional): Vertical anchor position of the tooltip: 'start' | 'center' | 'end'. Default is 'center'.
horizontalSpacing (optional): Horizontal spacing between the tooltip and its target.
verticalSpacing (optional): Vertical spacing between the tooltip and its target.

Example:

<Tooltip
  x={100}
  y={100}
  horizontalAnchor="start"
  verticalAnchor="end"
  horizontalSpacing={10}
  verticalSpacing={5}
>
  {/* Tooltip content */}
</Tooltip>

It would be useful we can import this type from src/lib/stack.ts

type Stack<T> = {
  datum: T
  to: number
  base: number
  group: string
  category: string | number
  value: number
}