Add x-axis label for dot plot number line node, see #6

phetsims · Feb 23, 2022 · 2a6ebd1 · 2a6ebd1
1 parent 55046ce
commit 2a6ebd1
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/center-and-spread-strings_en.json b/center-and-spread-strings_en.json
@@ -29,7 +29,7 @@
   "kick5": {
     "value": "Kick 5"
   },
-  "data": {
+  "distanceInMeters": {
     "value": "Distance (in meters)"
   },
   "sortData": {

diff --git a/js/centerAndSpreadStrings.ts b/js/centerAndSpreadStrings.ts
@@ -22,7 +22,7 @@ type StringsType = {
   'spreadQuestion': string,
   'kick1': string,
   'kick5': string,
-  'data': string,
+  'distanceInMeters': string,
   'sortData': string,
   'medianEqualsValue': string,
   'dotPlot': string,

diff --git a/js/common/view/DotPlotNode.ts b/js/common/view/DotPlotNode.ts
@@ -11,7 +11,7 @@
  */
 
 import centerAndSpread from '../../centerAndSpread.js';
-import { Color, Node, NodeOptions, Rectangle } from '../../../../scenery/js/imports.js';
+import { Color, Node, NodeOptions, Rectangle, Text } from '../../../../scenery/js/imports.js';
 import optionize from '../../../../phet-core/js/optionize.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import CASModel from '../model/CASModel.js';
@@ -23,6 +23,8 @@ import ModelViewTransform2 from '../../../../phetcommon/js/view/ModelViewTransfo
 import NumberLineNode from './NumberLineNode.js';
 import Bounds2 from '../../../../dot/js/Bounds2.js';
 import MedianBarsNode from './MedianBarsNode.js';
+import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
+import centerAndSpreadStrings from '../../centerAndSpreadStrings.js';
 
 // constants
 
@@ -51,7 +53,7 @@ class DotPlotNode extends Node {
     backgroundNode.localBounds = backgroundNode.getRectBounds();
     this.addChild( backgroundNode );
 
-    const numberLinePositionY = 143;
+    const numberLinePositionY = 124;
 
     // scale down in the y direction to support smaller object nodes
     const yScale = CASObjectType.DOT.radius / model.objectType.radius;
@@ -74,6 +76,14 @@ class DotPlotNode extends Node {
       } );
     backgroundNode.addChild( numberLineNode );
 
+    backgroundNode.addChild( new Text( centerAndSpreadStrings.distanceInMeters, {
+
+      // TODO: This may be asymmetrical if it accounts for edge labels
+      centerX: numberLineNode.centerX,
+
+      top: numberLineNode.bottom - 3,
+      font: new PhetFont( 15 )
+    } ) );
     this.dotLayer = new Node();
     backgroundNode.addChild( this.dotLayer );
 

diff --git a/js/common/view/MeanOrMedianScreenView.ts b/js/common/view/MeanOrMedianScreenView.ts
@@ -56,7 +56,7 @@ class MeanOrMedianScreenView extends SoccerScreenView {
     this.accordionBox = new CASAccordionBox( this.model, this.accordionBoxContents, this.topCheckboxPanel,
       this.layoutBounds, {
         tandem: accordionBoxTandem,
-        titleString: options.isMedianScreen ? centerAndSpreadStrings.data : centerAndSpreadStrings.dotPlot,
+        titleString: options.isMedianScreen ? centerAndSpreadStrings.distanceInMeters : centerAndSpreadStrings.dotPlot,
         centerX: this.layoutBounds.centerX,
         top: this.questionBar.bottom + CASConstants.SCREEN_VIEW_Y_MARGIN
       } );