@adiba-banking-cloud/backoffice 0.0.97 → 0.0.98

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,7 +11639,9 @@ 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);
 };
@@ -11626,12 +11678,27 @@ const initSeries$1 = props => {
     const labels = {
       color: "#575E77"
     };
-    return {
+    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 = {

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,7 +11618,9 @@ 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);
 };
@@ -11605,12 +11657,27 @@ const initSeries$1 = props => {
     const labels = {
       color: "#575E77"
     };
-    return {
+    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 = {

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/package.json

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