Merge pull request plan4better#3638 from EPajares/main

Improvements dashboard builder

Author: EPajares

apps/web/components/builder/PanelContainer.tsx

@@ -313,6 +313,11 @@ export const Container: React.FC<ContainerProps> = ({
               ...(panel.config?.options?.style === "default" && {
                 justifyContent: panel.config?.position?.alignItems,
               }),
+              // Add minimal padding for clickable area to select panel (only in edit mode with widgets)
+              ...(!viewOnly &&
+                visibleWidgets.length > 0 && {
+                  p: 0.5,
+                }),
             }}>
             {/* Show empty message if widgets array is empty */}
             {visibleWidgets.length === 0 ? (

apps/web/components/builder/WidgetConfiguration.tsx

@@ -14,6 +14,7 @@ import {
   WidgetInfo,
   WidgetOptions,
   WidgetSetup,
+  WidgetStyle,
 } from "@/components/builder/widgets/common/WidgetCommonConfigs";
 import TabsWidgetConfig from "@/components/builder/widgets/elements/TabsWidgetConfig";
 
@@ -79,6 +80,7 @@ const WidgetConfiguration = ({ onChange, samePanelWidgets }: WidgetConfiguration
       <WidgetInfo config={selectedBuilderItem.config} onChange={handleConfigChange} />
       {hasDataConfig && <WidgetData config={selectedBuilderItem.config} onChange={handleConfigChange} />}
       <WidgetSetup config={selectedBuilderItem.config} onChange={handleConfigChange} />
+      <WidgetStyle config={selectedBuilderItem.config} onChange={handleConfigChange} />
       <WidgetOptions config={selectedBuilderItem.config} onChange={handleConfigChange} />
     </Stack>
   );

apps/web/components/builder/widgets/WidgetWrapper.tsx

@@ -125,7 +125,7 @@ const WidgetWrapper: React.FC<WidgetWrapperProps> = ({
   );
 
   return viewOnly ? (
-    <Box sx={{ width: "100%", p: 2, pointerEvents: "all" }}>{widgetContent}</Box>
+    <Box sx={{ width: "100%", p: 1, pointerEvents: "all" }}>{widgetContent}</Box>
   ) : (
     <DraggableWidgetContainer widget={widget} onWidgetDelete={onWidgetDelete}>
       {widgetContent}

apps/web/components/builder/widgets/chart/Categories.tsx

@@ -16,43 +16,109 @@ import { StaleDataLoader } from "@/components/builder/widgets/common/StaleDataLo
 import { WidgetStatusContainer } from "@/components/builder/widgets/common/WidgetStatusContainer";
 
 const DEFAULT_COLOR = "#0e58ff";
+const DEFAULT_HOVER_COLOR = "#3b82f6";
+const DEFAULT_SELECTED_COLOR = "#f5b704";
 const OPACITY_MODIFIER = "33";
 
 export const CategoriesChartWidget = ({ config: rawConfig }: { config: CategoriesChartSchema }) => {
   const { t, i18n } = useTranslation("common");
   const theme = useTheme();
-  const { config, queryParams, layerId } = useChartWidget(
+  const { config, queryParams, baseQueryParams, layerId } = useChartWidget(
     rawConfig,
     categoriesChartConfigSchema,
     aggregationStatsQueryParams
   );
 
+  // Determine if we're in highlight mode
+  const isHighlightMode = config?.options?.selection_response === "highlight";
+
+  // In highlight mode: always fetch full data for main display
+  // In filter mode: use filtered data
+  const mainQueryParams = isHighlightMode ? baseQueryParams : queryParams;
+
   const { aggregationStats, isLoading, isError } = useProjectLayerAggregationStats(
     layerId,
+    mainQueryParams as AggregationStatsQueryParams
+  );
+
+  // Fetch selected/filtered data (only in highlight mode)
+  const { aggregationStats: selectedStats, isLoading: isSelectedLoading } = useProjectLayerAggregationStats(
+    isHighlightMode ? layerId : undefined,
     queryParams as AggregationStatsQueryParams
   );
 
   // Data handling
   const originalData = useMemo(() => aggregationStats?.items || [], [aggregationStats]);
 
+  // Only show highlight visualization when there's actually filtered data
+  const showHighlight = useMemo(() => {
+    if (!isHighlightMode || !selectedStats || !aggregationStats) return false;
+    // Calculate total counts to check if there's any filtering
+    const totalMain = originalData.reduce((sum, item) => sum + item.operation_value, 0);
+    const totalSelected = (selectedStats.items || []).reduce((sum, item) => sum + item.operation_value, 0);
+    return totalSelected < totalMain;
+  }, [isHighlightMode, selectedStats, aggregationStats, originalData]);
+
+  // Create a map of selected counts by category
+  const selectedCountMap = useMemo(() => {
+    if (!showHighlight || !selectedStats?.items) return new Map<string, number>();
+    return new Map(selectedStats.items.map((item) => [item.grouped_value, item.operation_value]));
+  }, [showHighlight, selectedStats]);
+
+  // Apply custom order if defined
+  const orderedData = useMemo(() => {
+    if (!originalData.length) return originalData;
+
+    const customOrder = config?.setup?.custom_order;
+    if (!customOrder || customOrder.length === 0) {
+      return originalData;
+    }
+
+    // Sort by custom order - items in customOrder come first in that order,
+    // items not in customOrder are excluded
+    const orderMap = new Map(customOrder.map((val, idx) => [val, idx]));
+    return originalData
+      .filter((item) => orderMap.has(item.grouped_value))
+      .sort((a, b) => {
+        const aIdx = orderMap.get(a.grouped_value) ?? Infinity;
+        const bIdx = orderMap.get(b.grouped_value) ?? Infinity;
+        return aIdx - bIdx;
+      });
+  }, [originalData, config?.setup?.custom_order]);
+
   const displayData = useMemo(() => {
-    if (originalData.length > 0) return originalData;
+    if (orderedData.length > 0) return orderedData;
     return [{ grouped_value: t("no_data"), operation_value: 0 }];
-  }, [originalData, t]);
+  }, [orderedData, t]);
 
   // Calculate max value for progress scaling
   const maxValue = useMemo(() => {
-    return originalData.length > 0 ? Math.max(...originalData.map((item) => item.operation_value)) : 1; // For "No data" state
-  }, [originalData]);
+    return orderedData.length > 0 ? Math.max(...orderedData.map((item) => item.operation_value)) : 1; // For "No data" state
+  }, [orderedData]);
 
   const [activeCategory, setActiveCategory] = useState<string | undefined>();
   const [isHovering, setIsHovering] = useState(false);
 
-  const getColor = (category: (typeof displayData)[number]) => {
-    const baseColor = originalData.length > 0 ? config?.options?.color || DEFAULT_COLOR : "#e0e0e0";
-    const shouldDim = originalData.length === 0 || (isHovering && activeCategory !== category.grouped_value);
+  // Colors
+  const baseColor = config?.options?.color || DEFAULT_COLOR;
+  const hoverColor = config?.options?.highlight_color || DEFAULT_HOVER_COLOR;
+  const selectedColor = config?.options?.selected_color || DEFAULT_SELECTED_COLOR;
+
+  const getColor = (category: (typeof displayData)[number], isSelected: boolean) => {
+    const isActive = activeCategory === category.grouped_value;
+    const hasData = orderedData.length > 0;
+
+    if (!hasData) return "#e0e0e0";
+
+    // In highlight mode with selections shown
+    if (showHighlight && isSelected) {
+      if (isActive) return hoverColor;
+      return selectedColor;
+    }
 
-    return shouldDim ? `${baseColor}${OPACITY_MODIFIER}` : baseColor;
+    if (isActive) return hoverColor;
+    if (isHovering && !isActive) return `${baseColor}${OPACITY_MODIFIER}`;
+    return baseColor;
   };
 
   const isChartConfigured = useMemo(() => {
@@ -62,7 +128,7 @@ export const CategoriesChartWidget = ({ config: rawConfig }: { config: Categorie
   return (
     <>
       <WidgetStatusContainer
-        isLoading={isLoading && !aggregationStats && !isError}
+        isLoading={(isLoading || isSelectedLoading) && !aggregationStats && !isError}
         isNotConfigured={!isChartConfigured}
         isError={isError}
         height={150}
@@ -84,7 +150,10 @@ export const CategoriesChartWidget = ({ config: rawConfig }: { config: Categorie
             p: 2,
           }}>
           {displayData.map((category) => {
-            const percentage = (category.operation_value / maxValue) * 100;
+            const totalValue = category.operation_value;
+            const selectedValue = showHighlight ? selectedCountMap.get(category.grouped_value) || 0 : 0;
+            const percentage = (totalValue / maxValue) * 100;
+            const selectedPercentage = showHighlight ? (selectedValue / maxValue) * 100 : 0;
             const displayValue = formatNumber(
               category.operation_value,
               config.options?.format,
@@ -110,28 +179,69 @@ export const CategoriesChartWidget = ({ config: rawConfig }: { config: Categorie
                     {category.grouped_value}
                   </Typography>
                   <Typography variant="caption" fontWeight={500}>
-                    {displayValue}
+                    {showHighlight && selectedValue > 0 ? `${selectedValue} / ${displayValue}` : displayValue}
                   </Typography>
                 </Box>
-                <LinearProgress
-                  variant="determinate"
-                  value={percentage}
-                  sx={{
-                    height: 8,
-                    borderRadius: 4,
-                    backgroundColor: theme.palette.grey[200],
-                    "& .MuiLinearProgress-bar": {
+                {showHighlight ? (
+                  // Stacked progress bar for highlight mode
+                  <Box sx={{ position: "relative", height: 8 }}>
+                    {/* Base bar (full width for total) */}
+                    <LinearProgress
+                      variant="determinate"
+                      value={percentage}
+                      sx={{
+                        position: "absolute",
+                        width: "100%",
+                        height: 8,
+                        borderRadius: 4,
+                        backgroundColor: theme.palette.grey[200],
+                        "& .MuiLinearProgress-bar": {
+                          borderRadius: 4,
+                          backgroundColor: getColor(category, false),
+                        },
+                      }}
+                    />
+                    {/* Selected bar (overlay showing selected portion) */}
+                    {selectedValue > 0 && (
+                      <LinearProgress
+                        variant="determinate"
+                        value={selectedPercentage}
+                        sx={{
+                          position: "absolute",
+                          width: "100%",
+                          height: 8,
+                          borderRadius: 4,
+                          backgroundColor: "transparent",
+                          "& .MuiLinearProgress-bar": {
+                            borderRadius: 4,
+                            backgroundColor: getColor(category, true),
+                          },
+                        }}
+                      />
+                    )}
+                  </Box>
+                ) : (
+                  // Normal single progress bar
+                  <LinearProgress
+                    variant="determinate"
+                    value={percentage}
+                    sx={{
+                      height: 8,
                       borderRadius: 4,
-                      backgroundColor: getColor(category),
-                    },
-                  }}
-                />
+                      backgroundColor: theme.palette.grey[200],
+                      "& .MuiLinearProgress-bar": {
+                        borderRadius: 4,
+                        backgroundColor: getColor(category, false),
+                      },
+                    }}
+                  />
+                )}
               </Box>
             );
           })}
         </Box>
       )}
-      <StaleDataLoader isLoading={isLoading} hasData={!!originalData.length} />
+      <StaleDataLoader isLoading={isLoading || isSelectedLoading} hasData={!!orderedData.length} />
     </>
   );
 };