@cdc/chart 4.26.2 → 4.26.4

package/src/_stories/ChartBrush.Editor.stories.tsx

@@ -121,7 +121,12 @@ export const BrushDefaultSelectionTests: Story = {
     const getBrushSelectionState = () => {
       // The brush selection is represented by the visx-brush extent rect
       const brushExtent = canvasElement.querySelector('.visx-brush rect[class*="selection"]') as SVGRectElement
-      const brushSvg = canvasElement.querySelector('svg[style*="border: 1px solid"]') as SVGSVGElement
+      const brushSvg =
+        (brushExtent?.closest('svg') as SVGSVGElement) ||
+        (canvasElement.querySelector('.visx-brush svg') as SVGSVGElement)
+      const brushWidthAttr = brushSvg ? parseFloat(brushSvg.getAttribute('width') || '0') : 0
+      const totalBrushWidth = brushSvg ? brushSvg.clientWidth || brushWidthAttr : 0
+      const countInput = canvasElement.querySelector('input[id*="brushDefaultRecentDateCount"]') as HTMLInputElement
 
       // Get the visible data points in the main chart (lines or bars)
       const chartSvg = canvasElement.querySelector('.linear-chart svg, .cove-chart svg') as SVGSVGElement
@@ -130,11 +135,12 @@ export const BrushDefaultSelectionTests: Story = {
       return {
         brushWidth: brushExtent ? parseFloat(brushExtent.getAttribute('width') || '0') : 0,
         brushX: brushExtent ? parseFloat(brushExtent.getAttribute('x') || '0') : 0,
-        totalBrushWidth: brushSvg ? brushSvg.clientWidth : 0,
+        totalBrushWidth,
         visibleDataPoints: dataPointsInChart,
+        defaultRecentDateCountValue: countInput?.value || '',
         selectionPercentage:
-          brushExtent && brushSvg
-            ? (parseFloat(brushExtent.getAttribute('width') || '0') / brushSvg.clientWidth) * 100
+          brushExtent && totalBrushWidth > 0
+            ? (parseFloat(brushExtent.getAttribute('width') || '0') / totalBrushWidth) * 100
             : 0
       }
     }
@@ -176,7 +182,7 @@ export const BrushDefaultSelectionTests: Story = {
       },
       (before, after) => {
         // Changing from 30 to 50 should expand the brush width
-        return after.brushWidth > before.brushWidth
+        return after.defaultRecentDateCountValue === '50' && after.brushWidth > before.brushWidth
       }
     )
 
@@ -226,26 +232,6 @@ export const BrushDefaultSelectionTests: Story = {
       expect(afterSettingCount.dataPointCount).toBeGreaterThan(0)
       expect(afterSettingCount.dataPointCount).toBeLessThanOrEqual(35) // 30 + tolerance
     }
-
-    // ============================================================================
-    // TEST: Clear Recent Date Count Returns to Default 35%
-    // Verifies: When the count is cleared, brush returns to percentage-based default
-    // ============================================================================
-
-    await performAndAssert(
-      'Clear Default Recent Date Count (return to 35%)',
-      getBrushSelectionState,
-      async () => {
-        await userEvent.clear(recentDateCountInput)
-        await userEvent.tab()
-      },
-      (before, after) => {
-        // The selection should return to approximately 35% of the total width
-        // Since we had set it to 30 points (~9% with 329 data points),
-        // clearing should expand it back to ~35%
-        return after.brushWidth > before.brushWidth || after.selectionPercentage > before.selectionPercentage
-      }
-    )
   }
 }
 

package/src/_stories/ChartEditor.Editor.stories.tsx

@@ -3,6 +3,7 @@ import { within, userEvent, expect } from 'storybook/test'
 import { performAndAssert, waitForEditor, openAccordion, MIN_ANIMATION_DELAY_MS } from '@cdc/core/helpers/testing'
 
 import Chart from '../CdcChartComponent'
+import comboConfig from './_mock/combo.json'
 import mockScatterPlot from './_mock/scatterplot_mock.json'
 import smallMultiplesLinesColorsConfig from './_mock/small_multiples/small_multiples_lines_colors.json'
 
@@ -472,7 +473,7 @@ export const SmallMultiplesSectionTests: Story = {
     // ============================================================================
 
     const getChartCounts = () => {
-      const chartContainer = canvasElement.querySelector('.cove-component__content, .chart-container, .visualization')
+      const chartContainer = canvasElement.querySelector('.cove-visualization__body, .chart-container, .visualization')
       const tiles = canvasElement.querySelectorAll('.small-multiple-tile, [class*="tile"]')
       const svgElements = chartContainer?.querySelectorAll('svg[role="img"], svg.chart') || []
 
@@ -653,4 +654,26 @@ export const SmallMultiplesSectionTests: Story = {
   }
 }
 
+export const ComboRightValueAxisSectionTests: Story = {
+  name: 'Combo Right Value Axis Section Tests',
+  args: {
+    config: {
+      ...comboConfig,
+      visualizationType: 'Combo',
+      orientation: 'vertical'
+    },
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await waitForEditor(canvas)
+    await openAccordion(canvas, 'Right Value Axis')
+
+    const rightAxisLabelOffsetInput = canvas.getByLabelText(/^label offset$/i) as HTMLInputElement
+    expect(rightAxisLabelOffsetInput).toBeTruthy()
+    expect(rightAxisLabelOffsetInput.name).toContain('rightLabelOffsetSize')
+  }
+}
+
 export default meta

package/src/_stories/{Chart.CustomColors.stories.tsx → ChartLine.DashedDates.smoke.stories.tsx}

@@ -1,18 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChartComponent'
-import scatterPlotCustomColorConfig from './_mock/scatterplot_mock.json'
+import config from './_mock/line_chart_dashed_dates.json'
 import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
-  title: 'Components/Templates/Chart/Custom Colors',
+  title: 'Components/Templates/Chart/Special Lines - Dashed on Date Axis',
   component: Chart
 }
 
 type Story = StoryObj<typeof Chart>
 
-export const ScatterPlot: Story = {
+export const DashedSpecialLineWithDates: Story = {
   args: {
-    config: scatterPlotCustomColorConfig,
+    config: config,
     isEditor: false
   },
   play: async ({ canvasElement }) => {

package/src/_stories/_mock/line_chart_dashed_dates.json

@@ -0,0 +1,276 @@
+{
+  "type": "chart",
+  "title": "Special Lines - Dashed Effect on Date Axis",
+  "theme": "theme-blue",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
+  "visualizationSubType": "regular",
+  "visualizationType": "Line",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "barStyle": "flat",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": false,
+  "general": {
+    "annotationDropdownText": "Annotations",
+    "showDownloadButton": false,
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": true,
+    "hideNullValue": true
+  },
+  "padding": { "left": 5, "right": 5 },
+  "preliminaryData": [
+    {
+      "type": "effect",
+      "seriesKeys": ["Value"],
+      "label": "Preliminary",
+      "column": "Status",
+      "value": "preliminary",
+      "style": "Dashed Small",
+      "displayTooltip": true,
+      "displayLegend": true,
+      "displayTable": true,
+      "symbol": "",
+      "iconCode": "",
+      "lineCode": "- - -",
+      "hideBarSymbol": false,
+      "hideLineStyle": false,
+      "circleSize": 6,
+      "displayGray": false
+    }
+  ],
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 50,
+    "gridLines": true,
+    "enablePadding": false,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 0,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "anchors": [],
+    "shoMissingDataLabel": true,
+    "showMissingDataLine": true,
+    "categories": [],
+    "label": "Count"
+  },
+  "boxplot": {
+    "plots": [],
+    "borders": "true",
+    "plotOutlierValues": false,
+    "plotNonOutlierValues": true,
+    "labels": {
+      "q1": "Lower Quartile",
+      "q2": "q2",
+      "q3": "Upper Quartile",
+      "q4": "q4",
+      "minimum": "Minimum",
+      "maximum": "Maximum",
+      "mean": "Mean",
+      "median": "Median",
+      "sd": "Standard Deviation",
+      "iqr": "Interquartile Range",
+      "outliers": "Outliers",
+      "values": "Values",
+      "lowerBounds": "Lower Bounds",
+      "upperBounds": "Upper Bounds"
+    }
+  },
+  "topAxis": { "hasLine": false },
+  "isLegendValue": false,
+  "barThickness": 0.35,
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": { "vertical": 300, "horizontal": 750 },
+  "xAxis": {
+    "sortDates": false,
+    "anchors": [],
+    "type": "date",
+    "showTargetLabel": false,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 75,
+    "tickRotation": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 0,
+    "axisPadding": 0,
+    "target": 0,
+    "maxTickRotation": 0,
+    "padding": 6,
+    "showYearsOnce": false,
+    "dataKey": "date",
+    "label": "",
+    "dateParseFormat": "%Y-%m-%d",
+    "dateDisplayFormat": "%b %Y"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": true,
+    "indexLabel": "",
+    "download": false,
+    "showVertical": true,
+    "dateDisplayFormat": "",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "color": "pinkpurple",
+  "columns": {},
+  "legend": {
+    "hide": false,
+    "behavior": "highlight",
+    "axisAlign": true,
+    "singleRow": true,
+    "colorCode": "",
+    "reverseLabelOrder": false,
+    "description": "",
+    "dynamicLegend": false,
+    "dynamicLegendDefaultText": "Show All",
+    "dynamicLegendItemLimit": 5,
+    "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
+    "dynamicLegendChartMessage": "Select Options from the Legend",
+    "label": "",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "hideSuppressedLabels": false,
+    "hideSuppressionLink": false,
+    "seriesHighlight": [],
+    "style": "lines",
+    "subStyle": "linear blocks",
+    "tickRotation": "",
+    "hideBorder": { "side": false, "topBottom": true }
+  },
+  "brush": { "height": 25, "active": false },
+  "exclusions": { "active": false, "keys": [] },
+  "palette": "qualitative-bold",
+  "isPaletteReversed": false,
+  "twoColor": { "palette": "monochrome-1", "isPaletteReversed": false },
+  "labels": false,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": false,
+    "bottomSuffix": "",
+    "bottomPrefix": "",
+    "bottomAbbreviated": false
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": true,
+    "horizontalHoverLine": false
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    {
+      "dataKey": "Value",
+      "type": "Line",
+      "lineType": "curveLinear",
+      "axis": "Left",
+      "tooltip": true
+    }
+  ],
+  "tooltips": { "opacity": 90, "singleSeries": false, "dateDisplayFormat": "" },
+  "annotations": [],
+  "debugSvg": false,
+  "chartMessage": { "noData": "No Data Available" },
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "isResponsiveTicks": false,
+  "forestPlot": {
+    "startAt": 0,
+    "colors": { "line": "", "shape": "" },
+    "lineOfNoEffect": { "show": true },
+    "type": "",
+    "pooledResult": { "diamondHeight": 5, "column": "" },
+    "estimateField": "",
+    "estimateRadius": "",
+    "shape": "square",
+    "rowHeight": 20,
+    "description": { "show": true, "text": "description", "location": 0 },
+    "result": { "show": true, "text": "result", "location": 100 },
+    "radius": { "min": 2, "max": 10, "scalingColumn": "" },
+    "regression": { "lower": 0, "upper": 0, "estimateField": 0 },
+    "leftWidthOffset": 0,
+    "rightWidthOffset": 0,
+    "showZeroLine": false,
+    "leftLabel": "",
+    "rightLabel": ""
+  },
+  "area": { "isStacked": false },
+  "sankey": {
+    "title": { "defaultColor": "black" },
+    "iterations": 1,
+    "rxValue": 0.9,
+    "overallSize": { "width": 900, "height": 700 },
+    "margin": { "margin_y": 25, "margin_x": 0 },
+    "nodeSize": { "nodeWidth": 26, "nodeHeight": 40 },
+    "nodePadding": 55,
+    "nodeFontColor": "black",
+    "nodeColor": { "default": "#ff8500", "inactive": "#808080" },
+    "linkColor": { "default": "#ffc900", "inactive": "#D3D3D3" },
+    "opacity": {
+      "nodeOpacityDefault": 1,
+      "nodeOpacityInactive": 0.1,
+      "LinkOpacityDefault": 1,
+      "LinkOpacityInactive": 0.1
+    },
+    "storyNodeFontColor": "#006778",
+    "storyNodeText": [],
+    "nodeValueStyle": { "textBefore": "(", "textAfter": ")" },
+    "data": []
+  },
+  "version": "4.25.1",
+  "dynamicMarginTop": 0,
+  "data": [
+    { "date": "2024-07-01", "Value": "42", "Status": "final" },
+    { "date": "2024-08-01", "Value": "55", "Status": "final" },
+    { "date": "2024-09-01", "Value": "61", "Status": "final" },
+    { "date": "2024-10-01", "Value": "48", "Status": "final" },
+    { "date": "2024-11-01", "Value": "53", "Status": "final" },
+    { "date": "2024-12-01", "Value": "67", "Status": "final" },
+    { "date": "2025-01-01", "Value": "72", "Status": "preliminary" },
+    { "date": "2025-02-01", "Value": "78", "Status": "preliminary" },
+    { "date": "2025-03-01", "Value": "85", "Status": "preliminary" }
+  ]
+}