support multiple data lines
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
3d48211c10
commit
867ef9c84c
|
@ -1,11 +1,3 @@
|
||||||
.lineBackground {
|
|
||||||
fill: var(--card-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.line {
|
|
||||||
fill: var(--primary-accent-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.lineText {
|
.lineText {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
font-family: "Inconsolata", monospace;
|
font-family: "Inconsolata", monospace;
|
||||||
|
@ -22,13 +14,8 @@
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .tickLabel {
|
|
||||||
font-family: "Inconsolata", monospace;
|
|
||||||
font-weight: 800;
|
|
||||||
fill: var(--label);
|
|
||||||
}
|
|
||||||
.axisLabel {
|
.axisLabel {
|
||||||
font-family: "Inconsolata", monospace;
|
font-family: "Inconsolata", monospace;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
fill: var(--label);
|
fill: var(--label);
|
||||||
} */
|
}
|
|
@ -10,6 +10,7 @@ import {
|
||||||
AnnotationCircleSubject,
|
AnnotationCircleSubject,
|
||||||
} from "@visx/xychart";
|
} from "@visx/xychart";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { Color } from "utils/Color";
|
||||||
|
|
||||||
import styles from "./LineGraph.module.css";
|
import styles from "./LineGraph.module.css";
|
||||||
|
|
||||||
|
@ -19,7 +20,7 @@ interface LineGraphData {
|
||||||
}
|
}
|
||||||
|
|
||||||
interface BarGraphProps {
|
interface BarGraphProps {
|
||||||
data: LineGraphData[];
|
data: LineGraphData[][];
|
||||||
width: number;
|
width: number;
|
||||||
height: number;
|
height: number;
|
||||||
margin: {
|
margin: {
|
||||||
|
@ -28,34 +29,33 @@ interface BarGraphProps {
|
||||||
left: number;
|
left: number;
|
||||||
right: number;
|
right: number;
|
||||||
};
|
};
|
||||||
|
xLabelSize?: number;
|
||||||
|
yLabelSize?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const COLOURS = {
|
|
||||||
background: "#252D41",
|
|
||||||
salmon: "#ffcad0",
|
|
||||||
navy: "#2c3651",
|
|
||||||
white: "#ffffff",
|
|
||||||
pink: "#ef83b1",
|
|
||||||
darkpink: "#cc5773",
|
|
||||||
darkblue: "#354265",
|
|
||||||
};
|
|
||||||
|
|
||||||
const DEFAULT_LABEL_SIZE = 16;
|
const DEFAULT_LABEL_SIZE = 16;
|
||||||
|
|
||||||
export function LineGraph({ data, width, height, margin }: BarGraphProps) {
|
export function LineGraph({
|
||||||
|
data,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
margin,
|
||||||
|
xLabelSize = DEFAULT_LABEL_SIZE,
|
||||||
|
yLabelSize = DEFAULT_LABEL_SIZE,
|
||||||
|
}: BarGraphProps) {
|
||||||
if (width < 10) return null;
|
if (width < 10) return null;
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
|
||||||
const customTheme = buildChartTheme({
|
const customTheme = buildChartTheme({
|
||||||
// colors
|
// colors
|
||||||
backgroundColor: COLOURS.background, // used by Tooltip, Annotation
|
backgroundColor: Color.secondaryBackground, // used by Tooltip, Annotation
|
||||||
colors: [COLOURS.pink], // categorical colors, mapped to series via `dataKey`s
|
colors: [Color.primaryAccent, Color.primaryHeading], // categorical colors, mapped to series via `dataKey`s
|
||||||
|
|
||||||
tickLength: 5,
|
tickLength: 5,
|
||||||
|
|
||||||
// grid
|
// grid
|
||||||
gridColor: "#354265",
|
gridColor: Color.tertiaryBackground,
|
||||||
gridColorDark: "#222831", // used for axis baseline if x/yxAxisLineStyles not set
|
gridColorDark: Color.tertiaryBackground, // used for axis baseline if x/yxAxisLineStyles not set
|
||||||
});
|
});
|
||||||
|
|
||||||
// accessors
|
// accessors
|
||||||
|
@ -77,35 +77,18 @@ export function LineGraph({ data, width, height, margin }: BarGraphProps) {
|
||||||
y={0}
|
y={0}
|
||||||
width={width}
|
width={width}
|
||||||
height={height}
|
height={height}
|
||||||
fill={COLOURS.background}
|
fill={Color.primaryBackground}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<LineSeries
|
{data.map((d, i) => (
|
||||||
dataKey="Line 1"
|
<LineSeries
|
||||||
data={data}
|
dataKey={i.toString()}
|
||||||
xAccessor={xAccessor}
|
key={i}
|
||||||
yAccessor={yAccessor}
|
data={d}
|
||||||
/>
|
xAccessor={xAccessor}
|
||||||
|
yAccessor={yAccessor}
|
||||||
<Annotation
|
|
||||||
dataKey="Line 1" // use this Series's accessor functions, alternatively specify x/yAccessor here
|
|
||||||
datum={data[2]}
|
|
||||||
dx={-40}
|
|
||||||
dy={-50}
|
|
||||||
>
|
|
||||||
<AnnotationLabel
|
|
||||||
title="Title"
|
|
||||||
subtitle="Subtitle deets"
|
|
||||||
showAnchorLine={false}
|
|
||||||
backgroundFill="#FFFFFF"
|
|
||||||
showBackground
|
|
||||||
/>
|
/>
|
||||||
{/** Draw circle around point */}
|
))}
|
||||||
<AnnotationCircleSubject />
|
|
||||||
{/** Connect label to CircleSubject */}
|
|
||||||
<AnnotationConnector />
|
|
||||||
</Annotation>
|
|
||||||
|
|
||||||
<Axis
|
<Axis
|
||||||
orientation="bottom"
|
orientation="bottom"
|
||||||
hideAxisLine
|
hideAxisLine
|
||||||
|
@ -113,10 +96,8 @@ export function LineGraph({ data, width, height, margin }: BarGraphProps) {
|
||||||
tickLabelProps={() => {
|
tickLabelProps={() => {
|
||||||
return {
|
return {
|
||||||
dy: "0.25rem",
|
dy: "0.25rem",
|
||||||
fill: COLOURS.white,
|
fontSize: `${xLabelSize / 16}rem`,
|
||||||
fontSize: `${width / 700}rem`,
|
className: styles.axisLabel,
|
||||||
fontFamily: "Inconsolata",
|
|
||||||
fontWeight: 800,
|
|
||||||
};
|
};
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -129,14 +110,12 @@ export function LineGraph({ data, width, height, margin }: BarGraphProps) {
|
||||||
tickLabelProps={() => {
|
tickLabelProps={() => {
|
||||||
return {
|
return {
|
||||||
dy: "0.25rem",
|
dy: "0.25rem",
|
||||||
fill: COLOURS.white,
|
className: styles.axisLabel,
|
||||||
fontSize: `${height / 300}rem`,
|
fontSize: `${yLabelSize / 16}rem`,
|
||||||
fontFamily: "Inconsolata",
|
|
||||||
fontWeight: 800,
|
|
||||||
};
|
};
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Grid numTicks={data.length} strokeWidth={0.5} strokeDasharray="6" />
|
<Grid numTicks={data[0].length} strokeWidth={0.5} strokeDasharray="6" />
|
||||||
</XYChart>
|
</XYChart>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -65,28 +65,56 @@ export const moreMockCategoricalData = [
|
||||||
];
|
];
|
||||||
|
|
||||||
export const mockLineGraphlData = [
|
export const mockLineGraphlData = [
|
||||||
{
|
[
|
||||||
x: "1A",
|
{
|
||||||
y: 30,
|
x: "1A",
|
||||||
},
|
y: 30,
|
||||||
{
|
},
|
||||||
x: "1B",
|
{
|
||||||
y: 84,
|
x: "1B",
|
||||||
},
|
y: 84,
|
||||||
{
|
},
|
||||||
x: "2A",
|
{
|
||||||
y: 93,
|
x: "2A",
|
||||||
},
|
y: 93,
|
||||||
{
|
},
|
||||||
x: "2B",
|
{
|
||||||
y: 70,
|
x: "2B",
|
||||||
},
|
y: 70,
|
||||||
{
|
},
|
||||||
x: "3A",
|
{
|
||||||
y: 100,
|
x: "3A",
|
||||||
},
|
y: 100,
|
||||||
{
|
},
|
||||||
x: "3B",
|
{
|
||||||
y: 80,
|
x: "3B",
|
||||||
},
|
y: 80,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
x: "1A",
|
||||||
|
y: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: "1B",
|
||||||
|
y: 64,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: "2A",
|
||||||
|
y: 85,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: "2B",
|
||||||
|
y: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: "3A",
|
||||||
|
y: 65,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: "3B",
|
||||||
|
y: 77,
|
||||||
|
},
|
||||||
|
],
|
||||||
];
|
];
|
||||||
|
|
Loading…
Reference in New Issue