@cdc/chart 4.24.5 → 4.24.7

package/src/_stories/_mock/line_chart_two_points_regression_test.json

@@ -0,0 +1,127 @@
+{
+  "type": "chart",
+  "visualizationType": "Line",
+  "xAxis": {
+    "dataKey": "STATE"
+  },
+  "series": [
+    {
+      "dataKey": "Rate"
+    }
+  ],
+  "filters": [
+    {
+      "values": ["Home", "School", "Vehicle", "Work"],
+      "active": "Home",
+      "order": "asc",
+      "columnName": "Location",
+      "setByQueryParameter": "location"
+    }
+  ],
+  "data": [
+    {
+      "STATE": "AL",
+      "Rate": "10",
+      "Location": "Home",
+      "URL": "https://www.cdc.gov/",
+      "Intensity Level": "Low",
+      "Trajectory": "Increasing"
+    },
+    {
+      "STATE": "AK",
+      "Rate": "12",
+      "Location": "Home",
+      "URL": "https://www.cdc.gov/",
+      "Intensity Level": "Low",
+      "Trajectory": "Increasing"
+    },
+    {
+      "STATE": "FL",
+      "Rate": "10",
+      "Location": "Work",
+      "URL": "https://www.cdc.gov/",
+      "Intensity Level": "Low",
+      "Trajectory": "Increasing"
+    },
+    {
+      "STATE": "GA",
+      "Rate": "12",
+      "Location": "Work",
+      "URL": "https://www.cdc.gov/",
+      "Intensity Level": "Low",
+      "Trajectory": "Increasing"
+    },
+    {
+      "STATE": "AL",
+      "Rate": "10",
+      "Location": "Work",
+      "URL": "https://www.cdc.gov/",
+      "Intensity Level": "Low",
+      "Trajectory": "Increasing"
+    },
+    {
+      "STATE": "AK",
+      "Rate": "12",
+      "Location": "Work",
+      "URL": "https://www.cdc.gov/",
+      "Intensity Level": "Low",
+      "Trajectory": "Increasing"
+    }
+  ],
+  "dataFileName": "hex-data.csv",
+  "dataFileSourceType": "file",
+  "formattedData": [
+    {
+      "STATE": "AL",
+      "Rate": "10",
+      "Location": "Home",
+      "URL": "https://www.cdc.gov/",
+      "Intensity Level": "Low",
+      "Trajectory": "Increasing"
+    },
+    {
+      "STATE": "AK",
+      "Rate": "12",
+      "Location": "Home",
+      "URL": "https://www.cdc.gov/",
+      "Intensity Level": "Low",
+      "Trajectory": "Increasing"
+    },
+    {
+      "STATE": "AL",
+      "Rate": "10",
+      "Location": "Work",
+      "URL": "https://www.cdc.gov/",
+      "Intensity Level": "Low",
+      "Trajectory": "Increasing"
+    },
+    {
+      "STATE": "AK",
+      "Rate": "12",
+      "Location": "Work",
+      "URL": "https://www.cdc.gov/",
+      "Intensity Level": "Low",
+      "Trajectory": "Increasing"
+    },
+    {
+      "STATE": "FL",
+      "Rate": "10",
+      "Location": "Work",
+      "URL": "https://www.cdc.gov/",
+      "Intensity Level": "Low",
+      "Trajectory": "Increasing"
+    },
+    {
+      "STATE": "GA",
+      "Rate": "12",
+      "Location": "Work",
+      "URL": "https://www.cdc.gov/",
+      "Intensity Level": "Low",
+      "Trajectory": "Increasing"
+    }
+  ],
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  }
+}

package/src/_stories/_mock/lollipop.json

@@ -0,0 +1,171 @@
+{
+  "type": "chart",
+  "title": "Lollipop Style Horizontal Bar Chart - Number of Spills Occurring in the Home",
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "theme": "theme-blue",
+  "animate": true,
+  "fontSize": "medium",
+  "lineDatapointStyle": "hover",
+  "barHasBorder": "false",
+  "isLollipopChart": true,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "horizontal",
+  "barStyle": "",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": false,
+  "general": { "showDownloadButton": false },
+  "padding": { "left": 5, "right": 5 },
+  "yAxis": {
+    "hideAxis": true,
+    "displayNumbersOnBar": true,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "13",
+    "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": "9",
+    "axisPadding": 0,
+    "tickRotation": 0,
+    "anchors": [],
+    "type": "chart",
+    "title": "Lollipop Style Horizontal Bar Chart",
+    "theme": "theme-blue",
+    "fontSize": "medium",
+    "lineDatapointStyle": "hover",
+    "barHasBorder": "false",
+    "isLollipopChart": false,
+    "lollipopShape": "circle",
+    "lollipopColorStyle": "two-tone",
+    "visualizationSubType": "horizontal",
+    "padding": { "left": 5, "right": 5 },
+    "yAxis": { "size": 50, "gridLines": false },
+    "barThickness": 0.35,
+    "height": 260,
+    "xAxis": { "type": "categorical", "size": 75, "tickRotation": 0, "dataKey": "Vehicle" },
+    "table": { "label": "Data Table", "expanded": true, "show": true },
+    "legend": { "behavior": "isolate", "position": "right" },
+    "exclusions": { "active": false, "keys": [] },
+    "palette": "qualitative-bold",
+    "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" }
+    ],
+    "dataFileName": "CSV_Source_Example_for_Horizontal_Bar_viz-cdcwp1619811744363.csv",
+    "dataFileSourceType": "file",
+    "visualizationType": "Bar",
+    "runtime": {
+      "seriesLabels": { "Vehicle": "Vehicle" },
+      "seriesLabelsAll": ["Vehicle"],
+      "originalXAxis": { "type": "categorical", "size": 75, "tickRotation": 0, "dataKey": "Vehicle" },
+      "seriesKeys": ["Vehicle"],
+      "xAxis": { "size": 50, "gridLines": false },
+      "yAxis": { "type": "categorical", "size": 75, "tickRotation": 0, "dataKey": "Vehicle" },
+      "horizontal": true,
+      "uniqueId": 1651765968212,
+      "editorErrorMessage": ""
+    },
+    "description": "Subtext can be added here for options like citing data sources or insight into reading the bar chart.",
+    "series": [{ "dataKey": "Vehicle", "type": "Bar" }],
+    "barHeight": 25,
+    "barPadding": 40,
+    "labelPlacement": "Below Bar",
+    "label": "Number of Accidents"
+  },
+  "boxplot": [],
+  "topAxis": { "hasLine": false },
+  "isLegendValue": false,
+  "barThickness": 0.35,
+  "barHeight": 6,
+  "barSpace": 15,
+  "heights": { "vertical": 300, "horizontal": 170.39999999999998 },
+  "xAxis": {
+    "anchors": [],
+    "type": "categorical",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": true,
+    "hideLabel": true,
+    "hideTicks": true,
+    "size": "16",
+    "tickRotation": 0,
+    "min": "",
+    "max": "160",
+    "labelColor": "#333",
+    "tickLabelColor": "#333",
+    "tickColor": "#333",
+    "numTicks": "",
+    "labelOffset": 65,
+    "axisPadding": 0,
+    "target": 0,
+    "maxTickRotation": 0,
+    "dataKey": "Group"
+  },
+  "table": { "label": "Data Table", "expanded": false, "limitHeight": false, "height": "", "caption": "", "showDownloadUrl": false, "showDataTableLink": true, "indexLabel": "Group", "download": false, "showVertical": true, "show": true },
+  "orientation": "horizontal",
+  "color": "pinkpurple",
+  "columns": {},
+  "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",
+    "hide": true,
+    "label": "Accident Location"
+  },
+  "exclusions": { "active": false, "keys": [] },
+  "palette": "qualitative-bold",
+  "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": "Home", "type": "Bar", "tooltip": true }],
+  "tooltips": { "opacity": 90 },
+  "height": 212,
+  "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" }
+  ],
+  "dataFileName": "CSV_Source_Example_for_Horizontal_Bar_viz-cdcwp1619811744363.csv",
+  "dataFileSourceType": "file",
+  "visualizationType": "Bar",
+  "description": "Subtext can be added here for options like citing data sources or insight into reading the bar chart.",
+  "barPadding": 47,
+  "filters": [],
+  "lollipopSize": "medium",
+  "validated": 4.23,
+  "dynamicMarginTop": 0
+}

package/src/components/Annotations/components/AnnotationDraggable.styles.css

@@ -0,0 +1,31 @@
+.cdc-open-viz-module .annotation__desktop-label {
+  display: none;
+}
+
+.cdc-open-viz-module {
+  .annotation__mobile-label-circle {
+    stroke-width: 2;
+  }
+
+  .annotation__has-dropdown-number {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    padding: 8px;
+    width: 16px;
+    height: 16px;
+    border: 2px solid #666;
+    text-align: center;
+    font-size: 14px;
+  }
+}
+
+@container content (min-width: 700px) {
+  .cdc-open-viz-module .annotation__mobile-label {
+    display: none;
+  }
+  .cdc-open-viz-module .annotation__desktop-label {
+    display: block;
+  }
+}

package/src/components/Annotations/components/AnnotationDraggable.tsx

@@ -0,0 +1,154 @@
+import { useContext, useEffect, useRef, useState } from 'react'
+import ConfigContext from '../../../ConfigContext'
+import DOMPurify from 'dompurify'
+
+// helpers
+import { findNearestDatum } from './findNearestDatum'
+
+// prettier-ignore
+import {
+  applyBandScaleOffset,
+  handleConnectionHorizontalType,
+  handleConnectionVerticalType,
+  handleMobileXPosition,
+  handleMobileYPosition,
+  handleTextX,
+  handleTextY
+} from './helpers'
+
+import useColorScale from '../../../hooks/useColorScale'
+
+// visx
+import { HtmlLabel, CircleSubject, EditableAnnotation, Connector, Annotation as VisxAnnotation } from '@visx/annotation'
+import { Drag } from '@visx/drag'
+import { MarkerArrow } from '@visx/marker'
+import { LinePath } from '@visx/shape'
+import { fontSizes } from '@cdc/core/helpers/cove/fontSettings'
+
+// styles
+import './AnnotationDraggable.styles.css'
+
+const Annotations = ({ xScale, yScale, xScaleAnnotation, xMax, svgRef, onDragStateChange }) => {
+  // prettier-ignore
+  const {
+    config,
+    currentViewport,
+    dimensions,
+    isDraggingAnnotation,
+    isEditor,
+    isLegendBottom,
+    updateConfig
+  } = useContext(ConfigContext)
+
+  // destructure config items here...
+  const { annotations } = config
+  const [height] = dimensions
+  const { colorScale } = useColorScale()
+  const AnnotationComponent = isEditor ? EditableAnnotation : VisxAnnotation
+
+  return (
+    annotations &&
+    annotations.map((annotation, index) => {
+      const text = annotation.text || ''
+
+      const annotationX = xScaleAnnotation(annotation.x)
+
+      // sanitize the text for setting dangerouslySetInnerHTML
+      const sanitizedData = () => ({
+        __html: DOMPurify.sanitize(text)
+      })
+
+      return (
+        <AnnotationComponent
+          width={200}
+          height={height}
+          dx={annotation.dx} // label position
+          dy={annotation.dy} // label postion
+          x={annotationX}
+          y={annotation.y}
+          canEditLabel={annotation.edit.label || false}
+          canEditSubject={(annotation.edit.subject && annotation.connectionType !== 'none') || false}
+          onDragStart={() => onDragStateChange(true)}
+          onDragEnd={props => {
+            onDragStateChange(false)
+
+            let updatedAnnotations = [...annotations]
+
+            if (annotation.x === xScaleAnnotation.invert(props.x) && annotation.y === props.y) {
+              updatedAnnotations[index] = { ...updatedAnnotations[index], dx: props.dx, dy: props.dy }
+            } else {
+              if (annotation.snapToNearestPoint) {
+                let nearestDatum = findNearestDatum(
+                  {
+                    data: config.data,
+                    xScale,
+                    yScale,
+                    config,
+                    xMax: xMax - config.yAxis.size / 2,
+                    annotationSeriesKey: annotation.seriesKey
+                  },
+                  props.x
+                )
+
+                updatedAnnotations[index] = { ...updatedAnnotations[index], x: xScaleAnnotation.invert(xScale(nearestDatum.x)), y: yScale(nearestDatum.y) }
+              } else {
+                updatedAnnotations[index] = { ...updatedAnnotations[index], x: xScaleAnnotation.invert(props.x), y: props.y }
+              }
+            }
+
+            updateConfig({
+              ...config,
+              annotations: updatedAnnotations
+            })
+          }}
+        >
+          <HtmlLabel className='annotation__desktop-label' showAnchorLine={false} horizontalAnchor={handleConnectionHorizontalType(annotation, xScale, config)} verticalAnchor={handleConnectionVerticalType(annotation, xScale, config)}>
+            <div
+              style={{
+                borderRadius: 5, // Optional: set border radius
+                backgroundColor: `rgba(255, 255, 255, ${annotation?.opacity ? Number(annotation?.opacity) / 100 : 1})`,
+                padding: '10px',
+                width: 'auto',
+                display: config.general.showAnnotationDropdown ? 'inline-flex' : 'flex',
+                justifyContent: 'start',
+                flexDirection: 'row'
+              }}
+              role='presentation'
+              tabIndex={0}
+              aria-label={`Annotation text that reads: ${annotation.text}`}
+            >
+              {config?.general?.showAnnotationDropdown && (
+                <>
+                  <p className='annotation__has-dropdown-number' style={{ margin: '2px 6px' }}>
+                    {index + 1}
+                  </p>
+                </>
+              )}
+              <div style={{ fontSize: fontSizes[config.fontSize] }} dangerouslySetInnerHTML={sanitizedData()} />
+            </div>
+          </HtmlLabel>
+          {annotation.connectionType === 'line' && <Connector type='line' pathProps={{ markerStart: `url(#marker-start--${index})` }} />}
+          {annotation.connectionType === 'elbow' && <Connector type='elbow' pathProps={{ markerStart: `url(#marker-start--${index})` }} />}
+          {annotation.connectionType === 'curve' && (
+            <LinePath
+              d={`M ${annotationX},${annotation.y}
+                      Q ${annotationX + annotation.dx / 2}, ${annotation.y + annotation.dy / 2 + Number(annotation?.bezier) || 0} ${annotationX + annotation.dx},${annotation.y + annotation.dy}`}
+              stroke='black'
+              strokeWidth='2'
+              fill='none'
+              marker-start={`url(#marker-start--${index})`}
+            />
+          )}
+          {annotation.marker === 'circle' && <CircleSubject id={`marker-start--${index}`} className='circle-subject' stroke={colorScale(annotation.seriesKey)} radius={8} />}
+          {annotation.marker === 'arrow' && <MarkerArrow fill='black' id={`marker-start--${index}`} x={annotationX} y={annotation.y} stroke='#333' markerWidth={10} size={10} strokeWidth={1} orient='auto-start-reverse' markerUnits='userSpaceOnUse' />}
+          <circle fill='white' cx={annotationX + annotation.dx} cy={annotation.y + annotation.dy} r={16} className='annotation__mobile-label annotation__mobile-label-circle' stroke={colorScale(annotation.seriesKey)} />
+          <text height={16} x={annotationX + annotation.dx} y={annotation.y + annotation.dy} className='annotation__mobile-label' alignmentBaseline='middle' textAnchor='middle'>
+            {index + 1}
+          </text>
+        </AnnotationComponent>
+      )
+    })
+  )
+}
+
+export default Annotations

package/src/components/Annotations/components/AnnotationDropdown.styles.css

@@ -0,0 +1,14 @@
+.cdc-open-viz-module {
+  .annotation__dropdown-list {
+    border: 1px solid red;
+    list-style: none;
+  }
+
+  .annotation-dropdown__panel {
+    padding: 10px;
+  }
+
+  .data-table-heading.annotation__dropdown-list {
+    margin-top: 10px;
+  }
+}

package/src/components/Annotations/components/AnnotationDropdown.tsx

@@ -0,0 +1,72 @@
+import React, { useContext, useState } from 'react'
+import ConfigContext from '../../../ConfigContext'
+import './AnnotationDropdown.styles.css'
+import Icon from '@cdc/core/components/ui/Icon'
+import Annotation from '..'
+import { fontSizes } from '@cdc/core/helpers/cove/fontSettings'
+
+const AnnotationDropdown = () => {
+  const { currentViewport: viewport, config } = useContext(ConfigContext)
+  const [expanded, setExpanded] = useState(false)
+
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[config?.fontSize]}px`
+
+  const {
+    config: { annotations }
+  } = useContext(ConfigContext)
+
+  const limitHeight = {
+    maxHeight: config.table.limitHeight && `${config.table.height}px`,
+    OverflowY: 'scroll'
+  }
+
+  const handleAccordionClassName = () => {
+    const classNames = ['data-table-heading', 'annotation__dropdown-list']
+    if (!expanded) {
+      classNames.push('collapsed')
+    }
+
+    return classNames.join(' ')
+  }
+
+  const handleSectionClasses = () => {
+    const classes = [`data-table-container`, viewport, `d-block`, `d-lg-none`]
+
+    if (config.general.showAnnotationDropdown) {
+      classes.push('d-lg-block')
+      classes.splice(classes.indexOf('d-lg-none'), 1)
+    }
+    return classes.join(' ')
+  }
+
+  return (
+    <>
+      <section className={handleSectionClasses()}>
+        <div
+          style={{ fontSize: titleFontSize }}
+          role='button'
+          className={handleAccordionClassName()}
+          onClick={() => {
+            setExpanded(!expanded)
+          }}
+          tabIndex={0}
+          onKeyDown={e => {
+            if (e.keyCode === 13) {
+              setExpanded(!expanded)
+            }
+          }}
+        >
+          <Icon display={expanded ? 'minus' : 'plus'} base />
+          {config.general.annotationDropdownText === '' ? 'Annotations' : config?.general?.annotationDropdownText}
+        </div>
+        {expanded && (
+          <div className='table-container annotation-dropdown__panel' style={limitHeight}>
+            <Annotation.List useBootstrapVisibilityClasses={false} />
+          </div>
+        )}
+      </section>
+    </>
+  )
+}
+
+export default AnnotationDropdown

package/src/components/Annotations/components/AnnotationList.styles.css

@@ -0,0 +1,45 @@
+.cdc-open-viz-module {
+  .annotation__title-circle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    padding: 8px;
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+    line-height: 1.5rem;
+
+    border: 2px solid #666;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .annotation__title-wrapper {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  .annotation__title-wrapper .annotation__title-text {
+    margin-left: 5px;
+    font-size: 16px;
+  }
+
+  .annotation__subtext {
+    font-size: 12px;
+  }
+
+  .annotation-list {
+    list-style: none;
+  }
+
+  .annotation-list li {
+    margin-top: 5px;
+  }
+
+  .cove-component__content {
+    container-type: inline-size;
+    container-name: content;
+  }
+}

package/src/components/Annotations/components/AnnotationList.tsx

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react'
+import ConfigContext from '../../../ConfigContext'
+import './AnnotationList.styles.css'
+import DOMPurify from 'dompurify'
+
+type AnnotationListProps = {
+  useBootstrapVisibilityClasses?: boolean
+}
+
+const AnnotationList: React.FC<AnnotationListProps> = ({ useBootstrapVisibilityClasses = true }) => {
+  const { config } = useContext(ConfigContext)
+  const annotations = config.annotations || []
+
+  const ulClasses = () => {
+    const classes = ['annotation-list']
+    if (useBootstrapVisibilityClasses) {
+      classes.push('d-block', 'd-md-none')
+    }
+    return classes.join(' ')
+  }
+
+  const annotationListItems = annotations.map((annotation, annotationIndex) => {
+    const text = annotation.text || ''
+
+    // sanitize the text for setting dangerouslySetInnerHTML
+    const sanitizedData = () => ({
+      __html: DOMPurify.sanitize(text)
+    })
+    return (
+      <li key={`annotation-li-item__annotationIndex`}>
+        <div className='annotation__title-wrapper'>
+          <div className='annotation__title-circle'>{annotationIndex + 1}</div>
+          <p className='annotation__subtext' dangerouslySetInnerHTML={sanitizedData()} />
+        </div>
+      </li>
+    )
+  })
+
+  return <ul className={ulClasses()}>{annotationListItems}</ul>
+}
+
+export default AnnotationList