@cdc/core 4.23.11 → 4.24.2

package/components/_stories/_mocks/row_type.json

@@ -0,0 +1,42 @@
+[
+  {
+    "type": "row_group",
+    "overall": "",
+    "male": "",
+    "female": "",
+    "row_type": "row_group",
+    "nullColumn": null
+  },
+  {
+    "type": "row_group_total",
+    "overall": "100",
+    "male": "50",
+    "female": "50",
+    "row_type": "row_group_total",
+    "nullColumn": null
+  },
+  {
+    "type": "regular",
+    "overall": "50",
+    "male": "25",
+    "female": "25",
+    "row_type": null,
+    "nullColumn": null
+  },
+  {
+    "type": "regular",
+    "overall": "50",
+    "male": "25",
+    "female": "25",
+    "row_type": null,
+    "nullColumn": null
+  },
+  {
+    "type": "total",
+    "overall": "100",
+    "male": "50",
+    "female": "50",
+    "row_type": "total",
+    "nullColumn": null
+  }
+]

package/components/inputs/{InputSelect.jsx → InputSelect.tsx}

@@ -1,9 +1,19 @@
-import React, { memo } from 'react'
-
 import '../../styles/v2/components/input/index.scss'
 
-const InputSelect = memo(({ label, value, options, fieldName, section = null, subsection = null, required = false, updateField, initial: initialValue, ...attributes }) => {
-  let optionsJsx = ''
+interface InputProps {
+  label?
+  value?
+  options: string[] | { [key: string]: string }
+  fieldName
+  section?
+  subsection?
+  required?
+  updateField
+  initial?
+}
+
+const InputSelect = ({ label, value, options, fieldName, section = null, subsection = null, required = false, updateField, initial: initialValue, ...attributes }: InputProps) => {
+  let optionsJsx = []
 
   if (Array.isArray(options)) {
     //Handle basic array
@@ -48,6 +58,6 @@ const InputSelect = memo(({ label, value, options, fieldName, section = null, su
       </select>
     </label>
   )
-})
+}
 
 export default InputSelect

package/components/managers/DataDesigner.tsx

@@ -8,7 +8,7 @@ import '../../styles/v2/components/data-designer.scss'
 
 type DataDesignerProps = {
   configureData?: any // todo: add description here when understood better
-  updateDescriptionProp?: () => void // used to update data description fields
+  updateDescriptionProp?: (vizKey: string, dataKey: string, propName: string, value: any) => void // used to update data description fields
   visualizationKey?: any // todo: add description here when understood better
   dataKey?: string // appears to be the data file name, ie valid-data.csv
   config?: any // can be one of many different types of chart configs that aren't fully established yet
@@ -198,16 +198,16 @@ const DataDesigner = (props: DataDesignerProps) => {
                   </div>
                   <div className='mb-2'>
                     <div className='mb-1'>Which properties in the dataset represent the numeric value? (all remaining properties will be treated as filters)</div>
-                    {configureData.dataDescription.valueKeys && configureData.dataDescription.valueKeys.length > 0 && (
+                    {configureData.dataDescription.valueKeysTallSupport && configureData.dataDescription.valueKeysTallSupport.length > 0 && (
                       <ul className='value-list'>
-                        {configureData.dataDescription.valueKeys.map((valueKey, index) => (
+                        {configureData.dataDescription.valueKeysTallSupport.map((valueKey, index) => (
                           <li key={`value-keys-list-${index}`}>
                             {valueKey}
                             <button
                               onClick={() => {
-                                let newValueKeys = configureData.dataDescription.valueKeys
+                                let newValueKeys = configureData.dataDescription.valueKeysTallSupport
                                 newValueKeys.splice(index, 1)
-                                updateDescriptionProp(visualizationKey, dataKey, 'valueKeys', newValueKeys)
+                                updateDescriptionProp(visualizationKey, dataKey, 'valueKeysTallSupport', newValueKeys)
                               }}
                             >
                               X
@@ -218,14 +218,14 @@ const DataDesigner = (props: DataDesignerProps) => {
                     )}
                     <select
                       onChange={e => {
-                        if (e.target.value && (!configureData.dataDescription.valueKeys || configureData.dataDescription.valueKeys.indexOf(e.target.value) === -1)) {
-                          updateDescriptionProp(visualizationKey, dataKey, 'valueKeys', [...(configureData.dataDescription.valueKeys || []), e.target.value])
+                        if (e.target.value && (!configureData.dataDescription.valueKeysTallSupport || configureData.dataDescription.valueKeysTallSupport.indexOf(e.target.value) === -1)) {
+                          updateDescriptionProp(visualizationKey, dataKey, 'valueKeysTallSupport', [...(configureData.dataDescription.valueKeysTallSupport || []), e.target.value])
                         }
                       }}
                     >
                       <option value=''>Choose an option</option>
                       {Object.keys(configureData.data[0])
-                        .filter(value => !configureData.dataDescription.valueKeys || configureData.dataDescription.valueKeys.indexOf(value) === -1)
+                        .filter(value => !configureData.dataDescription.valueKeysTallSupport || configureData.dataDescription.valueKeysTallSupport.indexOf(value) === -1)
                         .map((value, index) => (
                           <option value={value} key={`value-keys-option-${index}`}>
                             {value}

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

@@ -69,17 +69,17 @@ const iconHash = {
 
 export const ICON_TYPES = Object.keys(iconHash)
 
-const Icon = ({ display = '', base, alt = '', size, color, style, ...attributes }) => {
+const Icon = ({ display = '', base = undefined, alt = '', size = undefined, color = undefined, style = undefined, ...attributes }) => {
   const IconObj = iconHash[display] || null
 
   const filteredAttrs = { ...attributes }
   delete filteredAttrs.className
 
   const styles = {
-    ...style,
     color: color ? color : null,
     width: size ? size + 'px' : null,
-    cursor: display === 'move' ? 'move' : 'default'
+    cursor: display === 'move' ? 'move' : 'default',
+    ...style
   }
 
   return (

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

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+const COLORS = [
+  ['baseColor', '#333'],
+  ['blue', '#005eaa'],
+  ['lightestGray', '#f2f2f2'],
+  ['lightGray', '#c7c7c7'],
+  ['mediumGray', '#565656'],
+  ['darkGray', '#333'],
+  ['red', '#d8000c'],
+  ['white', '#fff'],
+
+  ['primary', '#005eaa'],
+  ['secondary', '#88c3ea'],
+  ['tertiary', '#c0e9ff'],
+  ['quaternary', '#edf9ff'],
+
+  ['purple-primary', '#712177'],
+  ['purple-secondary', '#b890bb'],
+  ['purple-tertiary', '#e3d3e4'],
+  ['purple-quaternary', '#f7f2f7'],
+
+  ['brown-primary', '#705043'],
+  ['brown-secondary', '#ad907b'],
+  ['brown-tertiary', '#d7ccc8'],
+  ['brown-quaternary', '#f2ebe8'],
+
+  ['teal-primary', '#00695c'],
+  ['teal-secondary', '#4ebaaa'],
+  ['teal-tertiary', '#ceece7'],
+  ['teal-quaternary', '#ebf7f5'],
+
+  ['pink-primary', '#af4448'],
+  ['pink-secondary', '#e57373'],
+  ['pink-tertiary', '#ffc2c2'],
+  ['pink-quaternary', '#ffe7e7'],
+
+  ['orange-primary', '#bb4d00'],
+  ['orange-secondary', '#ffad42'],
+  ['orange-tertiary', '#ffe97d'],
+  ['orange-quaternary', '#fff4cf'],
+
+  ['slate-primary', '#29434e'],
+  ['slate-secondary', '#7e9ba5'],
+  ['slate-tertiary', '#b6c6d2'],
+  ['slate-quaternary', '#e2e8ed'],
+
+  ['indigo-primary', '#26418f'],
+  ['indigo-secondary', '#92a6dd'],
+  ['indigo-tertiary', '#dee8ff'],
+  ['indigo-quaternary', '#f2f6ff'],
+
+  ['cyan-primary', '#006778'],
+  ['cyan-secondary', '#65b0bd'],
+  ['cyan-tertiary', '#cce5e9'],
+  ['cyan-quaternary', '#ebf5f6'],
+
+  ['green-primary', '#4b830d'],
+  ['green-secondary', '#84bc49'],
+  ['green-tertiary', '#dcedc8'],
+  ['green-quaternary', '#f1f8e9'],
+
+  ['amber-primary', '#fbab18'],
+  ['amber-secondary', '#ffd54f'],
+  ['amber-tertiary', '#ffecb3'],
+  ['amber-quaternary', '#fff7e1']
+]
+
+const ColorArray = () => {
+  return (
+    <table className='table'>
+      {COLORS.map(([name, hex]) => (
+        <tr>
+          <td style={{ background: hex, width: '60px' }}></td>
+          <td>{name}</td>
+          <td>{hex}</td>
+        </tr>
+      ))}
+    </table>
+  )
+}
+
+const meta: Meta<typeof ColorArray> = {
+  title: 'Components/Atoms/Colors',
+  component: ColorArray
+}
+
+type Story = StoryObj<typeof ColorArray>
+
+export const Primary: Story = {}
+
+export default meta

package/components/ui/_stories/Icon.stories.tsx

@@ -3,20 +3,27 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import Icon, { ICON_TYPES } from '../Icon'
 
-const meta: Meta<typeof Icon> = {
+const IconArray = () => {
+  return (
+    <>
+      {ICON_TYPES.map(name => (
+        <div>
+          <span>
+            <Icon display={name} /> {name}{' '}
+          </span>
+        </div>
+      ))}
+    </>
+  )
+}
+
+const meta: Meta<typeof IconArray> = {
   title: 'Components/Atoms/Icon',
-  component: Icon,
-  parameters: {
-    display: ICON_TYPES
-  }
+  component: IconArray
 }
 
 type Story = StoryObj<typeof Icon>
 
-export const Primary: Story = {
-  args: {
-    display: 'question'
-  }
-}
+export const Primary: Story = {}
 
 export default meta

package/helpers/DataTransform.ts

@@ -128,8 +128,36 @@ export class DataTransform {
         return standardized
       }
     } else if (description.series === true && description.singleRow === false) {
-      if (description.seriesKey !== undefined && description.xKey !== undefined && (description.valueKey !== undefined || (description.valueKeys !== undefined && description.valueKeys.length > 0))) {
-        if (description.valueKeys !== undefined) {
+      if (description.seriesKey !== undefined && description.xKey !== undefined && (description.valueKey !== undefined || (description.valueKeys !== undefined && description.valueKeys.length > 0) || (description.valueKeysTallSupport !== undefined && description.valueKeysTallSupport.length > 0))) {
+        if (description.valueKeysTallSupport !== undefined) {
+          let standardizedMapped = {}
+          let standardized: string[] = []
+
+          data.forEach(row => {
+            let uniqueKey = row[description.xKey];
+            Object.keys(row).forEach(key => {
+              if(key !== description.xKey && key !== description.seriesKey && description.valueKeysTallSupport.indexOf(key) === -1 && (!description.ignoredKeys || description.ignoredKeys.indexOf(key) === -1)){
+                uniqueKey += "|" + row[key];
+              }
+            })
+
+            if(!standardizedMapped[uniqueKey]){
+              standardizedMapped[uniqueKey] = {[description.xKey]: row[description.xKey]}
+            }
+            Object.keys(row).forEach(key => {
+              if(key !== description.xKey && key !== description.seriesKey && description.valueKeysTallSupport.indexOf(key) === -1 && (!description.ignoredKeys || description.ignoredKeys.indexOf(key) === -1)){
+                standardizedMapped[uniqueKey][key] = row[key];
+              }
+            })
+            description.valueKeysTallSupport.forEach(valueKey => {
+              standardizedMapped[uniqueKey][row[description.seriesKey] + '-' + valueKey] = row[valueKey];
+            })
+          })
+
+          standardized = Object.keys(standardizedMapped).map(key => standardizedMapped[key]);
+
+          return standardized
+        } else if (description.valueKeys !== undefined) {
           let standardizedMapped = {}
           let standardized: string[] = []
           let valueKeys = description.valueKeys

package/helpers/fetchRemoteData.js

@@ -1,14 +1,14 @@
 import Papa from 'papaparse'
+import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
 
-export default async function (url, visualizationType = '') {
+export default async function (_url, visualizationType = '') {
+  let url = new URL(_url, window.location.origin)
   try {
-    url = new URL(url, window.location.origin)
-
     const path = url.pathname
     const regex = /(?:\.([^.]+))?$/
     const ext = regex.exec(path)[1]
 
-    if ('csv' === ext) {
+    if ('csv' === ext || isSolrCsv(_url)) {
       return await fetch(url.href)
         .then(response => response.text())
         .then(responseText => {
@@ -30,7 +30,7 @@ export default async function (url, visualizationType = '') {
           return parsedCsv.data
         })
     } else {
-      return await fetch(url.href).then(response => response.json())
+      return await fetch(isSolrCsv(_url) ? _url : url.href).then(response => response.json())
     }
   } catch {
     // If we can't parse it, still attempt to fetch it

package/helpers/getFileExtension.ts

@@ -1,5 +1,28 @@
-export const getFileExtension = (path: string): string => {
-    const regex = /(?:\.([^.]+))?$/
-    const outCome: RegExpExecArray | null = regex.exec(path)
-    return outCome ? outCome[1] : ''
-}
+// export const getFileExtensionx = (path: string): string => {
+//   const regex = /(?:\.([^.]+))?$/
+//   const outCome: RegExpExecArray | null = regex.exec(path)
+//   return outCome ? outCome[1] : ''
+// }
+
+export const getFileExtension = (url: string): string => {
+  const regexForExtension = /(?:\.([^.]+))$/
+  const regexForQueryParam = /[?&]wt=(csv|json)(?:&|$)/ // Regular expression for 'wt' query parameter
+
+  const urlObject = new URL(url, window.location.origin)
+  const pathname = urlObject.pathname
+  const searchParams = urlObject.search
+
+  // First, try to get the extension from the pathname
+  const pathnameMatch = regexForExtension.exec(pathname)
+  if (pathnameMatch && pathnameMatch[1]) {
+    return pathnameMatch[1]
+  }
+
+  // Then, try to get it from the query parameter 'wt'
+  const queryParamsMatch = regexForQueryParam.exec(searchParams)
+  if (queryParamsMatch && queryParamsMatch[1]) {
+    return queryParamsMatch[1]
+  }
+
+  return ''
+}

package/helpers/getViewport.ts

@@ -0,0 +1,23 @@
+import { ViewPort } from '../types/ViewPort'
+
+export const viewports = {
+  lg: 1200,
+  md: 992,
+  sm: 768,
+  xs: 576,
+  xxs: 350
+}
+
+export default function getViewport(size): ViewPort {
+  let result: ViewPort = 'lg'
+
+  if (size > 1200) return result
+
+  for (let viewport in viewports) {
+    if (size <= viewports[viewport]) {
+      result = viewport as ViewPort
+    }
+  }
+
+  return result
+}

package/helpers/isSolr.js

@@ -0,0 +1,13 @@
+export const isSolrCsv = dataUrl => {
+  if (dataUrl.includes('wt=csv')) {
+    return true
+  }
+  return false
+}
+
+export const isSolrJson = dataUrl => {
+  if (dataUrl?.includes('wt=json')) {
+    return true
+  }
+  return false
+}

package/helpers/withDevTools.ts

@@ -0,0 +1,50 @@
+// This package hooks into the Redux Dev Tools extension
+// It works as a wrapper for any reducer function
+
+// Based on: https://github.com/MacKentoch/react-bootstrap-webpack-starter/blob/master/front/src/contexts/withDevTools/index.ts
+
+// types
+type DevToolsMessageType = 'DISPATCH' | string
+
+type DevToolsMessagePayload = {
+  type?: string
+  state?: any
+}
+
+type DevToolsMessage = {
+  type?: DevToolsMessageType
+  payload?: DevToolsMessagePayload
+}
+
+type Action = {
+  type: string
+  payload?: any
+}
+
+// the only method the devToolsWrapper hooks into is .send()
+// all other type definitions are kept for reference.
+// it's possible there's a DevTools type in the Redux library
+// however this allows us to avoid another dependency as this project
+// doesn't use Redux.
+type DevTools = {
+  init: () => void
+  connect: () => any
+  subscribe: (message: DevToolsMessage) => any
+  send: (action: Action, newState: any) => any
+  unsubscribe: () => any
+  dispatch: (action: Action) => any
+  disconnect: () => any
+}
+
+// constants
+const withDevTools = typeof window !== 'undefined' && (window as any).__REDUX_DEVTOOLS_EXTENSION__
+const devTools: DevTools = !withDevTools ? null : (window as any).__REDUX_DEVTOOLS_EXTENSION__.connect()
+export const devToolsStore = !withDevTools ? null : devTools
+
+export const devToolsWrapper =
+  <StateType, ActionTypes>(_reducer: (s: StateType, a: ActionTypes) => StateType) =>
+  (state: StateType, action: ActionTypes): StateType => {
+    const newState = _reducer(state, action)
+    devToolsStore?.send(action as Action, newState)
+    return newState
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.23.11",
+  "version": "4.24.2",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -30,5 +30,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "ecad213667a3cb96c921eaddba43a31c84caaa08"
+  "gitHead": "edde49c96dee146de5e3a4537880b1bcf4dbee08"
 }

package/styles/_data-table.scss

@@ -31,9 +31,6 @@ div.data-table-heading {
 }
 
 table.horizontal {
-  tr {
-    display: flex;
-  }
 
   th,
   td {
@@ -42,7 +39,7 @@ table.horizontal {
 }
 
 table.data-table {
-  width: 100%;
+  min-width: 100%;
   background: #fff;
   position: relative;
   border: none;
@@ -160,6 +157,7 @@ table.data-table {
 
   th,
   td {
+    width: 1% !important;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -168,7 +166,6 @@ table.data-table {
     }
   }
   tr {
-    display: flex;
     & > * {
       width: 100%;
     }

package/styles/_global-variables.scss

@@ -0,0 +1,75 @@
+$colors: (
+  'baseColor': #333,
+  'blue': #005eaa,
+  'lightestGray': #f2f2f2,
+  'lightGray': #c7c7c7,
+  'mediumGray': #565656,
+  'darkGray': #333,
+  'red': #d8000c,
+  'white': #fff,
+
+  'primary': #005eaa,
+  'secondary': #88c3ea,
+  'tertiary': #c0e9ff,
+  'quaternary': #edf9ff,
+
+  'purple-primary': #712177,
+  'purple-secondary': #b890bb,
+  'purple-tertiary': #e3d3e4,
+  'purple-quaternary': #f7f2f7,
+
+  'brown-primary': #705043,
+  'brown-secondary': #ad907b,
+  'brown-tertiary': #d7ccc8,
+  'brown-quaternary': #f2ebe8,
+
+  'teal-primary': #00695c,
+  'teal-secondary': #4ebaaa,
+  'teal-tertiary': #ceece7,
+  'teal-quaternary': #ebf7f5,
+
+  'pink-primary': #af4448,
+  'pink-secondary': #e57373,
+  'pink-tertiary': #ffc2c2,
+  'pink-quaternary': #ffe7e7,
+
+  'orange-primary': #bb4d00,
+  'orange-secondary': #ffad42,
+  'orange-tertiary': #ffe97d,
+  'orange-quaternary': #fff4cf,
+
+  'slate-primary': #29434e,
+  'slate-secondary': #7e9ba5,
+  'slate-tertiary': #b6c6d2,
+  'slate-quaternary': #e2e8ed,
+
+  'indigo-primary': #26418f,
+  'indigo-secondary': #92a6dd,
+  'indigo-tertiary': #dee8ff,
+  'indigo-quaternary': #f2f6ff,
+
+  'cyan-primary': #006778,
+  'cyan-secondary': #65b0bd,
+  'cyan-tertiary': #cce5e9,
+  'cyan-quaternary': #ebf5f6,
+
+  'green-primary': #4b830d,
+  'green-secondary': #84bc49,
+  'green-tertiary': #dcedc8,
+  'green-quaternary': #f1f8e9,
+
+  'amber-primary': #fbab18,
+  'amber-secondary': #ffd54f,
+  'amber-tertiary': #ffecb3,
+  'amber-quaternary': #fff7e1,
+);
+
+@mixin theme() {
+  :root {
+    @each $key, $value in $colors {
+      --#{$key}: #{$value};
+    }
+  }
+}
+
+@include theme();