plane/apps/app/components/ui/graphs/bar-graph.tsx
Aaryan Khandelwal d7928f853d
chore: global graph components (#1014)
* chore: global bar graph component

* chore: global pie graph component

* chore: global line graph component

* chore: removed unnecessary file

* chore: refactored global chart components to accept all props

* chore: global calendar graph component added

* chore: global scatter plot graph component
2023-05-11 17:11:04 +05:30

36 lines
772 B
TypeScript

// nivo
import { ResponsiveBar, BarSvgProps } from "@nivo/bar";
// types
import { TGraph } from "./types";
// constants
import { CHARTS_THEME, DEFAULT_MARGIN } from "constants/graph";
type Props = {
indexBy: string;
keys: string[];
};
export const BarGraph: React.FC<Props & TGraph & Omit<BarSvgProps<any>, "height" | "width">> = ({
indexBy,
keys,
padding = 0.3,
height = "400px",
width = "100%",
margin,
theme,
...rest
}) => (
<div style={{ height, width }}>
<ResponsiveBar
indexBy={indexBy}
keys={keys}
margin={margin ?? DEFAULT_MARGIN}
padding={padding}
labelTextColor={{ from: "color", modifiers: [["darker", 1.6]] }}
theme={theme ?? CHARTS_THEME}
animate={true}
{...rest}
/>
</div>
);