@cdc/chart 4.24.5 → 4.24.9

package/src/_stories/_mock/line_chart_two_points_new_chart.json

@@ -0,0 +1,128 @@
+{
+  "allowLineToBarGraph": true,
+  "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/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,207 @@
+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;
+  }
+}