[risk=no] fixing some location map bugs (#1537)

* fixing some bugs

* fixing some bugs

Author: SrushtiGangireddy

public-ui/src/app/data-browser/charts/chart-stacked-age-gender/chart-stacked-age-gender-react.component.tsx

@@ -18,7 +18,7 @@ export const StackedColumnChartReactComponent = class extends React.Component<Pr
         super(props);
 
         const isSurvey = props.domain === "survey";
-        const filteredData = this.getFilteredData(props.ageGenderAnalysis, props.selectedResult, isSurvey);
+        const filteredData = this.getFilteredData(props.ageGenderAnalysis, props.selectedResult, props.domain);
 
         this.state = {
             options: {
@@ -77,7 +77,6 @@ export const StackedColumnChartReactComponent = class extends React.Component<Pr
                         const totalInGroup = this.series.chart.series
                             .map(s => s.data[this.point.index]?.y || 0)
                             .reduce((a, b) => a + b, 0);
-                        console.log(totalInGroup);
                         const percent = totalInGroup > 0 ? ((count / totalInGroup) * 100).toFixed(1) : '0';
 
                         return `
@@ -109,8 +108,28 @@ export const StackedColumnChartReactComponent = class extends React.Component<Pr
         };
     }
 
-    getFilteredData(data, selectedResult, isSurvey) {
-        if (isSurvey && selectedResult) {
+    componentDidUpdate(prevProps) {
+        // Check if the data has changed
+        if (prevProps.ageGenderAnalysis !== this.props.ageGenderAnalysis) {
+            const isSurvey = this.props.domain === "survey";
+            const filteredData = this.getFilteredData(this.props.ageGenderAnalysis, this.props.selectedResult, this.props.domain);
+
+            // Update the chart options with new data
+            this.setState({
+                options: {
+                    ...this.state.options,
+                    xAxis: {
+                        ...this.state.options.xAxis,
+                        categories: this.formatAgeCategories(filteredData)
+                    },
+                    series: this.formatAgeGenderData(filteredData)
+                }
+            });
+        }
+    }
+
+    getFilteredData(data, selectedResult, domain) {
+        if (domain && domain === "survey" && selectedResult) {
             const filteredResults = data.results.filter(r => r.stratum4 === selectedResult.stratum4);
             return { ...data, results: filteredResults };
         }
@@ -177,4 +196,4 @@ export const StackedColumnChartReactComponent = class extends React.Component<Pr
             </div>
         );
     }
-};
+};

public-ui/src/app/data-browser/components/heat-map/heat-map.component.tsx

@@ -181,6 +181,20 @@ export const HeatMapReactComponent =
             }, 100);
         }
 
+        componentDidUpdate(prevProps) {
+            if (prevProps.color !== this.props.color) {
+                // Update the chart's userOptions so regular states get the new hover color
+                const chartObj = this.chartRef.current?.chart;
+                if (chartObj) {
+                    (chartObj.userOptions as any).hoverColor = this.props.color;
+                }
+
+                // Update the options object with new color
+                this.options.hoverColor = this.props.color;
+                this.options.series[0].states.hover.color = getHoverColor(this.props.color);
+            }
+        }
+
         applyTerritoryColors() {
             const chartObj = this.chartRef.current?.chart;
             if (!chartObj || !chartObj.series || !chartObj.series[0]) return;
@@ -242,6 +256,7 @@ export const HeatMapReactComponent =
                 });
             });
         }
+
         componentWillUnmount() {
             // Loop over all groups
             Object.keys(this.domPathsByGroup).forEach(groupName => {
@@ -264,6 +279,7 @@ export const HeatMapReactComponent =
                 (pathEl as HTMLElement).style.fill = getHoverColor(this.props.color);
             });
         }
+
         handleMouseLeaveGroup(groupName) {
             const pathsInGroup = this.domPathsByGroup[groupName];
             pathsInGroup.forEach(pathEl => {
@@ -312,6 +328,7 @@ export const HeatMapReactComponent =
             }
             return output;
         }
+
         static getOriginalColor(series, keys: string[]) {
             keys.forEach(key => {
                 const point = series.data.find(pt => pt['hc-key'] === key);
@@ -324,8 +341,6 @@ export const HeatMapReactComponent =
             series.chart.redraw();
         }
 
-
-
         render() {
             return (<>
                 <style>{style}</style>

public-ui/src/app/data-browser/views/fitbit-view/fitbit-view-react.component.tsx

@@ -313,7 +313,7 @@ export const FitbitReactComponent = withRouteData(
                         {selectedAnalyses && selectedAnalyses.combinedAgeGenderAnalysis && (
                           <StackedColumnChartReactComponent
                             ageGenderAnalysis={selectedAnalyses.combinedAgeGenderAnalysis}
-                            selectedResult=""
+                            selectedResult={selectedResult}
                             domain="fitbit"
                           />
                         )}
@@ -326,7 +326,7 @@ export const FitbitReactComponent = withRouteData(
                         <HeatMapReactComponent
                           locationAnalysis={selectedAnalyses?.locationAnalysis}
                           domain="fitbit"
-                          selectedResult = ""
+                          selectedResult={selectedResult}
                           color = "" />
                       )}
                     </div>

public-ui/src/environments/environment.prod.ts

@@ -14,7 +14,7 @@ export const environment = {
   fitbitCDRUpdate: true,
   infiniteSrcoll: true,
   svVCFBrowser: false,
-  heatmap: false,
-  combinedAgeGenderChart: false,
+  heatmap: true,
+  combinedAgeGenderChart: true,
   geneLeads: false,
 };