116 lines
2.4 KiB
TypeScript
116 lines
2.4 KiB
TypeScript
import {
|
|
Axis,
|
|
Grid,
|
|
buildChartTheme,
|
|
LineSeries,
|
|
Tooltip,
|
|
XYChart,
|
|
} from "@visx/xychart";
|
|
import React from "react";
|
|
import { Color } from "utils/Color";
|
|
|
|
import styles from "./LineGraph.module.css";
|
|
|
|
interface LineGraphData {
|
|
x: string;
|
|
y: number;
|
|
}
|
|
|
|
interface LineGraphProps {
|
|
data: LineGraphData[][];
|
|
width: number;
|
|
height: number;
|
|
margin: {
|
|
top: number;
|
|
bottom: number;
|
|
left: number;
|
|
right: number;
|
|
};
|
|
xLabelSize?: number;
|
|
yLabelSize?: number;
|
|
}
|
|
|
|
const DEFAULT_LABEL_SIZE = 16;
|
|
|
|
const lineKey = ["Java", "C++"];
|
|
|
|
export const LineGraph = ({
|
|
data,
|
|
width,
|
|
height,
|
|
margin,
|
|
xLabelSize = DEFAULT_LABEL_SIZE,
|
|
yLabelSize = DEFAULT_LABEL_SIZE,
|
|
}: LineGraphProps) => {
|
|
const customTheme = buildChartTheme({
|
|
// colors
|
|
backgroundColor: Color.secondaryBackground, // used by Tooltip, Annotation
|
|
colors: [Color.primaryAccent, Color.secondaryAccent], // categorical colors, mapped to series via `dataKey`s
|
|
|
|
tickLength: 5,
|
|
|
|
// grid
|
|
gridColor: Color.tertiaryBackground,
|
|
gridColorDark: Color.tertiaryBackground, // used for axis baseline if x/yxAxisLineStyles not set
|
|
gridStyles: { strokeWidth: 4 },
|
|
});
|
|
|
|
// accessors
|
|
const xAccessor = (d: LineGraphData) => d.x;
|
|
const yAccessor = (d: LineGraphData) => d.y;
|
|
|
|
return (
|
|
<XYChart
|
|
height={height}
|
|
width={width}
|
|
theme={customTheme}
|
|
margin={margin}
|
|
xScale={{ type: "band" }}
|
|
yScale={{ type: "linear" }}
|
|
>
|
|
<Axis
|
|
orientation="bottom"
|
|
hideAxisLine
|
|
hideTicks
|
|
tickLabelProps={() => {
|
|
return {
|
|
dy: "0.25rem",
|
|
fontSize: `${xLabelSize / 16}rem`,
|
|
className: styles.axisLabel,
|
|
};
|
|
}}
|
|
/>
|
|
<Axis
|
|
orientation="left"
|
|
hideAxisLine
|
|
hideTicks
|
|
numTicks={4}
|
|
tickLabelProps={() => {
|
|
return {
|
|
dy: "0.25rem",
|
|
className: styles.axisLabel,
|
|
fontSize: `${yLabelSize / 16}rem`,
|
|
};
|
|
}}
|
|
/>
|
|
<Grid
|
|
numTicks={data[0].length}
|
|
stroke={Color.label}
|
|
strokeWidth={4}
|
|
strokeDasharray="10"
|
|
/>
|
|
{data.map((d, i) => (
|
|
<LineSeries
|
|
enableEvents
|
|
className={styles.lineSeries} // Why doesn't work???
|
|
dataKey={lineKey[i]}
|
|
key={i}
|
|
data={d}
|
|
xAccessor={xAccessor}
|
|
yAccessor={yAccessor}
|
|
/>
|
|
))}
|
|
</XYChart>
|
|
);
|
|
};
|