-
Notifications
You must be signed in to change notification settings - Fork 0
/
MiniGraphLines.tsx
37 lines (30 loc) · 1.17 KB
/
MiniGraphLines.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
import React from "react";
import MiniGraphContext from "./MiniGraphContext";
import { Point } from "./types";
import { pointsInContext } from "./utils/dataTransform";
import svgPath, { line, bezier, steps } from "./utils/svgPath";
import { getFill } from "./utils/colours";
export type MiniGraphLinesProps = {
filled?: boolean;
mode?: "bezier" | "steps";
};
export type MiniGraphLinesComponent = React.FunctionComponent<MiniGraphLinesProps>;
const MiniGraphLines: MiniGraphLinesComponent = ({ mode, filled = false }): JSX.Element => {
const context = React.useContext(MiniGraphContext);
const points: Point[] = pointsInContext(context);
if (!points.length || !context.domRect) return <React.Fragment />;
const command = mode ? { bezier, steps }[mode] : line;
return (
<g>
<path d={svgPath(points, command)} fill="none" stroke={context.colour} />
{filled && (
<path
d={svgPath(points, command, context.domRect.height)}
fill={getFill(context.colour)}
stroke="none"
/>
)}
</g>
);
};
export default MiniGraphLines;