v2.3.0 (#65)

* initial released-prov mixed status for data ava chart

* mixed release, prov pattern scaling tweaks

* propagate ava chart updates to download form

* ga4 support, regen lib + assets

* clean up gtm data layer reference

* pull out analytics service for any custom ga events

* add UA events to service

* fix CodeQL identified escape shortcomings

* use only gtm, regen assets

* fix comment spelling

* rebuild availability chart key

* fix availability key selection item

* ava key display adjustment at certain viewports

* delineate ava release based on context

* ava key ui tweak, regen lib

* prepare v2.3.0

Author: sampsonj

lib/components/DataProductAvailability/AvailabilitySvgComponents.d.ts

@@ -18,6 +18,15 @@ export const CELL_ATTRS: {
         fill: string;
         stroke: string;
     };
+    'mixed-available-provisional': {
+        strokeWidth: string;
+        width: string;
+        height: string;
+        rx: string;
+        nudge: number;
+        fill: string;
+        stroke: string;
+    };
     'not available': {
         stroke: null;
         strokeWidth: null;

lib/components/DataProductAvailability/AvailabilitySvgComponents.js

@@ -78,14 +78,142 @@ HalfAndHalfPattern.propTypes = {
 HalfAndHalfPattern.defaultProps = {
   secondaryColor: '#ffffff'
 };
+var DiagHalfAndHalfPattern = function DiagHalfAndHalfPattern(props) {
+  var id = props.id,
+    color = props.color,
+    diagColor = props.diagColor,
+    diagColorFillOpacity = props.diagColorFillOpacity,
+    secondaryDiagColor = props.secondaryDiagColor;
+  var cellW = _AvailabilityUtils.SVG.CELL_WIDTH;
+  var cellH = _AvailabilityUtils.SVG.CELL_HEIGHT;
+  // Extends the bounds of the applied rectangle dimensions
+  // when computing coordinates. This will overlay the
+  // computed coordinate such that they extend beyond the actual bounds
+  // of the rectangle, to account for squared stroke end of line points
+  // so that there's no gaps with a sufficiently heavy stroke width.
+  // Setting this to 0 will disable to the extension and map directly
+  // onto the bounding box of the rectangle.
+  // When divided by 2, should result in a rational number.
+  var extendBoundsPadding = 0;
+  var w = _AvailabilityUtils.SVG.CELL_WIDTH + extendBoundsPadding;
+  var h = _AvailabilityUtils.SVG.CELL_HEIGHT + extendBoundsPadding;
+  // Nudge the half fill color to prevent background from initial
+  // line from top right corner consuming the color at normal
+  // viewing levels. Ensures it looks visually appropriate for half color
+  // fill and half diag line pattern.
+  // Will be based on initDist
+  var nudgeDiagFill = 1;
+  var numLines = 4;
+  // Distance of the diagonal of the rectangle
+  var diagLengthRaw = Math.sqrt(Math.pow(cellW, 2) + Math.pow(cellH, 2));
+  // Distance of initial line to top right corner, as opposed to starting
+  // at point (0, w)
+  var initDist = diagLengthRaw * 0.18;
+  // Distance of furthest potential end line to bottom left corner
+  var trailingDist = diagLengthRaw * 0.1;
+  // Distance of the diagonal of the rectangle
+  var diagLength = diagLengthRaw - (initDist + trailingDist);
+  // Distance between parallel lines
+  var diagLineGap = diagLength / numLines;
+  var diagLineStrokeWidth = (diagLength * 0.1).toFixed(2);
+  // Compute the initial x coordinate of the first line based on specified
+  // initial distance from top right corner
+  // 45 degree lines means perpendicular line to top right corner
+  // c^2 = a^2 + b^2 where a == b
+  // Find the initial x coordinate (y == 0) to derive linear function from
+  var initXCoordDist = w - Math.sqrt(2 * Math.pow(initDist, 2));
+  var coords = [];
+  // eslint-disable-next-line no-plusplus
+  var _loop = function _loop() {
+    // Vertical transformation of linear function scalar value
+    // As m == 1, use distance between parallel lines to compute hypotenuse
+    // of equilateral triangle which will be the vertical transformation scalar
+    // to apply to the linear function
+    // Then scale by line index for each line
+    var v = Math.sqrt(2 * Math.pow(diagLineGap, 2)) * i;
+    // Linear functions derived from initial X coordinate, known slope
+    var findY = function findY(x) {
+      return x - initXCoordDist + v;
+    };
+    var findX = function findX(y) {
+      return y + initXCoordDist - v;
+    };
+    var x1 = 0;
+    var y1 = findY(x1);
+    var x2 = w;
+    var y2 = findY(x2);
+    // Snap coordinates to bounding box
+    if (y1 < 0) {
+      x1 = findX(0);
+      y1 = 0;
+    }
+    if (y2 > h) {
+      x2 = findX(h);
+      y2 = h;
+    }
+    coords.push({
+      x1: (x1 - extendBoundsPadding / 2).toFixed(2),
+      y1: (y1 - extendBoundsPadding / 2).toFixed(2),
+      x2: (x2 - extendBoundsPadding / 2).toFixed(2),
+      y2: (y2 - extendBoundsPadding / 2).toFixed(2)
+    });
+  };
+  for (var i = 0; i < numLines; i++) {
+    _loop();
+  }
+  return /*#__PURE__*/_react.default.createElement("pattern", {
+    id: id,
+    x: 0,
+    y: 0,
+    width: 1,
+    height: 1,
+    patternUnits: "objectBoundingBox",
+    patternContentUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/_react.default.createElement("polygon", {
+    points: "0,0 0,1 1,1 1,0",
+    fill: secondaryDiagColor,
+    fillOpacity: diagColorFillOpacity
+  }), coords.map(function (coord, idx) {
+    return /*#__PURE__*/_react.default.createElement("line", {
+      // eslint-disable-next-line react/no-array-index-key
+      key: "DiagHalfAndHalfPatternKey-".concat(coord.x1, "-").concat(coord.y1, "-").concat(coord.x2, "-").concat(coord.y2, "-").concat(idx),
+      x1: coord.x1,
+      y1: coord.y1,
+      x2: coord.x2,
+      y2: coord.y2,
+      stroke: diagColor,
+      strokeWidth: diagLineStrokeWidth,
+      strokeLinecap: "square"
+    });
+  }), /*#__PURE__*/_react.default.createElement("polygon", {
+    points: "0,0 ".concat(cellW - nudgeDiagFill, ",0 ", 0, ",").concat(cellH),
+    fill: color
+  }));
+};
+DiagHalfAndHalfPattern.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  color: _propTypes.default.string.isRequired,
+  diagColor: _propTypes.default.string.isRequired,
+  diagColorFillOpacity: _propTypes.default.number.isRequired,
+  secondaryDiagColor: _propTypes.default.string
+};
+DiagHalfAndHalfPattern.defaultProps = {
+  secondaryDiagColor: '#ffffff'
+};
 var SvgDefs = function SvgDefs() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: "0px",
     height: "0px"
   }, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement(DiagLinesPattern, {
     id: "availableProvisionalPattern",
     color: _Theme.COLORS.NEON_BLUE[700],
-    secondaryColor: _Theme.COLORS.NEON_BLUE[100]
+    secondaryColor: _Theme.COLORS.NEON_BLUE[50]
+  }), /*#__PURE__*/_react.default.createElement(DiagHalfAndHalfPattern, {
+    id: "mixedAvailableProvisionalPattern",
+    color: _Theme.COLORS.NEON_BLUE[700],
+    diagColor: _Theme.COLORS.NEON_BLUE[700],
+    diagColorFillOpacity: 0.25,
+    secondaryDiagColor: _Theme.COLORS.NEON_BLUE[50]
   }), /*#__PURE__*/_react.default.createElement(DiagLinesPattern, {
     id: "beingProcessedPattern",
     color: _Theme.COLORS.NEON_BLUE[700]
@@ -118,6 +246,13 @@ var thinStrokeAttrs = {
   rx: "".concat(_AvailabilityUtils.SVG.CELL_RX * 1.5, "px"),
   nudge: 0.4
 };
+var midStrokeAttrs = {
+  strokeWidth: '1.15px',
+  width: "".concat(_AvailabilityUtils.SVG.CELL_WIDTH - 1.15, "px"),
+  height: "".concat(_AvailabilityUtils.SVG.CELL_HEIGHT - 1.15, "px"),
+  rx: "".concat(_AvailabilityUtils.SVG.CELL_RX * 1.25, "px"),
+  nudge: 0.60
+};
 var fatStrokeAttrs = {
   strokeWidth: '1.5px',
   width: "".concat(_AvailabilityUtils.SVG.CELL_WIDTH - 1.5, "px"),
@@ -140,7 +275,11 @@ var CELL_ATTRS = {
   'available-provisional': _extends({
     fill: 'url(#availableProvisionalPattern)',
     stroke: _Theme.COLORS.NEON_BLUE[700]
-  }, fatStrokeAttrs),
+  }, midStrokeAttrs),
+  'mixed-available-provisional': _extends({
+    fill: 'url(#mixedAvailableProvisionalPattern)',
+    stroke: _Theme.COLORS.NEON_BLUE[700]
+  }, thinStrokeAttrs),
   'not available': _extends({
     fill: _Theme.default.palette.grey[200]
   }, noStrokeAttrs),

lib/components/DataProductAvailability/AvailabilityUtils.d.ts

@@ -18,6 +18,10 @@ export const VALID_ENHANCED_STATUSES: {
         title: string;
         description: string;
     };
+    'mixed-available-provisional': {
+        title: string;
+        description: string;
+    };
     delayed: {
         title: string;
         description: string;
@@ -51,6 +55,7 @@ export const VALID_ENHANCED_STATUSES: {
         description: string;
     };
 };
+export function calcBasicRollupStatus(statuses: any): any;
 export function calcRollupStatus(statuses?: any[]): any;
 export namespace AvailabilityPropTypes {
     const basicSiteCodes: PropTypes.Requireable<(PropTypes.InferProps<{

lib/components/DataProductAvailability/AvailabilityUtils.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.calcRollupStatus = exports.VALID_ENHANCED_STATUSES = exports.TIME = exports.SVG_STYLES = exports.SVG = exports.AvailabilityPropTypes = void 0;
+exports.calcRollupStatus = exports.calcBasicRollupStatus = exports.VALID_ENHANCED_STATUSES = exports.TIME = exports.SVG_STYLES = exports.SVG = exports.AvailabilityPropTypes = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _moment = _interopRequireDefault(require("moment"));
 var _d3Transition = require("d3-transition");
@@ -25,13 +25,17 @@ var VALID_ENHANCED_STATUSES = {
     description: 'Data have been collected and will be published after processing has completed'
   },
   available: {
-    title: 'Available',
-    description: 'Data have been published and are available for download'
+    title: 'Release Available',
+    description: 'Data have been published and released. Data are available for download'
   },
   'available-provisional': {
-    title: 'Provisional Available',
+    title: 'Provisional',
     description: 'Provisional data have been published and are available for download'
   },
+  'mixed-available-provisional': {
+    title: 'Mixed',
+    description: 'Data have been published and are available for download. Some data are released and some data are provisional.'
+  },
   delayed: {
     title: 'Delayed',
     description: 'Data should be available for download but something has prevented publication'
@@ -66,6 +70,28 @@ var VALID_ENHANCED_STATUSES = {
   }
 };
 exports.VALID_ENHANCED_STATUSES = VALID_ENHANCED_STATUSES;
+var calcBasicRollupStatus = function calcBasicRollupStatus(statuses) {
+  if (!statuses) {
+    return null;
+  }
+  if (Array.from(statuses).some(function (s) {
+    return !Object.keys(VALID_ENHANCED_STATUSES).includes(s);
+  })) {
+    return null;
+  }
+  if (statuses.size === 0) {
+    return null;
+  }
+  if (statuses.size === 1) {
+    return Array.from(statuses)[0];
+  }
+  var hasTomb = statuses.has('tombstoned');
+  if (hasTomb) {
+    return 'tombstoned';
+  }
+  return statuses.has('available-provisional') ? 'mixed-available-provisional' : 'available';
+};
+exports.calcBasicRollupStatus = calcBasicRollupStatus;
 var calcRollupStatus = function calcRollupStatus() {
   var statuses = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   if (!Array.isArray(statuses)) {

lib/components/DataProductAvailability/BasicAvailabilityGrid.js

@@ -10,8 +10,8 @@ var _d3Selection = require("d3-selection");
 var _d3Drag = require("d3-drag");
 var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
 var _Theme = _interopRequireWildcard(require("../Theme/Theme"));
-var _AvailabilityUtils = require("./AvailabilityUtils");
 var _AvailabilitySvgComponents = require("./AvailabilitySvgComponents");
+var _AvailabilityUtils = require("./AvailabilityUtils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -584,7 +584,7 @@ function BasicAvailabilityGrid(config) {
     dataG.selectAll('g').data(rowKeys).join('g').attr('transform', getRowTranslation).each(function (rowKey, rowIdx, gNodes) {
       var rowData = data.rows[rowKey];
       var getCellAttr = function getCellAttr(month, attr) {
-        var status = rowData[month];
+        var status = (0, _AvailabilityUtils.calcBasicRollupStatus)(rowData[month]);
         return !_AvailabilitySvgComponents.CELL_ATTRS[status] ? _AvailabilitySvgComponents.CELL_ATTRS['not available'][attr] || null : _AvailabilitySvgComponents.CELL_ATTRS[status][attr] || null;
       };
       (0, _d3Selection.select)(gNodes[rowIdx]).selectAll('rect').data(function () {

lib/components/DataProductAvailability/BasicAvailabilityInterface.js

@@ -486,10 +486,22 @@ var BasicAvailabilityInterface = function BasicAvailabilityInterface(props) {
           status = 'available-provisional';
         }
       }
-      views.summary.rows.summary[month] = status;
-      views.sites.rows[siteCode][month] = status;
-      views.states.rows[stateCode][month] = status;
-      views.domains.rows[domainCode][month] = status;
+      if (!views.summary.rows.summary[month]) {
+        views.summary.rows.summary[month] = new Set();
+      }
+      if (!views.sites.rows[siteCode][month]) {
+        views.sites.rows[siteCode][month] = new Set();
+      }
+      if (!views.states.rows[stateCode][month]) {
+        views.states.rows[stateCode][month] = new Set();
+      }
+      if (!views.domains.rows[domainCode][month]) {
+        views.domains.rows[domainCode][month] = new Set();
+      }
+      views.summary.rows.summary[month].add(status);
+      views.sites.rows[siteCode][month].add(status);
+      views.states.rows[stateCode][month].add(status);
+      views.domains.rows[domainCode][month].add(status);
     });
   });
   dataProducts.forEach(function (product) {
@@ -513,7 +525,10 @@ var BasicAvailabilityInterface = function BasicAvailabilityInterface(props) {
           status = 'available-provisional';
         }
       }
-      views.products.rows[dataProductCode][month] = status;
+      if (!views.products.rows[dataProductCode][month]) {
+        views.products.rows[dataProductCode][month] = new Set();
+      }
+      views.products.rows[dataProductCode][month].add(status);
     });
   });
   if (!downloadContextIsActive) {
@@ -710,13 +725,7 @@ var BasicAvailabilityInterface = function BasicAvailabilityInterface(props) {
         display: 'flex',
         alignItems: 'center'
       }
-    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      variant: "h6",
-      className: classes.h6Small,
-      style: {
-        marginRight: _Theme.default.spacing(1.5)
-      }
-    }, "Key:"), /*#__PURE__*/_react.default.createElement(_BasicAvailabilityKey.default, {
+    }, /*#__PURE__*/_react.default.createElement(_BasicAvailabilityKey.default, {
       orientation: currentView === 'products' ? 'horizontal' : '',
       selectionEnabled: selectionEnabled,
       delineateRelease: delineateRelease,

lib/components/DataProductAvailability/BasicAvailabilityKey.d.ts

@@ -1,24 +1,21 @@
-/**
-   Main Function
-*/
+export default BasicAvailabilityKey;
 declare function BasicAvailabilityKey(props: any): JSX.Element;
 declare namespace BasicAvailabilityKey {
     namespace propTypes {
-        const orientation: PropTypes.Requireable<string>;
         const selectionEnabled: PropTypes.Requireable<boolean>;
         const delineateRelease: PropTypes.Requireable<boolean>;
         const availabilityStatusType: PropTypes.Requireable<string>;
+        const dialogOnly: PropTypes.Requireable<boolean>;
     }
     namespace defaultProps {
-        const orientation_1: string;
-        export { orientation_1 as orientation };
         const selectionEnabled_1: boolean;
         export { selectionEnabled_1 as selectionEnabled };
         const delineateRelease_1: boolean;
         export { delineateRelease_1 as delineateRelease };
-        const availabilityStatusType_1: null;
+        const availabilityStatusType_1: string;
         export { availabilityStatusType_1 as availabilityStatusType };
+        const dialogOnly_1: boolean;
+        export { dialogOnly_1 as dialogOnly };
     }
 }
-export default BasicAvailabilityKey;
 import PropTypes from "prop-types";