@cdc/chart 4.25.3 → 4.25.6

package/src/store/chart.reducer.ts

@@ -4,7 +4,28 @@ import { ChartConfig, type ViewportSize } from '../types/ChartConfig'
 import { DimensionsType } from '@cdc/core/types/Dimensions'
 import _ from 'lodash'
 
-export const getInitialState = (configObj: ChartConfig) => {
+type ChartState = {
+  isLoading: boolean
+  config: ChartConfig
+  stateData: object[]
+  colorScale: Function
+  excludedData: object[]
+  filteredData: object[]
+  seriesHighlight: string[]
+  currentViewport: ViewportSize
+  dimensions: DimensionsType
+  container: HTMLElement | null
+  coveLoadedEventRan: boolean
+  isDraggingAnnotation: boolean
+  imageId: string
+  brushConfig: {
+    data: object[]
+    isActive: boolean
+    isBrushing: boolean
+  }
+}
+
+export const getInitialState = (configObj: ChartConfig): ChartState => {
   return {
     isLoading: true,
     config: defaults,
@@ -28,28 +49,7 @@ export const getInitialState = (configObj: ChartConfig) => {
   }
 }
 
-type State = {
-  isLoading: boolean
-  config: ChartConfig
-  stateData: object[]
-  colorScale: Function
-  excludedData: object[]
-  filteredData: object[]
-  seriesHighlight: string[]
-  currentViewport: ViewportSize
-  dimensions: DimensionsType
-  container: HTMLElement | null
-  coveLoadedEventRan: boolean
-  isDraggingAnnotation: boolean
-  imageId: string
-  brushConfig: {
-    data: object[]
-    isActive: boolean
-    isBrushing: boolean
-  }
-}
-
-export const reducer = (state: State, action: ChartActions) => {
+export const reducer = (state: ChartState, action: ChartActions): ChartState => {
   switch (action.type) {
     case 'SET_LOADING':
       return { ...state, isLoading: action.payload }

package/src/types/ChartConfig.ts

@@ -10,11 +10,13 @@ import { General } from '@cdc/core/types/General'
 import { type Link } from './../components/Sankey/types'
 import { type DataDescription } from '@cdc/core/types/DataDescription'
 import { type Legend as CoreLegend } from '@cdc/core/types/Legend'
+import { Label } from './Label'
 import { ConfidenceInterval } from '@cdc/core/types/ConfidenceInterval'
 import { Region } from '@cdc/core/types/Region'
 import { VizFilter } from '@cdc/core/types/VizFilter'
 import { type Annotation } from '@cdc/core/types/Annotation'
 import { Version } from '@cdc/core/types/Version'
+import Footnotes from '@cdc/core/types/Footnotes'
 
 export type ViewportSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 export type ChartColumns = Record<string, Column>
@@ -68,7 +70,7 @@ type DataFormat = {
   rightSuffix: string
   roundTo: number
   suffix: string
-  onlyShowTopPrefixSuffix?: boolean
+  showPiePercent: boolean
 }
 
 type Exclusions = {
@@ -85,12 +87,15 @@ export type Legend = CoreLegend & {
   style: 'circles' | 'boxes' | 'gradient' | 'lines'
   subStyle: 'linear blocks' | 'smooth'
   hasShape: boolean
+  order: 'dataColumn' | 'asc' | 'desc'
+  orderedValues: Label[]
   tickRotation: string
   hideBorder: {
     side: boolean
     topBottom: boolean
   }
   groupBy: string
+  separators?: string
 }
 
 type Visual = {
@@ -117,7 +122,8 @@ export type AllChartsConfig = {
   boxplot: BoxPlot
   brush: {
     active: boolean
-    height: number
+    data: object[]
+    isBrushing: boolean
   }
   chartMessage: { noData?: string }
   color: string
@@ -136,7 +142,8 @@ export type AllChartsConfig = {
   exclusions: Exclusions
   filters: VizFilter[]
   filterBehavior: FilterBehavior
-  footnotes: string
+  legacyFootnotes: string // this footnote functionality should be moved to the Footnotes component
+  footnotes: Footnotes
   forestPlot: ForestPlotConfigSettings
   formattedData: Object[] & { urlFiltered: boolean }
   heights: {
@@ -233,6 +240,7 @@ export type ForestPlotConfig = {
 export type LineChartConfig = {
   allowLineToBarGraph: boolean
   convertLineToBarGraph: boolean
+  isolatedDotsSameSize: boolean
   lineDatapointStyle: 'hidden' | 'always show' | 'hover'
   visualizationType: 'Line'
 } & AllChartsConfig

package/src/types/ChartContext.ts

@@ -12,7 +12,6 @@ export type TransformedData = {
 
 type SharedChartContext = {
   animatedChart?: boolean
-  brushConfig: { data: []; isBrushing: boolean; isActive: boolean }
   capitalize: (value: string) => string
   clean: Function
   colorScale?: ColorScale
@@ -31,7 +30,6 @@ type SharedChartContext = {
   legendIsolateValues?: string[]
   legendRef?: React.RefObject<HTMLDivElement>
   parentRef?: React.RefObject<HTMLDivElement>
-  setBrushConfig: Function
   setLegendIsolateValues?: Function
   svgRef?: React.RefObject<SVGSVGElement>
 }

package/examples/private/DEV-8850-2.json

@@ -1,493 +0,0 @@
-{
-  "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": "regular",
-  "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": [],
-  "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": []
-  },
-  "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"
-    }
-  },
-  "topAxis": {
-    "hasLine": false
-  },
-  "isLegendValue": false,
-  "barThickness": 0.35,
-  "barHeight": 25,
-  "barSpace": 15,
-  "heights": {
-    "vertical": 300,
-    "horizontal": 750
-  },
-  "xAxis": {
-    "sortDates": false,
-    "anchors": [],
-    "type": "categorical",
-    "showTargetLabel": true,
-    "targetLabel": "Target",
-    "hideAxis": false,
-    "hideLabel": false,
-    "hideTicks": false,
-    "size": 75,
-    "tickRotation": "45",
-    "min": "",
-    "max": "",
-    "labelColor": "#333",
-    "tickLabelColor": "#333",
-    "tickColor": "#333",
-    "numTicks": "",
-    "labelOffset": 0,
-    "axisPadding": 200,
-    "target": 0,
-    "maxTickRotation": 0,
-    "padding": "0",
-    "showYearsOnce": false,
-    "sortByRecentDate": false,
-    "dataKey": "date",
-    "axisBBox": 116.57705688476562,
-    "tickWidthMax": 93,
-    "dateParseFormat": "%Y-%m-%d",
-    "dateDisplayFormat": "%Y-%m-%d",
-    "manual": false,
-    "label": "Date"
-  },
-  "table": {
-    "label": "Data Table",
-    "expanded": true,
-    "limitHeight": false,
-    "height": "",
-    "caption": "",
-    "showDownloadUrl": false,
-    "showDataTableLink": true,
-    "showDownloadLinkBelow": true,
-    "indexLabel": "",
-    "download": true,
-    "showVertical": true,
-    "dateDisplayFormat": "%Y-%m-%d",
-    "showMissingDataLabel": true,
-    "showSuppressedSymbol": true,
-    "show": true
-  },
-  "orientation": "vertical",
-  "color": "pinkpurple",
-  "columns": {
-    "date": {
-      "label": "Date",
-      "dataTable": true,
-      "tooltips": false,
-      "prefix": "",
-      "suffix": "",
-      "forestPlot": false,
-      "startingPoint": "0",
-      "forestPlotAlignRight": false,
-      "roundToPlace": 0,
-      "commas": false,
-      "showInViz": false,
-      "forestPlotStartingPoint": 0,
-      "name": "date"
-    }
-  },
-  "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
-    },
-    "position": "right"
-  },
-  "brush": {
-    "height": 25,
-    "active": false
-  },
-  "exclusions": {
-    "active": true,
-    "keys": [],
-    "dateStart": "2023-01-02",
-    "dateEnd": "2023-01-11"
-  },
-  "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": {
-    "upper": "upper",
-    "lower": "lower"
-  },
-  "visual": {
-    "border": true,
-    "accent": true,
-    "background": true,
-    "verticalHoverLine": false,
-    "horizontalHoverLine": false
-  },
-  "useLogScale": false,
-  "filterBehavior": "Filter Change",
-  "highlightedBarValues": [],
-  "series": [
-    {
-      "dataKey": "value",
-      "type": "Line",
-      "axis": "Left",
-      "tooltip": true,
-      "dynamicCategory": "category"
-    }
-  ],
-  "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": []
-  },
-  "visualizationType": "Line",
-  "data": [
-    {
-      "date": "2023-01-01",
-      "category": "male",
-      "value": 67,
-      "lower": 65,
-      "upper": 69
-    },
-    {
-      "date": "2023-01-01",
-      "category": "female",
-      "value": 77,
-      "lower": 73,
-      "upper": 81
-    },
-    {
-      "date": "2023-01-02",
-      "category": "male",
-      "value": 11,
-      "lower": 10,
-      "upper": 13
-    },
-    {
-      "date": "2023-01-02",
-      "category": "female",
-      "value": 21,
-      "lower": 18,
-      "upper": 24
-    },
-    {
-      "date": "2023-01-03",
-      "category": "male",
-      "value": 94,
-      "lower": 92,
-      "upper": 96
-    },
-    {
-      "date": "2023-01-03",
-      "category": "female",
-      "value": 104,
-      "lower": 100,
-      "upper": 108
-    },
-    {
-      "date": "2023-01-04",
-      "category": "male",
-      "value": 95,
-      "lower": 93,
-      "upper": 97
-    },
-    {
-      "date": "2023-01-04",
-      "category": "female",
-      "value": 105,
-      "lower": 101,
-      "upper": 109
-    },
-    {
-      "date": "2023-01-05",
-      "category": "male",
-      "value": 79,
-      "lower": 77,
-      "upper": 81
-    },
-    {
-      "date": "2023-01-05",
-      "category": "female",
-      "value": 89,
-      "lower": 85,
-      "upper": 93
-    },
-    {
-      "date": "2023-01-06",
-      "category": "male",
-      "value": 2,
-      "lower": 1,
-      "upper": 3
-    },
-    {
-      "date": "2023-01-06",
-      "category": "female",
-      "value": 12,
-      "lower": 9,
-      "upper": 15
-    },
-    {
-      "date": "2023-01-07",
-      "category": "male",
-      "value": 36,
-      "lower": 34,
-      "upper": 38
-    },
-    {
-      "date": "2023-01-07",
-      "category": "female",
-      "value": 46,
-      "lower": 42,
-      "upper": 50
-    },
-    {
-      "date": "2023-01-08",
-      "category": "male",
-      "value": 9,
-      "lower": 7,
-      "upper": 11
-    },
-    {
-      "date": "2023-01-08",
-      "category": "female",
-      "value": 19,
-      "lower": 16,
-      "upper": 22
-    },
-    {
-      "date": "2023-01-09",
-      "category": "male",
-      "value": 3,
-      "lower": 2,
-      "upper": 4
-    },
-    {
-      "date": "2023-01-09",
-      "category": "female",
-      "value": 13,
-      "lower": 10,
-      "upper": 16
-    },
-    {
-      "date": "2023-01-10",
-      "category": "male",
-      "value": 64,
-      "lower": 62,
-      "upper": 66
-    },
-    {
-      "date": "2023-01-10",
-      "category": "female",
-      "value": 74,
-      "lower": 70,
-      "upper": 78
-    }
-  ],
-  "dataFileName": "valid-forecast-data.csv",
-  "dataFileSourceType": "file",
-  "dataDescription": {
-    "horizontal": false,
-    "series": false
-  },
-  "version": "4.24.10",
-  "dynamicMarginTop": 0,
-  "regions": []
-}