@cdc/core 4.24.5 → 4.24.9

package/components/Layout/components/Sidebar/components/sidebar.styles.scss

@@ -11,7 +11,6 @@
 
 .cdc-editor .configure .cdc-open-viz-module:not(.type-dashboard) .editor-panel__toggle {
   position: absolute;
-  top: 10px;
 }
 
 .cdc-editor .configure .cdc-open-viz-module:not(.type-dashboard) .sidebar {
@@ -25,24 +24,14 @@
   }
 
   .sidebar {
-    position: fixed;
-    height: 100vh;
+    position: static;
+    height: 100%; // take up the whole container
     top: 0;
     max-width: 350px;
     width: 350px;
     background-color: var(--white);
     grid-area: panel;
 
-    .editor-toggle {
-      position: fixed !important;
-      top: 10px !important;
-    }
-
-    .editor-panel {
-      position: fixed !important;
-      top: 0 !important;
-    }
-
     &.editor-panel--hidden &.hidden {
       display: none;
     }
@@ -601,7 +590,7 @@
       /* clicking anywhere will focus the input */
       cursor: text;
 
-      span {
+      span:not(.cove-tooltip, .cove-icon) {
         display: inline;
       }
     }
@@ -723,6 +712,10 @@
       margin-right: 5px;
     }
 
+    .cove-tooltip {
+      position: relative;
+    }
+
     // tooltips
     .cove-label + .cove-tooltip {
       top: 1px;
@@ -731,9 +724,9 @@
     }
 
     .cove-accordion__button .cove-tooltip {
-      display: inline-flex;
-      right: 1.5rem;
-      line-height: inherit;
+      // display: inline-flex;
+      // right: 1.5rem;
+      // line-height: inherit;
     }
 
     .cove-list-group__item .cove-tooltip {
@@ -854,6 +847,10 @@
     border-bottom: #565656 3px solid;
     z-index: 3;
     margin: 0;
+
+    &.collapsed {
+      display: none;
+    }
   }
 
   &.type-dashboard {
@@ -862,20 +859,26 @@
     }
   }
 
+  .editor-panel__toggle-wrapper {
+    position: absolute;
+    top: 0;
+  }
+
   .editor-panel__toggle {
     background: #f2f2f2;
     border-radius: 60px;
     color: #000;
     font-size: 1em;
     border: 0;
-    position: fixed;
+    position: absolute;
     z-index: 100;
     transition: 0.1s background;
     cursor: pointer;
     width: 25px;
     height: 25px;
-    left: 307px;
-    top: 10px;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
     box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
 
     &:before {

package/components/Layout/components/Visualization/index.tsx

@@ -1,25 +1,31 @@
 // main visualization wrapper
 import { ChartConfig } from '@cdc/chart/src/types/ChartConfig'
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef } from 'react'
 import { Config as DataBiteConfig } from '@cdc/data-bite/src/types/Config'
 import './visualizations.scss'
 import { Config as WaffleChartConfig } from '@cdc/waffle-chart/src/types/Config'
 import { MarkupIncludeConfig } from '@cdc/core/types/MarkupInclude'
+import { DashboardFilters } from '@cdc/dashboard/src/types/DashboardFilters'
 
 type VisualizationWrapper = {
   children: React.ReactNode
-  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig
-  currentViewport: string
-  imageId: string
+  config: ChartConfig | DataBiteConfig | WaffleChartConfig | MarkupIncludeConfig | DashboardFilters
+  currentViewport?: string
+  imageId?: string
   isEditor: boolean
-  showEditorPanel: boolean
+  showEditorPanel?: boolean
 }
 
 const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) => {
-  const { config = {}, isEditor = false, currentViewport = 'lg', imageId = '', showEditorPanel = true } = props
+  const { config = {}, isEditor = false, currentViewport = 'lg', imageId = '', showEditorPanel = true, className } = props
 
   const getWrappingClasses = () => {
     let classes = ['cdc-open-viz-module', `${currentViewport}`, `font-${config?.fontSize}`, `${config?.theme}`]
+
+    if (className) {
+      classes.push(className)
+    }
+
     isEditor && classes.push('spacing-wrapper')
     isEditor && classes.push('isEditor')
 
@@ -33,6 +39,12 @@ const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) =>
       classes.push('editor-panel--hidden')
     }
 
+    if (config.type === 'filtered-text') {
+      classes.push('type-filtered-text')
+      classes = classes.filter(item => item !== 'cove-component__content')
+      return classes
+    }
+
     if (config.type === 'chart') {
       classes.push('type-chart')
       config?.visualizationType === 'Spark Line' && classes.push(`type-sparkline`)
@@ -40,6 +52,7 @@ const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) =>
     }
     if (config.type === 'map') {
       classes.push(`type-map`)
+      if (config?.runtime?.editorErrorMessage.length !== 0) classes.push('type-map--has-error')
     }
 
     if (config.type === 'data-bite') {

package/components/Layout/components/Visualization/visualizations.scss

@@ -1,33 +1,39 @@
-.cdc-open-viz-module.isEditor {
-  overflow: auto;
-  display: grid;
-  transition: grid-template-columns 400ms ease-in-out;
-
-  .editor-panel__toggle {
-    transition: left 400ms ease-in-out;
+.cdc-open-viz-module {
+  .cdc-chart-inner-container .cove-component__content {
+    padding: 25px 15px !important;
   }
+  &.isEditor {
+    overflow: auto;
+    display: grid;
+    transition: grid-template-columns 400ms ease-in-out;
+    min-height: 100vh;
 
-  .sidebar {
-    transition: left 400ms ease-in-out;
-  }
+    .editor-panel__toggle {
+      transition: left 400ms ease-in-out;
+    }
 
-  &.editor-panel--visible {
-    grid-template-areas: 'panel content';
-    grid-template-columns: 350px calc(100% - 350px);
-  }
+    .sidebar {
+      transition: left 400ms ease-in-out;
+    }
 
-  &.editor-panel--hidden {
-    grid-template-areas: 'panel content';
-    grid-template-columns: 0px 100%;
-  }
+    &.editor-panel--visible {
+      grid-template-areas: 'panel content';
+      grid-template-columns: 350px calc(100% - 350px);
+      overflow: hidden;
+    }
+
+    &.editor-panel--hidden {
+      grid-template-areas: 'panel content';
+      grid-template-columns: 0px 100%;
+    }
 
-  .cove-editor__content,
-  .cove-component__content {
-    grid-area: content;
-    position: relative;
-    left: 0;
-    width: 100% !important;
-    padding-left: 0px !important;
-    grid-area: content;
+    .cove-editor__content,
+    .cove-component__content {
+      grid-area: content;
+      position: relative;
+      left: 0;
+      width: 100% !important;
+      grid-area: content;
+    }
   }
 }

package/components/Layout/styles/editor.scss

@@ -4,14 +4,6 @@ $mediumGray: #e6e6e6;
 
 @import 'editor-grid-view.scss';
 
-.cdc-open-viz-module.isEditor {
-  background: $mediumGray !important;
-}
-
-// .cdc-open-viz-module .form-container {
-//   height: 100%;
-// }
-
 .cove-editor {
   display: grid;
   grid-template-areas: 'panel content';

package/components/Legend/Legend.Gradient.tsx

@@ -0,0 +1,133 @@
+import { Group } from '@visx/group'
+import { Text } from '@visx/text'
+import { type ViewportSize, type MapConfig } from '@cdc/map/src/types/MapConfig'
+import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
+import { getGradientLegendWidth } from '@cdc/core/helpers/getGradientLegendWidth'
+import { DimensionsType } from '../../types/Dimensions'
+
+type CombinedConfig = MapConfig | ChartConfig
+
+interface GradientProps {
+  labels: string[]
+  colors: string[]
+  config: CombinedConfig
+  dimensions: DimensionsType
+  currentViewport: ViewportSize
+  getTextWidth: (text: string, font: string) => string
+}
+
+const LegendGradient = ({
+  labels,
+  colors,
+  config,
+  dimensions,
+  currentViewport,
+  getTextWidth
+}: GradientProps): JSX.Element => {
+  let [width] = dimensions
+
+  const legendWidth = getGradientLegendWidth(width, currentViewport)
+  const uniqueID = `${config.uid}-${Date.now()}`
+
+  const numTicks = colors?.length
+
+  const longestLabel = labels && labels.length > 0 ? labels.reduce((a, b) => (a.length > b.length ? a : b)) : ''
+  const boxHeight = 20
+  let height = 50
+  const margin = 1
+
+  // configure tick witch and angle
+  const textWidth = getTextWidth(longestLabel, `normal 14px sans-serif`)
+  const rotationAngle = Number(config.legend.tickRotation) || 0
+  // Convert the angle from degrees to radians
+  const angleInRadians = rotationAngle * (Math.PI / 180)
+  const newHeight = height + Number(textWidth) * Math.sin(angleInRadians)
+
+  // configre gradient colors
+  const stops = colors.map((color, index) => {
+    const offset = (index / (colors.length - 1)) * 100
+    return <stop key={index} offset={`${offset}%`} style={{ stopColor: color, stopOpacity: 1 }} />
+  })
+
+  // render ticks and labels
+  const ticks = labels.map((key, index) => {
+    const segmentWidth = legendWidth / numTicks
+    const xPositionX = index * segmentWidth + segmentWidth
+    const textAnchor = rotationAngle ? 'end' : 'middle'
+    const verticalAnchor = rotationAngle ? 'middle' : 'start'
+
+    return (
+      <Group top={margin}>
+        <line x1={xPositionX} x2={xPositionX} y1={30} y2={boxHeight} stroke='black' />
+        <Text
+          angle={-config.legend.tickRotation}
+          x={xPositionX}
+          y={boxHeight}
+          dy={10}
+          dx={-segmentWidth / 2}
+          fontSize='14'
+          textAnchor={textAnchor}
+          verticalAnchor={verticalAnchor}
+        >
+          {key}
+        </Text>
+      </Group>
+    )
+  })
+  if ((config.type === 'map' && config.legend.position === 'side') || !config.legend.position) {
+    return
+  }
+  if (
+    config.type === 'chart' &&
+    (config.legend.position === 'left' || config.legend.position === 'right' || !config.legend.position)
+  ) {
+    return
+  }
+
+  if (config.legend.style === 'gradient') {
+    return (
+      <svg style={{ overflow: 'visible', width: '100%', marginTop: 10 }} height={newHeight}>
+        {/* background border*/}
+        <rect
+          x={0}
+          y={0}
+          width={legendWidth + margin * 2}
+          height={boxHeight + margin * 2}
+          fill='#d3d3d3'
+          strokeWidth='0.5'
+        />
+        {/* Define the gradient */}
+        <linearGradient id={`gradient-smooth-${uniqueID}`} x1='0%' y1='0%' x2='100%' y2='0%'>
+          {stops}
+        </linearGradient>
+
+        {config.legend.subStyle === 'smooth' && (
+          <rect x={1} y={1} width={legendWidth} height={boxHeight} fill={`url(#gradient-smooth-${uniqueID})`} />
+        )}
+
+        {config.legend.subStyle === 'linear blocks' &&
+          colors.map((color, index) => {
+            const segmentWidth = legendWidth / numTicks
+            const xPosition = index * segmentWidth
+            return (
+              <Group>
+                <rect
+                  key={index}
+                  x={xPosition}
+                  y={0}
+                  width={segmentWidth}
+                  height={boxHeight}
+                  fill={color}
+                  stroke='white'
+                  strokeWidth='0'
+                />
+              </Group>
+            )
+          })}
+        {/* Ticks and labels */}
+        <g>{ticks}</g>
+      </svg>
+    )
+  }
+}
+export default LegendGradient

package/components/LegendShape.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+interface LegendShapeProps {
+  fill: string
+  borderColor?: string
+  display?: 'inline-block' | 'block' | 'inline'
+  shape?: 'circle' | 'square'
+}
+
+const LegendShape: React.FC<LegendShapeProps> = props => {
+  const { fill, borderColor, display = 'inline-block', shape = 'circle' } = props
+  const dimensions = { width: '1em', height: '1em' }
+  const marginRight = ['circle', 'square'].includes(shape) ? '5px' : '0'
+  const styles = {
+    marginRight: marginRight,
+    borderRadius: shape === 'circle' ? '50%' : '0px',
+    verticalAlign: 'middle',
+    display: display,
+    height: dimensions.height,
+    width: dimensions.width,
+    border: borderColor ? `${borderColor} 1px solid` : 'rgba(0,0,0,.3) 1px solid',
+    backgroundColor: fill
+  }
+
+  return <span className='legend-item' style={styles} />
+}
+
+export default LegendShape

package/components/MultiSelect/MultiSelect.tsx

@@ -6,7 +6,7 @@ import './multiselect.styles.css'
 import { UpdateFieldFunc } from '../../types/UpdateFieldFunc'
 
 interface Option {
-  value: string
+  value: string | number
   label: string
 }
 
@@ -17,12 +17,13 @@ interface MultiSelectProps {
   options: Option[]
   updateField: UpdateFieldFunc<string[]>
   label?: string
-  selected?: string[]
+  selected?: (string | number)[]
   limit?: number
+  tooltip?: React.ReactNode
 }
 
-const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField, selected, limit }) => {
-  const preselectedItems = options.filter(opt => selected?.includes(opt.value)).slice(0, limit)
+const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField, selected = [], limit, tooltip }) => {
+  const preselectedItems = options.filter(opt => selected.includes(opt.value)).slice(0, limit)
   const [selectedItems, setSelectedItems] = useState<Option[]>(preselectedItems)
   const [expanded, setExpanded] = useState(false)
   const multiSelectRef = useRef(null)
@@ -68,22 +69,41 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
   return (
     <div ref={multiSelectRef} className='cove-multiselect'>
       {label && (
-        <label id={multiID} className='cove-input__label'>
+        <span id={multiID} className='edit-label column-heading'>
           {label}
-        </label>
+        </span>
       )}
 
+      {tooltip && tooltip}
+
       <div className='wrapper'>
         <div className='selected'>
           {selectedItems.map(item => (
-            <div key={item.value} aria-labelledby={label ? multiID : undefined} role='button' onClick={() => handleItemRemove(item)} onKeyUp={e => handleItemRemove(item, e)}>
+            <div key={item.value} aria-labelledby={label ? multiID : undefined}>
               {item.label}
-              <button aria-label='Remove' onClick={() => handleItemRemove(item)}>
+              <button
+                aria-label='Remove'
+                onClick={e => {
+                  e.preventDefault()
+                  handleItemRemove(item)
+                }}
+                onKeyUp={e => {
+                  handleItemRemove(item, e)
+                }}
+              >
                 x
               </button>
             </div>
           ))}
-          <button aria-label={expanded ? 'Collapse' : 'Expand'} aria-labelledby={label ? multiID : undefined} className='expand' onClick={() => setExpanded(!expanded)}>
+          <button
+            aria-label={expanded ? 'Collapse' : 'Expand'}
+            aria-labelledby={label ? multiID : undefined}
+            className='expand'
+            onClick={e => {
+              e.preventDefault()
+              setExpanded(!expanded)
+            }}
+          >
             <Icon display={expanded ? 'caretDown' : 'caretUp'} style={{ cursor: 'pointer' }} />
           </button>
         </div>
@@ -98,11 +118,21 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
           </Tooltip>
         )}
       </div>
-      <ul className={'dropdown' + (expanded ? '' : ' hide')}>
+      <ul className={'dropdown' + (expanded ? '' : ' d-none')}>
         {options
           .filter(option => !selectedItems.find(item => item.value === option.value))
           .map(option => (
-            <li className='cove-multiselect-li' key={option.value} role='option' tabIndex={0} onClick={() => handleItemSelect(option)} onKeyUp={e => handleItemSelect(option, e)}>
+            <li
+              className='cove-multiselect-li'
+              key={option.value}
+              role='option'
+              tabIndex={0}
+              onClick={e => {
+                e.preventDefault()
+                handleItemSelect(option, e)
+              }}
+              onKeyUp={e => handleItemSelect(option, e)}
+            >
               {option.label}
             </li>
           ))}

package/components/MultiSelect/multiselect.styles.css

@@ -51,9 +51,6 @@
     overflow-y: scroll;
     min-width: 200px;
     z-index: 4;
-    &.hide {
-      display: none;
-    }
 
     :is(li) {
       cursor: pointer;