@cdc/core 4.24.9 → 4.24.11

package/styles/v2/layout/index.scss

@@ -1,5 +1,4 @@
 @import 'alert';
 @import 'component';
-@import 'data-table';
 @import 'progression';
 @import 'tooltip';

package/types/Axis.ts

@@ -20,12 +20,14 @@ export type Axis = {
   label?: string
   labelOffset?: number
   labelPlacement?: string
+  labelsAboveGridlines?: boolean
   manual?: boolean
   manualStep?: number
   max?: string
   maxTickRotation?: number
   min?: string
   numTicks?: number
+  padding?: number
   paddingPercent?: number
   rightAxisSize?: number
   rightHideAxis?: boolean
@@ -39,6 +41,7 @@ export type Axis = {
   sortKey?: string
   showTargetLabel?: boolean
   size?: number
+  showYearsOnce?: boolean
   target?: number
   targetLabel?: string
   tickRotation?: number
@@ -46,4 +49,5 @@ export type Axis = {
   type: string
   axisBBox: number
   maxValue: string
+  sortByRecentDate: boolean
 }

package/types/BoxPlot.ts

@@ -10,12 +10,14 @@ export type BoxPlot = {
     q3: string
     outliers: string
     values: string
-    total: string
+    count: string
     lowerBounds: string
     upperBounds: string
   }
-  plots: []
+  plotNonOutlierValues: boolean
+  plots: [{ columnOutliers: []; columnLowerBounds: number; columnUpperBounds: number }]
   categories: string[]
-  firstQuartilePercentage: number
   geoType: string
+  hideOutliers: boolean
+  borders: string
 }

package/types/Color.ts

@@ -2,4 +2,4 @@ type RGB = `rgb(${number}, ${number}, ${number})`
 type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`
 type HEX = `#${string}`
 
-type Color = RGB | RGBA | HEX
+export type Color = RGB | RGBA | HEX

package/types/General.ts

@@ -8,6 +8,7 @@ export type General = {
   allowMapZoom?: boolean
   showMissingDataLabel: boolean
   showSuppressedSymbol: boolean
+  showZeroValueData: boolean
   showAnnotationDropdown?: boolean
   hideNullValue: boolean
   title: string

package/types/Legend.ts

@@ -10,8 +10,7 @@ export type Legend = {
   hideSuppressedLabels: boolean
   highlightOnHover: boolean
   label: string
-  lineMode: boolean
-  position: string
+  position: 'left' | 'bottom' | 'top' | 'right' | 'side'
   reverseLabelOrder: boolean
   singleRow: boolean
   type: string

package/types/MarkupInclude.ts

@@ -5,6 +5,7 @@ import { Visualization } from './Visualization'
 export type MarkupIncludeConfig = Visualization & {
   contentEditor: {
     // Changing the base config object creates an infinite loop, nesting it is a workaround
+    allowHideSection?: boolean
     inlineHTML: string
     markupVariables: Variable[]
     showHeader: boolean

package/types/Runtime.ts

@@ -1,4 +1,5 @@
 import { Axis } from './Axis'
+import { Series } from './Series'
 
 export type ForecastingSeriesKey = {
   stages: {
@@ -17,7 +18,8 @@ export type Runtime = {
   }
   xAxis: Axis
   yAxis: Axis
-  seriesKeys: any[]
+  series: Series
+  seriesKeys: string[]
   seriesLabels: Record<string, any>
   seriesLabelsAll: string[]
   editorErrorMessage: string

package/types/Series.ts

@@ -1 +1,8 @@
-export type Series = { dataKey: string; name: string; axis: string; type: string; tooltip: boolean }[]
+export type Series = {
+  dataKey: string
+  name: string
+  axis: string
+  type: string
+  tooltip: boolean
+  dynamicCategory?: string
+}[]

package/types/Table.ts

@@ -1,6 +1,6 @@
-type Pivot = {
+export type Pivot = {
   columnName: string
-  valueColumn: string
+  valueColumns: string[]
 }
 
 export type Table = {
@@ -23,6 +23,7 @@ export type Table = {
   show?: boolean
   showDataTableLink?: boolean
   showDownloadImgButton?: boolean
+  showDownloadLinkBelow?: boolean
   showDownloadPdfButton?: boolean
   showDownloadUrl?: boolean
   showVertical?: boolean

package/types/Visualization.ts

@@ -19,25 +19,36 @@ import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
 type DeprecatedVisualizationType = {
   columns: Record<string, Partial<Column>>
   confidenceKeys: ConfidenceInterval
-  dataFileName: string
-  dataFileSourceType: string
+  dataFileName?: string
+  dataFileSourceType?: string
   dataFormat: any
-  datasets: Record<string, any>
+  datasets?: Record<string, any>
   filters: VizFilter[]
   general: General
   legend: Legend
   multiDashboards?: any[]
   newViz: boolean
-  openModal: boolean
+  isResponsiveTicks: boolean
+  openModal?: boolean
   orientation: 'vertical' | 'horizontal'
-  originalFormattedData: any
+  originalFormattedData?: any
   runtime?: Runtime
   series: Series
   table: Table
   theme: string
   title: string
-  type: 'dashboard' | 'chart' | 'footnotes' | 'map' | 'data-bite' | 'waffle-chart' | 'markup-include' | 'filtered-text' | 'table' | 'navigation'
-  usesSharedFilter: any
+  type:
+    | 'dashboard'
+    | 'chart'
+    | 'footnotes'
+    | 'map'
+    | 'data-bite'
+    | 'waffle-chart'
+    | 'markup-include'
+    | 'filtered-text'
+    | 'table'
+    | 'navigation'
+  usesSharedFilter?: any
   visualizationSubType: string
   visualizationType: string
   xAxis: Axis
@@ -51,7 +62,7 @@ type StatefulProperties = {
 
 export type CommonVisualizationProperties = Partial<StatefulProperties> & {
   showEditorPanel?: boolean
-  uid?: string // this is the actual key of the visualization object
+  uid?: string | number // this is the actual key of the visualization object
   visualizationType?: string
   filterBehavior: FilterBehavior
 } & Partial<ConfigureData>

package/types/VizFilter.ts

@@ -2,6 +2,7 @@ export type OrderBy = 'asc' | 'desc' | 'cust'
 
 export type FilterBase = {
   columnName: string
+  orderedValues?: string[]
   values: string[]
   showDropdown: boolean
   id: number
@@ -18,7 +19,7 @@ export type VizFilterStyle =
   | 'nested-dropdown'
 export type GeneralFilter = FilterBase & {
   active: string
-  queuedActive: string
+  queuedActive: string | string[]
   filterStyle: VizFilterStyle
   label: string
   order: OrderBy

package/components/DataTable/components/Icons.tsx

@@ -1,10 +0,0 @@
-export const UpIcon = () => (
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
-    <path d='M0 5l5-5 5 5z' />
-  </svg>
-)
-export const DownIcon = () => (
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
-    <path d='M0 0l5 5 5-5z' />
-  </svg>
-)

package/components/_stories/EditorPanel.stories.tsx

@@ -1,54 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-
-import DataTableEditor from '../EditorPanel/DataTableEditor'
-import { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from 'react-accessible-accordion'
-import { useState } from 'react'
-
-const EditorPanel = () => {
-  const { config, isDashboard } = Primary.args
-  const [_config, setConfig] = useState(config)
-  const updateField = (section, subsection, fieldName, value) => {
-    setConfig({
-      ..._config,
-      [section]: {
-        ..._config[section],
-        [fieldName]: value
-      }
-    })
-  }
-  return (
-    <Accordion>
-      <AccordionItem>
-        <AccordionItemHeading>
-          <AccordionItemButton>Data Table</AccordionItemButton>
-        </AccordionItemHeading>
-        <AccordionItemPanel>
-          <DataTableEditor config={_config} isDashboard={isDashboard} updateField={updateField} isLoadedFromUrl={false} />
-        </AccordionItemPanel>
-      </AccordionItem>
-    </Accordion>
-  )
-}
-
-const meta: Meta<typeof DataTableEditor> = {
-  title: 'Components/Organisms/EditorPanel',
-  component: EditorPanel
-}
-
-export default meta
-
-type Story = StoryObj<typeof DataTableEditor>
-
-export const Primary: Story = {
-  args: {
-    config: {
-      table: {
-        label: 'Data Table',
-        show: true
-      },
-      columns: {},
-      visualizationType: 'Pie'
-    },
-    isDashboard: true
-  }
-}

package/components/_stories/Layout.Debug.stories.tsx

@@ -1,91 +0,0 @@
-import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
-import './styles.scss'
-import CdcChart from '@cdc/chart'
-import CdcMap from '@cdc/map'
-import CdcMarkupInclude from '@cdc/markup-include'
-import CdcFilteredText from '@cdc/filtered-text'
-import CdcDashboard from '@cdc/dashboard'
-import CdcWaffleChart from '@cdc/waffle-chart'
-import config from './../../../chart/src/_stories/_mock/bar-chart-suppressed.json'
-import mapConfig from './../../../map/examples/default-usa.json'
-import markupConfig from './../../../markup-include/src/data/initial-state.js'
-import filteredTextConfig from './_mocks/filtered-text-config.json'
-import waffleChartConfig from './../../../waffle-chart/examples/gallery/count.json'
-import dashboardConfig from './../../../dashboard/examples/full-dashboard.json'
-
-// Determine the component based on config.type
-const getComponent = config => {
-  switch (config.type) {
-    case 'map':
-      return CdcMap
-    case 'chart':
-      return CdcChart
-    case 'markup-include':
-      return CdcMarkupInclude
-    case 'waffle-chart':
-      return CdcWaffleChart
-    case 'dashboard':
-      return CdcDashboard
-    default:
-      return () => <div>Unknown component type</div>
-  }
-}
-
-const meta = {
-  title: 'Components/Templates/Layout/Debug',
-  component: args => {
-    const Component = getComponent(args.config)
-    return (
-      <div className=''>
-        <Component {...args} />
-      </div>
-    )
-  }
-} as Meta
-
-export default meta
-
-type Story = StoryObj
-
-export const Chart: Story = {
-  args: {
-    config,
-    isEditor: true
-  }
-}
-
-export const Map: Story = {
-  args: {
-    config: mapConfig,
-    isEditor: true
-  }
-}
-
-export const MarkupInclude: StoryObj<typeof CdcMarkupInclude> = {
-  args: {
-    config: markupConfig,
-    isEditor: true
-  }
-}
-
-export const WaffleChart: StoryObj<typeof CdcWaffleChart> = {
-  args: {
-    config: waffleChartConfig,
-    isEditor: true
-  }
-}
-
-export const Dashboard: StoryObj<typeof CdcDashboard> = {
-  args: {
-    config: dashboardConfig,
-    isEditor: true
-  }
-}
-
-// export const WaffleChart: StoryObj<typeof CdcWaffleChart> = {
-//   args: {
-//     config: waffleChartConfig,
-//     isEditor: true
-//   }
-// }

package/components/ui/Select.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-
-const Select = ({ label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, onchange, initial: initialValue, ...attributes }) => {
-  let optionsJsx = options.map((optionName, index) => (
-    <option value={optionName} key={index}>
-      {optionName}
-    </option>
-  ))
-
-  if (initialValue) {
-    optionsJsx.unshift(
-      <option value='' key='initial'>
-        {initialValue}
-      </option>
-    )
-  }
-
-  return (
-    <label>
-      <span className='edit-label'>
-        {label}
-        {tooltip}
-      </span>
-      <select className={required && !value ? 'warning' : ''} name={fieldName} value={value} onChange={onchange} {...attributes}>
-        {optionsJsx}
-      </select>
-    </label>
-  )
-}
-export default Select

package/helpers/getGradientLegendWidth.ts

@@ -1,15 +0,0 @@
-export const getGradientLegendWidth = (containerWidth: number, currentViewport: string): number => {
-  const newWidth = Number(containerWidth)
-  switch (currentViewport) {
-    case 'lg':
-      return newWidth / 3
-    case 'md':
-      return newWidth / 2
-    case 'sm':
-    case 'xs':
-    case 'xxs':
-      return newWidth / 1.4
-    default:
-      return newWidth
-  }
-}