@cdc/core 4.24.5 → 4.24.9

package/helpers/{useDataVizClasses.js → useDataVizClasses.ts}

@@ -43,7 +43,7 @@ export default function useDataVizClasses(config, viewport = null) {
   // Using short circuiting to check between charts & maps for now.
   const getListPosition = () => {
     if (legend?.position === 'side' && legend?.singleColumn) return 'legend-container__ul--single-column'
-    if (legend?.position === 'bottom' && legend?.singleRow) return 'single-row'
+    if (legend?.position !== 'side' && legend?.singleRow) return 'single-row'
     if (legend?.verticalSorted && !legend?.singleRow) return 'vertical-sorted'
     return ''
   }
@@ -53,7 +53,8 @@ export default function useDataVizClasses(config, viewport = null) {
     ulClasses.push(getListPosition())
     return ulClasses
   }
-  const legendOuterClasses = [`${legend?.position}`, `${getListPosition()}`, `cdcdataviz-sr-focusable`, `${viewport}`]
+  const hasBorder = config.legend?.hideBorder ? 'no-border' : ''
+  const legendOuterClasses = [`${legend?.position}`, `${getListPosition()}`, `cdcdataviz-sr-focusable`, `${viewport}`, `${hasBorder}`]
 
   const legendClasses = {
     aside: legendOuterClasses,

package/helpers/ver/4.24.5.ts

@@ -18,8 +18,8 @@ const migrateMarkupInclude = newConfig => {
   }
 }
 
-const update_4_24_4 = config => {
-  const ver = '4.24.4'
+const update_4_24_5 = config => {
+  const ver = '4.24.5'
 
   const newConfig = _.cloneDeep(config)
 
@@ -29,4 +29,4 @@ const update_4_24_4 = config => {
   return newConfig
 }
 
-export default update_4_24_4
+export default update_4_24_5

package/helpers/ver/4.24.7.ts

@@ -0,0 +1,123 @@
+import _ from 'lodash'
+import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
+import { MultiDashboardConfig } from '@cdc/dashboard/src/types/MultiDashboard'
+import { AnyVisualization } from '../../types/Visualization'
+import versionNeedsUpdate from './versionNeedsUpdate'
+
+export const dashboardFiltersMigrate = config => {
+  if (!config.dashboard) return config
+  const dashboardConfig = config as MultiDashboardConfig
+  const newVisualizations = {}
+  // autoload was removed from APIFilter type
+  const newSharedFilters = (dashboardConfig.dashboard.sharedFilters || []).map(sf => {
+    if (sf.apiFilter?.autoLoad !== undefined) {
+      delete sf.apiFilter.autoLoad
+    }
+    if (sf.apiFilter?.defaultValue !== undefined) {
+      delete sf.apiFilter.defaultValue
+    }
+    return sf
+  })
+  config.dashboard.sharedFilters = newSharedFilters
+
+  Object.keys(dashboardConfig.visualizations).forEach(vizKey => {
+    const viz = dashboardConfig.visualizations[vizKey] as DashboardFilters
+    // hide was removed from visualizations
+    if (viz.hide !== undefined) {
+      viz.sharedFilterIndexes = newSharedFilters.map((_sf, i) => i).filter(i => !viz.hide.includes(i))
+      viz.type = 'dashboardFilters'
+      if (viz.autoLoad) {
+        viz.filterBehavior = 'Filter Change'
+      } else {
+        viz.filterBehavior = 'Apply Button'
+      }
+
+      delete viz.hide
+    }
+    // 'filter-dropdowns' was renamed to 'dashboardFilters' for clarity
+    if (viz.type === 'filter-dropdowns') {
+      viz.type = 'dashboardFilters'
+      viz.visualizationType = 'dashboardFilters'
+      if (!viz.sharedFilterIndexes) {
+        viz.sharedFilterIndexes = config.dashboard.sharedFilters.map((_sf, i) => i)
+        viz.filterBehavior = config.filterBehavior || 'Filter Change'
+      }
+    }
+
+    // Premature convertion to 4.24.7 made us add this fix
+    if (viz.type === 'dashboardFilters' && !viz.sharedFilterIndexes) {
+      viz.sharedFilterIndexes = config.dashboard.sharedFilters.map((_sf, i) => i)
+      viz.filterBehavior = config.filterBehavior || 'Filter Change'
+    }
+    newVisualizations[vizKey] = viz
+  })
+
+  if (config.dashboard.sharedFilters.length && !Object.values(newVisualizations).find((v: AnyVisualization) => v.type === 'dashboardFilters')) {
+    const newViz = {
+      type: 'dashboardFilters',
+      visualizationType: 'dashboardFilters',
+      sharedFilterIndexes: config.dashboard.sharedFilters.map((_sf, i) => i),
+      filterBehavior: config.filterBehavior || 'Filter Change'
+    }
+    const key = 'legacySharedFilters'
+    newVisualizations[key] = newViz
+    const newRow = {
+      columns: [
+        {
+          width: 12,
+          widget: key
+        }
+      ]
+    }
+    config.rows = [newRow, ...config.rows]
+    config.dashboard.sharedFilters = config.dashboard.sharedFilters.map(sf => {
+      if (sf.usedBy) {
+        // Fixes usedBy Rows
+        sf.usedBy = sf.usedBy.map(key => {
+          if (!(parseInt(key) > -1)) return key
+          return String(parseInt(key) + 1)
+        })
+      }
+      return sf
+    })
+  }
+  // if there's no dashboardFilters visualization but there are sharedFilters create a visualization and update rows.
+
+  config.visualizations = newVisualizations
+  delete config.filterBehavior // deprecated
+}
+
+const mapUpdates = newConfig => {
+  // When switching between old version of equal number, and the revised equal number opt in, roundToPlace needs to be set.
+  // There wasn't an initial value set for this, and legends would return NaN if it wasn't set. ie. 0 - NAN instead of 0 - 1
+  const equalNumberRoundingPatch = newConfig => {
+    if (newConfig.type === 'map') {
+      if (newConfig.columns.primary.roundToPlace === undefined) {
+        newConfig.columns.primary.roundToPlace = 0
+      }
+    }
+  }
+
+  equalNumberRoundingPatch(newConfig)
+
+  return newConfig
+}
+
+const updateLogarithmicConfig = newConfig => {
+  if (newConfig.useLogScale) {
+    newConfig.yAxis.type === 'logarithmic'
+  }
+}
+
+const update_4_24_7 = config => {
+  const ver = '4.24.7'
+
+  const newConfig = _.cloneDeep(config)
+
+  mapUpdates(newConfig)
+  dashboardFiltersMigrate(newConfig)
+  updateLogarithmicConfig(newConfig)
+  newConfig.version = versionNeedsUpdate(config.version, ver) ? ver : config.version
+  return newConfig
+}
+export default update_4_24_7

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,12 +1,13 @@
 {
   "name": "@cdc/core",
-  "version": "4.24.5",
+  "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 watch --reporter verbose --globals true",
-    "test:ui": "vitest --ui"
+    "test": "vitest run --environment jsdom --reporter verbose",
+    "test-watch": "vitest watch --reporter verbose",
+    "test-watch:ui": "vitest --ui"
   },
   "repository": {
     "type": "git",
@@ -20,6 +21,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "html2canvas": "^1.4.1",
+    "json-edit-react": "^1.12.0",
     "papaparse": "^5.3.0",
     "prop-types": "^15.8.1",
     "react-accessible-accordion": "^5.0.0",
@@ -31,5 +33,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "def85aaf4cd9dc1983e80f2900199f35de82af95"
+  "gitHead": "c4b0402afe6ed209a85b7078711549b9fd7dae7d"
 }

package/styles/_button-section.scss

@@ -14,13 +14,18 @@
 
 // links that appear above data tables
 .download-links {
-  padding: 0px 1em;
   display: flex;
   justify-content: flex-end;
-
+  width: 100%;
+  &.brush-active {
+    margin-top: 2em;
+  }
   a:not(:last-child) {
     margin-right: 10px;
   }
+  & a {
+    font-size: 16px;
+  }
 }
 
 // odd wrapper thats different on dashboards

package/styles/_data-table.scss

@@ -13,7 +13,6 @@ div.data-table-heading {
   background: rgba(0, 0, 0, 0.05);
   padding: 0.5em 0.7em;
   border: $lightGray 1px solid;
-  border-bottom: 0;
   cursor: pointer;
 
   svg {

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/base.scss

@@ -77,6 +77,10 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   @import 'series-list';
   @import 'typography';
 
+  input[type='range'] {
+    appearance: auto !important;
+  }
+
   // Force printing chart images
   -webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
   color-adjust: exact !important; /* Firefox 48 – 96 */

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/styles/v2/themes/_color-definitions.scss

@@ -76,6 +76,7 @@ $theme: (
 .markup-include,
 .type-waffle-chart,
 .type-data-bite,
+.type-filtered-text,
 .cdc-open-viz-module.type-chart.type-sparkline,
 .cove {
   @each $theme-name, $theme-colors in $theme {

package/types/Annotation.ts

@@ -0,0 +1,46 @@
+export type Annotation = {
+  // background opacity of annotation
+  opacity: number
+  // HTML text string to display in annotation
+  text: string
+  // can the user edit/drag the annotation
+  edit: {
+    subject: boolean
+    label: boolean
+  }
+  // if the connectionType is curve - allow choosing a visx curve type
+  lineType: string
+  // anchor points for lines
+  anchor: {
+    horizontal: boolean
+    vertical: boolean
+  }
+  // x value for scaling
+  xKey: string
+  // y value for scaling
+  yKey: string
+  // orignal x value of subject
+  originalX: number
+  // x of subject
+  x: number
+  // y of object
+  y: number
+  // x offset of label from subject
+  dx: number
+  // y offset of label from subject
+  dy: number
+  // assigned series that the annotation should snap to
+  seriesKey: string
+  // if the dragged item should be snapped to the nearest point
+  snapToNearestPoint: boolean
+  // type of  connecting line from label to subject
+  connectionType: 'line' | 'curve' | 'elbow' | 'none'
+  // marker type highlighting the subject
+  marker: 'arrow' | 'circle'
+  // should the item be snapped to the subject?
+  snapToSubject: boolean
+  // savedDimensions - the original dimensions of the svg when the svg was saved
+  savedDimensions: [width: number, height: number]
+  // displayDropdown - whether or not to show the mobile dropdown on desktop for annotations
+  displayDropdown?: boolean
+}

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
@@ -37,12 +38,12 @@ export type Axis = {
   sortDates?: boolean
   sortKey?: string
   showTargetLabel?: boolean
-  showSuppressedLine: boolean
-  showSuppressedSymbol: boolean
   size?: number
   target?: number
   targetLabel?: string
   tickRotation?: number
   tickWidthMax?: number
   type: string
+  axisBBox: number
+  maxValue: string
 }

package/types/ConfigureData.ts

@@ -2,7 +2,7 @@ import { DataDescription } from './DataDescription'
 
 export type ConfigureData = {
   dataDescription: Partial<DataDescription>
-  data: Object[]
+  data?: Object[]
   formattedData?: Object[]
   dataKey: string // This is the key of the dataset in the config
 }

package/types/Dimensions.ts

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

package/types/Footnotes.ts

@@ -0,0 +1,17 @@
+import { Visualization } from './Visualization'
+
+export type Footnote = {
+  symbol?: string
+  text: string
+}
+
+type Footnotes = Visualization & {
+  dynamicFootnotes?: {
+    symbolColumn?: string
+    textColumn: string
+    orderColumn?: string
+  }
+  staticFootnotes?: Footnote[]
+}
+
+export default Footnotes

package/types/General.ts

@@ -6,4 +6,9 @@ export type General = {
   type: string
   showDownloadButton: boolean
   allowMapZoom?: boolean
+  showMissingDataLabel: boolean
+  showSuppressedSymbol: boolean
+  showAnnotationDropdown?: boolean
+  hideNullValue: boolean
+  title: string
 }

package/types/Runtime.ts

@@ -7,13 +7,8 @@ export type ForecastingSeriesKey = {
   }[]
 }
 
-export type BarSeriesKey = {
-  key: string
-  color: string
-}
-
 export type Runtime = {
-  barSeriesKeys?: BarSeriesKey[]
+  barSeriesKeys?: string[]
   forecastingSeriesKeys?: ForecastingSeriesKey[]
   originalXAxis: {
     dataKey: string
@@ -26,7 +21,7 @@ export type Runtime = {
   seriesLabels: Record<string, any>
   seriesLabelsAll: string[]
   editorErrorMessage: string
-  lineSeriesKeys: any[]
+  lineSeriesKeys?: string[]
   horizontal: boolean
   uniqueId: number | string
 }

package/types/Table.ts

@@ -1,3 +1,8 @@
+type Pivot = {
+  columnName: string
+  valueColumn: string
+}
+
 export type Table = {
   caption?: string
   cellMinWidth?: number
@@ -14,6 +19,7 @@ export type Table = {
   indexLabel?: string
   label?: string
   limitHeight?: boolean
+  pivot?: Pivot
   show?: boolean
   showDataTableLink?: boolean
   showDownloadImgButton?: boolean

package/types/Visualization.ts

@@ -4,40 +4,62 @@ import { Column } from './Column'
 import { Series } from './Series'
 import { Table } from './Table'
 import { ConfidenceInterval } from './ConfidenceInterval'
-import { BaseVisualizationType } from './BaseVisualizationType'
 import { ConfigureData } from './ConfigureData'
 import { VizFilter } from './VizFilter'
 import { FilterBehavior } from './FilterBehavior'
 import { General } from './General'
+import { Runtime } from './Runtime'
+import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
 
-export type Visualization = ConfigureData & {
-  autoLoad: boolean
+// This was originally created as a catchall for the different types of visualizations.
+// Currently it includes properties that ares specific to one Visualization type.
+// We should avoid adding any new property to this type unless it is used by all visualizations.
+// We should refactor it also to remove properties that are not used by all visualizations.
+// See AnyVisualization type below...
+type DeprecatedVisualizationType = {
   columns: Record<string, Partial<Column>>
   confidenceKeys: ConfidenceInterval
   dataFileName: string
   dataFileSourceType: string
   dataFormat: any
   datasets: Record<string, any>
-  editing: boolean
-  filterBehavior: FilterBehavior
   filters: VizFilter[]
   general: General
-  hide: any[]
   legend: Legend
   multiDashboards?: any[]
   newViz: boolean
   openModal: boolean
   orientation: 'vertical' | 'horizontal'
   originalFormattedData: any
+  runtime?: Runtime
   series: Series
-  showEditorPanel: boolean
   table: Table
   theme: string
   title: string
-  type: BaseVisualizationType
-  uid: string // this is the actual key of the visualization object
+  type: 'dashboard' | 'chart' | 'footnotes' | 'map' | 'data-bite' | 'waffle-chart' | 'markup-include' | 'filtered-text' | 'table' | 'navigation'
   usesSharedFilter: any
   visualizationSubType: string
   visualizationType: string
   xAxis: Axis
+  preliminaryData: { type: 'effect' | 'suppression'; value: string }[]
+}
+
+type StatefulProperties = {
+  editing: boolean
+  newViz: boolean
 }
+
+export type CommonVisualizationProperties = Partial<StatefulProperties> & {
+  showEditorPanel?: boolean
+  uid?: string // this is the actual key of the visualization object
+  visualizationType?: string
+  filterBehavior: FilterBehavior
+} & Partial<ConfigureData>
+
+export type Visualization = DeprecatedVisualizationType & CommonVisualizationProperties
+
+// This type is used as a catchall for the different types of visualizations.
+// We should create a specific type for each visualization type and add it to this list.
+// We will remove Visualization from this list once we have all union types listed.
+// All of the New types will extend CommonVisualizationProperties.
+export type AnyVisualization = Visualization | DashboardFilters

package/types/VizFilter.ts

@@ -1,13 +1,45 @@
-export type VizFilter = {
-  active: string
+export type OrderBy = 'asc' | 'desc' | 'cust'
+
+export type FilterBase = {
   columnName: string
-  filterStyle: 'tab' | 'pill' | 'tab bar' | 'dropdown'
+  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: 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
-  showDropdown: boolean
+  subGrouping: SubGrouping
   type: 'url'
-  values: string[]
 }
+
+export type MultiSelectFilter = {
+  active: string[]
+  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