@cdc/waffle-chart 4.25.11 → 4.26.2

package/examples/default.json

@@ -0,0 +1,10 @@
+{
+  "type": "waffle-chart",
+  "dataUrl": "/examples/example-data.json",
+  "filters": [],
+  "title": "Chart Title",
+  "content": "of cases occurred in the home",
+  "subtext": "Chart subtext or citation",
+  "theme": "theme-blue",
+  "suffix": "%"
+}

package/examples/tp5-gauge-white.json

@@ -0,0 +1,158 @@
+{
+  "title": "TP5 Gauge Chart - White Background",
+  "visualizationType": "TP5 Gauge",
+  "visualizationSubType": "linear",
+  "showPercent": true,
+  "showDenominator": true,
+  "valueDescription": "out of",
+  "content": "of cases occurred in the home",
+  "subtext": "Chart subtext or citation",
+  "orientation": "horizontal",
+  "data": [
+    {
+      "Insured Rate": "43",
+      "Coverage Status": "Insured",
+      "state": "Alabama",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "0",
+      "Coverage Status": "Uninsured",
+      "state": "Alaska",
+      "Year (Good filter option)": "2006",
+      "link": "",
+      "Verified": false
+    },
+    {
+      "Insured Rate": "72.7",
+      "Coverage Status": "Insured",
+      "state": "Arizona",
+      "Year (Good filter option)": "2008",
+      "link": "#lorem",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "78.7",
+      "Coverage Status": "Insured",
+      "state": "Arkansas",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "37.2",
+      "Coverage Status": "Insured",
+      "state": "California",
+      "Year (Good filter option)": "2018",
+      "link": "https://search.cdc.gov/search/?query=California&utf8=%E2%9C%93&affiliate=cdc-main",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "50.6",
+      "Coverage Status": "Insured",
+      "state": "Colorado",
+      "Year (Good filter option)": "2014",
+      "link": "",
+      "Verified": false
+    },
+    {
+      "Insured Rate": "83.2",
+      "Coverage Status": "Insured",
+      "state": "Connecticut",
+      "Year (Good filter option)": "2019",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "90",
+      "Coverage Status": "Insured",
+      "state": "Delaware",
+      "Year (Good filter option)": "2020",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "77.1",
+      "Coverage Status": "Insured",
+      "state": "District of Columbia",
+      "Year (Good filter option)": "2019",
+      "link": "https://search.cdc.gov/search/index.html?query=Washington+D.C.&sitelimit=&utf8=%E2%9C%93&affiliate=cdc-main",
+      "Verified": false
+    },
+    {
+      "Insured Rate": "83",
+      "Coverage Status": "Insured",
+      "state": "Florida",
+      "Year (Good filter option)": "2016",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "67.4",
+      "Coverage Status": "Insured",
+      "state": "Georgia",
+      "Year (Good filter option)": "2013",
+      "link": "",
+      "Verified": false
+    }
+  ],
+  "filters": [
+    {
+      "columnName": "Year (Good filter option)",
+      "label": "Year",
+      "showDropdown": true,
+      "order": "desc",
+      "active": true,
+      "values": [],
+      "type": "multi-select"
+    }
+  ],
+  "fontSize": "",
+  "overallFontSize": "medium",
+  "dataColumn": "Insured Rate",
+  "dataFunction": "Mean (Average)",
+  "dataConditionalColumn": "",
+  "dataConditionalOperator": "",
+  "dataConditionalComparate": "",
+  "invalidComparate": false,
+  "customDenom": false,
+  "dataDenom": "100",
+  "dataDenomColumn": "",
+  "dataDenomFunction": "",
+  "prefix": "",
+  "suffix": "%",
+  "roundToPlace": "0",
+  "shape": "circle",
+  "nodeWidth": "10",
+  "nodeSpacer": "2",
+  "theme": "theme-blue",
+  "type": "waffle-chart",
+  "gauge": {
+    "height": 35,
+    "width": "100%"
+  },
+  "visual": {
+    "border": false,
+    "accent": false,
+    "background": false,
+    "hideBackgroundColor": false,
+    "borderColorTheme": false,
+    "whiteBackground": true,
+    "colors": {
+      "theme-blue": "#005eaa",
+      "theme-purple": "#712177",
+      "theme-brown": "#705043",
+      "theme-teal": "#00695c",
+      "theme-pink": "#af4448",
+      "theme-orange": "#bb4d00",
+      "theme-slate": "#29434e",
+      "theme-indigo": "#26418f",
+      "theme-cyan": "#006778",
+      "theme-green": "#4b830d",
+      "theme-amber": "#fbab18"
+    }
+  },
+  "showTitle": true
+}

package/examples/tp5-gauge.json

@@ -0,0 +1,158 @@
+{
+  "title": "TP5 Gauge Chart",
+  "visualizationType": "TP5 Gauge",
+  "visualizationSubType": "linear",
+  "showPercent": true,
+  "showDenominator": true,
+  "valueDescription": "out of",
+  "content": "of cases occurred in the home",
+  "subtext": "Chart subtext or citation",
+  "orientation": "horizontal",
+  "data": [
+    {
+      "Insured Rate": "43",
+      "Coverage Status": "Insured",
+      "state": "Alabama",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "0",
+      "Coverage Status": "Uninsured",
+      "state": "Alaska",
+      "Year (Good filter option)": "2006",
+      "link": "",
+      "Verified": false
+    },
+    {
+      "Insured Rate": "72.7",
+      "Coverage Status": "Insured",
+      "state": "Arizona",
+      "Year (Good filter option)": "2008",
+      "link": "#lorem",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "78.7",
+      "Coverage Status": "Insured",
+      "state": "Arkansas",
+      "Year (Good filter option)": "2010",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "37.2",
+      "Coverage Status": "Insured",
+      "state": "California",
+      "Year (Good filter option)": "2018",
+      "link": "https://search.cdc.gov/search/?query=California&utf8=%E2%9C%93&affiliate=cdc-main",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "50.6",
+      "Coverage Status": "Insured",
+      "state": "Colorado",
+      "Year (Good filter option)": "2014",
+      "link": "",
+      "Verified": false
+    },
+    {
+      "Insured Rate": "83.2",
+      "Coverage Status": "Insured",
+      "state": "Connecticut",
+      "Year (Good filter option)": "2019",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "90",
+      "Coverage Status": "Insured",
+      "state": "Delaware",
+      "Year (Good filter option)": "2020",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "77.1",
+      "Coverage Status": "Insured",
+      "state": "District of Columbia",
+      "Year (Good filter option)": "2019",
+      "link": "https://search.cdc.gov/search/index.html?query=Washington+D.C.&sitelimit=&utf8=%E2%9C%93&affiliate=cdc-main",
+      "Verified": false
+    },
+    {
+      "Insured Rate": "83",
+      "Coverage Status": "Insured",
+      "state": "Florida",
+      "Year (Good filter option)": "2016",
+      "link": "",
+      "Verified": true
+    },
+    {
+      "Insured Rate": "67.4",
+      "Coverage Status": "Insured",
+      "state": "Georgia",
+      "Year (Good filter option)": "2013",
+      "link": "",
+      "Verified": false
+    }
+  ],
+  "filters": [
+    {
+      "columnName": "Year (Good filter option)",
+      "label": "Year",
+      "showDropdown": true,
+      "order": "desc",
+      "active": true,
+      "values": [],
+      "type": "multi-select"
+    }
+  ],
+  "fontSize": "",
+  "overallFontSize": "medium",
+  "dataColumn": "Insured Rate",
+  "dataFunction": "Mean (Average)",
+  "dataConditionalColumn": "",
+  "dataConditionalOperator": "",
+  "dataConditionalComparate": "",
+  "invalidComparate": false,
+  "customDenom": false,
+  "dataDenom": "100",
+  "dataDenomColumn": "",
+  "dataDenomFunction": "",
+  "prefix": "",
+  "suffix": "%",
+  "roundToPlace": "0",
+  "shape": "circle",
+  "nodeWidth": "10",
+  "nodeSpacer": "2",
+  "theme": "theme-blue",
+  "type": "waffle-chart",
+  "gauge": {
+    "height": 35,
+    "width": "100%"
+  },
+  "visual": {
+    "border": true,
+    "accent": false,
+    "background": false,
+    "hideBackgroundColor": false,
+    "borderColorTheme": false,
+    "whiteBackground": false,
+    "colors": {
+      "theme-blue": "#005eaa",
+      "theme-purple": "#712177",
+      "theme-brown": "#705043",
+      "theme-teal": "#00695c",
+      "theme-pink": "#af4448",
+      "theme-orange": "#bb4d00",
+      "theme-slate": "#29434e",
+      "theme-indigo": "#26418f",
+      "theme-cyan": "#006778",
+      "theme-green": "#4b830d",
+      "theme-amber": "#fbab18"
+    }
+  },
+  "showTitle": true
+}

package/examples/tp5-style-white.json

@@ -0,0 +1,72 @@
+{
+  "type": "waffle-chart",
+  "shape": "person",
+  "title": "Overdose Mortality Rate",
+  "content": "of overdoses resulted in death.",
+  "subtext": "This data is an example and does not reflect actual averages",
+  "orientation": "horizontal",
+  "visualizationType": "TP5 Waffle",
+  "data": [
+    {
+      "Resulted in Death": 250,
+      "Number of Overdoses": 600,
+      "state": "Alabama",
+      "Year": "2010"
+    },
+    {
+      "Resulted in Death": 16,
+      "Number of Overdoses": 80,
+      "state": "Alaska",
+      "Year": "2008"
+    },
+    {
+      "Resulted in Death": 19,
+      "Number of Overdoses": 100,
+      "state": "Alaska",
+      "Year": "2010"
+    },
+    {
+      "Resulted in Death": 93,
+      "Number of Overdoses": 400,
+      "state": "Alaska",
+      "Year": "2012"
+    },
+    {
+      "Resulted in Death": 82,
+      "Number of Overdoses": 400,
+      "state": "Arizona",
+      "Year": "2010"
+    }
+  ],
+  "filters": [],
+  "fontSize": null,
+  "overallFontSize": "medium",
+  "dataColumn": "Resulted in Death",
+  "dataFunction": "Sum",
+  "dataConditionalColumn": "",
+  "dataConditionalOperator": null,
+  "dataConditionalComparate": "",
+  "customDenom": true,
+  "dataDenom": null,
+  "dataDenomColumn": "Number of Overdoses",
+  "dataDenomFunction": "Sum",
+  "prefix": "",
+  "suffix": "%",
+  "roundToPlace": 0,
+  "nodeWidth": 10,
+  "nodeSpacer": 2,
+  "theme": "theme-blue",
+  "visualizationSubType": "",
+  "invalidComparate": false,
+  "showDenominator": false,
+  "showPercent": true,
+  "valueDescription": "Overdose mortality percentage",
+  "visual": {
+    "border": false,
+    "accent": false,
+    "background": false,
+    "hideBackgroundColor": false,
+    "borderColorTheme": false,
+    "whiteBackground": true
+  }
+}

package/examples/tp5-style.json

@@ -0,0 +1,72 @@
+{
+  "type": "waffle-chart",
+  "shape": "person",
+  "title": "Overdose Mortality Rate",
+  "content": "of overdoses resulted in death.",
+  "subtext": "This data is an example and does not reflect actual averages",
+  "orientation": "horizontal",
+  "visualizationType": "TP5 Waffle",
+  "data": [
+    {
+      "Resulted in Death": 250,
+      "Number of Overdoses": 600,
+      "state": "Alabama",
+      "Year": "2010"
+    },
+    {
+      "Resulted in Death": 16,
+      "Number of Overdoses": 80,
+      "state": "Alaska",
+      "Year": "2008"
+    },
+    {
+      "Resulted in Death": 19,
+      "Number of Overdoses": 100,
+      "state": "Alaska",
+      "Year": "2010"
+    },
+    {
+      "Resulted in Death": 93,
+      "Number of Overdoses": 400,
+      "state": "Alaska",
+      "Year": "2012"
+    },
+    {
+      "Resulted in Death": 82,
+      "Number of Overdoses": 400,
+      "state": "Arizona",
+      "Year": "2010"
+    }
+  ],
+  "filters": [],
+  "fontSize": null,
+  "overallFontSize": "medium",
+  "dataColumn": "Resulted in Death",
+  "dataFunction": "Sum",
+  "dataConditionalColumn": "",
+  "dataConditionalOperator": null,
+  "dataConditionalComparate": "",
+  "customDenom": true,
+  "dataDenom": null,
+  "dataDenomColumn": "Number of Overdoses",
+  "dataDenomFunction": "Sum",
+  "prefix": "",
+  "suffix": "%",
+  "roundToPlace": 0,
+  "nodeWidth": 10,
+  "nodeSpacer": 2,
+  "theme": "theme-blue",
+  "visualizationSubType": "",
+  "invalidComparate": false,
+  "showDenominator": false,
+  "showPercent": true,
+  "valueDescription": "Overdose mortality percentage",
+  "visual": {
+    "border": false,
+    "accent": false,
+    "background": false,
+    "hideBackgroundColor": false,
+    "borderColorTheme": false,
+    "whiteBackground": false
+  }
+}

package/examples/tp5-waffle.json

@@ -0,0 +1,123 @@
+{
+  "title": "A Waffle Chart - Person",
+  "titleStyle": "small",
+  "showTitle": true,
+  "visualizationSubType": "linear",
+  "showPercent": true,
+  "showDenominator": true,
+  "valueDescription": "out of",
+  "content": "Highlight a piece of data in relationship to a data set.",
+  "subtext": "",
+  "orientation": null,
+  "filters": [],
+  "fontSize": "",
+  "overallFontSize": "medium",
+  "dataColumn": "Age-adjusted rate",
+  "dataFunction": "Count",
+  "dataConditionalColumn": "",
+  "dataConditionalOperator": "",
+  "dataConditionalComparate": "",
+  "invalidComparate": false,
+  "customDenom": false,
+  "dataDenom": "100",
+  "dataDenomColumn": "",
+  "dataDenomFunction": "",
+  "suffix": "%",
+  "roundToPlace": "0",
+  "shape": "person",
+  "nodeWidth": "10",
+  "nodeSpacer": "2",
+  "theme": "theme-blue",
+  "type": "waffle-chart",
+  "visualizationType": "TP5 Waffle",
+  "gauge": {
+    "height": 35,
+    "width": "100%"
+  },
+  "visual": {
+    "border": true,
+    "accent": false,
+    "background": false,
+    "hideBackgroundColor": false,
+    "borderColorTheme": false,
+    "colors": {
+      "theme-blue": "#005eaa",
+      "theme-purple": "#712177",
+      "theme-brown": "#705043",
+      "theme-teal": "#00695c",
+      "theme-pink": "#af4448",
+      "theme-orange": "#bb4d00",
+      "theme-slate": "#29434e",
+      "theme-indigo": "#26418f",
+      "theme-cyan": "#006778",
+      "theme-green": "#4b830d",
+      "theme-amber": "#fbab18"
+    }
+  },
+  "errors": [],
+  "currentViewport": "lg",
+  "id": 17,
+  "category": "General",
+  "label": "Waffle Chart",
+  "subType": "Waffle",
+  "icon": {
+    "type": {},
+    "key": null,
+    "ref": null,
+    "props": {},
+    "_owner": null,
+    "_store": {}
+  },
+  "activeVizButtonID": 17,
+  "dataFileName": "valid-data-chart.csv",
+  "dataFileSourceType": "file",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "data": [
+    {
+      "Race": "Hispanic or Latino",
+      "Age-adjusted rate": "644.2"
+    },
+    {
+      "Race": "Non-Hispanic American Indian",
+      "Age-adjusted rate": "636.1"
+    },
+    {
+      "Race": "Non-Hispanic Black",
+      "Age-adjusted rate": "563.7"
+    },
+    {
+      "Race": "Non-Hispanic Asian or Pacific Islander",
+      "Age-adjusted rate": "202.5"
+    },
+    {
+      "Race": "Non-Hispanic White",
+      "Age-adjusted rate": "183.6"
+    }
+  ],
+  "formattedData": [
+    {
+      "Race": "Hispanic or Latino",
+      "Age-adjusted rate": "644.2"
+    },
+    {
+      "Race": "Non-Hispanic American Indian",
+      "Age-adjusted rate": "636.1"
+    },
+    {
+      "Race": "Non-Hispanic Black",
+      "Age-adjusted rate": "563.7"
+    },
+    {
+      "Race": "Non-Hispanic Asian or Pacific Islander",
+      "Age-adjusted rate": "202.5"
+    },
+    {
+      "Race": "Non-Hispanic White",
+      "Age-adjusted rate": "183.6"
+    }
+  ],
+  "datasets": {}
+}

package/index.html

@@ -1,36 +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>
-      .type-waffle-chart {
-        min-height: 100vh;
-      }
-
-      body {
-        /* max-width: 1000px; */
-        margin: 0 auto !important;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        border-top: none !important;
-      }
-
-      .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>
-    <!-- Original -->
-    <div class="react-container" data-config="/examples/example-config.json"></div>
-
-    <!-- DATA PRESENTATION GALLERY: https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/waffle-chart.html#examples -->
-    <!-- <div class="react-container" data-config="/examples/gallery/avg-to-max.json"></div> -->
-    <!-- <div class="react-container" data-config="/examples/gallery/count.json"></div> -->
-
-    <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/ -->