@cdc/chart 4.23.3 → 4.23.4

package/examples/{case-rate-example-config.json → feature/tests-case-rate/case-rate-example-config.json}

@@ -1,7 +1,7 @@
 {
   "title": "Case Rate Data",
   "theme": "theme-blue",
-  "dataUrl": "/examples/case-rate-example-data.json",
+  "dataUrl": "/examples/feature/tests-case-rate/case-rate-example-data.json",
   "visualizationType": "Bar",
   "visualizationSubType": "horizontal",
   "series": [],
@@ -33,4 +33,4 @@
     "expanded": true,
     "download": true
   }
-}
+}

package/examples/{covid-confidence-example-config.json → feature/tests-covid/covid-confidence-example-config.json}

@@ -1,9 +1,14 @@
 {
   "title": "Confidence Age-adjusted COVID-19-associated hospitalization rates by race and ethnicity — COVID-NET, March 1–December 26, 2020",
-  "dataUrl": "/examples/covid-example-data-confidence.json",
+  "dataUrl": "/examples/feature/tests-covid/covid-example-data-confidence.json",
   "visualizationType": "Bar",
   "fontSize": "small",
-  "series": [{ "dataKey": "Age-adjusted rate", "label": "Rate" }],
+  "series": [
+    {
+      "dataKey": "Age-adjusted rate",
+      "label": "Rate"
+    }
+  ],
   "confidenceKeys": {
     "lower": "Lower",
     "upper": "Upper"
@@ -32,4 +37,4 @@
     "label": "Age-adjusted COVID-19-associated hospitalization rates by race and ethnicity",
     "expanded": true
   }
-}
+}

package/examples/{covid-example-config.json → feature/tests-covid/covid-example-config.json}

@@ -1,10 +1,14 @@
 {
   "title": "Non Configdence Age-adjusted COVID-19-associated hospitalization rates by race and ethnicity — COVID-NET, March 1–December 26, 2020",
   "theme": "theme-brown",
-  "dataUrl": "/examples/covid-example-data.json",
+  "dataUrl": "/examples/feature/tests-covid/covid-example-data.json",
   "visualizationType": "Bar",
   "visualizationSubType": "horizontal",
-  "series": [{ "dataKey": "Age-adjusted rate" }],
+  "series": [
+    {
+      "dataKey": "Age-adjusted rate"
+    }
+  ],
   "barThickness": 0.3,
   "height": 300,
   "dataFormat": {
@@ -33,4 +37,4 @@
     "expanded": true,
     "download": true
   }
-}
+}

package/examples/{cutoff-example-config.json → feature/tests-cutoff/cutoff-example-config.json}

@@ -1,11 +1,15 @@
 {
   "title": "Data Cutoff Example (< 0.1)",
   "theme": "theme-blue",
-  "dataUrl": "/examples/cutoff-example-data.json",
+  "dataUrl": "/examples/feature/tests-cutoff/cutoff-example-data.json",
   "animate": true,
   "animateReplay": true,
   "visualizationType": "Line",
-  "series": [{ "dataKey": "Value" }],
+  "series": [
+    {
+      "dataKey": "Value"
+    }
+  ],
   "barThickness": 0.3,
   "height": 300,
   "dataCutoff": "0.1",
@@ -35,4 +39,4 @@
     "expanded": true,
     "download": true
   }
-}
+}

package/examples/{date-exclusions-config.json → feature/tests-date-exclusions/date-exclusions-config.json}

@@ -1,6 +1,6 @@
 {
   "title": "",
-  "dataUrl": "/examples/date-exclusions-data.json",
+  "dataUrl": "/examples/feature/tests-date-exclusions/date-exclusions-data.json",
   "type": "chart",
   "theme": "theme-blue",
   "fontSize": "medium",
@@ -59,4 +59,4 @@
       "type": "Bar"
     }
   ]
-}
+}

package/examples/{example-bar-chart-nonnumeric.json → feature/tests-non-numerics/example-bar-chart-nonnumeric.json}

@@ -15,7 +15,7 @@
   "dataFormat": { "suffix": " units" },
   "confidenceKeys": {},
   "data": [
-    { "Date": "1/15/2016", "Data 1": "90", "Data 2": "1323.5", "Data 3": "1000", "Data 4": "95", "Data 5": "120", "Data 6": "310" },
+    { "Date": "1/15/2016", "Data 1": "90", "Data 2": "1323.5", "Data 3": "$1,000", "Data 4": "95", "Data 5": "120", "Data 6": "310" },
     { "Date": "2/15/2016", "Data 1": "NA", "Data 2": "90.3", "Data 3": "240", "Data 4": "60", "Data 5": "160", "Data 6": "200" },
     { "Date": "3/15/2016", "Data 1": "50", "Data 2": "booo", "Data 3": "290", "Data 4": "100", "Data 5": "200", "Data 6": "250" },
     { "Date": "4/15/2016", "Data 1": "", "Data 2": "160", "Data 3": "230", "Data 4": "180", "Data 5": "160", "Data 6": "220" },

package/examples/{planet-pie-example-config-nonnumeric.json → feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json}

@@ -1,6 +1,6 @@
 {
   "title": "Planet Radius (Pie Example)",
-  "dataUrl": "/examples/planet-example-data-nonnumeric.json",
+  "dataUrl": "/examples/feature/tests-non-numerics/planet-example-data-nonnumeric.json",
   "animate": true,
   "animateReplay": true,
   "visualizationType": "Pie",
@@ -27,4 +27,4 @@
     "label": "Data Table",
     "expanded": false
   }
-}
+}

package/examples/{sparkline-chart-nonnumeric.json → feature/tests-non-numerics/sparkline-chart-nonnumeric.json}

@@ -73,4 +73,4 @@
     }
   ],
   "description": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups."
-}
+}

package/examples/gallery/bar-chart-vertical/combo-line-chart.json

@@ -1,47 +1,166 @@
 {
   "type": "chart",
   "title": "Combo Bar-Line Chart",
+  "showTitle": true,
   "theme": "theme-purple",
-  "fontSize": "medium",
-  "height": "332",
   "animate": true,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
   "padding": {
     "left": 5,
     "right": 5
   },
   "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
     "size": "68",
     "gridLines": true,
+    "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,
     "label": "Y-Axis Label Example"
   },
+  "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"
+    }
+  },
+  "topAxis": {
+    "hasLine": false
+  },
+  "isLegendValue": false,
   "barThickness": 0.35,
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": {
+    "vertical": 300,
+    "horizontal": 750
+  },
   "xAxis": {
+    "type": "date",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
     "size": "78",
     "tickRotation": "25",
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 65,
+    "axisPadding": 0,
+    "target": 0,
     "dataKey": "Date",
     "label": "X-Axis Example Label",
-    "type": "date",
     "dateParseFormat": "%d/%m/%Y",
     "dateDisplayFormat": "%d/%m/%Y"
   },
   "table": {
     "label": "Data Table",
     "expanded": true,
-    "download": true
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "download": true,
+    "show": true
   },
+  "orientation": "vertical",
   "legend": {
     "behavior": "highlight",
+    "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",
     "position": "right",
     "label": "Data Type"
   },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
   "palette": "qualitative-soft",
+  "isPaletteReversed": false,
+  "twoColor": {
+    "palette": "monochrome-1",
+    "isPaletteReversed": false
+  },
   "labels": false,
-  "dataFormat": {},
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": false,
+    "bottomSuffix": "",
+    "bottomPrefix": "",
+    "bottomAbbreviated": false
+  },
   "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true
+  },
+  "height": "332",
   "data": [
     {
       "Date": "1/15/2016",
-      "Data 1": "90",
+      "Data 1": "$1,000",
       "Data 2": "110",
       "Data 3": "100",
       "Data 4": "90",
@@ -135,5 +254,24 @@
       "type": "dashed-md",
       "axis": "Left"
     }
+  ],
+  "filters": [
+    {
+      "values": [
+        "1/15/2016",
+        "2/15/2016",
+        "3/15/2016",
+        "4/15/2016",
+        "5/15/2016",
+        "6/15/2016",
+        "7/15/2016",
+        "8/15/2016",
+        "9/15/2016"
+      ],
+      "active": "1/15/2016",
+      "order": "asc",
+      "columnName": "Date",
+      "filterBehavior": "dropdown"
+    }
   ]
-}
+}

package/examples/gallery/paired-bar/paired-bar-chart.json

@@ -75,6 +75,7 @@
     "height": "",
     "caption": "",
     "showDownloadUrl": false,
+    "showDataTableLink": true,
     "show": true,
     "indexLabel": "Region"
   },

package/index.html

@@ -20,44 +20,78 @@
 </head>
 
 <body>
-  <!-- <div class="react-container" data-config="/examples/temp-example-config.json"></div> -->
-
-  <!-- <select id="cove_select">
-      <option value=""">Choose An Option</option>
-      <option value="Non-Hispanic White">Non-Hispanic White</option>
-      <option value="Hispanic or Latino">Test 2</option>
-    </select> -->
-
-  <!-- <div class="react-container" data-config="/examples/dynamic-legends.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/cutoff-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/covid-confidence-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/planet-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/planet-chart-horizontal-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/planet-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/example-sparkline.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/date-exclusions-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/case-rate-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/example-bar-chart.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/example-sparkline.json"></div>  -->
-  <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html#examples -->
-
-  <div class="react-container" data-config="/examples/gallery/line/line.json"></div>
-   <!-- EDGE CASES -->
-  <!-- <div class="react-container" data-config="/examples/big-small-test-line.json"></div>  -->
-  <!-- <div class="react-container" data-config="/examples/big-small-test-bar.json"></div>  -->
-  <!-- <div class="react-container" data-config="/examples/big-small-test-negative.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/line-chart-max-increase.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/horizontal-chart-max-increase.json"></div> -->
-
-  <!-- NONNUMERIC TESTS -->
-  <!-- <div class="react-container" data-config="/examples/planet-pie-example-config-nonnumeric.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/planet-pie-example-config.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/example-combo-bar-nonnumeric.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/example-bar-chart-nonnumeric.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/line-chart.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/sparkline-chart-nonnumeric.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/area-chart.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/scatterplot.json"></div> -->
+
+    <!--
+      EXAMPLES:
+        chart/examples/features: different chart types and tests
+        chart/examples/private: an ignored git folder used for addl. troubleshooting.
+        chart/examples/gallery: examples pulled from the cdc data visualization gallery
+        chart/examples/__data__: a folder for storing re-usable fictional datasets
+
+      GALLERY EXAMPLES ARE FOUND HERE:
+        https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-data-map-cities-states.html
+
+  -->
+
+  <!-- GENERIC CHART TYPES -->
+  <!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
+  <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div>
+  <!-- <div class="react-container" data-config="/examples/feature/area/area-chart.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> -->
+  <!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/paired-bar/paired-bar-example.json"></div> -->
+
+  <!-- BAR -->
+  <!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
+  <!-- <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-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 FILTERS -->
+<!-- <div class="react-container" data-config="/examples/feature/filters/filter-testing.json"></div> -->
+<!-- <div class="react-container" data-config="/examples/private/dev-bar.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> -->
+
+   <!-- TESTS BIG SMALL-->
+  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-line.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-bar.json"></div>  -->
+  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-negative.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/line-chart-max-increase.json"></div> -->
+
+  <!-- TESTS NONNUMERICS -->
+  <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json"></div> -->
+  <!-- <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/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
+
+  <!-- TESTS CUTOFF -->
+  <!-- <div class="react-container" data-config="/examples/feature/tests-cutoff/cutoff-example-config.json"></div> -->
+
+  <!-- TESTS COVID -->
+  <!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-confidence-example-config.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-example-config.json"></div> -->
+
+
+    <!--
+      GALLERY EXAMPLES BELOW THIS LINE...
+        https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-data-map-cities-states.html
+
+    -->
+
+  <!-- GENERIC CHART TYPES  -->
+  <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
 
   <!-- HORIZONTAL BAR CHARTS -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
@@ -65,23 +99,13 @@
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
 
   <!-- VERTICAL BAR CHARTS -->
-   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
   <!-- <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/stacked-vertical-bar-example-nonnumerics.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/area-chart.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/scatterplot.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/box-plot.json"></div> -->
-    <!-- Paired bar Chart  -->
-    <!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
-
-  <!-- Deviation Bar Chart  -->
-   <!-- <div class="react-container" data-config="/examples/planet-deviation-config.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.3",
+  "version": "4.23.4",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -57,7 +57,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "6fa3b11db159d38538f18023fe70b67a29e7d327",
+  "gitHead": "dcd395d76f70b2d113f2b4c6fe50a52522655cd1",
   "devDependencies": {
     "resize-observer-polyfill": "^1.5.1"
   }