@adiba-banking-cloud/backoffice 0.0.97 → 0.0.99

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

@@ -11225,7 +11225,8 @@ const initChart$2 = props => {
       type: "column",
       borderRadius: 8,
       backgroundColor: props?.bgColor || "rgba(255, 255, 255, 0)",
-      plotBackgroundColor: props?.plotBgColor || "rgba(255, 255, 255, 0)"
+      plotBackgroundColor: props?.plotBgColor || "rgba(255, 255, 255, 0)",
+      inverted: props?.inverted || false
     },
     tooltip: {
       backgroundColor: "#0F193D",
@@ -11376,7 +11377,8 @@ const EqualizerColumn = props => {
     bgColor: props.bgColor,
     plotBgColor: props.plotBgColor,
     colors: [props.color || "blue"],
-    title: props.title
+    title: props.title,
+    inverted: props.inverted
   };
   return /*#__PURE__*/React.createElement(Column, chartOptions);
 };
@@ -11390,7 +11392,8 @@ const SimpleColumn = props => {
     bgColor: props.bgColor,
     plotBgColor: props.plotBgColor,
     colors: [props.color || "gray"],
-    title: props.title
+    title: props.title,
+    inverted: props.inverted
   };
   return /*#__PURE__*/React.createElement(Column, chartOptions);
 };
@@ -11518,7 +11521,16 @@ const initSeries$2 = props => {
   };
 };
 
+const isMultiAxis = props => {
+  return "yAxisConfig" in props;
+};
+const isStacked = props => {
+  // StackedAreaChartProps doesn't have yAxisConfig, but has multiple series
+  return !("yAxisConfig" in props) && props.series.length > 1;
+};
 const initChart$1 = props => {
+  const isMulti = isMultiAxis(props);
+  const isStackedChart = isStacked(props);
   return {
     chart: {
       type: "areaspline",
@@ -11533,7 +11545,45 @@ const initChart$1 = props => {
       style: {
         color: "white"
       },
-      format: props.series.length > 1 ? "<b>{key}</b><br/>{series.name}: <b>{y}</b><br/>" + "Total: <b>{point.stackTotal}</b>" : "<b>{key}</b><br/>{series.name}: {y}<br/>"
+      formatter: function () {
+        const point = this.point;
+        const series = this.series;
+        const key = this.key || this.x;
+        if (isStackedChart) {
+          const stackedProps = props;
+          const aggregator = stackedProps.aggregator || "sum";
+          const stackTotal = point.stackTotal || point.y;
+          if (aggregator === "average") {
+            const seriesCount = props.series.length;
+            const average = (stackTotal / seriesCount).toFixed(2);
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Average: <b>${average}</b>`;
+          } else {
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Total: <b>${stackTotal}</b>`;
+          }
+        }
+        if (isMulti) {
+          const multiProps = props;
+          const aggregator = multiProps.aggregator || "sum";
+          const chart = this.series.chart;
+          const allSeries = chart.series;
+          const pointIndex = series.data.indexOf(point);
+          let sum = 0;
+          let count = 0;
+          allSeries.forEach(s => {
+            if (s.data && s.data[pointIndex] && s.data[pointIndex].y !== null && s.data[pointIndex].y !== undefined) {
+              sum += s.data[pointIndex].y;
+              count++;
+            }
+          });
+          if (aggregator === "average") {
+            const average = count > 0 ? (sum / count).toFixed(2) : "0.00";
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Average: <b>${average}</b>`;
+          } else {
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Total: <b>${sum}</b>`;
+          }
+        }
+        return `<b>${key}</b><br/>${series.name}: ${point.y}<br/>`;
+      }
     },
     credits: {
       enabled: false
@@ -11551,8 +11601,8 @@ const initChart$1 = props => {
     },
     legend: {
       enabled: props.withLegend,
-      align: "right",
-      verticalAlign: "top"
+      align: props.legendPosition?.align || "right",
+      verticalAlign: props.legendPosition?.verticalAlign || "top"
     }
   };
 };
@@ -11589,10 +11639,56 @@ const SimpleArea = props => {
     bgColor: props.bgColor,
     plotBgColor: props.plotBgColor,
     colors: [props.color || "gray"],
-    title: props.title
+    title: props.title,
+    legendPosition: props.legendPosition,
+    showYAxis: props.showYAxis
   };
   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 ? {
@@ -11626,15 +11722,215 @@ const initSeries$1 = props => {
     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 = {
+      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 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",
@@ -13682,6 +13978,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;
@@ -13694,6 +13991,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

@@ -11204,7 +11204,8 @@ const initChart$2 = props => {
       type: "column",
       borderRadius: 8,
       backgroundColor: props?.bgColor || "rgba(255, 255, 255, 0)",
-      plotBackgroundColor: props?.plotBgColor || "rgba(255, 255, 255, 0)"
+      plotBackgroundColor: props?.plotBgColor || "rgba(255, 255, 255, 0)",
+      inverted: props?.inverted || false
     },
     tooltip: {
       backgroundColor: "#0F193D",
@@ -11355,7 +11356,8 @@ const EqualizerColumn = props => {
     bgColor: props.bgColor,
     plotBgColor: props.plotBgColor,
     colors: [props.color || "blue"],
-    title: props.title
+    title: props.title,
+    inverted: props.inverted
   };
   return /*#__PURE__*/React.createElement(Column, chartOptions);
 };
@@ -11369,7 +11371,8 @@ const SimpleColumn = props => {
     bgColor: props.bgColor,
     plotBgColor: props.plotBgColor,
     colors: [props.color || "gray"],
-    title: props.title
+    title: props.title,
+    inverted: props.inverted
   };
   return /*#__PURE__*/React.createElement(Column, chartOptions);
 };
@@ -11497,7 +11500,16 @@ const initSeries$2 = props => {
   };
 };
 
+const isMultiAxis = props => {
+  return "yAxisConfig" in props;
+};
+const isStacked = props => {
+  // StackedAreaChartProps doesn't have yAxisConfig, but has multiple series
+  return !("yAxisConfig" in props) && props.series.length > 1;
+};
 const initChart$1 = props => {
+  const isMulti = isMultiAxis(props);
+  const isStackedChart = isStacked(props);
   return {
     chart: {
       type: "areaspline",
@@ -11512,7 +11524,45 @@ const initChart$1 = props => {
       style: {
         color: "white"
       },
-      format: props.series.length > 1 ? "<b>{key}</b><br/>{series.name}: <b>{y}</b><br/>" + "Total: <b>{point.stackTotal}</b>" : "<b>{key}</b><br/>{series.name}: {y}<br/>"
+      formatter: function () {
+        const point = this.point;
+        const series = this.series;
+        const key = this.key || this.x;
+        if (isStackedChart) {
+          const stackedProps = props;
+          const aggregator = stackedProps.aggregator || "sum";
+          const stackTotal = point.stackTotal || point.y;
+          if (aggregator === "average") {
+            const seriesCount = props.series.length;
+            const average = (stackTotal / seriesCount).toFixed(2);
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Average: <b>${average}</b>`;
+          } else {
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Total: <b>${stackTotal}</b>`;
+          }
+        }
+        if (isMulti) {
+          const multiProps = props;
+          const aggregator = multiProps.aggregator || "sum";
+          const chart = this.series.chart;
+          const allSeries = chart.series;
+          const pointIndex = series.data.indexOf(point);
+          let sum = 0;
+          let count = 0;
+          allSeries.forEach(s => {
+            if (s.data && s.data[pointIndex] && s.data[pointIndex].y !== null && s.data[pointIndex].y !== undefined) {
+              sum += s.data[pointIndex].y;
+              count++;
+            }
+          });
+          if (aggregator === "average") {
+            const average = count > 0 ? (sum / count).toFixed(2) : "0.00";
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Average: <b>${average}</b>`;
+          } else {
+            return `<b>${key}</b><br/>${series.name}: <b>${point.y}</b><br/>` + `Total: <b>${sum}</b>`;
+          }
+        }
+        return `<b>${key}</b><br/>${series.name}: ${point.y}<br/>`;
+      }
     },
     credits: {
       enabled: false
@@ -11530,8 +11580,8 @@ const initChart$1 = props => {
     },
     legend: {
       enabled: props.withLegend,
-      align: "right",
-      verticalAlign: "top"
+      align: props.legendPosition?.align || "right",
+      verticalAlign: props.legendPosition?.verticalAlign || "top"
     }
   };
 };
@@ -11568,10 +11618,56 @@ const SimpleArea = props => {
     bgColor: props.bgColor,
     plotBgColor: props.plotBgColor,
     colors: [props.color || "gray"],
-    title: props.title
+    title: props.title,
+    legendPosition: props.legendPosition,
+    showYAxis: props.showYAxis
   };
   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 ? {
@@ -11605,15 +11701,215 @@ const initSeries$1 = props => {
     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 = {
+      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 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",
@@ -13646,4 +13942,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/area/Area.d.ts

@@ -1,3 +1,5 @@
 import React from "react";
-import { SimpleAreaChartProps } from "./Area.types";
+import { SimpleAreaChartProps, MultiAxisAreaChartProps, StackedAreaChartProps } from "./Area.types";
 export declare const SimpleArea: React.FC<SimpleAreaChartProps>;
+export declare const MultiAxisArea: React.FC<MultiAxisAreaChartProps>;
+export declare const StackedArea: React.FC<StackedAreaChartProps>;

package/build/typings/components/charts/area/Area.default.d.ts

@@ -1,2 +1,2 @@
-import { AreaChartConfig, AreaChartProps } from "./Area.types";
-export declare const initChart: (props: AreaChartProps) => AreaChartConfig;
+import { AreaChartConfig, AreaChartProps, MultiAxisAreaChartProps, StackedAreaChartProps } from "./Area.types";
+export declare const initChart: (props: AreaChartProps | MultiAxisAreaChartProps | StackedAreaChartProps) => AreaChartConfig;

package/build/typings/components/charts/area/Area.stories.d.ts

@@ -4,3 +4,5 @@ import { SimpleArea } from "./Area";
 declare const _default: Meta<typeof SimpleArea>;
 export default _default;
 export declare const SimpleAreaChart: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Area.types").SimpleAreaChartProps>;
+export declare const MultiAxisAreaChart: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Area.types").MultiAxisAreaChartProps>;
+export declare const StackedAreaChart: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Area.types").StackedAreaChartProps>;

package/build/typings/components/charts/area/Area.types.d.ts

@@ -17,6 +17,11 @@ export interface AreaChartProps {
     series: number[][];
     withLegend: boolean;
     withCrossHair: boolean;
+    legendPosition?: {
+        align?: "left" | "center" | "right";
+        verticalAlign?: "top" | "middle" | "bottom";
+    };
+    showYAxis?: boolean;
 }
 export interface SimpleAreaChartProps {
     bgColor?: string;
@@ -28,6 +33,11 @@ export interface SimpleAreaChartProps {
     series: number[];
     withLegend: boolean;
     withCrossHair: boolean;
+    legendPosition?: {
+        align?: "left" | "center" | "right";
+        verticalAlign?: "top" | "middle" | "bottom";
+    };
+    showYAxis?: boolean;
 }
 export interface ChartSeriesArea {
     xAxis: {
@@ -46,7 +56,13 @@ export interface ChartSeriesArea {
         gridLineDashStyle?: string;
         gridLineWidth?: number;
         labels: object;
-    };
+    } | Array<{
+        allowDecimals: boolean;
+        title: object;
+        gridLineDashStyle?: string;
+        gridLineWidth?: number;
+        labels: object;
+    }>;
     series: AreaChartSeries[];
     plotOptions: object;
 }
@@ -56,4 +72,49 @@ export interface AreaChartSeries {
     color: string;
     enableMouseTracking?: boolean;
     showInLegend?: boolean;
+    yAxis?: number;
+}
+export interface MultiAxisAreaChartProps {
+    bgColor?: string;
+    plotBgColor?: string;
+    colors?: string[];
+    title?: string;
+    xAxisLabel: string[];
+    yAxisLabel: string[];
+    series: number[][];
+    withLegend: boolean;
+    withCrossHair: boolean;
+    legendPosition?: {
+        align?: "left" | "center" | "right";
+        verticalAlign?: "top" | "middle" | "bottom";
+    };
+    showYAxis?: boolean | boolean[];
+    aggregator?: "sum" | "average";
+    yAxisConfig?: Array<{
+        title?: string;
+        allowDecimals?: boolean;
+        gridLineDashStyle?: string;
+        gridLineWidth?: number;
+        labels?: {
+            color?: string;
+            formatter?: (ctx: any) => string;
+        };
+    }>;
+}
+export interface StackedAreaChartProps {
+    bgColor?: string;
+    plotBgColor?: string;
+    colors?: string[];
+    title?: string;
+    xAxisLabel: string[];
+    yAxisLabel: string[];
+    series: number[][];
+    withLegend: boolean;
+    withCrossHair: boolean;
+    legendPosition?: {
+        align?: "left" | "center" | "right";
+        verticalAlign?: "top" | "middle" | "bottom";
+    };
+    showYAxis?: boolean;
+    aggregator?: "sum" | "average";
 }

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

@@ -8,6 +8,7 @@ export interface ChartProps {
     series: number[][];
     withLegend: boolean;
     equalizer: boolean;
+    inverted?: boolean;
 }
 export interface SimpleChartProps {
     bgColor?: string;
@@ -18,6 +19,7 @@ export interface SimpleChartProps {
     yAxisLabel: string;
     series: number[];
     withLegend: boolean;
+    inverted?: boolean;
 }
 export interface ChartConfig {
     chart: object;

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.97",
+  "version": "0.0.99",
   "description": "An ADIBA component library for backoffice and dashboard applications",
   "license": "ISC",
   "main": "build/index.cjs.js",