impaktapps-design 0.2.993-alpha.250 → 0.2.993-alpha.252

package/dist/impaktapps-design.es.js

@@ -18657,15 +18657,17 @@ function DrawBarGraph({
   margin: margin2,
   value
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const graphData = value.main.data;
-  const disableLeftLabel = (_a = value.main) == null ? void 0 : _a.disableLeftLabel;
-  const labelsArray = Object.keys(graphData[0]).filter((d2) => d2 !== value.main.xAxisValue);
-  const colorMap = (_c = (_b = value.style) == null ? void 0 : _b.barStyle) == null ? void 0 : _c.colorMap;
-  const legendLabels = (_d = value.main) == null ? void 0 : _d.legendLabels;
-  const defaultColour = (_f = (_e = theme.myTheme.palette) == null ? void 0 : _e.primary) == null ? void 0 : _f.main;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  const graphData = ((_b = (_a = value.main) == null ? void 0 : _a.data) == null ? void 0 : _b.length) ? value.main.data : [];
+  const disableLeftLabel = (_c = value.main) == null ? void 0 : _c.disableLeftLabel;
+  const xAxisValue = ((_d = value.main) == null ? void 0 : _d.xAxisValue) || "label";
+  const labelsArray = Object.keys(graphData[0]).filter((d2) => d2 !== xAxisValue);
+  const colorMap = (_e = value.style) == null ? void 0 : _e.colorMap;
+  const legendLabels = (_f = value.main) == null ? void 0 : _f.legendLabels;
+  const legendAvailable = (_h = (_g = value == null ? void 0 : value.main) == null ? void 0 : _g.legendAvailable) != null ? _h : true;
+  const defaultColour = (_j = (_i = theme.myTheme.palette) == null ? void 0 : _i.primary) == null ? void 0 : _j.main;
   const [hoveredBar, setHoveredBar] = useState({});
-  const getDataLabel = (d2) => d2[value.main.xAxisValue];
+  const getDataLabel = (d2) => d2[xAxisValue];
   const labelsValueSum = graphData.map((currentBar) => labelsArray.reduce((sum2, k2) => sum2 += Number(currentBar[k2]), 0));
   const horizontalScale = createBandScale({
     domain: graphData.map(getDataLabel),
@@ -18764,7 +18766,7 @@ function DrawBarGraph({
         minWidth: `${width2}px`,
         width: `${width2}px`
       },
-      children: [value.main.legendAvailable && labelsArray.length > 1 && /* @__PURE__ */ jsx$1(Legend, {
+      children: [legendAvailable && labelsArray.length > 1 && /* @__PURE__ */ jsx$1(Legend, {
         labelsArray,
         legendLabels,
         colorMap,
@@ -18798,8 +18800,8 @@ function DrawBarGraph({
             style: {
               display: hoveredBar.bar ? "block" : "none"
             },
-            x: value.main.type === "StackBarGraph" ? calcPositionofBar(hoveredBar.bar, (_g = hoveredBar.bar) == null ? void 0 : _g.bars[hoveredBar.subBarIndex], "stack") : calcPositionofBar(hoveredBar.bar, (_h = hoveredBar.bar) == null ? void 0 : _h.bars[hoveredBar.subBarIndex], "grouphov"),
-            width: value.main.type !== "StackBarGraph" ? calcWidthofBar(hoveredBar.bar) : Math.min((_i = hoveredBar.bar) == null ? void 0 : _i.bars[0].width, 15),
+            x: value.main.type === "StackBarGraph" ? calcPositionofBar(hoveredBar.bar, (_k = hoveredBar.bar) == null ? void 0 : _k.bars[hoveredBar.subBarIndex], "stack") : calcPositionofBar(hoveredBar.bar, (_l = hoveredBar.bar) == null ? void 0 : _l.bars[hoveredBar.subBarIndex], "grouphov"),
+            width: value.main.type !== "StackBarGraph" ? calcWidthofBar(hoveredBar.bar) : Math.min((_m = hoveredBar.bar) == null ? void 0 : _m.bars[0].width, 15),
             height: maxVerticalSpace,
             fill: theme.myTheme.palette.secondary.main,
             opacity: 1
@@ -19145,173 +19147,30 @@ ParentSize$1.propTypes = {
   className: _pt.string,
   children: _pt.func.isRequired
 };
-const finalDataProvider = (type2, value, theme) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t5, _u, _v, _w, _x, _y, _z, _A, _B, _C;
-  switch (type2) {
-    case "BarGraph":
-    case "StackBarGraph":
-    case "HorizontalBarGraph":
-    case "HorizontalStackBarGraph":
-      return {
-        main: {
-          legendAvailable: true,
-          xAxisValue: "label",
-          ...value.main,
-          data: ((_a = value.main.data) == null ? void 0 : _a.length) ? value.main.data : [],
-          legend: {
-            direction: "row",
-            ...value.main.legend
-          }
-        },
-        style: {
-          containerStyle: {
-            background: theme.myTheme.palette.background.default,
-            height: "300",
-            ...(_b = value.style) == null ? void 0 : _b.containerStyle
-          },
-          labelStyle: {
-            ...(_c = value.style) == null ? void 0 : _c.labelStyle
-          },
-          barStyle: {
-            ...(_d = value.style) == null ? void 0 : _d.barStyle,
-            colorMap: (_e = value.style) == null ? void 0 : _e.colorMap
-          }
-        }
-      };
-    case "PieGraph":
-      return {
-        main: {
-          legendAvailable: true,
-          xAxisValue: "label",
-          outerRadius: 117,
-          innerRadius: 63,
-          ...value.main,
-          data: ((_f = value.main.data) == null ? void 0 : _f.length) > 0 ? value.main.data : [{ label: "No Data", value: 100 }],
-          legend: {
-            direction: "column",
-            ...value.main.legend
-          }
-        },
-        style: {
-          containerStyle: {
-            height: "300",
-            ...(_g = value.style) == null ? void 0 : _g.containerStyle
-          },
-          pieStyle: {
-            ...(_h = value.style) == null ? void 0 : _h.pieStyle,
-            colorMap: (_i = value.style) == null ? void 0 : _i.colorMap
-          }
-        }
-      };
-    case "LineGraph":
-      return {
-        main: {
-          legendAvailable: true,
-          xAxisValue: "label",
-          ...value.main,
-          data: ((_j = value.main.data) == null ? void 0 : _j.length) ? value.main.data : [{ "No Data": 0 }],
-          legend: {
-            direction: "row",
-            ...value.main.legend
-          }
-        },
-        style: {
-          containerStyle: {
-            background: theme.myTheme.palette.background.default,
-            height: "300",
-            ...(_k = value.style) == null ? void 0 : _k.containerStyle
-          },
-          labelStyle: {
-            ...(_l = value.style) == null ? void 0 : _l.labelStyle
-          },
-          lineStyle: {
-            ...(_m = value.style) == null ? void 0 : _m.lineStyle,
-            colorMap: (_n = value.style) == null ? void 0 : _n.colorMap
-          }
-        }
-      };
-    case "AreaGraph":
-      return {
-        main: {
-          legendAvailable: true,
-          xAxisValue: ((_o = value.main) == null ? void 0 : _o.xAxisValue) || "label",
-          xAxisType: ((_p = value.main) == null ? void 0 : _p.xAxisType) || "date",
-          ...value.main,
-          xAxisFormatType: ((_q = value.main) == null ? void 0 : _q.xAxisSchemaFormat) || ((_r = value.main) == null ? void 0 : _r.xAxisFormatType) || "Date and Month",
-          data: ((_s = value.main.data) == null ? void 0 : _s.length) ? value.main.data : [{ label: "", total: 0 }],
-          legend: {
-            direction: "row",
-            ...value.main.legend
-          }
-        },
-        style: {
-          containerStyle: {
-            background: theme.myTheme.palette.background.default,
-            height: "300",
-            ...(_t5 = value.style) == null ? void 0 : _t5.containerStyle
-          },
-          labelStyle: {
-            ...(_u = value.style) == null ? void 0 : _u.labelStyle
-          },
-          areaStyle: {
-            ...(_v = value.style) == null ? void 0 : _v.areaStyle,
-            colorMap: (_w = value.style) == null ? void 0 : _w.colorMap
-          }
-        }
-      };
-    case "StackBarLineGraph":
-      return {
-        main: {
-          legendAvailable: true,
-          xAxisValue: ((_x = value.main) == null ? void 0 : _x.xAxisValue) || "label",
-          ...value.main,
-          data: ((_y = value.main.data) == null ? void 0 : _y.length) ? value.main.data : [{}],
-          legend: {
-            direction: "row",
-            ...value.main.legend
-          }
-        },
-        style: {
-          containerStyle: {
-            background: theme.myTheme.palette.background.default,
-            height: "300",
-            ...(_z = value.style) == null ? void 0 : _z.containerStyle
-          },
-          labelStyle: {
-            ...(_A = value.style) == null ? void 0 : _A.labelStyle
-          },
-          stackBarLineStyle: {
-            ...(_B = value.style) == null ? void 0 : _B.stackBarLineStyle,
-            colorMap: (_C = value.style) == null ? void 0 : _C.colorMap
-          }
-        }
-      };
-  }
-};
 const BarGraph = ({
   value,
   theme
 }) => {
-  const barData = finalDataProvider(value.main.type, value, theme);
+  var _a, _b;
   const GraphRender = /* @__PURE__ */ jsx$1(ParentSize$1, {
     children: (parent) => {
-      var _a, _b;
+      var _a2, _b2, _c, _d, _e, _f;
       return /* @__PURE__ */ jsx$1(DrawBarGraph, {
         theme,
         width: Math.max(parent.width, 500),
-        height: parseInt(barData.style.containerStyle.height || "300"),
+        height: parseInt(String(((_b2 = (_a2 = value.style) == null ? void 0 : _a2.containerStyle) == null ? void 0 : _b2.height) || "300")),
         margin: {
           top: 10,
           right: 10,
-          bottom: barData.main.bottomAxisAngle ? 90 : 40,
-          left: ((_b = (_a = barData.style.labelStyle) == null ? void 0 : _a.margin) == null ? void 0 : _b.left) || 60
+          bottom: ((_c = value.main) == null ? void 0 : _c.bottomAxisAngle) ? 90 : 40,
+          left: ((_f = (_e = (_d = value.style) == null ? void 0 : _d.labelStyle) == null ? void 0 : _e.margin) == null ? void 0 : _f.left) || 60
         },
-        value: barData
+        value
       });
     }
   });
   return /* @__PURE__ */ jsxs("div", {
-    children: [barData.main.header && /* @__PURE__ */ jsx$1("div", {
+    children: [((_a = value.main) == null ? void 0 : _a.header) && /* @__PURE__ */ jsx$1("div", {
       style: {
         fontWeight: "bold",
         textAlign: "left",
@@ -19322,7 +19181,7 @@ const BarGraph = ({
         fontSize: "22px",
         color: theme.myTheme.palette.text.primary
       },
-      children: barData.main.header
+      children: (_b = value.main) == null ? void 0 : _b.header
     }), GraphRender]
   });
 };
@@ -19332,7 +19191,7 @@ const DrawPieGraph = ({
   parentWidth,
   parentHeight
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const {
     TooltipInPortal
   } = useTooltipInPortal({
@@ -19341,14 +19200,21 @@ const DrawPieGraph = ({
   });
   const smallScreen = useMediaQuery(theme.myTheme.breakpoints.down("md"));
   const [active2, setActive] = useState(null);
-  const pieData = value.main.data;
+  const pieData = ((_b = (_a = value.main) == null ? void 0 : _a.data) == null ? void 0 : _b.length) > 0 ? value.main.data : [{
+    label: "No Data",
+    value: 100
+  }];
+  const legendAvailable = (_d = (_c = value == null ? void 0 : value.main) == null ? void 0 : _c.legendAvailable) != null ? _d : true;
+  const xAxisValue = ((_e = value.main) == null ? void 0 : _e.xAxisValue) || "label";
   const keyLabel = value.main.xAxisValue || Object.keys(pieData[0])[0];
   const valueLabel = value.main.yAxisValue || Object.keys(pieData[0])[1];
   const getValue2 = (d2) => d2[valueLabel];
   const dataKeyArray = pieData.map((data) => data[keyLabel]);
-  const colorMap = value.style.pieStyle.colorMap;
-  const defaultColour = (_b = (_a = theme.myTheme.palette) == null ? void 0 : _a.primary) == null ? void 0 : _b.main;
-  const legendLabels = (_c = value.main) == null ? void 0 : _c.legendLabels;
+  const colorMap = (_f = value.style) == null ? void 0 : _f.colorMap;
+  const defaultColour = (_h = (_g = theme.myTheme.palette) == null ? void 0 : _g.primary) == null ? void 0 : _h.main;
+  const legendLabels = (_i = value.main) == null ? void 0 : _i.legendLabels;
+  const outerRadius = (_k = (_j = value.main) == null ? void 0 : _j.outerRadius) != null ? _k : 117;
+  const innerRadius = (_m = (_l = value.main) == null ? void 0 : _l.innerRadius) != null ? _m : 63;
   const getPieColor = createOrdinalScale$1({
     domain: pieData.map((l2) => l2[keyLabel]),
     range: dataKeyArray.map((key) => {
@@ -19401,8 +19267,8 @@ const DrawPieGraph = ({
             data: pieData,
             pieValue: getValue2,
             pieSortValues,
-            outerRadius: value.main.innerRadius - 5,
-            innerRadius: value.main.innerRadius - 10,
+            outerRadius: innerRadius - 5,
+            innerRadius: innerRadius - 10,
             padAngle: 0.05,
             children: (pie2) => {
               return pie2.arcs.map((arc2, index2) => {
@@ -19421,10 +19287,10 @@ const DrawPieGraph = ({
             outerRadius: ({
               data
             }) => {
-              const size = active2 && active2[value.main.xAxisValue] == data[value.main.xAxisValue] ? value.main.outerRadius + 3 : value.main.outerRadius;
+              const size = active2 && active2[xAxisValue] == data[xAxisValue] ? outerRadius + 3 : outerRadius;
               return size;
             },
-            innerRadius: value.main.innerRadius,
+            innerRadius,
             cornerRadius: 2,
             children: (pie2) => {
               return pie2.arcs.map((arc2, index2) => {
@@ -19479,7 +19345,7 @@ const DrawPieGraph = ({
             children: tooltipData[bar]
           })]
         }))
-      }, Math.random()), value.main.legendAvailable && (smallScreen || value.main.legendDirection === "row") && /* @__PURE__ */ jsx$1(Legend, {
+      }, Math.random()), legendAvailable && (smallScreen || value.main.legendDirection === "row") && /* @__PURE__ */ jsx$1(Legend, {
         labelsArray: dataKeyArray,
         legendLabels,
         colorMap,
@@ -19493,7 +19359,7 @@ const DrawPieGraph = ({
         style: {
           display: smallScreen || value.main.legendDirection === "row" ? "none" : "flex"
         },
-        children: value.main.legendAvailable && /* @__PURE__ */ jsx$1(Legend, {
+        children: legendAvailable && /* @__PURE__ */ jsx$1(Legend, {
           labelsArray: dataKeyArray,
           legendLabels,
           colorMap,
@@ -19508,19 +19374,22 @@ const PieGraph = ({
   value,
   theme
 }) => {
-  const pieData = finalDataProvider("PieGraph", value, theme);
+  var _a, _b;
   const PieRender = /* @__PURE__ */ jsx$1(ParentSize$1, {
-    children: (parent) => /* @__PURE__ */ jsx$1(DrawPieGraph, {
-      theme,
-      parentWidth: parent.width,
-      parentHeight: parseInt(pieData.style.containerStyle.height),
-      parentRef: parent.ref,
-      resizeParent: parent.resize,
-      value: pieData
-    })
+    children: (parent) => {
+      var _a2, _b2;
+      return /* @__PURE__ */ jsx$1(DrawPieGraph, {
+        theme,
+        parentWidth: parent.width,
+        parentHeight: parseInt(String(((_b2 = (_a2 = value.style) == null ? void 0 : _a2.containerStyle) == null ? void 0 : _b2.height) || "300")),
+        parentRef: parent.ref,
+        resizeParent: parent.resize,
+        value
+      });
+    }
   });
   return /* @__PURE__ */ jsxs("div", {
-    children: [pieData.main.header && /* @__PURE__ */ jsx$1("div", {
+    children: [((_a = value.main) == null ? void 0 : _a.header) && /* @__PURE__ */ jsx$1("div", {
       style: {
         fontWeight: "bold",
         textAlign: "left",
@@ -19531,7 +19400,7 @@ const PieGraph = ({
         fontSize: "22px",
         color: theme.myTheme.palette.text.primary
       },
-      children: pieData.main.header
+      children: (_b = value.main) == null ? void 0 : _b.header
     }), PieRender]
   });
 };
@@ -21890,15 +21759,19 @@ const DrawGraph = ({
   margin: margin2,
   value
 }) => {
-  var _a, _b, _c, _d;
-  const graphData = value.main.data;
-  const disableLeftLabel = (_a = value.main) == null ? void 0 : _a.disableLeftLabel;
-  const labelsArray = Object.keys(graphData[0]).filter((d2) => d2 !== value.main.xAxisValue);
-  const colorMap = value.style.lineStyle.colorMap;
-  const defaultColour = (_c = (_b = theme.myTheme.palette) == null ? void 0 : _b.primary) == null ? void 0 : _c.main;
-  const legendLabels = (_d = value.main) == null ? void 0 : _d.legendLabels;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const graphData = ((_b = (_a = value.main) == null ? void 0 : _a.data) == null ? void 0 : _b.length) ? value.main.data : [{
+    "No Data": 0
+  }];
+  const disableLeftLabel = (_c = value.main) == null ? void 0 : _c.disableLeftLabel;
+  const xAxisValue = ((_d = value.main) == null ? void 0 : _d.xAxisValue) || "label";
+  const legendAvailable = (_f = (_e = value == null ? void 0 : value.main) == null ? void 0 : _e.legendAvailable) != null ? _f : true;
+  const labelsArray = Object.keys(graphData[0]).filter((d2) => d2 !== xAxisValue);
+  const colorMap = (_g = value.style) == null ? void 0 : _g.colorMap;
+  const defaultColour = (_i = (_h = theme.myTheme.palette) == null ? void 0 : _h.primary) == null ? void 0 : _i.main;
+  const legendLabels = (_j = value.main) == null ? void 0 : _j.legendLabels;
   const horizontalScale = createBandScale({
-    domain: graphData.map((d2) => d2[value.main.xAxisValue])
+    domain: graphData.map((d2) => d2[xAxisValue])
   });
   const verticalScale = createLinearScale({
     domain: [0, Math.max(...graphData.flatMap((d2) => labelsArray.map((key) => d2[key])))]
@@ -21921,7 +21794,7 @@ const DrawGraph = ({
         minWidth: `${width2}px`,
         width: `${width2}px`
       },
-      children: [value.main.legendAvailable && /* @__PURE__ */ jsx$1(Legend, {
+      children: [legendAvailable && /* @__PURE__ */ jsx$1(Legend, {
         labelsArray,
         legendLabels,
         colorMap,
@@ -21986,10 +21859,10 @@ const DrawGraph = ({
               fill: "none",
               fillOpacity: 0.2,
               stroke: (_a2 = colorMap == null ? void 0 : colorMap[elem]) != null ? _a2 : defaultColour,
-              xAccessor: (d2) => d2[value.main.xAxisValue],
+              xAccessor: (d2) => d2[xAxisValue],
               yAccessor: (d2) => d2[elem]
             }), graphData.map((datum2, index2) => /* @__PURE__ */ jsx$1("circle", {
-              cx: horizontalScale(datum2[value.main.xAxisValue]) + horizontalScale.bandwidth() / 2,
+              cx: horizontalScale(datum2[xAxisValue]) + horizontalScale.bandwidth() / 2,
               cy: verticalScale(datum2[elem]),
               r: 3,
               fill: "white",
@@ -22054,9 +21927,9 @@ const LineGraph = ({
   value,
   theme
 }) => {
-  const lineData = finalDataProvider("LineGraph", value, theme);
+  var _a, _b;
   return /* @__PURE__ */ jsxs("div", {
-    children: [lineData.main.header && /* @__PURE__ */ jsx$1("div", {
+    children: [((_a = value.main) == null ? void 0 : _a.header) && /* @__PURE__ */ jsx$1("div", {
       style: {
         fontWeight: "bold",
         textAlign: "left",
@@ -22067,21 +21940,21 @@ const LineGraph = ({
         fontSize: "22px",
         color: theme.myTheme.palette.text.primary
       },
-      children: lineData.main.header
+      children: (_b = value.main) == null ? void 0 : _b.header
     }), /* @__PURE__ */ jsx$1(ParentSize$1, {
       children: (parent) => {
-        var _a, _b;
+        var _a2, _b2, _c, _d, _e, _f;
         return /* @__PURE__ */ jsx$1(DrawGraph, {
           theme,
           width: Math.max(parent.width, 500),
-          height: parseInt(lineData.style.containerStyle.height || 400),
+          height: parseInt(String(((_b2 = (_a2 = value.style) == null ? void 0 : _a2.containerStyle) == null ? void 0 : _b2.height) || 400)),
           margin: {
             top: 10,
             right: 10,
-            bottom: lineData.main.bottomAxisAngle ? 90 : 40,
-            left: ((_b = (_a = lineData.style.labelStyle) == null ? void 0 : _a.margin) == null ? void 0 : _b.left) || 60
+            bottom: ((_c = value.main) == null ? void 0 : _c.bottomAxisAngle) ? 90 : 40,
+            left: ((_f = (_e = (_d = value.style) == null ? void 0 : _d.labelStyle) == null ? void 0 : _e.margin) == null ? void 0 : _f.left) || 60
           },
-          value: lineData
+          value
         });
       }
     })]
@@ -22171,7 +22044,7 @@ const DrawAreaGraph = ({
   areaValue,
   theme
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const {
     tooltipData,
     tooltipLeft,
@@ -22180,15 +22053,18 @@ const DrawAreaGraph = ({
     showTooltip,
     hideTooltip
   } = useTooltip();
-  const chartData = (_a = areaValue == null ? void 0 : areaValue.main) == null ? void 0 : _a.data;
-  const xAxisValue = (_b = areaValue == null ? void 0 : areaValue.main) == null ? void 0 : _b.xAxisValue;
-  const xAxisType = (_c = areaValue == null ? void 0 : areaValue.main) == null ? void 0 : _c.xAxisType;
-  const formatType = (_d = areaValue == null ? void 0 : areaValue.main) == null ? void 0 : _d.xAxisFormatType;
-  const yAxisTickCount = (_e = areaValue == null ? void 0 : areaValue.main) == null ? void 0 : _e.yAxisTickCount;
-  const disableLeftLabel = (_f = areaValue.main) == null ? void 0 : _f.disableLeftLabel;
-  const legendLabels = (_g = areaValue.main) == null ? void 0 : _g.legendLabels;
-  const colorMap = (_i = (_h = areaValue.style) == null ? void 0 : _h.areaStyle) == null ? void 0 : _i.colorMap;
-  const defaultColour = (_k = (_j = theme.myTheme.palette) == null ? void 0 : _j.primary) == null ? void 0 : _k.main;
+  const chartData = ((_b = (_a = areaValue == null ? void 0 : areaValue.main) == null ? void 0 : _a.data) == null ? void 0 : _b.length) ? areaValue.main.data : [{
+    label: "",
+    total: 0
+  }];
+  const xAxisValue = ((_c = areaValue == null ? void 0 : areaValue.main) == null ? void 0 : _c.xAxisValue) || "label";
+  const xAxisType = ((_d = areaValue == null ? void 0 : areaValue.main) == null ? void 0 : _d.xAxisType) || "date";
+  const formatType = ((_e = areaValue == null ? void 0 : areaValue.main) == null ? void 0 : _e.xAxisSchemaFormat) || ((_f = areaValue == null ? void 0 : areaValue.main) == null ? void 0 : _f.xAxisFormatType) || "Date and Month";
+  const yAxisTickCount = (_g = areaValue == null ? void 0 : areaValue.main) == null ? void 0 : _g.yAxisTickCount;
+  const disableLeftLabel = (_h = areaValue.main) == null ? void 0 : _h.disableLeftLabel;
+  const legendLabels = (_i = areaValue.main) == null ? void 0 : _i.legendLabels;
+  const colorMap = (_j = areaValue.style) == null ? void 0 : _j.colorMap;
+  const defaultColour = (_l = (_k = theme.myTheme.palette) == null ? void 0 : _k.primary) == null ? void 0 : _l.main;
   const isSmallScreen = width2 < 600;
   const longestLabelLength = useMemo(() => chartData.length ? Math.max(...chartData.map((d2) => String(d2[xAxisValue]).length)) : 0, [chartData, xAxisValue]);
   const dynamicBottomMargin = Math.ceil(longestLabelLength * PX_PER_CHAR$1 * LABEL_ROTATION$1);
@@ -22379,14 +22255,14 @@ const DrawAreaGraph = ({
         }), /* @__PURE__ */ jsx$1(AxisBottom, {
           top: innerHeight,
           scale: xScale,
-          label: (_l = areaValue.main) == null ? void 0 : _l.bottomLabel,
+          label: (_m = areaValue.main) == null ? void 0 : _m.bottomLabel,
           tickFormat: formatXTick,
           stroke: "#d1d5db",
           tickStroke: "#d1d5db",
           tickLabelProps
         }), /* @__PURE__ */ jsx$1(AxisLeft, {
           scale: yScale,
-          label: !disableLeftLabel ? (_m = areaValue.main) == null ? void 0 : _m.leftLabel : void 0,
+          label: !disableLeftLabel ? (_n = areaValue.main) == null ? void 0 : _n.leftLabel : void 0,
           stroke: "#d1d5db",
           tickStroke: "#d1d5db",
           numTicks: yAxisTickCount || 6,
@@ -22468,39 +22344,38 @@ const AreaGraph = ({
   value,
   theme
 }) => {
-  var _a, _b;
-  const areaData = finalDataProvider("AreaGraph", value, theme);
+  var _a, _b, _c, _d, _e;
   const GraphRender = /* @__PURE__ */ jsx$1(ParentSize$1, {
     children: (parent) => {
-      var _a2, _b2;
+      var _a2, _b2, _c2, _d2, _e2, _f;
       return /* @__PURE__ */ jsx$1(DrawAreaGraph, {
         theme,
         width: parent.width,
-        height: parseInt(areaData.style.containerStyle.height || "300"),
+        height: parseInt(String(((_b2 = (_a2 = value.style) == null ? void 0 : _a2.containerStyle) == null ? void 0 : _b2.height) || "300")),
         margin: {
           top: 40,
           right: 20,
-          bottom: areaData.main.bottomAxisAngle ? 90 : 50,
-          left: ((_b2 = (_a2 = areaData.style.labelStyle) == null ? void 0 : _a2.margin) == null ? void 0 : _b2.left) || 60
+          bottom: ((_c2 = value.main) == null ? void 0 : _c2.bottomAxisAngle) ? 90 : 50,
+          left: ((_f = (_e2 = (_d2 = value.style) == null ? void 0 : _d2.labelStyle) == null ? void 0 : _e2.margin) == null ? void 0 : _f.left) || 60
         },
-        areaValue: areaData
+        areaValue: value
       });
     }
   });
   return /* @__PURE__ */ jsxs("div", {
-    children: [areaData.main.header && /* @__PURE__ */ jsx$1("div", {
+    children: [((_a = value.main) == null ? void 0 : _a.header) && /* @__PURE__ */ jsx$1("div", {
       style: {
         fontWeight: "bold",
         textAlign: "left",
         fontFamily: "inherit",
-        marginBottom: areaData.main.subHeader ? "6px" : "20px",
+        marginBottom: ((_b = value.main) == null ? void 0 : _b.subHeader) ? "6px" : "20px",
         padding: "15px 0 1px 20px",
         width: "100%",
         fontSize: "22px",
         color: theme.myTheme.palette.text.primary
       },
-      children: (_a = areaData.main) == null ? void 0 : _a.header
-    }), areaData.main.subHeader && /* @__PURE__ */ jsx$1("div", {
+      children: (_c = value.main) == null ? void 0 : _c.header
+    }), ((_d = value.main) == null ? void 0 : _d.subHeader) && /* @__PURE__ */ jsx$1("div", {
       style: {
         textAlign: "left",
         fontFamily: "inherit",
@@ -22510,7 +22385,7 @@ const AreaGraph = ({
         fontSize: "12px",
         color: "#979393ff"
       },
-      children: (_b = areaData.main) == null ? void 0 : _b.subHeader
+      children: (_e = value.main) == null ? void 0 : _e.subHeader
     }), GraphRender]
   });
 };
@@ -22523,7 +22398,7 @@ const DrawStackBarLineGraph = ({
   stackBarLineValue,
   theme
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const {
     tooltipData,
     tooltipLeft,
@@ -22533,16 +22408,17 @@ const DrawStackBarLineGraph = ({
     hideTooltip
   } = useTooltip();
   const [hoveredCategory, setHoveredCategory] = useState(null);
-  const chartData = (_b = (_a = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _a.data) != null ? _b : [];
-  const xAxisValue = (_c = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _c.xAxisValue;
-  const legendLabels = (_d = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _d.legendLabels;
-  const growthRateKey = ((_e = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _e.growthRateKey) || "growthRate";
-  const colorMap = (_g = (_f = stackBarLineValue == null ? void 0 : stackBarLineValue.style) == null ? void 0 : _f.stackBarLineStyle) == null ? void 0 : _g.colorMap;
-  const defaultColour = (_j = (_i = (_h = theme == null ? void 0 : theme.myTheme) == null ? void 0 : _h.palette) == null ? void 0 : _i.primary) == null ? void 0 : _j.main;
-  const yAxisTickCount = (_k = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _k.yAxisTickCount;
-  const disableLeftLabel = (_l = stackBarLineValue.main) == null ? void 0 : _l.disableLeftLabel;
-  const tooltipUnit = (_m = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _m.tooltipUnit;
-  const trendColor = (_n = colorMap == null ? void 0 : colorMap[growthRateKey]) != null ? _n : "#E24B4A";
+  const chartData = ((_b = (_a = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _a.data) == null ? void 0 : _b.length) ? stackBarLineValue.main.data : [];
+  const xAxisValue = ((_c = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _c.xAxisValue) || "label";
+  const legendAvailable = (_e = (_d = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _d.legendAvailable) != null ? _e : true;
+  const legendLabels = (_f = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _f.legendLabels;
+  const growthRateKey = ((_g = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _g.growthRateKey) || "growthRate";
+  const colorMap = (_h = stackBarLineValue == null ? void 0 : stackBarLineValue.style) == null ? void 0 : _h.colorMap;
+  const defaultColour = (_k = (_j = (_i = theme == null ? void 0 : theme.myTheme) == null ? void 0 : _i.palette) == null ? void 0 : _j.primary) == null ? void 0 : _k.main;
+  const yAxisTickCount = (_l = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _l.yAxisTickCount;
+  const disableLeftLabel = (_m = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _m.disableLeftLabel;
+  const tooltipUnit = (_n = stackBarLineValue == null ? void 0 : stackBarLineValue.main) == null ? void 0 : _n.tooltipUnit;
+  const trendColor = (_o = colorMap == null ? void 0 : colorMap[growthRateKey]) != null ? _o : "#E24B4A";
   const isSmallScreen = width2 < 600;
   const longestLabelLength = useMemo(() => chartData.length ? Math.max(...chartData.map((d2) => String(d2[xAxisValue]).length)) : 0, [chartData, xAxisValue]);
   const dynamicBottomMargin = Math.ceil(longestLabelLength * PX_PER_CHAR * LABEL_ROTATION);
@@ -22742,7 +22618,7 @@ const DrawStackBarLineGraph = ({
             textAnchor: "end",
             dy: "0.33em"
           }),
-          label: !disableLeftLabel ? (_o = stackBarLineValue.main) == null ? void 0 : _o.leftLabel : void 0,
+          label: !disableLeftLabel ? (_p = stackBarLineValue.main) == null ? void 0 : _p.leftLabel : void 0,
           labelProps: {
             fill: "#6B7280",
             fontSize: 11,
@@ -22754,7 +22630,7 @@ const DrawStackBarLineGraph = ({
           scale: trendScale,
           numTicks: 5,
           stroke: "#9CA3AF",
-          label: (_p = stackBarLineValue.main) == null ? void 0 : _p.rightLabel,
+          label: (_q = stackBarLineValue.main) == null ? void 0 : _q.rightLabel,
           tickStroke: "transparent",
           tickLabelProps: () => ({
             fill: "#6B7280",
@@ -22772,12 +22648,12 @@ const DrawStackBarLineGraph = ({
           top: innerHeight,
           scale: categoryScale,
           stroke: "#9CA3AF",
-          label: (_q = stackBarLineValue.main) == null ? void 0 : _q.bottomLabel,
+          label: (_r = stackBarLineValue.main) == null ? void 0 : _r.bottomLabel,
           tickStroke: "transparent",
           tickLabelProps
         })]
       })
-    }), stackBarLineValue.main.legendAvailable && labelsArray.length > 0 && /* @__PURE__ */ jsx$1(Legend, {
+    }), legendAvailable && labelsArray.length > 0 && /* @__PURE__ */ jsx$1(Legend, {
       labelsArray,
       legendLabels,
       colorMap,
@@ -22845,39 +22721,38 @@ const StackBarLineGraph = ({
   value,
   theme
 }) => {
-  var _a, _b;
-  const stackBarLineData = finalDataProvider("StackBarLineGraph", value, theme);
+  var _a, _b, _c, _d, _e;
   const GraphRender = /* @__PURE__ */ jsx$1(ParentSize$1, {
     children: (parent) => {
-      var _a2, _b2;
+      var _a2, _b2, _c2, _d2, _e2;
       return /* @__PURE__ */ jsx$1(DrawStackBarLineGraph, {
         theme,
         width: parent.width,
-        height: parseInt(stackBarLineData.style.containerStyle.height || "300"),
+        height: parseInt(String((_b2 = (_a2 = value.style) == null ? void 0 : _a2.containerStyle) == null ? void 0 : _b2.height) || "300"),
         margin: {
           top: 40,
           right: 80,
           bottom: 50,
-          left: ((_b2 = (_a2 = stackBarLineData.style.labelStyle) == null ? void 0 : _a2.margin) == null ? void 0 : _b2.left) || 60
+          left: ((_e2 = (_d2 = (_c2 = value.style) == null ? void 0 : _c2.labelStyle) == null ? void 0 : _d2.margin) == null ? void 0 : _e2.left) || 60
         },
-        stackBarLineValue: stackBarLineData
+        stackBarLineValue: value
       });
     }
   });
   return /* @__PURE__ */ jsxs("div", {
-    children: [stackBarLineData.main.header && /* @__PURE__ */ jsx$1("div", {
+    children: [((_a = value.main) == null ? void 0 : _a.header) && /* @__PURE__ */ jsx$1("div", {
       style: {
         fontWeight: "bold",
         textAlign: "left",
         fontFamily: "inherit",
-        marginBottom: stackBarLineData.main.subHeader ? "6px" : "20px",
+        marginBottom: ((_b = value.main) == null ? void 0 : _b.subHeader) ? "6px" : "20px",
         padding: "15px 0 1px 20px",
         width: "100%",
         fontSize: "22px",
         color: theme.myTheme.palette.text.primary
       },
-      children: (_a = stackBarLineData.main) == null ? void 0 : _a.header
-    }), stackBarLineData.main.subHeader && /* @__PURE__ */ jsx$1("div", {
+      children: (_c = value.main) == null ? void 0 : _c.header
+    }), ((_d = value.main) == null ? void 0 : _d.subHeader) && /* @__PURE__ */ jsx$1("div", {
       style: {
         textAlign: "left",
         fontFamily: "inherit",
@@ -22887,7 +22762,7 @@ const StackBarLineGraph = ({
         fontSize: "12px",
         color: "#979393ff"
       },
-      children: (_b = stackBarLineData.main) == null ? void 0 : _b.subHeader
+      children: (_e = value.main) == null ? void 0 : _e.subHeader
     }), GraphRender]
   });
 };
@@ -22898,16 +22773,18 @@ var DrawHorizontalBarGraph = ({
   margin: margin2,
   barValue
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const [hoveredBar, setHoveredBar] = useState({});
-  const graphData = barValue.main.data;
-  const disableLeftLabel = (_a = barValue.main) == null ? void 0 : _a.disableLeftLabel;
-  const labelsArray = Object.keys(graphData[0]).filter((d2) => d2 !== barValue.main.xAxisValue);
-  const colorMap = (_b = barValue.style.barStyle) == null ? void 0 : _b.colorMap;
-  const legendLabels = (_c = barValue.main) == null ? void 0 : _c.legendLabels;
-  const defaultColour = (_e = (_d = theme.myTheme.palette) == null ? void 0 : _d.primary) == null ? void 0 : _e.main;
+  const graphData = ((_b = (_a = barValue.main) == null ? void 0 : _a.data) == null ? void 0 : _b.length) ? barValue.main.data : [];
+  const disableLeftLabel = (_c = barValue.main) == null ? void 0 : _c.disableLeftLabel;
+  const xAxisValue = ((_d = barValue.main) == null ? void 0 : _d.xAxisValue) || "label";
+  const labelsArray = Object.keys(graphData[0]).filter((d2) => d2 !== xAxisValue);
+  const legendAvailable = (_f = (_e = barValue == null ? void 0 : barValue.main) == null ? void 0 : _e.legendAvailable) != null ? _f : true;
+  const colorMap = (_g = barValue.style) == null ? void 0 : _g.colorMap;
+  const legendLabels = (_h = barValue.main) == null ? void 0 : _h.legendLabels;
+  const defaultColour = (_j = (_i = theme.myTheme.palette) == null ? void 0 : _i.primary) == null ? void 0 : _j.main;
   const labelsValueSum = graphData.map((currentBar) => labelsArray.reduce((sum2, k2) => sum2 += Number(currentBar[k2]), 0));
-  const getDataLabel = (d2) => d2[barValue.main.xAxisValue];
+  const getDataLabel = (d2) => d2[xAxisValue];
   const horizontalScale = createLinearScale({
     domain: barValue.main.type === "HorizontalStackBarGraph" ? [0, Math.max(...labelsValueSum)] : [0, Math.max(...graphData.flatMap((d2) => labelsArray.map((key) => Number(d2[key]))))],
     nice: true
@@ -23005,7 +22882,7 @@ var DrawHorizontalBarGraph = ({
         minWidth: `${width2}px`,
         width: `${width2}px`
       },
-      children: [barValue.main.legendAvailable && labelsArray.length > 1 && /* @__PURE__ */ jsx$1(Legend, {
+      children: [legendAvailable && labelsArray.length > 1 && /* @__PURE__ */ jsx$1(Legend, {
         labelsArray,
         legendLabels,
         colorMap,
@@ -23039,9 +22916,9 @@ var DrawHorizontalBarGraph = ({
             style: {
               display: hoveredBar.bar ? "block" : "none"
             },
-            y: barValue.main.type === "HorizontalStackBarGraph" ? calcPositionofBar(hoveredBar.bar, (_f = hoveredBar.bar) == null ? void 0 : _f.bars[hoveredBar.subBarIndex], "stack") : calcPositionofBar(hoveredBar.bar, (_g = hoveredBar.bar) == null ? void 0 : _g.bars[hoveredBar.subBarIndex], "grouphov"),
+            y: barValue.main.type === "HorizontalStackBarGraph" ? calcPositionofBar(hoveredBar.bar, (_k = hoveredBar.bar) == null ? void 0 : _k.bars[hoveredBar.subBarIndex], "stack") : calcPositionofBar(hoveredBar.bar, (_l = hoveredBar.bar) == null ? void 0 : _l.bars[hoveredBar.subBarIndex], "grouphov"),
             width: maxHorizontalSpace,
-            height: barValue.main.type !== "HorizontalStackBarGraph" ? calcWidthofBar(hoveredBar.bar) : Math.min((_h = hoveredBar.bar) == null ? void 0 : _h.bars[0].height, 15),
+            height: barValue.main.type !== "HorizontalStackBarGraph" ? calcWidthofBar(hoveredBar.bar) : Math.min((_m = hoveredBar.bar) == null ? void 0 : _m.bars[0].height, 15),
             fill: theme.myTheme.palette.secondary.main,
             opacity: 1
           }), barValue.main.type === "HorizontalStackBarGraph" ? /* @__PURE__ */ jsx$1(BarStackHorizontal, {
@@ -23124,26 +23001,26 @@ const HorizontalBarGraph = ({
   value,
   theme
 }) => {
-  const barData = finalDataProvider("HorizontalBarGraph", value, theme);
+  var _a, _b;
   const GraphRender = /* @__PURE__ */ jsx$1(ParentSize$1, {
     children: (parent) => {
-      var _a, _b;
+      var _a2, _b2, _c, _d, _e, _f;
       return /* @__PURE__ */ jsx$1(DrawHorizontalBarGraph, {
         theme,
         width: Math.max(parent.width, 500),
-        height: parseInt(barData.style.containerStyle.height || "300"),
+        height: parseInt(String(((_b2 = (_a2 = value.style) == null ? void 0 : _a2.containerStyle) == null ? void 0 : _b2.height) || "300")),
         margin: {
           top: 10,
           right: 20,
-          bottom: barData.main.bottomAxisAngle ? 90 : 40,
-          left: ((_b = (_a = barData.style.labelStyle) == null ? void 0 : _a.margin) == null ? void 0 : _b.left) || 60
+          bottom: ((_c = value.main) == null ? void 0 : _c.bottomAxisAngle) ? 90 : 40,
+          left: ((_f = (_e = (_d = value.style) == null ? void 0 : _d.labelStyle) == null ? void 0 : _e.margin) == null ? void 0 : _f.left) || 60
         },
-        barValue: barData
+        barValue: value
       });
     }
   });
   return /* @__PURE__ */ jsxs("div", {
-    children: [barData.main.header && /* @__PURE__ */ jsx$1("div", {
+    children: [((_a = value.main) == null ? void 0 : _a.header) && /* @__PURE__ */ jsx$1("div", {
       style: {
         fontWeight: "bold",
         textAlign: "left",
@@ -23154,7 +23031,7 @@ const HorizontalBarGraph = ({
         fontSize: "22px",
         color: theme.myTheme.palette.text.primary
       },
-      children: barData.main.header
+      children: (_b = value.main) == null ? void 0 : _b.header
     }), GraphRender]
   });
 };