@cdc/chart 4.26.5 → 4.26.6

package/examples/private/bar-chart-negative-value.json

@@ -0,0 +1,455 @@
+{
+  "annotations": [],
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "title": "Example Bar Chart",
+  "showTitle": false,
+  "showDownloadMediaButton": false,
+  "theme": "theme-blue",
+  "animate": false,
+  "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
+  "barHasBorder": "true",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": true,
+  "general": {
+    "annotationDropdownText": "Annotations",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": true,
+    "hideNullValue": true,
+    "showZeroValueDataLabel": true,
+    "palette": {
+      "name": "divergent_blue_cyan",
+      "version": "2.0",
+      "backups": [
+        {
+          "name": "qualitative_bold",
+          "version": "1.0"
+        }
+      ]
+    }
+  },
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "preliminaryData": [],
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "118",
+    "gridLines": false,
+    "enablePadding": false,
+    "min": "",
+    "max": "400",
+    "labelColor": "#1c1d1f",
+    "tickLabelColor": "#1c1d1f",
+    "tickColor": "#1c1d1f",
+    "rightHideAxis": true,
+    "rightAxisSize": 50,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#1c1d1f",
+    "rightAxisTickLabelColor": "#1c1d1f",
+    "rightAxisTickColor": "#1c1d1f",
+    "numTicks": "",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "anchors": [],
+    "shoMissingDataLabel": true,
+    "showMissingDataLine": true,
+    "categories": [],
+    "label": "Y Axis Example Label",
+    "maxValue": "400"
+  },
+  "boxplot": [],
+  "topAxis": {
+    "hasLine": false
+  },
+  "isLegendValue": false,
+  "barThickness": "0.6",
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": {
+    "vertical": "250",
+    "horizontal": 750
+  },
+  "xAxis": {
+    "sortDates": false,
+    "anchors": [],
+    "type": "categorical",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "0",
+    "tickRotation": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#1c1d1f",
+    "tickLabelColor": "#1c1d1f",
+    "tickColor": "#1c1d1f",
+    "numTicks": "",
+    "labelOffset": 0,
+    "axisPadding": 0,
+    "target": 0,
+    "maxTickRotation": "45",
+    "padding": 5,
+    "showYearsOnce": false,
+    "sortByRecentDate": false,
+    "brushActive": false,
+    "dataKey": "Date",
+    "label": "X Axis Example Label",
+    "tickWidthMax": 77,
+    "axisBBox": 110.040283203125
+  },
+  "table": {
+    "label": "Data Type by Date",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": true,
+    "indexLabel": "Date",
+    "download": true,
+    "showVertical": true,
+    "dateDisplayFormat": "",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "collapsible": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "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": "Type of Data",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "hideSuppressedLabels": false,
+    "hideSuppressionLink": false,
+    "seriesHighlight": [],
+    "style": "circles",
+    "subStyle": "linear blocks",
+    "groupBy": "",
+    "shape": "circle",
+    "tickRotation": "",
+    "order": "dataColumn",
+    "hideBorder": {
+      "side": false,
+      "topBottom": true
+    },
+    "position": "right",
+    "orderedValues": [],
+    "patterns": {},
+    "patternField": "",
+    "unified": true
+  },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
+  "twoColor": {
+    "palette": "monochrome-1",
+    "isPaletteReversed": false
+  },
+  "labels": false,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": " units",
+    "abbreviated": false,
+    "bottomSuffix": "",
+    "bottomPrefix": "",
+    "bottomAbbreviated": false,
+    "useCommas": false,
+    "roundToPlace": ""
+  },
+  "filters": [],
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": false,
+    "horizontalHoverLine": false,
+    "lineDatapointSymbol": "none",
+    "maximumShapeAmount": 7
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    {
+      "dataKey": "Data 1",
+      "type": "Bar",
+      "tooltip": true,
+      "axis": "Left"
+    },
+    {
+      "dataKey": "Data 2",
+      "type": "Bar",
+      "tooltip": true,
+      "axis": "Left"
+    },
+    {
+      "dataKey": "Data 3",
+      "type": "Bar",
+      "tooltip": true,
+      "axis": "Left"
+    }
+  ],
+  "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": []
+  },
+  "markupVariables": [],
+  "enableMarkupVariables": false,
+  "fontSize": "medium",
+  "brush": {
+    "height": 25,
+    "active": false,
+    "data": [
+      {
+        "Date": "1/15/2016",
+        "Data 1": "90",
+        "Data 2": "135",
+        "Data 3": "300",
+        "Data 4": "95",
+        "Data 5": "120",
+        "Data 6": "310"
+      },
+      {
+        "Date": "2/15/2016",
+        "Data 1": "40",
+        "Data 2": "90",
+        "Data 3": "240",
+        "Data 4": "60",
+        "Data 5": "160",
+        "Data 6": "200"
+      },
+      {
+        "Date": "3/15/2016",
+        "Data 1": "50",
+        "Data 2": "300",
+        "Data 3": "290",
+        "Data 4": "100",
+        "Data 5": "200",
+        "Data 6": "250"
+      },
+      {
+        "Date": "4/15/2016",
+        "Data 1": "120",
+        "Data 2": "160",
+        "Data 3": "230",
+        "Data 4": "180",
+        "Data 5": "160",
+        "Data 6": "220"
+      },
+      {
+        "Date": "5/15/2016",
+        "Data 1": "80",
+        "Data 2": "350",
+        "Data 3": "300",
+        "Data 4": "150",
+        "Data 5": "130",
+        "Data 6": "100"
+      },
+      {
+        "Date": "6/15/2016",
+        "Data 1": "90",
+        "Data 2": "220",
+        "Data 3": "320",
+        "Data 4": "100",
+        "Data 5": "220",
+        "Data 6": "300"
+      }
+    ]
+  },
+  "isPaletteReversed": false,
+  "suppressedData": [],
+  "height": 300,
+  "visualizationType": "Bar",
+  "description": "",
+  "dataCutoff": "0",
+  "validated": 4.23,
+  "dynamicMarginTop": 105,
+  "version": "4.25.10",
+  "migrations": {
+    "addColorMigration": true
+  },
+  "data": [
+    {
+      "Date": "1/15/2016",
+      "Data 1": "90",
+      "Data 2": "135",
+      "Data 3": "300",
+      "Data 4": "95",
+      "Data 5": "120",
+      "Data 6": "310"
+    },
+    {
+      "Date": "2/15/2016",
+      "Data 1": "40",
+      "Data 2": "90",
+      "Data 3": "240",
+      "Data 4": "60",
+      "Data 5": "160",
+      "Data 6": "200"
+    },
+    {
+      "Date": "3/15/2016",
+      "Data 1": "50",
+      "Data 2": "300",
+      "Data 3": "290",
+      "Data 4": "100",
+      "Data 5": "200",
+      "Data 6": "250"
+    },
+    {
+      "Date": "4/15/2016",
+      "Data 1": "120",
+      "Data 2": "160",
+      "Data 3": "230",
+      "Data 4": "180",
+      "Data 5": "160",
+      "Data 6": "220"
+    },
+    {
+      "Date": "5/15/2016",
+      "Data 1": "80",
+      "Data 2": "350",
+      "Data 3": "300",
+      "Data 4": "150",
+      "Data 5": "130",
+      "Data 6": "100"
+    },
+    {
+      "Date": "6/15/2016",
+      "Data 1": "90",
+      "Data 2": "220",
+      "Data 3": "320",
+      "Data 4": "100",
+      "Data 5": "220",
+      "Data 6": "300"
+    }
+  ]
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cdc/chart",
-  "version": "4.26.5",
+  "version": "4.26.6",
   "description": "React component for visualizing tabular data in various types of charts",
   "license": "Apache-2.0",
   "author": "Matthew Pallansch <mpallansch@adittech.com>",
   "bugs": "https://github.com/CDCgov/cdc-open-viz/issues",
   "dependencies": {
-    "@cdc/core": "^4.26.5",
+    "@cdc/core": "^4.26.6",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-spring/web": "^9.7.5",
     "@rollup/plugin-dsv": "^3.0.2",
@@ -57,7 +57,7 @@
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-time-format": "^4.0.3"
   },
-  "gitHead": "61c025165d96b45a6002c34582c5a622a9d865a9",
+  "gitHead": "f4a2a0d4a631a1b60fcf9534589697780e480b58",
   "main": "dist/cdcchart",
   "moduleName": "CdcChart",
   "peerDependencies": {

package/src/CdcChart.tsx

@@ -4,7 +4,7 @@ import { ChartConfig } from './types/ChartConfig'
 import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
 import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
 import { parseCsvWithQuotes } from '@cdc/core/helpers/parseCsvWithQuotes'
-import cacheBustingString from '@cdc/core/helpers/cacheBustingString'
+import { addCsvCacheBuster } from '@cdc/core/helpers/csvCacheBuster'
 import { extractDataAndMetadata } from '@cdc/core/helpers/extractDataAndMetadata'
 import Loading from '@cdc/core/components/Loading'
 import _ from 'lodash'
@@ -112,11 +112,12 @@ const parseCsv = (responseText: string, delimiter = '|') => {
 
 const fetchAndParseData = async (url: string, ext: string) => {
   try {
-    const response = await fetch(url)
-    if (ext === 'csv' || isSolrCsv(url)) {
+    if (ext?.toLowerCase() === 'csv' || isSolrCsv(url)) {
+      const response = await fetch(addCsvCacheBuster(url))
       const responseText = await response.text()
       return { data: parseCsv(responseText), dataMetadata: {} }
-    } else if (ext === 'json' || isSolrJson(url)) {
+    } else if (ext?.toLowerCase() === 'json' || isSolrJson(url)) {
+      const response = await fetch(url)
       const json = await response.json()
       return extractDataAndMetadata(json)
     }

package/src/CdcChartComponent.tsx

@@ -246,6 +246,10 @@ const CdcChart: React.FC<CdcChartProps> = ({
   const processedIntroText = processedTextFields.introText
   const processedLegacyFootnotes = processedTextFields.legacyFootnotes
   const processedDescription = processedTextFields.description
+  const chartDataTableIsRendered =
+    Boolean(config.table?.show) &&
+    config.visualizationType !== 'Spark Line' &&
+    ((Boolean(config.xAxis?.dataKey) && config.visualizationType !== 'Sankey') || config.visualizationType === 'Sankey')
   // Note: Axis labels are processed within updateConfig to ensure they use the correct data
 
   // set defaults on titles if blank AND only in editor
@@ -480,7 +484,9 @@ const CdcChart: React.FC<CdcChartProps> = ({
               lineType: series.lineType,
               originalDataKey: series.dataKey,
               dynamicCategory: series.dynamicCategory,
-              tooltip: true
+              tooltip: true,
+              weight: series.weight,
+              axis: series.axis
             })
           })
           // return the series keys
@@ -565,7 +571,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
         ...newConfig.legend,
         position: newConfig.legend?.position || 'top',
         style: newConfig.legend?.style || 'gradient',
-        subStyle: newConfig.legend?.subStyle || 'smooth'
+        subStyle:
+          newConfig.legend?.subStyle === 'smooth' ? 'linear blocks' : newConfig.legend?.subStyle || 'linear blocks'
       }
       newConfig.yAxis = {
         ...newConfig.yAxis,
@@ -769,6 +776,16 @@ const CdcChart: React.FC<CdcChartProps> = ({
     return newConfig
   }
 
+  const configDataDependency = configObj?.data?.length ? configObj.data : null
+  const configExclusionsDependency = [
+    configObj?.xAxis?.type,
+    configObj?.xAxis?.dataKey,
+    configObj?.exclusions?.active,
+    configObj?.exclusions?.dateStart,
+    configObj?.exclusions?.dateEnd,
+    ...(configObj?.exclusions?.keys || [])
+  ].join('|')
+
   useEffect(() => {
     const load = async () => {
       try {
@@ -790,7 +807,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
 
     load()
-  }, [configObj?.data?.length ? configObj.data : null])
+  }, [configDataDependency, configExclusionsDependency])
 
   /**
    * When cove has a config and container ref publish the cove_loaded event.
@@ -1255,6 +1272,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
   // Transform and clean data for chart rendering
   const transformedData = getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean })
+  const configYAxisDomainData = (config as ChartConfig).yAxisDomainData
+  const yAxisDomainData = useMemo(() => {
+    if (Array.isArray(configYAxisDomainData) && configYAxisDomainData.length > 0) {
+      return clean(getExcludedData(config, configYAxisDomainData))
+    }
+
+    return clean(excludedData)
+  }, [config, configYAxisDomainData, excludedData])
 
   // Filter annotations to only those visible in current data view
   const visibleAnnotations = getVisibleAnnotations(config.annotations, transformedData, config.xAxis?.dataKey)
@@ -1403,11 +1428,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                 {isDashboard && config.table && config.table.show && config.table.showDataTableLink
                   ? tableLink
                   : link && link}
-                {(config.xAxis.dataKey &&
-                  config.table.show &&
-                  config.visualizationType !== 'Spark Line' &&
-                  config.visualizationType !== 'Sankey') ||
-                (config.visualizationType === 'Sankey' && config.table.show)
+                {chartDataTableIsRendered
                   ? (() => {
                       let dataTableConfig = pivotDynamicSeries(config)
                       let dataTableColumns = config.columns
@@ -1433,6 +1454,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                         <DataTable
                           key={config.table?.defaultSort?.column || ''}
                           config={dataTableConfig}
+                          dataConfig={config.dataKey ? datasets?.[config.dataKey] : undefined}
                           rawData={dataTableRawData}
                           runtimeData={dataTableRuntimeData}
                           expandDataTable={config.table.expanded}
@@ -1706,7 +1728,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
     twoColorPalette,
     unfilteredData: stateData,
     updateConfig,
-    visibleAnnotations
+    visibleAnnotations,
+    yAxisDomainData
   }
 
   return (