Tooltip and chart styling fixes #535
Conversation
There was a problem hiding this comment.
This is an example file for the format of environment variables, not env variables themselves. It should not be deleted
| @@ -165,24 +177,11 @@ export default class Pie extends React.Component<PieProps> { | |||
| enableArcLinkLabels={false} | |||
| innerRadius={0.8} | |||
| padAngle={2} | |||
| colors={['#60A3D1', '#81C284', '#F5D77F', '#ECAD6D', '#E8966D', '#4AB486', '#E36436']} | |||
There was a problem hiding this comment.
It looks like the last two removed colors here are actually different from the other list. I think we should use the green and red for pass + no pass instead of making them gray
| @@ -102,7 +104,7 @@ export default class Pie extends React.Component<PieProps> { | |||
| id: 'A', | |||
| label: 'A', | |||
| value: gradeACount, | |||
| color: '#60A3D1', | |||
| color: '#54B058', | |||
There was a problem hiding this comment.
consider using something like colors[0] for this so we can make these use the same source for colors
There was a problem hiding this comment.
Generally, files without components should start with lowercase and would end in .ts instead of .tsx, i.e. chartColors.ts
Since Colors is not a component, I suggest renaming this file to colors.ts with an export const colors = [...]
| @@ -0,0 +1,17 @@ | |||
| import { type Theme } from '@nivo/core'; | |||
|
|
|||
| export const TooltipStyle: Theme = { | |||
Tooltip and chart styling fixes
Description
Moved color constants and tooltip dimensions/styling to separate files and made dimensions that same.
Screenshots
Before
After
Steps to verify/test this change:
Final Checks:
(optional)
Issues
Closes #