graph coloring complete

assets/src/scripts/monitoring-location/components/hydrograph/discrete-data.js

@@ -3,6 +3,10 @@ import {defineCircleMarker} from 'd3render/markers';
 const GW_LEVEL_RADIUS = 7;
 const GW_LEVEL_CLASS = 'gw-level-point';
 
+const adjustClassForApprovalCode = function(groundwaterPointData) {
+    return groundwaterPointData['qualifiers'][0];
+};
+
 /*
  * Render the ground water level symbols on the svg in their own group. If the group exists, remove
  * it before rendering again.
@@ -20,8 +24,9 @@ export const drawGroundwaterLevels = function(svg, {levels, xScale, yScale, enab
     }
 
     levels.forEach((level) => {
+        console.log('in drawGroundwaterLevels, with level: ', level)
         group.append('circle')
-            .attr('class', GW_LEVEL_CLASS)
+            .attr('class', `${GW_LEVEL_CLASS} approval-code-${adjustClassForApprovalCode(level).toLowerCase()}`)
             .attr('r', GW_LEVEL_RADIUS)
             .attr('cx', xScale(level.dateTime))
             .attr('cy', yScale(level.value));

assets/src/styles/components/hydrograph/_graph.scss

@@ -60,13 +60,21 @@ svg {
       opacity: $not-current-method-opacity;
     }
   }
-
+  /* This case will catch any groundwater approval codes that are not approved (including provisional)
+   and color them to match provisional.
+   */
   .gw-level-point {
     stroke: $default-time-series;
     stroke-width: 2px;
     fill: none;
   }
 
+  .gw-level-point.approval-code-a {
+    stroke: $approved-time-series;
+    stroke-width: 2px;
+    fill: none;
+  }
+
   .ts-compare {
     stroke-width: 1px;
     stroke: $default-time-series-compare;