diff --git a/components/ComponentWrapper.module.css b/components/ComponentWrapper.module.css index 09f37ea..d10c7c4 100644 --- a/components/ComponentWrapper.module.css +++ b/components/ComponentWrapper.module.css @@ -76,7 +76,7 @@ } .horizontalScrollOnMobile { - overflow: scroll; + overflow-x: scroll; } } diff --git a/components/PieChart.module.css b/components/PieChart.module.css index a7e0703..b209dca 100644 --- a/components/PieChart.module.css +++ b/components/PieChart.module.css @@ -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)); -} +} \ No newline at end of file diff --git a/components/PieChart.tsx b/components/PieChart.tsx index 765e36e..5b72e7a 100644 --- a/components/PieChart.tsx +++ b/components/PieChart.tsx @@ -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( 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( hideTooltip, showTooltip, }) => { + if (minWidth) { + width = width < minWidth ? minWidth : width; + } + const pieWidth = width * 0.5 - labelWidth; + const cornerRadius = 0; + const padAngle = 0; + return (
@@ -64,8 +74,8 @@ export const PieChart = withTooltip( d.value} - cornerRadius={10} - padAngle={0.075} + cornerRadius={cornerRadius} + padAngle={padAngle} padRadius={padRadius} innerRadius={innerRadius} outerRadius={pieWidth} diff --git a/data/post-grad.ts b/data/post-grad.ts index a6af396..e320a51 100644 --- a/data/post-grad.ts +++ b/data/post-grad.ts @@ -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, }, ]; diff --git a/pages/demographics.tsx b/pages/demographics.tsx index d9a3c54..c07fddc 100644 --- a/pages/demographics.tsx +++ b/pages/demographics.tsx @@ -68,7 +68,11 @@ export default function Demographics() {
- +
diff --git a/pages/friends.tsx b/pages/friends.tsx index 94ce041..72afdf3 100644 --- a/pages/friends.tsx +++ b/pages/friends.tsx @@ -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 >
- +
diff --git a/pages/samplePage.tsx b/pages/samplePage.tsx index ccf08b8..4207bd9 100644 --- a/pages/samplePage.tsx +++ b/pages/samplePage.tsx @@ -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 > ({ @@ -134,7 +135,11 @@ export default function SamplePage() { height={defaultGraphHeight} /> - + ({ text: word.key, @@ -181,7 +186,11 @@ export default function SamplePage() { margin={defaultHorizontalBarGraphMargin} /> - +