@cdc/chart 4.22.11 → 4.23.1

package/examples/box-plot-data.json

@@ -0,0 +1,71 @@
+[
+  {
+    "x": "Group 1",
+    "min": -3.529439249291613,
+    "firstQuartile": 2.498913996933074,
+    "median": 6,
+    "thirdQuartile": 6.517816161082865,
+    "max": 12.546169407307552,
+    "outliers": [
+      -4.222649440089676,
+      -3.7995254226812145,
+      12.669680018702707
+    ]
+  },
+  {
+    "x": "Group 2",
+    "min": -2.961278855962981,
+    "firstQuartile": 3.1553763355078277,
+    "median": 5.31642875968012,
+    "thirdQuartile": 7.233146463155033,
+    "max": 13.349801654625843,
+    "outliers": [
+      -4.5962772985737645,
+      14.42798091207488,
+      14.832072412460995
+    ]
+  },
+  {
+    "x": "Group 3",
+    "min": -0.784362943544294,
+    "firstQuartile": 5.600233888319485,
+    "median": 7.606034555385235,
+    "thirdQuartile": 9.85663177622867,
+    "max": 16.24122860809245,
+    "outliers": [
+      -2.0568265981730285,
+      -2.036299998010181,
+      -1.634595257757523,
+      -0.9751707921193091,
+      -0.9256799494292718,
+      -0.813852054679872,
+      16.255225428689318,
+      19.221712546396496
+    ]
+  },
+  {
+    "x": "Group 4",
+    "min": -3.4976011611041598,
+    "firstQuartile": 2.362493132101971,
+    "median": 4.364242960871863,
+    "thirdQuartile": 6.269222660906058,
+    "max": 12.129316954112188,
+    "outliers": [
+      -5.912277243480174,
+      -4.535668956980487,
+      -4.255719319016919,
+      -4.175200716132927,
+      -4.1021204775116455,
+      -3.7913796362224352,
+      -3.6909919981778567,
+      -3.6261129831962697,
+      12.169135739844744,
+      12.1724073804239,
+      12.191268834215071,
+      12.236896118210165,
+      12.34513716605812,
+      12.826785108558722,
+      13.048968511771164
+    ]
+  }
+]

package/examples/box-plot.csv

@@ -0,0 +1,5 @@
+x,min,firstQuartile,median,thirdQuartile,max,outliers
+Group 1,-3.529439249291613,2.498913996933074,6,6.517816161082865,12.546169407307552,-4.222649440089676,-3.7995254226812145,12.669680018702707,,,,,,,,,,,,
+Group 2,-2.961278855962981,3.1553763355078277,5.31642875968012,7.233146463155033,13.349801654625843,-4.5962772985737645,14.42798091207488,14.832072412460995,,,,,,,,,,,,
+Group 3,-0.784362943544294,5.600233888319485,7.606034555385235,9.85663177622867,16.24122860809245,-2.0568265981730285,-2.036299998010181,-1.634595257757523,-0.9751707921193091,-0.9256799494292718,-0.813852054679872,16.255225428689318,19.221712546396496,,,,,,,
+Group 4,-3.4976011611041598,2.362493132101971,4.364242960871863,6.269222660906058,12.129316954112188,-5.912277243480174,-4.535668956980487,-4.255719319016919,-4.175200716132927,-4.1021204775116455,-3.7913796362224352,-3.6909919981778567,-3.6261129831962697,12.169135739844744,12.1724073804239,12.191268834215071,12.236896118210165,12.34513716605812,12.826785108558722,13.048968511771164

package/examples/{private/yaxis-test.json → box-plot.json}

@@ -1,6 +1,6 @@
 {
   "type": "chart",
-  "title": "Combo Chart (With Right Axis)",
+  "title": "Example Box Plot",
   "theme": "theme-blue",
   "animate": false,
   "fontSize": "medium",
@@ -18,55 +18,55 @@
     "right": 5
   },
   "yAxis": {
+    "dataKey": "Value",
     "hideAxis": false,
     "displayNumbersOnBar": false,
     "hideLabel": false,
     "hideTicks": false,
-    "gridLines": false,
+    "size": 50,
+    "gridLines": true,
     "min": "",
     "max": "",
-    "rightHideAxis": false,
-    "rightAxisSize": "88",
-    "rightLabelOffsetSize": "80",
-    "label": "Left Axis (Value)",
-    "rightSeries": "tot_tests_18_older",
-    "rightLabel": "Right Axis (Value)",
-    "rightHideLabel": false,
-    "rightHideTicks": false,
-    "rightNumTicks": "6",
-    "rightAxisLabelColor": "purple",
-    "rightAxisTickLabelColor": "purple",
-    "rightAxisTickColor": "purple",
-    "labelColor": "orange",
-    "tickLabelColor": "orange",
-    "tickColor": "orange"
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 50,
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "isLegendValue": false,
+    "numTicks": "",
+    "label": "Observations"
   },
+  "boxplot": [],
   "topAxis": {
-    "hasLine": true
+    "hasLine": false
   },
   "barThickness": 0.35,
   "barHeight": 25,
   "height": 300,
   "xAxis": {
-    "type": "date",
+    "type": "categorical",
     "hideAxis": false,
     "hideLabel": false,
     "hideTicks": false,
-    "size": "100",
-    "tickRotation": 30,
+    "size": 75,
+    "tickRotation": 0,
     "min": "",
     "max": "",
-    "label": "Date/Category Axis",
-    "dataKey": "week",
-    "dateParseFormat": "%m/%d/%Y",
-    "dateDisplayFormat": "%m/%d/%Y",
-    "labelColor": "blue",
-    "tickLabelColor": "blue",
-    "tickColor": "blue"
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "isLegendValue": false,
+    "numTicks": "",
+    "dataKey": "Group_Category",
+    "label": "Groups"
   },
   "table": {
     "label": "Data Table",
-    "expanded": false,
+    "expanded": true,
     "limitHeight": false,
     "height": "",
     "caption": "",
@@ -76,6 +76,7 @@
   "legend": {
     "behavior": "isolate",
     "position": "right",
+    "singleRow": false,
     "colorCode": "",
     "reverseLabelOrder": false,
     "description": "",
@@ -83,21 +84,20 @@
     "dynamicLegendDefaultText": "Show All",
     "dynamicLegendItemLimit": 5,
     "dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
-    "dynamicLegendChartMessage": "Select Options from the Legend",
-    "hide": false
+    "dynamicLegendChartMessage": "Select Options from the Legend"
   },
   "exclusions": {
     "active": false,
     "keys": []
   },
-  "palette": "qualitative-bold",
+  "palette": "qualitative1",
   "isPaletteReversed": false,
   "labels": false,
   "dataFormat": {
     "commas": false,
     "prefix": "",
     "suffix": "",
-    "roundTo": "0"
+    "useFormat": false
   },
   "confidenceKeys": {},
   "visual": {
@@ -105,29 +105,20 @@
     "accent": true,
     "background": true
   },
-  "dataUrl": "/examples/private/yaxis.json",
-  "visualizationType": "Combo",
+  "dataUrl": "/examples/newdata.json",
+  "visualizationType": "Box Plot",
+  "description": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false,
+    "singleRow": false,
+    "xKey": "Group_Category",
+    "valueKey": "Value"
+  },
   "series": [
     {
-      "dataKey": "tot_tests_0_12",
-      "type": "Bar",
-      "axis": "Left"
-    },
-    {
-      "dataKey": "tot_tests_13_17",
-      "type": "Bar",
-      "axis": "Left"
-    },
-    {
-      "dataKey": "tot_tests_18_older",
-      "type": "Line",
-      "axis": "Left"
-    },
-    {
-      "dataKey": "0_12_positivity_rate",
-      "type": "Line",
-      "axis": "Right"
+      "dataKey": "Value",
+      "type": "Bar"
     }
-  ],
-  "dataCutoff": "0.5"
-}
+  ]
+}

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

@@ -4,6 +4,7 @@
   "theme": "theme-purple",
   "fontSize": "medium",
   "height": "332",
+  "animate": true,
   "padding": {
     "left": 5,
     "right": 5
@@ -131,7 +132,8 @@
     },
     {
       "dataKey": "Monthly-Goal",
-      "type": "Line"
+      "type": "dashed-md",
+      "axis": "Left"
     }
   ]
 }

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

@@ -2,93 +2,162 @@
   "type": "chart",
   "title": "Example Bar Chart",
   "theme": "theme-blue",
+  "animate": false,
   "fontSize": "medium",
-  "height": 300,
+  "lineDatapointStyle": "hover",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
   "padding": {
     "left": 5,
     "right": 5
   },
   "yAxis": {
-    "size": "76",
-    "gridLines": false,
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "150",
+    "gridLines": true,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 0,
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "isLegendValue": false,
+    "numTicks": "",
     "label": "Y Axis Example Label"
   },
+  "topAxis": {
+    "hasLine": false
+  },
   "barThickness": "0.6",
+  "barHeight": 25,
+  "height": 300,
   "xAxis": {
+    "type": "categorical",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
     "size": "59",
     "tickRotation": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "isLegendValue": false,
+    "numTicks": "",
     "dataKey": "Date",
     "label": "X Axis Example Label"
   },
   "table": {
     "label": "Data Type by Date",
-    "expanded": true
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "show": true,
+    "download": true
   },
+  "orientation": "vertical",
   "legend": {
     "behavior": "isolate",
     "position": "right",
+    "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",
     "label": "Type of Data"
   },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
   "palette": "qualitative-bold",
+  "isPaletteReversed": false,
   "labels": false,
   "dataFormat": {
+    "commas": false,
+    "prefix": "",
     "suffix": " units"
   },
   "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true
+  },
   "data": [
     {
       "Date": "1/15/2016",
-      "Data 1": "90",
+      "Data 1": "900",
       "Data 2": "135",
       "Data 3": "300",
       "Data 4": "95",
       "Data 5": "120",
-      "Data 6": "310"
+      "Data 6": "3100"
     },
     {
       "Date": "2/15/2016",
-      "Data 1": "40",
+      "Data 1": "4000",
       "Data 2": "90",
       "Data 3": "240",
       "Data 4": "60",
       "Data 5": "160",
-      "Data 6": "200"
+      "Data 6": "2000"
     },
     {
       "Date": "3/15/2016",
-      "Data 1": "50",
+      "Data 1": "5000",
       "Data 2": "300",
       "Data 3": "290",
       "Data 4": "100",
       "Data 5": "200",
-      "Data 6": "250"
+      "Data 6": "2500"
     },
     {
       "Date": "4/15/2016",
-      "Data 1": "120",
+      "Data 1": "12000",
       "Data 2": "160",
       "Data 3": "230",
       "Data 4": "180",
       "Data 5": "160",
-      "Data 6": "220"
+      "Data 6": "2200"
     },
     {
       "Date": "5/15/2016",
-      "Data 1": "80",
+      "Data 1": "8000",
       "Data 2": "350",
       "Data 3": "300",
       "Data 4": "150",
       "Data 5": "130",
-      "Data 6": "100"
+      "Data 6": "1000"
     },
     {
       "Date": "6/15/2016",
-      "Data 1": "90",
+      "Data 1": "9000",
       "Data 2": "220",
       "Data 3": "320",
       "Data 4": "100",
       "Data 5": "220",
-      "Data 6": "300"
+      "Data 6": "3000"
     }
   ],
   "visualizationType": "Bar",

package/examples/new-data.csv

@@ -0,0 +1,17 @@
+Group_Category,Value
+category one,21
+category one,19
+category one,23
+category one,24
+category two,18
+category two,10
+category two,12
+category two,19
+category three,30
+category three,35
+category three,36
+category three,40
+category four,50
+category four,54
+category four,42
+category four,159

package/examples/newdata.json

@@ -0,0 +1,90 @@
+[
+  {
+    "Group_Category": "category one",
+    "Value": "21"
+  },
+  {
+    "Group_Category": "category one",
+    "Value": "19"
+  },
+  {
+    "Group_Category": "category one",
+    "Value": "23"
+  },
+  {
+    "Group_Category": "category one",
+    "Value": "24"
+  },
+  {
+    "Group_Category": "category two",
+    "Value": "18"
+  },
+  {
+    "Group_Category": "category two",
+    "Value": "10"
+  },
+  {
+    "Group_Category": "category two",
+    "Value": "12"
+  },
+  {
+    "Group_Category": "category two",
+    "Value": "19"
+  },
+  {
+    "Group_Category": "category three",
+    "Value": "30"
+  },
+  {
+    "Group_Category": "category three",
+    "Value": "35"
+  },
+  {
+    "Group_Category": "category three",
+    "Value": "36"
+  },
+  {
+    "Group_Category": "category three",
+    "Value": "40"
+  },
+  {
+    "Group_Category": "category four",
+    "Value": "30"
+  },
+  {
+    "Group_Category": "category four",
+    "Value": "40"
+  },
+  {
+    "Group_Category": "category four",
+    "Value": "50"
+  },
+  {
+    "Group_Category": "category four",
+    "Value": "50"
+  },
+  {
+    "Group_Category": "category four",
+    "Value": "85"
+  },
+  {
+    "Group_Category": "category four",
+    "Value": "82"
+  },
+  {
+    "Group_Category": "category four",
+    "Value": "43"
+  },
+  {
+    "Group_Category": "category four",
+    "Value": "42"
+  },
+  {
+    "Group_Category": "category four",
+    "Value": "41"
+  },
+  {
+    "Group_Category": "category four",
+    "Value": "21"
+  }
+]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.22.11",
+  "version": "4.23.1",
   "description": "React component for visualizing tabular data in various types of charts",
   "main": "dist/cdcchart",
   "scripts": {
@@ -29,6 +29,7 @@
     "@visx/mock-data": "^1.0.0",
     "@visx/scale": "^1.0.0",
     "@visx/shape": "^1.0.0",
+    "@visx/stats": "^2.17.0",
     "@visx/tooltip": "^1.1.0",
     "chroma-js": "^2.1.2",
     "d3-array": "^2.8.0",
@@ -50,5 +51,5 @@
   "resolutions": {
     "@types/react": "17.x"
   },
-  "gitHead": "9768d1ea0e2383044977d988e33531bcdfe33ea6"
+  "gitHead": "58163844cc9ce2c379235413b19f49679eab4bef"
 }