@cdc/core 4.23.3 → 4.23.5

package/styles/_series-list.scss

@@ -0,0 +1,92 @@
+&.cdc-map-outer-container .editor-panel .series-item,
+&.type-chart .editor-panel .series-item {
+  list-style: none;
+  position: relative;
+
+  $border: 1px solid #ccc;
+
+  @at-root .accordion:first-of-type .series-item__title {
+    border-top: $border;
+  }
+
+  @at-root .accordion:last-of-type .series-item__title {
+    border-bottom: $border;
+  }
+
+  .accordion__button {
+    border-bottom: unset;
+
+    &.hide-arrow:before {
+      display: none;
+    }
+  }
+
+  .accordion__panel {
+    border-left: $border;
+    border-right: $border;
+    padding: 10px;
+  }
+
+  .series-list__remove {
+    margin-left: auto;
+    margin-right: 20px;
+    border: 1px solid red;
+    border-radius: 10px;
+  }
+
+  .hide-arrow .series-list__remove {
+    margin-right: 0px;
+  }
+
+  label {
+    font-size: 0.8rem;
+    font-weight: normal;
+  }
+
+  .series-item__title {
+    width: 100%;
+    background-color: #f5f5f5;
+    border-right: $border;
+    border-left: $border;
+    display: block;
+    padding: 5px;
+
+    .accordion__button {
+      border-bottom: none !important;
+    }
+  }
+
+  li {
+    padding: 5px;
+  }
+
+  .series_item__title {
+    font-size: 12px;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  .series-item__dropdown {
+    display: block;
+    margin-bottom: 8px;
+  }
+
+  // chart series list
+  &--chart {
+    padding: 5px 5px 0;
+
+    .accordion__button {
+      display: flex;
+      padding-left: 5px !important;
+
+      .cove-icon {
+        padding-right: 5px;
+        margin-right: 10px;
+      }
+    }
+
+    &:last-child {
+      padding-bottom: 5px;
+    }
+  }
+}

package/styles/base.scss

@@ -52,6 +52,11 @@
 @import 'reset';
 @import 'variables';
 @import 'mixins';
+@import 'filters';
+
+body.post-type-cdc_visualization .visx-tooltip {
+  z-index: 1000000;
+}
 
 .cdc-open-viz-module {
   position: relative;
@@ -64,6 +69,7 @@
   @import 'data-table';
   @import 'global';
   @import 'button-section';
+  @import 'series-list';
 }
 
 $theme: (

package/styles/filters.scss

@@ -0,0 +1,122 @@
+.filters-section {
+  &__wrapper {
+    flex-wrap: wrap;
+    display: flex;
+    gap: 7px 15px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+
+  &__intro-text {
+    display: block;
+    width: 100%;
+  }
+
+  &__buttons {
+    width: 100%;
+    .apply {
+      margin-right: 10px;
+    }
+  }
+}
+
+// note the diff of section and no section above.
+// Can't use nested selectors with top level section overwrites
+section.filters-section {
+  // border: 1px solid #c7c7c7;
+  // padding: 10px;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  display: block !important;
+}
+
+div.single-filters {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 15px 0;
+
+  select {
+    width: auto !important;
+  }
+
+  label {
+    width: 100%;
+  }
+
+  &__tab-bar {
+    &:first-child {
+      border-top-left-radius: 15px;
+      border-bottom-left-radius: 15px;
+    }
+  }
+}
+
+.single-filters--dropdown {
+  width: auto;
+  display: flex;
+}
+
+.single-filters--tab {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+
+  .tab {
+    width: 25%;
+    min-height: 40px;
+    border: none;
+    padding: 0.5em 0;
+    background: none;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    margin-top: 5px;
+  }
+
+  .tab--active {
+    border-bottom: none;
+  }
+}
+
+.single-filters--pill {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+
+  .pill {
+    border: none;
+    width: 95%;
+    height: 60px;
+    background: none;
+    border-radius: 30px;
+    box-shadow: 0 2px 5px #d3d3d3;
+    vertical-align: middle;
+    margin-bottom: 15px;
+    margin-right: 10px;
+    margin-left: 10px;
+    white-space: break-spaces;
+    word-break: break-word;
+
+    &__wrapper {
+      width: 25%;
+    }
+  }
+}
+
+.single-filters__tab-bar {
+  background: #f2f2f2;
+  display: flex !important;
+  flex-wrap: wrap;
+  width: 100%;
+  border-radius: 15px;
+
+  button.button__tab-bar {
+    flex: 1 1 0px;
+    padding: 10px;
+    background: none;
+    transition: background 2s;
+    &--active {
+      background: #fff;
+      border-radius: 15px;
+    }
+  }
+}

package/styles/v2/themes/_color-definitions.scss

@@ -147,6 +147,55 @@ $theme: (
   }
 }
 
+// Charts filter styles
+.cdc-open-viz-module {
+  @each $theme-name, $theme-colors in $theme {
+    &.theme-#{$theme-name} {
+      .single-filters--tab .tab--active {
+        border: 1px solid string.unquote(nth($theme-colors, 1));
+        border-top: 3px solid string.unquote(nth($theme-colors, 1));
+        border-bottom: none;
+      }
+
+      .single-filters--tab .tab:not(.tab--active) {
+        border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
+      }
+
+      .single-filters--pill .pill--active {
+        background-color: string.unquote(nth($theme-colors, 1));
+        color: #fff;
+      }
+      .filters-section button.cove-button:not([disabled]) {
+        background-color: string.unquote(nth($theme-colors, 1)) !important;
+      }
+    }
+
+    .theme-#{$theme-name} {
+      .single-filters--tab .tab--active {
+        border: 1px solid string.unquote(nth($theme-colors, 1));
+        border-top: 3px solid string.unquote(nth($theme-colors, 1));
+        border-bottom: none;
+      }
+
+      .single-filters--tab .tab:not(.tab--active) {
+        border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
+      }
+
+      .single-filters--pill .pill--active {
+        background-color: string.unquote(nth($theme-colors, 1));
+        color: #fff;
+      }
+
+      .button__tab-bar--active {
+        outline: 2px solid string.unquote(nth($theme-colors, 1));
+      }
+      .apply:not([disabled]) {
+        background-color: string.unquote(nth($theme-colors, 1)) !important;
+      }
+    }
+  }
+}
+
 $baseColor: #333;
 $blue: #005eaa;
 $lightestGray: #f2f2f2;

package/helpers/cleanData.js

@@ -1,50 +0,0 @@
-/**
- * cleanData
- *
-// This cleans a data set by:
-// - removing commas and $ signs from any numbers to try to plot the point
-// - removing any data points that are NOT composed of of all digits (but allow a decimal point)
-// Without this the charts "break" and do not render
- *
- * Inputs: data as array, excludeKey indicates which key to use to NOT clean
- *                        Example: "Date" should not be cleaned if part of the data
- * 
- * Output: returns the cleanedData
- * 
- * Set testing = true if you need to see before and after data
- * 
- */
-export default function cleanData (data, excludeKey, testing = false) {
-    let cleanedupData = []
-    if (testing) console.log('## Data to clean=', data)
-    if (excludeKey === undefined) {
-      excludeKey = "Date"  // have a default value
-    }
-    data.forEach(function (d, i) {
-      if (testing) console.log("clean", i, " d", d);
-      let cleanedBar = {}
-      Object.keys(d).forEach(function (key) {
-        if (key === excludeKey) {
-          // pass thru
-          cleanedBar[key] = d[key]
-        } else {
-          // remove comma and dollar signs
-          if (testing) console.log("typeof d[key] is ", typeof d[key]);
-          let tmp = "";
-          if (typeof d[key] === 'string') {
-            tmp = d[key] !== null && d[key] !== '' ? d[key].replace(/[,\$]/g, '') : ''
-          } else {
-            tmp =  d[key] !== null && d[key] !== '' ? d[key] : ''
-          }
-          if ((tmp !== '' && tmp !== null && !isNaN(tmp)) || (tmp !== '' && tmp !== null && /\d+\.?\d*/.test(tmp))) {
-            cleanedBar[key] = tmp
-          } else { cleanedBar[key] = '' }
-          // if you get here, then return nothing to skip bad data point
-        }
-      })
-      if (testing) console.log("cleanedBar=", cleanedBar);
-      cleanedupData.push(cleanedBar)
-    })
-    if (testing) console.log('## cleanedData =', cleanedupData)
-    return cleanedupData
-  }