@cdc/chart 4.25.11 → 4.26.1

package/examples/tech-adoption-with-links.json

@@ -0,0 +1,560 @@
+{
+  "annotations": [],
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "title": "Technology Adoption Statistics",
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "theme": "theme-blue",
+  "animate": true,
+  "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
+  "barHasBorder": "true",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "rounded",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": false,
+  "general": {
+    "annotationDropdownText": "Annotations",
+    "showMissingDataLabel": false,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": true,
+    "hideNullValue": true,
+    "palette": {
+      "isReversed": false,
+      "version": "2.0",
+      "name": "divergent_green_orange"
+    }
+  },
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "preliminaryData": [],
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": true,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "75",
+    "gridLines": false,
+    "enablePadding": false,
+    "min": "",
+    "max": "",
+    "labelColor": "#1c1d1f",
+    "tickLabelColor": "#1c1d1f",
+    "tickColor": "#1c1d1f",
+    "rightHideAxis": false,
+    "rightAxisSize": 0,
+    "rightLabel": "",
+    "rightLabelOffsetSize": 0,
+    "rightAxisLabelColor": "#1c1d1f",
+    "rightAxisTickLabelColor": "#1c1d1f",
+    "rightAxisTickColor": "#1c1d1f",
+    "numTicks": "6",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "anchors": [],
+    "shoMissingDataLabel": true,
+    "showMissingDataLine": true,
+    "categories": [],
+    "label": "Adoption Rate (%)",
+    "labelPlacement": "Below Bar"
+  },
+  "boxplot": {
+    "plots": [],
+    "borders": "true",
+    "plotOutlierValues": false,
+    "plotNonOutlierValues": true,
+    "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",
+      "count": "Count",
+      "outliers": "Outliers",
+      "values": "Values",
+      "lowerBounds": "Lower Bounds",
+      "upperBounds": "Upper Bounds"
+    }
+  },
+  "topAxis": {
+    "hasLine": false
+  },
+  "isLegendValue": false,
+  "barThickness": "0.37",
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": {
+    "vertical": 300,
+    "horizontal": 250
+  },
+  "xAxis": {
+    "sortDates": false,
+    "anchors": [],
+    "type": "categorical",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": "50",
+    "tickRotation": 0,
+    "min": "",
+    "max": "100",
+    "labelColor": "#1c1d1f",
+    "tickLabelColor": "#1c1d1f",
+    "tickColor": "#1c1d1f",
+    "numTicks": "",
+    "labelOffset": 0,
+    "axisPadding": 200,
+    "target": 0,
+    "maxTickRotation": "90",
+    "padding": 5,
+    "showYearsOnce": false,
+    "sortByRecentDate": false,
+    "brushActive": false,
+    "dataKey": "Technology",
+    "tickWidthMax": 43,
+    "label": "Technology"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "500",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": true,
+    "showDownloadLinkBelow": false,
+    "indexLabel": "",
+    "download": true,
+    "showVertical": true,
+    "dateDisplayFormat": "",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "collapsible": true,
+    "show": true,
+    "showDownloadImgButton": true,
+    "includeContextInDownload": true,
+    "groupBy": "",
+    "cellMinWidth": "150"
+  },
+  "orientation": "horizontal",
+  "columns": {
+    "Users (millions)": {
+      "label": "Users (millions)",
+      "dataTable": true,
+      "tooltips": true,
+      "prefix": "",
+      "suffix": "M",
+      "forestPlot": false,
+      "startingPoint": "0",
+      "forestPlotAlignRight": false,
+      "roundToPlace": 1,
+      "commas": true,
+      "showInViz": false,
+      "forestPlotStartingPoint": 0,
+      "name": "Users (millions)"
+    },
+    "Growth Rate": {
+      "label": "Growth Rate",
+      "dataTable": true,
+      "tooltips": true,
+      "prefix": "",
+      "suffix": "%",
+      "forestPlot": false,
+      "startingPoint": "0",
+      "forestPlotAlignRight": false,
+      "roundToPlace": 1,
+      "commas": false,
+      "showInViz": false,
+      "forestPlotStartingPoint": 0,
+      "name": "Growth Rate"
+    },
+    "Learn More": {
+      "label": "Learn More",
+      "dataTable": true,
+      "tooltips": false,
+      "prefix": "",
+      "suffix": "",
+      "forestPlot": false,
+      "startingPoint": "0",
+      "forestPlotAlignRight": false,
+      "roundToPlace": 0,
+      "commas": false,
+      "showInViz": false,
+      "forestPlotStartingPoint": 0,
+      "name": "Learn More"
+    }
+  },
+  "legend": {
+    "hide": true,
+    "behavior": "isolate",
+    "axisAlign": true,
+    "singleRow": true,
+    "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,
+    "hideSuppressionLink": false,
+    "seriesHighlight": [],
+    "style": "circles",
+    "subStyle": "linear blocks",
+    "groupBy": "",
+    "shape": "circle",
+    "tickRotation": "",
+    "order": "dataColumn",
+    "hideBorder": {
+      "side": false,
+      "topBottom": true
+    },
+    "position": "right",
+    "orderedValues": [],
+    "patterns": {},
+    "patternField": "",
+    "unified": true
+  },
+  "smallMultiples": {
+    "mode": "",
+    "tileColumn": "",
+    "tilesPerRowDesktop": 3,
+    "tilesPerRowMobile": 1,
+    "tileOrder": [],
+    "tileOrderType": "asc",
+    "tileTitles": {},
+    "independentYAxis": false,
+    "colorMode": "same",
+    "synchronizedTooltips": true,
+    "showAreaUnderLine": true
+  },
+  "exclusions": {
+    "active": false,
+    "keys": []
+  },
+  "twoColor": {
+    "palette": "monochrome-1",
+    "isPaletteReversed": false
+  },
+  "labels": false,
+  "dataFormat": {
+    "commas": true,
+    "prefix": "",
+    "suffix": "%",
+    "abbreviated": false,
+    "bottomSuffix": "",
+    "bottomPrefix": "",
+    "bottomAbbreviated": false
+  },
+  "filters": [
+    {
+      "values": ["Social Media", "Cloud Services", "Development Tools", "Communication"],
+      "filterStyle": "dropdown",
+      "id": 1765208699247,
+      "showDropdown": true,
+      "active": "Social Media",
+      "columnName": "Category",
+      "orderedValues": ["Social Media", "Cloud Services", "Development Tools", "Communication"],
+      "label": "Select technology category",
+      "order": "cust"
+    }
+  ],
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": false,
+    "horizontalHoverLine": false,
+    "lineDatapointSymbol": "none",
+    "maximumShapeAmount": 7
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    {
+      "dataKey": "Adoption Rate",
+      "type": "Bar",
+      "axis": "Left",
+      "tooltip": true,
+      "dynamicCategory": ""
+    }
+  ],
+  "tooltips": {
+    "opacity": 90,
+    "singleSeries": false,
+    "dateDisplayFormat": ""
+  },
+  "forestPlot": {
+    "startAt": 0,
+    "colors": {
+      "line": "",
+      "shape": ""
+    },
+    "lineOfNoEffect": {
+      "show": true
+    },
+    "type": "",
+    "pooledResult": {
+      "diamondHeight": 5,
+      "column": ""
+    },
+    "estimateField": "",
+    "estimateRadius": "",
+    "shape": "square",
+    "rowHeight": 20,
+    "description": {
+      "show": true,
+      "text": "description",
+      "location": 0
+    },
+    "result": {
+      "show": true,
+      "text": "result",
+      "location": 100
+    },
+    "radius": {
+      "min": 2,
+      "max": 10,
+      "scalingColumn": ""
+    },
+    "regression": {
+      "lower": 0,
+      "upper": 0,
+      "estimateField": 0
+    },
+    "leftWidthOffset": 0,
+    "rightWidthOffset": 0,
+    "showZeroLine": false,
+    "leftLabel": "",
+    "rightLabel": ""
+  },
+  "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": []
+  },
+  "markupVariables": [],
+  "enableMarkupVariables": false,
+  "errors": [],
+  "currentViewport": "lg",
+  "id": 1,
+  "category": "Charts",
+  "label": "Bar",
+  "subType": "Bar",
+  "icon": {
+    "key": null,
+    "ref": null,
+    "props": {},
+    "_owner": null
+  },
+  "content": "Use bars to show comparisons between data categories.",
+  "visualizationType": "Bar",
+  "activeVizButtonID": 1,
+  "dataFileName": "",
+  "dataFileSourceType": "data",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "version": "4.25.11",
+  "migrations": {
+    "addColorMigration": true
+  },
+  "dynamicMarginTop": 0,
+  "data": [
+    {
+      "Category": "Social Media",
+      "Technology": "<a href=\"https://developer.twitter.com/en/docs\">Twitter/X</a>",
+      "Adoption Rate": "68.2",
+      "Users (millions)": "528.3",
+      "Growth Rate": "2.1",
+      "Learn More": "<a href=\"https://developer.twitter.com/en/docs\">View API Documentation &raquo;</a>"
+    },
+    {
+      "Category": "Social Media",
+      "Technology": "<a href=\"https://developers.facebook.com/docs/instagram\">Instagram</a>",
+      "Adoption Rate": "82.5",
+      "Users (millions)": "1478.0",
+      "Growth Rate": "8.7",
+      "Learn More": "<a href=\"https://developers.facebook.com/docs/instagram\">Learn more about Instagram API &raquo;</a>"
+    },
+    {
+      "Category": "Social Media",
+      "Technology": "<a href=\"https://developers.tiktok.com/\">TikTok</a>",
+      "Adoption Rate": "73.1",
+      "Users (millions)": "1051.0",
+      "Growth Rate": "15.2",
+      "Learn More": "<a href=\"https://developers.tiktok.com/\">Explore TikTok Developer Platform &raquo;</a>"
+    },
+    {
+      "Category": "Social Media",
+      "Technology": "<a href=\"https://developer.linkedin.com/\">LinkedIn</a>",
+      "Adoption Rate": "45.8",
+      "Users (millions)": "875.0",
+      "Growth Rate": "5.3",
+      "Learn More": "<a href=\"https://developer.linkedin.com/\">LinkedIn Developer Resources &raquo;</a>"
+    },
+    {
+      "Category": "Cloud Services",
+      "Technology": "<a href=\"https://aws.amazon.com/documentation/\">AWS</a>",
+      "Adoption Rate": "91.3",
+      "Users (millions)": "2500.0",
+      "Growth Rate": "12.5",
+      "Learn More": "<a href=\"https://aws.amazon.com/documentation/\">AWS Documentation &raquo;</a>"
+    },
+    {
+      "Category": "Cloud Services",
+      "Technology": "<a href=\"https://docs.microsoft.com/azure/\">Azure</a>",
+      "Adoption Rate": "78.9",
+      "Users (millions)": "1800.0",
+      "Growth Rate": "18.3",
+      "Learn More": "<a href=\"https://docs.microsoft.com/azure/\">Azure Documentation &raquo;</a>"
+    },
+    {
+      "Category": "Cloud Services",
+      "Technology": "<a href=\"https://cloud.google.com/docs\">Google Cloud</a>",
+      "Adoption Rate": "62.4",
+      "Users (millions)": "1200.0",
+      "Growth Rate": "22.1",
+      "Learn More": "<a href=\"https://cloud.google.com/docs\">Google Cloud Docs &raquo;</a>"
+    },
+    {
+      "Category": "Cloud Services",
+      "Technology": "<a href=\"https://docs.digitalocean.com/\">DigitalOcean</a>",
+      "Adoption Rate": "34.2",
+      "Users (millions)": "385.0",
+      "Growth Rate": "6.8",
+      "Learn More": "<a href=\"https://docs.digitalocean.com/\">DigitalOcean Documentation &raquo;</a>"
+    },
+    {
+      "Category": "Really really long long Development Tools",
+      "Technology": "<a href=\"https://docs.github.com/\">GitHub</a>",
+      "Adoption Rate": "94.6",
+      "Users (millions)": "100.0",
+      "Growth Rate": "9.2",
+      "Learn More": "<a href=\"https://docs.github.com/\">GitHub Documentation &raquo;</a>"
+    },
+    {
+      "Category": "Really really long long Development Tools",
+      "Technology": "<a href=\"https://code.visualstudio.com/docs\">VS Code</a>",
+      "Adoption Rate": "87.3",
+      "Users (millions)": "14.0",
+      "Growth Rate": "11.5",
+      "Learn More": "<a href=\"https://code.visualstudio.com/docs\">VS Code Documentation &raquo;</a>"
+    },
+    {
+      "Category": "Really really long long Development Tools",
+      "Technology": "<a href=\"https://docs.docker.com/\">Docker</a>",
+      "Adoption Rate": "79.8",
+      "Users (millions)": "13.0",
+      "Growth Rate": "14.3",
+      "Learn More": "<a href=\"https://docs.docker.com/\">Docker Documentation &raquo;</a>"
+    },
+    {
+      "Category": "Really really long long Development Tools",
+      "Technology": "<a href=\"https://docs.npmjs.com/\">npm</a>",
+      "Adoption Rate": "85.2",
+      "Users (millions)": "17.0",
+      "Growth Rate": "7.9",
+      "Learn More": "<a href=\"https://docs.npmjs.com/\">npm Documentation &raquo;</a>"
+    },
+    {
+      "Category": "Communication",
+      "Technology": "<a href=\"https://api.slack.com/\">Slack</a>",
+      "Adoption Rate": "71.5",
+      "Users (millions)": "18.0",
+      "Growth Rate": "10.2",
+      "Learn More": "<a href=\"https://api.slack.com/\">Slack API Documentation &raquo;</a>"
+    },
+    {
+      "Category": "Communication",
+      "Technology": "<a href=\"https://docs.microsoft.com/microsoftteams/\">Microsoft Teams</a>",
+      "Adoption Rate": "68.9",
+      "Users (millions)": "280.0",
+      "Growth Rate": "25.7",
+      "Learn More": "<a href=\"https://docs.microsoft.com/microsoftteams/\">Teams Documentation &raquo;</a>"
+    },
+    {
+      "Category": "Communication",
+      "Technology": "<a href=\"https://developers.zoom.us/\">Zoom</a>",
+      "Adoption Rate": "75.2",
+      "Users (millions)": "300.0",
+      "Growth Rate": "8.4",
+      "Learn More": "<a href=\"https://developers.zoom.us/\">Zoom Developer Platform &raquo;</a>"
+    },
+    {
+      "Category": "Communication",
+      "Technology": "<a href=\"https://discord.com/developers/docs/\">Discord</a>",
+      "Adoption Rate": "56.3",
+      "Users (millions)": "150.0",
+      "Growth Rate": "19.6",
+      "Learn More": "<a href=\"https://discord.com/developers/docs/\">Discord Developer Portal &raquo;</a>"
+    }
+  ],
+  "datasets": {}
+}

package/index.html

@@ -1,32 +1,27 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <style>
-    body {
-      margin: 0;
-      border-top: none !important;
-    }
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <style>
+      body {
+        margin: 0;
+        border-top: none !important;
+        /* Force scrollbar so page stays consistent width */
+        min-height: calc(100vh + 1px);
+      }
 
     .cdc-map-outer-container {
       min-height: 100vh;
     }
 
-    /* .react-container + .react-container {
-        margin-top: 3rem;
-      } */
-  </style>
-  <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
-</head>
+  <body>
+    <!-- GENERIC CHART TYPES -->
+    <div class="react-container" data-config="/examples/private/height.json"></div>
 
 <body>
-
   <!-- GENERIC CHART TYPES -->
-  <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div>
-
-
+  <div class="react-container" data-config="/examples/private/height.json"></div>
 
   <noscript>You need to enable JavaScript to run this app.</noscript>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.25.11",
+  "version": "4.26.1",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -26,7 +26,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/core": "^4.25.11",
+    "@cdc/core": "^4.26.1",
     "@hello-pangea/dnd": "^16.2.0",
     "@react-spring/web": "^9.7.5",
     "@rollup/plugin-dsv": "^3.0.2",
@@ -63,17 +63,18 @@
     "react-icons": "5.5.0",
     "react-tooltip": "5.8.2-beta.3",
     "resize-observer-polyfill": "^1.5.1",
+    "sass": "^1.89.2",
     "use-debounce": "^6.0.1",
     "vite": "^5.4.21",
     "vite-plugin-css-injected-by-js": "^2.4.0",
-    "vite-plugin-svgr": "^2.4.0",
+    "vite-plugin-svgr": "^4.2.0",
     "whatwg-fetch": "3.6.20"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "5f09a137c22f454111ab5f4cd7fdf1d2d58e31bd",
+  "gitHead": "7e3b27098c4eb7a24bc9c3654ad53f88d6419f16",
   "devDependencies": {
     "@types/d3-array": "^3.2.1",
     "@types/d3-format": "^3.0.4",