@cdc/chart 4.26.1 → 4.26.3

package/examples/private/timeline.json

@@ -0,0 +1,389 @@
+{
+  "annotations": [],
+  "type": "chart",
+  "debugSvg": false,
+  "chartMessage": {
+    "noData": "No Data Available"
+  },
+  "title": "",
+  "titleStyle": "small",
+  "showTitle": true,
+  "showDownloadMediaButton": false,
+  "theme": "theme-blue",
+  "animate": false,
+  "lineDatapointStyle": "hover",
+  "lineDatapointColor": "Same as Line",
+  "barHasBorder": "true",
+  "isLollipopChart": false,
+  "lollipopShape": "circle",
+  "lollipopColorStyle": "two-tone",
+  "visualizationSubType": "regular",
+  "barStyle": "flat",
+  "roundingStyle": "standard",
+  "tipRounding": "top",
+  "isResponsiveTicks": false,
+  "general": {
+    "annotationDropdownText": "Annotations",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "showZeroValueData": true,
+    "hideNullValue": true,
+    "palette": {
+      "name": "sequential_blue",
+      "version": "1.0"
+    }
+  },
+  "padding": {
+    "left": 5,
+    "right": 5
+  },
+  "preliminaryData": [],
+  "yAxis": {
+    "hideAxis": false,
+    "displayNumbersOnBar": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 50,
+    "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": "",
+    "axisPadding": 0,
+    "scalePadding": 10,
+    "tickRotation": 0,
+    "anchors": [],
+    "shoMissingDataLabel": true,
+    "showMissingDataLine": true,
+    "categories": []
+  },
+  "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.35,
+  "barHeight": 25,
+  "barSpace": 15,
+  "heights": {
+    "vertical": "350",
+    "horizontal": 750
+  },
+  "xAxis": {
+    "sortDates": false,
+    "anchors": [],
+    "type": "date",
+    "showTargetLabel": true,
+    "targetLabel": "Target",
+    "hideAxis": false,
+    "hideLabel": false,
+    "hideTicks": false,
+    "size": 75,
+    "tickRotation": 0,
+    "min": "",
+    "max": "",
+    "labelColor": "#1c1d1f",
+    "tickLabelColor": "#1c1d1f",
+    "tickColor": "#1c1d1f",
+    "numTicks": "",
+    "labelOffset": 0,
+    "axisPadding": 200,
+    "target": 0,
+    "maxTickRotation": 0,
+    "padding": 5,
+    "showYearsOnce": false,
+    "sortByRecentDate": false,
+    "brushActive": true,
+    "dataKey": "Week_End",
+    "axisBBox": 62.279998779296875,
+    "tickWidthMax": 67,
+    "label": "Week Ending",
+    "dateParseFormat": "%Y-%m-%d",
+    "dateDisplayFormat": "%m/%d/%y"
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "limitHeight": false,
+    "height": "",
+    "caption": "",
+    "showDownloadUrl": false,
+    "showDataTableLink": false,
+    "showDownloadLinkBelow": true,
+    "indexLabel": "",
+    "download": false,
+    "showVertical": true,
+    "dateDisplayFormat": "",
+    "showMissingDataLabel": true,
+    "showSuppressedSymbol": true,
+    "collapsible": true,
+    "show": true
+  },
+  "orientation": "vertical",
+  "columns": {},
+  "legend": {
+    "hide": false,
+    "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": "bottom",
+    "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": false,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": false,
+    "bottomSuffix": "",
+    "bottomPrefix": "",
+    "bottomAbbreviated": false
+  },
+  "filters": [
+    {
+      "filterStyle": "dropdown",
+      "id": 1769623792468,
+      "showDropdown": false,
+      "columnName": "Pathogen_Target",
+      "orderedValues": [
+        "COVID-19",
+        "Influenza A",
+        "RSV"
+      ],
+      "defaultValue": "COVID-19"
+    }
+  ],
+  "confidenceKeys": {},
+  "visual": {
+    "border": true,
+    "accent": true,
+    "background": true,
+    "verticalHoverLine": false,
+    "horizontalHoverLine": false,
+    "lineDatapointSymbol": "none",
+    "maximumShapeAmount": 7
+  },
+  "useLogScale": false,
+  "filterBehavior": "Filter Change",
+  "highlightedBarValues": [],
+  "series": [
+    {
+      "dataKey": "National_WVAL",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Midwest_WVAL",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "South_WVAL",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Northeast_WVAL",
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "West_WVAL",
+      "type": "Line",
+      "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": "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,
+  "openModal": true,
+  "uid": "chart1769623346898",
+  "visualizationType": "Line",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "dataurl": "http://localhost:8080/examples/private/timeline-data.json",
+  "showEditorPanel": true,
+  "description": "  <div class=\"text-left ml-3 pb-3\">Data from the most recent two weeks may be incomplete due to delays in data reporting. These data sets are subject to change and are indicated by the gray shading.</div>",
+  "dynamicMarginTop": 0
+}

package/examples/radar-chart-simple.json

@@ -0,0 +1,133 @@
+{
+  "type": "chart",
+  "title": "Program A vs Program B Performance",
+  "showTitle": true,
+  "theme": "theme-blue",
+  "visualizationType": "Radar",
+  "animate": false,
+  "heights": {
+    "vertical": 400,
+    "horizontal": 400
+  },
+  "xAxis": {
+    "dataKey": "Program",
+    "label": "Program"
+  },
+  "yAxis": {
+    "dataKey": ""
+  },
+  "series": [
+    {
+      "dataKey": "Reach",
+      "name": "Reach",
+      "type": "Radar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Engagement",
+      "name": "Engagement",
+      "type": "Radar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Effectiveness",
+      "name": "Effectiveness",
+      "type": "Radar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Adoption",
+      "name": "Adoption",
+      "type": "Radar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Maintenance",
+      "name": "Maintenance",
+      "type": "Radar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Cost Efficiency",
+      "name": "Cost Efficiency",
+      "type": "Radar",
+      "axis": "Left",
+      "tooltip": true
+    }
+  ],
+  "radar": {
+    "gridRings": 4,
+    "showGridRings": true,
+    "gridRingStyle": "circles",
+    "scaleMin": 0,
+    "scaleMax": 100,
+    "showFill": false,
+    "fillOpacity": 0.25,
+    "showPoints": true,
+    "pointRadius": 5,
+    "strokeWidth": 2,
+    "axisLabelOffset": 25
+  },
+  "legend": {
+    "hide": false,
+    "behavior": "isolate",
+    "singleRow": true,
+    "position": "bottom",
+    "label": ""
+  },
+  "tooltips": {
+    "opacity": 90,
+    "singleSeries": false
+  },
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "",
+    "abbreviated": false
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": false,
+    "show": true,
+    "showDataTableLink": true
+  },
+  "general": {
+    "showDownloadButton": false,
+    "palette": {
+      "name": "qualitative_bold",
+      "version": "2.0",
+      "isReversed": false
+    }
+  },
+  "data": [
+    {
+      "Program": "Program A",
+      "Reach": 85,
+      "Engagement": 70,
+      "Effectiveness": 90,
+      "Adoption": 65,
+      "Maintenance": 75,
+      "Cost Efficiency": 80
+    },
+    {
+      "Program": "Program B",
+      "Reach": 60,
+      "Engagement": 85,
+      "Effectiveness": 70,
+      "Adoption": 90,
+      "Maintenance": 80,
+      "Cost Efficiency": 55
+    }
+  ],
+  "description": "RE-AIM framework comparison of two health intervention programs.",
+  "filters": [],
+  "exclusions": {
+    "active": false,
+    "keys": []
+  }
+}

package/examples/radar-chart.json

@@ -0,0 +1,148 @@
+{
+  "type": "chart",
+  "title": "Regional Health Performance Indicators",
+  "showTitle": true,
+  "theme": "theme-blue",
+  "visualizationType": "Radar",
+  "animate": false,
+  "heights": {
+    "vertical": 400,
+    "horizontal": 400
+  },
+  "xAxis": {
+    "dataKey": "Region",
+    "label": "Region"
+  },
+  "yAxis": {
+    "dataKey": ""
+  },
+  "series": [
+    {
+      "dataKey": "Vaccination Rate",
+      "name": "Vaccination Rate",
+      "type": "Radar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Healthcare Access",
+      "name": "Healthcare Access",
+      "type": "Radar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Disease Prevention",
+      "name": "Disease Prevention",
+      "type": "Radar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Health Education",
+      "name": "Health Education",
+      "type": "Radar",
+      "axis": "Left",
+      "tooltip": true
+    },
+    {
+      "dataKey": "Emergency Response",
+      "name": "Emergency Response",
+      "type": "Radar",
+      "axis": "Left",
+      "tooltip": true
+    }
+  ],
+  "radar": {
+    "gridRings": 5,
+    "showGridRings": true,
+    "gridRingStyle": "polygons",
+    "scaleMin": 0,
+    "scaleMax": 100,
+    "showFill": false,
+    "fillOpacity": 0.3,
+    "showPoints": true,
+    "pointRadius": 4,
+    "strokeWidth": 2,
+    "axisLabelOffset": 20
+  },
+  "legend": {
+    "hide": false,
+    "behavior": "highlight",
+    "singleRow": true,
+    "position": "right",
+    "label": "Regions"
+  },
+  "tooltips": {
+    "opacity": 90,
+    "singleSeries": false
+  },
+  "dataFormat": {
+    "commas": false,
+    "prefix": "",
+    "suffix": "%",
+    "abbreviated": false
+  },
+  "table": {
+    "label": "Data Table",
+    "expanded": true,
+    "show": true,
+    "showDataTableLink": true
+  },
+  "general": {
+    "showDownloadButton": false,
+    "palette": {
+      "name": "qualitative_standard",
+      "version": "2.0",
+      "isReversed": false
+    }
+  },
+  "data": [
+    {
+      "Region": "Northeast",
+      "Vaccination Rate": 85,
+      "Healthcare Access": 78,
+      "Disease Prevention": 82,
+      "Health Education": 75,
+      "Emergency Response": 88
+    },
+    {
+      "Region": "Southeast",
+      "Vaccination Rate": 72,
+      "Healthcare Access": 68,
+      "Disease Prevention": 70,
+      "Health Education": 65,
+      "Emergency Response": 75
+    },
+    {
+      "Region": "Midwest",
+      "Vaccination Rate": 78,
+      "Healthcare Access": 72,
+      "Disease Prevention": 76,
+      "Health Education": 70,
+      "Emergency Response": 80
+    },
+    {
+      "Region": "Southwest",
+      "Vaccination Rate": 70,
+      "Healthcare Access": 65,
+      "Disease Prevention": 68,
+      "Health Education": 72,
+      "Emergency Response": 70
+    },
+    {
+      "Region": "West",
+      "Vaccination Rate": 82,
+      "Healthcare Access": 80,
+      "Disease Prevention": 78,
+      "Health Education": 85,
+      "Emergency Response": 82
+    }
+  ],
+  "description": "Comparison of health performance indicators across five U.S. regions. Each axis represents a different health metric scored on a 0-100 scale.",
+  "filters": [],
+  "exclusions": {
+    "active": false,
+    "keys": []
+  }
+}

package/index.html

@@ -1,31 +1 @@
-<!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;
-        /* Force scrollbar so page stays consistent width */
-        min-height: calc(100vh + 1px);
-      }
-
-    .cdc-map-outer-container {
-      min-height: 100vh;
-    }
-
-  <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/private/height.json"></div>
-
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-
-  <script type="module" src="./src/index.jsx"></script>
-</body>
-
-</html>
+<!-- index.html is generated by @cdc/core/generateViteConfig.js using the files in @cdc/core/devTemplate/ -->