@adiba-banking-cloud/backoffice 0.0.98 → 0.0.99

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

@@ -11645,6 +11645,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 +11773,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 +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;
@@ -13761,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

@@ -11624,6 +11624,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 +11752,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 +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/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.99",
   "description": "An ADIBA component library for backoffice and dashboard applications",
   "license": "ISC",
   "main": "build/index.cjs.js",