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

Add BoxPlot component (Closes #6) #34

Merged
e26chiu merged 9 commits from boxplot-component into main 2022-09-03 11:13:59 -04:00
Conversation 1 Commits 9 Files Changed 6 +16 -30
2 changed files with 16 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ecbe05530b - Show all commits

7
components/Boxplot.module.css
View File

@ -11,6 +11,7 @@
background-color: var(--label);
color: var(--primary-background);
padding: calc(10rem / 16);
border-radius: calc(10rem / 16);
}
.tooltip .category {
@ -19,9 +20,9 @@
}
.tooltip .toolTipData {
margin-top: 5px;
margin-bottom: 10px;
font-size: 16px;
margin-top: calc(5rem / 16);
margin-bottom: calc(10rem / 16);
font-size: calc(16rem / 16);
}
.tooltip .toolTipData p {

39
components/Boxplot.tsx
View File

@ -18,7 +18,7 @@ import { Color } from "utils/Color";
import styles from "./Boxplot.module.css";
const DEFAULT_LABEL_SIZE = 16;
const TICK_LABEL_FONT_SIZE = 800;
const TICK_LABEL_FONT_WEIGHT = 800;
interface BoxPlotData {
a258wang marked this conversation as resolved
a258wang commented 2022-08-25 15:28:16 -04:00
Review
Copy Link

NIT: maybe name this label or name or something, just to be a bit more descriptive?

NIT: maybe name this `label` or `name` or something, just to be a bit more descriptive?
e26chiu commented 2022-08-27 11:20:03 -04:00
Review
Copy Link

The name was left as x since the boxPlot property in the Stats object takes in a field named x. With the changes (of changing x to a more descriptive name), inserting the boxplot data would look like this:

boxPlot: {
      x: data[i].category,
      min: data[i].min,
      firstQuartile: data[i].firstQuartile,
      median: data[i].median,
      thirdQuartile: data[i].thirdQuartile,
      max: data[i].max,
      outliers: [],
},

since the BoxPlotData would have a different label name for x. If we don't implement the changes, inserting boxplot data would look like this:

boxPlot: data[i]

I was wondering whether the name change was really necessary. We could add a comment next to the field x in the interface BoxPlotData to explain its purpose.

The name was left as `x` since the `boxPlot` property in the `Stats` object takes in a field named `x`. With the changes (of changing `x` to a more descriptive name), inserting the boxplot data would look like this: ``` boxPlot: { x: data[i].category, min: data[i].min, firstQuartile: data[i].firstQuartile, median: data[i].median, thirdQuartile: data[i].thirdQuartile, max: data[i].max, outliers: [], }, ``` since the `BoxPlotData` would have a different label name for `x`. If we don't implement the changes, inserting boxplot data would look like this: ``` boxPlot: data[i] ``` I was wondering whether the name change was really necessary. We could add a comment next to the field `x` in the `interface BoxPlotData` to explain its purpose.
a258wang commented 2022-08-27 21:53:41 -04:00
Review
Copy Link

We should be able to do

boxPlot: { ...data[i], x: data[i].category }

which is fairly concise, in my opinion. But ultimately it's up to you - a descriptive JSDoc comment in the interface would be a good idea either way. 🙂

We should be able to do ```typescript boxPlot: { ...data[i], x: data[i].category } ``` which is fairly concise, in my opinion. But ultimately it's up to you - a descriptive JSDoc comment in the interface would be a good idea either way. 🙂
category: string;
@ -222,7 +222,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
tickLabelProps={() => {
return {
fill: Color.label,
fontWeight: TICK_LABEL_FONT_SIZE,
fontWeight: TICK_LABEL_FONT_WEIGHT,
};
}}
/>
@ -238,7 +238,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
tickLabelProps={() => {
return {
fill: Color.label,
fontWeight: TICK_LABEL_FONT_SIZE,
fontWeight: TICK_LABEL_FONT_WEIGHT,
};
}}
/>
@ -273,11 +273,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
constrainedWidth +
toolTipLeftOffset,
tooltipData: {
min: getMin(d),
max: getMax(d),
median: getMedian(d),
firstQuartile: getFirstQuartile(d),
thirdQuartile: getThirdQuartile(d),
...d.boxPlot,
category: getX(d),
},
});
@ -296,11 +292,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
constrainedWidth +
toolTipLeftOffset,
tooltipData: {
min: getMin(d),
max: getMax(d),
median: getMedian(d),
firstQuartile: getFirstQuartile(d),
thirdQuartile: getThirdQuartile(d),
...d.boxPlot,
category: getX(d),
},
});
@ -324,6 +316,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
},
});
},
strokeWidth: 0,
onMouseLeave: () => {
hideTooltip();
},
@ -341,11 +334,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
constrainedWidth +
toolTipLeftOffset,
tooltipData: {
min: getMin(d),
max: getMax(d),
median: getMedian(d),
firstQuartile: getFirstQuartile(d),
thirdQuartile: getThirdQuartile(d),
...d.boxPlot,
category: getX(d),
},
});
@ -370,15 +359,11 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
>
<p className={styles.category}>{tooltipData.category}</p>
<div className={styles.toolTipData}>
{tooltipData.max ? <p>max: {tooltipData.max}</p> : null}
{tooltipData.thirdQuartile ? (
<p>third quartile: {tooltipData.thirdQuartile}</p>
) : null}
{tooltipData.median ? <p>median: {tooltipData.median}</p> : null}
{tooltipData.firstQuartile ? (
<p>first quartile: {tooltipData.firstQuartile}</p>
) : null}
{tooltipData.min ? <p>min: {tooltipData.min}</p> : null}
<p>max: {tooltipData.max}</p>
<p>third quartile: {tooltipData.thirdQuartile}</p>
<p>median: {tooltipData.median}</p>
<p>first quartile: {tooltipData.firstQuartile}</p>
<p>min: {tooltipData.min}</p>
</div>
</Tooltip>
)}