@adiba-banking-cloud/backoffice 0.0.98 → 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)
   };
 };
 
@@ -11645,6 +11718,50 @@ const SimpleArea = props => {
   };
   return /*#__PURE__*/React.createElement(Area, chartOptions);
 };
+const MultiAxisArea = props => {
+  const chartRef = React.useRef(null);
+  const chartOptions = React.useMemo(() => {
+    const area = {
+      ...props
+    };
+    return {
+      ...initChart$1(area),
+      ...initMultiAxisSeries(area)
+    };
+  }, [props]);
+  React.useEffect(() => {
+    if (chartRef.current && chartRef.current.chart) {
+      chartRef.current.chart.update(chartOptions, true);
+    }
+  }, [chartOptions]);
+  return /*#__PURE__*/React.createElement(HighchartsReact, {
+    highcharts: Highcharts,
+    ref: chartRef,
+    options: chartOptions
+  });
+};
+const StackedArea = props => {
+  const chartRef = React.useRef(null);
+  const chartOptions = React.useMemo(() => {
+    const area = {
+      ...props
+    };
+    return {
+      ...initChart$1(area),
+      ...initStackedSeries(area)
+    };
+  }, [props]);
+  React.useEffect(() => {
+    if (chartRef.current && chartRef.current.chart) {
+      chartRef.current.chart.update(chartOptions, true);
+    }
+  }, [chartOptions]);
+  return /*#__PURE__*/React.createElement(HighchartsReact, {
+    highcharts: Highcharts,
+    ref: chartRef,
+    options: chartOptions
+  });
+};
 const initSeries$1 = props => {
   const renderXAxis = () => {
     const crosshair = props.withCrossHair ? {
@@ -11729,6 +11846,191 @@ const initSeries$1 = props => {
     series: renderSeries()
   };
 };
+const initMultiAxisSeries = props => {
+  const renderXAxis = () => {
+    const crosshair = props.withCrossHair ? {
+      color: props?.colors?.length ? props?.colors[0] : "#ccc",
+      width: 2,
+      dashStyle: "Dot",
+      snap: true
+    } : undefined;
+    const categories = props.xAxisLabel;
+    const labels = {
+      style: {
+        textTransform: "uppercase",
+        color: "#575E77"
+      }
+    };
+    return {
+      categories,
+      crosshair,
+      labels
+    };
+  };
+  const renderYAxes = () => {
+    const defaultYAxis = {
+      allowDecimals: false,
+      title: {
+        text: null
+      },
+      gridLineDashStyle: "Dot",
+      gridLineWidth: 2,
+      labels: {
+        color: "#575E77"
+      }
+    };
+
+    // Create yAxes array - one for each series or use provided config
+    const yAxesCount = props.series.length;
+    const yAxes = [];
+    const showYAxisArray = Array.isArray(props.showYAxis) ? props.showYAxis : props.showYAxis === false ? new Array(yAxesCount).fill(false) : new Array(yAxesCount).fill(true);
+    for (let i = 0; i < yAxesCount; i++) {
+      const config = props.yAxisConfig?.[i] || {};
+      const shouldShowYAxis = showYAxisArray[i] !== false;
+      const yAxis = {
+        ...defaultYAxis,
+        ...config,
+        title: config.title !== undefined ? {
+          text: config.title
+        } : defaultYAxis.title,
+        labels: config.labels || defaultYAxis.labels
+      };
+
+      // Hide yAxis if showYAxis is false for this axis
+      if (!shouldShowYAxis) {
+        yAxes.push({
+          ...yAxis,
+          visible: false,
+          labels: {
+            enabled: false
+          },
+          title: {
+            text: null
+          }
+        });
+      } else {
+        yAxes.push(yAxis);
+      }
+    }
+    return yAxes;
+  };
+  const renderPlot = () => {
+    const areaspline = {
+      lineWidth: 1,
+      color: "#C8700B",
+      pointPlacement: "on",
+      marker: {
+        enabled: false
+      }
+    };
+    return {
+      areaspline
+    };
+  };
+  const renderSeries = () => {
+    const series = props.series.map((value, key) => ({
+      name: props.yAxisLabel[key],
+      color: props.colors?.length ? props.colors[key] : "#C8700B",
+      data: value,
+      yAxis: key,
+      // Assign each series to its corresponding yAxis
+      fillColor: createAreaFillGradient(props.colors?.length ? props.colors[key] : "#C8700B")
+    }));
+    return series;
+  };
+  return {
+    xAxis: renderXAxis(),
+    yAxis: renderYAxes(),
+    plotOptions: renderPlot(),
+    series: renderSeries()
+  };
+};
+const initStackedSeries = props => {
+  const renderXAxis = () => {
+    const crosshair = props.withCrossHair ? {
+      color: props?.colors?.length ? props?.colors[0] : "#ccc",
+      width: 2,
+      dashStyle: "Dot",
+      snap: true
+    } : undefined;
+    const categories = props.xAxisLabel;
+    const labels = {
+      style: {
+        textTransform: "uppercase",
+        color: "#575E77"
+      }
+    };
+    return {
+      categories,
+      crosshair,
+      labels
+    };
+  };
+  const renderYAxis = () => {
+    const defaults = {
+      allowDecimals: false,
+      title: {
+        text: null
+      },
+      gridLineDashStyle: "Dot",
+      gridLineWidth: 2
+    };
+    const labels = {
+      color: "#575E77"
+    };
+    const yAxis = {
+      ...defaults,
+      ...{
+        labels
+      }
+    };
+
+    // Hide yAxis if showYAxis is false
+    if (props.showYAxis === false) {
+      return {
+        ...yAxis,
+        visible: false,
+        labels: {
+          enabled: false
+        },
+        title: {
+          text: null
+        }
+      };
+    }
+    return yAxis;
+  };
+  const renderPlot = () => {
+    const areaspline = {
+      stacking: "normal",
+      // Enable stacking
+      lineWidth: 1,
+      color: "#C8700B",
+      pointPlacement: "on",
+      marker: {
+        enabled: false
+      }
+    };
+    return {
+      areaspline
+    };
+  };
+  const renderSeries = () => {
+    const series = props.series.map((value, key) => ({
+      name: props.yAxisLabel[key],
+      color: props.colors?.length ? props.colors[key] : "#C8700B",
+      data: value,
+      fillColor: createAreaFillGradient(props.colors?.length ? props.colors[key] : "#C8700B")
+    }));
+    return series;
+  };
+  return {
+    xAxis: renderXAxis(),
+    yAxis: renderYAxis(),
+    plotOptions: renderPlot(),
+    series: renderSeries()
+  };
+};
 
 const initChart = _ref => {
   let {
@@ -13749,6 +14051,7 @@ exports.Icons = Icons;
 exports.InfoModal = InfoModal;
 exports.LabelPanel = LabelPanel;
 exports.MaskedTilePanel = MaskedTilePanel;
+exports.MultiAxisArea = MultiAxisArea;
 exports.PageTitle = PageTitle;
 exports.PaymentMethod = PaymentMethod;
 exports.PaymentMethodAdd = PaymentMethodAdd;
@@ -13761,6 +14064,7 @@ exports.SimpleModal = SimpleModal;
 exports.SimplePanel = SimplePanel;
 exports.SimpleTable = SimpleTable;
 exports.SimpleText = SimpleText;
+exports.StackedArea = StackedArea;
 exports.StackedColumn = StackedColumn;
 exports.SubscriptionPlans = SubscriptionPlans;
 exports.SuccessModal = SuccessModal;

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)
   };
 };
 
@@ -11624,6 +11697,50 @@ const SimpleArea = props => {
   };
   return /*#__PURE__*/React.createElement(Area, chartOptions);
 };
+const MultiAxisArea = props => {
+  const chartRef = useRef(null);
+  const chartOptions = useMemo(() => {
+    const area = {
+      ...props
+    };
+    return {
+      ...initChart$1(area),
+      ...initMultiAxisSeries(area)
+    };
+  }, [props]);
+  useEffect(() => {
+    if (chartRef.current && chartRef.current.chart) {
+      chartRef.current.chart.update(chartOptions, true);
+    }
+  }, [chartOptions]);
+  return /*#__PURE__*/React.createElement(HighchartsReact, {
+    highcharts: Highcharts,
+    ref: chartRef,
+    options: chartOptions
+  });
+};
+const StackedArea = props => {
+  const chartRef = useRef(null);
+  const chartOptions = useMemo(() => {
+    const area = {
+      ...props
+    };
+    return {
+      ...initChart$1(area),
+      ...initStackedSeries(area)
+    };
+  }, [props]);
+  useEffect(() => {
+    if (chartRef.current && chartRef.current.chart) {
+      chartRef.current.chart.update(chartOptions, true);
+    }
+  }, [chartOptions]);
+  return /*#__PURE__*/React.createElement(HighchartsReact, {
+    highcharts: Highcharts,
+    ref: chartRef,
+    options: chartOptions
+  });
+};
 const initSeries$1 = props => {
   const renderXAxis = () => {
     const crosshair = props.withCrossHair ? {
@@ -11708,6 +11825,191 @@ const initSeries$1 = props => {
     series: renderSeries()
   };
 };
+const initMultiAxisSeries = props => {
+  const renderXAxis = () => {
+    const crosshair = props.withCrossHair ? {
+      color: props?.colors?.length ? props?.colors[0] : "#ccc",
+      width: 2,
+      dashStyle: "Dot",
+      snap: true
+    } : undefined;
+    const categories = props.xAxisLabel;
+    const labels = {
+      style: {
+        textTransform: "uppercase",
+        color: "#575E77"
+      }
+    };
+    return {
+      categories,
+      crosshair,
+      labels
+    };
+  };
+  const renderYAxes = () => {
+    const defaultYAxis = {
+      allowDecimals: false,
+      title: {
+        text: null
+      },
+      gridLineDashStyle: "Dot",
+      gridLineWidth: 2,
+      labels: {
+        color: "#575E77"
+      }
+    };
+
+    // Create yAxes array - one for each series or use provided config
+    const yAxesCount = props.series.length;
+    const yAxes = [];
+    const showYAxisArray = Array.isArray(props.showYAxis) ? props.showYAxis : props.showYAxis === false ? new Array(yAxesCount).fill(false) : new Array(yAxesCount).fill(true);
+    for (let i = 0; i < yAxesCount; i++) {
+      const config = props.yAxisConfig?.[i] || {};
+      const shouldShowYAxis = showYAxisArray[i] !== false;
+      const yAxis = {
+        ...defaultYAxis,
+        ...config,
+        title: config.title !== undefined ? {
+          text: config.title
+        } : defaultYAxis.title,
+        labels: config.labels || defaultYAxis.labels
+      };
+
+      // Hide yAxis if showYAxis is false for this axis
+      if (!shouldShowYAxis) {
+        yAxes.push({
+          ...yAxis,
+          visible: false,
+          labels: {
+            enabled: false
+          },
+          title: {
+            text: null
+          }
+        });
+      } else {
+        yAxes.push(yAxis);
+      }
+    }
+    return yAxes;
+  };
+  const renderPlot = () => {
+    const areaspline = {
+      lineWidth: 1,
+      color: "#C8700B",
+      pointPlacement: "on",
+      marker: {
+        enabled: false
+      }
+    };
+    return {
+      areaspline
+    };
+  };
+  const renderSeries = () => {
+    const series = props.series.map((value, key) => ({
+      name: props.yAxisLabel[key],
+      color: props.colors?.length ? props.colors[key] : "#C8700B",
+      data: value,
+      yAxis: key,
+      // Assign each series to its corresponding yAxis
+      fillColor: createAreaFillGradient(props.colors?.length ? props.colors[key] : "#C8700B")
+    }));
+    return series;
+  };
+  return {
+    xAxis: renderXAxis(),
+    yAxis: renderYAxes(),
+    plotOptions: renderPlot(),
+    series: renderSeries()
+  };
+};
+const initStackedSeries = props => {
+  const renderXAxis = () => {
+    const crosshair = props.withCrossHair ? {
+      color: props?.colors?.length ? props?.colors[0] : "#ccc",
+      width: 2,
+      dashStyle: "Dot",
+      snap: true
+    } : undefined;
+    const categories = props.xAxisLabel;
+    const labels = {
+      style: {
+        textTransform: "uppercase",
+        color: "#575E77"
+      }
+    };
+    return {
+      categories,
+      crosshair,
+      labels
+    };
+  };
+  const renderYAxis = () => {
+    const defaults = {
+      allowDecimals: false,
+      title: {
+        text: null
+      },
+      gridLineDashStyle: "Dot",
+      gridLineWidth: 2
+    };
+    const labels = {
+      color: "#575E77"
+    };
+    const yAxis = {
+      ...defaults,
+      ...{
+        labels
+      }
+    };
+
+    // Hide yAxis if showYAxis is false
+    if (props.showYAxis === false) {
+      return {
+        ...yAxis,
+        visible: false,
+        labels: {
+          enabled: false
+        },
+        title: {
+          text: null
+        }
+      };
+    }
+    return yAxis;
+  };
+  const renderPlot = () => {
+    const areaspline = {
+      stacking: "normal",
+      // Enable stacking
+      lineWidth: 1,
+      color: "#C8700B",
+      pointPlacement: "on",
+      marker: {
+        enabled: false
+      }
+    };
+    return {
+      areaspline
+    };
+  };
+  const renderSeries = () => {
+    const series = props.series.map((value, key) => ({
+      name: props.yAxisLabel[key],
+      color: props.colors?.length ? props.colors[key] : "#C8700B",
+      data: value,
+      fillColor: createAreaFillGradient(props.colors?.length ? props.colors[key] : "#C8700B")
+    }));
+    return series;
+  };
+  return {
+    xAxis: renderXAxis(),
+    yAxis: renderYAxis(),
+    plotOptions: renderPlot(),
+    series: renderSeries()
+  };
+};
 
 const initChart = _ref => {
   let {
@@ -13713,4 +14015,4 @@ const useManagedModals = () => {
   };
 };
 
-export { ApplicationMenu, ApplicationPanel, AvatarLabelPanel, ConnectionPanel, DonutChart, Drawer, DynamicLogo, DynamicShigaLogo, EqualizerColumn, ErrorModal, File, Icons, InfoModal, LabelPanel, MaskedTilePanel, PageTitle, PaymentMethod, PaymentMethodAdd, SearchPanel, SideMenu, SimpleArea, SimpleColumn, SimpleForm, SimpleModal, SimplePanel, SimpleTable, SimpleText, StackedColumn, SubscriptionPlans, SuccessModal, TilePanel, TitleWithIndex, TitledPanel, TwoFactorModal, UserMenu, theme, useManagedModals, useModal };
+export { ApplicationMenu, ApplicationPanel, AvatarLabelPanel, ConnectionPanel, DonutChart, Drawer, DynamicLogo, DynamicShigaLogo, EqualizerColumn, ErrorModal, File, Icons, InfoModal, LabelPanel, MaskedTilePanel, MultiAxisArea, PageTitle, PaymentMethod, PaymentMethodAdd, SearchPanel, SideMenu, SimpleArea, SimpleColumn, SimpleForm, SimpleModal, SimplePanel, SimpleTable, SimpleText, StackedArea, StackedColumn, SubscriptionPlans, SuccessModal, TilePanel, TitleWithIndex, TitledPanel, TwoFactorModal, UserMenu, theme, useManagedModals, useModal };

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/build/typings/components/index.d.ts

@@ -1,5 +1,5 @@
 export { SimpleColumn, EqualizerColumn, StackedColumn, } from "./charts/column/Column";
-export { SimpleArea } from "./charts/area/Area";
+export { SimpleArea, StackedArea, MultiAxisArea } from "./charts/area/Area";
 export { DonutChart } from "./charts/donut/Donut";
 export { Icons } from "./general/icons/Icons";
 export { DynamicLogo, DynamicShigaLogo } from "./general/logos/Logos";

package/package.json

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