@cdc/core 4.24.7 → 4.24.9

package/helpers/ver/4.24.9.ts

@@ -0,0 +1,63 @@
+import { Legend } from './../../types/Legend'
+import _ from 'lodash'
+import { AnyVisualization } from '../../types/Visualization'
+import { VizFilter } from '../../types/VizFilter'
+import { AnyVisualization } from '../../types/Visualization'
+import { VizFilter } from '../../types/VizFilter'
+import versionNeedsUpdate from './versionNeedsUpdate'
+
+/**
+ * Updates the configuration object to disable map zooming for single state maps in a dashboard.
+ * when the config is below version 4.24.9
+ */
+const patchSingleStateZoom = config => {
+  if (config.type === 'dashboard') {
+    Object.values(config?.visualizations || {}).forEach((viz: AnyVisualization) => {
+      if (viz.type === 'map' && viz.general?.geoType === 'single-state') {
+        // if the version is less that 4.24.7 then allowMapZoom should be false
+        let allowZoom = versionNeedsUpdate(config.version, '4.24.9') ? false : viz.general.allowMapZoom
+        viz.general.allowMapZoom = allowZoom
+      }
+    })
+  }
+  if (config.type === 'map' && config.general?.geoType === 'single-state') {
+    // if the version is less that 4.24.7 then allowMapZoom should be false
+    let allowZoom = versionNeedsUpdate(config.version, '4.24.9') ? false : config.general.allowMapZoom
+    config.general.allowMapZoom = allowZoom
+  }
+}
+
+const doesNotHaveIds = (filters: VizFilter[]) => filters?.some(f => !f.id)
+
+export const addIdsToVisFilters = config => {
+  if (config.type === 'dashboard') {
+    config.visualizations = Object.keys(config.visualizations).reduce((acc, curr) => {
+      const viz: AnyVisualization & { filters: VizFilter[] } = config.visualizations[curr]
+      if (viz.filters?.length && doesNotHaveIds(viz.filters)) {
+        acc[curr].filters = viz.filters.map((filter, i) => ({ ...filter, id: Date.now() + i }))
+      }
+      return acc
+    }, config.visualizations)
+  } else if (config.filters?.length && doesNotHaveIds(config.filters)) {
+    config.filters = config.filters.map((filter, i) => ({ ...filter, id: Date.now() + i }))
+  }
+}
+
+const supportLineStyledLegend = newConfig => {
+  // support for Charts
+  if (newConfig.legend?.lineMode) {
+    newConfig.legend.style = 'lines'
+  }
+}
+
+const update_4_24_9 = config => {
+  const ver = '4.24.9'
+  const newConfig = _.cloneDeep(config)
+  patchSingleStateZoom(newConfig)
+  addIdsToVisFilters(newConfig)
+  supportLineStyledLegend(config)
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_24_9

package/helpers/ver/tests/4.24.9.test.ts

@@ -0,0 +1,22 @@
+import { addIdsToVisFilters } from '../4.24.9'
+import { coveUpdateWorker } from '../../coveUpdateWorker'
+import { expect, describe, it } from 'vitest'
+
+describe('addIdsToVisFilters', () => {
+  it('adds ids to vis filters on dashboards', () => {
+    const mockConfig = { type: 'dashboard', visualizations: { a: { filters: [{}] } } } as any
+    addIdsToVisFilters(mockConfig)
+    expect(mockConfig.visualizations.a.filters[0].id).toBeDefined()
+  })
+  it('adds ids to vis filters on non dashboards', () => {
+    const mockConfig = { filters: [{}] } as any
+    addIdsToVisFilters(mockConfig)
+    expect(mockConfig.filters[0].id).toBeDefined()
+  })
+  it('adds ids to nested multi-dashboards', () => {
+    const mockConfig = { type: 'dashboard', rows: [], visualizations: { a: { filters: [{}] } }, multiDashboards: [{ rows: [], visualizations: { a: { filters: [{}] } } }] }
+    const convertedConfig = coveUpdateWorker(mockConfig)
+    expect(convertedConfig.visualizations.a.filters[0].id).toBeDefined()
+    expect(convertedConfig.multiDashboards[0].visualizations.a.filters[0].id).toBeDefined()
+  })
+})

package/helpers/ver/versionNeedsUpdate.ts

@@ -0,0 +1,9 @@
+export default function versionNeedsUpdate(previousVersion: string, currentVersion: string): boolean {
+  if (!previousVersion) return true
+  const [prevMajor, prevMinor, prevPatch] = previousVersion.split('.').map(Number)
+  const [currMajor, currMinor, currPatch] = currentVersion.split('.').map(Number)
+  if (currMajor > prevMajor) return true
+  if (currMajor === prevMajor && currMinor > prevMinor) return true
+  if (currMajor === prevMajor && currMinor === prevMinor && currPatch > prevPatch) return true
+  return false
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@cdc/core",
-  "version": "4.24.7",
+  "version": "4.24.9",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
   "scripts": {
-    "test": "vitest run --reporter verbose",
+    "test": "vitest run --environment jsdom --reporter verbose",
     "test-watch": "vitest watch --reporter verbose",
     "test-watch:ui": "vitest --ui"
   },
@@ -33,5 +33,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "7a7372d03778cb977e0e92e3b3bc1a35f8a5bfaf"
+  "gitHead": "c4b0402afe6ed209a85b7078711549b9fd7dae7d"
 }

package/styles/_button-section.scss

@@ -14,9 +14,9 @@
 
 // links that appear above data tables
 .download-links {
-  padding: 0px 1em;
   display: flex;
   justify-content: flex-end;
+  width: 100%;
   &.brush-active {
     margin-top: 2em;
   }

package/styles/_global.scss

@@ -181,7 +181,11 @@ select {
 }
 
 section.introText {
-  padding: 15px;
+  width: 100%;
+  margin-bottom: 25px;
+  &.legend_visible_top {
+    margin-bottom: 0;
+  }
 }
 
 section.footnotes {
@@ -191,7 +195,7 @@ section.footnotes {
 }
 
 .cdc-chart-inner-container .subtext {
-  padding: 15px;
+  padding: 15px 0;
 }
 
 .margin-left-href {

package/styles/filters.scss

@@ -28,6 +28,10 @@ section.filters-section {
   border-radius: 10px;
   margin-bottom: 10px;
   display: block !important;
+
+  &.legend_visible_top {
+    margin-bottom: 0px;
+  }
 }
 
 div.single-filters {

package/types/Axis.ts

@@ -5,6 +5,7 @@ export type Anchor = {
 }
 
 export type Axis = {
+  categories: [{ label: string; height: string; color: string }]
   scalePadding: number
   anchors?: Anchor[]
   dataKey: string
@@ -43,4 +44,6 @@ export type Axis = {
   tickRotation?: number
   tickWidthMax?: number
   type: string
+  axisBBox: number
+  maxValue: string
 }

package/types/Dimensions.ts

@@ -0,0 +1 @@
+export type DimensionsType = [number, number]

package/types/General.ts

@@ -8,7 +8,7 @@ export type General = {
   allowMapZoom?: boolean
   showMissingDataLabel: boolean
   showSuppressedSymbol: boolean
-  showZeroValueDataLabel: boolean
   showAnnotationDropdown?: boolean
+  hideNullValue: boolean
   title: string
 }

package/types/VizFilter.ts

@@ -1,18 +1,31 @@
+export type OrderBy = 'asc' | 'desc' | 'cust'
+
 export type FilterBase = {
   columnName: string
   values: string[]
   showDropdown: boolean
+  id: number
+  parents: number[]
 }
 
+export type VizFilterStyle =
+  | 'tab'
+  | 'pill'
+  | 'tab bar'
+  | 'dropdown'
+  | 'dropdown bar'
+  | 'multi-select'
+  | 'nested-dropdown'
 export type GeneralFilter = FilterBase & {
   active: string
   queuedActive: string
-  filterStyle: 'tab' | 'pill' | 'tab bar' | 'dropdown' | 'dropdown bar' | 'multi-select'
+  filterStyle: VizFilterStyle
   label: string
-  order: 'asc' | 'desc' | 'cust'
-  orderedValues?: string[]
+  order: OrderBy
+  orderedValues?: string[] // should only exist if the order is 'cust'
   queryParameter: string
   setByQueryParameter: string
+  subGrouping: SubGrouping
   type: 'url'
 }
 
@@ -21,4 +34,12 @@ export type MultiSelectFilter = {
   selectLimit: number
 } & Omit<GeneralFilter, 'active'>
 
+export type SubGrouping = {
+  active: string
+  columnName: string
+  setByQueryParameter: string
+  order?: OrderBy
+  valuesLookup: Record<string, { orderedValues?: string[]; values: string[] }>
+}
+
 export type VizFilter = GeneralFilter | MultiSelectFilter

package/components/LegendCircle.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-
-export default function LegendCircle({ fill, borderColor, display = 'inline-block', viewport }) {
-  const dimensions = ['sm', 'xs', 'xxs'].includes(viewport) ? { width: '0.7em', height: '0.7em' } : { width: '1em', height: '1em' }
-  const styles = {
-    marginRight: '5px',
-    borderRadius: '300px',
-    verticalAlign: 'middle',
-    display: display,
-    height: dimensions.height || '1em',
-    width: dimensions.width || '1em',
-    border: borderColor ? `${borderColor}  1px solid` : 'rgba(0,0,0,.3) 1px solid',
-    backgroundColor: fill
-  }
-
-  return <span className='legend-item' style={styles} />
-}

package/helpers/updatePaletteNames.js

@@ -1,16 +0,0 @@
-export function updatePaletteNames(colorPalettes) {
-  // this function adds REVERSE keyword to each palette
-  delete colorPalettes.qualitative9 // delete palette before reversing
-  let palettereversed = {}
-  for (const [paletteName, hexCodeArr] of Object.entries(colorPalettes)) {
-    const paletteStr = String(paletteName)
-
-    if (!paletteStr.endsWith('reverse')) {
-      let palette = paletteStr.concat('reverse') // add to the end of the string "reverse"
-      palettereversed[palette] = [...hexCodeArr].reverse() // reverses arrays elements and create new keys on object
-    } else {
-      palettereversed = { ...colorPalettes }
-    }
-  }
-  return { ...palettereversed, ...colorPalettes }
-}