@cdc/core 4.24.10 → 4.24.12-2

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
@@ -36,7 +37,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,38 +1,51 @@
 export default function useDataVizClasses(config, viewport = null) {
-  const { legend } = config
+  const {
+    legend,
+    lineDatapointStyle,
+    showTitle,
+    title,
+    visualizationType,
+    subtext,
+    biteStyle,
+    general,
+    visual,
+    shadow
+  } = config
+
   let lineDatapointClass = ''
 
-  if (config.lineDatapointStyle === 'hover') {
+  if (lineDatapointStyle === 'hover') {
     lineDatapointClass = ' chart-line--hover'
   }
-  if (config.lineDatapointStyle === 'always show') {
+  if (lineDatapointStyle === 'always show') {
     lineDatapointClass = ' chart-line--always'
   }
 
   let innerContainerClasses = ['cove-component__inner']
   let contentClasses = ['cove-component__content']
 
-  const { visualizationType, title, showTitle } = config
-
   if (visualizationType === 'Spark Line' || visualizationType === 'chart') {
     if (title && showTitle) contentClasses.push('component--has-title')
   }
 
-  config.showTitle && contentClasses.push('component--has-title')
-  config.title && config.visualizationType !== 'chart' && config.visualizationType !== 'Spark Line' && contentClasses.push('component--has-title')
-  config.subtext && innerContainerClasses.push('component--has-subtext')
-  config.biteStyle && innerContainerClasses.push(`bite__style--${config.biteStyle}`)
-  config.general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
+  showTitle && contentClasses.push('component--has-title')
+  title &&
+    visualizationType !== 'chart' &&
+    visualizationType !== 'Spark Line' &&
+    contentClasses.push('component--has-title')
+  subtext && innerContainerClasses.push('component--has-subtext')
+  biteStyle && innerContainerClasses.push(`bite__style--${biteStyle}`)
+  general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
 
-  !config.visual?.border && contentClasses.push('no-borders')
-  config.visualizationType === 'Spark Line' && contentClasses.push('sparkline')
-  config.visual?.borderColorTheme && contentClasses.push('component--has-borderColorTheme')
-  config.visual?.accent && contentClasses.push('component--has-accent')
-  config.visual?.background && contentClasses.push('component--has-background')
-  config.visual?.hideBackgroundColor && contentClasses.push('component--hideBackgroundColor')
+  !visual?.border && contentClasses.push('no-borders')
+  visualizationType === 'Spark Line' && contentClasses.push('sparkline')
+  visual?.borderColorTheme && contentClasses.push('component--has-borderColorTheme')
+  visual?.accent && contentClasses.push('component--has-accent')
+  visual?.background && contentClasses.push('component--has-background')
+  visual?.hideBackgroundColor && contentClasses.push('component--hideBackgroundColor')
 
   // ! these two will be retired.
-  config.shadow && innerContainerClasses.push('shadow')
+  shadow && innerContainerClasses.push('shadow')
   config?.visual?.roundedBorders && innerContainerClasses.push('bite--has-rounded-borders')
 
   let sparkLineStyles = {
@@ -51,19 +64,29 @@ export default function useDataVizClasses(config, viewport = null) {
   const getUlClasses = () => {
     const ulClasses = ['legend-container__ul']
     ulClasses.push(getListPosition())
+    if (legend?.style === 'gradient') ulClasses.push('patterns-only')
     return ulClasses
   }
-  const hasBorder = config.legend?.hideBorder ? 'no-border' : ''
-  const legendOuterClasses = [`${legend?.position}`, `${getListPosition()}`, `cdcdataviz-sr-focusable`, `${viewport}`, `${hasBorder}`]
+  const hasBorder = legend?.hideBorder ? 'no-border' : ''
+  const legendOuterClasses = [
+    `${legend?.position}`,
+    `${getListPosition()}`,
+    `cdcdataviz-sr-focusable`,
+    `${viewport}`,
+    `${hasBorder}`
+  ]
+
+  const usePadding = !legend?.hideBorder
 
   const legendClasses = {
     aside: legendOuterClasses,
-    section: ['legend-container'],
+    section: ['legend-container', usePadding ? 'legend-padding' : ''],
     ul: getUlClasses(),
     li: ['single-legend-item', 'legend-container__li'],
     title: ['legend-container__title'],
     description: ['legend-container__description'],
-    div: [legend?.position === 'bottom' && legend?.singleRow ? 'shape-container single-row' : 'shape-container']
+    div: [legend?.position === 'bottom' && legend?.singleRow ? 'shape-container single-row' : 'shape-container'],
+    resetButton: ['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/versionNeedsUpdate.ts

@@ -7,3 +7,5 @@ export default function versionNeedsUpdate(previousVersion: string, currentVersi
   if (currMajor === prevMajor && currMinor === prevMinor && currPatch > prevPatch) return true
   return false
 }
+
+export const isOlderVersion = versionNeedsUpdate

package/helpers/viewports.ts

@@ -1,9 +1,10 @@
-function isLegendWrapViewport(currentViewport) {
-  return ['xs', 'xxs'].includes(currentViewport)
-}
+import { ViewportSize } from '@cdc/map/src/types/MapConfig'
 
-function isMobileHeightViewport(currentViewport) {
-  return ['xs', 'xxs'].includes(currentViewport)
-}
+const BREAKPOINTS = ['xxs', 'xs', 'sm', 'md', 'lg']
 
-export { isLegendWrapViewport, isMobileHeightViewport }
+export const isBelowBreakpoint = (breakpoint: ViewportSize, currentViewport: ViewportSize) =>
+  BREAKPOINTS.indexOf(currentViewport) < BREAKPOINTS.indexOf(breakpoint)
+
+export const isLegendWrapViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
+
+export const isMobileHeightViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.24.10",
+  "version": "4.24.12-2",
   "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": "a4d88d1bc91f596e1b0307d8e25c57ad8c668b75",
+  "gitHead": "a60edf1148396309eb473ac9f65426ee40797ddf",
   "devDependencies": {
     "sass": "^1.79.4"
   }

package/styles/_button-section.scss

@@ -2,7 +2,7 @@
 .download-buttons {
   display: flex;
   justify-content: flex-end;
-  margin: 0 1em; // align w/ data table
+  margin: 0 0 0 auto;
 
   .btn:not(:last-child) {
     margin-right: 10px;

package/styles/_global-variables.scss

@@ -2,6 +2,7 @@ $colors: (
   'baseColor': #333,
   'blue': #005eaa,
   'lightestGray': #f2f2f2,
+  'gray2': #f5f5f5,
   'lightGray': #c7c7c7,
   'mediumGray': #565656,
   'darkGray': #333,
@@ -62,6 +63,11 @@ $colors: (
   'amber-secondary': #ffd54f,
   'amber-tertiary': #ffecb3,
   'amber-quaternary': #fff7e1,
+
+  'cool-gray-90': #1c1d1f,
+  'cool-gray-50': #71767a,
+  'cool-gray-30': #a9aeb1,
+  'cool-gray-10': #dfe1e2
 );
 
 @mixin theme() {
@@ -75,6 +81,7 @@ $colors: (
 @include theme();
 
 :root {
+  --editorContentPadding: 30px;
   --editorWidth: 350px;
   --breakpoint-xs: 480px;
   --breakpoint-sm: 768px;
@@ -84,10 +91,8 @@ $colors: (
   --font-size: 17px;
 }
 
-
-@media (max-width: 768px) {
+@media (max-width: 576px) {
   :root {
-    --font-size: 0.9em;
+    --font-size: 13px;
   }
 }
-

package/styles/_global.scss

@@ -53,15 +53,6 @@ strong {
 }
 
 .btn {
-  background: #005eaa;
-  color: #fff;
-  border: 0;
-  padding: 0.4em 0.8em;
-  font-size: 1em;
-  display: block;
-  border-radius: 0.3em;
-  transition: 0.1s background-color;
-  cursor: pointer;
   &.full-width {
     width: 100%;
   }
@@ -89,17 +80,11 @@ strong {
     }
   }
 
-  &:hover {
-    transition: 0.1s all;
-    background: lighten(#005eaa, 5%);
-  }
-
   svg {
     width: 16px;
     height: 16px;
     position: relative;
     top: 2px;
-    margin-left: 5px;
   }
 }
 
@@ -122,13 +107,6 @@ textarea {
 textarea {
   min-height: 140px;
 }
-select {
-  width: 100%;
-  font-size: 1em;
-  font-weight: normal;
-  text-transform: none;
-  border: rgba(0, 0, 0, 0.3) 1px solid !important;
-}
 
 .input-group-text {
   border-top-left-radius: 0;
@@ -194,3 +172,24 @@ section.footnotes {
 .margin-left-href {
   margin-left: 15px;
 }
+
+.btn.btn-primary:not([disabled]) {
+  background-color: $blue;
+  border-color: $blue;
+  &:hover:not([disabled]) {
+    background-color: darken($blue, 5%);
+    border-color: darken($blue, 5%);
+  }
+}
+
+
+// after migration to TP5 this declaration should be removed and all references
+// to it should be replaced with .form-select
+.cove-form-select {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--lightGray);
+  color: var(--darkGray);
+}

package/styles/_reset.scss

@@ -19,8 +19,6 @@
   }
 }
 .cdc-open-viz-module {
-  div,
-  span,
   applet,
   object,
   iframe,
@@ -67,8 +65,6 @@
   ul,
   li,
   fieldset,
-  form,
-  label,
   legend,
   caption,
   article,
@@ -99,14 +95,6 @@
     vertical-align: baseline;
   }
 
-  button {
-    border: 0;
-    cursor: pointer;
-    &:focus {
-      outline: 0;
-    }
-  }
-
   * {
     box-sizing: border-box;
   }

package/styles/filters.scss

@@ -26,24 +26,7 @@
   }
 }
 
-// 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%;
@@ -57,11 +40,6 @@ div.single-filters {
   }
 }
 
-.single-filters--dropdown {
-  width: auto;
-  display: flex;
-}
-
 .single-filters--tab {
   width: 100%;
   display: flex;

package/styles/v2/base/_reset.scss

@@ -43,13 +43,6 @@ picture {
   display: block;
 }
 
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
 sub,
 sup {
   font-size: 75%;

package/styles/v2/components/editor.scss

@@ -250,10 +250,6 @@
     font-weight: normal;
   }
 
-  .btn {
-    margin-top: 1em;
-  }
-
   .sort-list {
     list-style: none;
 

package/styles/v2/components/icon.scss

@@ -1,6 +1,6 @@
 .cove-icon {
   display: inline-flex;
-  width: 1em;
+  width: 1rem;
   height: auto;
   justify-content: center;
   align-items: center;

package/types/Axis.ts

@@ -27,6 +27,7 @@ export type Axis = {
   maxTickRotation?: number
   min?: string
   numTicks?: number
+  padding?: number
   paddingPercent?: number
   rightAxisSize?: number
   rightHideAxis?: boolean
@@ -48,4 +49,5 @@ export type Axis = {
   type: string
   axisBBox: number
   maxValue: string
+  sortByRecentDate: boolean
 }

package/types/BoxPlot.ts

@@ -10,12 +10,14 @@ export type BoxPlot = {
     q3: string
     outliers: string
     values: string
-    total: string
+    count: string
     lowerBounds: string
     upperBounds: string
   }
-  plots: []
+  plotNonOutlierValues: boolean
+  plots: [{ columnOutliers: []; columnLowerBounds: number; columnUpperBounds: number }]
   categories: string[]
-  firstQuartilePercentage: number
   geoType: string
+  hideOutliers: boolean
+  borders: string
 }

package/types/Color.ts

@@ -2,4 +2,4 @@ type RGB = `rgb(${number}, ${number}, ${number})`
 type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`
 type HEX = `#${string}`
 
-type Color = RGB | RGBA | HEX
+export type Color = RGB | RGBA | HEX

package/types/Legend.ts

@@ -10,8 +10,7 @@ export type Legend = {
   hideSuppressedLabels: boolean
   highlightOnHover: boolean
   label: string
-  lineMode: boolean
-  position: string
+  position: 'left' | 'bottom' | 'top' | 'right' | 'side'
   reverseLabelOrder: boolean
   singleRow: boolean
   type: string

package/types/MarkupInclude.ts

@@ -5,6 +5,7 @@ import { Visualization } from './Visualization'
 export type MarkupIncludeConfig = Visualization & {
   contentEditor: {
     // Changing the base config object creates an infinite loop, nesting it is a workaround
+    allowHideSection?: boolean
     inlineHTML: string
     markupVariables: Variable[]
     showHeader: boolean

package/types/Runtime.ts

@@ -1,4 +1,5 @@
 import { Axis } from './Axis'
+import { Series } from './Series'
 
 export type ForecastingSeriesKey = {
   stages: {
@@ -17,7 +18,8 @@ export type Runtime = {
   }
   xAxis: Axis
   yAxis: Axis
-  seriesKeys: any[]
+  series: Series
+  seriesKeys: string[]
   seriesLabels: Record<string, any>
   seriesLabelsAll: string[]
   editorErrorMessage: string

package/types/Series.ts

@@ -1 +1,8 @@
-export type Series = { dataKey: string; name: string; axis: string; type: string; tooltip: boolean }[]
+export type Series = {
+  dataKey: string
+  name: string
+  axis: string
+  type: string
+  tooltip: boolean
+  dynamicCategory?: string
+}[]

package/types/Table.ts

@@ -1,4 +1,4 @@
-type Pivot = {
+export type Pivot = {
   columnName: string
   valueColumns: string[]
 }

package/types/Version.ts

@@ -0,0 +1 @@
+export type version = `${number}.${number}.${number}`

package/types/Visualization.ts

@@ -19,20 +19,19 @@ import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
 type DeprecatedVisualizationType = {
   columns: Record<string, Partial<Column>>
   confidenceKeys: ConfidenceInterval
-  dataFileName: string
-  dataFileSourceType: string
+  dataFileName?: string
+  dataFileSourceType?: string
   dataFormat: any
-  datasets: Record<string, any>
+  datasets?: Record<string, any>
   filters: VizFilter[]
   general: General
   legend: Legend
   multiDashboards?: any[]
   newViz: boolean
   isResponsiveTicks: boolean
-  barThickness: string
-  openModal: boolean
+  openModal?: boolean
   orientation: 'vertical' | 'horizontal'
-  originalFormattedData: any
+  originalFormattedData?: any
   runtime?: Runtime
   series: Series
   table: Table
@@ -49,7 +48,7 @@ type DeprecatedVisualizationType = {
     | 'filtered-text'
     | 'table'
     | 'navigation'
-  usesSharedFilter: any
+  usesSharedFilter?: any
   visualizationSubType: string
   visualizationType: string
   xAxis: Axis
@@ -63,7 +62,7 @@ type StatefulProperties = {
 
 export type CommonVisualizationProperties = Partial<StatefulProperties> & {
   showEditorPanel?: boolean
-  uid?: string // this is the actual key of the visualization object
+  uid?: string | number // this is the actual key of the visualization object
   visualizationType?: string
   filterBehavior: FilterBehavior
 } & Partial<ConfigureData>

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/components/ui/Select.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-
-const Select = ({ label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, onchange, initial: initialValue, ...attributes }) => {
-  let optionsJsx = options.map((optionName, index) => (
-    <option value={optionName} key={index}>
-      {optionName}
-    </option>
-  ))
-
-  if (initialValue) {
-    optionsJsx.unshift(
-      <option value='' key='initial'>
-        {initialValue}
-      </option>
-    )
-  }
-
-  return (
-    <label>
-      <span className='edit-label'>
-        {label}
-        {tooltip}
-      </span>
-      <select className={required && !value ? 'warning' : ''} name={fieldName} value={value} onChange={onchange} {...attributes}>
-        {optionsJsx}
-      </select>
-    </label>
-  )
-}
-export default Select

package/helpers/getGradientLegendWidth.ts

@@ -1,15 +0,0 @@
-export const getGradientLegendWidth = (containerWidth: number, currentViewport: string): number => {
-  const newWidth = Number(containerWidth)
-  switch (currentViewport) {
-    case 'lg':
-      return newWidth / 3
-    case 'md':
-      return newWidth / 2
-    case 'sm':
-    case 'xs':
-    case 'xxs':
-      return newWidth / 1.4
-    default:
-      return newWidth
-  }
-}