Merge pull request #2193 from CDCgov/dev

Dev

Author: adamdoe

package.json

@@ -64,7 +64,9 @@
     "lodash.get": "^4.4.2",
     "lodash.merge": "^4.6.2",
     "mini-svg-data-uri": "^1.2.3",
+    "patch-package": "^8.0.0",
     "pathe": "^1.1.0",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.1",
     "pretty": "^2.0.0",
     "prop-types": "^15.8.1",
@@ -99,14 +101,15 @@
     "test-storybook": "npx test-storybook",
     "storybook-docs": "storybook dev --docs",
     "build-storybook": "storybook build",
+    "postinstall": "patch-package",
     "predeploy": "storybook build --output-dir .storybook_build && touch .storybook_build/.nojekyll",
     "deploy": "gh-pages -d .storybook_build -t true",
     "lint": "eslint packages/*/src/**/*.{js,jsx,ts,tsx}",
     "prepare": "husky install"
   },
   "dependencies": {
     "@visx/annotation": "^3.3.0",
-    "@visx/brush": "^3.0.1",
+    "@visx/brush": "^3.12.0",
     "@visx/legend": "3.12.0",
     "@visx/pattern": "^3.0.0",
     "@visx/responsive": "^2.10.0",

packages/chart/index.html

@@ -71,9 +71,16 @@ import { getBoxPlotConfig } from './helpers/getBoxPlotConfig'
 import { getComboChartConfig } from './helpers/getComboChartConfig'
 import { getExcludedData } from './helpers/getExcludedData'
 import { getColorScale } from './helpers/getColorScale'
+import { getTransformedData } from './helpers/getTransformedData'
+import { getPiePercent } from './helpers/getPiePercent'
+
 // styles
 import './scss/main.scss'
 import { getInitialState, reducer } from './store/chart.reducer'
+import { VizFilter } from '@cdc/core/types/VizFilter'
+import { getNewRuntime } from './helpers/getNewRuntime'
+import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
+import { Datasets } from '@cdc/core/types/DataSet'
 
 interface CdcChartProps {
   config?: ChartConfig
@@ -87,6 +94,7 @@ interface CdcChartProps {
   setSharedFilter?: (filter: any) => void
   setSharedFilterValue?: (value: any) => void
   dashboardConfig?: DashboardConfig
+  datasets?: Datasets
 }
 const CdcChart: React.FC<CdcChartProps> = ({
   config: configObj,
@@ -98,7 +106,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
   link,
   setSharedFilter,
   setSharedFilterValue,
-  dashboardConfig
+  dashboardConfig,
+  datasets
 }) => {
   const transform = new DataTransform()
   const initialState = getInitialState(configObj)
@@ -130,10 +139,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
   }
 
-  const setFiltersData = (filteredData: object[]): void => {
-    dispatch({ type: 'SET_FILTERED_DATA', payload: filteredData })
-  }
-
   const legendRef = useRef(null)
   const parentRef = useRef(null)
 
@@ -160,7 +165,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
   const convertLineToBarGraph = isConvertLineToBarGraph(config, filteredData)
 
-  const prepareConfig = async (loadedConfig: ChartConfig) => {
+  const prepareConfig = (loadedConfig: ChartConfig) => {
     let newConfig = _.defaultsDeep(loadedConfig, defaults)
     _.defaultsDeep(newConfig, {
       table: { showVertical: false }
@@ -340,6 +345,30 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
   }
 
+  const setFilters = (newFilters: VizFilter[]) => {
+    if (!config.dynamicSeries) {
+      const _newFilters = addValuesToFilters(newFilters, excludedData)
+      setConfig({
+        ...config,
+        filters: _newFilters
+      })
+    }
+
+    if (config.filterBehavior === 'Filter Change' || config.filterBehavior === 'Apply Button') {
+      const newFilteredData = filterVizData(newFilters, excludedData)
+
+      dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
+      if (config.dynamicSeries) {
+        const runtime = getNewRuntime(config, newFilteredData)
+        setConfig({
+          ...config,
+          filters: newFilters,
+          runtime
+        })
+      }
+    }
+  }
+
   // Observes changes to outermost container and changes viewport size in state
   const resizeObserver = new ResizeObserver(entries => {
     for (let entry of entries) {
@@ -378,7 +407,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
       if (newConfig.dataUrl && !urlFilters) {
         // handle urls with spaces in the name.
         if (newConfig.dataUrl) newConfig.dataUrl = `${newConfig.dataUrl}`
-        let newData = await fetchRemoteData(newConfig.dataUrl, 'Chart')
+        let newData = await fetchRemoteData(newConfig.dataUrl)
 
         if (newData && newConfig.dataDescription) {
           newData = transform.autoStandardize(newData)
@@ -399,12 +428,18 @@ const CdcChart: React.FC<CdcChartProps> = ({
     }
     return newConfig
   }
+
   useEffect(() => {
     const load = async () => {
       try {
         if (configObj) {
           const preparedConfig = await prepareConfig(configObj)
           const preppedData = await prepareData(preparedConfig)
+
+          if (preparedConfig?.formattedData?.length) {
+            preppedData.data = preparedConfig.formattedData
+          }
+
           dispatch({ type: 'SET_STATE_DATA', payload: preppedData.data })
           dispatch({ type: 'SET_EXCLUDED_DATA', payload: preppedData.data })
           updateConfig(preparedConfig, preppedData.data)
@@ -491,7 +526,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
   // Called on legend click, highlights/unhighlights the data series with the given label
   const highlight = (label: Label): void => {
-    if (seriesHighlight.length + 1 === config.runtime.seriesKeys.length && config.visualizationType !== 'Forecasting') {
+    if (
+      seriesHighlight.length + 1 === config.runtime.seriesKeys.length &&
+      config.visualizationType !== 'Forecasting' &&
+      !seriesHighlight.includes(label.datum)
+    ) {
       return handleShowAll()
     }
 
@@ -589,8 +628,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
         rightSuffix,
         bottomPrefix,
         bottomSuffix,
-        bottomAbbreviated,
-        onlyShowTopPrefixSuffix
+        bottomAbbreviated
       }
     } = config
 
@@ -683,9 +721,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (addColPrefix && axis === 'left') {
       result = addColPrefix + result
     } else {
-      // if onlyShowTopPrefixSuffix only show top prefix
-      const suppressAllButLast = onlyShowTopPrefixSuffix && length - 1 !== index
-      if (prefix && axis === 'left' && !suppressAllButLast) {
+      if (prefix && axis === 'left') {
         result += prefix
       }
     }
@@ -704,7 +740,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     if (addColSuffix && axis === 'left') {
       result += addColSuffix
     } else {
-      if (suffix && axis === 'left' && !onlyShowTopPrefixSuffix) {
+      if (suffix && axis === 'left') {
         result += suffix
       }
     }
@@ -759,6 +795,10 @@ const CdcChart: React.FC<CdcChartProps> = ({
   const getTableRuntimeData = () => {
     if (visualizationType === 'Sankey') return config?.data?.[0]?.tableData
     const data = filteredData || excludedData
+    if (config.visualizationType === 'Pie' && !config.dataFormat?.showPiePercent) {
+      return getPiePercent(data, config?.yAxis?.dataKey)
+    }
+
     const dynamicSeries = config.series.find(series => !!series.dynamicCategory)
     if (!dynamicSeries) return data
     const usedColumns = Object.values(config.columns)
@@ -825,7 +865,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
 
     body = (
       <>
-        {isEditor && <EditorPanel />}
+        {isEditor && <EditorPanel datasets={datasets} />}
         <Layout.Responsive isEditor={isEditor}>
           {config.newViz && <Confirm updateConfig={updateConfig} config={config} />}
           {undefined === config.newViz && isEditor && config.runtime && config.runtime?.editorErrorMessage && (
@@ -859,11 +899,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
                 {config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && (
                   <Filters
                     config={config}
-                    setConfig={setConfig}
-                    setFilteredData={setFiltersData}
-                    filteredData={filteredData}
+                    setFilters={setFilters}
                     excludedData={excludedData}
-                    filterData={filterVizData}
                     dimensions={dimensions}
                   />
                 )}
@@ -940,11 +977,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
                       <>
                         <Filters
                           config={config}
-                          setConfig={setConfig}
-                          setFilteredData={setFiltersData}
-                          filteredData={filteredData}
+                          setFilters={setFilters}
                           excludedData={excludedData}
-                          filterData={filterVizData}
                           dimensions={dimensions}
                         />
                         {config?.introText && (
@@ -1015,7 +1049,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
                   (config.visualizationType === 'Sankey' && config.table.show)) && (
                   <DataTable
                     /* changing the "key" will force the table to re-render
-                    when the default sort changes while editing */
+                      when the default sort changes while editing */
                     key={dataTableDefaultSortBy}
                     config={pivotDynamicSeries(config)}
                     rawData={
@@ -1041,8 +1075,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
                 )}
                 {config?.annotations?.length > 0 && <Annotation.Dropdown />}
                 {/* show pdf or image button */}
-                {config?.footnotes && <section className='footnotes pt-2 mt-4'>{parse(config.footnotes)}</section>}
+                {config?.legacyFootnotes && (
+                  <section className='footnotes pt-2 mt-4'>{parse(config.legacyFootnotes)}</section>
+                )}
               </div>
+              <FootnotesStandAlone
+                config={configObj.footnotes}
+                filters={config.filters?.filter(f => f.filterFootnotes)}
+              />
             </div>
           )}
         </Layout.Responsive>
@@ -1100,7 +1140,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
     setSharedFilterValue,
     svgRef,
     tableData: filteredData || excludedData,
-    transformedData: clean(filteredData || excludedData),
+    transformedData: getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean }),
     twoColorPalette,
     unfilteredData: _.cloneDeep(stateData),
     updateConfig