import React, { useMemo } from "react";
import useHover from "./useHover";
import {
AspectRatio,
Box,
Button,
Heading,
HStack,
Icon,
Input,
Stat,
StatLabel,
StatNumber,
StatHelpText,
StatArrow,
StatGroup,
Tooltip,
} from "@chakra-ui/react";
import prettifyStatisticName from "./PrettifyStatisticName";
const randomColor = () =>
`hsl(${Math.floor(Math.random() * 359)}, ${
50 + Math.floor(Math.random() * 50)
}%, ${25 + Math.floor(Math.random() * 50)}%)`;
const StackedBarSegment = ({ aggregate, total }) => {
const color = useMemo(randomColor, []);
const [hoverRef, isHovered] = useHover();
return (
);
};
const StackedBar = ({ heading, aggregates }) => {
const total = aggregates.reduce((acc, val) => acc + val.value, 0);
return (
<>
{heading}
{aggregates.map((x, i) => (
))}
>
);
};
export default StackedBar;