@cdc/chart 4.25.11 → 4.26.2

package/CLAUDE.local.md

@@ -0,0 +1,79 @@
+# @cdc/chart — Package Rules
+
+## Entry Point Pattern
+- `CdcChart.tsx` (wrapper) — handles data fetching, config loading, CSV parsing. Does NOT set up state or context.
+- `CdcChartComponent.tsx` (main, ~1540 lines) — sets up useReducer, both context providers, data transformation, and chart rendering orchestration.
+- Do not confuse the two. Data loading changes go in the wrapper; rendering/state changes go in the main component.
+
+## Chart Types
+Each visualization type is a **separate component** in `src/components/`:
+
+| visualizationType | Component | Notes |
+|---|---|---|
+| `'Bar'` | `BarChart/` | Has sub-components: Horizontal, Vertical, StackedHorizontal, StackedVertical |
+| `'Line'` | `LineChart/` | Circle and BumpCircle sub-components |
+| `'Pie'` | `PieChart/` | |
+| `'Scatter Plot'` | `ScatterPlot/` | |
+| `'Area Chart'` | `AreaChart/` | |
+| `'Box Plot'` | `BoxPlot/` | |
+| `'Forest Plot'` | `ForestPlot/` | |
+| `'Sankey'` | `Sankey/` | Uses d3-sankey |
+| `'Bump Chart'` | `BumpChart/` | |
+| `'Combo'` | `Combo/` | Mixed bar + line |
+| `'Forecasting'` | `Forecasting/` | |
+| `'Deviation Bar'` | `DeviationBar/` | |
+| `'Paired Bar'` | `PairedBar/` | |
+| `'Spark Line'` | `Sparkline/` | |
+| `'Warming Stripes'` | `WarmingStripes/` | |
+
+CdcChartComponent routes to the correct component based on `config.visualizationType`:
+- Pie → `<PieChart />`
+- Sankey → `<SankeyChart />`
+- Spark Line → `<SparkLine />`
+- Everything else → `<LinearChart />` (shared SVG container)
+
+## State Management
+
+### Actions (16 types in `store/chart.actions.ts`):
+`SET_CONFIG`, `UPDATE_CONFIG`, `SET_COLOR_SCALE`, `SET_STATE_DATA`, `SET_EXCLUDED_DATA`, `SET_FILTERED_DATA`, `SET_SERIES_HIGHLIGHT`, `SET_VIEWPORT`, `SET_VIZ_VIEWPORT`, `SET_DIMENSIONS`, `SET_CONTAINER`, `SET_LOADED_EVENT`, `SET_DRAG_ANNOTATIONS`, `SET_LOADING`, `SET_BRUSH_DATA`
+
+### Context (`ConfigContext.tsx`):
+- `ConfigContext` — read-only state (ChartContext type)
+- `ChartDispatchContext` — dispatch function
+- ChartContext provides: `config`, `colorScale`, `transformedData`, `rawData`, `tableData`, formatting functions (`formatDate`, `formatNumber`, `parseDate`), accessibility helpers, refs (`legendRef`, `parentRef`, `svgRef`), viewport info, and editor flags.
+
+## Key Hooks (in `src/hooks/`)
+- `useScales` (528 lines) — generates xScale, yScale, seriesScale for all chart types. Returns `{ xScale, yScale, seriesScale, min, max, leftMax, rightMax }`.
+- `useTooltip` (720 lines) — tooltip mouse handlers, series filtering, formatting. Returns handlers and `TooltipListItem` component.
+- `useReduceData` — memoized min/max/stats computation.
+- `useRightAxis` — dual Y-axis support (series can specify `axis: 'right'`).
+- `useHighlightedBars` — bar highlighting logic.
+- `useIntersectionObserver` — lazy loading / viewport detection.
+
+## Where to Put New Code
+
+| What you're adding | Where it goes |
+|---|---|
+| New chart type | `src/components/<ChartType>/` with `index.tsx` exporting main component |
+| Chart-specific helper | `src/helpers/<name>.ts` |
+| Chart-specific hook | `src/hooks/use<Name>.ts` |
+| Chart-specific type | `src/types/<Name>.ts` |
+| New action | `src/store/chart.actions.ts` (add type) + `src/store/chart.reducer.ts` (add case) |
+| Story | `src/_stories/<ChartType>.stories.tsx` with mock data in `src/_stories/_mock/` |
+
+## Non-Obvious Patterns
+- **Runtime config**: `config.runtime` is computed at render time by `getNewRuntime()` — contains `seriesKeys`, `seriesLabelsAll`, `barSeriesKeys`, `lineSeriesKeys`. Not part of initial state.
+- **Dynamic categories**: Series can have `dynamicCategory` field where the series key becomes a category value from pivoted data. Check `originalDataKey` for the source column.
+- **Brush data priority**: `getTransformedData()` uses brushData > filteredData > excludedData (first non-empty wins).
+- **Two viewports**: `currentViewport` = overall container size, `vizViewport` = chart area only. Tick counts and legend layout depend on these.
+- **Color scale precedence**: `customColorsOrdered` (1:1 mapping) > `customColors` > palette name > fallback palette.
+- **Preliminary data / suppression**: `config.preliminaryData` stores effect/suppression icons that affect legend, tooltips, and line styles.
+- **Image ID**: Each chart gets a unique `imageId` (`cove-<random>`) for SVG gradient/pattern IDs to avoid collisions when multiple charts are on one page.
+- **Line-to-bar conversion**: `allowLineToBarGraph` + `isConvertLineToBarGraph()` — line charts can auto-convert to bars under certain conditions.
+- **Small multiples**: `config.smallMultiples.mode` can be `'by-column'` or `'by-series'`. Each tile gets its own data slice. `synchronizedTooltips` enables cross-tile hover.
+
+## SCSS
+- `src/scss/main.scss` — all styles scoped under `.cdc-open-viz-module.type-chart`
+- Imports `@cdc/core/styles/utils/breakpoints` for responsive mixins
+- Animation keyframes: `revealLolly`, `dash`, `growBar`, `growBarH`
+- Legend positions: `.legend-top`, `.legend-left`, `.legend-right`, `.legend-bottom`

package/dist/{cdcchart-dgT_1dIT.es.js → cdcchart-DQ00cQCm.es.js}

@@ -1,22 +1,3 @@
-/*!
- * html2canvas 1.4.1 <https://html2canvas.hertzen.com>
- * Copyright (c) 2022 Niklas von Hertzen <https://hertzen.com>
- * Released under MIT License
- */
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
 var mr = function(e, A) {
   return mr = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(t, r) {
     t.__proto__ = r;
@@ -3551,7 +3532,7 @@ var qi = 1, Ur = 2, Fr = 3, Tt = 4, St = 5, ji = 7, Ot = 8, hr = 9, dr = 10, Mt
             var i = (t = A.getContext("webgl2")) !== null && t !== void 0 ? t : A.getContext("webgl");
             if (i) {
               var a = i.getContextAttributes();
-              (a == null ? void 0 : a.preserveDrawingBuffer) === !1 && this.context.logger.warn("Unable to clone WebGL context as it has preserveDrawingBuffer=false", A);
+              a?.preserveDrawingBuffer === !1 && this.context.logger.warn("Unable to clone WebGL context as it has preserveDrawingBuffer=false", A);
             }
             s.drawImage(A, 0, 0);
           }