-
Notifications
You must be signed in to change notification settings - Fork 0
/
MiniGraphVerticalBars.tsx
41 lines (33 loc) · 1.29 KB
/
MiniGraphVerticalBars.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import React from "react";
import MiniGraphContext from "./MiniGraphContext";
import { Point } from "./types";
import { getFill } from "./utils/colours";
import { pointsInContext } from "./utils/dataTransform";
export type MiniGraphVerticalBarsProps = {
filled?: boolean;
};
export type MiniGraphVerticalBarsComponent = React.FunctionComponent<MiniGraphVerticalBarsProps>;
const MiniGraphVerticalBars: MiniGraphVerticalBarsComponent = ({ filled = false }): JSX.Element => {
const context = React.useContext(MiniGraphContext);
const points: Point[] = pointsInContext(context, false);
if (!points.length || !context.domRect) return <React.Fragment />;
const margin = 1;
const { width, height } = context.domRect;
const barWidth = width / points.length;
return (
<g>
{points.map((point: Point, i: number) => (
<rect
key={i}
x={point.x + margin}
y={point.y}
width={barWidth - margin * 2}
height={height - point.y}
stroke={context.colour}
{...(filled ? { fill: getFill(context.colour) } : { fillOpacity: 0 })}
/>
))}
</g>
);
};
export default MiniGraphVerticalBars;