@visns-studio/visns-components 5.3.4 → 5.3.6

package/package.json

@@ -78,7 +78,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.3.4",
+    "version": "5.3.6",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/generic/GenericDashboard.jsx

@@ -112,10 +112,14 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                 }
 
                 if (widget.api?.url && widget.api?.method) {
+                    const requestParams = {
+                        ...widgetFilters,
+                        ...(widget.api.params || {}),
+                    };
                     return CustomFetch(
                         widget.api.url,
                         widget.api.method,
-                        widgetFilters
+                        requestParams
                     );
                 }
                 return null;
@@ -515,9 +519,64 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                         <ResponsivePie data={widgetData} {...widget.props} />
                     );
                 case 'bar': {
-                    if (widgetData.keys) {
-                        widget.props.keys = widgetData.keys;
+                    // Handle both data structures
+                    let barData = [];
+                    let colors = {};
+                    let keys = [];
+
+                    // Handle new data structure (from your first example)
+                    if (
+                        widgetData.data &&
+                        Array.isArray(widgetData.data) &&
+                        widgetData.colors
+                    ) {
+                        barData = widgetData.data;
+                        colors = widgetData.colors;
+                        // Extract keys from the first data item, excluding 'month' or any other index field
+                        keys = Object.keys(barData[0] || {}).filter(
+                            (key) => key !== 'month'
+                        );
                     }
+                    // Handle newer data structure (from your second example)
+                    else if (
+                        widgetData.data &&
+                        Array.isArray(widgetData.data) &&
+                        widgetData.keys
+                    ) {
+                        barData = widgetData.data;
+                        keys = widgetData.keys;
+                        // Extract colors from the first data item
+                        if (barData[0]) {
+                            keys.forEach((key) => {
+                                const colorKey = `${key}Color`;
+                                if (barData[0][colorKey]) {
+                                    colors[key] = barData[0][colorKey];
+                                }
+                            });
+                        }
+                    }
+                    // Handle legacy data structure
+                    else {
+                        barData =
+                            widgetData.bar?.data ||
+                            widgetData.data ||
+                            widgetData;
+                        if (widgetData.keys) {
+                            keys = widgetData.keys;
+                        }
+                    }
+
+                    // Set up colors if they exist
+                    if (Object.keys(colors).length > 0) {
+                        widget.props.colors = ({ id }) => colors[id];
+                    }
+
+                    // Set keys in props if they exist
+                    if (keys.length > 0) {
+                        widget.props.keys = keys;
+                    }
+
+                    // Handle legend setup
                     let legendMapping = {};
                     if (widget.legend) {
                         legendMapping = widget.legend.reduce((acc, curr) => {
@@ -544,14 +603,14 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                         };
                         widget.props.tooltip = CustomTooltip;
                     }
-                    const barData =
-                        widgetData.bar?.data || widgetData.data || widgetData;
+
                     if (barData?.length > 0) {
                         return (
                             <div style={{ height: widget.height || '600px' }}>
                                 <ResponsiveBar
                                     key={`${widget.id}-${widget.size}`}
                                     data={barData}
+                                    indexBy="month"
                                     {...widget.props}
                                 />
                             </div>