From 2a6ebd116cda85460d1a5d246a5a4bff970a95be Mon Sep 17 00:00:00 2001
From: Sam Reid <reids@colorado.edu>
Date: Wed, 23 Feb 2022 10:00:40 -0700
Subject: [PATCH] Add x-axis label for dot plot number line node, see
 https://github.com/phetsims/center-and-spread/issues/6

---
 center-and-spread-strings_en.json        |  2 +-
 js/centerAndSpreadStrings.ts             |  2 +-
 js/common/view/DotPlotNode.ts            | 14 ++++++++++++--
 js/common/view/MeanOrMedianScreenView.ts |  2 +-
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/center-and-spread-strings_en.json b/center-and-spread-strings_en.json
index 237524c8..17632770 100644
--- 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
index 075bdcc9..dbb00569 100644
--- 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
index ae410513..7fc998ac 100644
--- 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
index 2a293c9c..e9d409d8 100644
--- 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
       } );