@cdc/core 4.25.3-6 → 4.25.5-1

package/helpers/tests/pivotData.test.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest'
 
 import { pivotData } from '../pivotData'
+import _ from 'lodash'
 
 describe('pivotData', () => {
   const data = [
@@ -10,41 +11,118 @@ describe('pivotData', () => {
     { name: 'John', age: 31, city: 'San Francisco' }
   ]
   it('should pivot data correctly', () => {
-    const result = pivotData(data, 'name', ['age'])
+    const result = pivotData(data, 'name', ['age'], [])
     expect(result).toEqual([
-      { city: 'New York', John: 25, Jane: 27 },
-      { city: 'San Francisco', Jane: 30, John: 31 }
+      { city: 'New York', John: 25, Jane: 27, _pivotedFrom: 'age' },
+      { city: 'San Francisco', Jane: 30, John: 31, _pivotedFrom: 'age' }
     ])
   })
   it('should fill in columns with no data with empty strings', () => {
     const data2 = [data[0], data[1]]
-    const result = pivotData(data2, 'name', ['age'])
+    const result = pivotData(data2, 'name', ['age'], [])
 
     expect(result).toEqual([
-      { city: 'New York', John: 25, Jane: '' },
-      { city: 'San Francisco', Jane: 30, John: '' }
+      { city: 'New York', John: 25, Jane: '', _pivotedFrom: 'age' },
+      { city: 'San Francisco', Jane: 30, John: '', _pivotedFrom: 'age' }
     ])
 
     const data3 = [data[0], data[1], data[2]]
-    const result2 = pivotData(data3, 'name', ['age'])
+    const result2 = pivotData(data3, 'name', ['age'], [])
     expect(result2).toEqual([
-      { city: 'New York', John: 25, Jane: 27 },
-      { city: 'San Francisco', Jane: 30, John: '' }
+      { city: 'New York', John: 25, Jane: 27, _pivotedFrom: 'age' },
+      { city: 'San Francisco', Jane: 30, John: '', _pivotedFrom: 'age' }
     ])
   })
   it('should be able to pivot more than one column', () => {
+    // when there are multiple pivot value columns, if any other data is present it will break the pivot.
+    // so we need to tell it which columns to exclude from the pivot.
+    // 'other' is added here as an example.
     const data = [
-      { name: 'John', age: 25, color: 'blue', city: 'New York' },
-      { name: 'Jane', age: 27, color: 'red', city: 'New York' },
-      { name: 'Jane', age: 30, color: 'yellow', city: 'San Francisco' },
-      { name: 'John', age: 31, color: 'green', city: 'San Francisco' }
+      { name: 'John', age: 25, color: 'blue', city: 'New York', other: 'yes' },
+      { name: 'Jane', age: 27, color: 'red', city: 'New York', other: 'no' },
+      { name: 'Jane', age: 30, color: 'yellow', city: 'San Francisco', other: 'yes' },
+      { name: 'John', age: 31, color: 'green', city: 'San Francisco', other: 'no' }
     ]
-    const result = pivotData(data, 'name', ['age', 'color'])
+    const result = pivotData(data, 'name', ['age', 'color'], ['other'])
+    expect(result.map(row => _.omit(row, 'other'))).toEqual([
+      { city: 'New York', John: 25, Jane: 27, _pivotedFrom: 'age' },
+      { city: 'New York', John: 'blue', Jane: 'red', _pivotedFrom: 'color' },
+      { city: 'San Francisco', Jane: 30, John: 31, _pivotedFrom: 'age' },
+      { city: 'San Francisco', Jane: 'yellow', John: 'green', _pivotedFrom: 'color' }
+    ])
+  })
+  it('should allow for duplicate data when there is 1 Column Header but different columnName data', () => {
+    // when there are multiple pivot value columns, if any other data is present it will break the pivot.
+    // so we need to tell it which columns to exclude from the pivot.
+    // 'other' is added here as an example.
+    const data = [
+      { name: 'John', age: 27, color: 'blue', city: 'New York', other: 'yes' },
+      { name: 'Jane', age: 27, color: 'red', city: 'New York', other: 'no' },
+      { name: 'Bob', age: 31, color: 'yellow', city: 'New York', other: 'yes' },
+      { name: 'Betty', age: 31, color: 'green', city: 'New York', other: 'no' },
+      { name: 'Jane', age: 31, color: 'yellow', city: 'New York', other: 'yes' },
+      { name: 'John', age: 31, color: 'green', city: 'New York', other: 'no' },
+      { name: 'Bob', age: 27, color: 'blue', city: 'New York', other: 'yes' },
+      { name: 'Betty', age: 27, color: 'red', city: 'New York', other: 'no' }
+    ]
+    const result = pivotData(data, 'city', ['name'], [])
     expect(result).toEqual([
-      { city: 'New York', John: 25, Jane: 27, pivotColumn: 'age' },
-      { city: 'New York', John: 'blue', Jane: 'red', pivotColumn: 'color' },
-      { city: 'San Francisco', Jane: 30, John: 31, pivotColumn: 'age' },
-      { city: 'San Francisco', Jane: 'yellow', John: 'green', pivotColumn: 'color' }
+      {
+        'New York': 'John',
+        age: 27,
+        color: 'blue',
+        other: 'yes',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'Jane',
+        age: 27,
+        color: 'red',
+        other: 'no',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'Bob',
+        age: 31,
+        color: 'yellow',
+        other: 'yes',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'Betty',
+        age: 31,
+        color: 'green',
+        other: 'no',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'Jane',
+        age: 31,
+        color: 'yellow',
+        other: 'yes',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'John',
+        age: 31,
+        color: 'green',
+        other: 'no',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'Bob',
+        age: 27,
+        color: 'blue',
+        other: 'yes',
+        _pivotedFrom: 'name'
+      },
+      {
+        'New York': 'Betty',
+        age: 27,
+        color: 'red',
+        other: 'no',
+        _pivotedFrom: 'name'
+      }
     ])
   })
 })

package/helpers/ver/4.25.3.ts

@@ -0,0 +1,43 @@
+import _ from 'lodash'
+
+const remapTableDownloadCSV = config => {
+  if (config.general?.showDownloadButton !== undefined) {
+    let download = config.general.showDownloadButton
+    if (config.type === 'chart') {
+      download = config.table.download || config.general.showDownloadButton
+    }
+    delete config.general.showDownloadButton
+    config.table.download = download
+  }
+  return config
+}
+
+const handleVisualizations = newConfig => {
+  if (newConfig.type === 'dashboard') {
+    Object.keys(newConfig.visualizations).forEach(key => {
+      const currentViz = newConfig.visualizations[key]
+      remapTableDownloadCSV(currentViz)
+    })
+  }
+  remapTableDownloadCSV(newConfig)
+}
+
+const migrateAreaChart = config => {
+  // Migrate regular Area Chart to Stacked
+  if (config.visualizationType === 'Area Chart' && config.visualizationSubType === 'regular') {
+    config.visualizationSubType = 'stacked'
+  }
+  return config
+}
+
+const update_4_25_3 = config => {
+  const ver = '4.25.3'
+  const newConfig = _.cloneDeep(config)
+  handleVisualizations(newConfig)
+  remapTableDownloadCSV(newConfig)
+  migrateAreaChart(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_25_3

package/helpers/ver/4.25.4.ts

@@ -0,0 +1,33 @@
+import _ from 'lodash'
+
+export const makeChartLegendsUnified = config => {
+  if (config.type === 'chart') {
+    config.legend = config.legend || {}
+    config.legend.unified = true
+  } else if (config.type === 'dashboard') {
+    Object.values(config.visualizations).forEach(visualization => {
+      makeChartLegendsUnified(visualization)
+    })
+  }
+}
+
+const migrateTableGeneralSettings = config => {
+  if (config.type === 'map') {
+    if (config.general.showFullGeoNameInCSV) {
+      config.table.showFullGeoNameInCSV = config.general.showFullGeoNameInCSV
+    }
+    delete config.general.showFullGeoNameInCSV
+    return config
+  }
+}
+
+const update_4_25_4 = config => {
+  const ver = '4.25.4'
+  const newConfig = _.cloneDeep(config)
+  makeChartLegendsUnified(newConfig)
+  migrateTableGeneralSettings(newConfig)
+  newConfig.version = ver
+  return newConfig
+}
+
+export default update_4_25_4

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

@@ -0,0 +1,24 @@
+import { expect, describe, it } from 'vitest'
+import { makeChartLegendsUnified } from '../4.25.4'
+import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+import { DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
+
+describe('makeChartLegendsUnified(config) ', () => {
+  it('sets chart legends unified to true', () => {
+    const mockConfig = { type: 'chart', legend: { unified: false } } as Partial<ChartConfig>
+    makeChartLegendsUnified(mockConfig)
+    expect(mockConfig.legend?.unified).toBe(true)
+  })
+  it('sets dashboard nested chart legends unified to true', () => {
+    const mockConfig = {
+      type: 'dashboard',
+      visualizations: {
+        '1': { type: 'chart', legend: { unified: false } } as ChartConfig,
+        '2': { type: 'chart', legend: { unified: false } } as ChartConfig
+      }
+    } as Partial<DashboardConfig>
+    makeChartLegendsUnified(mockConfig)
+    expect(mockConfig.visualizations['1'].legend?.unified).toBe(true)
+    expect(mockConfig.visualizations['2'].legend?.unified).toBe(true)
+  })
+})

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

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+import versionNeedsUpdate from '../versionNeedsUpdate'
+
+describe('versionNeedsUpdate', () => {
+  it('should return true if previousVersion is empty', () => {
+    expect(versionNeedsUpdate('', '1.0.0')).toBe(true)
+  })
+
+  it('should return true if currentVersion has a higher major version', () => {
+    expect(versionNeedsUpdate('1.0.0', '2.0.0')).toBe(true)
+  })
+
+  it('should return true if currentVersion has a higher minor version', () => {
+    expect(versionNeedsUpdate('1.0.0', '1.1.0')).toBe(true)
+  })
+
+  it('should return true if currentVersion has a higher patch version', () => {
+    expect(versionNeedsUpdate('1.0.0', '1.0.1')).toBe(true)
+  })
+
+  it('should return false if currentVersion is the same as previousVersion', () => {
+    expect(versionNeedsUpdate('1.0.0', '1.0.0')).toBe(false)
+  })
+
+  it('should return false if currentVersion is an older version', () => {
+    expect(versionNeedsUpdate('2.0.0', '1.0.0')).toBe(false)
+  })
+})

package/helpers/viewports.ts

@@ -8,3 +8,7 @@ export const isBelowBreakpoint = (breakpoint: ViewportSize, currentViewport: Vie
 export const isLegendWrapViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
 
 export const isMobileHeightViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)
+
+export const isMobileStateLabelViewport = currentViewport => isBelowBreakpoint('md', currentViewport)
+
+export const isMobileTerritoryViewport = currentViewport => isBelowBreakpoint('sm', currentViewport)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.25.3-6",
+  "version": "4.25.5-1",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -23,7 +23,6 @@
   "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",
     "react-select": "^5.3.1",
@@ -34,7 +33,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "d83d8555c1500ff0cad9d2c5c3486324afa15ec6",
+  "gitHead": "1d0a6e716bc113e6bea3636fcae90ebf2d19bb5c",
   "devDependencies": {
     "sass": "^1.79.4"
   }

package/styles/_global-variables.scss

@@ -8,6 +8,7 @@ $colors: (
   'darkGray': #333,
   'red': #d8000c,
   'white': #fff,
+  'silver': #eee,
 
   'primary': #005eaa,
   'secondary': #88c3ea,
@@ -67,7 +68,8 @@ $colors: (
   'cool-gray-90': #1c1d1f,
   'cool-gray-50': #71767a,
   'cool-gray-30': #a9aeb1,
-  'cool-gray-10': #dfe1e2
+  'cool-gray-10': #dfe1e2,
+  'colors-blue-vivid-60': #005ea2
 );
 
 @mixin theme() {
@@ -105,4 +107,6 @@ $colors: (
   --filter-buttons-font-size: 0.889rem;
   --superTitle-font-size: 0.833rem;
   --title-font-size: 1.222rem;
+  --territory-label-font-size: 0.809rem;
+  --territory-label-font-size-mobile: 0.556rem;
 }

package/styles/_global.scss

@@ -104,9 +104,6 @@ textarea {
     outline: 0;
   }
 }
-textarea {
-  min-height: 140px;
-}
 
 .input-group-text {
   border-top-left-radius: 0;
@@ -182,10 +179,22 @@ section.footnotes {
   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(--cool-gray-10);
-  color: var(--cool-gray-90);
+  line-height: normal;
+  padding-right: 3rem;
+  border-radius: 0.333rem;
+  border: 1px solid var(--colors-gray-cool-10);
+  color: var(--colors-primary-text);
+  // recreate caret using svg
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+  background-size: 1em;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+  &:focus-visible {
+    outline: 2px dashed var(--colors-blue-vivid-60, #005ea2) !important;
+    outline-offset: 2px;
+  }
 }

package/styles/_reset.scss

@@ -7,12 +7,6 @@
   font-style: normal;
   text-rendering: optimizeLegibility;
 
-  // match cdc site outline
-  :focus,
-  [tabindex]:focus-visible {
-    outline: 2px solid rgba(255, 102, 1, 0.9) !important;
-  }
-
   .outline-none {
     outline: none !important;
   }

package/styles/base.scss

@@ -192,4 +192,46 @@ body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
   .ms-auto {
     margin-left: auto !important;
   }
+  .pe-0 {
+    padding-right: 0 !important;
+  }
+  .pe-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pe-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pe-3 {
+    padding-right: 1rem !important;
+  }
+  .pe-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pe-5 {
+    padding-right: 3rem !important;
+  }
+  .pe-auto {
+    padding-right: auto !important;
+  }
+  .ps-0 {
+    padding-left: 0 !important;
+  }
+  .ps-1 {
+    padding-left: 0.25rem !important;
+  }
+  .ps-2 {
+    padding-left: 0.5rem !important;
+  }
+  .ps-3 {
+    padding-left: 1rem !important;
+  }
+  .ps-4 {
+    padding-left: 1.5rem !important;
+  }
+  .ps-5 {
+    padding-left: 3rem !important;
+  }
+  .ps-auto {
+    padding-left: auto !important;
+  }
 }

package/styles/filters.scss

@@ -2,7 +2,8 @@
   &__wrapper {
     flex-wrap: wrap;
     display: flex;
-    gap: 18px 27px;
+    gap: 1rem 1.5rem;
+    margin-bottom: 2rem;
     label {
       display: inherit;
       margin-bottom: 5px;
@@ -19,9 +20,6 @@
   &__buttons {
     width: 100%;
     font-size: var(--filter-buttons-font-size);
-    .apply {
-      margin-right: 10px;
-    }
   }
 }
 
@@ -78,6 +76,7 @@ div.single-filters {
   .tab.tab--simple {
     background: none;
     border: none;
+    border-bottom: 0.3rem solid transparent;
     font-family: var(--app-font-secondary);
     font-size: 1rem;
     font-weight: 300;
@@ -86,11 +85,6 @@ div.single-filters {
     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);
@@ -106,7 +100,7 @@ div.single-filters {
 
     &.tab--active {
       font-weight: 500;
-      border-bottom: 0.3rem solid var(--colors-blue-vivid-60, #005ea2);
+      border-bottom-color: var(--colors-blue-vivid-60, #005ea2);
       z-index: 1;
     }
   }
@@ -115,7 +109,7 @@ div.single-filters {
   @include breakpointClass(xs) {
     .single-filters--tab-simple .tab-simple-container .tab.tab--simple {
       font-size: 0.778em;
-      padding: 0.5rem 0.778em;
+      padding: 0.5rem 0.73em;
     }
   }
 }

package/styles/v2/components/button.scss

@@ -1,6 +1,23 @@
 @import '../utils/variables';
 @import '../themes/index';
 
+:root {
+  --cove-button-primary: var(--colors-blue-vivid-60);
+  --cove-button-primary-font-color: #fff;
+  --cove-button-primary-hover: #0b4778;
+  --cove-button-primary-disabled: var(--cool-gray-10);
+  --cove-button-primary-disabled-font-color: var(--cool-gray-90);
+
+  --cove-button-secondary: #fff;
+  --cove-button-secondary-font-color: var(--colors-blue-vivid-60);
+  --cove-button-secondary-border-color: var(--colors-blue-vivid-60);
+  --cove-button-secondary-hover: #0b4778;
+  --cove-button-secondary-hover-font-color: #fff;
+  --cove-button-secondary-disabled: #f5f6f7;
+  --cove-button-secondary-disabled-font-color: var(--cool-gray-90);
+  --cove-button-secondary-disabled-border-color: var(--cool-gray-10);
+}
+
 .sbdocs .cove-button {
   margin-right: 1rem;
   margin-bottom: 1rem;
@@ -11,7 +28,7 @@
   }
 }
 
-.cove-button {
+.cdc-open-viz-module button.cove-button {
   display: inline-block;
   position: relative;
   min-height: 2.125rem;
@@ -19,12 +36,30 @@
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
-  color: #fff;
-  background-color: $primary;
-  border-radius: 0.1875rem;
+  color: var(--cove-button-primary-font-color);
+  background-color: var(--cove-button-primary);
+  border-radius: 6px;
   border: 0;
   outline: none;
-  transition: all 500ms $transition-expo-out;
+  transition: background-color 500ms $transition-expo-out, color 500ms $transition-expo-out,
+    border-color 500ms $transition-expo-out;
+
+  &.secondary {
+    background-color: var(--cove-button-secondary);
+    color: var(--cove-button-secondary-font-color);
+    border: 1px solid var(--cove-button-secondary-border-color);
+
+    &:hover {
+      background-color: var(--cove-button-secondary-hover);
+      color: var(--cove-button-secondary-hover-font-color);
+    }
+
+    &:disabled {
+      background-color: var(--cove-button-secondary-disabled);
+      color: var(--cove-button-secondary-disabled-font-color);
+      border: 1px solid var(--cove-button-secondary-disabled-border-color);
+    }
+  }
 
   * {
     pointer-events: none;
@@ -32,7 +67,8 @@
   }
 
   &:disabled {
-    background-color: #959595 !important;
+    background-color: var(--cove-button-primary-disabled);
+    color: var(--cove-button-primary-disabled-font-color);
     cursor: not-allowed;
   }
 
@@ -40,11 +76,12 @@
     cursor: pointer;
   }
 
-  &:hover,
-  &:active,
-  &:focus,
-  &.active {
-    background-color: lighten($primary, 5%);
+  &:hover:not(:disabled) {
+    background-color: var(--cove-button-primary-hover);
+  }
+  &:focus {
+    outline: 2px dashed var(--colors-blue-vivid-60) !important;
+    outline-offset: 5px;
   }
 
   &:not(.loading) {
@@ -54,7 +91,6 @@
         content: '';
         position: absolute;
         inset: 0;
-        outline: 2px solid rgba(161, 161, 161, 0.6);
         border-radius: 0.3125em;
         margin: -2px;
         pointer-events: none;

package/styles/v2/main.scss

@@ -6,11 +6,6 @@
   font-size: 16px;
   line-height: 1.4;
 
-  :focus,
-  [tabindex]:focus-visible {
-    outline: 2px solid rgba(255, 102, 1, 0.9);
-  }
-
   margin: 0;
   font-family: var(--app-font-main);
   font-size: 1em;

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

@@ -148,9 +148,6 @@ $theme: (
         background-color: string.unquote(nth($theme-colors, 1));
         color: #fff;
       }
-      .filters-section button.cove-button:not([disabled]) {
-        background-color: string.unquote(nth($theme-colors, 1)) !important;
-      }
     }
 
     .theme-#{$theme-name} {
@@ -173,7 +170,7 @@ $theme: (
         outline: 2px solid string.unquote(nth($theme-colors, 1));
       }
       .apply:not([disabled]) {
-        background-color: string.unquote(nth($theme-colors, 1)) !important;
+        background-color: string.unquote(nth($theme-colors, 1));
       }
     }
   }

package/types/General.ts

@@ -4,7 +4,6 @@ export type General = {
   boxplot: BoxPlot
   geoType: string
   type: string
-  showDownloadButton: boolean
   allowMapZoom?: boolean
   showMissingDataLabel: boolean
   showSuppressedSymbol: boolean
@@ -12,4 +11,5 @@ export type General = {
   showAnnotationDropdown?: boolean
   hideNullValue: boolean
   title: string
+  annotationDropdownText?: string
 }

package/types/Legend.ts

@@ -15,4 +15,5 @@ export type Legend = {
   singleRow: boolean
   type: string
   verticalSorted: boolean
+  groupBy: string
 }

package/types/Table.ts

@@ -9,6 +9,7 @@ export type Table = {
   collapsible?: boolean
   dateDisplayFormat?: string
   download?: boolean
+  downloadVisibleDataOnly?: boolean
   downloadImageButton?: boolean
   downloadPdfButton?: boolean
   excludeColumns?: string[]
@@ -20,6 +21,7 @@ export type Table = {
   limitHeight?: boolean
   pivot?: Pivot
   show?: boolean
+  sharedFilterColumns?: string[] // added at runtime by Dashboard
   showDataTableLink?: boolean
   showDownloadImgButton?: boolean
   showDownloadLinkBelow?: boolean