@cdc/core 4.24.12 → 4.25.1

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/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.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.1",
   "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": "c32d727f516fe3525178e3a6480abbe70b2a20d6",
   "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 {

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/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

package/types/Runtime.ts

@@ -10,6 +10,7 @@ export type ForecastingSeriesKey = {
 
 export type Runtime = {
   barSeriesKeys?: string[]
+  areaSeriesKeys: object[]
   forecastingSeriesKeys?: ForecastingSeriesKey[]
   originalXAxis: {
     dataKey: string

package/types/Table.ts

@@ -13,7 +13,6 @@ export type Table = {
   downloadPdfButton?: boolean
   excludeColumns?: string[]
   expanded?: boolean
-  fontSize: 'small' | 'medium' | 'large'
   groupBy?: string
   height?: number
   indexLabel?: string

package/types/Version.ts

@@ -1 +1 @@
-export type version = `${number}.${number}.${number}`
+export type Version = `${number}.${number}.${number}` | `${number}.${number}.${number}-${string}`

package/types/VizFilter.ts

@@ -1,4 +1,4 @@
-export type OrderBy = 'asc' | 'desc' | 'cust'
+export type OrderBy = 'asc' | 'desc' | 'cust' | 'column'
 
 export type FilterBase = {
   columnName: string
@@ -23,6 +23,7 @@ export type GeneralFilter = FilterBase & {
   filterStyle: VizFilterStyle
   label: string
   order: OrderBy
+  orderColumn?: string
   orderedValues?: string[] // should only exist if the order is 'cust'
   queryParameter: string
   setByQueryParameter: string

package/styles/v2/utils/_spacers.scss

@@ -1,31 +0,0 @@
-// Content Spacer Classes
-$cove-spacers-offset: 8;
-$cove-spacers-max: 64;
-
-@mixin spacers($className, $styleNameCollection) {
-  $i: 0;
-  @while ($i * $cove-spacers-offset) <= $cove-spacers-max {
-    #{$className + $i} {
-      @each $styleName in $styleNameCollection {
-        #{$styleName}: #{($i * $cove-spacers-offset) + 'px'} !important;
-      }
-    }
-    $i: $i + 1;
-  }
-}
-
-@include spacers('.p-', 'padding');
-@include spacers('.pt-', 'padding-top');
-@include spacers('.pr-', 'padding-right');
-@include spacers('.pb-', 'padding-bottom');
-@include spacers('.pl-', 'padding-left');
-@include spacers('.px-', ('padding-left', 'padding-right'));
-@include spacers('.py-', ('padding-top', 'padding-bottom'));
-
-@include spacers('.m-', 'margin');
-@include spacers('.mt-', 'margin-top');
-@include spacers('.mr-', 'margin-right');
-@include spacers('.mb-', 'margin-bottom');
-@include spacers('.ml-', 'margin-left');
-@include spacers('.mx-', ('margin-left', 'margin-right'));
-@include spacers('.mx-', ('margin-top', 'margin-bottom'));