import React , { useMemo } from 'react' ; import { BarChartProps , BarChart } from '@toptal/picasso-charts' ; import { DataItem , LabelMap , TooltipMap } from './types' ; import { formatData , getColor } from './utils' ; import CategoriesChartTooltip from '../CategoriesChartTooltip' ; export type Props = Pick < BarChartProps < string > , 'width' | 'height' > & { data : DataItem [ ] ; labels : LabelMap ; tooltips : TooltipMap ; } ; export const CategoriesChart = ( { data , labels , tooltips , ... restProps } ) => { const chartData = useMemo ( ( ) => formatData ( data , labels ) , [ data , labels ] ) ; const getBarLabelColor = ( { index , dataKey } ) => index !== undefined ? getColor ( { dataKey , entry : chartData [ index ] } ) : '' ; return ( < BarChart labelKey = 'label' data = { chartData } tooltip getBarLabelColor = { getBarLabelColor } customTooltip = { < CategoriesChartTooltip originalData = { data } tooltips = { tooltips } / > } getBarColor = { getColor } { ... restProps } />); } ; CategoriesChart . defaultProps = { } ; CategoriesChart . displayName = 'CategoriesChart' ; export default CategoriesChart ;