@cdc/chart 4.23.2 → 4.23.3

package/examples/planet-deviation-config.json

@@ -0,0 +1,168 @@
+{
+  "type": "chart",
+  "title": "Planet Radius (Bar Example)",
+  "showTitle": true,
+  "theme": "theme-blue",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "rounded",
+  "roundingStyle": "finger",
+  "tipRounding": "top",
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": true,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 50,
+    "gridLines": false,
+    "enablePadding": false,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 50,
+    "rightLabel": "testing",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "11",
+    "axisPadding": 0,
+    "tickRotation": 0,
+    "label": "Measurement (1000km)",
+    "rightSeries": "Diameter"
+  },
+  "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",
+      "count": "Count",
+      "outliers": "Outliers",
+      "values": "Values"
+    }
+  },
+  "topAxis": {
+    "hasLine": false
+  },
+  "isLegendValue": false,
+  "barThickness": 0.35,
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": {
+    "vertical": 300,
+    "horizontal": 360
+  },
+  "xAxis": {
+    "type": "categorical",
+    "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": "55",
+    "label": "Planet",
+    "dataKey": "name"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "show": true
+  },
+  "orientation": "horizontal",
+  "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",
+    "position": "right",
+    "hide": false
+  },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
+  "palette": "qualitative-bold",
+  "isPaletteReversed": false,
+  "twoColor": {
+    "palette": "complementary-5reverse",
+    "isPaletteReversed": true
+  },
+  "labels": false,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "km",
+    "abbreviated": false,
+    "bottomSuffix": "",
+    "bottomPrefix": "",
+    "bottomAbbreviated": false,
+    "roundTo": 1
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true
+  },
+  "dataUrl": "/examples/planet-deviation-data.json",
+  "visualizationType": "Deviation Bar",
+  "series": [
+    {
+      "dataKey": "Radius",
+      "type": "Deviation Bar",
+      "axis": "Left"
+    }
+  ],
+  "dataCutoff": "0.5"
+}

package/examples/planet-deviation-data.json

@@ -0,0 +1,38 @@
+[
+  {
+    "name": "Jupiter",
+    "Radius": "10000"
+  },
+  {
+    "name": "Saturn",
+    "Radius": "90000"
+  },
+  {
+    "name": "Uranus",
+    "Radius": "-80000"
+  },
+  {
+    "name": "Neptune",
+    "Radius": "7000"
+  },
+  {
+    "name": "Earth",
+    "Radius": "60000"
+  },
+  {
+    "name": "Venus",
+    "Radius": "50000"
+  },
+  {
+    "name": "Mars",
+    "Radius": "40000"
+  },
+  {
+    "name": "Mercury",
+    "Radius": "30000"
+  },
+  {
+    "name": "Pluto",
+    "Radius": "20000"
+  }
+]

package/examples/planet-example-config.json

@@ -1,37 +1,156 @@
 {
+  "type": "chart",
   "title": "Planet Radius (Bar Example)",
-  "dataUrl": "/examples/planet-example-data.json",
-  "visualizationType": "Bar",
-  "visualizationSubType": "regular",
-  "series": [{ "dataKey": "Radius" }],
+  "theme": "theme-blue",
+  "animate": false,
   "fontSize": "medium",
-  "dataCutoff": "0.5",
-  "orientation": "vertical",
-  "dataFormat": {
-    "roundTo": 1,
-    "commas": false,
-    "prefix": "",
-    "suffix": "km"
-  },
+  "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": 50,
+    "gridLines": false,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 50,
+    "rightLabel": "testing",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "11",
+    "axisPadding": 0,
+    "tickRotation": 0,
     "label": "Measurement (1000km)",
-    "rightSeries": "Diameter",
-    "rightLabel": "testing"
+    "rightSeries": "Diameter"
+  },
+  "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",
+      "count": "Count",
+      "outliers": "Outliers",
+      "values": "Values"
+    }
+  },
+  "topAxis": {
+    "hasLine": false
+  },
+  "isLegendValue": false,
+  "barThickness": 0.35,
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": {
+    "vertical": 300,
+    "horizontal": 405
   },
   "xAxis": {
+    "type": "categorical",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 75,
+    "tickRotation": "0",
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 65,
+    "axisPadding": 0,
     "label": "Planet",
-    "dataKey": "name",
-    "tickRotation": 30
+    "dataKey": "name"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "show": true
   },
+  "orientation": "horizontal",
   "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",
     "hide": false
   },
-  "table": {
-    "label": "Data Table",
-    "expanded": false
-  }
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
+  "palette": "qualitative-bold",
+  "isPaletteReversed": false,
+  "labels": false,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "km",
+    "abbreviated": false,
+    "roundTo": 1
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true
+  },
+  "dataUrl": "/examples/planet-example-data.json",
+  "visualizationType": "Deviation Bar",
+  "series": [
+    {
+      "dataKey": "Radius",
+      "type": "Deviation Bar",
+      "axis": "Left"
+    }
+  ],
+  "dataCutoff": "0.5"
 }

package/examples/planet-example-data-max-increase.json

@@ -0,0 +1,56 @@
+[
+  {
+    "name": "Jupiter",
+    "Radius": "10.97",
+    "Diameter": "25.1",
+    "distance": "0"
+  },
+  {
+    "name": "Saturn",
+    "Radius": "9.14",
+    "Diameter": "18",
+    "distance": "0"
+  },
+  {
+    "name": "Uranus",
+    "Radius": "-4",
+    "Diameter": "-30",
+    "distance": "0"
+  },
+  {
+    "name": "Neptune",
+    "Radius": "3.86",
+    "Diameter": "7",
+    "distance": "0"
+  },
+  {
+    "name": "Earth",
+    "Radius": "1",
+    "Diameter": "2",
+    "distance": "0"
+  },
+  {
+    "name": "Venus",
+    "Radius": "0.950",
+    "Diameter": "2",
+    "distance": "0"
+  },
+  {
+    "name": "Mars",
+    "Radius": "0.532",
+    "Diameter": "1",
+    "distance": "0"
+  },
+  {
+    "name": "Mercury",
+    "Radius": "0.383",
+    "Diameter": "0.7",
+    "distance": "0"
+  },
+  {
+    "name": "Pluto",
+    "Radius": "0.181",
+    "Diameter": "0.3",
+    "distance": "0"
+  }
+]

package/examples/planet-example-data.json

@@ -1,56 +1,56 @@
 [
   {
     "name": "Jupiter",
-    "Radius": "10.97",
+    "Radius": "100",
     "Diameter": "22",
     "distance": "0"
   },
   {
     "name": "Saturn",
-    "Radius": "9.14",
+    "Radius": "90",
     "Diameter": "18",
     "distance": "0"
   },
   {
     "name": "Uranus",
-    "Radius": "-10",
+    "Radius": "80",
     "Diameter": "8",
     "distance": "0"
   },
   {
     "name": "Neptune",
-    "Radius": "3.86",
+    "Radius": "70",
     "Diameter": "7",
     "distance": "0"
   },
   {
     "name": "Earth",
-    "Radius": "1",
+    "Radius": "60",
     "Diameter": "2",
     "distance": "0"
   },
   {
     "name": "Venus",
-    "Radius": "0.950",
+    "Radius": "50",
     "Diameter": "2",
     "distance": "0"
   },
   {
     "name": "Mars",
-    "Radius": "0.532",
+    "Radius": "-40",
     "Diameter": "1",
     "distance": "0"
   },
   {
     "name": "Mercury",
-    "Radius": "0.383",
+    "Radius": "30",
     "Diameter": "0.7",
     "distance": "0"
   },
   {
     "name": "Pluto",
-    "Radius": "0.181",
+    "Radius": "20",
     "Diameter": "0.3",
     "distance": "0"
   }
-]
+]

package/examples/scatterplot-continuous.csv

@@ -1,7 +1,7 @@
 x,y1,y2,y3,y4
-1,8,37,72,82
-2,2,30,75,83
-3,15,42,51,95
+1000,8,37,72,82
+2000,2,30,75,83
+3000,15,42,51,95
 4,10,38,61,96
 5,1,38,66,86
 60,6,37,70,85

package/examples/scatterplot.json

@@ -48,7 +48,7 @@
   "barHeight": 25,
   "height": 300,
   "xAxis": {
-    "type": "continuous",
+    "type": "",
     "hideAxis": false,
     "hideLabel": false,
     "hideTicks": false,
@@ -133,4 +133,4 @@
       "type": "Bar"
     }
   ]
-}
+}

package/examples/sparkline-chart-nonnumeric.json

@@ -50,7 +50,7 @@
     },
     {
       "Date": "3/15/2016",
-      "Data 1": "NA"
+      "Data 1": "40"
     },
     {
       "Date": "4/15/2016",
@@ -69,8 +69,8 @@
   "series": [
     {
       "dataKey": "Data 1",
-      "type": "Bar"
+      "type": "Line"
     }
   ],
   "description": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups."
-}
+}

package/index.html

@@ -34,19 +34,30 @@
   <!-- <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/private/textelements.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/private/example-bar-chart.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/example-combo-bar-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-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> -->
 
   <!-- HORIZONTAL BAR CHARTS -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
@@ -54,16 +65,22 @@
   <!-- <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-with-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-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/box-plot.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>
+    <!-- <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>
@@ -71,4 +88,4 @@
 <script type="module" src="./src/index.jsx"></script>
 </body>
 
-</html>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.23.2",
+  "version": "4.23.3",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -10,7 +10,9 @@
     "build": "vite build",
     "preview": "vite preview",
     "graph": "nx graph",
-    "prepublishOnly": "lerna run --scope @cdc/chart build"
+    "prepublishOnly": "lerna run --scope @cdc/chart build",
+    "test": "vitest watch --reporter verbose",
+    "test:ui": "vitest --ui"
   },
   "repository": {
     "type": "git",
@@ -26,6 +28,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@visx/axis": "^3.0.0",
     "@visx/curve": "^3.0.0",
+    "@visx/event": "^3.0.1",
     "@visx/gradient": "^3.0.0",
     "@visx/group": "^3.0.0",
     "@visx/legend": "^3.0.0",
@@ -54,7 +57,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "cd4216f47b1c41bfbc1de3b704f70c52cc7293c2",
+  "gitHead": "6fa3b11db159d38538f18023fe70b67a29e7d327",
   "devDependencies": {
     "resize-observer-polyfill": "^1.5.1"
   }