www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

last edit
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Rebecca-Chou 2022-08-31 20:00:13 -04:00
parent e6c77c750f
commit 21e146d66d
2 changed files with 51 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/LineGraph.module.css
View File

@ -2,7 +2,7 @@
stroke-width: 4; stroke-width: 4;
} }
.lineSeries:hover { .lineSeries hover {
filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent)); filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
} }

118
components/LineGraph.tsx
View File

@ -42,7 +42,6 @@ export const LineGraph = ({
xLabelSize = DEFAULT_LABEL_SIZE, xLabelSize = DEFAULT_LABEL_SIZE,
yLabelSize = DEFAULT_LABEL_SIZE, yLabelSize = DEFAULT_LABEL_SIZE,
}: LineGraphProps) => { }: LineGraphProps) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
const customTheme = buildChartTheme({ const customTheme = buildChartTheme({
// colors // colors
backgroundColor: Color.secondaryBackground, // used by Tooltip, Annotation backgroundColor: Color.secondaryBackground, // used by Tooltip, Annotation
@ -61,73 +60,56 @@ export const LineGraph = ({
const yAccessor = (d: LineGraphData) => d.y; const yAccessor = (d: LineGraphData) => d.y;
return ( return (
<> <XYChart
<XYChart height={height}
height={height} width={width}
width={width} theme={customTheme}
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment margin={margin}
theme={customTheme} xScale={{ type: "band" }}
margin={margin} yScale={{ type: "linear" }}
xScale={{ type: "band" }} >
yScale={{ type: "linear" }} <Axis
> orientation="bottom"
<Axis hideAxisLine
orientation="bottom" hideTicks
hideAxisLine tickLabelProps={() => {
hideTicks return {
tickLabelProps={() => { dy: "0.25rem",
return { fontSize: `${xLabelSize / 16}rem`,
dy: "0.25rem", className: styles.axisLabel,
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}
/> />
<Axis ))}
orientation="left" </XYChart>
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}
/>
))}
<Tooltip
snapTooltipToDatumX
snapTooltipToDatumY
renderTooltip={({ tooltipData }) => (
<div className={styles.tooltip}>
<div>{tooltipData?.nearestDatum?.key}</div>
<br />
{/* {xAccessor(tooltipData.nearestDatum.datum)}
{": "} */}
{yAccessor(tooltipData?.nearestDatum?.datum as LineGraphData)}
</div>
)}
/>
</XYChart>
</>
); );
}; };