@cdc/core 4.24.1 → 4.24.3

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();

package/styles/base.scss

@@ -51,6 +51,7 @@
 // Imports
 @import 'reset';
 @import 'variables';
+@import 'global-variables';
 @import 'mixins';
 @import 'filters';
 
@@ -58,6 +59,10 @@ body.post-type-cdc_visualization .visx-tooltip {
   z-index: 1000000;
 }
 
+body.post-type-cdc_visualization .cdc-editor .configure .editor-panel {
+  top: 0 !important;
+}
+
 .cdc-open-viz-module {
   position: relative;
   color: $baseColor;
@@ -71,73 +76,96 @@ body.post-type-cdc_visualization .visx-tooltip {
   @import 'button-section';
   @import 'series-list';
   @import 'typography';
-}
 
-$theme: (
-  'amber': (
-    '#fbab18',
-    '#ffd54f',
-    '#ffecb3',
-    '#fff7e1'
-  ),
-  'blue': (
-    '#005eaa',
-    '#88c3ea',
-    '#c0e9ff',
-    '#edf9ff'
-  ),
-  'brown': (
-    '#705043',
-    '#ad907b',
-    '#d7ccc8',
-    '#f2ebe8'
-  ),
-  'cyan': (
-    '#006778',
-    '#65b0bd',
-    '#cce5e9',
-    '#ebf5f6'
-  ),
-  'green': (
-    '#4b830d',
-    '#84bc49',
-    '#dcedc8',
-    '#f1f8e9'
-  ),
-  'indigo': (
-    '#26418f',
-    '#92a6dd',
-    '#dee8ff',
-    '#f2f6ff'
-  ),
-  'orange': (
-    '#bb4d00',
-    '#ffad42',
-    '#ffe97d',
-    '#fff4cf'
-  ),
-  'pink': (
-    '#af4448',
-    '#e57373',
-    '#ffc2c2',
-    '#ffe7e7'
-  ),
-  'purple': (
-    '#712177',
-    '#b890bb',
-    '#e3d3e4',
-    '#f7f2f7'
-  ),
-  'slate': (
-    '#29434e',
-    '#7e9ba5',
-    '#b6c6d2',
-    '#e2e8ed'
-  ),
-  'teal': (
-    '#00695c',
-    '#4ebaaa',
-    '#ceece7',
-    '#ebf7f5'
-  )
-);
+  // Force printing chart images
+  -webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
+  color-adjust: exact !important; /* Firefox 48 – 96 */
+  print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
+
+  .editor-panel.cove {
+    position: absolute;
+    height: 100vh;
+    top: 0;
+    max-width: 350px;
+    width: 350px;
+
+    .editor-toggle {
+      position: absolute !important;
+      top: 10px !important;
+    }
+
+    .editor-panel {
+      position: absolute !important;
+      top: 0 !important;
+    }
+  }
+
+  $theme: (
+    'amber': (
+      '#fbab18',
+      '#ffd54f',
+      '#ffecb3',
+      '#fff7e1'
+    ),
+    'blue': (
+      '#005eaa',
+      '#88c3ea',
+      '#c0e9ff',
+      '#edf9ff'
+    ),
+    'brown': (
+      '#705043',
+      '#ad907b',
+      '#d7ccc8',
+      '#f2ebe8'
+    ),
+    'cyan': (
+      '#006778',
+      '#65b0bd',
+      '#cce5e9',
+      '#ebf5f6'
+    ),
+    'green': (
+      '#4b830d',
+      '#84bc49',
+      '#dcedc8',
+      '#f1f8e9'
+    ),
+    'indigo': (
+      '#26418f',
+      '#92a6dd',
+      '#dee8ff',
+      '#f2f6ff'
+    ),
+    'orange': (
+      '#bb4d00',
+      '#ffad42',
+      '#ffe97d',
+      '#fff4cf'
+    ),
+    'pink': (
+      '#af4448',
+      '#e57373',
+      '#ffc2c2',
+      '#ffe7e7'
+    ),
+    'purple': (
+      '#712177',
+      '#b890bb',
+      '#e3d3e4',
+      '#f7f2f7'
+    ),
+    'slate': (
+      '#29434e',
+      '#7e9ba5',
+      '#b6c6d2',
+      '#e2e8ed'
+    ),
+    'teal': (
+      '#00695c',
+      '#4ebaaa',
+      '#ceece7',
+      '#ebf7f5'
+    )
+  );
+}

package/types/Action.ts

@@ -0,0 +1 @@
+export type Action<T, P> = { type: T; payload?: P }

package/types/Axis.ts

@@ -5,6 +5,7 @@ export type Anchor = {
 }
 
 export type Axis = {
+  scalePadding: number
   anchors?: Anchor[]
   dataKey: string
   dateDisplayFormat: string
@@ -22,6 +23,7 @@ export type Axis = {
   maxTickRotation?: number
   min?: string
   numTicks?: number
+  paddingPercent?: number
   rightAxisSize?: number
   rightHideAxis?: boolean
   rightHideLabel?: boolean
@@ -31,6 +33,7 @@ export type Axis = {
   rightMax?: string
   rightNumTicks?: number
   sortDates?: boolean
+  sortKey?: string
   showTargetLabel?: boolean
   size?: number
   target?: number

package/types/BaseVisualizationType.ts

@@ -0,0 +1 @@
+export type BaseVisualizationType = 'dashboard' | 'chart' | 'map' | 'data-bite' | 'waffle-chart' | 'markup-include' | 'filtered-text' | 'filter-dropdowns' | 'table' | 'navigation'

package/types/BoxPlot.ts

@@ -0,0 +1,21 @@
+export type BoxPlot = {
+  tableData: Object[]
+  labels: {
+    mean: string
+    maximum: string
+    minimum: string
+    iqr: string
+    median: string
+    q1: string
+    q3: string
+    outliers: string
+    values: string
+    total: string
+    lowerBounds: string
+    upperBounds: string
+  }
+  plots: []
+  categories: string[]
+  firstQuartilePercentage: number
+  geoType: string
+}

package/types/Column.ts

@@ -6,6 +6,7 @@ export type Column = {
   roundToPlace: number
   commas: boolean
   dataTable: boolean
+  showInViz: boolean
   startingPoint: string
   series?: string
   tooltips: boolean

package/types/ConfidenceInterval.ts

@@ -0,0 +1 @@
+export type ConfidenceInterval = Record<'lower' | 'upper', number | string>

package/types/General.ts

@@ -0,0 +1,9 @@
+import { BoxPlot } from './BoxPlot'
+
+export type General = {
+  boxplot: BoxPlot
+  geoType: string
+  type: string
+  showDownloadButton: boolean
+  allowMapZoom?: boolean
+}

package/types/Legend.ts

@@ -0,0 +1,18 @@
+export type Legend = {
+  additionalCategories: string[]
+  // general legend onClick behavior
+  behavior: 'highlight' | 'isolate' | string
+  axisAlign: boolean
+  colorCode: string
+  description: string
+  // show or hide the legend
+  hide: boolean
+  highlightOnHover: boolean
+  label: string
+  lineMode: boolean
+  position: string
+  reverseLabelOrder: boolean
+  singleRow: boolean
+  type: string
+  verticalSorted: boolean
+}

package/types/Region.ts

@@ -0,0 +1,10 @@
+export type Region = {
+  from: string
+  to: string
+  label: string
+  color: string
+  background: string
+  range: 'Custom' | string
+  fromType: 'Fixed' | 'Previous Days'
+  toType: 'Fixed' | 'Last Date'
+}

package/types/Runtime.ts

@@ -23,7 +23,9 @@ export type Runtime = {
   xAxis: Axis
   yAxis: Axis
   seriesKeys: any[]
-  seriesLabels: string[]
+  seriesLabels: Record<string, any>
   seriesLabelsAll: string[]
   editorErrorMessage: string
+  lineSeriesKeys: any[]
+  horizontal: boolean
 }

package/types/Table.ts

@@ -11,8 +11,11 @@ export type Table = {
   showDataTableLink?: boolean
   showDownloadUrl?: boolean
   download?: boolean
-  showDownloadImgButton?: boolean
-  showDownloadPdfButton?: boolean
   customTableConfig?: boolean
   excludeColumns?: string[]
+  showDownloadImgButton?: boolean
+  showDownloadPdfButton?: boolean
+  downloadImageButton?: boolean
+  downloadPdfButton?: boolean
+  dateDisplayFormat?: string
 }

package/types/UpdateFieldFunc.ts

@@ -1 +1 @@
-export type UpdateFieldFunc<T> = (section: string | null, subsection: string | null, fieldName: string, value: T) => void
+export type UpdateFieldFunc<T> = (section: string | null, subsection: string | number | null, fieldName: string | number, value: T) => void

package/types/ViewPort.ts

@@ -0,0 +1,2 @@
+import { viewports } from '../helpers/getViewport'
+export type ViewPort = keyof typeof viewports

package/types/Visualization.ts

@@ -1,21 +1,39 @@
+import { Legend } from './Legend'
+import { Axis } from './Axis'
+import { Column } from './Column'
+import { Series } from './Series'
+import { Table } from './Table'
+import { ConfidenceInterval } from './ConfidenceInterval'
+import { BaseVisualizationType } from './BaseVisualizationType'
+
 export type Visualization = {
   autoLoad: boolean
+  columns: Record<string, Column>
+  confidenceKeys: ConfidenceInterval
   data: any
   dataDescription: Object
+  dataFileName: string
+  dataFileSourceType: string
+  dataFormat: any
   dataKey: string
+  datasets: Record<string, any>
   editing: boolean
-  formattedData: any
+  formattedData?: Object[] & Record<string, Object>
   general: any
   hide: any[]
+  legend: Legend
+  multiDashboards?: any[]
   newViz: boolean
   openModal: boolean
   originalFormattedData: any
-  table: {
-    showDataTableLink: boolean
-  }
+  orientation: 'vertical' | 'horizontal'
+  series: Series
+  table: Table
   title: string
-  type: 'chart' | 'map' | 'data-bite' | 'waffle-chart' | 'markup-include' | 'filtered-text' | 'filter-dropdowns'
+  type: BaseVisualizationType
   uid: string
   usesSharedFilter: any
   visualizationType: string
+  visualizationSubType: string
+  xAxis: Axis
 }

package/types/WCMSProps.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react'
+
+export type WCMSProps = {
+  config?: any
+  configUrl?: string
+  isEditor?: boolean
+  isDebug?: boolean
+  hostname?: string
+  containerEl?: ReactElement
+  sharepath?: string
+}

package/components/DataTable/components/SkipNav.tsx

@@ -1,7 +0,0 @@
-const SkipNav = skipId => (
-  <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>
-    Skip Navigation or Skip to Content
-  </a>
-)
-
-export default SkipNav

package/helpers/cove/date.js

@@ -1,9 +0,0 @@
-import { timeFormat, timeParse } from 'd3-time-format'
-
-export function formatDate(format = undefined, date) {
-  return timeFormat(format)(date)
-}
-
-export function parseDate(format = undefined, dateString) {
-  return timeParse(format)(dateString) || new Date()
-}

package/helpers/getViewport.js

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