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,
}}
/>