hook select plot series table into the layout

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

@@ -231,7 +231,8 @@ const timeSeriesGraph = function (elem) {
                 })));
 
     elem.call(link(plotSeriesSelectTable, createStructuredSelector({
-        availableTimeseries: availableTimeseriesSelector
+        availableTimeseries: availableTimeseriesSelector,
+        layout: layoutSelector
     })));
 
     elem.append('div')

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

@@ -72,10 +72,21 @@ const addSparkLine = function(svgSelection, {tsData}) {
  * a row changes the active parameter code.
  * @param  {Object} elem                d3 selection
  * @param  {Object} availableTimeseries Timeseries metadata to display
+ * @param  {Object} layout              layout as retrieved from the redux store
  */
-export const plotSeriesSelectTable = function (elem, {availableTimeseries}) {
+export const plotSeriesSelectTable = function (elem, {availableTimeseries, layout}) {
     elem.select('#select-timeseries').remove();
 
+    const smallScreenWidth = 481;
+    const screenSizeCheck = layout.width <= smallScreenWidth;
+
+    let columnHeaders;
+    if (screenSizeCheck) {
+        columnHeaders = ['Parameter Code', 'Description', 'Graph'];
+    } else {
+        columnHeaders = ['Parameter Code', 'Description', 'Now', 'Last Year', 'Median'];
+    }
+
     const table = elem
         .append('table')
             .attr('id', 'select-timeseries')
@@ -86,7 +97,7 @@ export const plotSeriesSelectTable = function (elem, {availableTimeseries}) {
     table.append('thead')
         .append('tr')
             .selectAll('th')
-            .data(['Parameter Code', 'Description', 'Graph'])
+            .data(columnHeaders)
             .enter().append('th')
                 .attr('scope', 'col')
                 .text(d => d);
@@ -112,39 +123,48 @@ export const plotSeriesSelectTable = function (elem, {availableTimeseries}) {
                             .attr('class', 'tooltip-item');
                 tr.append('td')
                     .text(parm => parm[1].description);
+                if (!screenSizeCheck) {
+                    tr.append('td')
+                        .html(parm => parm[1].currentYear ? '<i class="fa fa-check" aria-label="Current year data available"></i>' : '');
+                    tr.append('td')
+                        .html(parm => parm[1].previousYear ? '<i class="fa fa-check" aria-label="Previous year data available"></i>' : '');
+                    tr.append('td')
+                        .html(parm => parm[1].medianData ? '<i class="fa fa-check" aria-label="Median data available"></i>' : '');
+                }
                 tr.append('td')
                     .append('svg')
                     .attr('width', sparkLineDim.width.toString())
                     .attr('height', sparkLineDim.height.toString());
             });
 
+    if (screenSizeCheck) {
+        table.selectAll('div.tooltip-item').each(function() {
+            let selection = select(this);
+            selection.append('sup')
+                .append('i')
+                    .attr('class', 'fa fa-info-circle');
+            let tooltipContent = selection.append('div').attr('class', 'tooltip');
+            let tooltipTable = tooltipContent.append('table');
+            tooltipTable.append('caption').text('Available Data');
+            tooltipTable.append('thead')
+                .append('tr')
+                    .selectAll('th')
+                    .data(['Now', 'Last Year', 'Median'])
+                    .enter()
+                    .append('th')
+                        .attr('scope', 'col')
+                        .text(d => d);
 
-    table.selectAll('div.tooltip-item').each(function() {
-        let selection = select(this);
-        selection.append('sup')
-            .append('i')
-                .attr('class', 'fa fa-info-circle');
-        let tooltipContent = selection.append('div').attr('class', 'tooltip');
-        let tooltipTable = tooltipContent.append('table');
-        tooltipTable.append('caption').text('Available Data');
-        tooltipTable.append('thead')
-            .append('tr')
-                .selectAll('th')
-                .data(['Now', 'Last Year', 'Median'])
-                .enter()
-                .append('th')
-                    .attr('scope', 'col')
-                    .text(d => d);
-
-        let tableRow = tooltipTable.append('tr');
-        tableRow.append('td')
-            .html(d => d[1].currentYear ? '<i class="fa fa-check" aria-label="Current year data available"></i>' : '');
-        tableRow.append('td')
-            .html(d => d[1].previousYear ? '<i class="fa fa-check" aria-label="Previous year data available"></i>' : '');
-        tableRow.append('td')
-            .html(d => d[1].medianData ? '<i class="fa fa-check" aria-label="Median data available"></i>' : '');
+            let tableRow = tooltipTable.append('tr');
+            tableRow.append('td')
+                .html(d => d[1].currentYear ? '<i class="fa fa-check" aria-label="Current year data available"></i>' : '');
+            tableRow.append('td')
+                .html(d => d[1].previousYear ? '<i class="fa fa-check" aria-label="Previous year data available"></i>' : '');
+            tableRow.append('td')
+                .html(d => d[1].medianData ? '<i class="fa fa-check" aria-label="Median data available"></i>' : '');
 
-    });
+        });
+    }
     table.selectAll('tbody svg').each(function(d) {
         let selection = select(this);
         const parmCd = d[0];