Adjust variability rectangle size and create constant for label bar y…

…-offset - see #280
phetsims · Jun 21, 2023 · 1473f9c · 1473f9c · matthew-blackman · Jun 21, 2023
1 parent 7ae517e
commit 1473f9c
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/js/common/CAVConstants.ts b/js/common/CAVConstants.ts
@@ -59,8 +59,8 @@ const CAVConstants = {
   CHART_VIEW_WIDTH: ScreenView.DEFAULT_LAYOUT_BOUNDS.width - NUMBER_LINE_MARGIN_X * 2,
   NUMBER_LINE_MARGIN_X: NUMBER_LINE_MARGIN_X,
 
-  VARIABILITY_PLOT_RECT_HEIGHT: 70,
-  VARIABILITY_PLOT_BAR_OFFSET_Y: 2,
+  VARIABILITY_PLOT_RECT_HEIGHT: 118,
+  VARIABILITY_PLOT_BAR_OFFSET_Y: -3,
 
   INFO_DIALOG_FONT_SIZE: 16,
   INFO_DIALOG_TITLE_FONT_SIZE: 20,

diff --git a/js/variability/view/IQRNode.ts b/js/variability/view/IQRNode.ts
@@ -298,7 +298,7 @@ export default class IQRNode extends CAVPlotNode {
         iqrRectangle.bottom = options.parentContext === 'info' ? boxWhiskerNode.y + 0.5 * BOX_HEIGHT : floor;
 
         iqrBar.setIntervalBarNodeWidth( iqrRectangle.rectWidth );
-        iqrBar.bottom = options.parentContext === 'accordion' ? iqrRectangle.top : Math.min( minLabelTextNode.y, q1LabelTextNode.y, q3LabelTextNode.y, maxLabelTextNode.y ) + 12;
+        iqrBar.bottom = options.parentContext === 'accordion' ? iqrRectangle.top + CAVConstants.VARIABILITY_PLOT_BAR_OFFSET_Y : Math.min( minLabelTextNode.y, q1LabelTextNode.y, q3LabelTextNode.y, maxLabelTextNode.y ) + 12;
         iqrBar.centerX = iqrRectangle.centerX;
 
         iqrBarLabel.string = sceneModel.iqrValueProperty.value!;

diff --git a/js/variability/view/MADNode.ts b/js/variability/view/MADNode.ts
@@ -88,7 +88,7 @@ export default class MADNode extends CAVPlotNode {
         const mean = _.mean( soccerBalls.map( dot => dot.valueProperty.value ) );
 
         // Underneath the accordion box title
-        let y = 60;
+        let y = 15;
         soccerBalls.forEach( soccerBall => {
           const x1 = this.modelViewTransform.modelToViewX( soccerBall.valueProperty.value! );
           const x2 = this.modelViewTransform.modelToViewX( mean );
@@ -128,7 +128,7 @@ export default class MADNode extends CAVPlotNode {
           }
 
           // Enough spacing so they don't overlap the bottom row of data points
-          y += options.parentContext === 'info' ? 11 : 4.2;
+          y += options.parentContext === 'info' ? 11 : 3.7;
         } );
       }
 
@@ -166,8 +166,9 @@ export default class MADNode extends CAVPlotNode {
         leftReadout.string = Utils.toFixed( mad, 1 );
         rightReadout.string = Utils.toFixed( mad, 1 );
 
+        // TODO: Check if the bar offset is correct in info dialog - https://github.com/phetsims/center-and-variability/issues/280
         // In the info dialog, when text nodes are present, the MAD bars should be offset so they don't overlap the text
-        const barYOffset = ( options.parentContext === 'info' && textNodes.length > 0 ) ? -textNodes[ 0 ].height : 0;
+        const barYOffset = ( options.parentContext === 'info' && textNodes.length > 0 ) ? -textNodes[ 0 ].height : CAVConstants.VARIABILITY_PLOT_BAR_OFFSET_Y;
 
         leftBar.setIntervalBarNodeWidth( viewCenterX - madRectangle.left );
         rightBar.setIntervalBarNodeWidth( madRectangle.right - viewCenterX );

diff --git a/js/variability/view/RangeNode.ts b/js/variability/view/RangeNode.ts
@@ -90,7 +90,7 @@ export default class RangeNode extends CAVPlotNode {
 
         rangeBar.setIntervalBarNodeWidth( rangeRectangle.rectWidth );
         rangeBar.centerX = rangeRectangle.centerX;
-        rangeBar.bottom = rangeRectangle.top;
+        rangeBar.bottom = rangeRectangle.top + CAVConstants.VARIABILITY_PLOT_BAR_OFFSET_Y;
 
         rangeTextReadout.string = sceneModel.rangeValueProperty.value + '';
         rangeTextReadout.centerX = rangeRectangle.centerX;