@cdc/core 4.25.8 → 4.25.10

package/components/ui/_stories/Colors.stories.mdx

@@ -1,220 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'
-import colorPalettes from '@cdc/core/data/colorPalettes'
-
-export const orderedPalettes = Object.keys(colorPalettes)
-.sort()
-.reduce((acc, key) => {
-acc[key] = colorPalettes[key]
-return acc
-}, {})
-
-export const paletteFriendlyNames = {
-  'yelloworangered': 'Yellow Orange Red',
-  'yelloworangebrown': 'Yellow Orange Brown',
-  'pinkpurple': 'Pink Purple',
-  'bluegreen': 'Blue Green',
-  'orangered': 'Orange Red',
-  'red': 'Red Scale',
-  'greenblue': 'Green Blue',
-  'yellowpurple': 'Yellow Purple',
-  'qualitative-bold': 'Bold Multi-Color',
-  'qualitative-soft': 'Soft Multi-Color',
-  'qualitative1': 'Multi-Color Set 1',
-  'qualitative2': 'Multi-Color Set 2',
-  'qualitative3': 'Multi-Color Set 3',
-  'qualitative4': 'Multi-Color Set 4',
-  'sequential-blue': 'Blue Sequential',
-  'sequential-blue-2-(MPX)': 'Blue Sequential Alt',
-  'sequential-blue-2(MPX)': 'Blue Sequential Alt',
-  'sequential-orange-(MPX)': 'Orange Sequential',
-  'sequential-orange(MPX)': 'Orange Sequential',
-  'sequential-green': 'Green Sequential',
-  'Sequential Blue': 'Blue Sequential',
-  'Sequential Blue Two': 'Blue Sequential Alt',
-  'Sequential Blue Three': 'Blue Sequential Extended',
-  'Sequential Orange': 'Orange Sequential',
-  'Sequential Orange Two': 'Orange Sequential Extended',
-  'Sequential Green': 'Green Sequential',
-  'monochrome-1': 'Blue Mono',
-  'monochrome-2': 'Purple Mono',
-  'monochrome-3': 'Lavender Mono',
-  'monochrome-4': 'Violet Mono',
-  'monochrome-5': 'Brown Mono',
-  'cool-1': 'Cool Green Blue',
-  'cool-2': 'Cool Blue Green',
-  'cool-3': 'Cool Purple Blue',
-  'cool-4': 'Cool Green Purple',
-  'cool-5': 'Cool Blue Purple',
-  'warm-1': 'Warm Red Peach',
-  'complementary-1': 'Blue Gold',
-  'complementary-2': 'Blue Orange',
-  'complementary-3': 'Purple Orange',
-  'complementary-4': 'Purple Gold',
-  'complementary-5': 'Pink Teal',
-  'colorblindsafe': 'Colorblind Safe',
-}
-
-export const getPaletteName = (paletteName) => {
-  const isReversed = paletteName.endsWith('reverse');
-  const baseName = isReversed ? paletteName.slice(0, -7) : paletteName; // Remove 'reverse' suffix
-  const normalizedKey = baseName
-    .toLowerCase()
-    .replace(/\s+/g, '-')
-    .replace(/-/g, ' ')
-    .replace(/\(mpx\)/gi, ' (MonkeyPox)');
-  const friendlyName = paletteFriendlyNames[normalizedKey] || baseName
-    .replace(/-/g, ' ')
-    .replace(/\(mpx\)/gi, ' (MonkeyPox)');
-
-  const capitalizeWords = (str) => str.replace(/\b\w/g, (char) => char.toUpperCase());
-  const formattedName = capitalizeWords(friendlyName);
-
-  return isReversed ? `${formattedName} (Reversed)` : formattedName;
-};
-
-<Meta title="Design Systems/Colors" />
-
-# Visualization Color Palettes
-The color palettes are predefined sets of colors organized into categories like sequential, qualitative, and complementary groups. These groups are designed with visual clarity in mind to ensure a cohesive and effective representation of data. The palettes are listed alphabetically, with reversed versions placed directly next to their original counterparts to maintain consistency across the application. In the codebase, these palettes are dynamically applied to generate and display color schemes in various UI components, such as charts and visualizations.
-
-<ColorPalette>
-  {Object.entries(orderedPalettes).map(([paletteName, colors]) => {
-
-
-    return (
-    <ColorItem
-      key={paletteName}
-      title={getPaletteName(paletteName)}
-      colors={colors}
-    />
-  )}
-  )}
-</ColorPalette>
-
-# CDC Specific & Additional Colors
-These are additional color palettes that can be used for various UI components. When using these consult CDC Level documentation.
-
-
-<ColorPalette>
-  {[
-    {
-      title: 'Blue',
-      colors: {
-        Primary: '#005eaa',
-        Secondary: '#88c3ea',
-        Tertiary: '#c0e9ff',
-        Quaternary: '#edf9ff'
-      }
-    },
-    {
-      title: 'Purple',
-      colors: {
-        Primary: '#712177',
-        Secondary: '#b890bb',
-        Tertiary: '#e3d3e4',
-        Quaternary: '#f7f2f7'
-      }
-    },
-    {
-      title: 'Brown',
-      colors: {
-        Primary: '#705043',
-        Secondary: '#ad907b',
-        Tertiary: '#d7ccc8',
-        Quaternary: '#f2ebe8'
-      }
-    },
-    {
-      title: 'Teal',
-      colors: {
-        Primary: '#00695c',
-        Secondary: '#4ebaaa',
-        Tertiary: '#ceece7',
-        Quaternary: '#ebf7f5'
-      }
-    },
-    {
-      title: 'Pink',
-      colors: {
-        Primary: '#af4448',
-        Secondary: '#e57373',
-        Tertiary: '#ffc2c2',
-        Quaternary: '#ffe7e7'
-      }
-    },
-    {
-      title: 'Orange',
-      colors: {
-        Primary: '#bb4d00',
-        Secondary: '#ffad42',
-        Tertiary: '#ffe97d',
-        Quaternary: '#fff4cf'
-      }
-    },
-    {
-      title: 'Slate',
-      colors: {
-        Primary: '#29434e',
-        Secondary: '#7e9ba5',
-        Tertiary: '#b6c6d2',
-        Quaternary: '#e2e8ed'
-      }
-    },
-    {
-      title: 'Indigo',
-      colors: {
-        Primary: '#26418f',
-        Secondary: '#92a6dd',
-        Tertiary: '#dee8ff',
-        Quaternary: '#f2f6ff'
-      }
-    },
-    {
-      title: 'Cyan',
-      colors: {
-        Primary: '#006778',
-        Secondary: '#65b0bd',
-        Tertiary: '#cce5e9',
-        Quaternary: '#ebf5f6'
-      }
-    },
-    {
-      title: 'Green',
-      colors: {
-        Primary: '#4b830d',
-        Secondary: '#84bc49',
-        Tertiary: '#dcedc8',
-        Quaternary: '#f1f8e9'
-      }
-    },
-    {
-      title: 'Amber',
-      colors: {
-        Primary: '#fbab18',
-        Secondary: '#ffd54f',
-        Tertiary: '#ffecb3',
-        Quaternary: '#fff7e1'
-      }
-    },
-    {
-      title: 'Grayscale',
-      colors: {
-        'Base Color': '#333',
-        'Lightest Gray': '#f2f2f2',
-        'Light Gray': '#c7c7c7',
-        'Medium Gray': '#565656',
-        'Dark Gray': '#333',
-      }
-    },
-    {
-      title: 'White',
-      colors: ['#FFF']
-    },
-    {
-      title: 'Red',
-      colors: ['#d8000c']
-    }
-  ].map(({ title, colors }) => (
-    <ColorItem key={title} title={title} colors={colors} subtitle={'test'} />
-  ))}
-</ColorPalette>

package/components/ui/_stories/IconGallery.stories.mdx

@@ -1,14 +0,0 @@
-import { Meta, IconGallery, IconItem } from '@storybook/blocks';
-import Icon, { ICON_TYPES } from '../Icon'
-
-<Meta title="Design Systems/Iconography" />
-
-# Iconography
-
-<IconGallery>
-  {ICON_TYPES.map((name) => (
-  <IconItem name={name}>
-      <Icon display={name} />
-  </IconItem>
-  ))}
-</IconGallery>

package/data/colorPalettes.js

@@ -1,171 +0,0 @@
-import { updatePaletteNames } from '../helpers/updatePaletteNames'
-
-const colorPalettesMap = {
-  yelloworangered: ['#ffffcc', '#ffeda0', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#bd0026', '#800026'],
-  yelloworangebrown: [
-    '#ffffe5',
-    '#fff7bc',
-    '#fee391',
-    '#fec44f',
-    '#fe9929',
-    '#ec7014',
-    '#cc4c02',
-    '#993404',
-    '#662506'
-  ],
-  pinkpurple: ['#fff7f3', '#fde0dd', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177', '#49006a'],
-  bluegreen: ['#fff7fb', '#ece2f0', '#d0d1e6', '#a6bddb', '#67a9cf', '#3690c0', '#02818a', '#016c59', '#014636'],
-  orangered: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
-  red: ['#fff5f0', '#fee0d2', '#fcbba1', '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#a50f15', '#67000d'],
-  greenblue: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#267BA6', '#0868ac', '#084081'],
-  yellowpurple: ['#FFF0B0', '#F5CC76', '#EDAE4B', '#E3683C', '#BF2A48', '#6D2059', '#8F0C4B', '#310958', '#0E0943'],
-  qualitative1: [
-    '#a6cee3',
-    '#1f78b4',
-    '#b2df8a',
-    '#33a02c',
-    '#fb9a99',
-    '#e31a1c',
-    '#6a3d9a',
-    '#cab2d6',
-    '#E31A90',
-    '#15017A',
-    '#C2C0FC'
-  ],
-  qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
-  qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
-  qualitative4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ff3', '#a65628', '#f781bf'],
-  // qualitative9 doesn't appear to be used anywhere...
-  qualitative9: ['#497d0c', '#84BC49', '#88c3ea', '#fcad90', '#f26b4f', '#c31b1f', '#c31b1f'],
-  'sequential-blue-2(MPX)': [
-    '#F5FEFF',
-    '#E1FBFF',
-    '#C0F2FD',
-    '#94E2ED',
-    '#5EBAD4',
-    '#3695BE',
-    '#2273A0',
-    '#0E5181',
-    '#093460'
-  ],
-  'sequential-orange(MPX)': [
-    '#FFFDF0',
-    '#FFF7DC',
-    '#FFE9C2',
-    '#FFD097',
-    '#F7A866',
-    '#EB7723',
-    '#B95117',
-    '#853209',
-    '#661F00'
-  ],
-  colorblindsafe: ['#e69f00', '#56b4e9', '#009e73', '#f0e442', '#0072b2', '#d55e00', '#cc79a7', '#000000', '#7e5803']
-}
-
-// * ============= Palettes for Chart project ==========  * //
-
-const colorPalettes2 = {
-  'qualitative-bold': [
-    '#377eb8',
-    '#ff7f00',
-    '#4daf4a',
-    '#984ea3',
-    '#e41a1c',
-    '#ffff33',
-    '#a65628',
-    '#f781bf',
-    '#3399CC'
-  ],
-
-  'qualitative-soft': [
-    '#A6CEE3',
-    '#1F78B4',
-    '#B2DF8A',
-    '#33A02C',
-    '#FB9A99',
-    '#E31A1C',
-    '#FDBF6F',
-    '#FF7F00',
-    '#ACA9EB'
-  ],
-  qualitative1: [
-    '#a6cee3',
-    '#1f78b4',
-    '#b2df8a',
-    '#33a02c',
-    '#fb9a99',
-    '#e31a1c',
-    '#6a3d9a',
-    '#cab2d6',
-    '#E31A90',
-    '#15017A',
-    '#C2C0FC'
-  ],
-
-  qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
-
-  qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
-
-  qualitative4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ff3', '#a65628', '#f781bf'],
-
-  'sequential-blue': ['#C6DBEF', '#9ECAE1', '#6BAED6', '#4292C6', '#2171B5', '#084594'],
-  'sequential-blue-2-(MPX)': ['#D5F6F9', '#99E2ED', '#5FB6D1', '#3189B0', '#116091', '#0A3E72'],
-  'sequential-orange-(MPX)': ['#FFEFCF', '#FFD49C', '#F7A866', '#EB7723', '#B95117', '#862B0B'],
-  'sequential-green': ['#C7E9C0', '#A1D99B', '#74C476', '#41AB5D', '#238B45', '#005A32'],
-
-  colorblindsafe: ['#e69f00', '#56b4e9', '#009e73', '#f0e442', '#0072b2', '#d55e00', '#cc79a7', '#000000', '#7e5803']
-}
-// * ============= Palettes for Paired bar Chart ==========  * //
-export const colorPalettes3 = {
-  'monochrome-1': ['#A6CEE3', '#15017A'],
-  'monochrome-2': ['#C2C0FC', '#15017A'],
-  'monochrome-3': ['#cab2d6', '#6a3d9a'],
-  'monochrome-4': ['#C2C0FC', '#6a3d9a'],
-  'monochrome-5': ['#fedab8', '#bf5b17'],
-  'cool-1': ['#b2df8a', '#1f78b4'],
-  'cool-2': ['#a6cee3', '#72D66B'],
-  'cool-3': ['#C2C0FC', '#386cb0'],
-  'cool-4': ['#72D66B', '#6a3d9a'],
-  'cool-5': ['#a6cee3', '#6a3d9a'],
-  'warm-1': ['#e31a1c', '#fedab8'],
-  'complementary-1': ['#1f78b4', '#e6ab02'],
-  'complementary-2': ['#1f78b4', '#ff7f00'],
-  'complementary-3': ['#6a3d9a', '#ff7f00'],
-  'complementary-4': ['#6a3d9a', '#e6ab02'],
-  'complementary-5': ['#df168c', '#1EB386']
-}
-
-const sequentialColors = {
-  'Sequential Blue': ['#C6DBEF', '#9ECAE1', '#6BAED6', '#4292C6', '#2171B5', '#084594'],
-  'Sequential Blue Two': ['#D5F6F9', '#99E2ED', '#5FB6D1', '#3189B0', '#116091', '#0A3E72'],
-  'Sequential Blue Three': [
-    '#F5FEFF',
-    '#E1FBFF',
-    '#C0F2FD',
-    '#94E2ED',
-    '#5EBAD4',
-    '#3695BE',
-    '#2273A0',
-    '#0E5181',
-    '#093460'
-  ],
-  'Sequential Orange': ['#FFEFCF', '#FFD49C', '#F7A866', '#EB7723', '#B95117', '#862B0B'],
-  'Sequential Orange Two': [
-    '#FFFDF0',
-    '#FFF7DC',
-    '#FFE9C2',
-    '#FFD097',
-    '#F7A866',
-    '#EB7723',
-    '#B95117',
-    '#853209',
-    '#661F00'
-  ],
-  'Sequential Green': ['#C7E9C0', '#A1D99B', '#74C476', '#41AB5D', '#238B45', '#005A32']
-}
-
-export const sequentialPalettes = sequentialColors
-export const colorPalettesChart = updatePaletteNames(colorPalettes2)
-const colorPalettes = updatePaletteNames(colorPalettesMap)
-export const twoColorPalette = updatePaletteNames(colorPalettes3)
-export default colorPalettes

package/helpers/formatConfigBeforeSave.ts

@@ -1,135 +0,0 @@
-import Footnotes from '@cdc/core/types/Footnotes'
-import { AnyVisualization, Visualization } from '@cdc/core/types/Visualization'
-import { DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
-import { removeDashboardFilter } from '@cdc/dashboard/src/helpers/removeDashboardFilter'
-import _ from 'lodash'
-
-const cleanDashboardFootnotes = (config: DashboardConfig) => {
-  if (config.visualizations) {
-    Object.keys(config.visualizations).forEach(vizKey => {
-      const viz: Visualization = config.visualizations[vizKey]
-      if (viz.footnotes) {
-        delete config.visualizations[vizKey].footnotes.data
-        delete config.visualizations[vizKey].footnotes.formattedData
-      }
-    })
-  }
-}
-
-const cleanDashboardData = (config: DashboardConfig) => {
-  if (config.datasets) {
-    Object.keys(config.datasets).forEach(datasetKey => {
-      delete config.datasets[datasetKey].formattedData
-      if (config.datasets[datasetKey].dataUrl) {
-        delete config.datasets[datasetKey].data
-      }
-    })
-  }
-  if (config.visualizations) {
-    Object.keys(config.visualizations).forEach(vizKey => {
-      config.visualizations[vizKey] = _.omit(config.visualizations[vizKey], [
-        'runtime',
-        'formattedData',
-        'data',
-        'editing',
-        'originalFormattedData'
-      ])
-    })
-  }
-  if (config.rows) {
-    config.rows.forEach((row, i) => {
-      if (row.dataKey) {
-        config.rows[i] = _.omit(row, ['data', 'formattedData'])
-      }
-    })
-  }
-}
-
-export const cleanSharedFilters = (config: DashboardConfig) => {
-  if (config.dashboard?.sharedFilters) {
-    const recursiveRemoveFilters = (sharedFilters, visualizations: Record<string, AnyVisualization>) => {
-      const usedFilters = _.uniq(
-        Object.values(visualizations).reduce((acc, viz) => {
-          if (viz.type === 'dashboardFilters') {
-            acc = acc.concat(viz.sharedFilterIndexes)
-          }
-          return acc
-        }, [])
-      )
-      for (let index = 0; index < sharedFilters.length; index++) {
-        const filter = sharedFilters[index]
-        if (!usedFilters.includes(index)) {
-          const [newSharedFilters, newVisualizations] = removeDashboardFilter(
-            index,
-            config.dashboard.sharedFilters,
-            config.visualizations
-          )
-          config.dashboard.sharedFilters = newSharedFilters
-          config.visualizations = newVisualizations
-          recursiveRemoveFilters(newSharedFilters, newVisualizations)
-          break
-        } else {
-          delete config.dashboard.sharedFilters[index].active
-          if (filter.subGrouping) delete config.dashboard.sharedFilters[index].subGrouping.active
-          if (filter.type === 'urlfilter') {
-            delete config.dashboard.sharedFilters[index].values
-          }
-        }
-      }
-    }
-
-    recursiveRemoveFilters(config.dashboard.sharedFilters, config.visualizations)
-  }
-}
-
-const cleanVisualizationFilters = (config: DashboardConfig) => {
-  if (config.visualizations) {
-    Object.keys(config.visualizations).forEach(vizKey => {
-      const vizFilters = config.visualizations[vizKey].filters || []
-      vizFilters.forEach((_filter, index) => {
-        delete config.visualizations[vizKey].filters[index].active
-        delete config.visualizations[vizKey].filters[index].values
-      })
-    })
-  }
-}
-
-const removeRuntimeDataURLs = (config: DashboardConfig) => {
-  if (config.datasets) {
-    Object.keys(config.datasets).forEach(datasetKey => {
-      delete config.datasets[datasetKey].runtimeDataUrl
-    })
-  }
-}
-
-export const formatConfigBeforeSave = configToStrip => {
-  const strippedConfig = _.cloneDeep(configToStrip)
-  if (strippedConfig.type === 'dashboard') {
-    if (strippedConfig.multiDashboards) {
-      strippedConfig.multiDashboards.forEach((multiDashboard, i) => {
-        cleanDashboardData(strippedConfig.multiDashboards[i])
-        cleanSharedFilters(strippedConfig.multiDashboards[i])
-        cleanDashboardFootnotes(strippedConfig.multiDashboards[i])
-        cleanVisualizationFilters(strippedConfig.multiDashboards[i])
-      })
-      delete strippedConfig.dashboard
-      delete strippedConfig.rows
-      delete strippedConfig.visualizations
-      delete strippedConfig.label
-    }
-    delete strippedConfig.activeDashboard
-    cleanDashboardData(strippedConfig)
-    cleanSharedFilters(strippedConfig)
-    cleanDashboardFootnotes(strippedConfig)
-    cleanVisualizationFilters(strippedConfig)
-    removeRuntimeDataURLs(strippedConfig)
-  } else {
-    delete strippedConfig.runtime
-    delete strippedConfig.formattedData
-    if (strippedConfig.dataUrl) {
-      delete strippedConfig.data
-    }
-  }
-
-  return strippedConfig
-}

package/helpers/tests/formatConfigBeforeSave.test.ts

@@ -1,68 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { cleanSharedFilters } from '../formatConfigBeforeSave'
-import { DashboardConfig } from '@cdc/dashboard/src/types/DashboardConfig'
-
-describe('cleanSharedFilters', () => {
-  it('should remove unused shared filters', () => {
-    const config: DashboardConfig = {
-      dashboard: {
-        sharedFilters: [
-          { id: 1, type: 'filter1' },
-          { id: 2, type: 'filter2' },
-          { id: 3, type: 'filter3' },
-          { id: 4, type: 'filter4' }
-        ]
-      },
-      visualizations: {
-        viz1: { type: 'dashboardFilters', sharedFilterIndexes: [0, 3] },
-        viz2: { type: 'chart'}
-      }
-    }
-
-    cleanSharedFilters(config)
-
-    expect(config.dashboard.sharedFilters).toEqual([{ id: 1, type: 'filter1' }, { id: 4, type: 'filter4' }])
-  })
-
-  it('should retain used shared filters and remove their active state', () => {
-    const config: DashboardConfig = {
-      dashboard: {
-        sharedFilters: [
-          { id: 1, type: 'filter1', active: true },
-          { id: 2, type: 'filter2', active: true }
-        ]
-      },
-      visualizations: {
-        viz1: { type: 'dashboardFilters', sharedFilterIndexes: [0] },
-        viz2: { type: 'dashboardFilters', sharedFilterIndexes: [1] }
-      }
-    }
-
-    cleanSharedFilters(config)
-
-    expect(config.dashboard.sharedFilters).toEqual([
-      { id: 1, type: 'filter1' },
-      { id: 2, type: 'filter2' }
-    ])
-  })
-
-  it('should remove values from urlfilter type shared filters', () => {
-    const config: DashboardConfig = {
-      dashboard: {
-        sharedFilters: [
-          { id: 1, type: 'urlfilter', values: [1, 2, 3] },
-          { id: 2, type: 'filter2' }
-        ]
-      },
-      visualizations: {
-        viz1: { type: 'dashboardFilters', sharedFilterIndexes: [0] }
-      }
-    }
-
-    cleanSharedFilters(config)
-
-    expect(config.dashboard.sharedFilters).toEqual([
-      { id: 1, type: 'urlfilter' }
-    ])
-  })
-})