@cdc/core 4.24.5 → 4.24.9-1

package/components/_stories/_mocks/bar-chart-suppressed.json

@@ -0,0 +1,474 @@
+{
+  "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": "",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": false,
+  "general": {
+    "showDownloadButton": false
+  },
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "preliminaryData": [
+    {
+      "type": "suppression",
+      "seriesKey": "",
+      "label": "Suppressed",
+      "column": "Data 2",
+      "value": "ABC",
+      "style": "",
+      "displayTooltip": true,
+      "displayLegend": true,
+      "displayTable": true,
+      "symbol": "Dagger",
+      "iconCode": "†",
+      "lineCode": ""
+    }
+  ],
+  "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": [],
+    "label": "Y-Axis Label Example"
+  },
+  "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",
+    "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,
+    "showSuppressedSymbol": true,
+    "showSuppressedLine": true,
+    "dataKey": "Date",
+    "label": "X-Axis Example Label",
+    "dateParseFormat": "%d/%m/%Y",
+    "dateDisplayFormat": "%d/%m/%Y",
+    "tickWidthMax": 91,
+    "padding": 6
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "indexLabel": "",
+    "download": true,
+    "showVertical": false,
+    "dateDisplayFormat": "",
+    "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",
+    "lineMode": false,
+    "verticalSorted": false,
+    "highlightOnHover": false,
+    "hideSuppressedLabels": false,
+    "seriesHighlight": [],
+    "position": "right",
+    "label": "Data Type"
+  },
+  "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": "qualitative-soft",
+  "isPaletteReversed": false,
+  "twoColor": {
+    "palette": "monochrome-1",
+    "isPaletteReversed": false
+  },
+  "labels": true,
+  "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
+    }
+  ],
+  "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": "ABC",
+      "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": "",
+      "Data 3": "120",
+      "Data 4": "150",
+      "Monthly-Goal": "140"
+    }
+  ],
+  "visualizationType": "Bar",
+  "filters": [],
+  "validated": 4.23,
+  "dynamicMarginTop": 0,
+  "version": "4.24.4"
+}

package/components/_stories/styles.scss

@@ -1,3 +1,4 @@
+@import '../../styles/base.scss';
 @import '../../styles/_variables';
 @import '../../styles/_mixins';
 @import '../../styles/_data-table';
@@ -6,4 +7,16 @@
 .visually-hidden {
   position: fixed;
   left: -10000px;
-}
+}
+
+.debug .editor-panel {
+  border: 2px dashed red !important;
+  background-color: rgba(255, 0, 0, 0.1);
+  padding: 5px;
+}
+
+.debug div[class*='type-'] {
+  border: 2px dashed green !important;
+  background-color: rgba(55, 255, 0, 0.1);
+  padding: 5px;
+}

package/components/createBarElement.jsx

@@ -1,8 +1,8 @@
 export default function createBarElement(props) {
-  const { config, index, id, className, background, borderColor, borderWidth, width, height, x, y, onMouseOver, onMouseLeave, onClick, tooltipHtml, tooltipId, styleOverrides, seriesHighlight } = props
+  const { config, index, id, className, background, borderColor, borderWidth, width, height, x, y, onMouseOver, onMouseLeave, onClick, tooltipHtml, tooltipId, styleOverrides, seriesHighlight, type } = props
 
-  const adjustedWidth = Math.max(0, width);
-  const adjustedHeight = Math.max(0, height);
+  const adjustedWidth = Math.max(0, width)
+  const adjustedHeight = Math.max(0, height)
 
   const isHorizontal = config.orientation === 'horizontal'
   const isRounded = config.barStyle === 'rounded'
@@ -79,7 +79,7 @@ export default function createBarElement(props) {
   }
 
   let path
-  if (index === undefined || index === null || !isRounded) {
+  if (index === undefined || index === null || !isRounded || type == 'axisBar') {
     path = nonRounded()
   } else {
     path = nonRounded()

package/components/inputs/InputSelect.tsx

@@ -3,7 +3,7 @@ import '../../styles/v2/components/input/index.scss'
 interface InputProps {
   label?
   value?
-  options: string[] | { [key: string]: string }
+  options: string[] | Record<string, any> | [any, string][]
   fieldName
   section?
   subsection?
@@ -17,11 +17,22 @@ const InputSelect = ({ label, value, options, fieldName, section = null, subsect
 
   if (Array.isArray(options)) {
     //Handle basic array
-    optionsJsx = options.map(optionName => (
-      <option value={optionName} key={optionName}>
-        {optionName}
-      </option>
-    ))
+    optionsJsx = options.map(option => {
+      if (typeof option === 'string') {
+        return (
+          <option value={option} key={option}>
+            {option}
+          </option>
+        )
+      } else {
+        const [value, name] = option
+        return (
+          <option value={value} key={name}>
+            {name}
+          </option>
+        )
+      }
+    })
   } else {
     //Handle object with value/name pairs
     optionsJsx = []

package/components/ui/Icon.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 
 import iconCaretUp from '../../assets/icon-caret-up.svg'
@@ -8,6 +7,7 @@ import iconCaretFilledDown from '../../assets/icon-caret-filled-down.svg'
 import iconChartBar from '../../assets/icon-chart-bar.svg'
 import iconChartLine from '../../assets/icon-chart-line.svg'
 import iconChartPie from '../../assets/icon-chart-pie.svg'
+import iconCheck from '../../assets/icon-check.svg'
 import iconClose from '../../assets/icon-close.svg'
 import iconCode from '../../assets/icon-code.svg'
 import iconDataBite from '../../assets/icon-databite.svg'
@@ -26,6 +26,7 @@ import iconUpload from '../../assets/icon-upload.svg'
 import iconWarningCircle from '../../assets/icon-warning-circle.svg'
 import iconWarningTriangle from '../../assets/icon-warning-triangle.svg'
 import iconGear from '../../assets/icon-gear.svg'
+import iconGearMulti from '../../assets/icon-gear-multi.svg'
 import iconTools from '../../assets/icon-tools.svg'
 import iconText from '../../assets/icon-filtered-text.svg'
 import iconDropdowns from '../../assets/icon-filter-dropdowns.svg'
@@ -45,6 +46,7 @@ const iconHash = {
   caretFilledDown: iconCaretFilledDown,
   chartBar: iconChartBar,
   chartLine: iconChartLine,
+  check: iconCheck,
   chartPie: iconChartPie,
   close: iconClose,
   code: iconCode,
@@ -64,20 +66,37 @@ const iconHash = {
   warningCircle: iconWarningCircle,
   warningTriangle: iconWarningTriangle,
   gear: iconGear,
+  gearMulti: iconGearMulti,
   tools: iconTools,
   plus: iconPlus,
   minus: iconMinus,
   'filtered-text': iconText,
-  'filter-dropdowns': iconDropdowns,
+  dashboardFilters: iconDropdowns,
   table: iconTable,
   sankey: iconSankey,
   rotateLeft: iconRotateLeft,
   command: iconCommand
 }
 
+export type IconType = keyof typeof iconHash
+
 export const ICON_TYPES = Object.keys(iconHash)
 
-const Icon = ({ display = '', base = undefined, alt = '', size = undefined, color = undefined, style = undefined, ...attributes }) => {
+type IconProps = {
+  /* Define the icon to display */
+  display: keyof typeof iconHash
+  /* Returns icon data as plain svg */
+  base?: boolean
+  /* Sets alt text for the icon */
+  alt: string
+  /* Override the width of the icon (scales height proportionally)*/
+  size?: number
+  /* Override the color of the icon */
+  color?: string
+  style?: string
+}
+
+const Icon: React.FC<IconProps> = ({ display = '', base = undefined, alt = '', size = undefined, color = undefined, style = undefined, ...attributes }) => {
   const IconObj = iconHash[display] || null
 
   const filteredAttrs = { ...attributes }
@@ -103,17 +122,4 @@ const Icon = ({ display = '', base = undefined, alt = '', size = undefined, colo
   )
 }
 
-Icon.propTypes = {
-  /* Define the icon to display */
-  display: PropTypes.oneOf(Object.keys(iconHash)),
-  /* Returns icon data as plain svg */
-  base: PropTypes.bool,
-  /* Sets alt text for the icon */
-  alt: PropTypes.string,
-  /* Override the width of the icon (scales height proportionally)*/
-  size: PropTypes.number,
-  /* Override the color of the icon */
-  color: PropTypes.string
-}
-
 export default Icon

package/components/ui/Title/Title.scss

@@ -87,14 +87,6 @@
   }
 }
 
-// add additional space below title if needed
-.map-title.cove-component__header,
-.type-chart .cove-component__header {
-  &:not(:empty) {
-    margin: 0 0 1rem 0 !important;
-  }
-}
-
 // fix sparkline bottom margin gap
 .type-sparkline.type-chart .cove-component__header {
   margin: 0px !important;

package/helpers/DataTransform.ts

@@ -149,8 +149,8 @@ export class DataTransform {
                 standardizedMapped[uniqueKey][key] = row[key]
               }
             })
-            description.valueKeysTallSupport.forEach(valueKey => {
-              standardizedMapped[uniqueKey][row[description.seriesKey] + '-' + valueKey] = row[valueKey]
+            description.valueKeysTallSupport.forEach((valueKey, i) => {
+              standardizedMapped[uniqueKey][i === 0 ? row[description.seriesKey] : (row[description.seriesKey] + '-' + valueKey)] = row[valueKey]
             })
           })