@cdc/core 4.24.9 → 4.24.11

package/components/_stories/DataTable.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'
 
 import DataTable from '../DataTable'
 import './styles.scss'
+import NoDataConfig from './_mocks/DataTable/no-data.json'
 import Example_1 from './_mocks/dashboard_no_filter.json'
 import CityStateExample from './_mocks/example-city-state.json'
 import { displayGeoName } from '@cdc/map/src/helpers/displayGeoName'
@@ -62,6 +63,19 @@ export const Grouped: Story = {
   }
 }
 
+const noDataData = NoDataConfig.datasets['dev-8931-hide-markup-include.csv'].data
+export const NoData: Story = {
+  args: {
+    config: NoDataConfig,
+    dataConfig: { data: noDataData },
+    rawData: noDataData,
+    runtimeData: noDataData,
+    expandDataTable: true,
+    tableTitle: 'No Data Table',
+    viewport: 'lg',
+    tabbingId: '#asdf'
+  }
+}
 export const RowType: Story = {
   args: {
     config: {

package/components/_stories/Filters.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import Filters from '../Filters'
+import { VizFilter } from '../../types/VizFilter'
+import { faker } from '@faker-js/faker'
+import _ from 'lodash'
+import { Visualization } from '../../types/Visualization'
+
+const meta: Meta<typeof Filters> = {
+  title: 'Components/Molecules/Visualization Filters',
+  component: Filters
+}
+
+type Story = StoryObj<typeof Filters>
+
+faker.seed(123)
+
+const animalData = _.times(7, () => ({ bear: faker.animal.bear(), cat: faker.animal.cat(), cow: faker.animal.cow() }))
+const generateFilters = filterStyle => {
+  return ['bear', 'cat', 'cow'].map(columnName => {
+    return {
+      filterStyle,
+      label: columnName.toUpperCase(),
+      columnName
+    } as VizFilter
+  })
+}
+
+const generateConfig = filterStyle =>
+  ({
+    args: {
+      config: {
+        filters: generateFilters(filterStyle),
+        data: animalData
+      } as Visualization,
+      filteredData: animalData,
+      setFilteredData: () => {},
+      setConfig: () => {},
+      exclusions: []
+    }
+  } as Story)
+
+export const Dropdown: Story = generateConfig('dropdown')
+
+export const DropdownBar: Story = generateConfig('dropdown bar')
+
+export const MultiSelect: Story = generateConfig('multi-select')
+
+export const NestedDropdown: Story = generateConfig('nested-dropdown')
+
+export const Pill: Story = generateConfig('pill')
+
+export const Tab: Story = generateConfig('tab')
+
+export const TabBar: Story = generateConfig('tab bar')
+
+export default meta

package/components/_stories/NestedDropdown.stories.tsx

@@ -1,58 +1,34 @@
 import { Meta, StoryObj } from '@storybook/react'
-
 import NestedDropdown from '../NestedDropdown'
+import nestedDropdownStory from './_mocks/nested-dropdown.json'
+import { useState } from 'react'
 
 const meta: Meta<typeof NestedDropdown> = {
   title: 'Components/Molecules/NestedDropdown',
   component: NestedDropdown
 }
 
+const Template = args => {
+  const [currentStoryFilter, setCurrentStoryFilter] = useState({
+    ...nestedDropdownStory
+  })
+  return (
+    <NestedDropdown
+      listLabel='Age'
+      handleSelectedItems={([group, subGroup]) => {
+        setCurrentStoryFilter({
+          ...currentStoryFilter,
+          active: group,
+          subGrouping: { ...currentStoryFilter.subGrouping, active: subGroup }
+        })
+      }}
+      currentFilter={currentStoryFilter}
+    />
+  )
+}
+
 type Story = StoryObj<typeof NestedDropdown>
 
-export const Primary: Story = {
-  args: {
-    data: [
-      {
-        country: 'USA',
-        region: 'Region1'
-      },
-      {
-        country: 'USA',
-        region: 'Florida'
-      },
-      {
-        country: 'USA',
-        region: 'Iowa'
-      },
-      {
-        country: 'Country2',
-        region: 'Region1'
-      },
-      {
-        country: 'Country2',
-        region: 'Region2'
-      },
-      {
-        country: 'Country2',
-        region: 'Region3'
-      },
-      {
-        country: 'Italy',
-        region: 'Region1'
-      },
-      {
-        country: 'Italy',
-        region: 'Naples'
-      },
-      {
-        country: 'Italy',
-        region: 'Region3'
-      }
-    ],
-    tiers: ['country', 'region'],
-    listLabel: 'Countries of the World',
-    handleSelectedItems: console.log
-  }
-}
+export const Primary: Story = Template.bind({})
 
 export default meta

package/components/_stories/_mocks/DataTable/no-data.json

@@ -0,0 +1,108 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": []
+  },
+  "rows": [
+    {
+      "columns": [
+        {
+          "width": 12,
+          "widget": "table1730380781112"
+        }
+      ],
+      "uuid": 1730380998726
+    }
+  ],
+  "visualizations": {
+    "table1730380781112": {
+      "filters": [],
+      "filterBehavior": "Filter Change",
+      "newViz": false,
+      "openModal": true,
+      "uid": "table1730380781112",
+      "type": "table",
+      "table": {
+        "label": "Data Table",
+        "show": true,
+        "showDownloadUrl": false,
+        "showVertical": true,
+        "expanded": true,
+        "collapsible": true
+      },
+      "columns": {
+        "additionalColumn1": {
+          "label": "New Column",
+          "dataTable": true,
+          "tooltips": false,
+          "prefix": "",
+          "suffix": "",
+          "forestPlot": false,
+          "startingPoint": "0",
+          "forestPlotAlignRight": false,
+          "roundToPlace": 0,
+          "commas": false,
+          "showInViz": false,
+          "forestPlotStartingPoint": 0
+        },
+        "Class": {
+          "name": "Class",
+          "dataTable": false
+        },
+        "Data_Type": {
+          "name": "Data_Type",
+          "dataTable": false
+        },
+        "Question": {
+          "name": "Question",
+          "dataTable": false
+        },
+        "Response": {
+          "name": "Response",
+          "dataTable": false
+        },
+        "Topic": {
+          "name": "Topic",
+          "dataTable": false
+        }
+      },
+      "dataFormat": {},
+      "visualizationType": "table",
+      "dataDescription": {
+        "horizontal": false,
+        "series": false
+      },
+      "dataKey": "dev-8931-hide-markup-include.csv"
+    }
+  },
+  "table": {
+    "label": "Data Table",
+    "show": true,
+    "showDownloadUrl": false,
+    "showDownloadLinkBelow": true,
+    "showVertical": true
+  },
+  "newViz": true,
+  "datasets": {
+    "dev-8931-hide-markup-include.csv": {
+      "data": [],
+      "dataFileSize": 10023,
+      "dataFileName": "dev-8931-hide-markup-include.csv",
+      "dataFileSourceType": "file",
+      "dataFileFormat": "CSV",
+      "preview": true
+    }
+  },
+  "isResponsiveTicks": false,
+  "type": "dashboard",
+  "barThickness": "0.37",
+  "xAxis": {
+    "type": "categorical",
+    "size": 75,
+    "maxTickRotation": 45,
+    "labelOffset": 0
+  },
+  "runtime": {},
+  "version": "4.24.10",
+  "uuid": 1730380778769
+}

package/components/_stories/_mocks/nested-dropdown.json

@@ -0,0 +1,30 @@
+{
+  "key": "New Dashboard Filter 1",
+  "showDropdown": true,
+  "values": ["Age Group", "Age Group 2", "Age Group 3"],
+  "orderedValues": ["Age Group", "Age Group 2", "Age Group 3"],
+  "type": "datafilter",
+  "filterStyle": "nested-dropdown",
+  "columnName": "StratficationCategory1",
+  "active": "",
+  "subGrouping": {
+    "columnName": "Stratification1",
+    "active": "",
+    "valuesLookup": {
+      "Age Group": {
+        "orderedValues": ["50-64 years", "65 years or older", "Overall"],
+        "values": ["50-64 years", "65 years or older", "Overall"]
+      },
+      "Age Group 2": {
+        "orderedValues": ["65 years or older", "Overall"],
+        "values": ["65 years or older", "Overall"]
+      },
+      "Age Group 3": {
+        "orderedValues": ["50-64 years", "Overall"],
+        "values": ["50-64 years", "Overall"]
+      }
+    }
+  },
+  "usedBy": ["chart1724946676832"],
+  "tier": 1
+}

package/components/_stories/styles.scss

@@ -1,7 +1,6 @@
 @import '../../styles/base.scss';
 @import '../../styles/_variables';
 @import '../../styles/_mixins';
-@import '../../styles/_data-table';
 @import '../../styles/_global.scss';
 
 .visually-hidden {

package/components/ui/Icon.tsx

@@ -88,15 +88,24 @@ type IconProps = {
   /* Returns icon data as plain svg */
   base?: boolean
   /* Sets alt text for the icon */
-  alt: string
+  alt?: string
   /* Override the width of the icon (scales height proportionally)*/
   size?: number
   /* Override the color of the icon */
   color?: string
-  style?: string
+  style?: object
+  className?: string // className attribute will be ignored.
 }
 
-const Icon: React.FC<IconProps> = ({ display = '', base = undefined, alt = '', size = undefined, color = undefined, style = undefined, ...attributes }) => {
+const Icon: React.FC<IconProps> = ({
+  display = '',
+  base = undefined,
+  alt = '',
+  size = undefined,
+  color = undefined,
+  style = undefined,
+  ...attributes
+}) => {
   const IconObj = iconHash[display] || null
 
   const filteredAttrs = { ...attributes }
@@ -112,10 +121,14 @@ const Icon: React.FC<IconProps> = ({ display = '', base = undefined, alt = '', s
   return (
     <>
       {base ? (
-        <IconObj title={alt} />
+        <IconObj title={alt || display} />
       ) : (
-        <span className={`cove-icon${attributes.className ? ' ' + attributes.className : ''}`} style={styles} {...filteredAttrs}>
-          <IconObj title={alt} />
+        <span
+          className={`cove-icon${attributes.className ? ' ' + attributes.className : ''}`}
+          style={styles}
+          {...filteredAttrs}
+        >
+          <IconObj title={alt || display} />
         </span>
       )}
     </>

package/components/ui/{Tooltip.jsx → Tooltip.tsx}

@@ -2,6 +2,7 @@ import { useId } from 'react'
 
 // Third Party
 import { Tooltip as ReactTooltip } from 'react-tooltip'
+import type { PlacesType } from 'react-tooltip'
 
 // Styles
 import '../../styles/v2/components/ui/tooltip.scss'
@@ -9,33 +10,56 @@ import '../../styles/v2/components/ui/tooltip.scss'
 const TooltipTarget = children => children
 const TooltipContent = children => children
 
-const Tooltip = ({ place = 'top', trigger = 'hover', float = false, shadow = true, border = false, children, style, ...attributes }) => {
+type ToolTipProps = {
+  place?: PlacesType
+  trigger?: 'hover' | 'focus' | 'click'
+  float?: boolean
+  shadow?: boolean
+  border?: boolean
+  children: React.ReactElement[]
+  style?: React.CSSProperties
+}
+
+const Tooltip: React.FC<ToolTipProps> & { Target; Content } = ({
+  place = 'top',
+  trigger = 'hover',
+  float = false,
+  shadow = true,
+  border = false,
+  children,
+  style,
+  ...attributes
+}) => {
   const tooltipTargetChildren = children.find(el => el.type === TooltipTarget)
   const tooltipContentChildren = children.find(el => el.type === TooltipContent)
 
   const uid = 'tooltip-' + useId()
 
-  const generateTriggerEvent = trigger => {
-    const eventList = {
-      hover: null,
-      focus: 'focus',
-      click: 'click focus'
-    }
-    return eventList[trigger]
-  }
-
   return (
     <span className='cove-tooltip' style={style} {...attributes}>
-      <a id={uid} role='dialog' tabIndex={0} className='cove-tooltip--target' data-tooltip-float={float} data-tooltip-place={place} data-tooltip-events={generateTriggerEvent()}>
+      <a
+        id={uid}
+        role='dialog'
+        tabIndex={0}
+        className='cove-tooltip--target'
+        data-tooltip-float={float}
+        data-tooltip-place={place}
+        data-tooltip-isOpen={true}
+      >
         {tooltipTargetChildren ? tooltipTargetChildren.props.children : null}
       </a>
-      {/* prettier-ignore */}
       <ReactTooltip
         id={uid}
         // ! do not remove the deprecated property, it will break tooltips in the editor.
         anchorId={uid}
-        className={'cove-tooltip__content' + (' place-' + place) + (!float ? ' cove-tooltip__content--animated' : '') + (trigger === 'click' ? ' interactive' : '') + (border ? (' cove-tooltip--border') : '') + (shadow ? ' has-shadow' : '')}
-        globalEventOff="click"
+        className={
+          'cove-tooltip__content' +
+          (' place-' + place) +
+          (!float ? ' cove-tooltip__content--animated' : '') +
+          (trigger === 'click' ? ' interactive' : '') +
+          (border ? ' cove-tooltip--border' : '') +
+          (shadow ? ' has-shadow' : '')
+        }
       >
         {tooltipContentChildren ? tooltipContentChildren.props.children : null}
       </ReactTooltip>

package/data/colorPalettes.js

@@ -3,30 +3,105 @@ 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'],
+  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'],
+  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']
+  '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-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'],
+  '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'],
 
@@ -37,7 +112,9 @@ const colorPalettes2 = {
   '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']
+  '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 = {
@@ -62,9 +139,29 @@ export const colorPalettes3 = {
 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 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 Orange Two': [
+    '#FFFDF0',
+    '#FFF7DC',
+    '#FFE9C2',
+    '#FFD097',
+    '#F7A866',
+    '#EB7723',
+    '#B95117',
+    '#853209',
+    '#661F00'
+  ],
   'Sequential Green': ['#C7E9C0', '#A1D99B', '#74C476', '#41AB5D', '#238B45', '#005A32']
 }