@cdc/chart 4.24.5 → 4.24.9

package/{examples/feature/line/line-chart.json → src/_stories/_mock/annotation_date-time_mock.json}

@@ -1,13 +1,55 @@
 {
+  "annotations": [
+    {
+      "text": "New Annotation",
+      "fontSize": 16,
+      "show": {
+        "desktop": true,
+        "tablet": true,
+        "mobile": true
+      },
+      "markerType": "arrow",
+      "connectorType": "line",
+      "colors": {
+        "label": "black",
+        "connector": "black",
+        "marker": "black"
+      },
+      "selected": true,
+      "anchor": {
+        "vertical": false,
+        "horizontal": false
+      },
+      "connectionType": "line",
+      "marker": "arrow",
+      "edit": {
+        "subject": true,
+        "label": true
+      },
+      "seriesKey": "Data 1",
+      "x": 531.2573384562507,
+      "y": 111.5,
+      "xKey": 1463295600000,
+      "yKey": "80",
+      "dx": -102.05048929710738,
+      "dy": 43,
+      "opacity": 100,
+      "savedDimensions": [
+        660.65,
+        344.546875
+      ],
+      "snapToNearestPoint": true
+    }
+  ],
   "type": "chart",
   "debugSvg": false,
   "chartMessage": {
     "noData": "No Data Available"
   },
-  "title": "Example Line Chart",
+  "title": "Example Line Chart with Region",
   "showTitle": true,
   "showDownloadMediaButton": false,
-  "theme": "theme-green",
+  "theme": "theme-cyan",
   "animate": false,
   "fontSize": "medium",
   "lineDatapointStyle": "hover",
@@ -44,7 +86,7 @@
     "tickLabelColor": "#333",
     "tickColor": "#333",
     "rightHideAxis": true,
-    "rightAxisSize": 0,
+    "rightAxisSize": 50,
     "rightLabel": "",
     "rightLabelOffsetSize": 0,
     "rightAxisLabelColor": "#333",
@@ -116,7 +158,7 @@
     "tickColor": "#333",
     "numTicks": "",
     "labelOffset": 65,
-    "axisPadding": 200,
+    "axisPadding": 0,
     "target": 0,
     "maxTickRotation": 0,
     "dataKey": "Date",
@@ -134,8 +176,8 @@
     "caption": "",
     "showDownloadUrl": false,
     "showDataTableLink": true,
-    "indexLabel": "",
-    "download": false,
+    "indexLabel": "Data Group",
+    "download": true,
     "showVertical": false,
     "dateDisplayFormat": "",
     "show": true
@@ -147,7 +189,7 @@
     "hide": false,
     "behavior": "isolate",
     "axisAlign": true,
-    "singleRow": true,
+    "singleRow": false,
     "colorCode": "",
     "reverseLabelOrder": false,
     "description": "",
@@ -160,7 +202,7 @@
     "verticalSorted": false,
     "highlightOnHover": false,
     "seriesHighlight": [],
-    "position": "bottom",
+    "position": "right",
     "label": "Type of Data"
   },
   "brush": {
@@ -168,37 +210,37 @@
     "data": [
       {
         "Date": "1/15/2016",
-        "Data 1": "",
-        "Data 2": "1350",
+        "Data 1": "90",
+        "Data 2": "135",
         "Data 3": "300",
-        "Data 4": "950",
-        "Data 5": "1200",
-        "Data 6": "3100"
+        "Data 4": "95",
+        "Data 5": "120",
+        "Data 6": "310"
       },
       {
         "Date": "2/15/2016",
         "Data 1": "40",
-        "Data 2": "900",
+        "Data 2": "90",
         "Data 3": "240",
         "Data 4": "60",
-        "Data 5": "1600",
-        "Data 6": "2000"
+        "Data 5": "160",
+        "Data 6": "200"
       },
       {
         "Date": "3/15/2016",
         "Data 1": "50",
         "Data 2": "300",
-        "Data 3": "2900",
+        "Data 3": "290",
         "Data 4": "100",
-        "Data 5": "2000",
+        "Data 5": "200",
         "Data 6": "250"
       },
       {
         "Date": "4/15/2016",
-        "Data 1": "",
+        "Data 1": "120",
         "Data 2": "160",
         "Data 3": "230",
-        "Data 4": "1800",
+        "Data 4": "180",
         "Data 5": "160",
         "Data 6": "220"
       },
@@ -221,7 +263,9 @@
         "Data 6": "300"
       }
     ],
-    "active": false
+    "active": false,
+    "pattern_id": "brush_pattern",
+    "accent_color": "#ddd"
   },
   "exclusions": {
     "active": false,
@@ -257,37 +301,7 @@
   "series": [
     {
       "dataKey": "Data 1",
-      "type": "Line",
-      "tooltip": true,
-      "axis": "Left"
-    },
-    {
-      "dataKey": "Data 2",
-      "type": "Line",
-      "tooltip": true,
-      "axis": "Left"
-    },
-    {
-      "dataKey": "Data 3",
-      "type": "Line",
-      "tooltip": true,
-      "axis": "Left"
-    },
-    {
-      "dataKey": "Data 4",
-      "type": "Line",
-      "tooltip": true,
-      "axis": "Left"
-    },
-    {
-      "dataKey": "Data 5",
-      "type": "Line",
-      "tooltip": true,
-      "axis": "Left"
-    },
-    {
-      "dataKey": "Data 6",
-      "type": "Line",
+      "type": "Bar",
       "tooltip": true,
       "axis": "Left"
     }
@@ -313,7 +327,7 @@
     },
     "estimateField": "",
     "estimateRadius": "",
-    "shape": "square",
+    "shape": "",
     "rowHeight": 20,
     "description": {
       "show": true,
@@ -326,8 +340,8 @@
       "location": 100
     },
     "radius": {
-      "min": 2,
-      "max": 10,
+      "min": 1,
+      "max": 8,
       "scalingColumn": ""
     },
     "regression": {
@@ -339,7 +353,11 @@
     "rightWidthOffset": 0,
     "showZeroLine": false,
     "leftLabel": "",
-    "rightLabel": ""
+    "rightLabel": "",
+    "hideDateCategoryCol": false,
+    "width": "auto",
+    "lowerCiField": "",
+    "upperCiField": ""
   },
   "area": {
     "isStacked": false
@@ -386,41 +404,42 @@
     },
     "data": []
   },
+  "showChartBrush": false,
   "height": "375",
   "data": [
     {
       "Date": "1/15/2016",
-      "Data 1": "foo",
-      "Data 2": "1350",
+      "Data 1": "90",
+      "Data 2": "135",
       "Data 3": "300",
-      "Data 4": "950",
-      "Data 5": "1200",
-      "Data 6": "3100"
+      "Data 4": "95",
+      "Data 5": "120",
+      "Data 6": "310"
     },
     {
       "Date": "2/15/2016",
       "Data 1": "40",
-      "Data 2": "900",
+      "Data 2": "90",
       "Data 3": "240",
       "Data 4": "60",
-      "Data 5": "1600",
-      "Data 6": "2000"
+      "Data 5": "160",
+      "Data 6": "200"
     },
     {
       "Date": "3/15/2016",
       "Data 1": "50",
       "Data 2": "300",
-      "Data 3": "2900",
+      "Data 3": "290",
       "Data 4": "100",
-      "Data 5": "2000",
+      "Data 5": "200",
       "Data 6": "250"
     },
     {
       "Date": "4/15/2016",
-      "Data 1": "",
+      "Data 1": "120",
       "Data 2": "160",
       "Data 3": "230",
-      "Data 4": "1800",
+      "Data 4": "180",
       "Data 5": "160",
       "Data 6": "220"
     },
@@ -444,6 +463,68 @@
     }
   ],
   "visualizationType": "Line",
+  "regions": [],
   "validated": "4.24.3",
-  "dynamicMarginTop": 0
+  "formattedData": [
+    {
+      "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"
+    }
+  ],
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "dynamicMarginTop": 0,
+  "version": "4.24.3"
 }

package/src/_stories/_mock/legend.gradient_mock.json

@@ -0,0 +1,236 @@
+{
+  "annotations": [],
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": { "noData": "No Data Available" },
+  "title": "Combo Bar-Line Chart",
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "theme": "theme-purple",
+  "animate": false,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
+  "barHasBorder": "false",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "flat",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": false,
+  "general": { "annotationDropdownText": "Annotations", "showDownloadButton": false, "showMissingDataLabel": true, "showSuppressedSymbol": true, "showZeroValueDataLabel": true },
+  "padding": { "left": 5, "right": 5 },
+  "preliminaryData": [],
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "68",
+    "gridLines": true,
+    "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,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "anchors": [],
+    "shoMissingDataLabel": true,
+    "showMissingDataLine": true,
+    "categories": [],
+    "label": "Y-Axis Label Example",
+    "maxValue": 1000
+  },
+  "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" }
+  },
+  "topAxis": { "hasLine": false },
+  "isLegendValue": false,
+  "barThickness": 0.35,
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": { "vertical": 300, "horizontal": 750 },
+  "xAxis": {
+    "sortDates": false,
+    "anchors": [],
+    "type": "date-time",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "78",
+    "tickRotation": "25",
+    "min": "",
+    "max": "",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 65,
+    "axisPadding": 0,
+    "target": 0,
+    "maxTickRotation": 0,
+    "dataKey": "Date",
+    "label": "X-Axis Example Label",
+    "dateParseFormat": "%m/%d/%Y",
+    "dateDisplayFormat": "%m/%d/%Y",
+    "tickWidthMax": 91,
+    "padding": 6,
+    "axisBBox": 164.5282745361328
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "indexLabel": "",
+    "download": true,
+    "showVertical": false,
+    "dateDisplayFormat": "",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "color": "pinkpurple",
+  "columns": {},
+  "legend": {
+    "hide": false,
+    "behavior": "highlight",
+    "axisAlign": true,
+    "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": "",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "hideSuppressedLabels": false,
+    "seriesHighlight": [],
+    "style": "gradient",
+    "subStyle": "smooth",
+    "hasBorder": true,
+    "tickRotation": "0",
+    "position": "top"
+  },
+  "brush": {
+    "height": 25,
+    "active": false,
+    "data": [
+      { "Date": "1/15/2016", "Data 1": "1000", "Data 2": "110", "Data 3": "100", "Data 4": "90", "Monthly-Goal": "100" },
+      { "Date": "2/15/2016", "Data 1": "100", "Data 2": "110", "Data 3": "100", "Data 4": "100", "Monthly-Goal": "100" },
+      { "Date": "3/15/2016", "Data 1": "80", "Data 2": "90", "Data 3": "100", "Data 4": "120", "Monthly-Goal": "110" },
+      { "Date": "4/15/2016", "Data 1": "80", "Data 2": "90", "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": "110", "Data 2": "140", "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" }
+    ]
+  },
+  "exclusions": { "active": false, "keys": [] },
+  "palette": "sequential-blue",
+  "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, "verticalHoverLine": false, "horizontalHoverLine": false },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    { "dataKey": "Data 2", "type": "Bar", "axis": "Left", "tooltip": true },
+    { "dataKey": "Data 1", "type": "Bar", "axis": "Left", "tooltip": true },
+    { "dataKey": "Data 3", "type": "Bar", "axis": "Left", "tooltip": true }
+  ],
+  "tooltips": { "opacity": 90, "singleSeries": false, "dateDisplayFormat": "" },
+  "forestPlot": {
+    "startAt": 0,
+    "colors": { "line": "", "shape": "" },
+    "lineOfNoEffect": { "show": true },
+    "type": "",
+    "pooledResult": { "diamondHeight": 5, "column": "" },
+    "estimateField": "",
+    "estimateRadius": "",
+    "shape": "",
+    "rowHeight": 20,
+    "description": { "show": true, "text": "description", "location": 0 },
+    "result": { "show": true, "text": "result", "location": 100 },
+    "radius": { "min": 1, "max": 8, "scalingColumn": "" },
+    "regression": { "lower": 0, "upper": 0, "estimateField": 0 },
+    "leftWidthOffset": 0,
+    "rightWidthOffset": 0,
+    "showZeroLine": false,
+    "leftLabel": "",
+    "rightLabel": "",
+    "hideDateCategoryCol": false
+  },
+  "area": { "isStacked": false },
+  "sankey": {
+    "title": { "defaultColor": "black" },
+    "iterations": 1,
+    "rxValue": 0.9,
+    "overallSize": { "width": 900, "height": 700 },
+    "margin": { "margin_y": 25, "margin_x": 0 },
+    "nodeSize": { "nodeWidth": 26, "nodeHeight": 40 },
+    "nodePadding": 55,
+    "nodeFontColor": "black",
+    "nodeColor": { "default": "#ff8500", "inactive": "#808080" },
+    "linkColor": { "default": "#ffc900", "inactive": "#D3D3D3" },
+    "opacity": { "nodeOpacityDefault": 1, "nodeOpacityInactive": 0.1, "LinkOpacityDefault": 1, "LinkOpacityInactive": 0.1 },
+    "storyNodeFontColor": "#006778",
+    "storyNodeText": [],
+    "nodeValueStyle": { "textBefore": "(", "textAfter": ")" },
+    "data": []
+  },
+  "suppressedData": [],
+  "height": "332",
+  "data": [
+    { "Date": "1/15/2016", "Data 1": "$1,000", "Data 2": "110", "Data 3": "100", "Data 4": "90", "Monthly-Goal": "100" },
+    { "Date": "2/15/2016", "Data 1": "100", "Data 2": "110", "Data 3": "100", "Data 4": "100", "Monthly-Goal": "100" },
+    { "Date": "3/15/2016", "Data 1": "80", "Data 2": "90", "Data 3": "100", "Data 4": "120", "Monthly-Goal": "110" },
+    { "Date": "4/15/2016", "Data 1": "80", "Data 2": "90", "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": "110", "Data 2": "140", "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": "Bar",
+  "filters": [],
+  "validated": 4.23,
+  "dynamicMarginTop": 0,
+  "version": "4.24.9"
+}