@cdc/dashboard 4.24.5 → 4.24.7

package/examples/custom/css/respiratory.css

@@ -0,0 +1,236 @@
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .cove-dashboard-filters #filter-2,
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .cove-dashboard-filters label[for="filter-2"]{
+  display: none;
+}
+
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .cove-dashboard-filters {
+  max-width: 150px;
+  margin: 0.5em !important;
+  margin-bottom: 0 !important;
+  vertical-align: middle;
+}
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .cove-dashboard-filters:nth-child(3){
+  vertical-align: middle;
+}
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .cove-dashboard-filters:nth-child(3)::after{
+  content: 'Reset';
+  padding: .375rem .75rem;
+  font-size: 1rem;
+  color: #fff;
+  background-color: #005eaa;
+  border-radius: .1875rem;
+  cursor: pointer;
+}
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(1),
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(1) .dashboard-col {
+  margin-bottom: 0 !important;
+  display: block;
+}
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row.no-county:nth-child(1)::after {
+  content: 'Please select "All" to see values for your state.';
+  display: block;
+  margin-left: .5em;
+margin-bottom: 1em;
+}
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row.no-county:nth-child(1) .dashboard-col::after {
+  content: 'County-level data unavailable';
+  display: block;
+  font-weight: bold;
+  margin-left: .5em;
+}
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row.no-counties:nth-child(1) .dashboard-col::after {
+  content: 'County level displays are not available for this state/territory';
+  display: block;
+  font-weight: bold;
+  margin-left: .5em;
+margin-bottom: 1em;
+}
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4){
+  display: none !important;
+  justify-content: normal !important;
+    column-gap: normal !important;
+  position: relative;
+}
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4) .cove-component__content {
+  padding-top: 0;
+  border: 1px solid gray !important;
+    border-top: none !important;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+  
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4) header {
+  border: 1px solid gray;
+  background-color: lightgray;
+  color: black;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+}
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4) header::before {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border-radius: .5em;
+  border: 1px solid lightgray;
+  margin-right: .5em;
+}
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4) .dashboard-col:nth-child(1) header::before {
+  display: none;
+}
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4) .dashboard-col:nth-child(2) header::before {
+  background-color: rgb(244, 128, 42);
+}
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4) .dashboard-col:nth-child(3) header::before {
+  background-color: rgb(15, 102, 200);
+}	
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4) .dashboard-col:nth-child(4) header::before {
+  background-color: rgb(148, 3, 111);
+}
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4) .dashboard-col:nth-child(1) p::before {
+  display: none;
+}
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4) p {
+  padding-top: 1.5em;
+  min-height: 3.5em;
+}
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4) p::before {
+  content: '\2192';
+  font-weight: 900;
+    font-size: xx-large;
+  display: inline-block;
+  color: rgb(15, 102, 200);
+  vertical-align: top;
+  line-height: .5em;
+}
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4) p.increasing::before {
+  transform: rotate(-45deg);
+}
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4) p.decreasing::before {
+  transform: rotate(45deg);
+}    
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(4)::before {
+  content: 'County Trends';
+  position: absolute;
+    top: -2em;
+}  
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) {
+  display: block;
+}  
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) .dashboard-col {
+  display: inline-block;
+  vertical-align: top;
+}  
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) .dashboard-col:nth-child(1) {
+  width: calc(150px + 3em);
+margin-left: -.5em;
+} 
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) .dashboard-col:nth-child(1)::before {
+  position: relative;
+  content: 'Selection:';
+  margin-left: 1rem;
+  top: .6em;
+  font-weight: bold;
+} 
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) .dashboard-col:nth-child(2) {
+  width: calc(100% - 150px - 4.5em);
+}
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) .dashboard-col:nth-child(2) .theme-blue {
+  background-color: #EEE;
+}   
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) .dashboard-col:nth-child(2) h2 {
+  color: black !important;
+}
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) .dashboard-col:nth-child(2) header {
+  background: none;
+  border: none;
+  color: black;
+  position: relative;
+}
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) .dashboard-col:nth-child(2) header.show-modal::before {
+  content: 'x';
+  position: absolute;
+  right: calc(5% + 1em);
+  top: -150px;
+  z-index: 1;
+  cursor: pointer;
+}
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) .dashboard-col:nth-child(2) header.show-modal::after {
+  content: 'Groups of counties often share healthcare resources. The data shown for the selected county include emergency department visit data collected for the entire area (which may include multiple counties).';
+  position: absolute;
+  bottom: calc(100% + 1em);
+  right: 5%;
+  padding: .5em 2em 5em .5em;
+  height: 140px;
+  width: 250px;
+  background-color: rgb(243,247,251);
+  color: rgb(56,100,151);
+  border: 1px solid rgb(56,100,151);
+  border-radius: 5px;
+  max-width: 80%;
+  font-size: .8em;
+}
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) .dashboard-col:nth-child(2) header h2::after {
+  content: 'More Info';
+  cursor: pointer;
+  text-decoration: underline;
+  color:#0000EE; 
+  float: right;
+  font-weight: normal;
+  margin-left: 1em;
+}
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) .dashboard-col:nth-child(2) header div {
+  font-weight: bold;
+}
+
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row.state-level:nth-child(4)::before {
+  content: 'State Trends';
+}   
+  
+div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .margin-left-href {
+  display: none;
+}    
+
+@media screen and (max-width: 767px) {
+  div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) .dashboard-col {
+    width: 100% !important;
+  }
+
+  div[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"] .dashboard-row:nth-child(2) .dashboard-col:nth-child(2) {
+    margin-bottom: 2em;
+  }
+}

package/examples/custom/js/respiratory.js

@@ -0,0 +1,242 @@
+$(document).ready(function() {
+  function trackMetric(interactionValue){
+    if ( window.hasOwnProperty( '_satellite' ) ) {
+      var dataObject = {};
+      var _satellite = window._satellite;
+      var eventLabel = 'respiratory-dasboard-chart';
+      var eventValue = interactionValue.replace(/ /g, '-').toLowerCase();
+
+ 
+
+      dataObject.ch = 'OADC';
+      dataObject.pageName = document.title;
+      dataObject.label = eventLabel;
+      dataObject.interactionType = 'o';
+      dataObject.interactionValue = 'ci-' + eventLabel + ': ' + eventValue;
+
+ 
+
+      _satellite.track( 'interaction', dataObject );
+    }
+  }
+
+  function onSelectChange(e){
+    trackMetric('state-select-' + $(e.target).find('option:selected').text());
+    if(e.target.id === 'filter-0'){
+      setTimeout(function(){
+        var $countySelect = $viz.find('#filter-1');
+        var select = $countySelect[0];
+        $countySelect.val('All');
+        Object.getOwnPropertyDescriptor(window.HTMLSelectElement.prototype, 'value').set.call(select, 'All');
+        select.dispatchEvent(new Event('change', { bubbles: true}));
+      }, 50);
+    }
+  }
+
+  function onMoreInfoClick(e){
+    if(!e.keyCode || e.keyCode === 13){
+      var $moreInfoLink = $viz.find('.dashboard-row:nth-child(2) .dashboard-col:nth-child(2) header');
+      if($moreInfoLink.hasClass('show-modal')){
+        $moreInfoLink.removeClass('show-modal');
+      } else {
+        $moreInfoLink.addClass('show-modal');
+      }
+    }
+  }
+
+  function onResetClick(e){
+    if(!e.keyCode || e.keyCode === 13){
+      var $stateSelect = $viz.find('#filter-0');
+      var select = $stateSelect[0];
+      $stateSelect.val('United States');
+      Object.getOwnPropertyDescriptor(window.HTMLSelectElement.prototype, 'value').set.call(select, 'United States');
+      select.dispatchEvent(new Event('change', { bubbles: true}));
+    }
+  }
+
+  var $viz = $('.wcms-viz-container[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"]')
+
+  var observer = new MutationObserver(function(mutations, observer) {
+    var $select = $viz.find('select');
+    if($select.length > 0){
+      $select.off('change', onSelectChange)
+      $select.on('change', onSelectChange)
+    }
+
+    var $resetButton = $viz.find('.cove-dashboard-filters:nth-child(3)');
+    if($resetButton.length > 0){
+      $resetButton.off('click keypress', onResetClick)
+      $resetButton.on('click keypress', onResetClick)
+    }
+
+    var $moreInfoLink = $viz.find('.dashboard-row:nth-child(2) .dashboard-col:nth-child(2) header');
+    if($moreInfoLink.length > 0){
+      $moreInfoLink.off('click keypress', onMoreInfoClick)
+      $moreInfoLink.on('click keypress', onMoreInfoClick)
+    }
+  });
+
+  if($viz.length > 0){
+    observer.observe($viz[0], {
+      subtree: true,
+      attributes: true
+    });
+  }
+});
+
+$(document).ready(function() { 
+  var $viz = $('.wcms-viz-container[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"');
+  var hasStateChanged = false;
+  var hasCountyChanged = false;
+  
+  function onMutation(mutations, observer) {
+    var $stateSelect = $viz.find('#filter-0');
+    var $countySelect = $viz.find('#filter-1');
+
+    var hashVal = window.location.hash ? decodeURIComponent(window.location.hash.replace('#', '')) : '';
+    var stateVal
+    var countyVal
+    if(hashVal.indexOf(',') !== -1){
+      stateVal = hashVal.split(',')[0]
+      countyVal = hashVal.split(',')[1]
+    } else {
+      stateVal = hashVal
+    }
+    
+    if(stateVal === 'District Of Columbia') stateVal = 'District of Columbia'; 
+    
+    if(stateVal && !hasStateChanged && $stateSelect.length > 0){
+      var options = $stateSelect.find('option').toArray().map(el => el.value ? el.value.toLowerCase() : '');
+      if(stateVal && options.length > 0 && options.indexOf(stateVal.toLowerCase()) !== -1){
+        var select = $stateSelect[0];
+        $stateSelect.val(stateVal);
+        Object.getOwnPropertyDescriptor(window.HTMLSelectElement.prototype, 'value').set.call(select, stateVal);
+        select.dispatchEvent(new Event('change', { bubbles: true}));
+        $viz[0].scrollIntoView();
+
+        hasStateChanged = true;
+      }
+    }
+    if(countyVal && !hasCountyChanged && hasStateChanged && $countySelect.length > 0){
+      var options = $countySelect.find('option').toArray().map(el => el.value ? el.value.toLowerCase() : '');
+      if(options.length > 0 && options.indexOf(countyVal.toLowerCase()) !== -1){
+        var select = $countySelect[0];
+        $countySelect.val(countyVal);
+        Object.getOwnPropertyDescriptor(window.HTMLSelectElement.prototype, 'value').set.call(select, countyVal);
+        select.dispatchEvent(new Event('change', { bubbles: true}));
+        $viz[0].scrollIntoView();
+
+        hasCountyChanged = true;
+      }
+
+    }
+  }
+
+  if($viz.length > 0){
+    onMutation();
+
+    var observer = new MutationObserver(onMutation);
+
+    observer.observe($viz[0], {
+      subtree: true,
+      attributes: true
+    });
+  }
+});
+
+$(document).ready(function() {
+  var suppressedFlags;
+  var $viz = $('.wcms-viz-container[data-config-url="/respiratory-viruses/modules/ed-visits-county-file.json"]')
+  
+  if($viz.length > 0){
+    $.get("https://www.cdc.gov/wcms/vizdata/Respitory_Viruses/NSSPSubStateOptOut.json", function( data ) {
+      suppressedFlags = data;
+    });
+    
+    setInterval(function(){
+      var $select = $viz.find('#filter-0');
+      var $countySelect = $viz.find('#filter-1');
+      var $targetSelect = $viz.find('#filter-2');
+      
+      if($select.val() !== $targetSelect.val()){
+        setTimeout(function(){
+            var targetSelect = $targetSelect[0];
+                $targetSelect.val($select.val()).trigger('change');
+                Object.getOwnPropertyDescriptor(window.HTMLSelectElement.prototype, 'value').set.call(targetSelect, $select.val());
+                targetSelect.dispatchEvent(new Event('change', { bubbles: true}));
+          $select.val($select.val()) 
+          
+          }, 50);
+      }
+    }, 200);
+  
+    var observer = new MutationObserver(function(mutations, observer) {
+      var $select = $viz.find('#filter-0');
+      var $countySelect = $viz.find('#filter-1');
+      var $targetSelect = $viz.find('#filter-2');	  
+      
+      if($countySelect.find('option').length === 1 && $select.val() !== 'District of Columbia' && $select.val() !== 'United States'){
+        $viz.find('.dashboard-row:nth-child(1)').addClass('no-counties');
+        $viz.find('.dashboard-row:nth-child(4)').removeClass('county-level').addClass('state-level');
+      } else {
+        $viz.find('.dashboard-row:nth-child(1)').removeClass('no-counties');
+        $viz.find('.dashboard-row:nth-child(4)').removeClass('state-level').addClass('county-level');
+      }
+      
+      if(suppressedFlags){
+        var suppressedNode = suppressedFlags.find(function(d){
+              if(d['geography'] === $select.val() && d['county'] === $countySelect.val()){
+          return true
+          }
+            });
+        if(suppressedNode && suppressedNode['is_hsa_opt_out'] === 'true'){
+          $viz.find('.cdc-chart-inner-container').hide()
+          $viz.find('.dashboard-row:nth-child(1)').addClass('no-county');
+        } else {
+          $viz.find('.dashboard-row:nth-child(1)').removeClass('no-county');
+          $viz.find('.cdc-chart-inner-container').show()
+        }
+      } else {
+          $viz.find('.dashboard-row:nth-child(1)').removeClass('no-county');
+        $viz.find('.cdc-chart-inner-container').show()
+      }
+      
+      var countyAll = $countySelect.find('option[value="All"]')
+      if(countyAll.length === 1 && countyAll.index() !== 0){
+        countyAll.remove();
+        $countySelect.prepend(countyAll);
+      }
+      
+      var stateAll = $select.find('option[value="United States"]')
+      if(stateAll.length === 1 && stateAll.index() !== 0){
+        stateAll.remove();
+        $select.prepend(stateAll);
+      }
+      
+      $viz.find('.dashboard-row:nth-child(4) p').each(function(index, el){
+        var className = el.innerText.trim().toLowerCase().replace(' ', '-');
+        if(!$(el).hasClass(className)){
+          $(el).removeClass('increasing decreasing')
+          $(el).addClass(className);
+        }
+        })
+      
+      if($viz.find('.dashboard-row:nth-child(4) .dashboard-col').length === 3){
+        $viz.find('.dashboard-row:nth-child(4)').prepend('<div class="dashboard-col dashboard-col-4"><div class="cove theme-blue "><header class="cove-component__header theme-blue " style="font-size: 16px;">Respiratory Illness</header><div class="cove-component__content component--has-title no-borders"><div class="cove-component__content-wrap"><p class="decreasing" style="font-size: 16px;">Weekly Trend</p></div></div></div></div>');
+      }
+
+      if($viz.find('.dashboard-row:nth-child(2) .dashboard-col:nth-child(2) header').length > 0 && !$viz.find('.dashboard-row:nth-child(2) .dashboard-col:nth-child(2) header').attr('tabindex')){
+        $viz.find('.dashboard-row:nth-child(2) .dashboard-col:nth-child(2) header').attr('tabindex', '0');
+      }
+
+      if($viz.find('.cove-dashboard-filters:nth-child(3)').length > 0 && !$viz.find('.cove-dashboard-filters:nth-child(3)').attr('tabindex')){
+        $viz.find('.cove-dashboard-filters:nth-child(3)').attr('tabindex', '0');
+      }
+    });
+  
+    observer.observe($viz[0], {
+      subtree: true,
+      attributes: true
+    });
+  }
+});