@pagamio/frontend-commons-lib 0.8.209 → 0.8.210

package/lib/api/client.js

@@ -322,7 +322,8 @@ export class ApiClient {
             data = response;
         }
         if (this.config.onResponse) {
-            data = await this.config.onResponse(response, data);
+            const transformedData = await this.config.onResponse(response, data);
+            data = transformedData;
         }
         return data;
     }

package/lib/dashboard-visuals/hooks/useChartData.js

@@ -48,6 +48,9 @@ export const useChartData = (url, query, transform) => {
             lastDataRef.current = data;
             lastFetchTimeRef.current = Date.now();
         },
+        onError: (error) => {
+            console.error('[useChartData] Error fetching data', { url, query, error });
+        },
     });
     // Effect to update last fetch time when data changes
     useEffect(() => {
@@ -55,7 +58,7 @@ export const useChartData = (url, query, transform) => {
             lastDataRef.current = data;
             lastFetchTimeRef.current = Date.now();
         }
-    }, [data]);
+    }, [data, url]);
     const transformedData = transform ? transform(data) : data;
     const isEmpty = !error && !loading && Array.isArray(transformedData) ? !transformedData.length : transformedData === undefined;
     // Enhanced refresh function that uses intelligent caching without custom headers

package/lib/dashboard-visuals/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { FilterConfig } from './components/types';
+import { type DashboardApiPaths } from './utils';
 type FilterValue = string | string[] | Date | null | undefined;
 interface Config {
     title: string;
@@ -33,6 +34,8 @@ interface DashboardWrapperProps {
     resetFilters?: () => void;
     handleApplyFilters?: () => void;
     handleApplyTourFilters?: () => void;
+    /** Custom API paths for different domains*/
+    apiPaths?: DashboardApiPaths;
 }
 declare const DashboardWrapper: React.FC<DashboardWrapperProps>;
 export default DashboardWrapper;

package/lib/dashboard-visuals/index.js

@@ -7,7 +7,7 @@ import { FilterComponent, Tab } from '../components';
 import { useMediaQueries } from '../shared';
 import ErrorState from './components/ErrorState';
 import FilterComponentSkeleton from './components/FilterComponentSkeleton';
-import { DashboardPaths, getFilterOptionsData, getGridColProps } from './utils';
+import { defaultDashboardApiPaths, getFilterOptionsData, getGridColProps } from './utils';
 import componentRegistry from './visualRegistry';
 const OverviewContent = ({ visualData, renderContent, renderVisual }) => {
     return (_jsxs(_Fragment, { children: [renderContent(), _jsx("main", { children: visualData.map((section) => (_jsxs("div", { className: "mb-2", children: [section.sectionTitle && _jsx("h2", { className: "mb-2 text-1xl font-semibold", children: section.sectionTitle }), _jsx(Grid, { gutter: "md", align: "stretch", className: "mb-[6px]", children: section.data.map((visual) => {
@@ -51,7 +51,7 @@ const renderFilterComponent = ({ isLoading, error, filters, filterOptions, selec
             rangeKeys: filter.rangeKeys,
         })), showClearFilters: true, selectedFilters: selectedFilters, handleFilterChange: handleFilterChange, handleApplyFilters: handleApplyFilters, resetFilters: resetFilters, isNarrow: isNarrow }));
 };
-const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayout = false, handleFilterChange = () => { }, selectedFilters = {}, tourSelectedFilters = {}, resetFilters = () => { }, handleApplyFilters = () => { }, handleApplyTourFilters = () => { }, handleTourFilterChange = () => { }, }) => {
+const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayout = false, handleFilterChange = () => { }, selectedFilters = {}, tourSelectedFilters = {}, resetFilters = () => { }, handleApplyFilters = () => { }, handleApplyTourFilters = () => { }, handleTourFilterChange = () => { }, apiPaths = defaultDashboardApiPaths, }) => {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [tourError, setTourError] = useState(null);
@@ -99,7 +99,9 @@ const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayou
         const fetchFilters = (filters, isTour = false) => {
             filters.forEach((filter) => {
                 if (filter.query) {
-                    const queryUrl = isTour ? (filter.tourUrl ?? DashboardPaths.QUERY) : (filter.url ?? DashboardPaths.QUERY);
+                    // Use custom apiPaths.query if filter doesn't have its own url
+                    const defaultQueryUrl = apiPaths.query;
+                    const queryUrl = isTour ? (filter.tourUrl ?? defaultQueryUrl) : (filter.url ?? defaultQueryUrl);
                     fetchFilterData(filter.name, filter.valueKey, queryUrl, filter.query, isTour);
                 }
             });
@@ -108,7 +110,7 @@ const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayou
         if (config.tourFilters) {
             fetchFilters(config.tourFilters, true);
         }
-    }, [config.filters, isRefreshOpttonsQuery]);
+    }, [config.filters, isRefreshOpttonsQuery, apiPaths]);
     const handleRetry = () => {
         setIsRefreshOpttonsQuery((prev) => prev + 1);
     };
@@ -167,6 +169,11 @@ const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayou
             console.error(`Visual type "${metricData.type}" not recognized in section "${sectionTitle}" at visual index ${index}.`);
             return null;
         }
+        // Determine URL based on component type and custom apiPaths
+        // If metricData already has a custom url, use it; otherwise use apiPaths
+        const isTileType = metricData.type === 'Tile' || metricData.type === 'MetricSummaryCard';
+        const defaultUrl = isTileType ? apiPaths.metrics : apiPaths.query;
+        const url = metricData.url || defaultUrl;
         const props = {
             data: metricData.data,
             options: metricData.options,
@@ -179,9 +186,10 @@ const DashboardWrapper = ({ data, showVisualHeader = true, showEventsTabbedLayou
             themeColor: config.themeColor,
             currencyDisplaySymbol: metricData.currencyDisplaySymbol,
             ...metricData,
+            url, // Override url with apiPaths or metricData.url
         };
         return (_jsx(Grid.Col, { span: matchesSmall ? 12 : span, offset: offset, children: _jsx(VisualComponent, { ...props }) }, `visual-${sectionTitle}-${visual.id}`));
-    }, [config.themeColor, isXs, isSm]);
+    }, [config.themeColor, isXs, isSm, apiPaths]);
     const tabs = [
         {
             id: 1,

package/lib/dashboard-visuals/utils/api.d.ts

@@ -3,3 +3,9 @@ export declare enum DashboardPaths {
     QUERY = "/dashboard/query",
     METRICS = "/dashboard/metrics"
 }
+export interface DashboardApiPaths {
+    query: string;
+    metrics: string;
+    paged?: string;
+}
+export declare const defaultDashboardApiPaths: DashboardApiPaths;

package/lib/dashboard-visuals/utils/api.js

@@ -4,3 +4,9 @@ export var DashboardPaths;
     DashboardPaths["QUERY"] = "/dashboard/query";
     DashboardPaths["METRICS"] = "/dashboard/metrics";
 })(DashboardPaths || (DashboardPaths = {}));
+// Default paths matching the enum
+export const defaultDashboardApiPaths = {
+    query: DashboardPaths.QUERY,
+    metrics: DashboardPaths.METRICS,
+    paged: DashboardPaths.PAGED,
+};

package/lib/dashboard-visuals/visuals/Tile.js

@@ -6,9 +6,23 @@ import { useChartData } from '../hooks/useChartData';
 import { DashboardPaths, formatValue } from '../utils';
 const Tile = ({ query, title, format, url = DashboardPaths.METRICS, details, valueKey, previousValueKey, changeKey, currency: propCurrency, currencyDisplaySymbol, ...props }) => {
     const { data, error, loading, isEmpty, refresh } = useChartData(url, query);
-    // Safe default values
-    const value = data?.[valueKey] ?? 0;
-    const currency = propCurrency || data?.additionalData?.currency || undefined;
+    // Safe default values - handle both flat and nested data structures
+    let value = 0;
+    if (data) {
+        // Check if data is an array (events analytics format)
+        if (Array.isArray(data)) {
+            // Aggregate values across all items
+            value = data.reduce((sum, item) => {
+                const itemValue = Number(item[valueKey]) || 0;
+                return sum + itemValue;
+            }, 0);
+        }
+        else {
+            // Direct access for flat structure
+            value = data[valueKey] ?? 0;
+        }
+    }
+    const currency = propCurrency || (!Array.isArray(data) ? data?.additionalData?.currency : undefined) || undefined;
     return (_jsx(Card, { title: title, children: _jsx(ChartWrapper, { loading: loading && !data, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "flex justify-between", style: { height: '50px' }, children: _jsx("div", { className: "text-xl font-400", children: currency
                         ? formatPrice(Number(value.toFixed(2)), currency, 2, undefined, currencyDisplaySymbol)
                         : formatValue(Number(value.toFixed(2)), 'number') }) }) }) }));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.209",
+  "version": "0.8.210",
   "publishConfig": {
     "access": "public",
     "provenance": false