Make the aggregate bar charts more saturated
parent
8e27e95fd9
commit
34e5e207d9
|
@ -1,21 +1,6 @@
|
||||||
import React, { useMemo } from "react";
|
import React, { useMemo } from "react";
|
||||||
import useHover from "./useHover";
|
import useHover from "./useHover";
|
||||||
import {
|
import { Box, Heading, HStack, Tooltip } from "@chakra-ui/react";
|
||||||
AspectRatio,
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
Heading,
|
|
||||||
HStack,
|
|
||||||
Icon,
|
|
||||||
Input,
|
|
||||||
Stat,
|
|
||||||
StatLabel,
|
|
||||||
StatNumber,
|
|
||||||
StatHelpText,
|
|
||||||
StatArrow,
|
|
||||||
StatGroup,
|
|
||||||
Tooltip,
|
|
||||||
} from "@chakra-ui/react";
|
|
||||||
import prettifyStatisticName from "./PrettifyStatisticName";
|
import prettifyStatisticName from "./PrettifyStatisticName";
|
||||||
|
|
||||||
const randomColor = () =>
|
const randomColor = () =>
|
||||||
|
@ -41,7 +26,7 @@ const StackedBarSegment = ({ aggregate, total }) => {
|
||||||
<Box
|
<Box
|
||||||
width={aggregate.value / total}
|
width={aggregate.value / total}
|
||||||
height="100%"
|
height="100%"
|
||||||
filter={isHovered ? "clear" : "saturate(0.15)"}
|
filter={isHovered ? "clear" : "saturate(0.5)"}
|
||||||
backgroundColor={color}
|
backgroundColor={color}
|
||||||
ref={hoverRef}
|
ref={hoverRef}
|
||||||
></Box>
|
></Box>
|
||||||
|
|
Loading…
Reference in New Issue