@cdc/chart 4.23.4 → 4.23.6

package/examples/gallery/bar-chart-horizontal/horizontal-highlight.json

@@ -0,0 +1,345 @@
+{
+  "type": "chart",
+  "title": "Example Horizontal Bar Chart",
+  "showTitle": true,
+  "theme": "theme-teal",
+  "animate": false,
+  "fontSize": "small",
+  "lineDatapointStyle": "hover",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "horizontal",
+  "barStyle": "",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "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,
+    "type": "chart",
+    "title": "Example Horizontal Bar Chart",
+    "theme": "theme-teal",
+    "fontSize": "small",
+    "lineDatapointStyle": "hover",
+    "barHasBorder": "false",
+    "padding": {
+      "left": 5,
+      "right": 5
+    },
+    "yAxis": {
+      "size": 50,
+      "gridLines": false,
+      "label": "X-Axis Example Label",
+      "numTicks": "10"
+    },
+    "barThickness": "0.7",
+    "height": 560,
+    "xAxis": {
+      "type": "categorical",
+      "size": "0",
+      "tickRotation": 0,
+      "dataKey": "Group",
+      "label": ""
+    },
+    "table": {
+      "label": "Data Table",
+      "expanded": true,
+      "download": false,
+      "show": true
+    },
+    "legend": {
+      "behavior": "isolate",
+      "position": "right",
+      "label": "Type of Data"
+    },
+    "exclusions": {
+      "active": false,
+      "keys": []
+    },
+    "palette": "qualitative-soft",
+    "labels": false,
+    "dataFormat": {},
+    "confidenceKeys": {},
+    "data": [
+      {
+        "Group": "Combined Total of Group A",
+        "Vehicle": "100",
+        "Home": "120",
+        "Work": "140",
+        "Office": "120"
+      },
+      {
+        "Group": "Combined Total of Group B",
+        "Vehicle": "150",
+        "Home": "140",
+        "Work": "100",
+        "Office": "90"
+      },
+      {
+        "Group": "Combined Total of Group C",
+        "Vehicle": "90",
+        "Home": "90",
+        "Work": "80",
+        "Office": "80"
+      },
+      {
+        "Group": "Combined Total of Group D",
+        "Vehicle": "70",
+        "Home": "60",
+        "Work": "50",
+        "Office": "70"
+      }
+    ],
+    "visualizationType": "Bar",
+    "visualizationSubType": "horizontal",
+    "series": [
+      {
+        "dataKey": "Vehicle",
+        "type": "Bar"
+      },
+      {
+        "dataKey": "Home",
+        "type": "Bar"
+      },
+      {
+        "dataKey": "Work",
+        "type": "Bar"
+      },
+      {
+        "dataKey": "Office",
+        "type": "Bar"
+      }
+    ],
+    "description": "This example shows a horizontal bar chart created in the visualization editor in WCMS",
+    "runtime": {
+      "seriesLabels": {
+        "Vehicle": "Vehicle",
+        "Home": "Home",
+        "Work": "Work",
+        "Office": "Office"
+      },
+      "seriesLabelsAll": [
+        "Vehicle",
+        "Home",
+        "Work",
+        "Office"
+      ],
+      "originalXAxis": {
+        "type": "categorical",
+        "size": "0",
+        "tickRotation": 0,
+        "dataKey": "Group",
+        "label": ""
+      },
+      "seriesKeys": [
+        "Vehicle",
+        "Home",
+        "Work",
+        "Office"
+      ],
+      "xAxis": {
+        "size": 50,
+        "gridLines": false,
+        "label": "X-Axis Example Label",
+        "numTicks": "10"
+      },
+      "yAxis": {
+        "type": "categorical",
+        "size": "0",
+        "tickRotation": 0,
+        "dataKey": "Group",
+        "label": ""
+      },
+      "horizontal": true,
+      "uniqueId": 1644353484184,
+      "editorErrorMessage": ""
+    },
+    "barPadding": 40,
+    "barHeight": 25,
+    "labelPlacement": "Below Bar",
+    "label": "Accidents"
+  },
+  "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.7",
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": {
+    "vertical": 300,
+    "horizontal": 236.8
+  },
+  "xAxis": {
+    "type": "categorical",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "0",
+    "tickRotation": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 65,
+    "axisPadding": 0,
+    "target": 0,
+    "dataKey": "Group",
+    "label": ""
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "download": 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",
+    "label": "Location"
+  },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
+  "palette": "qualitative-soft",
+  "isPaletteReversed": false,
+  "twoColor": {
+    "palette": "monochrome-1",
+    "isPaletteReversed": false
+  },
+  "labels": false,
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": false,
+    "bottomSuffix": "",
+    "bottomPrefix": "",
+    "bottomAbbreviated": false
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true
+  },
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "height": 560,
+  "data": [
+    {
+      "Group": "Group A Survey Results",
+      "Vehicle": "100",
+      "Home": "120",
+      "Work": "140",
+      "Office": "120"
+    },
+    {
+      "Group": "Group B Survey Results",
+      "Vehicle": "150",
+      "Home": "140",
+      "Work": "100",
+      "Office": "90"
+    },
+    {
+      "Group": "Group C Survey Results",
+      "Vehicle": "90",
+      "Home": "90",
+      "Work": "80",
+      "Office": "80"
+    },
+    {
+      "Group": "Group D Survey Results",
+      "Vehicle": "70",
+      "Home": "60",
+      "Work": "50",
+      "Office": "70"
+    }
+  ],
+  "visualizationType": "Bar",
+  "series": [
+    {
+      "dataKey": "Vehicle",
+      "type": "Bar"
+    }
+  ],
+  "description": "This example shows a horizontal bar chart created in the visualization editor in WCMS",
+  "barPadding": 40,
+  "dataFileName": "3-CSV_Source_Example_for_Horizontal_Bar_viz - Fixed.csv",
+  "dataFileSourceType": "file"
+}

package/examples/gallery/line/line.json

@@ -1 +1,173 @@
-{"type":"chart","title":"Example Line Chart","theme":"theme-green","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":"75","gridLines":false,"min":"","max":"","label":"Y-Axis Example Label","numTicks":"9"},"barThickness":0.35,"barHeight":25,"height":"375","xAxis":{"type":"date","hideAxis":false,"hideLabel":false,"hideTicks":false,"size":"77","tickRotation":"25","min":"","max":"","dataKey":"Date","label":"X-Axis Example Label","dateParseFormat":"%d/%m/%Y","dateDisplayFormat":"%d/%m/%Y"},"table":{"label":"Data Table","expanded":true,"limitHeight":false,"height":"","caption":"","download":true,"show":true},"orientation":"vertical","legend":{"behavior":"isolate","position":"right","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":""},"confidenceKeys":{},"visual":{"border":true,"accent":true,"background":true},"data":[{"Date":"1/15/2016","Data 1":"90","Data 2":"135","Data 3":"300","Data 4":"95","Data 5":"120","Data 6":"310"},{"Date":"2/15/2016","Data 1":"40","Data 2":"90","Data 3":"240","Data 4":"60","Data 5":"160","Data 6":"200"},{"Date":"3/15/2016","Data 1":"50","Data 2":"300","Data 3":"290","Data 4":"100","Data 5":"200","Data 6":"250"},{"Date":"4/15/2016","Data 1":"120","Data 2":"160","Data 3":"230","Data 4":"180","Data 5":"160","Data 6":"220"},{"Date":"5/15/2016","Data 1":"80","Data 2":"350","Data 3":"300","Data 4":"150","Data 5":"130","Data 6":"100"},{"Date":"6/15/2016","Data 1":"90","Data 2":"220","Data 3":"320","Data 4":"100","Data 5":"220","Data 6":"300"}],"visualizationType":"Line","series":[{"dataKey":"Data 1","type":"Bar"},{"dataKey":"Data 2","type":"Bar"},{"dataKey":"Data 3","type":"Bar"},{"dataKey":"Data 4","type":"Bar"},{"dataKey":"Data 5","type":"Bar"},{"dataKey":"Data 6","type":"Bar"}]}
+{
+  "type": "chart",
+  "title": "Example Line Chart",
+  "theme": "theme-green",
+  "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": "75",
+    "gridLines": false,
+    "min": "",
+    "max": "",
+    "label": "Y-Axis Example Label",
+    "numTicks": "9"
+  },
+  "barThickness": 0.35,
+  "barHeight": 25,
+  "height": "375",
+  "xAxis": {
+    "type": "date",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "77",
+    "tickRotation": "25",
+    "min": "",
+    "max": "",
+    "dataKey": "Date",
+    "label": "X-Axis Example Label",
+    "dateParseFormat": "%d/%m/%Y",
+    "dateDisplayFormat": "%d/%m/%Y"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "download": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "legend": {
+    "behavior": "isolate",
+    "position": "right",
+    "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": ""
+  },
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true
+  },
+  "data": [
+    {
+      "Date": "1/15/2016",
+      "Data 1": "90",
+      "Data 2": "135",
+      "Data 3": "300",
+      "Data 4": "95",
+      "Data 5": "120",
+      "Data 6": "310"
+    },
+    {
+      "Date": "2/15/2016",
+      "Data 1": "40",
+      "Data 2": "90",
+      "Data 3": "240",
+      "Data 4": "60",
+      "Data 5": "160",
+      "Data 6": "200"
+    },
+    {
+      "Date": "3/15/2016",
+      "Data 1": "50",
+      "Data 2": "300",
+      "Data 3": "290",
+      "Data 4": "100",
+      "Data 5": "200",
+      "Data 6": "250"
+    },
+    {
+      "Date": "4/15/2016",
+      "Data 1": "120",
+      "Data 2": "160",
+      "Data 3": "230",
+      "Data 4": "180",
+      "Data 5": "160",
+      "Data 6": "220"
+    },
+    {
+      "Date": "5/15/2016",
+      "Data 1": "80",
+      "Data 2": "350",
+      "Data 3": "300",
+      "Data 4": "150",
+      "Data 5": "130",
+      "Data 6": "100"
+    },
+    {
+      "Date": "6/15/2016",
+      "Data 1": "90",
+      "Data 2": "220",
+      "Data 3": "320",
+      "Data 4": "100",
+      "Data 5": "220",
+      "Data 6": "300"
+    }
+  ],
+  "visualizationType": "Line",
+  "series": [
+    {
+      "dataKey": "Data 1",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Data 2",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Data 3",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Data 4",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Data 5",
+      "type": "Bar"
+    },
+    {
+      "dataKey": "Data 6",
+      "type": "Bar"
+    }
+  ]
+}

package/index.html

@@ -34,18 +34,28 @@
   -->
 
   <!-- GENERIC CHART TYPES -->
+  <!-- <div class="react-container" data-config="/examples/private/datatable-issue.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/filters/filter-testing.json"></div> -->
   <!-- <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/line/line-chart.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/feature/forecasting/index.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/non-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-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> -->
   <!-- <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/combo/right-issues.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/new.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> -->
@@ -55,23 +65,19 @@
   <!-- 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-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-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> -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.23.4",
+  "version": "4.23.6",
   "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": "dcd395d76f70b2d113f2b4c6fe50a52522655cd1",
+  "gitHead": "aaed0388b487adfeb3e7e278b4ce74df09cbaade",
   "devDependencies": {
     "resize-observer-polyfill": "^1.5.1"
   }