@cdc/chart 4.23.1 → 4.23.3

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,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": "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" },
+    { "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-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/example-sparkline.json

@@ -0,0 +1,76 @@
+{
+  "type": "chart",
+  "title": "Example Spark Line",
+  "theme": "theme-blue",
+  "fontSize": "medium",
+  "height": "375",
+  "compact": true,
+  "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": "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"
+    }
+  ],
+  "visualizationType": "Spark 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."
+}

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

@@ -5,10 +5,7 @@
   "fontSize": "small",
   "lineDatapointStyle": "hover",
   "barHasBorder": "false",
-  "padding": {
-    "left": 5,
-    "right": 5
-  },
+  "padding": { "left": 5, "right": 5 },
   "yAxis": {
     "size": 50,
     "gridLines": false,
@@ -18,124 +15,40 @@
     "fontSize": "small",
     "lineDatapointStyle": "hover",
     "barHasBorder": "false",
-    "padding": {
-      "left": 5,
-      "right": 5
-    },
-    "yAxis": {
-      "size": 50,
-      "gridLines": false,
-      "label": "X-Axis Example Label",
-      "numTicks": "10"
-    },
+    "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": []
-    },
+    "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"
-      }
+      { "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"
-      }
+      { "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"
-      },
+      "seriesLabels": { "Vehicle": "Vehicle", "Home": "Home", "Work": "Work", "Office": "Office" },
       "seriesLabelsAll": ["Vehicle", "Home", "Work", "Office"],
-      "originalXAxis": {
-        "type": "categorical",
-        "size": "0",
-        "tickRotation": 0,
-        "dataKey": "Group",
-        "label": ""
-      },
+      "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": ""
-      },
+      "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": ""
@@ -147,81 +60,27 @@
   },
   "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": "Location"
-  },
-  "exclusions": {
-    "active": false,
-    "keys": []
-  },
+  "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": "Location" },
+  "exclusions": { "active": false, "keys": [] },
   "palette": "qualitative-soft",
   "labels": false,
   "dataFormat": {},
   "confidenceKeys": {},
   "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"
-    }
+    { "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",
   "visualizationSubType": "horizontal",
   "series": [
-    {
-      "dataKey": "Vehicle",
-      "type": "Bar"
-    },
-    {
-      "dataKey": "Home",
-      "type": "Bar"
-    },
-    {
-      "dataKey": "Work",
-      "type": "Bar"
-    },
-    {
-      "dataKey": "Office",
-      "type": "Bar"
-    }
+    { "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",
   "barPadding": 40,

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-confidence.json

@@ -0,0 +1 @@
+{"type":"chart","title":"Bar Chart with Confidence Intervals","theme":"theme-green","animate":false,"fontSize":"medium","lineDatapointStyle":"hover","barHasBorder":"false","isLollipopChart":false,"lollipopShape":"circle","lollipopColorStyle":"two-tone","visualizationSubType":"regular","barStyle":"rounded","roundingStyle":"standard","tipRounding":"top","padding":{"left":5,"right":5},"yAxis":{"hideAxis":false,"displayNumbersOnBar":false,"hideLabel":false,"hideTicks":false,"size":"75","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 Example Label"},"topAxis":{"hasLine":false},"barThickness":0.35,"barHeight":25,"height":300,"xAxis":{"type":"categorical","hideAxis":false,"hideLabel":false,"hideTicks":false,"size":"50","tickRotation":0,"min":"","max":"","labelColor":"#333","tickLabelColor":"#333","tickColor":"#333","isLegendValue":false,"numTicks":"","dataKey":"Date","label":"X-Axis Sample Label"},"table":{"label":"Data Table","expanded":true,"limitHeight":false,"height":"","caption":"","show":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"},"exclusions":{"active":false,"keys":[]},"palette":"qualitative-bold","isPaletteReversed":false,"labels":false,"dataFormat":{"commas":false,"prefix":"","suffix":""},"confidenceKeys":{"upper":"high","lower":"low"},"visual":{"border":true,"accent":true,"background":true},"data":[{"Data":"data1","Date":"1/12/2016","Value":"212","high":"220","low":"200"},{"Data":"data2","Date":"1/13/2016","Value":"213","high":"230","low":"205"},{"Data":"data3","Date":"1/14/2016","Value":"214","high":"240","low":"210"}],"visualizationType":"Bar","series":[{"dataKey":"Value","type":"Bar"}]}