@cdc/chart 4.24.9-1 → 4.24.10

package/src/_stories/ChartAxisTitles.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChart'
+import longXLabelsConfig from './_mock/large_x_axis_labels.json'
+import pairedBarConfig from './_mock/paired-bar.json'
+import { editConfigKeys } from '../helpers/configHelpers'
+import { ChartConfig } from '../types/ChartConfig'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Axis Titles',
+  component: Chart
+}
+
+export default meta
+
+type Story = StoryObj<typeof Chart>
+
+export const Dynamic_Labels: Story = {
+  args: {
+    config: editConfigKeys(longXLabelsConfig, [{ path: ['xAxis', 'label'], value: 'This is the title' }])
+  }
+}
+
+export const Rotated_Labels: StoryObj<{ config: ChartConfig; tickRotation: number }> = {
+  args: {
+    tickRotation: 0, // Default value
+    config: longXLabelsConfig
+  },
+  argTypes: {
+    tickRotation: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 90,
+        step: 5
+      }
+    }
+  },
+  render: args => {
+    // Create a new config object with the updated tickRotation
+    const config = editConfigKeys(longXLabelsConfig, [
+      { path: ['xAxis', 'label'], value: 'This is the title This is the title This is the title' },
+      { path: ['xAxis', 'tickRotation'], value: args.tickRotation }
+    ])
+
+    return <Chart config={config} />
+  }
+}
+
+export const Paired_Bar: Story = {
+  args: {
+    config: pairedBarConfig
+  }
+}

package/src/_stories/ChartPrefixSuffix.stories.tsx

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/react'
+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 Chart from '../CdcChart'
+import { editConfigKeys } from '../helpers/configHelpers'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Prefix Suffix',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Top_Suffix: Story = {
+  args: {
+    config: editConfigKeys(barConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'suffix'], value: ' Somethings per Something' },
+      { path: ['yAxis', 'gridLines'], value: true }
+    ])
+  }
+}
+
+export const Top_Suffix_Worst_Case: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'suffix'], value: ' Somethings per Something' }
+    ])
+  }
+}
+
+export const Top_Suffix_With_Options: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['yAxis', 'tickRotation'], value: 45 },
+      { path: ['yAxis', 'tickLabelColor'], value: 'red' }
+    ])
+  }
+}
+
+export const Top_Suffix_No_Space: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'suffix'], value: 'lbs' }
+    ])
+  }
+}
+
+export const Top_Suffix_With_Space: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'suffix'], value: 'lbs of something' }
+    ])
+  }
+}
+
+export const Suffix: Story = {
+  args: {
+    config: annotationConfig
+  }
+}
+export const Top_Prefix: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'prefix'], value: '$' },
+      { path: ['dataFormat', 'suffix'], value: '' }
+    ])
+  }
+}
+export const Prefix: Story = {
+  args: {
+    config: editConfigKeys(areaPrefix, [
+      { path: ['dataFormat', 'prefix'], value: '$' },
+      { path: ['dataFormat', 'suffix'], value: '' }
+    ])
+  }
+}
+
+export const Top_Prefix_And_Suffix: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'prefix'], value: '$' }
+    ])
+  }
+}
+export const Horizontal_Bar: Story = {
+  args: {
+    config: editConfigKeys(horizontalBarConfig, [
+      { path: ['dataFormat', 'suffix'], value: ' suf' },
+      { path: ['dataFormat', 'prefix'], value: 'pre' }
+    ])
+  }
+}
+
+export const Top_Suffix_On_Line: Story = {
+  args: {
+    config: editConfigKeys(barConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'suffix'], value: ' Somethings per Something' },
+      { path: ['yAxis', 'gridLines'], value: true },
+      { path: ['yAxis', 'labelsAboveGridlines'], value: true },
+      { path: ['yAxis', 'hideAxis'], value: true }
+    ])
+  }
+}
+
+export const Values_On_Line_All_Suffix: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['yAxis', 'labelsAboveGridlines'], value: true },
+      { path: ['dataFormat', 'suffix'], value: ' units' },
+      { path: ['yAxis', 'gridLines'], value: true },
+      { path: ['yAxis', 'hideAxis'], value: true }
+    ])
+  }
+}
+
+export const Values_on_Line_Top_Suffix_Only_Area_Worst_Case: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['dataFormat', 'onlyShowTopPrefixSuffix'], value: true },
+      { path: ['dataFormat', 'prefix'], value: 'pre' },
+      { path: ['dataFormat', 'suffix'], value: ' Somethings per Something' },
+      { path: ['yAxis', 'labelsAboveGridlines'], value: true },
+      { path: ['yAxis', 'gridLines'], value: true }
+    ])
+  }
+}
+
+export const Top_Suffix_Above_Gridlines_With_Options: Story = {
+  args: {
+    config: editConfigKeys(annotationConfig, [
+      { path: ['yAxis', 'tickRotation'], value: 45 },
+      { path: ['yAxis', 'tickLabelColor'], value: 'red' },
+      { path: ['yAxis', 'labelsAboveGridlines'], value: true },
+      { path: ['yAxis', 'gridLines'], value: true },
+      { path: ['yAxis', 'hideAxis'], value: true }
+    ])
+  }
+}
+
+export default meta

package/src/_stories/_mock/horizontal_bar.json

@@ -0,0 +1,257 @@
+{
+  "annotations": [],
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": { "noData": "No Data Available" },
+  "title": "",
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "theme": "theme-blue",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "stacked",
+  "barStyle": "",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": false,
+  "general": {
+    "annotationDropdownText": "Annotations",
+    "showDownloadButton": false,
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "hideNullValue": true
+  },
+  "padding": { "left": 5, "right": 5 },
+  "preliminaryData": [],
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 50,
+    "gridLines": false,
+    "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": [],
+    "labelPlacement": "Below Bar"
+  },
+  "boxplot": {
+    "plots": [],
+    "borders": "true",
+    "firstQuartilePercentage": 25,
+    "thirdQuartilePercentage": 75,
+    "boxWidthPercentage": 40,
+    "plotOutlierValues": false,
+    "plotNonOutlierValues": true,
+    "legend": { "showHowToReadText": false, "howToReadText": "" },
+    "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",
+      "total": "Total",
+      "outliers": "Outliers",
+      "values": "Values",
+      "lowerBounds": "Lower Bounds",
+      "upperBounds": "Upper Bounds"
+    }
+  },
+  "topAxis": { "hasLine": false },
+  "isLegendValue": false,
+  "barThickness": "0.37",
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": { "vertical": 300, "horizontal": 308 },
+  "xAxis": {
+    "sortDates": false,
+    "anchors": [],
+    "type": "categorical",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 75,
+    "tickRotation": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 65,
+    "axisPadding": 200,
+    "target": 0,
+    "maxTickRotation": 45,
+    "padding": 0,
+    "dataKey": "Race",
+    "tickWidthMax": 31
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": true,
+    "indexLabel": "",
+    "download": true,
+    "showVertical": true,
+    "dateDisplayFormat": "",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "show": true
+  },
+  "orientation": "horizontal",
+  "color": "pinkpurple",
+  "columns": {},
+  "legend": {
+    "hide": false,
+    "behavior": "isolate",
+    "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": "circles",
+    "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": false,
+    "horizontalHoverLine": false
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [{ "dataKey": "Age-adjusted rate", "type": "Bar", "axis": "Left", "tooltip": true }],
+  "tooltips": { "opacity": 90, "singleSeries": false, "dateDisplayFormat": "" },
+  "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": []
+  },
+  "datasets": {},
+  "visualizationType": "Bar",
+  "data": [
+    { "Race": "Hispanic or Latino", "Age-adjusted rate": "644.2" },
+    { "Race": "Non-Hispanic American Indian", "Age-adjusted rate": "636.1" },
+    { "Race": "Non-Hispanic Black", "Age-adjusted rate": "563.7" },
+    { "Race": "Non-Hispanic Asian or Pacific Islander", "Age-adjusted rate": "202.5" },
+    { "Race": "Non-Hispanic White", "Age-adjusted rate": "183.6" }
+  ],
+  "dataFileName": "valid-data-chart.csv",
+  "dataFileSourceType": "file",
+  "formattedData": [
+    { "Race": "Hispanic or Latino", "Age-adjusted rate": "644.2" },
+    { "Race": "Non-Hispanic American Indian", "Age-adjusted rate": "636.1" },
+    { "Race": "Non-Hispanic Black", "Age-adjusted rate": "563.7" },
+    { "Race": "Non-Hispanic Asian or Pacific Islander", "Age-adjusted rate": "202.5" },
+    { "Race": "Non-Hispanic White", "Age-adjusted rate": "183.6" }
+  ],
+  "dataDescription": { "horizontal": false, "series": false },
+  "version": "4.24.10",
+  "dynamicMarginTop": 0
+}