@cdc/core 4.24.12 → 4.25.2-25

package/helpers/isRightAlignedTableValue.js

@@ -0,0 +1,14 @@
+import { footnotesSymbols } from '@cdc/core/helpers/footnoteSymbols'
+
+const numericStrings = ['N/A', 'NA', ''].concat(footnotesSymbols.map(s => s[0]))
+
+export default function isRightAlignedTableValue(value = '') {
+  if (!value) return false
+  if (typeof value === 'number') {
+    return !Number.isNaN(value)
+  }
+  if (typeof value === 'string') {
+    return numericStrings.includes(value) || /^[\$\d\.\%\,\-\s\(\)CI]*$/.test(value)
+  }
+  return false
+}

package/helpers/missingRequiredSections.ts

@@ -0,0 +1,20 @@
+export const missingRequiredSections = config => {
+  if (config.visualizationType === 'Sankey') return false // skip checks for now
+  if (config.visualizationType === 'Forecasting') return false // skip required checks for now.
+  if (config.visualizationType === 'Forest Plot') return false // skip required checks for now.
+  if (config.visualizationType === 'Pie') {
+    if (undefined === config?.yAxis.dataKey) {
+      return true
+    }
+  } else {
+    if ((undefined === config?.series || false === config?.series.length > 0) && !config?.dynamicSeries) {
+      return true
+    }
+  }
+
+  if (!config.xAxis.dataKey) {
+    return true
+  }
+
+  return false
+}

package/helpers/queryStringUtils.ts

@@ -38,7 +38,14 @@ export function updateQueryString(queryParams) {
 }
 
 export function updateQueryParam(key: string, value: number | string) {
+  if (!key) return
   const queryParams = getQueryParams()
   queryParams[key] = value
   updateQueryString(queryParams)
 }
+
+export function removeQueryParam(key: string) {
+  const queryParams = getQueryParams()
+  delete queryParams[key]
+  updateQueryString(queryParams)
+}

package/helpers/tests/addValuesToFilters.test.ts

@@ -2,6 +2,7 @@ import _ from 'lodash'
 import { VizFilter } from '../../types/VizFilter'
 import { addValuesToFilters } from '../addValuesToFilters'
 import { describe, it, expect, vi } from 'vitest'
+import { FILTER_STYLE } from '@cdc/dashboard/src/types/FilterStyles'
 
 describe('addValuesToFilters', () => {
   const parentFilter = { columnName: 'parentColumn', id: 11, active: 'apple', values: [] } as VizFilter
@@ -26,6 +27,19 @@ describe('addValuesToFilters', () => {
     expect(newFilters2[2].values).toEqual([3, 1, 4])
     expect(newFilters2[1].values).toEqual([])
   })
+  it('adds filter values based on parent queued active values', () => {
+    const filtersCopy = _.cloneDeep([{ ...parentFilter, queuedActive: 'pear' }, childFilter, parentFilter2])
+    const newFilters2 = addValuesToFilters(filtersCopy, data)
+    expect(newFilters2[0].values).toEqual(['apple', 'pear'])
+    expect(newFilters2[2].values).toEqual([3, 1, 4])
+    expect(newFilters2[1].values).toEqual([])
+
+    filtersCopy[0].queuedActive = 'apple'
+    const newFilters = addValuesToFilters(filtersCopy, data)
+    expect(newFilters[0].values).toEqual(['apple', 'pear'])
+    expect(newFilters[2].values).toEqual([3, 1, 4])
+    expect(newFilters[1].values).toEqual(['b'])
+  })
   it('works when data is an object', () => {
     const filtersCopy = _.cloneDeep(filters)
     const newFilters = addValuesToFilters(filtersCopy, { '0': data })
@@ -36,7 +50,11 @@ describe('addValuesToFilters', () => {
     //expect(newFilters[1].values).toEqual([])
   })
   it('works for nested dropdowns', () => {
-    const nestedParentFilter = { ...parentFilter, subGrouping: { columnName: 'childColumn' } }
+    const nestedParentFilter = {
+      ...parentFilter,
+      filterStyle: FILTER_STYLE.nestedDropdown,
+      subGrouping: { columnName: 'childColumn' }
+    }
     const newFilters = addValuesToFilters([nestedParentFilter], data)
     expect(newFilters[0].values).toEqual(['apple', 'pear'])
     expect(newFilters[0].subGrouping.valuesLookup).toEqual({ apple: { values: ['a', 'b'] }, pear: { values: ['c'] } })

package/helpers/useDataVizClasses.ts

@@ -1,3 +1,6 @@
+import useResizeObserver from '@cdc/map/src/hooks/useResizeObserver'
+import { isBelowBreakpoint } from './viewports'
+
 export default function useDataVizClasses(config, viewport = null) {
   const {
     legend,
@@ -77,16 +80,17 @@ export default function useDataVizClasses(config, viewport = null) {
   ]
 
   const usePadding = !legend?.hideBorder
+  const legendPadding = `m${isBelowBreakpoint('md', viewport) ? 't' : ''}-3`
 
   const legendClasses = {
     aside: legendOuterClasses,
-    section: ['legend-container', usePadding ? 'legend-padding' : ''],
+    section: ['legend-container', usePadding ? legendPadding : ''],
     ul: getUlClasses(),
     li: ['single-legend-item', 'legend-container__li'],
-    title: ['legend-container__title'],
-    description: ['legend-container__description'],
+    title: ['legend-container__title fw-bold'],
+    description: ['legend-container__description mt-2'],
     div: [legend?.position === 'bottom' && legend?.singleRow ? 'shape-container single-row' : 'shape-container'],
-    resetButton: ['legend-container__reset-button']
+    showAllButton: ['legend-container__reset-button']
   }
 
   return { innerContainerClasses, contentClasses, lineDatapointClass, sparkLineStyles, legendClasses }

package/helpers/ver/4.24.10.ts

@@ -34,12 +34,24 @@ export const setXAxisLabelOffsetToZero = newConfig => {
   newConfig.xAxis.labelOffset = 0
 }
 
+export const defineFilterStyles = newConfig => {
+  if (newConfig.filters) {
+    newConfig.filters = newConfig.filters.map(filter => {
+      if (!filter.filterStyle) {
+        filter.filterStyle = 'dropdown'
+      }
+      return filter
+    })
+  }
+}
+
 const update_4_24_10 = config => {
   const ver = '4.24.10'
   const newConfig = _.cloneDeep(config)
   setXAxisLabelOffsetToZero(newConfig)
   changePivotColumns(newConfig)
   removeMultiSelectPropFromMultiselect(newConfig)
+  defineFilterStyles(newConfig)
   newConfig.version = ver
   return newConfig
 }

package/helpers/ver/4.24.11.ts

@@ -0,0 +1,18 @@
+import _ from 'lodash'
+
+const addColorMigration = config => {
+  // add new property
+  config.migrations = config.migrations || {}
+  config.migrations.addColorMigration = true
+  return config
+}
+
+const update_4_24_11 = config => {
+  const ver = '4.24.11'
+  const newConfig = _.cloneDeep(config)
+  addColorMigration(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_24_11

package/helpers/ver/4.24.7.ts

@@ -4,6 +4,21 @@ import { MultiDashboardConfig } from '@cdc/dashboard/src/types/MultiDashboard'
 import { AnyVisualization } from '../../types/Visualization'
 import versionNeedsUpdate from './versionNeedsUpdate'
 
+/**
+ * Migrates the dashboard configuration to the new format.
+ *
+ * This function performs the following transformations:
+ * - Removes `autoLoad` and `defaultValue` from `apiFilter` in shared filters.
+ * - Updates visualizations to remove `hide` and set `sharedFilterIndexes`.
+ * - Renames visualization type `filter-dropdowns` to `dashboardFilters`.
+ * - Ensures `sharedFilterIndexes` and `filterBehavior` are set for `dashboardFilters`.
+ * - Adds a new `dashboardFilters` visualization if there are shared filters but no `dashboardFilters` visualization.
+ * - Updates rows to include the new `dashboardFilters` visualization.
+ * - Removes deprecated `filterBehavior` from the configuration.
+ *
+ * @param {object} config - The dashboard configuration object to migrate.
+ * @returns {object} The migrated dashboard configuration object.
+ */
 export const dashboardFiltersMigrate = config => {
   if (!config.dashboard) return config
   const dashboardConfig = config as MultiDashboardConfig
@@ -52,7 +67,10 @@ export const dashboardFiltersMigrate = config => {
     newVisualizations[vizKey] = viz
   })
 
-  if (config.dashboard.sharedFilters.length && !Object.values(newVisualizations).find((v: AnyVisualization) => v.type === 'dashboardFilters')) {
+  if (
+    config.dashboard.sharedFilters.length &&
+    !Object.values(newVisualizations).find((v: AnyVisualization) => v.type === 'dashboardFilters')
+  ) {
     const newViz = {
       type: 'dashboardFilters',
       visualizationType: 'dashboardFilters',

package/helpers/ver/4.25.1.ts

@@ -0,0 +1,18 @@
+import _ from 'lodash'
+
+const removeTerritoriesLabel = config => {
+  if (config.general?.territoriesLabel) {
+    delete config.general.territoriesLabel
+  }
+  return config
+}
+
+const update_4_25_1 = config => {
+  const ver = '4.25.1'
+  const newConfig = _.cloneDeep(config)
+  removeTerritoriesLabel(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_25_1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.24.12",
+  "version": "4.25.2-25",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -34,7 +34,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "347414f1da4b0e9bf2f22a7b59335deccf0b2d9c",
+  "gitHead": "f00bd8a0fc746def7cc23b91ef49a03a3ceac65e",
   "devDependencies": {
     "sass": "^1.79.4"
   }

package/styles/_button-section.scss

@@ -17,6 +17,7 @@
   display: flex;
   justify-content: flex-end;
   width: 100%;
+  line-height: 1;
   &.brush-active {
     margin-top: 2em;
   }
@@ -24,11 +25,7 @@
     margin-right: 10px;
   }
   & a {
-    font-size: 16px;
-  }
-  margin-top: 20px;
-  &.below-table {
-    margin-top: 5px;
+    font-size: var(--download-link-font-size);
   }
 }
 

package/styles/_global-variables.scss

@@ -81,18 +81,28 @@ $colors: (
 @include theme();
 
 :root {
+  // Spacing
   --editorContentPadding: 30px;
   --editorWidth: 350px;
+  --space-between-legend-item-rows: 1rem;
+  --space-between-legend-item-columns: 1.5rem;
+  // Breakpoints
   --breakpoint-xs: 480px;
   --breakpoint-sm: 768px;
   --breakpoint-md: 960px;
   --breakpoint-lg: 1170px;
   --breakpoint-xl: 1280px;
-  --font-size: 17px;
-}
-
-@media (max-width: 576px) {
-  :root {
-    --font-size: 13px;
-  }
+  // Font
+  --app-font-main: 'Nunito', sans-serif;
+  --app-font-secondary: 'Poppins', sans-serif;
+  // Font sizes
+  --legend-title-font-size: 1rem;
+  --legend-description-font-size: 1rem;
+  --legend-item-font-size: 0.889rem;
+  --download-link-font-size: 0.772rem;
+  --filter-select-font-size: 0.833rem;
+  --filter-label-font-size: 0.889rem;
+  --filter-buttons-font-size: 0.889rem;
+  --superTitle-font-size: 0.833rem;
+  --title-font-size: 1.222rem;
 }

package/styles/_global.scss

@@ -156,17 +156,11 @@ textarea {
 
 section.introText {
   width: 100%;
-  margin-bottom: 25px;
 }
 
 section.footnotes {
-  border-top: 1px solid #ddd;
-  margin-top: 20px;
-  padding: 15px;
-}
-
-.cdc-chart-inner-container .subtext {
-  margin-top: 20px;
+  border-top: 1px solid var(--cool-gray-10);
+  width: 100%;
 }
 
 .margin-left-href {
@@ -182,14 +176,16 @@ section.footnotes {
   }
 }
 
-
 // after migration to TP5 this declaration should be removed and all references
 // to it should be replaced with .form-select
 .cove-form-select {
+  font-family: var(--app-font-secondary);
+  font-weight: 300;
+  font-size: var(--filter-select-font-size);
   display: block;
   width: 100%;
   padding: 0.375rem 0.75rem;
   border-radius: 0.25rem;
-  border: 1px solid var(--lightGray);
-  color: var(--darkGray);
-}
+  border: 1px solid var(--cool-gray-10);
+  color: var(--cool-gray-90);
+}

package/styles/_reset.scss

@@ -1,12 +1,11 @@
 .cdc-open-viz-module {
   margin: 0;
-  font: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans,
-    Helvetica Neue, Fira Sans, sans-serif;
+  font-family: var(--app-font-main);
+  font-size: 1em;
+  line-height: 1.5;
   font-weight: 400;
   font-style: normal;
   text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  color: #111;
 
   // match cdc site outline
   :focus,
@@ -90,7 +89,7 @@
     margin: 0;
     padding: 0;
     border: 0;
-    font-family: sans-serif;
+    font-family: var(--app-font-main);
     font-weight: normal;
     vertical-align: baseline;
   }

package/styles/_typography.scss

@@ -1,20 +0,0 @@
-&.font-small {
-  .chart-container {
-    font-size: 0.9em !important;
-  }
-}
-
-&.font-medium {
-  font-size: 1em !important;
-}
-
-&.font-large {
-  .chart-container {
-    font-size: 1.1em !important;
-  }
-}
-
-.subtext {
-  font-style: italic;
-  font-size: 0.9em !important;
-}

package/styles/_variables.scss

@@ -61,6 +61,3 @@ $amber-primary: #fbab18 !default;
 $amber-secondary: #ffd54f !default;
 $amber-tertiary: #ffecb3 !default;
 $amber-quaternary: #fff7e1 !default;
-
-/// Fonts
-$font-small: 0.7em;

package/styles/base.scss

@@ -65,12 +65,7 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
 
 .cdc-open-viz-module {
   position: relative;
-  color: $baseColor;
-  font-size: 14px !important;
   line-height: 1.4;
-  @include breakpointClass(md) {
-    font-size: 16px !important;
-  }
   @import 'global';
   @import 'button-section';
   @import 'series-list';
@@ -153,4 +148,48 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
       '#ebf7f5'
     )
   );
+
+  // These are required because Chronic has pages that still use TP4 and these Bootstrap5 margin classes aren't defined on those pages
+  .me-0 {
+    margin-right: 0 !important;
+  }
+  .me-1 {
+    margin-right: 0.25rem !important;
+  }
+  .me-2 {
+    margin-right: 0.5rem !important;
+  }
+  .me-3 {
+    margin-right: 1rem !important;
+  }
+  .me-4 {
+    margin-right: 1.5rem !important;
+  }
+  .me-5 {
+    margin-right: 3rem !important;
+  }
+  .me-auto {
+    margin-right: auto !important;
+  }
+  .ms-0 {
+    margin-left: 0 !important;
+  }
+  .ms-1 {
+    margin-left: 0.25rem !important;
+  }
+  .ms-2 {
+    margin-left: 0.5rem !important;
+  }
+  .ms-3 {
+    margin-left: 1rem !important;
+  }
+  .ms-4 {
+    margin-left: 1.5rem !important;
+  }
+  .ms-5 {
+    margin-left: 3rem !important;
+  }
+  .ms-auto {
+    margin-left: auto !important;
+  }
 }

package/styles/cove-main.scss

@@ -3,4 +3,4 @@
 @import 'v2/themes/color-definitions';
 @import 'variables';
 @import 'v2/components/ui/tooltip';
-@import 'v2/main.scss'
+@import 'v2/main.scss';

package/styles/filters.scss

@@ -2,14 +2,12 @@
   &__wrapper {
     flex-wrap: wrap;
     display: flex;
-    gap: 7px 15px;
-    margin-top: 15px;
-    margin-bottom: 15px;
+    gap: 18px 27px;
     label {
       display: inherit;
       margin-bottom: 5px;
-      font-weight: 600;
-      font-size: 16px;
+      font-weight: 700;
+      font-size: var(--filter-label-font-size);
     }
   }
 
@@ -20,6 +18,7 @@
 
   &__buttons {
     width: 100%;
+    font-size: var(--filter-buttons-font-size);
     .apply {
       margin-right: 10px;
     }
@@ -27,9 +26,9 @@
 }
 
 div.single-filters {
-
   label {
     width: 100%;
+    font-weight: 700;
   }
 
   &__tab-bar {
@@ -38,6 +37,10 @@ div.single-filters {
       border-bottom-left-radius: 15px;
     }
   }
+  & > select.cove-form-select,
+  & > div.nested-dropdown {
+    width: fit-content;
+  }
 }
 
 .single-filters--tab {
@@ -54,6 +57,9 @@ div.single-filters {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     margin-top: 5px;
+    font-family: var(--app-font-secondary);
+    font-size: 1rem;
+    text-align: center;
   }
 
   .tab--active {
@@ -61,6 +67,59 @@ div.single-filters {
   }
 }
 
+.single-filters--tab-simple {
+  flex-basis: 100%;
+}
+
+.tab-simple-container {
+  border-bottom: 1px solid var(--cool-gray-10);
+  flex-wrap: wrap;
+
+  .tab.tab--simple {
+    background: none;
+    border: none;
+    font-family: var(--app-font-secondary);
+    font-size: 1rem;
+    font-weight: 300;
+    padding: 0.5rem 1rem;
+    width: auto;
+    cursor: pointer;
+    border-radius: 6px 6px 0 0;
+
+    @include breakpointClass(xs) {
+      font-size: 0.778em;
+      padding: 0.5rem 0.778em;
+    }
+
+    &:hover {
+      color: var(--colors-blue-vivid-60, #005ea2);
+      background: var(--colors-cyan-cool-10, #eff9fa);
+    }
+    // TODO - focus styles have to be heavy handed to override the project's global styles
+    &:focus:not(:focus-visible) {
+      outline: none !important;
+    }
+    &:focus-visible {
+      outline: 2px dashed var(--colors-blue-vivid-60, #005ea2) !important;
+      outline-offset: 3px;
+    }
+
+    &.tab--active {
+      font-weight: 500;
+      border-bottom: 0.3rem solid var(--colors-blue-vivid-60, #005ea2);
+      z-index: 1;
+    }
+  }
+}
+.cdc-open-viz-module {
+  @include breakpointClass(xs) {
+    .single-filters--tab-simple .tab-simple-container .tab.tab--simple {
+      font-size: 0.778em;
+      padding: 0.5rem 0.778em;
+    }
+  }
+}
+
 .single-filters--pill {
   width: 100%;
   display: flex;

package/styles/v2/base/_general.scss

@@ -2,13 +2,14 @@
 
 .cove {
   margin: 0;
-  font: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
+  font-family: var(--app-font-main);
+  font-size: 1em;
+  line-height: 1.5;
   font-weight: 400;
   font-style: normal;
   line-height: 1.4;
   color: $baseColor;
   text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
 
   small {
     display: block;

package/styles/v2/components/button.scss

@@ -16,7 +16,6 @@
   position: relative;
   min-height: 2.125rem;
   padding: 0.375rem 0.75rem;
-  font-size: 1rem;
   text-align: center;
   text-decoration: none;
   vertical-align: middle;

package/styles/v2/main.scss

@@ -3,7 +3,6 @@
 
 .cove {
   @import 'base';
-  color: $baseColor;
   font-size: 16px;
   line-height: 1.4;
 
@@ -13,12 +12,12 @@
   }
 
   margin: 0;
-  font: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
+  font-family: var(--app-font-main);
+  font-size: 1em;
+  line-height: 1.5;
   font-weight: 400;
   font-style: normal;
   text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  color: #111;
 
   strong {
     font-weight: 600;

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

@@ -134,13 +134,13 @@ $theme: (
 .cdc-open-viz-module {
   @each $theme-name, $theme-colors in $theme {
     &.theme-#{$theme-name} {
-      .single-filters--tab .tab--active {
+      .single-filters--tab .tab--active:not(.tab--simple) {
         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) {
+      .single-filters--tab .tab:not(.tab--active):not(.tab--simple) {
         border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
       }
 
@@ -154,13 +154,13 @@ $theme: (
     }
 
     .theme-#{$theme-name} {
-      .single-filters--tab .tab--active {
+      .single-filters--tab .tab--active:not(.tab--simple) {
         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) {
+      .single-filters--tab .tab:not(.tab--active):not(.tab--simple) {
         border-bottom: 1px solid string.unquote(nth($theme-colors, 1));
       }
 

package/styles/v2/utils/index.scss

@@ -6,4 +6,3 @@
 @import 'breakpoints';
 @import 'functions';
 @import 'grid';
-@import 'spacers';

package/types/BoxPlot.ts

@@ -15,6 +15,7 @@ export type BoxPlot = {
     upperBounds: string
   }
   plotNonOutlierValues: boolean
+  plotOutlierValues: boolean
   plots: [{ columnOutliers: []; columnLowerBounds: number; columnUpperBounds: number }]
   categories: string[]
   geoType: string