fix package-lock + refactor variables

components/Boxplot.tsx

@@ -61,8 +61,6 @@ export type StatsPlotProps = {
   categoryAxisLabelLeftOffset?: number;
   /** Distance between the top and the column lines of the grid of the graph, in px. */
   gridColumnTopOffset?: number;
-  /** Distance between the top and the row lines of the grid of the graph, in px. */
-  gridRowTopOffset?: number;
   /** Distance between the top of the point in the boxplot and the start of the tooltip box, in px. */
   toolTipTopOffset?: number;
   /** Distance between the left of the point in the boxplot and the start of the tooltip box, in px. */
@@ -73,8 +71,6 @@ export type StatsPlotProps = {
   valueAxisLabelSize?: number;
   /** Font size of the text in the tool tip box */
   toolTipFontSize?: number;
-  /** Grid column line extension, in px. */
-  lineExtension?: number;
   /** Factor multiplied with the compressed width to determine the box width, in px. */
   boxPlotWidthFactor?: number;
   /** Factor multiplied with the compressed width to determine the distance between boxes, in px. */
@@ -99,15 +95,13 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
     plotTopOffset = 10,
     valueAxisLeftOffset = 40,
     gridColumnTopOffset = -20,
-    gridRowTopOffset = 10,
+    valueAxisLabelTopOffset = 5,
-    valueAxisLabelTopOffset = 15,
     valueAxisLabelLeftOffset = 10,
     categoryAxisLabelLeftOffset = 30,
     toolTipTopOffset = 20,
     toolTipLeftOffset = 5,
     categoryAxisLabelSize = DEFAULT_LABEL_SIZE,
     valueAxisLabelSize = DEFAULT_LABEL_SIZE,
-    lineExtension = 10,
     boxPlotWidthFactor = 0.4,
     boxPlotLeftOffset = 0.3,
   }: StatsPlotProps & WithTooltipProvidedProps<TooltipData>) => {
@@ -139,7 +133,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
       range: [18, xMax - 80], // scaling is needed due to the left offset
       round: true,
       domain: plotData.map(getX),
-      padding: 0.4,
+      padding: 0.3,
     });
 
     const values = plotData.reduce((allValues, { boxPlot }) => {
@@ -162,11 +156,10 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
         <svg width={width} height={height}>
           <Group top={margin.top} left={margin.left}>
             <GridRows
-              top={gridRowTopOffset}
+              top={plotTopOffset}
               left={valueAxisLeftOffset}
               scale={yScale}
               width={xMax}
-              height={yMax}
               numTicks={numTicksLeftAxis}
               stroke={Color.tertiaryBackground}
               strokeWidth={strokeWidth}
@@ -174,8 +167,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
             />
             <GridColumns
               scale={xScale}
-              width={xMax}
+              height={yMax + plotTopOffset - gridColumnTopOffset}
-              height={yMax + lineExtension - gridColumnTopOffset}
               top={gridColumnTopOffset}
               left={valueAxisLeftOffset}
               stroke={Color.tertiaryBackground}
@@ -186,7 +178,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
               fill={Color.tertiaryBackground}
               to={new Point({ x: valueAxisLeftOffset, y: gridColumnTopOffset })}
               from={
-                new Point({ x: valueAxisLeftOffset, y: yMax + lineExtension })
+                new Point({ x: valueAxisLeftOffset, y: yMax + plotTopOffset })
               }
               stroke={Color.tertiaryBackground}
               strokeWidth={strokeWidth}
@@ -203,7 +195,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
               from={
                 new Point({
                   x: xMax - margin.left - strokeWidth,
-                  y: yMax + lineExtension,
+                  y: yMax + plotTopOffset,
                 })
               }
               stroke={Color.tertiaryBackground}
@@ -211,7 +203,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
               strokeDasharray={strokeDashArray}
             />
             <AxisBottom
-              top={yMax + lineExtension - gridColumnTopOffset}
+              top={yMax + plotTopOffset - gridColumnTopOffset}
               left={categoryAxisLabelLeftOffset}
               scale={xScale}
               hideAxisLine
@@ -228,7 +220,7 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
             />
             <AxisLeft
               scale={yScale}
-              top={valueAxisLabelTopOffset}
+              top={plotTopOffset + valueAxisLabelTopOffset}
               left={valueAxisLabelLeftOffset}
               numTicks={numTicksLeftAxis}
               hideAxisLine
@@ -355,7 +347,11 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
             top={tooltipTop}
             left={tooltipLeft}
             className={styles.tooltip}
-            style={{ ...defaultTooltipStyles }}
+            style={{
+              ...defaultTooltipStyles,
+              borderRadius: "10px",
+              padding: 10,
+            }}
           >
             <p className={styles.category}>{tooltipData.category}</p>
             <div className={styles.toolTipData}>