@cdc/chart 4.25.3-6 → 4.25.3

package/src/_stories/_mock/legend_groupBy_mock.json

@@ -0,0 +1,474 @@
+{
+  "annotations": [],
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "title": "Legend Group in Bar Chart",
+  "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": true,
+  "general": {
+    "annotationDropdownText": "Annotations",
+    "showDownloadButton": false,
+    "showMissingDataLabel": false,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": false,
+    "hideNullValue": true
+  },
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "preliminaryData": [],
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "75",
+    "gridLines": false,
+    "enablePadding": false,
+    "min": "0.1",
+    "max": "3",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 0,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "6",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "anchors": [],
+    "shoMissingDataLabel": true,
+    "showMissingDataLine": true,
+    "categories": [],
+    "label": "Reported cases per 100,000 Population",
+    "type": "linear"
+  },
+  "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": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 0,
+    "axisPadding": 200,
+    "target": 0,
+    "maxTickRotation": 0,
+    "padding": 5,
+    "showYearsOnce": false,
+    "sortByRecentDate": false,
+    "dataKey": "Year",
+    "label": "Year",
+    "manual": true,
+    "axisBBox": 62.779998779296875,
+    "tickWidthMax": 39
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "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": 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": "boxes",
+    "subStyle": "linear blocks",
+    "groupBy": "group",
+    "shape": "circle",
+    "tickRotation": "",
+    "hideBorder": {
+      "side": false,
+      "topBottom": false
+    },
+    "position": "bottom",
+    "subGroup": "group",
+    "labelAlignment": "left"
+  },
+  "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,
+    "roundTo": "1"
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": false,
+    "horizontalHoverLine": false,
+    "lineDatapointSymbol": "none",
+    "maximumShapeAmount": 7
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    {
+      "dataKey": "American Indian/Alaska Native",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Asian/Pacific Islander",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Black, non-Hispanic",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "White, non-Hispanic",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Hispanic",
+      "type": "Line",
+      "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": []
+  },
+  "errors": [],
+  "currentViewport": "lg",
+  "id": 4,
+  "category": "Charts",
+  "label": "Line",
+  "subType": "Line",
+  "icon": {
+    "key": null,
+    "ref": null,
+    "props": {},
+    "_owner": null
+  },
+  "content": "Present one or more data trends over time.",
+  "visualizationType": "Bar",
+  "datasets": {},
+  "activeVizButtonID": 4,
+  "data": [
+    {
+      "Year": "2007",
+      "American Indian/Alaska Native": "1.4",
+      "Asian/Pacific Islander": "0.9",
+      "group": "Main Group"
+    },
+    {
+      "Year": "2008",
+      "American Indian/Alaska Native": "1.8",
+      "Asian/Pacific Islander": "0.8",
+      "group": "Main Group"
+    },
+    {
+      "Year": "2009",
+      "American Indian/Alaska Native": "1",
+      "Asian/Pacific Islander": "0.7",
+      "group": "Main Group"
+    },
+    {
+      "Year": "2010",
+      "American Indian/Alaska Native": "1.1",
+      "Asian/Pacific Islander": "0.6",
+      "group": "Main Group"
+    },
+    {
+      "Year": "2011",
+      "Black, non-Hispanic": "1.4",
+      "White, non-Hispanic": "0.8",
+      "group": "Second Group"
+    },
+    {
+      "Year": "2012",
+      "Black, non-Hispanic": "1.1",
+      "White, non-Hispanic": "0.8",
+      "group": "Second Group"
+    },
+    {
+      "Year": "2013",
+      "White, non-Hispanic": "0.9",
+      "group": "Second Group"
+    },
+    {
+      "Year": "2014",
+      "White, non-Hispanic": "0.9",
+      "group": "Second Group"
+    },
+    {
+      "Year": "2015",
+      "American Indian/Alaska Native": "0.7",
+      "Hispanic": "0.3",
+      "group": "Third Group"
+    },
+    {
+      "Year": "2016",
+      "American Indian/Alaska Native": "0.5",
+      "Hispanic": "0.3",
+      "group": "Third Group"
+    },
+    {
+      "Year": "2017",
+      "American Indian/Alaska Native": "0.7",
+      "Hispanic": "0.3",
+      "group": "Third Group"
+    },
+    {
+      "Year": "2018",
+      "American Indian/Alaska Native": "0.9",
+      "Hispanic": "0.4",
+      "group": "Third Group"
+    },
+    {
+      "Year": "2019",
+      "American Indian/Alaska Native": "0.6",
+      "Hispanic": "0.4",
+      "group": "Third Group"
+    },
+    {
+      "Year": "2020",
+      "American Indian/Alaska Native": "0.4",
+      "Hispanic": "0.3",
+      "group": "Third Group"
+    },
+    {
+      "Year": "2021",
+      "American Indian/Alaska Native": "0.4",
+      "Hispanic": "0.4",
+      "group": "Third Group"
+    },
+    {
+      "Year": "2022",
+      "American Indian/Alaska Native": "0.4",
+      "Black, non-Hispanic": "1",
+      "group": "Fourth Group"
+    }
+  ],
+  "dataFileName": "chart_data 2-6.csv",
+  "dataFileSourceType": "file",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "version": "4.25.1",
+  "dynamicMarginTop": 0,
+  "filters": [],
+  "migrations": {
+    "addColorMigration": true
+  }
+}

package/src/components/BarChart/components/BarChart.Horizontal.tsx

@@ -159,7 +159,7 @@ export const BarChartHorizontal = () => {
                   let yAxisTooltip = config.runtime.yAxis.label
                     ? `${config.runtime.yAxis.label}: ${xAxisValue}`
                     : xAxisValue
-                  const additionalColTooltip = getAdditionalColumn(hoveredBar)
+                  const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
                   const tooltip = `<ul>
                   <li class="tooltip-heading"">${yAxisTooltip}</li>

package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx

@@ -76,7 +76,7 @@ const BarChartStackedHorizontal = () => {
                   ? `${config.runtime.yAxis.label}: ${yAxisValue}`
                   : yAxisValue
                 const textWidth = getTextWidth(xAxisValue)
-                const additionalColTooltip = getAdditionalColumn(hoveredBar)
+                const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
                 const tooltip = `<ul>
                   <li class="tooltip-heading"">${yAxisTooltip}</li>

package/src/components/BarChart/components/BarChart.StackedVertical.tsx

@@ -69,7 +69,7 @@ const BarChartStackedVertical = () => {
                 const xAxisTooltip = config.runtime.xAxis.label
                   ? `${config.runtime.xAxis.label}: ${xAxisValue}`
                   : xAxisValue
-                const additionalColTooltip = getAdditionalColumn(hoveredBar)
+                const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
                 const tooltip = `<ul>
                   <li class="tooltip-heading"">${xAxisTooltip}</li>

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -65,7 +65,7 @@ export const BarChartVertical = () => {
     data = brushConfig.data
   }
 
-  const hasConfidenceInterval = Object.keys(config.confidenceKeys).length > 0
+  const hasConfidenceInterval = _.every(config.confidenceKeys, key => key !== '')
 
   const _data = getBarData(config, data, hasConfidenceInterval)
   return (
@@ -322,7 +322,7 @@ export const BarChartVertical = () => {
                         <Text // prettier-ignore
                           display={displayBar ? 'block' : 'none'}
                           opacity={transparentBar ? 0.5 : 1}
-                          x={barX + barWidth / 2}
+                          x={hasConfidenceInterval ? barX + barWidth : barX + barWidth / 2}
                           y={barY - 5}
                           fill={labelColor}
                           textAnchor='middle'

package/src/components/EditorPanel/EditorPanel.tsx

@@ -906,7 +906,7 @@ const EditorPanel = () => {
     return Object.keys(columns)
   }
 
-  const getLegendStyleOptions = (option: 'style' | 'subStyle' | 'shapes'): string[] => {
+  const getLegendStyleOptions = (option: 'style' | 'subStyle' | 'shapes' | 'groupBy'): string[] => {
     const options: string[] = []
 
     switch (option) {
@@ -929,6 +929,9 @@ const EditorPanel = () => {
           options.push('linear blocks', 'smooth')
         }
 
+        break
+      case 'groupBy':
+        options.push(...getColumns())
         break
     }
     return options
@@ -962,7 +965,7 @@ const EditorPanel = () => {
   }
 
   const convertStateToConfig = () => {
-    let strippedState = JSON.parse(JSON.stringify(config))
+    let strippedState = _.cloneDeep(config)
     if (false === missingRequiredSections(config)) {
       delete strippedState.newViz
     }
@@ -2698,7 +2701,7 @@ const EditorPanel = () => {
                         </>
                       )}
 
-                      {isDateScale(config.xAxis) && (
+                      {(isDateScale(config.xAxis) || config?.visualizationType === 'Bump Chart') && (
                         <>
                           <p style={{ padding: '1.5em 0 0.5em', fontSize: '.9rem', lineHeight: '1rem' }}>
                             Format how charts should parse and display your dates using{' '}
@@ -2909,27 +2912,26 @@ const EditorPanel = () => {
                             </>
                           )}
 
-                          {config.xAxis.type === 'date' ||
-                            (config.xAxis.type === 'date-time' && (
-                              <>
-                                <TextField
-                                  type='date'
-                                  section='exclusions'
-                                  fieldName='dateStart'
-                                  label='Start Date'
-                                  updateField={updateField}
-                                  value={config.exclusions.dateStart || ''}
-                                />
-                                <TextField
-                                  type='date'
-                                  section='exclusions'
-                                  fieldName='dateEnd'
-                                  label='End Date'
-                                  updateField={updateField}
-                                  value={config.exclusions.dateEnd || ''}
-                                />
-                              </>
-                            ))}
+                          {(config.xAxis.type === 'date' || config.xAxis.type === 'date-time') && (
+                            <>
+                              <TextField
+                                type='date'
+                                section='exclusions'
+                                fieldName='dateStart'
+                                label='Start Date'
+                                updateField={updateField}
+                                value={config.exclusions.dateStart || ''}
+                              />
+                              <TextField
+                                type='date'
+                                section='exclusions'
+                                fieldName='dateEnd'
+                                label='End Date'
+                                updateField={updateField}
+                                value={config.exclusions.dateEnd || ''}
+                              />
+                            </>
+                          )}
                         </>
                       )}
 
@@ -3691,6 +3693,17 @@ const EditorPanel = () => {
                     updateField={updateField}
                     options={getLegendStyleOptions('style')}
                   />
+
+                  <Select
+                    value={config.legend.groupBy}
+                    section='legend'
+                    fieldName='groupBy'
+                    initial='Select'
+                    label='Legend Group By:'
+                    updateField={updateField}
+                    options={getLegendStyleOptions('groupBy')}
+                  />
+
                   <CheckBox
                     tooltip={
                       <Tooltip style={{ textTransform: 'none' }}>
@@ -3986,6 +3999,29 @@ const EditorPanel = () => {
                     fieldName='description'
                     label='Legend Description'
                   />
+                  <CheckBox
+                    value={config.legend.unified}
+                    section='legend'
+                    fieldName='unified'
+                    label='Unified Legend'
+                    updateField={updateField}
+                    tooltip={
+                      <Tooltip style={{ textTransform: 'none' }}>
+                        <Tooltip.Target>
+                          <Icon
+                            display='question'
+                            style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                          />
+                        </Tooltip.Target>
+                        <Tooltip.Content>
+                          <p>
+                            For a chart with filters, check this option if you want the legend to contain an item for
+                            every series in the data set, including those that are filtered.
+                          </p>
+                        </Tooltip.Content>
+                      </Tooltip>
+                    }
+                  />
                 </AccordionItemPanel>
               </AccordionItem>
             )}

package/src/components/EditorPanel/helpers/updateFieldRankByValue.ts

@@ -30,9 +30,10 @@ export const updateFieldRankByValue = (
   newConfig.rankByValue = newValue
 
   if (config.rankByValue && !newValue) {
-    const CIkeys: string[] = Object.values(config.confidenceKeys) as string[]
-    const seriesKeys: string[] = config.series.map(s => s.dataKey)
-    const keysToClean: string[] = seriesKeys.concat(CIkeys)
+    const CIkeys: string[] = Object.values(_.get(config, 'confidenceKeys', {})) as string[]
+    const seriesKeys: string[] = _.get(config, 'series', []).map((s: any) => s.dataKey)
+    const keysToClean: string[] = [...(seriesKeys ?? []), ...(CIkeys ?? [])]
+
     const cleanData = config?.xAxis?.dataKey
       ? transform.cleanData(config.data, config.xAxis.dataKey, keysToClean)
       : config.data