@cdc/dashboard 4.23.5 → 4.23.6

package/examples/shared-filters.json

@@ -0,0 +1,542 @@
+{
+  "dashboard": {
+    "sharedFilters": [
+      {
+        "key": "State",
+        "columnName": "state",
+        "setBy": "chart1684783399780",
+        "usedBy": [
+          "chart1",
+          "map1"
+        ],
+        "values": [
+          "Alabama",
+          "Georgia",
+          "Florida"
+        ],
+        "active": "Alabama",
+        "resetLabel": "- Select -",
+        "showDropdown": true
+      }
+    ]
+  },
+  "rows": [
+    [
+      {
+        "width": 12,
+        "widget": "map1"
+      },
+      {},
+      {}
+    ],
+    [
+      {
+        "width": 12,
+        "widget": "chart1"
+      },
+      {},
+      {}
+    ],
+    [
+      {
+        "width": 12,
+        "widget": "chart1684783399780"
+      },
+      {
+        "equalHeight": false
+      },
+      {},
+      {}
+    ]
+  ],
+  "visualizations": {
+    "map1": {
+      "uid": "map1",
+      "type": "map",
+      "defaultData": false,
+      "dataKey": "data2",
+      "general": {
+        "title": "Map Example",
+        "subtext": "",
+        "territoriesLabel": "Territories",
+        "type": "data",
+        "geoType": "us",
+        "headerColor": "theme-blue",
+        "showSidebar": true,
+        "showTitle": true,
+        "geoBorderColor": "darkGray",
+        "showDownloadButton": true,
+        "expandDataTable": true,
+        "showDownloadMediaButton": false,
+        "displayAsHex": false,
+        "displayStateLabels": false,
+        "territoriesAlwaysShow": false,
+        "language": "en",
+        "geoLabelOverride": "",
+        "hasRegions": false,
+        "fullBorder": false,
+        "palette": {
+          "isReversed": false
+        },
+        "allowMapZoom": true,
+        "hideGeoColumnInTooltip": false,
+        "hidePrimaryColumnInTooltip": false
+      },
+      "color": "pinkpurple",
+      "columns": {
+        "geo": {
+          "name": "state",
+          "label": "Location",
+          "tooltip": false,
+          "dataTable": true
+        },
+        "primary": {
+          "name": "Insured Rate",
+          "label": "Data Label",
+          "prefix": "",
+          "suffix": "%",
+          "dataTable": true,
+          "tooltip": true
+        },
+        "navigate": {
+          "name": "link",
+          "tooltip": false,
+          "dataTable": false
+        },
+        "latitude": {
+          "name": ""
+        },
+        "longitude": {
+          "name": ""
+        }
+      },
+      "legend": {
+        "numberOfItems": 3,
+        "position": "side",
+        "title": "Legend Title",
+        "description": "Legend Text",
+        "type": "equalnumber",
+        "specialClasses": [
+          "N/A"
+        ],
+        "descriptions": {},
+        "unified": false,
+        "singleColumn": false,
+        "singleRow": false,
+        "showSpecialClassesLast": false,
+        "dynamicDescription": false
+      },
+      "formattedData": [
+        {
+          "Insured Rate": 43,
+          "state": "Alabama"
+        },
+        {
+          "Insured Rate": 63,
+          "state": "Georgia"
+        },
+        {
+          "Insured Rate": 53,
+          "state": "Florida"
+        }
+      ]
+    },
+    "chart1": {
+      "uid": "chart1",
+      "type": "chart",
+      "dataKey": "data1",
+      "title": "Test",
+      "description": "<p>Test</p>",
+      "visualizationType": "Line",
+      "series": [
+        {
+          "dataKey": "Insured Rate",
+          "label": "Insured Rate"
+        }
+      ],
+      "fontSize": "large",
+      "dataFormat": {
+        "commas": false,
+        "prefix": "",
+        "suffix": ""
+      },
+      "padding": {
+        "left": 15,
+        "right": 15
+      },
+      "yAxis": {
+        "label": "Insured Rate",
+        "paddingPercent": 0.15
+      },
+      "xAxis": {
+        "label": "Date",
+        "dataKey": "date",
+        "type": "date",
+        "dateParseFormat": "%Y-%m-%d",
+        "dateDisplayFormat": "%b %d",
+        "numTicks": 8,
+        "tickRotation": 50
+      },
+      "legend": {
+        "label": "Legend",
+        "above": true,
+        "left": true
+      },
+      "table": {
+        "label": "Data Table",
+        "expanded": false,
+        "download": true,
+        "showVertical": false,
+        "show": false
+      },
+      "formattedData": [
+        {
+          "Insured Rate": "43",
+          "date": "2022-01-02",
+          "state": "Alabama"
+        },
+        {
+          "Insured Rate": "53",
+          "date": "2022-02-02",
+          "state": "Alabama"
+        },
+        {
+          "Insured Rate": "23",
+          "date": "2022-03-02",
+          "state": "Alabama"
+        },
+        {
+          "Insured Rate": "13",
+          "date": "2022-01-02",
+          "state": "Georgia"
+        },
+        {
+          "Insured Rate": "63",
+          "date": "2022-02-02",
+          "state": "Georgia"
+        },
+        {
+          "Insured Rate": "40",
+          "date": "2022-03-02",
+          "state": "Georgia"
+        },
+        {
+          "Insured Rate": "30",
+          "date": "2022-01-02",
+          "state": "Florida"
+        },
+        {
+          "Insured Rate": "55",
+          "date": "2022-02-02",
+          "state": "Florida"
+        },
+        {
+          "Insured Rate": "90",
+          "date": "2022-03-02",
+          "state": "Florida"
+        }
+      ]
+    },
+    "chart1684783399780": {
+      "type": "chart",
+      "title": "",
+      "showTitle": true,
+      "showDownloadMediaButton": false,
+      "theme": "theme-blue",
+      "animate": false,
+      "fontSize": "medium",
+      "lineDatapointStyle": "hover",
+      "barHasBorder": "false",
+      "isLollipopChart": false,
+      "lollipopShape": "circle",
+      "lollipopColorStyle": "two-tone",
+      "visualizationSubType": "regular",
+      "barStyle": "",
+      "roundingStyle": "standard",
+      "tipRounding": "top",
+      "general": {
+        "showDownloadButton": false
+      },
+      "padding": {
+        "left": 5,
+        "right": 5
+      },
+      "yAxis": {
+        "hideAxis": false,
+        "displayNumbersOnBar": false,
+        "hideLabel": false,
+        "hideTicks": false,
+        "size": 50,
+        "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": "",
+        "axisPadding": 0,
+        "tickRotation": 0,
+        "anchors": []
+      },
+      "boxplot": {
+        "plots": [],
+        "borders": "true",
+        "firstQuartilePercentage": 25,
+        "thirdQuartilePercentage": 75,
+        "boxWidthPercentage": 40,
+        "plotOutlierValues": false,
+        "plotNonOutlierValues": true,
+        "legend": {
+          "showHowToReadText": false,
+          "howToReadText": ""
+        },
+        "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",
+          "total": "Total",
+          "outliers": "Outliers",
+          "values": "Values",
+          "lowerBounds": "Lower Bounds",
+          "upperBounds": "Upper Bounds"
+        }
+      },
+      "topAxis": {
+        "hasLine": false
+      },
+      "isLegendValue": false,
+      "barThickness": 0.35,
+      "barHeight": 25,
+      "barSpace": 15,
+      "heights": {
+        "vertical": 300,
+        "horizontal": 750
+      },
+      "xAxis": {
+        "anchors": [],
+        "type": "categorical",
+        "showTargetLabel": true,
+        "targetLabel": "Target",
+        "hideAxis": false,
+        "hideLabel": false,
+        "hideTicks": false,
+        "size": 75,
+        "tickRotation": 0,
+        "min": "",
+        "max": "",
+        "labelColor": "#333",
+        "tickLabelColor": "#333",
+        "tickColor": "#333",
+        "numTicks": "",
+        "labelOffset": 65,
+        "axisPadding": 0,
+        "target": 0,
+        "dataKey": "state"
+      },
+      "table": {
+        "label": "Data Table",
+        "expanded": true,
+        "limitHeight": false,
+        "height": "",
+        "caption": "",
+        "showDownloadUrl": false,
+        "showDataTableLink": true,
+        "indexLabel": "",
+        "download": false,
+        "showVertical": true,
+        "show": false
+      },
+      "orientation": "vertical",
+      "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"
+      },
+      "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
+      },
+      "useLogScale": false,
+      "filterBehavior": "Filter Change",
+      "highlightedBarValues": [],
+      "series": [
+        {
+          "dataKey": "Insured Rate",
+          "type": "Bar"
+        }
+      ],
+      "openModal": false,
+      "uid": "chart1684783399780",
+      "visualizationType": "Bar",
+      "dataKey": "data2",
+      "data": [
+        {
+          "Insured Rate": "43",
+          "state": "Alabama"
+        },
+        {
+          "Insured Rate": "63",
+          "state": "Georgia"
+        },
+        {
+          "Insured Rate": "53",
+          "state": "Florida"
+        }
+      ],
+      "dataDescription": {
+        "horizontal": false,
+        "series": false
+      },
+      "formattedData": [
+        {
+          "Insured Rate": 43,
+          "state": "Alabama"
+        },
+        {
+          "Insured Rate": 63,
+          "state": "Georgia"
+        },
+        {
+          "Insured Rate": 53,
+          "state": "Florida"
+        }
+      ],
+      "originalFormattedData": [
+        {
+          "Insured Rate": "43",
+          "state": "Alabama"
+        },
+        {
+          "Insured Rate": "63",
+          "state": "Georgia"
+        },
+        {
+          "Insured Rate": "53",
+          "state": "Florida"
+        }
+      ]
+    }
+  },
+  "table": {
+    "downloadImageButton": true,
+    "downloadPdfButton": true,
+    "download": true,
+    "show": true
+  },
+  "type": "dashboard",
+  "datasets": {
+    "data1": {
+      "data": [
+        {
+          "Insured Rate": "43",
+          "date": "2022-01-02",
+          "state": "Alabama"
+        },
+        {
+          "Insured Rate": "53",
+          "date": "2022-02-02",
+          "state": "Alabama"
+        },
+        {
+          "Insured Rate": "23",
+          "date": "2022-03-02",
+          "state": "Alabama"
+        },
+        {
+          "Insured Rate": "13",
+          "date": "2022-01-02",
+          "state": "Georgia"
+        },
+        {
+          "Insured Rate": "63",
+          "date": "2022-02-02",
+          "state": "Georgia"
+        },
+        {
+          "Insured Rate": "40",
+          "date": "2022-03-02",
+          "state": "Georgia"
+        },
+        {
+          "Insured Rate": "30",
+          "date": "2022-01-02",
+          "state": "Florida"
+        },
+        {
+          "Insured Rate": "55",
+          "date": "2022-02-02",
+          "state": "Florida"
+        },
+        {
+          "Insured Rate": "90",
+          "date": "2022-03-02",
+          "state": "Florida"
+        }
+      ]
+    },
+    "data2": {
+      "data": [
+        {
+          "Insured Rate": 43,
+          "state": "Alabama"
+        },
+        {
+          "Insured Rate": 63,
+          "state": "Georgia"
+        },
+        {
+          "Insured Rate": 53,
+          "state": "Florida"
+        }
+      ]
+    }
+  },
+  "runtime": {},
+  "uuid": 1684783370106
+}

package/index.html

@@ -19,9 +19,10 @@
   </head>
 
   <body>
-    <div class="react-container" data-config="/examples/default.json"></div>
+    <!-- <div class="react-container" data-config="/examples/default.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/default-multi-dataset.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/default-filter-control.json"></div> -->
+    <div class="react-container" data-config="/examples/shared-filters.json"></div>
     <!-- <div class="react-container" data-config="/examples/private/totals.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/private/totals-two.json"></div> -->
     <script type="module" src="./src/index.jsx"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/dashboard",
-  "version": "4.23.5",
+  "version": "4.23.6",
   "description": "React component for combining multiple visualizations into a single dashboard",
   "moduleName": "CdcDashboard",
   "main": "dist/cdcdashboard",
@@ -25,13 +25,13 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/chart": "^4.23.5",
-    "@cdc/core": "^4.23.5",
-    "@cdc/data-bite": "^4.23.5",
-    "@cdc/filtered-text": "^4.23.5",
-    "@cdc/map": "^4.23.5",
-    "@cdc/markup-include": "^4.23.5",
-    "@cdc/waffle-chart": "^4.23.5",
+    "@cdc/chart": "^4.23.6",
+    "@cdc/core": "^4.23.6",
+    "@cdc/data-bite": "^4.23.6",
+    "@cdc/filtered-text": "^4.23.6",
+    "@cdc/map": "^4.23.6",
+    "@cdc/markup-include": "^4.23.6",
+    "@cdc/waffle-chart": "^4.23.6",
     "html-react-parser": "^3.0.8",
     "js-base64": "^2.5.2",
     "papaparse": "^5.3.0",
@@ -47,5 +47,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "34add3436994ca3cf13e51f313add4d70377f53e"
+  "gitHead": "aaed0388b487adfeb3e7e278b4ce74df09cbaade"
 }

package/src/CdcDashboard.jsx

@@ -31,10 +31,11 @@ import Header from './components/Header'
 import defaults from './data/initial-state'
 import Widget from './components/Widget'
 import DataTable from './components/DataTable'
-import CoveMediaControls from '@cdc/core/components/CoveMediaControls'
+import MediaControls from '@cdc/core/components/MediaControls'
 
 import './scss/main.scss'
 import '@cdc/core/styles/v2/main.scss'
+import AdvancedEditor from '@cdc/core/components/AdvancedEditor'
 
 /* eslint-disable react-hooks/exhaustive-deps */
 
@@ -75,7 +76,7 @@ const addVisualization = (type, subType) => {
   return newVisualizationConfig
 }
 
-const VisualizationsPanel = () => (
+const VisualizationsPanel = ({ loadConfig, config }) => (
   <div className='visualizations-panel'>
     <p style={{ fontSize: '14px' }}>Click and drag an item onto the grid to add it to your dashboard.</p>
     <span className='subheading-3'>Chart</span>
@@ -97,6 +98,8 @@ const VisualizationsPanel = () => (
       <Widget addVisualization={() => addVisualization('markup-include', '')} type='markup-include' />
       <Widget addVisualization={() => addVisualization('filtered-text', '')} type='filtered-text' />
     </div>
+    <span className='subheading-3'>Advanced</span>
+    <AdvancedEditor loadConfig={loadConfig} state={config} />
   </div>
 )
 
@@ -268,7 +271,6 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
     }
 
     setData(datasets)
-
     updateConfig(newConfig, datasets)
     setLoading(false)
   }
@@ -375,7 +377,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
         if (applicableFilters.length > 0) {
           const visualization = newConfig.visualizations[visualizationKey]
 
-          const formattedData = getFormattedData(visualization.data, visualization.dataDescription)
+          const formattedData = getFormattedData(newConfig.datasets[visualization.dataKey] && newConfig.datasets[visualization.dataKey].data ? newConfig.datasets[visualization.dataKey].data : visualization.data, visualization.dataDescription)
 
           newFilteredData[visualizationKey] = filterData(applicableFilters, formattedData || visualization.data || (dataOverride || data)[visualization.dataKey])
         }
@@ -435,6 +437,9 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
       })
 
       setFilteredData(newFilteredData)
+      if (dashboardConfig.sharedFilters[index].active === dashboardConfig.sharedFilters[index].resetLabel) {
+        setFilteredData(data)
+      }
     }
 
     const announceChange = text => {}
@@ -444,6 +449,14 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
 
       const values = []
 
+      if (singleFilter.resetLabel) {
+        values.push(
+          <option key={`${singleFilter.resetLabel}-option-${index}`} value={singleFilter.resetLabel}>
+            {singleFilter.resetLabel}
+          </option>
+        )
+      }
+
       singleFilter.values.forEach((filterOption, index) => {
         values.push(
           <option key={`${singleFilter.key}-option-${index}`} value={filterOption}>
@@ -538,7 +551,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
             body = (
               <>
                 <Header tabSelected={tabSelected} setTabSelected={setTabSelected} back={back} subEditor='Chart' />
-                <CdcChart key={visualizationKey} config={visualizationConfig} isEditor={true} isDebug={isDebug} setConfig={updateConfig} setSharedFilter={setsSharedFilter ? setSharedFilter : undefined} isDashboard={true} />
+                <CdcChart key={visualizationKey} config={visualizationConfig} isEditor={true} isDebug={isDebug} setConfig={updateConfig} setSharedFilter={setsSharedFilter ? setSharedFilter : undefined} setSharedFilterValue={setSharedFilterValue} dashboardConfig={config} isDashboard={true} />
               </>
             )
             break
@@ -595,7 +608,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
         <DndProvider backend={HTML5Backend}>
           <Header tabSelected={tabSelected} setTabSelected={setTabSelected} preview={preview} setPreview={setPreview} />
           <div className='layout-container'>
-            <VisualizationsPanel />
+            <VisualizationsPanel loadConfig={loadConfig} config={config} />
             <Grid />
           </div>
         </DndProvider>
@@ -666,6 +679,7 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
                                 <CdcChart
                                   key={col.widget}
                                   config={visualizationConfig}
+                                  dashboardConfig={config}
                                   isEditor={false}
                                   setConfig={newConfig => {
                                     updateChildConfig(col.widget, newConfig)
@@ -746,8 +760,8 @@ export default function CdcDashboard({ configUrl = '', config: configObj = undef
 
           {/* Image or PDF Inserts */}
           <section className='download-buttons'>
-            {config.table.downloadImageButton && <CoveMediaControls.Button title='Download Dashboard as Image' type='image' state={config} text='Download Dashboard Image' elementToCapture={imageId} />}
-            {config.table.downloadPdfButton && <CoveMediaControls.Button title='Download Dashboard as PDF' type='pdf' state={config} text='Download Dashboard PDF' elementToCapture={imageId} />}
+            {config.table.downloadImageButton && <MediaControls.Button title='Download Dashboard as Image' type='image' state={config} text='Download Dashboard Image' elementToCapture={imageId} />}
+            {config.table.downloadPdfButton && <MediaControls.Button title='Download Dashboard as PDF' type='pdf' state={config} text='Download Dashboard PDF' elementToCapture={imageId} />}
           </section>
 
           {/* Data Table */}