@cdc/chart 4.24.12 → 4.25.2-25

package/src/ConfigContext.tsx

@@ -1,6 +1,11 @@
-import { createContext } from 'react'
+import { createContext, Dispatch } from 'react'
 import { ChartContext } from './types/ChartContext'
 
+import ChartActions from './store/chart.actions'
+
+// export const ConfigContext = createContext(initialState)
+export const ChartDispatchContext = createContext<Dispatch<ChartActions>>(() => {})
+
 const ConfigContext = createContext({} as ChartContext)
 
 export default ConfigContext

package/src/_stories/Chart.Anchors.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Meta, Story } from '@storybook/react'
-import Chart from './../CdcChart'
+import Chart from '../CdcChartComponent'
 import exampleComboBarNonNumeric from './../../examples/feature/tests-date-exclusions/date-exclusions-config.json'
 import { editConfigKeys } from '../helpers/configHelpers'
 

package/src/_stories/Chart.CustomColors.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import Chart from '../CdcChart'
+import Chart from '../CdcChartComponent'
 import scatterPlotCustomColorConfig from './_mock/scatterplot_mock.json'
 
 const meta: Meta<typeof Chart> = {

package/src/_stories/Chart.DynamicSeries.stories.tsx

@@ -1,7 +1,7 @@
 import DynamicSeriesConfig from './_mock/dynamic_series_config.json'
 import DynamicSeriesBarConfig from './_mock/dynamic_series_bar_config.json'
 import { Meta, StoryObj } from '@storybook/react'
-import Chart from '../CdcChart'
+import Chart from '../CdcChartComponent'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Dynamic Series',
@@ -10,7 +10,22 @@ const meta: Meta<typeof Chart> = {
 
 type Story = StoryObj<typeof Chart>
 
-export const Line: Story = {
+// data with a line break
+const data = DynamicSeriesConfig.data.map((d, i) => (i === 4 ? { ...d, Data_Value: null } : d))
+export const LineShowPoints: Story = {
+  args: {
+    config: {
+      ...DynamicSeriesConfig,
+      data,
+      originalFormattedData: data,
+      formattedData: data,
+      lineDatapointStyle: 'always show'
+    },
+    isEditor: false
+  }
+}
+
+export const LineHoverPoints: Story = {
   args: {
     config: DynamicSeriesConfig,
     isEditor: false

package/src/_stories/Chart.Filters.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChartComponent'
+import { editConfigKeys } from '../helpers/configHelpers'
+import scatterPlotDownloadImage from './_mock/scatterplot-image-download.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Filters',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const Tab_Simple: Story = {
+  args: {
+    config: editConfigKeys(scatterPlotDownloadImage, [{ path: ['filters', '0', 'filterStyle'], value: 'tab-simple' }])
+  }
+}
+
+export default meta

package/src/_stories/Chart.Legend.Gradient.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import chartGradientConfig from './_mock/legend.gradient_mock.json'
 import SimplifiedLineConfig from './_mock/simplified_line.json'
 
-import Chart from '../CdcChart'
+import Chart from '../CdcChartComponent'
 import { editConfigKeys } from '../helpers/configHelpers'
 
 const meta: Meta<typeof Chart> = {
@@ -51,7 +51,7 @@ export const Legend_Gradient_With_box: Story = {
 export const Legend_Gradient_With_Text: Story = {
   args: {
     config: editConfigKeys(chartGradientConfig, [
-      { path: ['legend', 'title'], value: 'Title' },
+      { path: ['legend', 'label'], value: 'Title' },
       { path: ['legend', 'description'], value: 'Description' },
       { path: ['legend', 'hideBorder'], value: false }
     ])

package/src/_stories/Chart.ScatterPlot.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChartComponent'
+import scatterPlotDownloadImage from './_mock/scatterplot-image-download.json'
+
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Scatter Plot Download Image',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const ScatterPlot_Download_Image: Story = {
+  args: {
+    config: scatterPlotDownloadImage,
+    isEditor: false
+  }
+}
+
+export default meta

package/src/_stories/Chart.tooltip.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import Chart from '../CdcChart'
+import Chart from '../CdcChartComponent'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Tooltip',
@@ -22,7 +22,6 @@ export const Additional_Tooltip: Story = {
       showDownloadMediaButton: false,
       theme: 'theme-orange',
       animate: false,
-      fontSize: 'medium',
       lineDatapointStyle: 'hover',
       barHasBorder: 'false',
       isLollipopChart: false,

package/src/_stories/ChartAnnotation.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import annotationConfig from './_mock/annotation_category_mock.json'
 import annotationConfigDateLinear from './_mock/annotation_date-linear_mock.json'
 import annotationConfigDateTime from './_mock/annotation_date-time_mock.json'
-import Chart from '../CdcChart'
+import Chart from '../CdcChartComponent'
 
 const meta: Meta<typeof Chart> = {
   title: 'Components/Templates/Chart/Annotation',

package/src/_stories/ChartAxisLabels.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import SimplifiedLineConfig from './_mock/simplified_line.json'
 
-import Chart from '../CdcChart'
+import Chart from '../CdcChartComponent'
 import { editConfigKeys } from '../helpers/configHelpers'
 
 const meta: Meta<typeof Chart> = {

package/src/_stories/ChartAxisTitles.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import Chart from '../CdcChart'
+import Chart from '../CdcChartComponent'
 import longXLabelsConfig from './_mock/large_x_axis_labels.json'
 import pairedBarConfig from './_mock/paired-bar.json'
 import { editConfigKeys } from '../helpers/configHelpers'

package/src/_stories/ChartEditor.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { userEvent, within } from '@storybook/testing-library'
-import Chart from '../CdcChart'
+import Chart from '../CdcChartComponent'
 import pieChartExample from './_mock/pie_config.json'
 import pieData from './_mock/pie_data.json'
 import urlFilterExample from './_mock/url_filter.json'

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import Chart from '../CdcChart'
+import Chart from '../CdcChartComponent'
 import suppressionConfig from './_mock/suppression_mock.json'
 import SuppressedConfig from './_mock/bar-chart-suppressed.json'
 const meta: Meta<typeof Chart> = {

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Chart from '../CdcChartComponent'
+import config from './_mock/line_chart_symbols.json'
+const meta: Meta<typeof Chart> = {
+  title: 'Components/Templates/Chart/Symbols',
+  component: Chart
+}
+
+type Story = StoryObj<typeof Chart>
+
+export const LineChartSymbols: Story = {
+  args: {
+    config: config,
+    isEditor: false
+  }
+}
+
+export default meta

package/src/_stories/ChartPrefixSuffix.stories.tsx

@@ -5,7 +5,7 @@ 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 Chart from '../CdcChartComponent'
 import { editConfigKeys } from '../helpers/configHelpers'
 
 const meta: Meta<typeof Chart> = {

package/src/_stories/_mock/line_chart_symbols.json

@@ -0,0 +1,437 @@
+{
+  "type": "chart",
+  "title": "Combo Bar-Line Chart",
+  "theme": "theme-indigo",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "always show",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "flat",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "68",
+    "gridLines": true,
+    "enablePadding": false,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 50,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "anchors": [],
+    "shoMissingDataLabel": true,
+    "showMissingDataLine": true,
+    "categories": [],
+    "isLegendValue": false,
+    "label": "Y-Axis Label Example"
+  },
+  "topAxis": {
+    "hasLine": false
+  },
+  "barThickness": "0.5",
+  "barHeight": 25,
+  "height": "332",
+  "xAxis": {
+    "sortDates": false,
+    "anchors": [],
+    "type": "date",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "78",
+    "tickRotation": "25",
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 0,
+    "axisPadding": 200,
+    "target": 0,
+    "maxTickRotation": 0,
+    "padding": 5,
+    "showYearsOnce": false,
+    "sortByRecentDate": false,
+    "isLegendValue": false,
+    "dataKey": "Date",
+    "label": "X-Axis Example Label",
+    "dateParseFormat": "%d/%m/%Y",
+    "dateDisplayFormat": "%d/%m/%Y",
+    "axisBBox": 96.9543685913086,
+    "tickWidthMax": 86
+  },
+  "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": "vertical",
+  "legend": {
+    "hide": false,
+    "behavior": "highlight",
+    "axisAlign": true,
+    "singleRow": false,
+    "colorCode": "",
+    "reverseLabelOrder": false,
+    "description": "",
+    "dynamicLegend": false,
+    "dynamicLegendDefaultText": "Show All",
+    "dynamicLegendItemLimit": 5,
+    "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
+    "dynamicLegendChartMessage": "Select Options from the Legend",
+    "label": "Data Type",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "hideSuppressedLabels": false,
+    "hideSuppressionLink": false,
+    "seriesHighlight": [],
+    "style": "lines",
+    "subStyle": "linear blocks",
+    "shape": "circle",
+    "tickRotation": "",
+    "hideBorder": {
+      "side": false,
+      "topBottom": true
+    },
+    "position": "right",
+    "hasShape": true
+  },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
+  "palette": "qualitative4",
+  "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,
+    "lineDatapointSymbol": "standard"
+  },
+  "data": [
+    {
+      "Date": "1/15/2016",
+      "Data 1": "N/A",
+      "Data 2": "110",
+      "Data 3": "100",
+      "Data 4": "90",
+      "Monthly-Goal": "100"
+    },
+    {
+      "Date": "2/15/2016",
+      "Data 1": "100",
+      "Data 2": "goop",
+      "Data 3": "100",
+      "Data 4": "100",
+      "Monthly-Goal": "100"
+    },
+    {
+      "Date": "3/15/2016",
+      "Data 1": "",
+      "Data 2": "90",
+      "Data 3": "100.5",
+      "Data 4": "120",
+      "Monthly-Goal": "110"
+    },
+    {
+      "Date": "4/15/2016",
+      "Data 1": "80",
+      "Data 2": "2,00",
+      "Data 3": "110",
+      "Data 4": "120",
+      "Monthly-Goal": "110"
+    },
+    {
+      "Date": "5/15/2016",
+      "Data 1": "70",
+      "Data 2": "90",
+      "Data 3": "110",
+      "Data 4": "130",
+      "Monthly-Goal": "120"
+    },
+    {
+      "Date": "6/15/2016",
+      "Data 1": "100",
+      "Data 2": "120",
+      "Data 3": "120",
+      "Data 4": "130",
+      "Monthly-Goal": "120"
+    },
+    {
+      "Date": "7/15/2016",
+      "Data 1": "zip",
+      "Data 2": null,
+      "Data 3": "120",
+      "Data 4": "130",
+      "Monthly-Goal": "130"
+    },
+    {
+      "Date": "8/15/2016",
+      "Data 1": "110",
+      "Data 2": "130",
+      "Data 3": "120",
+      "Data 4": "140",
+      "Monthly-Goal": "130"
+    },
+    {
+      "Date": "9/15/2016",
+      "Data 1": "120",
+      "Data 2": "130",
+      "Data 3": "120",
+      "Data 4": "150",
+      "Monthly-Goal": "140"
+    }
+  ],
+  "visualizationType": "Line",
+  "series": [
+    {
+      "dataKey": "Data 2",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Data 4",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Data 3",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    }
+  ],
+  "description": "Note: There is an option to make the line dotted as demonstrated above",
+  "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
+  },
+  "preliminaryData": [
+    {
+      "type": "effect",
+      "seriesKey": "Data 3",
+      "label": "Suppressed",
+      "column": "Data 4",
+      "value": "130",
+      "style": "Filled Circles",
+      "displayTooltip": true,
+      "displayLegend": true,
+      "displayTable": true,
+      "symbol": "",
+      "iconCode": "",
+      "lineCode": "",
+      "hideBarSymbol": false,
+      "hideLineStyle": false,
+      "circleSize": "10",
+      "displayGray": true
+    }
+  ],
+  "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",
+      "count": "Count",
+      "outliers": "Outliers",
+      "values": "Values",
+      "lowerBounds": "Lower Bounds",
+      "upperBounds": "Upper Bounds"
+    }
+  },
+  "isLegendValue": false,
+  "barSpace": 15,
+  "heights": {
+    "vertical": 300,
+    "horizontal": 750
+  },
+  "color": "pinkpurple",
+  "columns": {},
+  "brush": {
+    "height": 45,
+    "active": false
+  },
+  "twoColor": {
+    "palette": "monochrome-1",
+    "isPaletteReversed": false
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "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": []
+  },
+  "version": "4.25.1",
+  "migrations": {
+    "addColorMigration": true
+  },
+  "dynamicMarginTop": 0
+}