last edit

b72zhou-line-graph
Rebecca-Chou 3 months ago
parent e6c77c750f
commit 21e146d66d
  1. 2
      components/LineGraph.module.css
  2. 118
      components/LineGraph.tsx

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

@ -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>
);
};

Loading…
Cancel
Save