Fix Boxplot labels, spacing + remove hardcoded values

components/Boxplot.tsx

@@ -47,16 +47,10 @@ export type StatsPlotProps = {
   strokeDashArray?: string;
   /** Number of ticks for the value (y-)axis */
   numTicksLeftAxis?: number;
-  /** Distance between the boxplot and the top of the grid, in px. */
-  plotTopOffset?: number;
-  /** Distance between the left axis labels and the start of the lines of the graph, in px. */
-  valueAxisLeftOffset?: number;
-  /** Distance between the top and the first label of the y axis, in px. */
-  valueAxisLabelTopOffset?: number;
-  /** Distance between the left and the labels of the y axis, in px. */
-  valueAxisLabelLeftOffset?: number;
-  /** Distance between the left and the start of the first label of the x axis, in px. */
-  categoryAxisLabelLeftOffset?: number;
+  /** Left margin before the start of the graph for the left axis labels, in px. */
+  valueAxisLeftMargin?: number;
+  /** Distance between the left axis labels and the start of the graph */
+  valueAxisLabelOffset?: number;
   /** Distance between the top and the column lines of the grid of the graph, in px. */
   gridColumnTopOffset?: number;
   /** Distance between the top of the point in the boxplot and the start of the tooltip box, in px. */
@@ -73,6 +67,8 @@ export type StatsPlotProps = {
   boxPlotWidthFactor?: number;
   /** Factor multiplied with the compressed width to determine the distance between boxes, in px. */
   boxPlotLeftOffset?: number;
+  /** Boxplot padding  */
+  boxPlotPadding?: number;
 };
 
 export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
@@ -90,18 +86,16 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
     strokeWidth = 2.5,
     strokeDashArray = "10,4",
     numTicksLeftAxis = 6,
-    plotTopOffset = 10,
-    valueAxisLeftOffset = 40,
+    valueAxisLeftMargin = 40,
     gridColumnTopOffset = -20,
-    valueAxisLabelTopOffset = 5,
-    valueAxisLabelLeftOffset = 10,
-    categoryAxisLabelLeftOffset = 30,
+    valueAxisLabelOffset = -10,
     toolTipTopOffset = 0,
     toolTipLeftOffset = 0,
     categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
     valueAxisLabelSize = DEFAULT_LABEL_SIZE,
     boxPlotWidthFactor = 0.4,
     boxPlotLeftOffset = 0.3,
+    boxPlotPadding = 0.3,
   }: StatsPlotProps & WithTooltipProvidedProps<TooltipData>) => {
     // bounds
     const xMax = width;
@@ -128,23 +122,22 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
 
     // scales
     const xScale = scaleBand<string>({
-      range: [18, xMax - 80], // scaling is needed due to the left offset
+      range: [margin.left, xMax - 2 * margin.left - valueAxisLeftMargin], // scaling is needed due to left margin
       round: true,
       domain: plotData.map(getX),
-      padding: 0.3,
+      padding: boxPlotPadding,
     });
 
     const values = plotData.reduce((allValues, { boxPlot }) => {
       allValues.push(boxPlot.min, boxPlot.max);
       return allValues;
     }, [] as number[]);
-    const minYValue = Math.min(...values);
     const maxYValue = Math.max(...values);
 
     const yScale = scaleLinear<number>({
-      range: [yMax, 0],
+      range: [yMax - margin.top, 0],
       round: true,
-      domain: [minYValue, maxYValue],
+      domain: [0, maxYValue],
     });
 
     const constrainedWidth = Math.min(200, xScale.bandwidth());
@@ -168,35 +161,65 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
       <div>
         <svg width={width} height={height}>
           <Group top={margin.top} left={margin.left}>
-            <GridRows
-              top={plotTopOffset}
-              left={valueAxisLeftOffset}
-              scale={yScale}
-              width={xMax}
-              numTicks={numTicksLeftAxis}
-              stroke={Color.tertiaryBackground}
-              strokeWidth={strokeWidth}
-              strokeDasharray={strokeDashArray}
-            />
-            <GridColumns
-              scale={xScale}
-              height={yMax + plotTopOffset - gridColumnTopOffset}
-              top={gridColumnTopOffset}
-              left={valueAxisLeftOffset}
-              stroke={Color.tertiaryBackground}
-              strokeWidth={strokeWidth}
-              strokeDasharray={strokeDashArray}
-            />
-            <Line
-              fill={Color.tertiaryBackground}
-              to={new Point({ x: valueAxisLeftOffset, y: gridColumnTopOffset })}
-              from={
-                new Point({ x: valueAxisLeftOffset, y: yMax + plotTopOffset })
-              }
-              stroke={Color.tertiaryBackground}
-              strokeWidth={strokeWidth}
-              strokeDasharray={strokeDashArray}
-            />
+            <Group left={valueAxisLeftMargin}>
+              <GridRows
+                scale={yScale}
+                width={xMax}
+                numTicks={numTicksLeftAxis}
+                stroke={Color.tertiaryBackground}
+                strokeWidth={strokeWidth}
+                strokeDasharray={strokeDashArray}
+              />
+              <GridColumns
+                scale={xScale}
+                height={yMax - gridColumnTopOffset}
+                top={gridColumnTopOffset}
+                stroke={Color.tertiaryBackground}
+                strokeWidth={strokeWidth}
+                strokeDasharray={strokeDashArray}
+              />
+              <AxisBottom
+                top={yMax - gridColumnTopOffset}
+                scale={xScale}
+                hideAxisLine
+                hideTicks
+                labelProps={{
+                  fontSize: `${categoryAxisLabelSize / 16}rem`,
+                }}
+                tickLabelProps={() => {
+                  return {
+                    fill: Color.label,
+                    fontWeight: TICK_LABEL_FONT_WEIGHT,
+                    textAnchor: "middle",
+                  };
+                }}
+              />
+              <AxisLeft
+                scale={yScale}
+                left={valueAxisLabelOffset}
+                numTicks={numTicksLeftAxis}
+                hideAxisLine
+                labelProps={{
+                  fontSize: `${valueAxisLabelSize / 16}rem`,
+                }}
+                tickLabelProps={() => {
+                  return {
+                    fill: Color.label,
+                    fontWeight: TICK_LABEL_FONT_WEIGHT,
+                    textAnchor: "end",
+                    verticalAnchor: "middle",
+                  };
+                }}
+              />
+              <Line
+                fill={Color.tertiaryBackground}
+                to={new Point({ x: 0, y: gridColumnTopOffset })}
+                from={new Point({ x: 0, y: yMax })}
+                stroke={Color.tertiaryBackground}
+                strokeWidth={strokeWidth}
+                strokeDasharray={strokeDashArray}
+              />
+            </Group>
             <Line
               fill={Color.tertiaryBackground}
               to={
@@ -208,92 +231,58 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
               from={
                 new Point({
                   x: xMax - margin.left - strokeWidth,
-                  y: yMax + plotTopOffset,
+                  y: yMax,
                 })
               }
               stroke={Color.tertiaryBackground}
               strokeWidth={strokeWidth}
               strokeDasharray={strokeDashArray}
             />
-            <AxisBottom
-              top={yMax + plotTopOffset - gridColumnTopOffset}
-              left={categoryAxisLabelLeftOffset}
-              scale={xScale}
-              hideAxisLine
-              hideTicks
-              labelProps={{
-                fontSize: `${categoryAxisLabelSize / 16}rem`,
-              }}
-              tickLabelProps={() => {
-                return {
-                  fill: Color.label,
-                  fontWeight: TICK_LABEL_FONT_WEIGHT,
-                };
-              }}
-            />
-            <AxisLeft
-              scale={yScale}
-              top={plotTopOffset + valueAxisLabelTopOffset}
-              left={valueAxisLabelLeftOffset}
-              numTicks={numTicksLeftAxis}
-              hideAxisLine
-              labelProps={{
-                fontSize: `${valueAxisLabelSize / 16}rem`,
-              }}
-              tickLabelProps={() => {
-                return {
-                  fill: Color.label,
-                  fontWeight: TICK_LABEL_FONT_WEIGHT,
-                };
-              }}
-            />
-            <Group top={plotTopOffset}>
-              {plotData.map((d: Stats, i) => (
-                <Group key={i}>
-                  <VisxBoxPlot
-                    className={styles.boxplot}
-                    min={getMin(d)}
-                    max={getMax(d)}
-                    left={
-                      xScale(getX(d))! +
-                      boxPlotLeftOffset * constrainedWidth +
-                      valueAxisLeftOffset
-                    }
-                    firstQuartile={getFirstQuartile(d)}
-                    thirdQuartile={getThirdQuartile(d)}
-                    median={getMedian(d)}
-                    boxWidth={constrainedWidth * boxPlotWidthFactor}
-                    rx={0}
-                    ry={0}
-                    stroke={Color.label}
-                    strokeWidth={strokeWidth}
-                    valueScale={yScale}
-                    minProps={{
-                      onMouseMove: mouseOverEventHandler(d),
-                      onMouseLeave: hideTooltip,
-                    }}
-                    maxProps={{
-                      onMouseMove: mouseOverEventHandler(d),
-                      onMouseLeave: hideTooltip,
-                    }}
-                    boxProps={{
-                      onMouseMove: mouseOverEventHandler(d),
-                      strokeWidth: 0,
-                      onMouseLeave: hideTooltip,
-                    }}
-                    medianProps={{
-                      style: {
-                        stroke: Color.label,
-                      },
-                      onMouseMove: mouseOverEventHandler(d),
-                      onMouseLeave: () => {
-                        hideTooltip();
-                      },
-                    }}
-                  />
-                </Group>
-              ))}
-            </Group>
+            {plotData.map((d: Stats, i) => (
+              <Group key={i}>
+                <VisxBoxPlot
+                  className={styles.boxplot}
+                  min={getMin(d)}
+                  max={getMax(d)}
+                  left={
+                    xScale(getX(d))! +
+                    boxPlotLeftOffset * constrainedWidth +
+                    valueAxisLeftMargin
+                  }
+                  firstQuartile={getFirstQuartile(d)}
+                  thirdQuartile={getThirdQuartile(d)}
+                  median={getMedian(d)}
+                  boxWidth={constrainedWidth * boxPlotWidthFactor}
+                  rx={0}
+                  ry={0}
+                  stroke={Color.label}
+                  strokeWidth={strokeWidth}
+                  valueScale={yScale}
+                  minProps={{
+                    onMouseMove: mouseOverEventHandler(d),
+                    onMouseLeave: hideTooltip,
+                  }}
+                  maxProps={{
+                    onMouseMove: mouseOverEventHandler(d),
+                    onMouseLeave: hideTooltip,
+                  }}
+                  boxProps={{
+                    onMouseMove: mouseOverEventHandler(d),
+                    strokeWidth: 0,
+                    onMouseLeave: hideTooltip,
+                  }}
+                  medianProps={{
+                    style: {
+                      stroke: Color.label,
+                    },
+                    onMouseMove: mouseOverEventHandler(d),
+                    onMouseLeave: () => {
+                      hideTooltip();
+                    },
+                  }}
+                />
+              </Group>
+            ))}
           </Group>
         </svg>
 

pages/coop.tsx

@@ -212,7 +212,7 @@ export default function CoopPage() {
           width={isMobile ? pageWidth / 1.5 : 600}
           height={DefaultProp.graphHeight}
           data={C7iv}
-          valueAxisLeftOffset={75}
+          valueAxisLeftMargin={75}
           margin={{
             top: 20,
             left: 20,