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;
}
.lineSeries:hover {
.lineSeries hover {
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,
yLabelSize = DEFAULT_LABEL_SIZE,
}: LineGraphProps) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
const customTheme = buildChartTheme({
// colors
backgroundColor: Color.secondaryBackground, // used by Tooltip, Annotation
@ -61,73 +60,56 @@ export const LineGraph = ({
const yAccessor = (d: LineGraphData) => d.y;
return (
<>
<XYChart
height={height}
width={width}
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
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,
};
}}
<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}
/>
<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}
/>
))}
<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>
</>
))}
</XYChart>
);
};