@cdc/chart 4.26.1 → 4.26.3

package/src/scss/main.scss

@@ -1,25 +1,76 @@
-@import '@cdc/core/styles/v2/utils/breakpoints';
+@import '@cdc/core/styles/utils/breakpoints';
+@import '@cdc/core/styles/layout/wrapper-padding';
 
 .form-container {
   overflow-y: auto;
 }
 
-.cdc-open-viz-module.type-dashboard {
-  .cdc-open-viz-module.type-chart.isEditor {
-    .cdc-chart-inner-container {
+.cove-visualization.type-dashboard {
+  .cove-visualization.type-chart.is-editor {
+    .cove-visualization__body {
       background: white;
     }
   }
 }
 
-.cdc-open-viz-module.type-chart {
+.cove-visualization.type-chart {
   @import 'DataTable';
 
+  .cove-visualization__body {
+    @include cove-visualization-body-padding;
+  }
+
+  .cove-visualization__body.component--tp5-treatment {
+    background: transparent;
+
+    .cdc-callout {
+      box-shadow: 0 2px 4px rgb(159 159 159 / 10%);
+      border: 1px solid #dff2f6;
+      margin: 0;
+      padding: 1.25rem;
+      border-radius: 0.25rem;
+      position: relative;
+      background: transparent;
+
+      .cdc-callout__flag {
+        position: absolute;
+        top: -0.36rem;
+        right: 1.08rem;
+        width: 1.84rem;
+        height: auto;
+      }
+
+      .cove-visualization__title,
+      .cove-visualization__header {
+        background: transparent;
+        border: 0;
+        color: var(--cool-gray-90, #1f2937);
+        margin: 0 0 1rem;
+        padding: 0;
+        border-radius: 0;
+
+        h2 {
+          color: var(--cool-gray-90, #1f2937);
+          font-family: var(--fonts-nunito, var(--app-font-secondary));
+          font-size: 1.1rem;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+
+  .cove-visualization__title,
+  .cove-visualization__header {
+    margin-bottom: 0 !important;
+  }
+
   .legend-top {
     .legend-wrapper .tooltip-boundary {
       display: flex;
       flex-wrap: wrap;
+      row-gap: var(--cove-visualization-section-gap, 1.5rem);
       order: 2;
+
       aside {
         width: 100%;
         order: 1;
@@ -31,13 +82,16 @@
     .legend-wrapper {
       display: flex;
       flex-wrap: wrap;
+      row-gap: var(--cove-visualization-section-gap, 1.5rem);
+
       aside {
         width: 100%;
+        margin-top: var(--cove-visualization-section-gap, 1.5rem) !important;
       }
     }
   }
 
-  &.isEditor .cdc-chart-inner-container {
+  &.is-editor .cove-visualization__body {
     background: white;
   }
 
@@ -47,11 +101,6 @@
     margin-bottom: 20px;
   }
 
-  .subtext,
-  .subtext--responsive-ticks,
-  .section-subtext {
-  }
-
   .type-pie {
     svg.animated-pie {
       width: auto !important;
@@ -60,7 +109,6 @@
 
   .legend-container {
     #supression-tooltip {
-      font-family: 'Nunito', sans-serif;
       font-size: 0.8337rem;
       font-weight: 400;
       max-width: 16.7rem;
@@ -70,6 +118,7 @@
       white-space: normal;
       line-height: 1.4;
     }
+
     background: #fff;
     width: 100%;
     vertical-align: top;
@@ -101,6 +150,7 @@
       flex-direction: column;
       row-gap: var(--space-between-legend-item-rows);
       column-gap: var(--space-between-legend-item-columns);
+
       &.double-column,
       &.single-row {
         display: grid;
@@ -126,6 +176,7 @@
       text-align: left;
       user-select: none;
       line-height: var(--legend-item-font-size);
+
       .visx-legend-label {
         word-wrap: break-word;
         white-space: pre-wrap;
@@ -137,7 +188,7 @@
       white-space: nowrap;
     }
 
-    .legend-item > .legend-item {
+    .legend-item>.legend-item {
       display: inline-block;
       flex: 0 0 auto;
     }
@@ -146,10 +197,16 @@
       cursor: pointer;
       transition: 0.2s all;
 
+      &.not-clickable,
+      &.not-clickable .legend-item {
+        cursor: default;
+      }
+
       &.inactive {
         opacity: 0.5;
         transition: 0.2s all;
       }
+
       &.highlighted {
         outline: 1px solid #005ea2;
         outline-offset: 5px;
@@ -165,10 +222,11 @@
         left: 0%;
         top: 108%;
 
-        & > * {
+        &>* {
           margin: 0;
         }
-        & > p,
+
+        &>p,
         a {
           margin-left: 5px;
         }
@@ -177,6 +235,7 @@
   }
 
   .dynamic-legend-list {
+
     // overide traditional legend item that uses !important
     .legend-item {
       align-items: flex-end !important;
@@ -209,7 +268,7 @@
     font-size: 1em;
     vertical-align: middle;
 
-    & > span {
+    &>span {
       display: flex;
       justify-items: center;
       align-items: center;
@@ -219,23 +278,25 @@
       max-height: 1px;
     }
 
-    & > span[class*='Asterisk'] {
+    &>span[class*='Asterisk'] {
       transform: scale(1.8);
       margin-top: 15px;
     }
-    & > span[class*='Dagger'] {
+
+    &>span[class*='Dagger'] {
       margin-top: 2px;
     }
-    & > span[class*='Sign'] {
+
+    &>span[class*='Sign'] {
       margin-top: 1px;
     }
 
-    & > svg {
+    &>svg {
       width: 50px;
       height: 23px;
     }
 
-    & > p {
+    &>p {
       margin: 0;
     }
   }
@@ -252,18 +313,37 @@
     position: relative;
   }
 
-  .chart-container {
+  .visualization-container {
     display: flex;
     align-items: flex-start;
     flex-wrap: wrap;
     justify-content: space-between;
+    min-width: 0;
+    max-width: 100%;
+
+    .legend-wrapper {
+      min-width: 0;
+      max-width: 100%;
+
+      >div,
+      >aside {
+        min-width: 0;
+        max-width: 100%;
+      }
+    }
+
+    .tooltip-boundary {
+      min-width: 0;
+      max-width: 100%;
+    }
 
     &.legend-top:not(.legend-hidden) {
       .legend-wrapper {
-        & > div {
+        &>div {
           order: 2;
           width: 100%;
         }
+
         aside {
           width: 100%;
           order: 1;
@@ -274,10 +354,11 @@
 
     &.legend-left:not(.legend-hidden) {
       .legend-wrapper {
-        & > div {
+        &>div {
           order: 2;
           width: 75%;
         }
+
         aside {
           width: 25%;
           order: 1;
@@ -288,10 +369,11 @@
 
     &.legend-right:not(.legend-hidden) {
       .legend-wrapper {
-        & > div {
+        &>div {
           order: 1;
           width: 75%;
         }
+
         aside {
           width: 25%;
           height: fit-content;
@@ -304,20 +386,25 @@
       display: flex;
       flex-direction: row-reverse;
     }
+
     &.top {
       flex-wrap: nowrap;
       flex-direction: column-reverse;
-      & > div.tooltip-boundary {
+
+      &>div.tooltip-boundary {
         margin-top: 1.5em;
       }
     }
+
     &.bottom {
       flex-wrap: nowrap;
       flex-direction: column;
     }
-    &.legend-hidden > svg {
+
+    &.legend-hidden>svg {
       width: 100% !important;
     }
+
     &.dashboard-brush {
       margin-bottom: 2.5em;
     }
@@ -347,7 +434,7 @@
       pointer-events: none;
     }
 
-    > svg {
+    >svg {
       overflow: visible;
       font-size: 14px;
       margin: 1rem 0 2rem;
@@ -362,7 +449,7 @@
     }
 
     &.chart-line--hover {
-      > svg circle {
+      >svg circle {
         opacity: 0;
 
         &:hover {
@@ -372,12 +459,12 @@
     }
 
     &.chart-line--always {
-      > svg circle {
+      >svg circle {
         opacity: 1;
       }
 
       // Animations for line chart and data points
-      > svg.animated {
+      >svg.animated {
         circle {
           opacity: 0;
           animation: revealLolly 0.25s linear forwards;
@@ -411,7 +498,7 @@
   }
 
   @include breakpointClass(sm) {
-    .chart-container {
+    .visualization-container {
       .no-wrap {
         flex-wrap: nowrap;
       }
@@ -426,6 +513,7 @@
           margin-right: 1em;
           order: 0;
         }
+
         &.bottom,
         &.top {
           width: 100%;
@@ -436,8 +524,8 @@
   }
 
   @include breakpointClass(md) {
-    .chart-container {
-      > svg {
+    .visualization-container {
+      >svg {
         font-size: 16px;
         width: 75%;
         order: 1;
@@ -453,7 +541,6 @@
   // ANIMATIONS
   // Pie Chart Animations
   .animated-pie {
-    margin: auto !important;
     transition: all 0.4s ease-in-out;
     opacity: 0;
     transform-origin: center;
@@ -494,6 +581,7 @@
     &.animated path.animation {
       opacity: 0;
     }
+
     &.animate {
       path.animation {
         opacity: 1;
@@ -501,6 +589,7 @@
         stroke-dashoffset: 4000;
         animation: dash 2s ease-in-out forwards;
       }
+
       @keyframes dash {
         to {
           stroke-dashoffset: 0;
@@ -519,6 +608,7 @@
     }
 
     &.animated {
+
       .vertical path,
       .vertical rect,
       .vertical foreignObject div {
@@ -536,6 +626,7 @@
       }
 
       &.animate {
+
         path,
         rect,
         foreignObject div {
@@ -593,7 +684,8 @@
 .cdc-visualization__paired-bar-chart {
   text-align: center;
   transform: scale(1);
-  > .visx-group[style] {
+
+  >.visx-group[style] {
     transform: scale(1);
   }
 }
@@ -614,36 +706,39 @@
   }
 }
 
-.cdc-open-viz-module .is-editor .cdc-chart-inner-container {
-  overflow: hidden;
-  background-color: var(--white);
-}
+.cove-visualization.type-chart.type-sparkline {
+  &.lg .visualization-container>svg {
+    width: 100%;
+  }
 
-.isEditor.type-sparkline .cdc-chart-inner-container {
-  margin: 3em auto 0;
-  max-width: 60%;
-}
+  .visualization-container.sparkline {
+    display: flex !important;
+    flex-wrap: wrap !important;
+  }
 
-.cdc-open-viz-module.type-chart.lg.type-sparkline .chart-container > svg {
-  width: 100%;
-}
+  .cove-visualization__body {
+    &:not(.component--has-background):not(.component--hide-background-color) {
+      background: #f2f2f2;
+    }
 
-.chart-container.sparkline {
-  display: flex !important;
-  flex-wrap: wrap !important;
-}
+    &.component--hide-background-color {
+      background: transparent;
+    }
 
-.cdc-open-viz-module.type-chart.type-sparkline {
-  .cove-component__content {
-    background: #f2f2f2;
-  }
+    &.sparkline {
+      padding: 1em;
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
 
-  .cove-component__content.component--hideBackgroundColor {
-    background: transparent;
-  }
+      .visx-axis-tick:first-of-type {
+        transform: translate(20px, 0);
+      }
+
+      .visx-axis-tick:last-of-type {
+        transform: translate(-20px, 0);
+      }
+    }
 
-  .cove-component__content .chart-container {
-    padding: 1em;
   }
 
   .subtext,
@@ -651,29 +746,12 @@
     margin-top: 0px;
   }
 
-  .isEditor {
+  .is-editor {
     position: relative;
   }
 }
 
-.cdc-open-viz-module .cove-component__content.sparkline {
-  padding: 1em;
-}
-
-.cove-component__content.sparkline {
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-
-  .visx-axis-tick:first-of-type {
-    transform: translate(20px, 0);
-  }
-
-  .visx-axis-tick:last-of-type {
-    transform: translate(-20px, 0);
-  }
-}
-
-.cdc-open-viz-module .debug {
+.cove-visualization .debug {
   border: 2px solid red;
 }
 

package/src/selectors/README.md

@@ -0,0 +1,68 @@
+# Config Selectors
+
+Typed selector functions and hooks for extracting memoizable slices of chart configuration.
+
+## Purpose
+
+These selectors help:
+1. **Reduce coupling** - Components depend on specific config slices, not the entire config object
+2. **Improve memoization** - Hooks use specific dependencies instead of the full config
+3. **Enhance testability** - Selectors can be easily mocked in tests
+4. **Document config usage** - Selectors serve as documentation for which config properties are used together
+
+## Usage
+
+### Direct Selectors
+
+```typescript
+import { selectAxisConfig, selectVisualizationConfig } from '../selectors'
+
+// In a component
+const axisConfig = selectAxisConfig(config)
+// Returns: { xAxis, yAxis, runtime: { xAxis, yAxis, originalXAxis } }
+```
+
+### Hook Versions (Memoized)
+
+```typescript
+import { useAxisConfig, useVisualizationConfig } from '../selectors'
+
+// In a component - automatically memoized
+const axisConfig = useAxisConfig(config)
+const vizConfig = useVisualizationConfig(config)
+```
+
+## Available Selectors
+
+| Selector | Hook | Description |
+|----------|------|-------------|
+| `selectAxisConfig` | `useAxisConfig` | X/Y axis configuration |
+| `selectVisualizationConfig` | `useVisualizationConfig` | Chart type and orientation |
+| `selectDisplayConfig` | `useDisplayConfig` | Animation, debug flags |
+| `selectTooltipConfig` | `useTooltipConfig` | Tooltip settings |
+| `selectLegendConfig` | - | Legend position and visibility |
+| `selectDataFormatConfig` | - | Number formatting options |
+| `selectChartMessages` | - | UI message strings |
+| `selectBrushConfig` | - | Brush/filter settings |
+| `selectForestPlotConfig` | - | Forest plot specific options |
+| `selectSmallMultiplesConfig` | - | Small multiples mode |
+
+## Type Exports
+
+Each selector has a corresponding type export:
+
+```typescript
+import type { AxisConfig, VisualizationConfig } from '../selectors'
+```
+
+## Adding New Selectors
+
+1. Add the selector function that extracts config properties
+2. Optionally add a hook version with proper dependencies
+3. Export the type using `ReturnType<typeof selectXxx>`
+4. Update this README
+
+## Notes
+
+- Selectors are created but integration into LinearChart is deferred
+- Future work: gradually replace direct `config.x.y` accesses with selector usage

package/src/store/chart.reducer.ts

@@ -75,5 +75,7 @@ export const reducer = (state: ChartState, action: ChartActions): ChartState =>
       return { ...state, isDraggingAnnotation: action.payload }
     case 'SET_BRUSH_DATA':
       return { ...state, brushData: action.payload }
+    default:
+      return state
   }
 }

package/src/test/CdcChart.test.jsx

@@ -1,11 +1,11 @@
-import path from 'path'
+import path from 'node:path'
 import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
 import { describe, it, expect } from 'vitest'
 
 describe('Chart', () => {
   it('Can be built in isolation', async () => {
     const pkgDir = path.join(__dirname, '..')
-    const result = testStandaloneBuild(pkgDir)
+    const result = await testStandaloneBuild(pkgDir)
     expect(result).toBe(true)
   }, 300000)
 })

package/src/types/ChartConfig.ts

@@ -1,6 +1,7 @@
 import { Axis } from '@cdc/core/types/Axis'
 import { MarkupConfig } from '@cdc/core/types/MarkupVariable'
 import { type ForestPlotConfigSettings } from './ForestPlot'
+import { type HorizonConfigSettings } from './Horizon'
 import { type Column } from '@cdc/core/types/Column'
 import { type Series } from '@cdc/core/types/Series'
 import { Runtime } from '@cdc/core/types/Runtime'
@@ -18,6 +19,7 @@ type General = CoreGeneral & {
     customColors?: string[]
     customColorsOrdered?: string[]
   }
+  useIntelligentLineChartLabels?: boolean
 }
 import { type Link } from './../components/Sankey/types'
 import { type DataDescription } from '@cdc/core/types/DataDescription'
@@ -39,9 +41,11 @@ export type VisualizationType =
   | 'Box Plot'
   | 'Deviation Bar'
   | 'Forest Plot'
+  | 'Horizon Chart'
   | 'Line'
   | 'Paired Bar'
   | 'Pie'
+  | 'Radar'
   | 'Scatter Plot'
   | 'Spark Line'
   | 'Combo'
@@ -130,6 +134,8 @@ type Visual = {
   accent?: boolean
   background?: boolean
   hideBackgroundColor?: boolean
+  tp5Treatment?: boolean
+  tp5Background?: boolean
   verticalHoverLine?: boolean
   horizontalHoverLine?: boolean
   lineDatapointSymbol: 'none' | 'standard'
@@ -152,6 +158,7 @@ export type AllChartsConfig = {
   columns: ChartColumns
   confidenceKeys: ConfidenceInterval
   data: Object[]
+  dataMetadata?: Record<string, string>
   dataUrl: string
   dataCutoff: number
   dataDescription: Partial<DataDescription>
@@ -172,6 +179,7 @@ export type AllChartsConfig = {
     mobileVertical: number
   }
   highlightedBarValues: { value: any; color: string; borderWidth: number; legendLabel: string }[]
+  horizon?: HorizonConfigSettings
   introText: string
   isLollipopChart: boolean
   isLegendValue: boolean
@@ -179,6 +187,7 @@ export type AllChartsConfig = {
   isPaletteReversed: boolean
   labels: boolean
   legend: Legend
+  locale: string
   lineDatapointColor: 'Same as Line' | 'Lighter than Line'
   lineDatapointStyle: 'hidden' | 'always show' | 'hover'
   lollipopColorStyle: 'regular' | 'two-tone'
@@ -267,6 +276,19 @@ export type AllChartsConfig = {
       default: string
     }
   }
+  radar?: {
+    gridRings: number
+    showGridRings: boolean
+    gridRingStyle: 'polygons' | 'circles'
+    scaleMin: number
+    scaleMax: number | string
+    showFill: boolean
+    fillOpacity: number
+    showPoints: boolean
+    pointRadius: number
+    strokeWidth: number
+    axisLabelOffset: number
+  }
 } & MarkupConfig
 
 type ForestPlotConfig = {

package/src/types/ChartContext.ts

@@ -36,6 +36,7 @@ type SharedChartContext = {
   setLegendIsolateValues?: Function
   svgRef?: React.RefObject<SVGSVGElement>
   handleSmallMultipleHover?: (xAxisValue: any, yCoordinate: number) => void
+  visibleAnnotations?: Annotation[]
 }
 
 // Line Chart Specific Context