Added showMedianStatsLabel to Redux store and use it to selectively display the median text labels.

assets/src/scripts/components/hydrograph/index.js

@@ -130,7 +130,7 @@ const plotLegend = function(elem, {displayItems, width}) {
 };
 
 
-const plotMedianPoints = function (elem, {visible, xscale, yscale, medianStatsData}) {
+const plotMedianPoints = function (elem, {visible, xscale, yscale, medianStatsData, showLabel}) {
     elem.select('#median-points').remove();
 
     if (!visible) {
@@ -155,20 +155,22 @@ const plotMedianPoints = function (elem, {visible, xscale, yscale, medianStatsDa
                 return yscale(d.value);
             });
 
-    container.selectAll('medianPointText')
-        .data(medianStatsData)
-        .enter()
-        .append('text')
-            .text(function(d) {
+    if (showLabel) {
+        container.selectAll('medianPointText').
+            data(medianStatsData).
+            enter().
+            append('text').
+            text(function(d) {
                 return d.label;
-            })
-            .attr('id', 'median-text')
-            .attr('x', function(d) {
+            }).
+            attr('id', 'median-text').
+            attr('x', function(d) {
                 return xscale(d.time) + 5;
-            })
-            .attr('y', function(d) {
+            }).
+            attr('y', function(d) {
                 return yscale(d.value);
             });
+    }
 };
 
 
@@ -213,7 +215,8 @@ const timeSeriesGraph = function (elem) {
                     visible: isVisibleSelector('medianStatistics'),
                     xscale: xScaleSelector('current'),
                     yscale: yScaleSelector,
-                    medianStatsData: pointsSelector('medianStatistics')
+                    medianStatsData: pointsSelector('medianStatistics'),
+                    showLabel: (state) => state.showMedianStatsLabel
                 })));
 
     elem.append('div')

assets/src/scripts/components/hydrograph/store.js

@@ -72,6 +72,12 @@ export const Actions = {
             medianStatistics
         };
     },
+    showMedianStatsLabel(show) {
+        return {
+            type: 'SHOW_MEDIAN_STATS_LABEL',
+            show
+        }
+    },
     resizeTimeseriesPlot(width) {
         return {
             type: 'RESIZE_TIMESERIES_PLOT',
@@ -147,6 +153,12 @@ export const timeSeriesReducer = function (state={}, action) {
                 }
             };
 
+        case 'SHOW_MEDIAN_STATS_LABEL':
+            return {
+                ...state,
+                showMedianStatsLabel : action.show
+            };
+
         case 'RESIZE_TIMESERIES_PLOT':
             return {
                 ...state,
@@ -178,11 +190,10 @@ export const configureStore = function (initialState) {
             compare: false,
             medianStatistics: false
         },
-        legendMarkers: {},
-        displayMarkers: [],
         title: '',
         desc: '',
         width: 800,
+        showMedianStatsLabel: false,
         ...initialState
     };