@adiba-banking-cloud/backoffice 0.0.99 → 0.0.100

package/build/index.cjs.js/index.js

@@ -11378,7 +11378,11 @@ const EqualizerColumn = props => {
     plotBgColor: props.plotBgColor,
     colors: [props.color || "blue"],
     title: props.title,
-    inverted: props.inverted
+    inverted: props.inverted,
+    showDataLabels: props.showDataLabels,
+    showXLabel: props.showXLabel,
+    showYLabel: props.showYLabel,
+    showAxisLabel: props.showAxisLabel
   };
   return /*#__PURE__*/React.createElement(Column, chartOptions);
 };
@@ -11393,7 +11397,11 @@ const SimpleColumn = props => {
     plotBgColor: props.plotBgColor,
     colors: [props.color || "gray"],
     title: props.title,
-    inverted: props.inverted
+    inverted: props.inverted,
+    showDataLabels: props.showDataLabels,
+    showXLabel: props.showXLabel,
+    showYLabel: props.showYLabel,
+    showAxisLabel: props.showAxisLabel
   };
   return /*#__PURE__*/React.createElement(Column, chartOptions);
 };
@@ -11403,16 +11411,18 @@ const StackedColumn = props => {
   }));
 };
 const initSeries$2 = props => {
-  const renderXAxis = categories => ({
+  const renderXAxis = (categories, showXLabel) => ({
     categories,
     labels: {
+      enabled: showXLabel !== false,
+      // Default to true if not specified
       style: {
         textTransform: "uppercase",
         color: "#575E77"
       }
     }
   });
-  const renderYAxis = (equalizer, series) => ({
+  const renderYAxis = (equalizer, series, showYLabel) => ({
     allowDecimals: false,
     title: {
       text: null
@@ -11420,6 +11430,8 @@ const initSeries$2 = props => {
     gridLineDashStyle: "Dot",
     gridLineWidth: 2,
     labels: {
+      enabled: showYLabel !== false,
+      // Default to true if not specified
       formatter: ctx => {
         if (!equalizer || series.length > 1) {
           return ctx.value;
@@ -11429,21 +11441,51 @@ const initSeries$2 = props => {
       }
     }
   });
-  const renderSeries = (seriesData, seriesColors, equalizer) => {
+  const renderSeries = (seriesData, seriesColors, equalizer, showDataLabels, showAxisLabel) => {
     if (seriesData.length > 1 || !equalizer) {
       let br = undefined;
       if (seriesData.length > 1 && equalizer) {
         br = 20;
       }
-      return seriesData.map((data, key) => ({
-        name: props.yAxisLabel[key],
-        color: seriesColors ? seriesColors[key] : "gray",
-        data,
-        borderRadiusTopLeft: br,
-        borderRadiusTopRight: br,
-        borderRadiusBottomLeft: br,
-        borderRadiusBottomRight: br
-      }));
+      return seriesData.map((data, key) => {
+        const dataLabelConfig = {
+          enabled: false
+        };
+        if (showDataLabels || showAxisLabel) {
+          dataLabelConfig.enabled = true;
+          dataLabelConfig.style = {
+            color: "#575E77",
+            fontSize: "12px",
+            fontWeight: "500"
+          };
+          dataLabelConfig.align = "center";
+          dataLabelConfig.verticalAlign = props.inverted ? "middle" : "bottom";
+
+          // Combine value and axis label if both are enabled
+          dataLabelConfig.formatter = function () {
+            const value = showDataLabels ? this.y?.toString() || "" : "";
+            const axisLabel = showAxisLabel ? this.point?.category || this.category || this.x || "" : "";
+            if (showDataLabels && showAxisLabel) {
+              return `${axisLabel}<br/>${value}`;
+            } else if (showDataLabels) {
+              return value;
+            } else if (showAxisLabel) {
+              return axisLabel;
+            }
+            return "";
+          };
+        }
+        return {
+          name: props.yAxisLabel[key],
+          color: seriesColors ? seriesColors[key] : "gray",
+          data,
+          borderRadiusTopLeft: br,
+          borderRadiusTopRight: br,
+          borderRadiusBottomLeft: br,
+          borderRadiusBottomRight: br,
+          dataLabels: dataLabelConfig
+        };
+      });
     }
     if (seriesData.length == 1 && equalizer) {
       const boundary = computeBoundary(seriesData[0]);
@@ -11457,15 +11499,46 @@ const initSeries$2 = props => {
         innerWidth: 8,
         color: "#EEEEEE",
         enableMouseTracking: false,
-        showInLegend: false
+        showInLegend: false,
+        dataLabels: {
+          enabled: false
+        }
       });
+      const dataLabelConfig = {
+        enabled: false
+      };
+      if (showDataLabels || showAxisLabel) {
+        dataLabelConfig.enabled = true;
+        dataLabelConfig.style = {
+          color: "#575E77",
+          fontSize: "12px",
+          fontWeight: "500"
+        };
+        dataLabelConfig.align = "center";
+        dataLabelConfig.verticalAlign = props.inverted ? "middle" : "bottom";
+
+        // Combine value and axis label if both are enabled
+        dataLabelConfig.formatter = function () {
+          const value = showDataLabels ? this.y?.toString() || "" : "";
+          const axisLabel = showAxisLabel ? this.category || "" : "";
+          if (showDataLabels && showAxisLabel) {
+            return `${axisLabel}<br/>${value}`;
+          } else if (showDataLabels) {
+            return value;
+          } else if (showAxisLabel) {
+            return axisLabel;
+          }
+          return "";
+        };
+      }
       const mainSeries = {
         ...fillSeries(boundary),
         ...{
           name: props.yAxisLabel[0],
           color: seriesColors ? seriesColors[0] : "gray",
           data: seriesData[0],
-          enableMouseTracking: true
+          enableMouseTracking: true,
+          dataLabels: dataLabelConfig
         }
       };
       return [fillSeries(boundary), mainSeries];
@@ -11514,10 +11587,10 @@ const initSeries$2 = props => {
     return plot;
   };
   return {
-    xAxis: renderXAxis(props.xAxisLabel),
-    yAxis: renderYAxis(props.equalizer, props.series),
+    xAxis: renderXAxis(props.xAxisLabel, props.showXLabel),
+    yAxis: renderYAxis(props.equalizer, props.series, props.showYLabel),
     plotOptions: renderPlot(props.equalizer),
-    series: renderSeries(props.series, props?.colors, props.equalizer)
+    series: renderSeries(props.series, props?.colors, props.equalizer, props.showDataLabels, props.showAxisLabel)
   };
 };
 

package/build/index.esm.js/index.js

@@ -11357,7 +11357,11 @@ const EqualizerColumn = props => {
     plotBgColor: props.plotBgColor,
     colors: [props.color || "blue"],
     title: props.title,
-    inverted: props.inverted
+    inverted: props.inverted,
+    showDataLabels: props.showDataLabels,
+    showXLabel: props.showXLabel,
+    showYLabel: props.showYLabel,
+    showAxisLabel: props.showAxisLabel
   };
   return /*#__PURE__*/React.createElement(Column, chartOptions);
 };
@@ -11372,7 +11376,11 @@ const SimpleColumn = props => {
     plotBgColor: props.plotBgColor,
     colors: [props.color || "gray"],
     title: props.title,
-    inverted: props.inverted
+    inverted: props.inverted,
+    showDataLabels: props.showDataLabels,
+    showXLabel: props.showXLabel,
+    showYLabel: props.showYLabel,
+    showAxisLabel: props.showAxisLabel
   };
   return /*#__PURE__*/React.createElement(Column, chartOptions);
 };
@@ -11382,16 +11390,18 @@ const StackedColumn = props => {
   }));
 };
 const initSeries$2 = props => {
-  const renderXAxis = categories => ({
+  const renderXAxis = (categories, showXLabel) => ({
     categories,
     labels: {
+      enabled: showXLabel !== false,
+      // Default to true if not specified
       style: {
         textTransform: "uppercase",
         color: "#575E77"
       }
     }
   });
-  const renderYAxis = (equalizer, series) => ({
+  const renderYAxis = (equalizer, series, showYLabel) => ({
     allowDecimals: false,
     title: {
       text: null
@@ -11399,6 +11409,8 @@ const initSeries$2 = props => {
     gridLineDashStyle: "Dot",
     gridLineWidth: 2,
     labels: {
+      enabled: showYLabel !== false,
+      // Default to true if not specified
       formatter: ctx => {
         if (!equalizer || series.length > 1) {
           return ctx.value;
@@ -11408,21 +11420,51 @@ const initSeries$2 = props => {
       }
     }
   });
-  const renderSeries = (seriesData, seriesColors, equalizer) => {
+  const renderSeries = (seriesData, seriesColors, equalizer, showDataLabels, showAxisLabel) => {
     if (seriesData.length > 1 || !equalizer) {
       let br = undefined;
       if (seriesData.length > 1 && equalizer) {
         br = 20;
       }
-      return seriesData.map((data, key) => ({
-        name: props.yAxisLabel[key],
-        color: seriesColors ? seriesColors[key] : "gray",
-        data,
-        borderRadiusTopLeft: br,
-        borderRadiusTopRight: br,
-        borderRadiusBottomLeft: br,
-        borderRadiusBottomRight: br
-      }));
+      return seriesData.map((data, key) => {
+        const dataLabelConfig = {
+          enabled: false
+        };
+        if (showDataLabels || showAxisLabel) {
+          dataLabelConfig.enabled = true;
+          dataLabelConfig.style = {
+            color: "#575E77",
+            fontSize: "12px",
+            fontWeight: "500"
+          };
+          dataLabelConfig.align = "center";
+          dataLabelConfig.verticalAlign = props.inverted ? "middle" : "bottom";
+
+          // Combine value and axis label if both are enabled
+          dataLabelConfig.formatter = function () {
+            const value = showDataLabels ? this.y?.toString() || "" : "";
+            const axisLabel = showAxisLabel ? this.point?.category || this.category || this.x || "" : "";
+            if (showDataLabels && showAxisLabel) {
+              return `${axisLabel}<br/>${value}`;
+            } else if (showDataLabels) {
+              return value;
+            } else if (showAxisLabel) {
+              return axisLabel;
+            }
+            return "";
+          };
+        }
+        return {
+          name: props.yAxisLabel[key],
+          color: seriesColors ? seriesColors[key] : "gray",
+          data,
+          borderRadiusTopLeft: br,
+          borderRadiusTopRight: br,
+          borderRadiusBottomLeft: br,
+          borderRadiusBottomRight: br,
+          dataLabels: dataLabelConfig
+        };
+      });
     }
     if (seriesData.length == 1 && equalizer) {
       const boundary = computeBoundary(seriesData[0]);
@@ -11436,15 +11478,46 @@ const initSeries$2 = props => {
         innerWidth: 8,
         color: "#EEEEEE",
         enableMouseTracking: false,
-        showInLegend: false
+        showInLegend: false,
+        dataLabels: {
+          enabled: false
+        }
       });
+      const dataLabelConfig = {
+        enabled: false
+      };
+      if (showDataLabels || showAxisLabel) {
+        dataLabelConfig.enabled = true;
+        dataLabelConfig.style = {
+          color: "#575E77",
+          fontSize: "12px",
+          fontWeight: "500"
+        };
+        dataLabelConfig.align = "center";
+        dataLabelConfig.verticalAlign = props.inverted ? "middle" : "bottom";
+
+        // Combine value and axis label if both are enabled
+        dataLabelConfig.formatter = function () {
+          const value = showDataLabels ? this.y?.toString() || "" : "";
+          const axisLabel = showAxisLabel ? this.category || "" : "";
+          if (showDataLabels && showAxisLabel) {
+            return `${axisLabel}<br/>${value}`;
+          } else if (showDataLabels) {
+            return value;
+          } else if (showAxisLabel) {
+            return axisLabel;
+          }
+          return "";
+        };
+      }
       const mainSeries = {
         ...fillSeries(boundary),
         ...{
           name: props.yAxisLabel[0],
           color: seriesColors ? seriesColors[0] : "gray",
           data: seriesData[0],
-          enableMouseTracking: true
+          enableMouseTracking: true,
+          dataLabels: dataLabelConfig
         }
       };
       return [fillSeries(boundary), mainSeries];
@@ -11493,10 +11566,10 @@ const initSeries$2 = props => {
     return plot;
   };
   return {
-    xAxis: renderXAxis(props.xAxisLabel),
-    yAxis: renderYAxis(props.equalizer, props.series),
+    xAxis: renderXAxis(props.xAxisLabel, props.showXLabel),
+    yAxis: renderYAxis(props.equalizer, props.series, props.showYLabel),
     plotOptions: renderPlot(props.equalizer),
-    series: renderSeries(props.series, props?.colors, props.equalizer)
+    series: renderSeries(props.series, props?.colors, props.equalizer, props.showDataLabels, props.showAxisLabel)
   };
 };
 

package/build/typings/components/charts/column/Column.types.d.ts

@@ -9,6 +9,10 @@ export interface ChartProps {
     withLegend: boolean;
     equalizer: boolean;
     inverted?: boolean;
+    showDataLabels?: boolean;
+    showXLabel?: boolean;
+    showYLabel?: boolean;
+    showAxisLabel?: boolean;
 }
 export interface SimpleChartProps {
     bgColor?: string;
@@ -20,6 +24,10 @@ export interface SimpleChartProps {
     series: number[];
     withLegend: boolean;
     inverted?: boolean;
+    showDataLabels?: boolean;
+    showXLabel?: boolean;
+    showYLabel?: boolean;
+    showAxisLabel?: boolean;
 }
 export interface ChartConfig {
     chart: object;
@@ -56,4 +64,15 @@ export interface ChartSeries {
     color: string;
     enableMouseTracking?: boolean;
     showInLegend?: boolean;
+    dataLabels?: {
+        enabled: boolean;
+        style?: {
+            color?: string;
+            fontSize?: string;
+            fontWeight?: string;
+        };
+        align?: string;
+        verticalAlign?: string;
+        formatter?: (this: any) => string;
+    };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adiba-banking-cloud/backoffice",
   "author": "TUROG Technologies",
-  "version": "0.0.99",
+  "version": "0.0.100",
   "description": "An ADIBA component library for backoffice and dashboard applications",
   "license": "ISC",
   "main": "build/index.cjs.js",