WIP: Line Graph Component #21
No reviewers
Labels
No Label
Bug
Component
Config
Good First Issue
Low-Priority
Page
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: www/cs-2022-class-profile#21
Loading…
Reference in New Issue
No description provided.
Delete Branch "b72zhou-line-graph"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Things to be fixed:
Todo:
Hover effects
Set colors with global variables
@ -0,0 +1,35 @@
.lineText {
Seems like this class is unused
@ -0,0 +30,4 @@
box-shadow: 0px calc(1rem / 16) calc(2rem / 16) var(--card-background);
pointer-events: none;
padding: calc(10rem / 16);
font-size: calc(18rem / 16);
NIT: maybe add a
text-align: center
to the tooltip?@ -0,0 +13,4 @@
interface LineGraphData {
x: string;
y: number;
Two nits here:
lineKey
as part of thedata
prop passed into the component?My idea would be to make the
LineGraphData
interface an object that holds more information, and then adjust thexAccessor
andyAccessor
functions to accomodate:@ -0,0 +32,4 @@
const DEFAULT_LABEL_SIZE = 16;
const lineKey = ["Java", "C++"];
This probably shouldn't be hard coded in the final component 😛
@ -0,0 +42,4 @@
xLabelSize = DEFAULT_LABEL_SIZE,
yLabelSize = DEFAULT_LABEL_SIZE,
}: LineGraphProps) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
Is it possible to cast this to a type (maybe visx has a type we can import?) to get rid of the unsafe assignment complaints?
@ -0,0 +46,4 @@
const customTheme = buildChartTheme({
// colors
backgroundColor: Color.secondaryBackground, // used by Tooltip, Annotation
colors: [Color.primaryAccent, Color.primaryHeading], // categorical colors, mapped to series via `dataKey`s
Do we have a
Color.secondaryAccent
which can be used instead ofColor.primaryHeading
?@ -0,0 +61,4 @@
const yAccessor = (d: LineGraphData) => d.y;
return (
<>
Visx components should be wrapped in
<svg>
.Yup I was trying to wrap it in
<svg>
, but each time I did that the component was cut and only the left half of it is shown. I checked the document and examples of xychart component and all examples omittedsvg
. I may leave it like this right now but I may keep figuring out what happened behind it.@ -0,0 +67,4 @@
y={0}
width={width}
height={height}
fill={Color.primaryBackground}
Is this
rect
necessary? I wonder if not specifying a background means that the svg will just have a transparent background, which would be sufficient since the page is already the right colour.@ -0,0 +129,4 @@
<div>{tooltipData?.nearestDatum?.key}</div>
<br />
{/* {xAccessor(tooltipData.nearestDatum.datum)}
{": "} */}
We should probably get rid of this commented out code 😛
Pull request closed