@cdc/chart 4.23.1 → 4.23.2

package/examples/Barchart_with_negative.json

@@ -0,0 +1,34 @@
+[
+  {
+    "Category": "One",
+    "Values": 888
+  },
+  {
+    "Category": "Two",
+    "Values": 400
+  },
+  {
+    "Category": "Three",
+    "Values": -100
+  },
+  {
+    "Category": "Four",
+    "Values": 500
+  },
+  {
+    "Category": "Five",
+    "Values": 700
+  },
+  {
+    "Category": "Six",
+    "Values": -1000
+  },
+  {
+    "Category": "Seven",
+    "Values": 300
+  },
+  {
+    "Category": "Eight",
+    "Values": -500
+  }
+]

package/examples/box-plot.json

@@ -40,7 +40,6 @@
     "numTicks": "",
     "label": "Observations"
   },
-  "boxplot": [],
   "topAxis": {
     "hasLine": false
   },
@@ -80,6 +79,7 @@
     "colorCode": "",
     "reverseLabelOrder": false,
     "description": "",
+    "hide": true,
     "dynamicLegend": false,
     "dynamicLegendDefaultText": "Show All",
     "dynamicLegendItemLimit": 5,
@@ -111,7 +111,7 @@
   "dataDescription": {
     "horizontal": false,
     "series": false,
-    "singleRow": false,
+    "singleRow": true,
     "xKey": "Group_Category",
     "valueKey": "Value"
   },

package/examples/dynamic-legends.json

@@ -33,7 +33,7 @@
     "behavior": "isolate",
     "position": "right",
     "label": "Type of Data",
-    "dynamicLegend": true
+    "dynamicLegend": false
   },
   "palette": "qualitative-bold",
   "labels": false,

package/examples/example-bar-chart-nonnumeric.json

@@ -0,0 +1,36 @@
+{
+  "type": "chart",
+  "title": "Example Bar Chart",
+  "theme": "theme-blue",
+  "fontSize": "medium",
+  "height": 300,
+  "padding": { "left": 5, "right": 5 },
+  "yAxis": { "size": "76", "gridLines": false, "label": "Y Axis Example Label" },
+  "barThickness": "0.6",
+  "xAxis": { "size": "59", "tickRotation": 0, "dataKey": "Date", "label": "X Axis Example Label" },
+  "table": { "label": "Data Type by Date", "expanded": true },
+  "legend": { "behavior": "isolate", "position": "right", "label": "Type of Data" },
+  "palette": "qualitative-bold",
+  "labels": false,
+  "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": "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" },
+    { "Date": "5/15/2016", "Data 1": "", "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": "Bar",
+  "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" }
+  ],
+  "description": "This example shows a bar chart created in the visualization editor in WCMS",
+  "dataCutoff": "0"
+}

package/examples/example-bar-chart.json

@@ -0,0 +1,33 @@
+{
+  "type": "chart",
+  "title": "Example Bar Chart",
+  "theme": "theme-blue",
+  "fontSize": "medium",
+  "height": 300,
+  "padding": { "left": 5, "right": 5 },
+  "yAxis": { "size": "76", "gridLines": false, "label": "Y Axis Example Label" },
+  "barThickness": "0.6",
+  "xAxis": { "size": "59", "tickRotation": 0, "dataKey": "Date", "label": "X Axis Example Label" },
+  "table": { "label": "Data Type by Date", "expanded": true },
+  "legend": { "behavior": "isolate", "position": "right", "label": "Type of Data" },
+  "palette": "qualitative-bold",
+  "labels": false,
+  "dataFormat": { "suffix": " units" },
+  "confidenceKeys": {},
+  "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": "Bar",
+  "series": [
+    { "dataKey": "Data 1", "type": "Bar" },
+    { "dataKey": "Data 2", "type": "Bar" },
+    { "dataKey": "Data 3", "type": "Bar" }
+  ],
+  "description": "This example shows a bar chart created in the visualization editor in WCMS",
+  "dataCutoff": "0"
+}

package/examples/example-combo-bar-nonnumeric.json

@@ -0,0 +1,105 @@
+{
+  "type": "chart",
+  "title": "Combo Bar-Line Chart",
+  "theme": "theme-indigo",
+  "animate": false,
+  "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,
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 50,
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "isLegendValue": false,
+    "numTicks": "",
+    "label": "Y-Axis Label Example"
+  },
+  "topAxis": { "hasLine": false },
+  "barThickness": "0.5",
+  "barHeight": 25,
+  "height": "332",
+  "xAxis": {
+    "type": "date",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "78",
+    "tickRotation": "25",
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "isLegendValue": false,
+    "numTicks": "",
+    "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": "highlight",
+    "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": "Data Type"
+  },
+  "exclusions": { "active": false, "keys": [] },
+  "palette": "qualitative2",
+  "isPaletteReversed": false,
+  "labels": false,
+  "dataFormat": { "commas": false, "prefix": "", "suffix": "" },
+  "confidenceKeys": {},
+  "visual": { "border": true, "accent": true, "background": true },
+  "data": [
+    { "Date": "1/15/2016", "Data 1": "N/A", "Data 2": "110", "Data 3": "100", "Data 4": "90", "Monthly-Goal": "100" },
+    { "Date": "2/15/2016", "Data 1": "100", "Data 2": "goop", "Data 3": "100", "Data 4": "100", "Monthly-Goal": "100" },
+    { "Date": "3/15/2016", "Data 1": "", "Data 2": "90", "Data 3": "100.5", "Data 4": "120", "Monthly-Goal": "110" },
+    { "Date": "4/15/2016", "Data 1": "80", "Data 2": "2,00", "Data 3": "110", "Data 4": "120", "Monthly-Goal": "110" },
+    { "Date": "5/15/2016", "Data 1": "70", "Data 2": "90", "Data 3": "110", "Data 4": "130", "Monthly-Goal": "120" },
+    { "Date": "6/15/2016", "Data 1": "100", "Data 2": "120", "Data 3": "120", "Data 4": "130", "Monthly-Goal": "120" },
+    { "Date": "7/15/2016", "Data 1": "zip", "Data 2": null, "Data 3": "120", "Data 4": "130", "Monthly-Goal": "130" },
+    { "Date": "8/15/2016", "Data 1": "110", "Data 2": "130", "Data 3": "120", "Data 4": "140", "Monthly-Goal": "130" },
+    { "Date": "9/15/2016", "Data 1": "120", "Data 2": "130", "Data 3": "120", "Data 4": "150", "Monthly-Goal": "140" }
+  ],
+  "visualizationType": "Combo",
+  "series": [
+    { "dataKey": "Data 1", "type": "Bar" },
+    { "dataKey": "Data 2", "type": "Bar" },
+    { "dataKey": "Data 3", "type": "Bar" },
+    { "dataKey": "Data 4", "type": "Bar" },
+    { "dataKey": "Monthly-Goal", "type": "dashed-sm", "axis": "Left" }
+  ],
+  "description": "Note: There is an option to make the line dotted as demonstrated above"
+}

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

@@ -39,7 +39,7 @@
     {
       "Location": "Vehicle",
       "Group A": "100",
-      "Group B": "150",
+      "Group B": "-150",
       "Group C": "90"
     },
     {

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

@@ -153,11 +153,11 @@
     {
       "Date": "6/15/2016",
       "Data 1": "9000",
-      "Data 2": "220",
+      "Data 2": "-2200",
       "Data 3": "320",
       "Data 4": "100",
       "Data 5": "220",
-      "Data 6": "3000"
+      "Data 6": "-3000"
     }
   ],
   "visualizationType": "Bar",

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

@@ -1,43 +1,80 @@
 {
   "type": "chart",
   "title": "Example Paired Bar Chart",
-  "theme": "theme-slate",
+  "theme": "theme-pink",
+  "animate": false,
   "fontSize": "small",
   "lineDatapointStyle": "hover",
-  "barHasBorder": "false",
+  "barHasBorder": "true",
   "isLollipopChart": false,
   "lollipopShape": "circle",
   "lollipopColorStyle": "two-tone",
   "visualizationSubType": null,
+  "barStyle": "",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
   "padding": {
     "left": 5,
     "right": 5
   },
   "yAxis": {
-    "hideAxis": true,
+    "hideAxis": false,
+    "displayNumbersOnBar": true,
     "hideLabel": false,
     "hideTicks": false,
-    "size": "75",
+    "size": "86",
     "gridLines": false,
-    "label": "Value Axis",
-    "numTicks": "6"
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "rightHideAxis": true,
+    "rightAxisSize": 50,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#333",
+    "rightAxisTickLabelColor": "#333",
+    "rightAxisTickColor": "#333",
+    "numTicks": "4",
+    "label": "Value Axisd"
+  },
+  "boxplot": [],
+  "topAxis": {
+    "hasLine": false
   },
+  "isLegendValue": false,
   "barThickness": 0.35,
-  "height": "400",
+  "barHeight": "25",
+  "barSpace": "15",
+  "heights": {
+    "vertical": 300,
+    "horizontal": 287
+  },
   "xAxis": {
     "type": "categorical",
     "hideAxis": false,
     "hideLabel": false,
     "hideTicks": false,
-    "size": "56",
+    "size": "79",
     "tickRotation": "0",
+    "min": "",
     "max": "15000",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": "87",
     "dataKey": "Age Group",
     "label": "Age Group"
   },
   "table": {
     "label": "Data Table",
     "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
     "show": true,
     "indexLabel": "Region"
   },
@@ -45,7 +82,15 @@
   "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,
     "label": "Region "
   },
@@ -53,14 +98,22 @@
     "active": false,
     "keys": []
   },
-  "palette": "qualitative-soft",
+  "palette": "qualitative1",
   "isPaletteReversed": false,
   "labels": false,
   "dataFormat": {
     "commas": true,
-    "suffix": " per 100k"
+    "prefix": "",
+    "suffix": " per 100k",
+    "abbreviated": false
   },
   "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true
+  },
+  "height": "400",
   "data": [
     {
       "Region": "West Coast",
@@ -115,7 +168,7 @@
     {
       "Region": "East Coast",
       "Age Group": "35-44",
-      "Cases Per 100K": "7478"
+      "Cases Per 100K": "27478"
     },
     {
       "Region": "East Coast",
@@ -191,6 +244,5 @@
       "type": "Bar"
     }
   ],
-  "filters": [],
-  "barHeight": "23"
+  "filters": []
 }

package/examples/line-chart-nonnumeric.json

@@ -0,0 +1,32 @@
+{
+  "type": "chart",
+  "title": "Example Line Chart",
+  "theme": "theme-green",
+  "fontSize": "medium",
+  "height": "375",
+  "padding": { "left": 5, "right": 5 },
+  "yAxis": { "size": "75", "gridLines": false, "label": "Y-Axis Example Label", "numTicks": "9" },
+  "barThickness": 0.35,
+  "xAxis": { "size": "77", "tickRotation": "25", "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 },
+  "legend": { "behavior": "isolate", "position": "right", "label": "Type of Data" },
+  "palette": "qualitative-bold",
+  "labels": false,
+  "dataFormat": {},
+  "confidenceKeys": {},
+  "data": [
+    { "Date": "1/15/2016", "Data 1": "8", "Data 2": "N/A", "Data 3": "1,300", "Data 4": "95", "Data 5": "120", "Data 6": "310" },
+    { "Date": "2/15/2016", "Data 1": "dddd", "Data 2": "9", "Data 3": "240", "Data 4": "60", "Data 5": "160", "Data 6": "200" },
+    { "Date": "3/15/2016", "Data 1": "boo", "Data 2": "5", "Data 3": "290", "Data 4": "100", "Data 5": "200", "Data 6": "250" },
+    { "Date": "4/15/2016", "Data 1": "44", "Data 2": "NA", "Data 3": "230", "Data 4": "180", "Data 5": "160", "Data 6": "220" },
+    { "Date": "5/15/2016", "Data 1": "12", "Data 2": "350", "Data 3": "300", "Data 4": "150", "Data 5": "130", "Data 6": "100" }
+  ],
+  "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" }
+  ]
+}

package/examples/line-chart.json

@@ -1,76 +1,34 @@
 {
   "type": "chart",
-  "title": "Example Spark Line",
-  "theme": "theme-blue",
+  "title": "Example Line Chart",
+  "theme": "theme-green",
   "fontSize": "medium",
   "height": "375",
-  "compact": true,
-  "padding": {
-    "left": 5,
-    "right": 5
-  },
-  "yAxis": {
-    "size": "75",
-    "gridLines": false,
-    "label": "Y-Axis Example Label",
-    "numTicks": "9"
-  },
+  "padding": { "left": 5, "right": 5 },
+  "yAxis": { "size": "75", "gridLines": false, "label": "Y-Axis Example Label", "numTicks": "9" },
   "barThickness": 0.35,
-  "xAxis": {
-    "size": "77",
-    "tickRotation": "25",
-    "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
-  },
-  "legend": {
-    "behavior": "isolate",
-    "position": "right",
-    "label": "Type of Data"
-  },
+  "xAxis": { "size": "77", "tickRotation": "25", "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 },
+  "legend": { "behavior": "isolate", "position": "right", "label": "Type of Data" },
   "palette": "qualitative-bold",
   "labels": false,
   "dataFormat": {},
   "confidenceKeys": {},
   "data": [
-    {
-      "Date": "1/15/2016",
-      "Data 1": "0"
-    },
-    {
-      "Date": "2/15/2016",
-      "Data 1": "25"
-    },
-    {
-      "Date": "3/15/2016",
-      "Data 1": "50"
-    },
-    {
-      "Date": "4/15/2016",
-      "Data 1": "75"
-    },
-    {
-      "Date": "5/15/2016",
-      "Data 1": "100"
-    },
-    {
-      "Date": "6/15/2016",
-      "Data 1": "50"
-    }
+    { "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": "Spark Line",
+  "visualizationType": "Line",
   "series": [
-    {
-      "dataKey": "Data 1",
-      "type": "Bar"
-    }
-  ],
-  "description": "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups."
+    { "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/examples/newdata.json

@@ -45,7 +45,7 @@
   },
   {
     "Group_Category": "category three",
-    "Value": "40"
+    "Value": "46"
   },
   {
     "Group_Category": "category four",