qaema-ui 0.0.10 → 0.0.12

package/dist/components/Chart.d.ts

@@ -1,9 +1,7 @@
 import { default as React, ReactElement } from 'react';
 type ChartType = 'area' | 'line' | 'bar' | 'pie';
 type ChartDataType = {
-    x: string | number;
-    y: string | number;
-    yy?: string | number;
+    [key: string]: string | number | undefined;
 };
 type PieDataType = {
     name: string;
@@ -13,6 +11,12 @@ type PieDataType = {
 export type ChartVariants = {
     [key in ChartType]: React.ElementType;
 };
+export type LegendItem = {
+    name: string;
+    value?: string | number;
+    color?: string;
+    showRiyal?: boolean;
+};
 type BaseChartProps = {
     xLabel?: string;
     yLabel?: string;
@@ -27,6 +31,8 @@ type BaseChartProps = {
     showLabels?: boolean;
     showYYAxis?: boolean;
     dateFormat?: 'dayMonth' | 'monthOnly';
+    yAxisId?: string | number;
+    legendItems?: Array<LegendItem>;
 };
 type PieChartProps = BaseChartProps & {
     data: Array<PieDataType>;

package/dist/components/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/lib/components/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAgC,MAAM,OAAO,CAAC;AAyB/E,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AAEjD,KAAK,aAAa,GAAG;IACnB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;KACzB,GAAG,IAAI,SAAS,GAAG,KAAK,CAAC,WAAW;CACtC,CAAC;AASF,KAAK,cAAc,GAAG;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;CACvC,CAAC;AAMF,KAAK,aAAa,GAAG,cAAc,GAAG;IACpC,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IACzB,IAAI,EAAE,KAAK,CAAC;IACZ,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CACvB,CAAC;AAEF,KAAK,eAAe,GAAG,cAAc,GAAG;IACtC,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,eAAe,CAAC;AA6CzD,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsS/B,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/lib/components/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,YAAY,EAAgC,MAAM,OAAO,CAAC;AAuB/E,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AAEjD,KAAK,aAAa,GAAG;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC5C,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;KACzB,GAAG,IAAI,SAAS,GAAG,KAAK,CAAC,WAAW;CACtC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AASF,KAAK,cAAc,GAAG;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;CACjC,CAAC;AAMF,KAAK,aAAa,GAAG,cAAc,GAAG;IACpC,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IACzB,IAAI,EAAE,KAAK,CAAC;IACZ,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CACvB,CAAC;AAEF,KAAK,eAAe,GAAG,cAAc,GAAG;IACtC,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,eAAe,CAAC;AAsCzD,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAiQ/B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Chart.js

@@ -1,35 +1,29 @@
 import { j as t } from "../_virtual/jsx-runtime.js";
-import { useState as Z, useMemo as T, useEffect as _ } from "react";
-import { Container as tt, Row as U, Col as et } from "react-grid-system";
-import W, { useTheme as rt } from "styled-components";
-import { LabelRow as ot } from "./HorizontalChart.js";
-import { PieChart as P } from "../node_modules/recharts/es6/chart/PieChart.js";
-import { BarChart as nt } from "../node_modules/recharts/es6/chart/BarChart.js";
-import { LineChart as it } from "../node_modules/recharts/es6/chart/LineChart.js";
-import { AreaChart as at } from "../node_modules/recharts/es6/chart/AreaChart.js";
-import { Pie as st } from "../node_modules/recharts/es6/polar/Pie.js";
-import { Cell as lt } from "../node_modules/recharts/es6/component/Cell.js";
-import w from "./Legend.js";
-import { ResponsiveContainer as mt } from "../node_modules/recharts/es6/component/ResponsiveContainer.js";
-import { CartesianGrid as dt } from "../node_modules/recharts/es6/cartesian/CartesianGrid.js";
-import { XAxis as ct } from "../node_modules/recharts/es6/cartesian/XAxis.js";
-import { YAxis as Y } from "../node_modules/recharts/es6/cartesian/YAxis.js";
-import { Tooltip as ht } from "../node_modules/recharts/es6/component/Tooltip.js";
-import { Legend as gt } from "../node_modules/recharts/es6/component/Legend.js";
-import { Area as pt } from "../node_modules/recharts/es6/cartesian/Area.js";
-import { Line as C } from "../node_modules/recharts/es6/cartesian/Line.js";
-import { Bar as B } from "../node_modules/recharts/es6/cartesian/Bar.js";
-const ft = {
-  area: at,
-  line: it,
-  bar: nt,
-  pie: P
-}, E = W(U)`
-  direction: ltr;
-  margin-top: ${({ theme: l }) => l.spacing.sm};
-  margin-right: 0 !important;
-  margin-bottom: 0;
-`, xt = ({ active: l, payload: m, label: u }) => l && m && m.length ? /* @__PURE__ */ t.jsxs(
+import { useState as _, useMemo as T, useEffect as tt } from "react";
+import et, { useTheme as rt } from "styled-components";
+import { PieChart as B } from "../node_modules/recharts/es6/chart/PieChart.js";
+import { BarChart as ot } from "../node_modules/recharts/es6/chart/BarChart.js";
+import { LineChart as at } from "../node_modules/recharts/es6/chart/LineChart.js";
+import { AreaChart as nt } from "../node_modules/recharts/es6/chart/AreaChart.js";
+import { Pie as it } from "../node_modules/recharts/es6/polar/Pie.js";
+import { Cell as st } from "../node_modules/recharts/es6/component/Cell.js";
+import { Tooltip as P } from "../node_modules/recharts/es6/component/Tooltip.js";
+import { PieChartLegend as lt } from "./ChartLegend/PieChartLegend.js";
+import { ResponsiveContainer as dt } from "../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { CartesianGrid as mt } from "../node_modules/recharts/es6/cartesian/CartesianGrid.js";
+import { XAxis as ht } from "../node_modules/recharts/es6/cartesian/XAxis.js";
+import { YAxis as U } from "../node_modules/recharts/es6/cartesian/YAxis.js";
+import { Legend as ct } from "../node_modules/recharts/es6/component/Legend.js";
+import { ChartLegend as pt } from "./ChartLegend/ChartLegend.js";
+import { Area as ft } from "../node_modules/recharts/es6/cartesian/Area.js";
+import { Line as v } from "../node_modules/recharts/es6/cartesian/Line.js";
+import { Bar as W } from "../node_modules/recharts/es6/cartesian/Bar.js";
+const gt = {
+  area: nt,
+  line: at,
+  bar: ot,
+  pie: B
+}, xt = ({ active: m, payload: l, label: u }) => m && l && l.length ? /* @__PURE__ */ t.jsxs(
   "div",
   {
     style: {
@@ -41,86 +35,87 @@ const ft = {
     },
     children: [
       /* @__PURE__ */ t.jsx("p", { style: { margin: "0 0 5px 0", fontWeight: "bold" }, children: u }),
-      m.map((o, c) => {
-        const a = o.value || 0, j = Math.abs(a || 0), s = `${a < 0 ? "-" : ""}${j.toLocaleString("en-US", {
+      l.map((e, d) => {
+        const i = e.value || 0, b = Math.abs(i || 0), h = `${i < 0 ? "-" : ""}${b.toLocaleString("en-US", {
           minimumFractionDigits: 2,
           maximumFractionDigits: 2
         })}`;
-        return /* @__PURE__ */ t.jsxs("p", { style: { margin: "3px 0", color: o.color || "#7259FF" }, children: [
-          o.name,
+        return /* @__PURE__ */ t.jsxs("p", { style: { margin: "3px 0", color: e.color || "#7259FF" }, children: [
+          e.name,
           ": ",
-          s
-        ] }, c);
+          h
+        ] }, d);
       })
     ]
   }
-) : null, Yt = (l) => {
-  var M, K, R, I, z, V;
-  const [m, u] = Z(!1), o = rt(), {
-    data: c,
-    type: a,
-    xLabel: j,
-    yLabel: b,
-    yyLabel: s,
-    strokeColor: h = ((R = (K = (M = o == null ? void 0 : o.colors) == null ? void 0 : M.primary) == null ? void 0 : K.purple) == null ? void 0 : R.n450) || "#7259FF",
-    biaxialStrokeColor: v = o.colors.secondary.orange.n450,
-    fillColor: f = ((V = (z = (I = o == null ? void 0 : o.colors) == null ? void 0 : I.primary) == null ? void 0 : z.purple) == null ? void 0 : V.n100) || "red",
-    colors: n,
-    UserLegend: x,
-    barRadius: F = [10, 10, 10, 10],
+) : null, Vt = (m) => {
+  var M, K, $, R, I, z, E, V;
+  const [l, u] = _(!1), e = rt(), {
+    data: d,
+    type: i,
+    xLabel: b,
+    yLabel: C,
+    yyLabel: h,
+    strokeColor: c = (($ = (K = (M = e == null ? void 0 : e.colors) == null ? void 0 : M.primary) == null ? void 0 : K.purple) == null ? void 0 : $.n450) || "#7259FF",
+    biaxialStrokeColor: j = e.colors.secondary.orange.n450,
+    fillColor: g = ((z = (I = (R = e == null ? void 0 : e.colors) == null ? void 0 : R.primary) == null ? void 0 : I.purple) == null ? void 0 : z.n100) || "red",
+    colors: a,
+    UserLegend: G,
+    barRadius: w = [10, 10, 10, 10],
     yyDataKey: k = "yy",
-    yDataKey: L = "y",
-    showLabels: $ = !0,
-    showYYAxis: g = !0,
-    dateFormat: O = "dayMonth"
-  } = l, d = T(() => a === "pie" ? [] : c.map((e) => ({
-    x: e.x,
-    y: typeof e.y == "string" ? parseFloat(e.y.toString().replace(/,/g, "")) : e.y
-  })), [c, a]), p = d.length > 5;
-  _(() => {
-    const e = () => {
+    yDataKey: x = "y",
+    showLabels: F = !0,
+    showYYAxis: p = !0,
+    dateFormat: N = "dayMonth",
+    yAxisId: D,
+    legendItems: Y
+  } = m, y = T(() => i === "pie" ? [] : d.map((r) => ({
+    x: r.x,
+    y: typeof r.y == "string" ? Number.parseFloat(r.y.toString().replace(/,/g, "")) : r.y
+  })), [d, i]), f = y.length > 5;
+  tt(() => {
+    const r = () => {
       u(window.innerWidth < 768);
     };
-    return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+    return r(), window.addEventListener("resize", r), () => window.removeEventListener("resize", r);
   }, []);
-  const G = (e) => {
-    const r = new Date(e.toString());
-    return O === "monthOnly" ? r.toLocaleDateString("en-US", { month: "short" }) : m ? `${r.getDate()}/${r.getMonth() + 1}` : r.toLocaleDateString("en-US", { month: "short", day: "numeric" });
-  }, X = () => m ? Math.ceil(d.length / 4) : d.length > 10 ? 1 : 0, { domain: S } = T(() => {
-    if (!d || d.length === 0)
-      return { domain: ["auto", "auto"] };
-    const e = d.map((Q) => Q.y), r = Math.min(...e), i = Math.max(...e);
-    let y = (i - r) * 0.1;
-    y === 0 && (y = Math.abs(r) * 0.1 || 1e3);
-    const J = Math.min(r - y, 0), N = i + y;
+  const O = (r) => {
+    const o = new Date(r.toString());
+    return N === "monthOnly" ? o.toLocaleDateString(e.dir === "ltr" ? "en-US" : "ar-EG", { month: "short" }) : l ? `${o.getDate()}/${o.getMonth() + 1}` : o.toLocaleDateString(e.dir === "ltr" ? "en-US" : "ar-EG", { month: "short", day: "numeric" });
+  }, X = () => l ? Math.ceil(y.length / 4) : y.length > 10 ? 1 : 0, { domain: L } = T(() => {
+    if (!d.length) return { domain: ["auto", "auto"] };
+    const r = d.map((Z) => Number(Z[x] || 0)), o = Math.min(...r), n = Math.max(...r);
+    let s = (n - o) * 0.1;
+    s === 0 && (s = Math.abs(o) * 0.1 || 1e3);
+    const J = Math.min(o - s, 0), Q = n + s;
     return {
-      domain: [J, N]
+      domain: [J, Q]
     };
-  }, [d]), A = (e) => {
-    const r = Math.abs(e), i = e < 0 ? "-" : "";
-    return r >= 1e6 ? `${i}${(r / 1e6).toFixed(1)}M` : r >= 1e3 ? `${i}${(r / 1e3).toFixed(1)}K` : `${i}${r.toFixed(0)}`;
-  }, q = ({ x: e, y: r, payload: i }) => /* @__PURE__ */ t.jsx("g", { transform: `translate(${e},${r})`, children: /* @__PURE__ */ t.jsx(
+  }, [y]), S = (r) => {
+    const o = Math.abs(r), n = r < 0 ? "-" : "";
+    return o >= 1e6 ? `${n}${(o / 1e6).toFixed(1)}M` : o >= 1e3 ? `${n}${(o / 1e3).toFixed(1)}K` : `${n}${o.toFixed(0)}`;
+  }, q = ({ x: r, y: o, payload: n }) => /* @__PURE__ */ t.jsx("g", { transform: `translate(${r},${o})`, children: /* @__PURE__ */ t.jsx(
     "text",
     {
       x: 0,
       y: 0,
-      dy: p ? 25 : 16,
-      dx: p ? -8 : 0,
-      fontSize: m ? 9 : 10,
+      dy: f ? 25 : 16,
+      dx: f ? -8 : 0,
+      fontSize: l ? 9 : 10,
       fill: "#666",
-      textAnchor: p ? "end" : "middle",
-      transform: p ? "rotate(-45)" : void 0,
+      textAnchor: f ? "end" : "middle",
+      transform: f ? "rotate(-45)" : void 0,
       dominantBaseline: "middle",
-      children: G(i.value)
+      children: O(n.value)
     }
-  ) }), H = W(ft[a])`
+  ) }), H = et(gt[i])`
     direction: ltr;
     /* width: 100% !important;
 height: 100% !important; */
-  `, D = {
+  `, A = {
     width: 500,
     height: 400,
-    data: c,
+    data: d,
     margin: {
       top: 10,
       right: 30,
@@ -128,124 +123,118 @@ height: 100% !important; */
       bottom: 0
     }
   };
-  if (a === "pie") {
-    const e = c;
+  if (i === "pie") {
+    const r = d, o = r.map((n, s) => ({
+      name: n.name,
+      value: Number(n.value),
+      color: (a == null ? void 0 : a[s % ((a == null ? void 0 : a.length) || 1)]) || n.color
+    }));
     return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      /* @__PURE__ */ t.jsx(P, { ...D, children: /* @__PURE__ */ t.jsx(
-        st,
-        {
-          data: e,
-          cx: "50%",
-          cy: "50%",
-          innerRadius: 90,
-          outerRadius: 110,
-          startAngle: 90,
-          endAngle: -270,
-          cornerRadius: 40,
-          paddingAngle: 2,
-          dataKey: "value",
-          fill: f,
-          stroke: h,
-          children: e.map((r, i) => /* @__PURE__ */ t.jsx(lt, { fill: n == null ? void 0 : n[i % n.length] }, `cell-${r.name}-${i}`))
-        }
-      ) }),
-      /* @__PURE__ */ t.jsx(tt, { fluid: !0, style: { margin: 0 }, children: /* @__PURE__ */ t.jsx(U, { children: x || e.map((r, i) => /* @__PURE__ */ t.jsx(et, { md: 4, sm: 6, xs: 12, style: { marginBottom: o.spacing.xs }, children: /* @__PURE__ */ t.jsx(ot, { children: /* @__PURE__ */ t.jsx(w, { segment: { color: (n == null ? void 0 : n[i % n.length]) || r.color, name: r.name } }) }) }, `${r.name}-${i}`)) }) })
+      /* @__PURE__ */ t.jsxs(B, { ...A, children: [
+        /* @__PURE__ */ t.jsx(
+          it,
+          {
+            data: r,
+            cx: "50%",
+            cy: "50%",
+            innerRadius: 90,
+            outerRadius: 110,
+            startAngle: 90,
+            endAngle: -270,
+            cornerRadius: 40,
+            paddingAngle: 2,
+            dataKey: "value",
+            fill: g,
+            stroke: c,
+            children: r.map((n, s) => /* @__PURE__ */ t.jsx(st, { fill: a == null ? void 0 : a[s % ((a == null ? void 0 : a.length) || 1)] }, `cell-${n.name}-${s}`))
+          }
+        ),
+        /* @__PURE__ */ t.jsx(P, {})
+      ] }),
+      /* @__PURE__ */ t.jsx(lt, { data: o })
     ] });
   }
-  return /* @__PURE__ */ t.jsx(mt, { initialDimension: { width: 500, height: 600 }, width: "100%", height: "100%", children: /* @__PURE__ */ t.jsxs(H, { ...D, children: [
-    /* @__PURE__ */ t.jsx(dt, { strokeDasharray: "3 3", stroke: "#f0f0f0" }),
+  return /* @__PURE__ */ t.jsx(dt, { initialDimension: { width: 500, height: 600 }, width: "100%", height: "100%", children: /* @__PURE__ */ t.jsxs(H, { ...A, children: [
+    /* @__PURE__ */ t.jsx(mt, { strokeDasharray: "3 3", stroke: "#f0f0f0" }),
     /* @__PURE__ */ t.jsx(
-      ct,
+      ht,
       {
-        label: { value: j, angle: 0, position: "bottom" },
+        label: { value: b, angle: 0, position: "bottom" },
         dataKey: "x",
         tick: q,
         interval: X(),
-        height: p ? 100 : 50
+        height: f ? 100 : 50
       }
     ),
     /* @__PURE__ */ t.jsx(
-      Y,
+      U,
       {
-        domain: S,
+        domain: L,
         tickCount: 10,
-        orientation: g ? "right" : "left",
-        yAxisId: g ? "right" : void 0,
-        label: $ ? { value: b, angle: -90, position: "insideRight" } : void 0,
+        orientation: p ? "right" : "left",
+        yAxisId: p ? "right" : void 0,
+        label: F ? { value: C, angle: -90, position: "insideRight" } : void 0,
         tick: {
-          fontFamily: o.dir === "ltr" ? o.fonts.english : o.fonts.arabic,
-          fontSize: o.typography.sizes.s2,
-          fontWeight: o.typography.weights.regular,
-          fill: o.colors.grey.n400
+          fontFamily: e.dir === "ltr" ? e.fonts.english : e.fonts.arabic,
+          fontSize: e.typography.sizes.s2,
+          fontWeight: e.typography.weights.regular,
+          fill: e.colors.grey.n400
         },
         reversed: !1,
-        tickFormatter: A
+        tickFormatter: S
       }
     ),
-    s && /* @__PURE__ */ t.jsx(
-      Y,
+    h && /* @__PURE__ */ t.jsx(
+      U,
       {
-        domain: S,
+        domain: L,
         tickCount: 10,
         orientation: "left",
-        yAxisId: g ? "left" : void 0,
-        label: $ ? { value: s, angle: -90, position: "insideLeft" } : void 0,
-        tickFormatter: A,
+        yAxisId: p ? "left" : void 0,
+        label: F ? { value: h, angle: -90, position: "insideLeft" } : void 0,
+        tickFormatter: S,
         allowDataOverflow: !0,
         tick: {
-          fontFamily: o.dir === "ltr" ? o.fonts.english : o.fonts.arabic,
-          fontSize: o.typography.sizes.s2,
-          fontWeight: o.typography.weights.regular,
-          fill: o.colors.grey.n400
+          fontFamily: e.dir === "ltr" ? e.fonts.english : e.fonts.arabic,
+          fontSize: e.typography.sizes.s2,
+          fontWeight: e.typography.weights.regular,
+          fill: e.colors.grey.n400
         },
         reversed: !1
       }
     ),
-    /* @__PURE__ */ t.jsx(ht, { content: /* @__PURE__ */ t.jsx(xt, {}) }),
+    /* @__PURE__ */ t.jsx(P, { content: /* @__PURE__ */ t.jsx(xt, {}) }),
     /* @__PURE__ */ t.jsx(
-      gt,
+      ct,
       {
-        content: /* @__PURE__ */ t.jsx(t.Fragment, { children: x || /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(E, { children: /* @__PURE__ */ t.jsx(w, { segment: { color: h, name: b ?? "Y" } }) }),
-          s && /* @__PURE__ */ t.jsx(E, { children: /* @__PURE__ */ t.jsx(w, { segment: { color: v, name: s ?? "Y" } }) })
-        ] }) }),
+        content: G || /* @__PURE__ */ t.jsx(pt, { yColor: c, yyColor: j, legendItems: Y }),
         wrapperStyle: {
-          paddingTop: m ? "20px" : "10px"
+          paddingTop: l ? "20px" : "10px"
         }
       }
     ),
-    a === "area" && /* @__PURE__ */ t.jsx(pt, { type: "monotone", dataKey: "y", stroke: h, fill: f }),
-    a === "line" && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      /* @__PURE__ */ t.jsx(C, { type: "monotone", dataKey: L, yAxisId: g ? "right" : void 0, stroke: h }),
-      s && /* @__PURE__ */ t.jsx(C, { type: "monotone", yAxisId: g ? "left" : void 0, dataKey: k, stroke: v })
+    i === "area" && /* @__PURE__ */ t.jsx(ft, { type: "monotone", dataKey: x, stroke: c, fill: g }),
+    i === "line" && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      /* @__PURE__ */ t.jsx(v, { type: "monotone", dataKey: x, yAxisId: p ? "right" : void 0, stroke: c }),
+      h && /* @__PURE__ */ t.jsx(v, { type: "monotone", yAxisId: p ? "left" : void 0, dataKey: k, stroke: j })
     ] }),
-    a === "bar" && /* @__PURE__ */ t.jsx(t.Fragment, { children: l.barKeys && l.barKeys.length > 0 ? l.barKeys.map((e, r) => /* @__PURE__ */ t.jsx(
-      B,
+    i === "bar" && /* @__PURE__ */ t.jsx(t.Fragment, { children: (E = m.barKeys) != null && E.length && ((V = m.barKeys) == null ? void 0 : V.length) > 0 ? m.barKeys.map((r, o) => /* @__PURE__ */ t.jsx(
+      W,
       {
         type: "monotone",
-        dataKey: e,
-        yAxisId: s ? "right" : void 0,
-        stroke: (n == null ? void 0 : n[r]) || h,
-        fill: (n == null ? void 0 : n[r]) || f,
-        radius: F
+        dataKey: r,
+        yAxisId: D,
+        stroke: (a == null ? void 0 : a[o]) || c,
+        fill: (a == null ? void 0 : a[o]) || g,
+        radius: w
       },
-      e
+      r
     )) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      /* @__PURE__ */ t.jsx(
-        B,
-        {
-          type: "monotone",
-          dataKey: L,
-          yAxisId: s ? "right" : void 0,
-          stroke: h,
-          fill: f,
-          radius: F
-        }
-      ),
-      s && /* @__PURE__ */ t.jsx(C, { type: "monotone", yAxisId: "left", dataKey: k, stroke: v })
+      /* @__PURE__ */ t.jsx(W, { type: "monotone", dataKey: x, yAxisId: D, stroke: c, fill: g, radius: w }),
+      h && /* @__PURE__ */ t.jsx(v, { type: "monotone", yAxisId: "left", dataKey: k, stroke: j })
     ] }) })
   ] }) });
 };
 export {
-  Yt as default
+  Vt as default
 };

package/dist/components/ChartLegend/ChartLegend.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { LegendItem } from '../Chart';
+interface ChartLegendProps {
+    yColor: string;
+    yyColor?: string;
+    legendItems?: LegendItem[];
+}
+export declare const ChartLegend: React.FC<ChartLegendProps>;
+export default ChartLegend;
+//# sourceMappingURL=ChartLegend.d.ts.map

package/dist/components/ChartLegend/ChartLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ChartLegend/ChartLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAOpD,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmClD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/ChartLegend/ChartLegend.js

@@ -0,0 +1,28 @@
+import { j as e } from "../../_virtual/jsx-runtime.js";
+import "react";
+import { useTheme as c } from "styled-components";
+import h from "../../assets/svg/Riyal.svg.js";
+import g from "../Image.js";
+import i from "../Typography.js";
+import { StyledLegendContainer as p, LegendRow as x, LegendName as j, LegendValue as u } from "./styles.js";
+const C = ({ yColor: s, yyColor: m, legendItems: n }) => {
+  const o = c();
+  if (n && n.length)
+    return /* @__PURE__ */ e.jsx(p, { children: n.map((r, t) => {
+      const l = r.showRiyal ?? !0, a = r.value, d = r.color ?? (t === 1 ? m ?? s : s);
+      return /* @__PURE__ */ e.jsxs(x, { children: [
+        /* @__PURE__ */ e.jsxs(j, { children: [
+          /* @__PURE__ */ e.jsx("span", { className: "legend-dot", style: { background: d } }),
+          /* @__PURE__ */ e.jsx(i, { variant: "mdText", weight: "semiBold", children: r.name })
+        ] }),
+        /* @__PURE__ */ e.jsx(u, { children: a && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          l && /* @__PURE__ */ e.jsx(g, { src: h, style: { verticalAlign: "middle" }, width: o.spacing.sm, height: o.spacing.sm }),
+          /* @__PURE__ */ e.jsx(i, { variant: "mdText", children: a })
+        ] }) })
+      ] }, `${r.name}-${t}`);
+    }) });
+};
+export {
+  C as ChartLegend,
+  C as default
+};

package/dist/components/ChartLegend/PieChartLegend.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+type PieChartLegendItem = {
+    name: string;
+    value: number;
+    color: string;
+};
+interface PieChartLegendProps {
+    data: PieChartLegendItem[];
+    maxNameLength?: number;
+    showRiyal?: boolean;
+}
+export declare const PieChartLegend: React.FC<PieChartLegendProps>;
+export {};
+//# sourceMappingURL=PieChartLegend.d.ts.map

package/dist/components/ChartLegend/PieChartLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChartLegend.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ChartLegend/PieChartLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,mBAAmB;IAC3B,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4BxD,CAAC"}

package/dist/components/ChartLegend/PieChartLegend.js

@@ -0,0 +1,27 @@
+import { j as n } from "../../_virtual/jsx-runtime.js";
+import "react";
+import { useTheme as h } from "styled-components";
+import a from "../../assets/svg/Riyal.svg.js";
+import x from "../Image.js";
+import p from "../Typography.js";
+import { PieLegendContainer as j, LegendRow as u, LegendName as f, LegendValue as y } from "./styles.js";
+const N = ({ data: s, maxNameLength: o = 18, showRiyal: d = !0 }) => {
+  const l = h();
+  return !s || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ n.jsx(j, { children: s.map((r) => {
+    var e, c;
+    const g = ((e = r == null ? void 0 : r.name) == null ? void 0 : e.length) > o ? ((c = r == null ? void 0 : r.name) == null ? void 0 : c.slice(0, o)) + "..." : r == null ? void 0 : r.name;
+    return /* @__PURE__ */ n.jsxs(u, { children: [
+      /* @__PURE__ */ n.jsxs(f, { children: [
+        /* @__PURE__ */ n.jsx("span", { className: "legend-dot", style: { background: r == null ? void 0 : r.color } }),
+        /* @__PURE__ */ n.jsx(p, { variant: "mdText", weight: "semiBold", children: g })
+      ] }),
+      /* @__PURE__ */ n.jsxs(y, { children: [
+        d && /* @__PURE__ */ n.jsx(x, { src: a, style: { verticalAlign: "middle" }, width: l.spacing.sm, height: l.spacing.sm }),
+        /* @__PURE__ */ n.jsx(p, { variant: "mdText", children: r == null ? void 0 : r.value })
+      ] })
+    ] }, r == null ? void 0 : r.name);
+  }) });
+};
+export {
+  N as PieChartLegend
+};

package/dist/components/ChartLegend/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ChartLegend';
+export * from './PieChartLegend';
+export * from './styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ChartLegend/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ChartLegend/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC"}

package/dist/components/ChartLegend/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledLegendContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PieLegendContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LegendRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LegendName: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const LegendValue: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/ChartLegend/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ChartLegend/styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,qBAAqB,6NAuBjC,CAAC;AACF,eAAO,MAAM,kBAAkB,6NAgB9B,CAAC;AAEF,eAAO,MAAM,SAAS,6NAsBrB,CAAC;AAEF,eAAO,MAAM,UAAU,+NAwBtB,CAAC;AAEF,eAAO,MAAM,WAAW,6NAWvB,CAAC"}

package/dist/components/ChartLegend/styles.js

@@ -0,0 +1,107 @@
+import n from "styled-components";
+import { device as e } from "../../constants/breakPoints.constant.js";
+import { coreI18n as t } from "../../i18n/i18n.js";
+const r = n.div`
+  display: flex;
+  padding-right: ${({ theme: i }) => i.spacing.m};
+  padding-left: ${({ theme: i }) => i.spacing.m};
+  gap: ${({ theme: i }) => i.spacing.l};
+  direction: ltr;
+  margin-top: ${({ theme: i }) => i.spacing.sm};
+  margin-right: 0;
+  margin-bottom: 0;
+
+  @media ${e.tablet} {
+    flex-direction: column;
+    gap: ${({ theme: i }) => i.spacing.sm};
+    padding-right: ${({ theme: i }) => i.spacing.sm};
+    padding-left: ${({ theme: i }) => i.spacing.sm};
+    width: 100%;
+  }
+
+  @media ${e.mobile} {
+    gap: ${({ theme: i }) => i.spacing.xs};
+    padding-right: ${({ theme: i }) => i.spacing.xs};
+    padding-left: ${({ theme: i }) => i.spacing.xs};
+  }
+`, p = n.div`
+  flex-direction: column;
+  display: flex;
+  padding-right: ${({ theme: i }) => i.spacing.m};
+  padding-left: ${({ theme: i }) => i.spacing.m};
+  gap: ${({ theme: i }) => i.spacing.l};
+  direction: ltr;
+  margin-top: ${({ theme: i }) => i.spacing.sm};
+  margin-right: 0;
+  margin-bottom: 0;
+
+  @media ${e.mobile} {
+    gap: ${({ theme: i }) => i.spacing.xs};
+    padding-right: ${({ theme: i }) => i.spacing.xs};
+    padding-left: ${({ theme: i }) => i.spacing.xs};
+  }
+`, s = n.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  gap: 1rem;
+  box-sizing: border-box;
+  min-width: 0;
+  padding: 0.25rem 0;
+  flex-direction: ${({ theme: i }) => i.dir == "rtl" && "row-reverse"};
+  @media ${e.tablet} {
+    gap: 0.5rem;
+    padding: 0.15rem 0;
+    min-width: 150px;
+    width: auto;
+  }
+
+  @media ${e.mobile} {
+    width: 100%;
+    gap: 0.25rem;
+    padding: 0.1rem 0;
+  }
+`, m = n.span`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  flex-direction: ${({ theme: i }) => i.dir == "rtl" && "row-reverse"};
+  .legend-dot {
+    width: 12px;
+    height: 12px;
+    display: inline-block;
+    flex-shrink: 0;
+    margin: ${() => t.language === "en" ? "0 0.3rem 0 0" : "0 0 0 0.3rem"};
+  }
+  .legend-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 7.5rem;
+    font-size: ${({ theme: i }) => i.typography.sizes.s3};
+    @media ${e.tablet} {
+      max-width: 5rem;
+      font-size: ${({ theme: i }) => i.typography.sizes.s2};
+    }
+  }
+`, o = n.div`
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: 600;
+  @media ${e.tablet} {
+    min-width: 2.5rem;
+    font-size: ${({ theme: i }) => i.typography.sizes.s2};
+  }
+`;
+export {
+  m as LegendName,
+  s as LegendRow,
+  o as LegendValue,
+  p as PieLegendContainer,
+  r as StyledLegendContainer
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qaema-ui",
   "private": false,
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "publishConfig": {
     "access": "public"