Adding live data to histograms, see #63

phetsims · Dec 18, 2024 · 3f6cde3 · 3f6cde3
1 parent 5501364
commit 3f6cde3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/js/common/view/QuantumMeasurementHistogram.ts b/js/common/view/QuantumMeasurementHistogram.ts
@@ -8,6 +8,7 @@
 
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import Multilink from '../../../../axon/js/Multilink.js';
+import NumberProperty from '../../../../axon/js/NumberProperty.js';
 import StringProperty from '../../../../axon/js/StringProperty.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import Dimension2 from '../../../../dot/js/Dimension2.js';
@@ -251,16 +252,31 @@ class QuantumMeasurementHistogram extends Node {
     xAxisRightLabel.centerX = RIGHT_HISTOGRAM_BAR_CENTER_X;
     xAxisRightLabel.top = xAxis.centerY + axisLabelMargin;
 
+    const leftPercentageProperty = new NumberProperty( 0, {
+      tandem: options.tandem.createTandem( 'leftPercentageProperty' ),
+      range: new Range( 0, 100 ),
+      units: '%',
+      phetioReadOnly: true
+    } );
+    const rightPercentageProperty = new NumberProperty( 0, {
+      tandem: options.tandem.createTandem( 'rightPercentageProperty' ),
+      range: new Range( 0, 100 ),
+      units: '%',
+      phetioReadOnly: true
+    } );
+
     Multilink.multilink(
       [
         leftNumberProperty,
         rightNumberProperty
       ],
       ( leftNumber, rightNumber ) => {
         const leftProportion = totalNumberProperty.value ? leftNumber / totalNumberProperty.value : 0;
+        leftPercentageProperty.value = leftProportion * 100;
         leftHistogramBar.setRect( 0, 0, options.barWidth, leftProportion * maxBarHeight );
         leftHistogramBar.bottom = xAxis.centerY;
         const rightProportion = totalNumberProperty.value ? rightNumber / totalNumberProperty.value : 0;
+        rightPercentageProperty.value = rightProportion * 100;
         rightHistogramBar.setRect( 0, 0, options.barWidth, rightProportion * maxBarHeight );
         rightHistogramBar.bottom = xAxis.centerY;
 

diff --git a/js/spin/view/SpinMeasurementArea.ts b/js/spin/view/SpinMeasurementArea.ts
@@ -93,6 +93,7 @@ export default class SpinMeasurementArea extends VBox {
       new MeasurementDeviceNode( model.measurementLines[ 2 ], modelViewTransform, { tandem: tandem.createTandem( 'thirdMeasurementDevice' ) } )
     ];
 
+    let histogramCounter = 1;
     const createPercentageHistogram = ( sternGerlach: SternGerlach, visibleProperty: TReadOnlyProperty<boolean> ) => {
 
       const spinUpLabelStringProperty = new DerivedStringProperty(
@@ -114,6 +115,8 @@ export default class SpinMeasurementArea extends VBox {
                                               SGSubX + QuantumMeasurementConstants.SPIN_DOWN_ARROW_CHARACTER
       );
 
+      const tandemName = `histogram${histogramCounter++}`;
+
       return new HistogramWithExpectedValue(
         sternGerlach.upCounterProperty,
         sternGerlach.downCounterProperty,
@@ -129,7 +132,7 @@ export default class SpinMeasurementArea extends VBox {
           scale: 0.8,
           leftFillColorProperty: QuantumMeasurementColors.tailsColorProperty,
           visibleProperty: visibleProperty,
-          tandem: Tandem.OPT_OUT,
+          tandem: tandem.createTandem( tandemName ),
           numberDisplayOptions: {
             textOptions: {
               font: new PhetFont( 17 )