impaktapps-design 0.2.58-alpha.3 → 0.2.58-alpha.5

package/dist/impaktapps-design.es.js

@@ -10873,26 +10873,23 @@ function Legend({
   colorRange,
   dataKeyArray
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const legendGlyphSize = ((_b = (_a = value == null ? void 0 : value.main) == null ? void 0 : _a.legend) == null ? void 0 : _b.colorRectWidth) || 15;
-  const xValues = (_c = value == null ? void 0 : value.main) == null ? void 0 : _c.data.map((item) => {
-    return item.x;
-  });
   const ordinalColorScale = createOrdinalScale$1({
-    domain: dataKeyArray || ((_d = value == null ? void 0 : value.main) == null ? void 0 : _d.tooltipDataKey),
-    range: colorRange || ((_f = (_e = value == null ? void 0 : value.style) == null ? void 0 : _e.pieStyle) == null ? void 0 : _f.colorRange)
+    domain: dataKeyArray || ((_c = value == null ? void 0 : value.main) == null ? void 0 : _c.tooltipDataKey),
+    range: colorRange || ((_e = (_d = value == null ? void 0 : value.style) == null ? void 0 : _d.pieStyle) == null ? void 0 : _e.colorRange)
   });
   return /* @__PURE__ */ jsxs("div", {
     className: "legend",
     style: {
       paddingLeft: "40px",
       paddingRight: "40px",
-      ...(_h = (_g = value == null ? void 0 : value.style) == null ? void 0 : _g.legendStyle) == null ? void 0 : _h.legend
+      ...(_g = (_f = value == null ? void 0 : value.style) == null ? void 0 : _f.legendStyle) == null ? void 0 : _g.legend
     },
     children: [/* @__PURE__ */ jsx("div", {
       className: "title",
-      style: (_j = (_i = value == null ? void 0 : value.style) == null ? void 0 : _i.legendStyle) == null ? void 0 : _j.legendTitle,
-      children: (_l = (_k = value == null ? void 0 : value.main) == null ? void 0 : _k.legend) == null ? void 0 : _l.legendTitle
+      style: (_i = (_h = value == null ? void 0 : value.style) == null ? void 0 : _h.legendStyle) == null ? void 0 : _i.legendTitle,
+      children: (_k = (_j = value == null ? void 0 : value.main) == null ? void 0 : _j.legend) == null ? void 0 : _k.legendTitle
     }), /* @__PURE__ */ jsx(Ordinal, {
       scale: ordinalColorScale,
       labelFormat: (label) => `${label.toUpperCase()}`,
@@ -10903,7 +10900,7 @@ function Legend({
             display: "flex",
             flexDirection: ((_b2 = (_a2 = value == null ? void 0 : value.main) == null ? void 0 : _a2.legend) == null ? void 0 : _b2.direction) || "row"
           },
-          children: xValues.map((label, i) => {
+          children: labels.map((label, i) => {
             var _a3, _b3;
             return /* @__PURE__ */ jsxs(LegendItem, {
               margin: "0 5px",
@@ -10919,10 +10916,10 @@ function Legend({
                   width: legendGlyphSize,
                   height: legendGlyphSize
                 })
-              }), /* @__PURE__ */ jsx(LegendLabel, {
+              }), /* @__PURE__ */ jsxs(LegendLabel, {
                 align: `${((_b3 = (_a3 = value == null ? void 0 : value.main) == null ? void 0 : _a3.legend) == null ? void 0 : _b3.align) || "left"}`,
                 margin: "0 0 0 4px",
-                children: label.text
+                children: ["", label.text]
               })]
             }, `legend-quantile-${i}`);
           })
@@ -19777,19 +19774,22 @@ function AnimatedLineSeries(props) {
 const DrawGraph = ({
   value
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t5;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const data = (_a = value == null ? void 0 : value.main) == null ? void 0 : _a.data;
   const arr = value.main.xAxisValue && value.main.yAxisValue ? [value.main.xAxisValue, value.main.yAxisValue] : Object.keys(data[0][0]);
   const accessors = {
     xAccessor: (d2) => d2[arr[0]],
     yAccessor: (d2) => d2[arr[1]]
   };
+  const dataKeyArray = data.map((ele) => {
+    return ele.key;
+  });
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [value.main.legendAvailable && /* @__PURE__ */ jsx(Legend, {
       value,
-      dataKeyArray: (_b = value == null ? void 0 : value.main) == null ? void 0 : _b.data
+      dataKeyArray
     }), /* @__PURE__ */ jsxs(XYChart, {
-      height: parseInt((_d = (_c = value.style) == null ? void 0 : _c.containerStyle) == null ? void 0 : _d.height),
+      height: parseInt((_c = (_b = value.style) == null ? void 0 : _b.containerStyle) == null ? void 0 : _c.height),
       xScale: {
         type: "band"
       },
@@ -19800,11 +19800,11 @@ const DrawGraph = ({
         orientation: "left",
         hideAxisLine: value.main.hideLeftAxisLine,
         label: value.main.leftLabel,
-        left: ((_f = (_e = value.style) == null ? void 0 : _e.labelStyle) == null ? void 0 : _f.leftLabelMargin) || 70,
-        labelOffset: ((_h = (_g = value.style) == null ? void 0 : _g.labelStyle) == null ? void 0 : _h.leftLabelOffset) || 32,
+        left: ((_e = (_d = value.style) == null ? void 0 : _d.labelStyle) == null ? void 0 : _e.leftLabelMargin) || 70,
+        labelOffset: ((_g = (_f = value.style) == null ? void 0 : _f.labelStyle) == null ? void 0 : _g.leftLabelOffset) || 32,
         labelProps: {
-          fill: (_j = (_i = value.style) == null ? void 0 : _i.labelStyle) == null ? void 0 : _j.labelColor,
-          fontSize: (_l = (_k = value.style) == null ? void 0 : _k.labelStyle) == null ? void 0 : _l.fontSize
+          fill: (_i = (_h = value.style) == null ? void 0 : _h.labelStyle) == null ? void 0 : _i.labelColor,
+          fontSize: (_k = (_j = value.style) == null ? void 0 : _j.labelStyle) == null ? void 0 : _k.fontSize
         },
         tickLabelProps: (e3) => {
           var _a2, _b2;
@@ -19817,8 +19817,8 @@ const DrawGraph = ({
         hideAxisLine: value.main.hideBottomAxisLine,
         label: value.main.bottomLabel,
         labelProps: {
-          fill: (_n = (_m = value.style) == null ? void 0 : _m.labelStyle) == null ? void 0 : _n.labelColor,
-          fontSize: (_p = (_o = value.style) == null ? void 0 : _o.labelStyle) == null ? void 0 : _p.fontSize
+          fill: (_m = (_l = value.style) == null ? void 0 : _l.labelStyle) == null ? void 0 : _m.labelColor,
+          fontSize: (_o = (_n = value.style) == null ? void 0 : _n.labelStyle) == null ? void 0 : _o.fontSize
         },
         tickLabelProps: (e3) => {
           var _a2, _b2;
@@ -19826,22 +19826,25 @@ const DrawGraph = ({
             fill: (_b2 = (_a2 = value.style) == null ? void 0 : _a2.labelStyle) == null ? void 0 : _b2.labelColor
           };
         },
-        labelOffset: ((_r = (_q = value.style) == null ? void 0 : _q.labelStyle) == null ? void 0 : _r.bottomLabelOffset) || 32
+        labelOffset: ((_q = (_p = value.style) == null ? void 0 : _p.labelStyle) == null ? void 0 : _q.bottomLabelOffset) || 32
       }), /* @__PURE__ */ jsx(AnimatedGrid, {
         columns: value.main.grid,
-        numTicks: value.main.numHidden ? 0 : ((_s = value.main) == null ? void 0 : _s.data[0].length) - 1
-      }), (_t5 = value.main) == null ? void 0 : _t5.data.map((elem, i) => {
+        numTicks: value.main.numHidden ? 0 : ((_r = value.main) == null ? void 0 : _r.data[0].length) - 1
+      }), (_s = value.main) == null ? void 0 : _s.data.map((elem, i) => {
         var _a2, _b2, _c2, _d2, _e2, _f2;
-        return /* @__PURE__ */ jsx(AnimatedLineSeries, {
-          dataKey: value.main.tooltipDataKey[i],
-          data: elem,
-          fill: (_b2 = (_a2 = value.style) == null ? void 0 : _a2.lineStyle) == null ? void 0 : _b2.lineAreaColor,
-          fillOpacity: (_d2 = (_c2 = value.style) == null ? void 0 : _c2.lineStyle) == null ? void 0 : _d2.lineAreaOpacity,
-          floodColor: "green",
-          floodOpacity: 1,
-          stroke: (_f2 = (_e2 = value.style) == null ? void 0 : _e2.lineStyle) == null ? void 0 : _f2.colorRange[i],
-          ...accessors
-        });
+        return /* @__PURE__ */ jsx(
+          AnimatedLineSeries,
+          {
+            dataKey: elem.key,
+            data: elem.value,
+            fill: (_b2 = (_a2 = value.style) == null ? void 0 : _a2.lineStyle) == null ? void 0 : _b2.lineAreaColor,
+            fillOpacity: (_d2 = (_c2 = value.style) == null ? void 0 : _c2.lineStyle) == null ? void 0 : _d2.lineAreaOpacity,
+            floodColor: "green",
+            floodOpacity: 1,
+            stroke: (_f2 = (_e2 = value.style) == null ? void 0 : _e2.lineStyle) == null ? void 0 : _f2.colorRange[i],
+            ...accessors
+          }
+        );
       }), /* @__PURE__ */ jsx(Tooltip, {
         snapTooltipToDatumX: true,
         snapTooltipToDatumY: true,