@cdc/chart 4.24.10 → 4.24.12-2

package/src/_stories/ChartAxisLabels.stories.tsx

@@ -13,7 +13,10 @@ type Story = StoryObj<typeof Chart>
 
 export const Abbreviated_Dates: Story = {
   args: {
-    config: editConfigKeys(SimplifiedLineConfig, [{ path: ['xAxis', 'showYearsOnce'], value: true }])
+    config: editConfigKeys(SimplifiedLineConfig, [
+      { path: ['xAxis', 'showYearsOnce'], value: true },
+      { path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' }
+    ])
   }
 }
 

package/src/_stories/ChartEditor.stories.tsx

@@ -4,6 +4,7 @@ import Chart from '../CdcChart'
 import pieChartExample from './_mock/pie_config.json'
 import pieData from './_mock/pie_data.json'
 import urlFilterExample from './_mock/url_filter.json'
+import mockScatterPlot from './_mock/scatterplot_mock.json'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Editor',
@@ -30,4 +31,30 @@ export const Url_Filter: Story = {
   }
 }
 
+export const ScatterPlot: Story = {
+  args: {
+    config: mockScatterPlot,
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+    // play is running before full rendering is complete so sleep function
+    // is needed to delay the execution.
+    // possible related bug: https://github.com/storybookjs/storybook/issues/18258
+    await sleep(3000)
+    const dateCategoryAccordion = await canvas.findByRole('button', { name: /Date\/Category Axis/i })
+    user.click(dateCategoryAccordion)
+    await sleep(1000)
+    const minValueInput = await canvas.findByLabelText('min value')
+    const maxValueInput = await canvas.findByLabelText('max value')
+    await user.type(minValueInput, '0')
+    await user.type(maxValueInput, '100')
+    await sleep(1000)
+    // Scroll to the top of the screen
+    user.click(dateCategoryAccordion)
+    await canvasElement.scrollTo(0, 0)
+  }
+}
+
 export default meta

package/src/_stories/ChartLine.Suppression.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChart'
+import suppressionConfig from './_mock/suppression_mock.json'
+import SuppressedConfig from './_mock/bar-chart-suppressed.json'
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Suppression',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const SuppressedLines: Story = {
+  args: {
+    config: suppressionConfig,
+    isEditor: false
+  }
+}
+export const SuppressedBars: Story = {
+  args: {
+    config: SuppressedConfig,
+    isEditor: false
+  }
+}
+
+export default meta

package/src/_stories/ChartPrefixSuffix.stories.tsx

@@ -3,6 +3,7 @@ import barConfig from './_mock/line_chart_two_points_new_chart.json'
 import annotationConfig from './_mock/annotation_category_mock.json'
 import areaPrefix from './_mock/annotation_category_mock.json'
 import horizontalBarConfig from './_mock/horizontal_bar.json'
+import scatterPlotConfig from './_mock/scatterplot_mock.json'
 
 import Chart from '../CdcChart'
 import { editConfigKeys } from '../helpers/configHelpers'
@@ -148,4 +149,11 @@ export const Top_Suffix_Above_Gridlines_With_Options: Story = {
   }
 }
 
+export const ScatterPlot_Bottom_Commas: Story = {
+  args: {
+    config: editConfigKeys(scatterPlotConfig, [{ path: ['dataFormat', 'bottomCommas'], value: true }])
+  },
+  isEditor: true
+}
+
 export default meta

package/{examples/feature/area/area-chart-date-city-temperature.json → src/_stories/_mock/area_chart_stacked.json}

@@ -1,30 +1,40 @@
 {
+  "annotations": [],
   "type": "chart",
   "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
   "title": "Example Area Chart - City Temperature Data",
   "showTitle": true,
   "showDownloadMediaButton": false,
-  "showChartBrush": false,
   "theme": "theme-blue",
   "animate": false,
   "fontSize": "medium",
   "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
   "barHasBorder": "false",
   "isLollipopChart": false,
   "lollipopShape": "circle",
   "lollipopColorStyle": "two-tone",
-  "visualizationSubType": "regular",
+  "visualizationSubType": "stacked",
   "barStyle": "",
   "roundingStyle": "standard",
   "tipRounding": "top",
   "isResponsiveTicks": false,
   "general": {
-    "showDownloadButton": false
+    "annotationDropdownText": "Annotations",
+    "showDownloadButton": false,
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": true,
+    "hideNullValue": true
   },
   "padding": {
     "left": 5,
     "right": 5
   },
+  "preliminaryData": [],
   "yAxis": {
     "hideAxis": false,
     "displayNumbersOnBar": false,
@@ -47,23 +57,20 @@
     "rightAxisTickColor": "#333",
     "numTicks": "",
     "axisPadding": 0,
+    "scalePadding": 10,
     "tickRotation": 0,
     "anchors": [],
+    "shoMissingDataLabel": true,
+    "showMissingDataLine": true,
+    "categories": [],
     "isLegendValue": false,
     "label": "Y Axis - Temperature"
   },
   "boxplot": {
     "plots": [],
     "borders": "true",
-    "firstQuartilePercentage": 25,
-    "thirdQuartilePercentage": 75,
-    "boxWidthPercentage": 40,
     "plotOutlierValues": false,
     "plotNonOutlierValues": true,
-    "legend": {
-      "showHowToReadText": false,
-      "howToReadText": ""
-    },
     "labels": {
       "q1": "Lower Quartile",
       "q2": "q2",
@@ -80,6 +87,13 @@
       "values": "Values",
       "lowerBounds": "Lower Bounds",
       "upperBounds": "Upper Bounds"
+    },
+    "firstQuartilePercentage": 25,
+    "thirdQuartilePercentage": 75,
+    "boxWidthPercentage": 40,
+    "legend": {
+      "showHowToReadText": false,
+      "howToReadText": ""
     }
   },
   "topAxis": {
@@ -94,8 +108,9 @@
     "horizontal": 750
   },
   "xAxis": {
+    "sortDates": false,
     "anchors": [],
-    "type": "date",
+    "type": "date-time",
     "showTargetLabel": true,
     "targetLabel": "Target",
     "hideAxis": false,
@@ -109,15 +124,20 @@
     "tickLabelColor": "#333",
     "tickColor": "#333",
     "numTicks": "6",
-    "labelOffset": 65,
+    "labelOffset": 0,
     "axisPadding": 0,
     "target": 0,
     "maxTickRotation": 0,
+    "padding": "0",
+    "showYearsOnce": false,
+    "sortByRecentDate": false,
     "isLegendValue": false,
     "dataKey": "Date",
     "label": "X Axis Example Label",
     "dateParseFormat": "%Y-%m-%d",
-    "dateDisplayFormat": "%m/%d/%Y"
+    "dateDisplayFormat": "%m/%d/%Y",
+    "axisBBox": 95.58972930908203,
+    "tickWidthMax": 91
   },
   "table": {
     "label": "Data Type by Date",
@@ -127,16 +147,22 @@
     "caption": "",
     "showDownloadUrl": true,
     "showDataTableLink": true,
+    "showDownloadLinkBelow": true,
     "indexLabel": "",
     "download": true,
     "showVertical": false,
+    "dateDisplayFormat": "",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
     "show": true
   },
   "orientation": "vertical",
   "color": "pinkpurple",
   "columns": {},
   "legend": {
+    "hide": false,
     "behavior": "isolate",
+    "axisAlign": true,
     "singleRow": false,
     "colorCode": "",
     "reverseLabelOrder": false,
@@ -146,8 +172,27 @@
     "dynamicLegendItemLimit": 5,
     "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
     "dynamicLegendChartMessage": "Select Options from the Legend",
-    "position": "right",
-    "label": "Type of Data"
+    "label": "Type of Data",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "hideSuppressedLabels": false,
+    "hideSuppressionLink": false,
+    "seriesHighlight": [],
+    "style": "circles",
+    "subStyle": "linear blocks",
+    "tickRotation": "",
+    "hideBorder": {
+      "side": false,
+      "topBottom": true
+    },
+    "position": "right"
+  },
+  "brush": {
+    "height": 25,
+    "active": false,
+    "pattern_id": "brush_pattern",
+    "accent_color": "#ddd"
   },
   "exclusions": {
     "active": true,
@@ -185,7 +230,8 @@
     {
       "dataKey": "Austin",
       "type": "Area Chart",
-      "tooltip": true
+      "tooltip": true,
+      "axis": "Left"
     },
     {
       "dataKey": "San Francisco",
@@ -195,22 +241,28 @@
     }
   ],
   "tooltips": {
-    "opacity": 90
+    "opacity": 90,
+    "singleSeries": false,
+    "dateDisplayFormat": ""
   },
   "forestPlot": {
     "startAt": 0,
-    "width": "auto",
     "colors": {
       "line": "",
       "shape": ""
     },
+    "lineOfNoEffect": {
+      "show": true
+    },
+    "type": "",
+    "pooledResult": {
+      "diamondHeight": 5,
+      "column": ""
+    },
     "estimateField": "",
     "estimateRadius": "",
-    "lowerCiField": "",
-    "upperCiField": "",
     "shape": "",
     "rowHeight": 20,
-    "showZeroLine": false,
     "description": {
       "show": true,
       "text": "description",
@@ -232,15 +284,60 @@
       "estimateField": 0
     },
     "leftWidthOffset": 0,
-    "rightWidthOffset": 0
-  },
-  "brush": {
-    "pattern_id": "brush_pattern",
-    "accent_color": "#ddd"
+    "rightWidthOffset": 0,
+    "showZeroLine": false,
+    "leftLabel": "",
+    "rightLabel": "",
+    "width": "auto",
+    "lowerCiField": "",
+    "upperCiField": ""
   },
   "area": {
     "isStacked": true
   },
+  "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": []
+  },
+  "showChartBrush": false,
   "dataDescription": {
     "horizontal": false,
     "series": false
@@ -4648,5 +4745,6 @@
   "description": "This example shows a bar chart created in the visualization editor in WCMS",
   "dataCutoff": "0",
   "validated": 4.23,
-  "dynamicMarginTop": 0
+  "dynamicMarginTop": 0,
+  "version": "4.24.10"
 }