https://adjust-pie-1-csc-class-profile-staging-snedadah.k8s.csclub.cloud/academics/ Co-authored-by: shahanneda <shahan.neda@gmail.com> Co-authored-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca> Reviewed-on: #117 Reviewed-by: Mark Chiu <e26chiu@csclub.uwaterloo.ca>
This commit is contained in:
parent
dcc318b671
commit
b8590f7a28
|
@ -76,7 +76,7 @@
|
|||
}
|
||||
|
||||
.horizontalScrollOnMobile {
|
||||
overflow: scroll;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,12 +1,20 @@
|
|||
.piePath {
|
||||
fill: var(--tertiary-background);
|
||||
stroke: var(--label);
|
||||
stroke-width: 1px;
|
||||
stroke-dasharray: 0;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.labelPath {
|
||||
fill-opacity: 0;
|
||||
}
|
||||
|
||||
.labelText {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.group:hover > .piePath {
|
||||
fill: var(--primary-accent);
|
||||
filter: drop-shadow(0px 0px calc(6rem / 16) var(--primary-accent));
|
||||
}
|
||||
}
|
|
@ -26,6 +26,8 @@ interface PieChartProps {
|
|||
labelTextXOffset?: number;
|
||||
/** Y-axis offset of the label text, in pixels. */
|
||||
labelTextYOffset?: number;
|
||||
/** If set, the minimum width of this graph */
|
||||
minWidth?: number;
|
||||
/** Accessor function to get value to display as label text from datum. */
|
||||
getLabelDisplayValueFromDatum?: (datum: PieChartData) => string;
|
||||
className?: string;
|
||||
|
@ -41,11 +43,12 @@ export const PieChart = withTooltip<PieChartProps>(
|
|||
data,
|
||||
width,
|
||||
labelWidth,
|
||||
padRadius = width * 0.35,
|
||||
innerRadius = width * 0.015,
|
||||
padRadius = width * 0.25,
|
||||
innerRadius = width * 0,
|
||||
labelTextSize = 40,
|
||||
labelTextXOffset = 0,
|
||||
labelTextYOffset = 0,
|
||||
minWidth,
|
||||
getLabelDisplayValueFromDatum = (datum: PieChartData) =>
|
||||
`${datum.category}`,
|
||||
className,
|
||||
|
@ -56,7 +59,14 @@ export const PieChart = withTooltip<PieChartProps>(
|
|||
hideTooltip,
|
||||
showTooltip,
|
||||
}) => {
|
||||
if (minWidth) {
|
||||
width = width < minWidth ? minWidth : width;
|
||||
}
|
||||
|
||||
const pieWidth = width * 0.5 - labelWidth;
|
||||
const cornerRadius = 0;
|
||||
const padAngle = 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<svg className={className} width={width} height={width}>
|
||||
|
@ -64,8 +74,8 @@ export const PieChart = withTooltip<PieChartProps>(
|
|||
<Pie
|
||||
data={data}
|
||||
pieValue={(d: PieChartData) => d.value}
|
||||
cornerRadius={10}
|
||||
padAngle={0.075}
|
||||
cornerRadius={cornerRadius}
|
||||
padAngle={padAngle}
|
||||
padRadius={padRadius}
|
||||
innerRadius={innerRadius}
|
||||
outerRadius={pieWidth}
|
||||
|
|
|
@ -8,15 +8,15 @@ export const P1 = [
|
|||
value: 20.4,
|
||||
},
|
||||
{
|
||||
category: "Yes (Masters)",
|
||||
category: "Masters",
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
category: "Yes (PhD)",
|
||||
category: "PhD",
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
category: "Yes (PhD + Masters)",
|
||||
category: "PhD + Masters",
|
||||
value: 6.8,
|
||||
},
|
||||
];
|
||||
|
|
|
@ -68,7 +68,11 @@ export default function Demographics() {
|
|||
|
||||
<ComponentWrapper heading="Please indicate the pronouns that you use.">
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={D3} {...pieChartProps(isMobile, pageWidth)} />
|
||||
<PieChart
|
||||
data={D3}
|
||||
{...pieChartProps(isMobile, pageWidth)}
|
||||
labelTextSize={20}
|
||||
/>
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
|
|
|
@ -55,6 +55,7 @@ export default function Demographics() {
|
|||
heading="Rate how social you are."
|
||||
bodyText="Looks like most people consider themselves to be in the middle."
|
||||
align="center"
|
||||
noBackground
|
||||
>
|
||||
<BarGraphVertical
|
||||
data={F1}
|
||||
|
|
|
@ -107,6 +107,7 @@ export default function Demographics() {
|
|||
heading="In what areas have you grown that are unrelated to CS?"
|
||||
bodyText="University is an unforgettable, life-changing, and learning experience that we only get once in a lifetime! Make the most out of it! :)"
|
||||
align="center"
|
||||
noBackground
|
||||
>
|
||||
<WordCloud
|
||||
data={M7}
|
||||
|
|
|
@ -41,7 +41,12 @@ export default function Demographics() {
|
|||
noBackground
|
||||
>
|
||||
<div className={styles.graphContainer}>
|
||||
<PieChart data={P1} {...pieChartProps(isMobile, pageWidth)} />
|
||||
<PieChart
|
||||
data={P1}
|
||||
{...pieChartProps(isMobile, pageWidth)}
|
||||
labelTextSize={20}
|
||||
minWidth={500}
|
||||
/>
|
||||
</div>
|
||||
</ComponentWrapper>
|
||||
|
||||
|
|
|
@ -65,6 +65,7 @@ export default function SamplePage() {
|
|||
heading="What program are you in?"
|
||||
bodyText="There are a total of 106 respondents of the CS Class Profile. Interestingly, there are a huge number of students that are just in CS, partially due to the overwhelming number of people in CS as seen in the total demographics."
|
||||
align="center"
|
||||
noBackground
|
||||
>
|
||||
<WordCloud
|
||||
data={moreMockCategoricalData.map((word) => ({
|
||||
|
@ -134,7 +135,11 @@ export default function SamplePage() {
|
|||
height={defaultGraphHeight}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
<ComponentWrapper heading="What program are you in?" align="center">
|
||||
<ComponentWrapper
|
||||
heading="What program are you in?"
|
||||
align="center"
|
||||
noBackground
|
||||
>
|
||||
<WordCloud
|
||||
data={moreMockCategoricalData.map((word) => ({
|
||||
text: word.key,
|
||||
|
@ -181,7 +186,11 @@ export default function SamplePage() {
|
|||
margin={defaultHorizontalBarGraphMargin}
|
||||
/>
|
||||
</ComponentWrapper>
|
||||
<ComponentWrapper heading="What program are you in?" align="center">
|
||||
<ComponentWrapper
|
||||
heading="What program are you in?"
|
||||
align="center"
|
||||
noBackground
|
||||
>
|
||||
<BoxPlot
|
||||
width={600}
|
||||
height={400}
|
||||
|
|
Loading…
Reference in New Issue