From 047889162eb994a706acc3eb6cc61891ca3864db Mon Sep 17 00:00:00 2001 From: e26chiu Date: Thu, 15 Dec 2022 21:33:14 -0500 Subject: [PATCH] WIP Fix Stacked Bar Graph --- components/StackedBarGraph.module.css | 7 - components/StackedBarGraph.tsx | 285 +++++++++++++++----------- pages/academics.tsx | 13 +- pages/coop.tsx | 6 - pages/playground.tsx | 4 - 5 files changed, 166 insertions(+), 149 deletions(-) diff --git a/components/StackedBarGraph.module.css b/components/StackedBarGraph.module.css index ad6d198..40646db 100644 --- a/components/StackedBarGraph.module.css +++ b/components/StackedBarGraph.module.css @@ -8,17 +8,10 @@ .legend { display: flex; - justify-content: center; font-size: calc(16rem / 16); top: 0; } -.tickLabel { - font-family: "Inconsolata", monospace; - font-weight: 800; - fill: var(--label); -} - .key { font-weight: bold; } \ No newline at end of file diff --git a/components/StackedBarGraph.tsx b/components/StackedBarGraph.tsx index 455f524..c9f77fd 100644 --- a/components/StackedBarGraph.tsx +++ b/components/StackedBarGraph.tsx @@ -43,14 +43,17 @@ export type StackedBarProps = { /** Colours for each key */ colorRange: string[]; /** Distance between the edge of the graph and the area where the bars are drawn, in pixels. */ - margin: { - top: number; - left: number; - bottom: number; - right: number; - }; + margin: { top: number; left: number }; /** Number of ticks for the value axis */ numTicksValueAxis?: number; + /** Distance between the left axis labels and the start of the lines of the graph, in px. */ + axisLeftOffset?: number; + /** Distance between the bottom axis and the bottom of the container of the graph, in px. */ + axisBottomOffset?: number; + /** Distance between the right side of the graph and the legend, in px. */ + legendLeftOffset?: number; + /** Distance between the top of the graph and the legend, in px. */ + legendTopOffset?: number; /** Width of the lines in the graph, in px. */ strokeWidth?: number; /** Length of the dashes and the gaps in the graph, in px. */ @@ -59,6 +62,9 @@ export type StackedBarProps = { scalePadding?: number; /** Margin for each item in the legend */ itemMargin?: string; + /** Factor multiplied with an offset to center the labels of the category-axis depending on the width/height of the graph. + * >1 for width/height <600 and <1 for width/height >600 (vertical=width/horizontal=height) */ + categoryAxisLeftFactor?: number; }; let tooltipTimeout: number; @@ -76,9 +82,14 @@ export const StackedBarGraphVertical = withTooltip< margin, scalePadding = 0.3, numTicksValueAxis = 6, + axisLeftOffset = 40, + axisBottomOffset = 40, strokeWidth = 2.5, strokeDashArray = "10,4", + legendLeftOffset = 40, + legendTopOffset = 40, itemMargin = "0 0 0 15px", + categoryAxisLeftFactor = 1, tooltipOpen, tooltipLeft, tooltipTop, @@ -115,15 +126,18 @@ export const StackedBarGraphVertical = withTooltip< }); // bounds - const xMax = width - margin.left - margin.right; - const yMax = height - margin.top - margin.bottom; + const xMax = width; + const yMax = height - margin.top - axisBottomOffset; - categoryScale.rangeRound([0, xMax]); + categoryScale.rangeRound([0, xMax - axisLeftOffset]); valueScale.range([yMax, 0]); return width < 10 ? null : (
-
+
- - data={data} - keys={keys} - x={getCategory} - xScale={categoryScale} - yScale={valueScale} - color={colorScale} - > - {(barStacks) => - barStacks.map((barStack) => - barStack.bars.map((bar) => ( - { - tooltipTimeout = window.setTimeout(() => { - hideTooltip(); - }, 300); - }} - onMouseMove={(event) => { - if (tooltipTimeout) clearTimeout(tooltipTimeout); - const eventSvgCoords = localPoint(event); - const left = bar.x + bar.width / 2; - showTooltip({ - tooltipData: bar, - tooltipTop: eventSvgCoords?.y, - tooltipLeft: left, - }); - }} - /> - )) - ) - } - + + + data={data} + keys={keys} + x={getCategory} + xScale={categoryScale} + yScale={valueScale} + color={colorScale} + > + {(barStacks) => + barStacks.map((barStack) => + barStack.bars.map((bar) => ( + { + tooltipTimeout = window.setTimeout(() => { + hideTooltip(); + }, 300); + }} + onMouseMove={(event) => { + if (tooltipTimeout) clearTimeout(tooltipTimeout); + const eventSvgCoords = localPoint(event); + const left = bar.x + bar.width / 2; + showTooltip({ + tooltipData: bar, + tooltipTop: eventSvgCoords?.y, + tooltipLeft: left, + }); + }} + /> + )) + ) + } + + - - ({ - className: styles.tickLabel, - fill: Color.label, - fontWeight: TICK_LABEL_FONT_WEIGHT, - width: categoryScale.bandwidth(), - verticalAnchor: "start", - })} - /> - { - return { + ({ fill: Color.label, fontWeight: TICK_LABEL_FONT_WEIGHT, - }; - }} - /> + })} + /> + { + return { + fill: Color.label, + fontWeight: TICK_LABEL_FONT_WEIGHT, + }; + }} + /> + {tooltipOpen && tooltipData ? ( @@ -259,9 +279,14 @@ export const StackedBarGraphHorizontal = withTooltip< margin, scalePadding = 0.3, numTicksValueAxis = 6, + axisLeftOffset = 40, + axisBottomOffset = 40, strokeWidth = 2.5, strokeDashArray = "10,4", + legendLeftOffset = 40, + legendTopOffset = 40, itemMargin = "0 0 0 15px", + categoryAxisLeftFactor = 1, tooltipOpen, tooltipLeft, tooltipTop, @@ -298,15 +323,18 @@ export const StackedBarGraphHorizontal = withTooltip< }); // bounds - const xMax = width - margin.left - margin.right; - const yMax = height - margin.top - margin.bottom; + const xMax = width; + const yMax = height - margin.top - axisBottomOffset; categoryScale.rangeRound([yMax, 0]); - valueScale.range([0, xMax]); + valueScale.range([0, xMax - axisLeftOffset]); return width < 10 ? null : (
-
+
- - data={data} - keys={keys} - y={getCategory} - xScale={valueScale} - yScale={categoryScale} - color={colorScale} - > - {(barStacks) => - barStacks.map((barStack) => - barStack.bars.map((bar) => ( - { - tooltipTimeout = window.setTimeout(() => { - hideTooltip(); - }, 300); - }} - onMouseMove={(event) => { - if (tooltipTimeout) clearTimeout(tooltipTimeout); - const eventSvgCoords = localPoint(event); - const left = bar.x + bar.width / 2; - showTooltip({ - tooltipData: bar, - tooltipTop: eventSvgCoords?.y, - tooltipLeft: left, - }); - }} - /> - )) - ) - } - + + + data={data} + keys={keys} + y={getCategory} + xScale={valueScale} + yScale={categoryScale} + color={colorScale} + > + {(barStacks) => + barStacks.map((barStack) => + barStack.bars.map((bar) => ( + { + tooltipTimeout = window.setTimeout(() => { + hideTooltip(); + }, 300); + }} + onMouseMove={(event) => { + if (tooltipTimeout) clearTimeout(tooltipTimeout); + const eventSvgCoords = localPoint(event); + const left = bar.x + bar.width / 2; + showTooltip({ + tooltipData: bar, + tooltipTop: eventSvgCoords?.y, + tooltipLeft: left, + }); + }} + /> + )) + ) + } + + @@ -274,8 +273,8 @@ export default function Academics() { noBackground > diff --git a/pages/coop.tsx b/pages/coop.tsx index cb6e6eb..978233b 100644 --- a/pages/coop.tsx +++ b/pages/coop.tsx @@ -226,8 +226,6 @@ export default function CoopPage() { margin={{ top: 20, left: 20, - bottom: 0, - right: 0, }} />
@@ -256,8 +254,6 @@ export default function CoopPage() { margin={{ top: 20, left: 20, - bottom: 0, - right: 0, }} />
@@ -301,8 +297,6 @@ export default function CoopPage() { margin={{ top: 20, left: 20, - bottom: 0, - right: 0, }} />
diff --git a/pages/playground.tsx b/pages/playground.tsx index 69a9df2..0959f8f 100644 --- a/pages/playground.tsx +++ b/pages/playground.tsx @@ -126,8 +126,6 @@ export default function Home() { margin={{ top: 20, left: 20, - bottom: 0, - right: 0, }} /> @@ -151,8 +149,6 @@ export default function Home() { margin={{ top: 20, left: 20, - bottom: 0, - right: 0, }} />