@cdc/chart 4.26.1 → 4.26.2

package/src/_stories/TechAdoptionWithLinks.stories.tsx

@@ -2,6 +2,7 @@ import config from './../../examples/tech-adoption-with-links.json'
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import Chart from '../CdcChart'
 import { editConfigKeys } from '@cdc/core/helpers/configHelpers'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Bar Chart/Horizontal Bar Chart Link Titles',
@@ -14,6 +15,9 @@ export const horizontal_barchart_links: Story = {
   args: {
     config: config,
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 
@@ -21,6 +25,9 @@ export const horizontal_barchart_links_single_series: Story = {
   args: {
     config: editConfigKeys(config, [{ path: ['tooltips', 'singleSeries'], value: true }]),
     isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
   }
 }
 

package/src/_stories/_mock/brush_continuous.json

@@ -0,0 +1,86 @@
+{
+  "type": "chart",
+  "title": "Sensor Readings by Temperature - Continuous Axis Demo",
+  "showTitle": true,
+  "theme": "theme-blue",
+  "visualizationType": "Line",
+  "orientation": "vertical",
+  "xAxis": {
+    "type": "continuous",
+    "dataKey": "Temperature",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 75,
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "brushActive": true
+  },
+  "yAxis": {
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 50,
+    "gridLines": false,
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333"
+  },
+  "legend": {
+    "hide": false,
+    "behavior": "isolate",
+    "position": "right"
+  },
+  "table": {
+    "label": "Data Table",
+    "show": true
+  },
+  "series": [
+    {
+      "dataKey": "Pressure",
+      "type": "Line",
+      "lineType": "curveMonotoneX",
+      "weight": 3,
+      "axis": "Left",
+      "name": "Pressure (kPa)",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Humidity",
+      "type": "dashed-md",
+      "lineType": "curveLinear",
+      "weight": 2,
+      "axis": "Left",
+      "name": "Humidity (%)",
+      "tooltip": true
+    }
+  ],
+  "data": [
+    { "Temperature": "10", "Pressure": "101.2", "Humidity": "85" },
+    { "Temperature": "15", "Pressure": "101.0", "Humidity": "82" },
+    { "Temperature": "20", "Pressure": "100.8", "Humidity": "78" },
+    { "Temperature": "25", "Pressure": "100.5", "Humidity": "74" },
+    { "Temperature": "30", "Pressure": "100.2", "Humidity": "70" },
+    { "Temperature": "35", "Pressure": "99.8", "Humidity": "65" },
+    { "Temperature": "40", "Pressure": "99.4", "Humidity": "60" },
+    { "Temperature": "45", "Pressure": "99.0", "Humidity": "56" },
+    { "Temperature": "50", "Pressure": "98.5", "Humidity": "52" },
+    { "Temperature": "55", "Pressure": "98.0", "Humidity": "48" },
+    { "Temperature": "60", "Pressure": "97.4", "Humidity": "45" },
+    { "Temperature": "65", "Pressure": "96.8", "Humidity": "42" },
+    { "Temperature": "70", "Pressure": "96.1", "Humidity": "40" },
+    { "Temperature": "75", "Pressure": "95.4", "Humidity": "38" },
+    { "Temperature": "80", "Pressure": "94.6", "Humidity": "36" },
+    { "Temperature": "85", "Pressure": "93.8", "Humidity": "35" },
+    { "Temperature": "90", "Pressure": "92.9", "Humidity": "34" },
+    { "Temperature": "95", "Pressure": "92.0", "Humidity": "33" },
+    { "Temperature": "100", "Pressure": "91.0", "Humidity": "32" },
+    { "Temperature": "105", "Pressure": "90.0", "Humidity": "31" },
+    { "Temperature": "110", "Pressure": "88.9", "Humidity": "30" },
+    { "Temperature": "115", "Pressure": "87.7", "Humidity": "29" },
+    { "Temperature": "120", "Pressure": "86.5", "Humidity": "28" },
+    { "Temperature": "125", "Pressure": "85.2", "Humidity": "27" },
+    { "Temperature": "130", "Pressure": "83.8", "Humidity": "26" }
+  ]
+}

package/src/_stories/_mock/brush_date_large.json

@@ -0,0 +1,176 @@
+{
+  "type": "chart",
+  "title": "Weekly Regional Metrics - Date Type Brush Demo",
+  "showTitle": true,
+  "theme": "theme-blue",
+  "visualizationType": "Line",
+  "orientation": "vertical",
+  "xAxis": {
+    "type": "date",
+    "dataKey": "Week_End",
+    "dateParseFormat": "%Y-%m-%d",
+    "dateDisplayFormat": "%m/%d/%y",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 75,
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "brushActive": true
+  },
+  "yAxis": {
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 50,
+    "gridLines": false,
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333"
+  },
+  "legend": {
+    "hide": false,
+    "behavior": "isolate",
+    "position": "right"
+  },
+  "table": {
+    "label": "Data Table",
+    "show": true
+  },
+  "series": [
+    {
+      "dataKey": "National",
+      "type": "Line",
+      "lineType": "curveMonotoneX",
+      "weight": 3,
+      "axis": "Left",
+      "name": "National",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Midwest",
+      "type": "Line",
+      "lineType": "curveMonotoneX",
+      "weight": 2,
+      "axis": "Left",
+      "name": "Midwest",
+      "tooltip": true
+    },
+    {
+      "dataKey": "South",
+      "type": "Line",
+      "lineType": "curveMonotoneX",
+      "weight": 2,
+      "axis": "Left",
+      "name": "South",
+      "tooltip": true
+    }
+  ],
+  "data": [
+    { "Week_End": "2022-01-01", "National": "10", "Midwest": "15", "South": "5" },
+    { "Week_End": "2022-01-08", "National": "11", "Midwest": "16", "South": "6" },
+    { "Week_End": "2022-01-15", "National": "12", "Midwest": "17", "South": "7" },
+    { "Week_End": "2022-01-22", "National": "13", "Midwest": "18", "South": "8" },
+    { "Week_End": "2022-01-29", "National": "14", "Midwest": "19", "South": "9" },
+    { "Week_End": "2022-02-05", "National": "15", "Midwest": "20", "South": "10" },
+    { "Week_End": "2022-02-12", "National": "16", "Midwest": "21", "South": "11" },
+    { "Week_End": "2022-02-19", "National": "17", "Midwest": "22", "South": "12" },
+    { "Week_End": "2022-02-26", "National": "18", "Midwest": "23", "South": "13" },
+    { "Week_End": "2022-03-05", "National": "19", "Midwest": "24", "South": "14" },
+    { "Week_End": "2022-03-12", "National": "20", "Midwest": "25", "South": "15" },
+    { "Week_End": "2022-03-19", "National": "21", "Midwest": "26", "South": "16" },
+    { "Week_End": "2022-03-26", "National": "22", "Midwest": "27", "South": "17" },
+    { "Week_End": "2022-04-02", "National": "23", "Midwest": "28", "South": "18" },
+    { "Week_End": "2022-04-09", "National": "24", "Midwest": "29", "South": "19" },
+    { "Week_End": "2022-04-16", "National": "25", "Midwest": "30", "South": "20" },
+    { "Week_End": "2022-04-23", "National": "26", "Midwest": "31", "South": "21" },
+    { "Week_End": "2022-04-30", "National": "27", "Midwest": "32", "South": "22" },
+    { "Week_End": "2022-05-07", "National": "28", "Midwest": "33", "South": "23" },
+    { "Week_End": "2022-05-14", "National": "29", "Midwest": "34", "South": "24" },
+    { "Week_End": "2022-05-21", "National": "30", "Midwest": "35", "South": "25" },
+    { "Week_End": "2022-05-28", "National": "31", "Midwest": "36", "South": "26" },
+    { "Week_End": "2022-06-04", "National": "32", "Midwest": "37", "South": "27" },
+    { "Week_End": "2022-06-11", "National": "33", "Midwest": "38", "South": "28" },
+    { "Week_End": "2022-06-18", "National": "34", "Midwest": "39", "South": "29" },
+    { "Week_End": "2022-06-25", "National": "35", "Midwest": "40", "South": "30" },
+    { "Week_End": "2022-07-02", "National": "36", "Midwest": "41", "South": "31" },
+    { "Week_End": "2022-07-09", "National": "37", "Midwest": "42", "South": "32" },
+    { "Week_End": "2022-07-16", "National": "38", "Midwest": "43", "South": "33" },
+    { "Week_End": "2022-07-23", "National": "39", "Midwest": "44", "South": "34" },
+    { "Week_End": "2022-07-30", "National": "40", "Midwest": "45", "South": "35" },
+    { "Week_End": "2022-08-06", "National": "41", "Midwest": "46", "South": "36" },
+    { "Week_End": "2022-08-13", "National": "42", "Midwest": "47", "South": "37" },
+    { "Week_End": "2022-08-20", "National": "43", "Midwest": "48", "South": "38" },
+    { "Week_End": "2022-08-27", "National": "44", "Midwest": "49", "South": "39" },
+    { "Week_End": "2022-09-03", "National": "45", "Midwest": "50", "South": "40" },
+    { "Week_End": "2022-09-10", "National": "46", "Midwest": "51", "South": "41" },
+    { "Week_End": "2022-09-17", "National": "47", "Midwest": "52", "South": "42" },
+    { "Week_End": "2022-09-24", "National": "48", "Midwest": "53", "South": "43" },
+    { "Week_End": "2022-10-01", "National": "49", "Midwest": "54", "South": "44" },
+    { "Week_End": "2022-10-08", "National": "50", "Midwest": "55", "South": "45" },
+    { "Week_End": "2022-10-15", "National": "51", "Midwest": "56", "South": "46" },
+    { "Week_End": "2022-10-22", "National": "52", "Midwest": "57", "South": "47" },
+    { "Week_End": "2022-10-29", "National": "53", "Midwest": "58", "South": "48" },
+    { "Week_End": "2022-11-05", "National": "54", "Midwest": "59", "South": "49" },
+    { "Week_End": "2022-11-12", "National": "55", "Midwest": "60", "South": "50" },
+    { "Week_End": "2022-11-19", "National": "56", "Midwest": "61", "South": "51" },
+    { "Week_End": "2022-11-26", "National": "57", "Midwest": "62", "South": "52" },
+    { "Week_End": "2022-12-03", "National": "58", "Midwest": "63", "South": "53" },
+    { "Week_End": "2022-12-10", "National": "59", "Midwest": "64", "South": "54" },
+    { "Week_End": "2022-12-17", "National": "60", "Midwest": "65", "South": "55" },
+    { "Week_End": "2022-12-24", "National": "61", "Midwest": "66", "South": "56" },
+    { "Week_End": "2022-12-31", "National": "62", "Midwest": "67", "South": "57" },
+    { "Week_End": "2023-01-07", "National": "63", "Midwest": "68", "South": "58" },
+    { "Week_End": "2023-01-14", "National": "64", "Midwest": "69", "South": "59" },
+    { "Week_End": "2023-01-21", "National": "65", "Midwest": "70", "South": "60" },
+    { "Week_End": "2023-01-28", "National": "66", "Midwest": "71", "South": "61" },
+    { "Week_End": "2023-02-04", "National": "67", "Midwest": "72", "South": "62" },
+    { "Week_End": "2023-02-11", "National": "68", "Midwest": "73", "South": "63" },
+    { "Week_End": "2023-02-18", "National": "69", "Midwest": "74", "South": "64" },
+    { "Week_End": "2023-02-25", "National": "70", "Midwest": "75", "South": "65" },
+    { "Week_End": "2023-03-04", "National": "71", "Midwest": "76", "South": "66" },
+    { "Week_End": "2023-03-11", "National": "72", "Midwest": "77", "South": "67" },
+    { "Week_End": "2023-03-18", "National": "73", "Midwest": "78", "South": "68" },
+    { "Week_End": "2023-03-25", "National": "74", "Midwest": "79", "South": "69" },
+    { "Week_End": "2023-04-01", "National": "75", "Midwest": "80", "South": "70" },
+    { "Week_End": "2023-04-08", "National": "76", "Midwest": "81", "South": "71" },
+    { "Week_End": "2023-04-15", "National": "77", "Midwest": "82", "South": "72" },
+    { "Week_End": "2023-04-22", "National": "78", "Midwest": "83", "South": "73" },
+    { "Week_End": "2023-04-29", "National": "79", "Midwest": "84", "South": "74" },
+    { "Week_End": "2023-05-06", "National": "80", "Midwest": "85", "South": "75" },
+    { "Week_End": "2023-05-13", "National": "81", "Midwest": "86", "South": "76" },
+    { "Week_End": "2023-05-20", "National": "82", "Midwest": "87", "South": "77" },
+    { "Week_End": "2023-05-27", "National": "83", "Midwest": "88", "South": "78" },
+    { "Week_End": "2023-06-03", "National": "84", "Midwest": "89", "South": "79" },
+    { "Week_End": "2023-06-10", "National": "85", "Midwest": "90", "South": "80" },
+    { "Week_End": "2023-06-17", "National": "86", "Midwest": "91", "South": "81" },
+    { "Week_End": "2023-06-24", "National": "87", "Midwest": "92", "South": "82" },
+    { "Week_End": "2023-07-01", "National": "88", "Midwest": "93", "South": "83" },
+    { "Week_End": "2023-07-08", "National": "89", "Midwest": "94", "South": "84" },
+    { "Week_End": "2023-07-15", "National": "90", "Midwest": "95", "South": "85" },
+    { "Week_End": "2023-07-22", "National": "91", "Midwest": "96", "South": "86" },
+    { "Week_End": "2023-07-29", "National": "92", "Midwest": "97", "South": "87" },
+    { "Week_End": "2023-08-05", "National": "93", "Midwest": "98", "South": "88" },
+    { "Week_End": "2023-08-12", "National": "94", "Midwest": "99", "South": "89" },
+    { "Week_End": "2023-08-19", "National": "95", "Midwest": "100", "South": "90" },
+    { "Week_End": "2023-08-26", "National": "96", "Midwest": "101", "South": "91" },
+    { "Week_End": "2023-09-02", "National": "97", "Midwest": "102", "South": "92" },
+    { "Week_End": "2023-09-09", "National": "98", "Midwest": "103", "South": "93" },
+    { "Week_End": "2023-09-16", "National": "99", "Midwest": "104", "South": "94" },
+    { "Week_End": "2023-09-23", "National": "100", "Midwest": "105", "South": "95" },
+    { "Week_End": "2023-09-30", "National": "101", "Midwest": "106", "South": "96" },
+    { "Week_End": "2023-10-07", "National": "102", "Midwest": "107", "South": "97" },
+    { "Week_End": "2023-10-14", "National": "103", "Midwest": "108", "South": "98" },
+    { "Week_End": "2023-10-21", "National": "104", "Midwest": "109", "South": "99" },
+    { "Week_End": "2023-10-28", "National": "105", "Midwest": "110", "South": "100" },
+    { "Week_End": "2023-11-04", "National": "106", "Midwest": "111", "South": "101" },
+    { "Week_End": "2023-11-11", "National": "107", "Midwest": "112", "South": "102" },
+    { "Week_End": "2023-11-18", "National": "108", "Midwest": "113", "South": "103" },
+    { "Week_End": "2023-11-25", "National": "109", "Midwest": "114", "South": "104" },
+    { "Week_End": "2023-12-02", "National": "110", "Midwest": "115", "South": "105" },
+    { "Week_End": "2023-12-09", "National": "111", "Midwest": "116", "South": "106" },
+    { "Week_End": "2023-12-16", "National": "112", "Midwest": "117", "South": "107" },
+    { "Week_End": "2023-12-23", "National": "113", "Midwest": "118", "South": "108" }
+  ]
+}

package/src/_stories/_mock/line_chart_angle_near_zero_fall.json

@@ -0,0 +1,195 @@
+{
+  "type": "chart",
+  "title": "Near Zero Fall Angle",
+  "theme": "theme-blue",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "always show",
+  "visualizationSubType": "regular",
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "68",
+    "gridLines": true,
+    "enablePadding": false,
+    "min": "0",
+    "max": "120",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "label": "Value"
+  },
+  "topAxis": {
+    "hasLine": false
+  },
+  "height": "450",
+  "xAxis": {
+    "sortDates": false,
+    "type": "categorical",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "78",
+    "tickRotation": "0",
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 0,
+    "axisPadding": 0,
+    "padding": 5,
+    "dataKey": "Category",
+    "label": "Data Points"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "Testing near-zero fall angles (close to 180°)",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": true,
+    "download": true,
+    "showVertical": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "legend": {
+    "hide": false,
+    "behavior": "highlight",
+    "axisAlign": true,
+    "singleRow": false,
+    "colorCode": "",
+    "reverseLabelOrder": false,
+    "description": "Near-zero fall angle line",
+    "label": "Series",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "style": "lines",
+    "subStyle": "linear blocks",
+    "shape": "circle",
+    "hideBorder": {
+      "side": false,
+      "topBottom": true
+    },
+    "position": "right",
+    "hasShape": true
+  },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
+  "palette": "qualitative4",
+  "isPaletteReversed": false,
+  "labels": true,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": false
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": false,
+    "horizontalHoverLine": false,
+    "lineDatapointSymbol": "standard"
+  },
+  "data": [
+    {
+      "Category": "A",
+      "Near Zero Fall": "5"
+    },
+    {
+      "Category": "B",
+      "Near Zero Fall": "0"
+    },
+    {
+      "Category": "C",
+      "Near Zero Fall": "80"
+    },
+    {
+      "Category": "D",
+      "Near Zero Fall": "90"
+    },
+    {
+      "Category": "E",
+      "Near Zero Fall": "100"
+    },
+    {
+      "Category": "F",
+      "Near Zero Fall": "10"
+    },
+    {
+      "Category": "G",
+      "Near Zero Fall": "5"
+    },
+    {
+      "Category": "H",
+      "Near Zero Fall": "0"
+    }
+  ],
+  "visualizationType": "Line",
+  "series": [
+    {
+      "dataKey": "Near Zero Fall",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    }
+  ],
+  "description": "Testing edge case near-zero fall angles (close to 180°) where the line is nearly horizontal with slight downward movement.",
+  "annotations": [],
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "lineDatapointColor": "Same as Line",
+  "isResponsiveTicks": false,
+  "general": {
+    "annotationDropdownText": "Annotations",
+    "showDownloadButton": false,
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": true,
+    "hideNullValue": true,
+    "useIntelligentLineChartLabels": true
+  },
+  "isLegendValue": false,
+  "barSpace": 15,
+  "heights": {
+    "vertical": 450,
+    "horizontal": 750
+  },
+  "columns": {},
+  "brush": {
+    "height": 45,
+    "active": false
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "tooltips": {
+    "opacity": 90,
+    "singleSeries": false,
+    "dateDisplayFormat": ""
+  },
+  "version": "4.25.1"
+}