@pagamio/frontend-commons-lib 0.8.230 → 0.8.232

package/lib/dashboard-visuals/v2/components/DashboardChartRow.js

@@ -53,11 +53,11 @@ const ChartRenderer = ({ config, loading }) => {
                 // Flat array: { name, value }[] - convert to series format
                 const categories = data.map((d) => d.name);
                 const series = [{ name: 'Value', data: data.map((d) => d.value) }];
-                return (_jsx(DashboardCard, { title: config.title, subtitle: config.subtitle, actions: config.action, footer: config.footer, className: config.cardClassName, children: _jsx(BarChartV2, { series: series, categories: categories, height: chartHeight, colors: chartColors, horizontal: config.barOptions?.horizontal, stacked: config.barOptions?.stacked, className: config.chartClassName }) }));
+                return (_jsx(DashboardCard, { title: config.title, subtitle: config.subtitle, actions: config.action, footer: config.footer, className: config.cardClassName, children: _jsx(BarChartV2, { series: series, categories: categories, height: chartHeight, colors: chartColors, horizontal: config.barOptions?.horizontal, stacked: config.barOptions?.stacked, distributed: config.barOptions?.distributed, options: config.options, className: config.chartClassName }) }));
             }
             else {
                 // Series format
-                return (_jsx(DashboardCard, { title: config.title, subtitle: config.subtitle, actions: config.action, footer: config.footer, className: config.cardClassName, children: _jsx(BarChartV2, { series: data.series, categories: data.categories, height: chartHeight, colors: chartColors, horizontal: config.barOptions?.horizontal, stacked: config.barOptions?.stacked, className: config.chartClassName }) }));
+                return (_jsx(DashboardCard, { title: config.title, subtitle: config.subtitle, actions: config.action, footer: config.footer, className: config.cardClassName, children: _jsx(BarChartV2, { series: data.series, categories: data.categories, height: chartHeight, colors: chartColors, horizontal: config.barOptions?.horizontal, stacked: config.barOptions?.stacked, distributed: config.barOptions?.distributed, options: config.options, className: config.chartClassName }) }));
             }
         }
         case 'donut': {
@@ -65,17 +65,17 @@ const ChartRenderer = ({ config, loading }) => {
             const data = config.data;
             const series = data.map((d) => d.value);
             const labels = data.map((d) => d.name);
-            return (_jsx(DashboardCard, { title: config.title, subtitle: config.subtitle, actions: config.action, footer: config.footer, className: config.cardClassName, children: _jsx(DonutChartV2, { series: series, labels: labels, height: chartHeight, colors: chartColors || data.map((d) => d.color).filter(Boolean), showLegend: config.donutOptions?.showLegend, legendPosition: config.donutOptions?.legendPosition, showLabels: config.donutOptions?.showLabels, className: config.chartClassName }) }));
+            return (_jsx(DashboardCard, { title: config.title, subtitle: config.subtitle, actions: config.action, footer: config.footer, className: config.cardClassName, children: _jsx(DonutChartV2, { series: series, labels: labels, height: chartHeight, colors: chartColors || data.map((d) => d.color).filter(Boolean), showLegend: config.donutOptions?.showLegend, legendPosition: config.donutOptions?.legendPosition, showLabels: config.donutOptions?.showLabels, options: config.options, className: config.chartClassName }) }));
         }
         case 'line': {
             // Line chart expects series: { name, data }[] and categories: string[]
             const data = config.data;
-            return (_jsx(DashboardCard, { title: config.title, subtitle: config.subtitle, actions: config.action, footer: config.footer, className: config.cardClassName, children: _jsx(LineChartV2, { series: data.series, categories: data.categories, height: chartHeight, colors: chartColors, className: config.chartClassName }) }));
+            return (_jsx(DashboardCard, { title: config.title, subtitle: config.subtitle, actions: config.action, footer: config.footer, className: config.cardClassName, children: _jsx(LineChartV2, { series: data.series, categories: data.categories, height: chartHeight, colors: chartColors, options: config.options, className: config.chartClassName }) }));
         }
         case 'area': {
             // Area chart expects series: { name, data }[] and categories: string[]
             const data = config.data;
-            return (_jsx(DashboardCard, { title: config.title, subtitle: config.subtitle, actions: config.action, footer: config.footer, className: config.cardClassName, children: _jsx(AreaChartV2, { series: data.series, categories: data.categories, height: chartHeight, colors: chartColors, stacked: config.areaOptions?.stacked, className: config.chartClassName }) }));
+            return (_jsx(DashboardCard, { title: config.title, subtitle: config.subtitle, actions: config.action, footer: config.footer, className: config.cardClassName, children: _jsx(AreaChartV2, { series: data.series, categories: data.categories, height: chartHeight, colors: chartColors, stacked: config.areaOptions?.stacked, options: config.options, className: config.chartClassName }) }));
         }
         case 'heatmap': {
             // Heatmap expects series: { name, data: { x, y }[] }[]

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

@@ -119,6 +119,7 @@ export interface BarChartOptions {
     horizontal?: boolean;
     stacked?: boolean;
     showDataLabels?: boolean;
+    distributed?: boolean;
 }
 /**
  * Donut chart specific options

package/lib/dashboard-visuals/v2/visuals/BarChartV2.d.ts

@@ -35,6 +35,8 @@ export interface BarChartV2Props {
     stacked?: boolean;
     /** Whether to render as horizontal bar chart */
     horizontal?: boolean;
+    /** Whether to distribute colors across bars (for single series with multiple categories) */
+    distributed?: boolean;
     /** Chart colors */
     colors?: string[];
     /** Chart height */

package/lib/dashboard-visuals/v2/visuals/BarChartV2.js

@@ -68,7 +68,7 @@ series: staticSeries, categories: staticCategories,
 // Fetch data
 url, query, seriesNameKey = 'name', seriesValueKey = 'value', categoryKey = 'category', 
 // Chart options
-stacked = false, horizontal = false, colors, height = 350, options: userOptions, 
+stacked = false, horizontal = false, distributed = false, colors, height = 350, options: userOptions, 
 // State
 loading: controlledLoading, error: controlledError, emptyMessage, errorMessage, 
 // Styling
@@ -107,6 +107,7 @@ loadingComponent, errorComponent, emptyComponent, }) => {
                 horizontal,
                 borderRadius: 4,
                 columnWidth: '60%',
+                distributed,
                 ...userOptions?.plotOptions?.bar,
             },
         },
@@ -115,7 +116,11 @@ loadingComponent, errorComponent, emptyComponent, }) => {
             ...userOptions?.xaxis,
         },
         colors: colors ?? userOptions?.colors,
-    }), [userOptions, stacked, horizontal, transformedCategories, colors]);
+        legend: {
+            show: distributed ? false : userOptions?.legend?.show !== false,
+            ...userOptions?.legend,
+        },
+    }), [userOptions, stacked, horizontal, distributed, transformedCategories, colors]);
     return (_jsx(ApexChartWrapper, { type: "bar", series: transformedSeries, options: chartOptions, height: height, loading: isLoading, error: error, isEmpty: isEmpty, onRetry: isFetchMode ? refresh : undefined, emptyMessage: emptyMessage, errorMessage: errorMessage, className: className, containerClassName: containerClassName, loadingClassName: loadingClassName, errorClassName: errorClassName, emptyClassName: emptyClassName, loadingComponent: loadingComponent, errorComponent: errorComponent, emptyComponent: emptyComponent }));
 };
 export { BarChartV2 };

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.230",
+  "version": "0.8.232",
   "publishConfig": {
     "access": "public",
     "provenance": false