@cdc/chart 4.23.8 → 4.23.10-alpha

package/examples/private/missing-color.json

@@ -0,0 +1,333 @@
+{
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "title": "",
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "showChartBrush": false,
+  "theme": "theme-blue",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": false,
+  "general": {
+    "showDownloadButton": false
+  },
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "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": 50,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "",
+    "axisPadding": 0,
+    "tickRotation": 0,
+    "anchors": []
+  },
+  "boxplot": {
+    "plots": [],
+    "borders": "true",
+    "firstQuartilePercentage": 25,
+    "thirdQuartilePercentage": 75,
+    "boxWidthPercentage": 40,
+    "plotOutlierValues": false,
+    "plotNonOutlierValues": true,
+    "legend": {
+      "showHowToReadText": false,
+      "howToReadText": ""
+    },
+    "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",
+      "total": "Total",
+      "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": "date",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 75,
+    "tickRotation": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 65,
+    "axisPadding": 0,
+    "target": 0,
+    "maxTickRotation": 0,
+    "dataKey": "Date",
+    "dateParseFormat": "%m/%d/%Y",
+    "dateDisplayFormat": "%m/%d/%Y"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "indexLabel": "",
+    "download": false,
+    "showVertical": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "color": "pinkpurple",
+  "columns": {},
+  "legend": {
+    "behavior": "isolate",
+    "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",
+    "lineMode": false,
+    "verticalSorted": 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,
+    "useCommas": false,
+    "roundToPlace": ""
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": false,
+    "horizontalHoverLine": false
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    {
+      "dataKey": "Data 1",
+      "type": "Line",
+      "axis": "Left",
+      "name": "One",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Data 2",
+      "type": "Bar",
+      "axis": "Left",
+      "name": "two",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Data 3",
+      "type": "Bar",
+      "axis": "Left",
+      "name": "three",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Data 4",
+      "type": "Bar",
+      "axis": "Left",
+      "name": "four",
+      "tooltip": true
+    }
+  ],
+  "tooltips": {
+    "opacity": 90
+  },
+  "forestPlot": {
+    "startAt": 0,
+    "width": "auto",
+    "colors": {
+      "line": "",
+      "shape": ""
+    },
+    "estimateField": "",
+    "estimateRadius": "",
+    "lowerCiField": "",
+    "upperCiField": "",
+    "shape": "",
+    "rowHeight": 20,
+    "showZeroLine": false,
+    "description": {
+      "show": true,
+      "text": "description",
+      "location": 0
+    },
+    "result": {
+      "show": true,
+      "text": "result",
+      "location": 100
+    },
+    "radius": {
+      "min": 1,
+      "max": 8,
+      "scalingColumn": ""
+    },
+    "regression": {
+      "lower": 0,
+      "upper": 0,
+      "estimateField": 0
+    },
+    "leftWidthOffset": 0,
+    "rightWidthOffset": 0
+  },
+  "brush": {
+    "pattern_id": "brush_pattern",
+    "accent_color": "#ddd"
+  },
+  "area": {
+    "isStacked": false
+  },
+  "customColors": [
+    "red",
+    "orange",
+    "yellow",
+    "teal"
+  ],
+  "visualizationType": "Combo",
+  "data": [
+    {
+      "Date": "1/15/2016",
+      "Data 1": "900",
+      "Data 2": "135",
+      "Data 3": "300",
+      "Data 4": "95",
+      "Data 5": "120",
+      "Data 6": "310"
+    },
+    {
+      "Date": "2/15/2016",
+      "Data 1": "4000",
+      "Data 2": "90",
+      "Data 3": "240",
+      "Data 4": "60",
+      "Data 5": "160",
+      "Data 6": "2000"
+    },
+    {
+      "Date": "3/15/2016",
+      "Data 1": "500",
+      "Data 2": "300",
+      "Data 3": "290",
+      "Data 4": "100",
+      "Data 5": "200",
+      "Data 6": "250"
+    },
+    {
+      "Date": "4/15/2016",
+      "Data 1": "1200",
+      "Data 2": "160",
+      "Data 3": "230",
+      "Data 4": "180",
+      "Data 5": "160",
+      "Data 6": "220"
+    },
+    {
+      "Date": "5/15/2016",
+      "Data 1": "8000",
+      "Data 2": "350",
+      "Data 3": "300",
+      "Data 4": "150",
+      "Data 5": "130",
+      "Data 6": "100"
+    },
+    {
+      "Date": "6/15/2016",
+      "Data 1": "9000",
+      "Data 2": "220",
+      "Data 3": "320",
+      "Data 4": "100",
+      "Data 5": "220",
+      "Data 6": "300"
+    }
+  ],
+  "dataFileName": "valid-area-chart.json",
+  "dataFileSourceType": "file",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "validated": 4.23,
+  "dynamicMarginTop": 0
+}

package/index.html

@@ -34,19 +34,23 @@
   -->
 
   <!-- GENERIC CHART TYPES -->
-  <div class="react-container" data-config="/examples/private/tooltip-issue.json"></div>
+  <div class="react-container" data-config="/examples/private/missing-color.json"></div>
+  <!-- <div class="react-container" data-config="/examples/private/combo.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/legend-highlights/highlights.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/private/tooltip-issue.json"></div> -->
   <!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/private/mpox-bar-test-aug-31.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-city-temperature.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-apple.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/forest-plot/broken.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/forest-plot/forest-plot.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-stacked.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/private/forest-plot.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
+  <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Viz.json></div> -->
+  <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/combo-forecasting.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
-  <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div>
+  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/scatterplot/scatterplot.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
@@ -60,13 +64,30 @@
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div> -->
-  <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div>
+  <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-stacked-bar-chart.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
 
   <!-- SPARKLINE -->
   <!-- <div class="react-container" data-config="/examples/feature/sparkline/example-sparkline.json"></div> -->
 
+  <!-- TESTS DATA TABLE SORTING  -->
+  <!-- Bar Chart with Confidence Intervals (bottom of page)  -->
+  <!-- <div class="react-container" data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Example_Bar_CI.json"></div> -->
+  <!-- TPOXX Patient Data -->
+  <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/tpoxx_weekly_race_eth.json"></div> -->
+  <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-tpoxx-age-gender.json"></div> -->
+  <!-- Non-Variola Orthopoxvirus (NVO) Laboratory Testing by Demographics -->
+  <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data.json"></div> -->
+  <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data-age.json"></div> -->
+  <!-- PROBLEM WITH THEIR PAGE CONFIG or CONFLICT with -->
+  <!-- CORS ERROR pulling data on Covid Flu RSV page at https://wwwdev-cdc.msappproxy.net/respiratory-viruses/index.html-->
+ <!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/respiratory-viruses/modules/emergency-dept-visits_live.json"></div> -->
+  <!-- MPOX -->
+  <!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpox-demographics-monthly.json"></div> -->
+  <!-- <div class="react-container" data-config="/https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-age-sex1.json"></div> -->
+
+
   <!-- TESTS DATE EXCLUSIONS -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-date-exclusions/date-exclusions-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
@@ -82,6 +103,7 @@
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/sparkline-chart-nonnumeric.json"></div> -->
+  <div class="react-container" data-config="/examples/feature/bar/lollipop.json"></div>
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
 
   <!-- TESTS CUTOFF -->
@@ -111,8 +133,8 @@
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div>  -->
-  <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div>
+  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
+  <div class="react-container" data-config="https://www.cdc.gov/respiratory-viruses/modules/respiratory-virus-activity/emergency-dept-visits_live.json"></div>
 
   <noscript>You need to enable JavaScript to run this app.</noscript>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.23.8",
+  "version": "4.23.10-alpha",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -48,6 +48,7 @@
     "js-base64": "^2.5.2",
     "papaparse": "^5.3.0",
     "react-accessible-accordion": "^3.3.4",
+    "react-icons": "^4.10.1",
     "react-spring": "^8.0.27",
     "react-table": "^7.5.0",
     "react-tooltip": "5.8.2-beta.3",
@@ -58,7 +59,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "ba0a072a40c430baf121ad5ece0165f52a414b86",
+  "gitHead": "47278535fb20bb4e6b3320f8075051bedc5bca8e",
   "devDependencies": {
     "resize-observer-polyfill": "^1.5.1"
   }