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

refactor code + remove stroke on box
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Miniapple8888 2022-08-31 21:05:49 -04:00
parent dd0360e99d
commit ecbe05530b
2 changed files with 16 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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 {
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>
)}