@cdc/chart 4.26.4 → 4.26.6

package/examples/private/test-123.json

@@ -0,0 +1,624 @@
+{
+  "annotations": [],
+  "allowLineToBarGraph": "__​undefined__",
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "title": "Title",
+  "titleStyle": "small",
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "theme": "theme-blue",
+  "animate": false,
+  "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",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": true,
+    "hideNullValue": true,
+    "palette": {
+      "isReversed": true,
+      "version": "2.0",
+      "name": "sequential_purplereverse"
+    },
+    "useIntelligentLineChartLabels": false,
+    "paletteColorCount": 4
+  },
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "preliminaryData": [],
+  "yAxis": {
+    "hideAxis": true,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": true,
+    "size": 50,
+    "gridLines": true,
+    "enablePadding": true,
+    "min": "",
+    "max": "",
+    "labelColor": "#1c1d1f",
+    "tickLabelColor": "#1c1d1f",
+    "tickColor": "#1c1d1f",
+    "rightHideAxis": false,
+    "rightAxisSize": 0,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#1c1d1f",
+    "rightAxisTickLabelColor": "#1c1d1f",
+    "rightAxisTickColor": "#1c1d1f",
+    "numTicks": "5",
+    "axisPadding": 0,
+    "scalePadding": "5",
+    "tickRotation": 0,
+    "anchors": [],
+    "shoMissingDataLabel": true,
+    "showMissingDataLine": true,
+    "categories": [],
+    "label": "Total Cases",
+    "labelPlacement": "Below Bar",
+    "labelsAboveGridlines": false,
+    "type": "__​undefined__"
+  },
+  "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": 123.19999999999999
+  },
+  "xAxis": {
+    "anchors": [],
+    "type": "categorical",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": true,
+    "hideLabel": false,
+    "hideTicks": true,
+    "size": 75,
+    "tickRotation": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#1c1d1f",
+    "tickLabelColor": "#1c1d1f",
+    "tickColor": "#1c1d1f",
+    "numTicks": 6,
+    "dateDisplayFormat": "%b. %-d %Y",
+    "labelOffset": 0,
+    "axisPadding": 200,
+    "target": 0,
+    "maxTickRotation": 0,
+    "padding": 5,
+    "showYearsOnce": false,
+    "sortByRecentDate": false,
+    "brushActive": false,
+    "viewportNumTicks": {
+      "xs": 4,
+      "xxs": 4
+    },
+    "sortDates": false,
+    "dataKey": "Sex",
+    "axisBBox": 54.15333557128906,
+    "tickWidthMax": 24
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": true,
+    "indexLabel": "",
+    "download": true,
+    "showVertical": true,
+    "dateDisplayFormat": "%B %-d, %Y",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "collapsible": true,
+    "show": true
+  },
+  "orientation": "horizontal",
+  "columns": {},
+  "legend": {
+    "hide": false,
+    "behavior": "highlight",
+    "axisAlign": true,
+    "singleRow": true,
+    "colorCode": "",
+    "reverseLabelOrder": false,
+    "description": "Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et <strong>dolore magna aliqua</strong>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sup> 40</sup> ",
+    "dynamicLegend": false,
+    "dynamicLegendDefaultText": "Show All",
+    "dynamicLegendItemLimit": 5,
+    "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
+    "dynamicLegendChartMessage": "Select Options from the Legend",
+    "label": "Legend",
+    "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": false
+    },
+    "position": "top",
+    "orderedValues": [],
+    "patterns": {},
+    "patternField": "",
+    "unified": true
+  },
+  "smallMultiples": {
+    "mode": "",
+    "tileColumn": "",
+    "tilesPerRowDesktop": 3,
+    "tilesPerRowMobile": 1,
+    "tileOrder": [],
+    "tileOrderType": "asc",
+    "tileTitles": {},
+    "independentYAxis": false,
+    "colorMode": "same",
+    "synchronizedTooltips": true,
+    "showAreaUnderLine": true
+  },
+  "exclusions": {
+    "active": true,
+    "keys": [
+      "All"
+    ]
+  },
+  "twoColor": {
+    "palette": "monochrome-1",
+    "isPaletteReversed": false
+  },
+  "labels": false,
+  "dataFormat": {
+    "commas": true,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": true,
+    "bottomSuffix": "",
+    "bottomPrefix": "",
+    "bottomAbbreviated": false
+  },
+  "filters": [
+    {
+      "values": [
+        "2017",
+        "2018",
+        "2019",
+        "2020"
+      ],
+      "filterStyle": "dropdown",
+      "id": 1773935825487,
+      "showDropdown": true,
+      "active": "2017",
+      "columnName": "Year",
+      "orderedValues": [
+        "2017",
+        "2018",
+        "2019",
+        "2020"
+      ],
+      "label": "Year"
+    },
+    {
+      "values": [
+        "Male",
+        "Female"
+      ],
+      "filterStyle": "multi-select",
+      "id": 1773935988263,
+      "showDropdown": true,
+      "active": [
+        "Female",
+        "Male"
+      ],
+      "columnName": "Sex",
+      "orderedValues": [
+        "Male",
+        "Female"
+      ],
+      "order": "cust"
+    }
+  ],
+  "confidenceKeys": {},
+  "visual": {
+    "border": false,
+    "borderColorTheme": false,
+    "accent": false,
+    "background": false,
+    "hideBackgroundColor": false,
+    "tp5Treatment": false,
+    "tp5Background": false,
+    "verticalHoverLine": true,
+    "horizontalHoverLine": false,
+    "lineDatapointSymbol": "none",
+    "maximumShapeAmount": 7
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    {
+      "dataKey": "<15",
+      "type": "Bar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "15-24",
+      "type": "Bar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "25-34",
+      "type": "Bar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "35-44",
+      "type": "Bar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "45-54",
+      "type": "Bar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "55-64",
+      "type": "Bar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "65+",
+      "type": "Bar",
+      "axis": "Left",
+      "tooltip": true
+    }
+  ],
+  "tooltips": {
+    "opacity": 90,
+    "singleSeries": true,
+    "dateDisplayFormat": "%B %-d, %Y"
+  },
+  "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
+  },
+  "radar": {
+    "gridRings": 5,
+    "showGridRings": true,
+    "gridRingStyle": "polygons",
+    "scaleMin": 0,
+    "scaleMax": "",
+    "fillOpacity": 0.3,
+    "showPoints": true,
+    "pointRadius": 4,
+    "strokeWidth": 2,
+    "axisLabelOffset": 15
+  },
+  "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,
+  "errors": [],
+  "currentViewport": "lg",
+  "id": 27,
+  "category": "Charts",
+  "label": "Horizon Chart",
+  "subType": "Horizon Chart",
+  "icon": {
+    "type": {},
+    "key": null,
+    "ref": null,
+    "props": {},
+    "_owner": null
+  },
+  "content": "Display a horizon chart to visualize quantities over time in a smaller space.",
+  "visualizationType": "Bar",
+  "activeVizButtonID": 27,
+  "dataMetadata": {},
+  "dataFileName": "https://wwwdev.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data/indexed-data-files/39-chart-year2017-2020-sex-age-totalCases.csv",
+  "dataFileSourceType": "url",
+  "dataDescription": {
+    "horizontal": false,
+    "series": true,
+    "singleRow": false,
+    "seriesKey": "Age Group",
+    "xKey": "Sex",
+    "valueKeysTallSupport": [
+      "Total Cases"
+    ]
+  },
+  "version": "4.26.4",
+  "migrations": {
+    "addColorMigration": true
+  },
+  "locale": "en-US",
+  "horizon": {
+    "numLayers": 4,
+    "mode": "offset",
+    "bandGap": 15,
+    "bottomPadding": 15
+  },
+  "introText": "Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et <strong>dolore magna aliqua</strong>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sup> 40</sup> M",
+  "description": "Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et <strong>dolore magna aliqua</strong>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sup> 40</sup> S",
+  "legacyFootnotes": "Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>, sed do eiusmod tempor incididunt ut labore et <strong>dolore magna aliqua</strong>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sup> 40</sup> F",
+  "dynamicMarginTop": 0,
+  "data": [
+    {
+      "Sex": "Male",
+      "Year": "2017",
+      "<15": "1019960",
+      "15-24": "700320",
+      "25-34": "2393680",
+      "35-44": "752920",
+      "45-54": "578130",
+      "55-64": "326450",
+      "65+": "51100"
+    },
+    {
+      "Sex": "Female",
+      "Year": "2017",
+      "<15": "399980",
+      "15-24": "251160",
+      "25-34": "238700",
+      "35-44": "523460",
+      "45-54": "394310",
+      "55-64": "56700",
+      "65+": "28140"
+    },
+    {
+      "Sex": "All",
+      "Year": "2017",
+      "<15": "1419940",
+      "15-24": "951480",
+      "25-34": "2632380",
+      "35-44": "1276380",
+      "45-54": "972440",
+      "55-64": "383150",
+      "65+": "79240"
+    },
+    {
+      "Sex": "Male",
+      "Year": "2018",
+      "<15": "426367",
+      "15-24": "297102",
+      "25-34": "420000",
+      "35-44": "617394",
+      "45-54": "474066",
+      "55-64": "96078",
+      "65+": "41902"
+    },
+    {
+      "Sex": "Female",
+      "Year": "2018",
+      "<15": "327983",
+      "15-24": "205951",
+      "25-34": "195734",
+      "35-44": "530224",
+      "45-54": "323334",
+      "55-64": "46494",
+      "65+": "23074"
+    },
+    {
+      "Sex": "All",
+      "Year": "2018",
+      "<15": "754350",
+      "15-24": "503053",
+      "25-34": "615734",
+      "35-44": "1147618",
+      "45-54": "797400",
+      "55-64": "142572",
+      "65+": "64976"
+    },
+    {
+      "Sex": "Male",
+      "Year": "2019",
+      "<15": "383730",
+      "15-24": "320046",
+      "25-34": "378000",
+      "35-44": "570654",
+      "45-54": "426659",
+      "55-64": "86470",
+      "65+": "37711"
+    },
+    {
+      "Sex": "Female",
+      "Year": "2019",
+      "<15": "295184",
+      "15-24": "211355",
+      "25-34": "176160",
+      "35-44": "477201",
+      "45-54": "224000",
+      "55-64": "41844",
+      "65+": "20766"
+    },
+    {
+      "Sex": "All",
+      "Year": "2019",
+      "<15": "678914",
+      "15-24": "531401",
+      "25-34": "554160",
+      "35-44": "1047855",
+      "45-54": "650659",
+      "55-64": "128314",
+      "65+": "58477"
+    },
+    {
+      "Sex": "Male",
+      "Year": "2020",
+      "<15": "240936",
+      "15-24": "236631",
+      "25-34": "257040",
+      "35-44": "388044",
+      "45-54": "290128",
+      "55-64": "69799",
+      "65+": "25643"
+    },
+    {
+      "Sex": "Female",
+      "Year": "2020",
+      "<15": "200725",
+      "15-24": "143721",
+      "25-34": "132788",
+      "35-44": "324496",
+      "45-54": "152320",
+      "55-64": "36453",
+      "65+": "21120"
+    },
+    {
+      "Sex": "All",
+      "Year": "2020",
+      "<15": "441661",
+      "15-24": "380352",
+      "25-34": "389828",
+      "35-44": "712540",
+      "45-54": "442448",
+      "55-64": "106252",
+      "65+": "46763"
+    }
+  ],
+  "datasets": {}
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cdc/chart",
-  "version": "4.26.4",
+  "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.4",
+    "@cdc/core": "^4.26.6",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-spring/web": "^9.7.5",
     "@rollup/plugin-dsv": "^3.0.2",
@@ -18,6 +18,7 @@
     "@visx/event": "^3.12.0",
     "@visx/glyph": "^3.12.0",
     "@visx/gradient": "^3.12.0",
+    "@visx/heatmap": "^3.12.0",
     "@visx/legend": "^3.12.0",
     "@visx/marker": "^3.12.0",
     "@visx/mock-data": "^3.12.0",
@@ -56,7 +57,7 @@
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-time-format": "^4.0.3"
   },
-  "gitHead": "9062881d50c824ee6cdd71868bafd016a5e5694d",
+  "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)
     }