@pareto-engineering/design-system 5.3.0 → 5.4.0

package/dist/ui/a/Charts/BarChart/BarChart.js

@@ -0,0 +1,165 @@
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { useState as A } from "react";
+import { P as e } from "../../../../index-CxkFVI6N.js";
+import { s as N } from "../../../../exports.module-DmUnHWIJ.js";
+import R from "../Common/CustomLegend/CustomLegend.js";
+import B from "../Common/CustomTooltipContent/CustomTooltipContent.js";
+import O from "../Common/YLabelsDropDown/YlabelsDropDown.js";
+import { g as Y, f as q, B as n, R as j, T as K } from "../../../../generateCategoricalChart-BBPxYd_a.js";
+import { X as m, Y as p, C as w } from "../../../../YAxis-C5dCrcDo.js";
+import '../../../../assets/BarChart.css';var P = Y({
+  chartName: "BarChart",
+  GraphicalChild: n,
+  defaultTooltipEventType: "axis",
+  validateTooltipEventTypes: ["axis", "item"],
+  axisComponents: [{
+    axisType: "xAxis",
+    AxisComp: m
+  }, {
+    axisType: "yAxis",
+    AxisComp: p
+  }],
+  formatAxisMap: q
+});
+const D = N.base, E = "bar-chart", c = ({
+  id: r,
+  className: f,
+  data: d,
+  title: h,
+  xKey: x,
+  yKeys: o,
+  xLabel: b,
+  yLabel: C,
+  colors: u,
+  height: y,
+  width: g,
+  isTimeFormat: T,
+  capitalizedLegend: L
+}) => {
+  const l = o.map((a) => ({
+    label: a,
+    color: u[o.indexOf(a)]
+  })), [i, v] = A(l);
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      id: r,
+      className: [
+        D,
+        E,
+        f
+      ].filter((a) => a).join(" "),
+      children: [
+        /* @__PURE__ */ t("div", { className: "chart-header", children: [
+          /* @__PURE__ */ s("h3", { children: h }),
+          /* @__PURE__ */ s(
+            O,
+            {
+              allYLabels: l,
+              selectedYLabels: i,
+              setSelectedYLabels: v
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s(
+          R,
+          {
+            colorsArray: i.map((a) => a.color),
+            yKeysArray: i.map((a) => a.label),
+            capitalizedLegend: L
+          },
+          r
+        ),
+        /* @__PURE__ */ s(j, { width: g, height: y, children: /* @__PURE__ */ t(P, { data: d, children: [
+          /* @__PURE__ */ s(w, { vertical: !1 }),
+          /* @__PURE__ */ s(
+            m,
+            {
+              dataKey: x,
+              label: { value: b, position: "insideBottom", offset: -5 },
+              axisLine: !1,
+              tickLine: !1,
+              tickCount: 3
+            }
+          ),
+          /* @__PURE__ */ s(
+            p,
+            {
+              label: {
+                value: C,
+                angle: -90,
+                position: "insideLeft",
+                offset: 15
+              },
+              axisLine: !1,
+              tickLine: !1
+            }
+          ),
+          /* @__PURE__ */ s(K, { content: /* @__PURE__ */ s(B, { isTimeFormat: T }) }),
+          i.map((a) => /* @__PURE__ */ s(
+            n,
+            {
+              stackId: "a",
+              id: a.label,
+              dataKey: a.label,
+              fill: a.color
+            },
+            a.label
+          ))
+        ] }) })
+      ]
+    }
+  );
+};
+c.propTypes = {
+  /**
+   * Array of data objects to be displayed in the chart.
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  data: e.arrayOf(e.object).isRequired,
+  /**
+   * Title of the chart.
+   */
+  title: e.string.isRequired,
+  /**
+   * Key for the x-axis data.
+   */
+  xKey: e.string.isRequired,
+  /**
+   * Array of keys for the y-axis data.
+   */
+  yKeys: e.arrayOf(e.string).isRequired,
+  /**
+   * Label for the x-axis.
+   */
+  xLabel: e.string,
+  /**
+   * Label for the y-axis.
+   */
+  yLabel: e.string,
+  /**
+   * Array of colors corresponding to the y-axis data keys.
+   */
+  colors: e.arrayOf(e.string).isRequired,
+  /**
+   * Height of the chart.
+   */
+  height: e.oneOfType([
+    e.string,
+    e.number
+  ]),
+  /**
+   * Width of the chart.
+   */
+  width: e.oneOfType([
+    e.string,
+    e.number
+  ])
+};
+c.defaultProps = {
+  width: "100%",
+  height: 300
+};
+export {
+  c as default
+};

package/dist/ui/a/Charts/BarChart/index.js

@@ -0,0 +1,4 @@
+import { default as t } from "./BarChart.js";
+export {
+  t as BarChart
+};

package/dist/ui/a/Charts/Common/CustomLegend/CustomLegend.js

@@ -0,0 +1,96 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import "react";
+import { P as t } from "../../../../../index-CxkFVI6N.js";
+import { s as N } from "../../../../../exports.module-DmUnHWIJ.js";
+import "../../../../../debounce-Cm69Z_cF.js";
+import "../../../../../throttle-BCrS-Wew.js";
+import { snakeCaseToTitleCase as b } from "../../../../utils/formatting.js";
+import '../../../../../assets/CustomLegend.css';const h = N.base, C = "custom-legend", y = (r) => new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(r), l = ({
+  id: r,
+  className: n,
+  colorsArray: c,
+  yKeysArray: m,
+  orientation: p,
+  getLegendItemTitle: o,
+  getLegendItemSubtitle: i,
+  capitalizedLegend: d,
+  subtitleToCurrency: u,
+  isPayOutChart: f
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    id: r,
+    className: [
+      h,
+      C,
+      n,
+      p
+    ].filter((e) => e).join(" "),
+    children: m.map((e, g) => /* @__PURE__ */ s("div", { className: "item", children: [
+      /* @__PURE__ */ s("div", { className: "title", children: [
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: "dot",
+            style: { backgroundColor: c[g] }
+          }
+        ),
+        /* @__PURE__ */ a("span", { className: "text", children: d ? b(o(e)) : o(e) })
+      ] }),
+      /* @__PURE__ */ s("div", { className: "sub-title-percentage-container", children: [
+        /* @__PURE__ */ a("span", { className: "sub-title", children: u ? y(i(e)) : i(e) }),
+        Object.prototype.hasOwnProperty.call(e, "percentage") && !f && /* @__PURE__ */ a("span", { className: "percentage-title", children: `${e == null ? void 0 : e.percentage}%` })
+      ] })
+    ] }, e))
+  }
+);
+l.propTypes = {
+  /**
+   * The id of the dropdown component.
+   */
+  id: t.string,
+  /**
+   * Additional class names for the dropdown component.
+   */
+  className: t.string,
+  /**
+   * Array of colors corresponding to the y-axis data keys.
+   */
+  colorsArray: t.arrayOf(t.string).isRequired,
+  /**
+   * Array of keys for the y-axis data.
+   */
+  yKeysArray: t.arrayOf(t.string).isRequired,
+  /**
+   * The orientation of the Legend
+   */
+  orientation: t.oneOf(["vertical", "horizontal"]),
+  /**
+   * The function to get the legendItemKey
+   */
+  getLegendItemTitle: t.func,
+  /**
+   * The function to get legend children
+   */
+  getLegendItemSubtitle: t.func,
+  /**
+   * Flag on whether to capitalize legend keys
+   */
+  capitalizedLegend: t.bool,
+  /**
+   * Flag on whether to convert the subtitle to currency
+   */
+  subtitleToCurrency: t.bool
+};
+l.defaultProps = {
+  orientation: "horizontal",
+  getLegendItemTitle: (r) => r,
+  /* eslint-disable no-unused-vars */
+  getLegendItemSubtitle: () => {
+  },
+  capitalizedLegend: !1,
+  subtitleToCurrency: !1
+};
+export {
+  l as default
+};

package/dist/ui/a/Charts/Common/CustomLegend/index.js

@@ -0,0 +1,4 @@
+import { default as t } from "./CustomLegend.js";
+export {
+  t as CustomLegend
+};

package/dist/ui/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.js

@@ -0,0 +1,137 @@
+import { jsx as s, jsxs as r, Fragment as $ } from "react/jsx-runtime";
+import * as m from "react";
+import { P as e } from "../../../../../index-CxkFVI6N.js";
+import { s as v } from "../../../../../exports.module-DmUnHWIJ.js";
+import "../../../../../debounce-Cm69Z_cF.js";
+import "../../../../../throttle-BCrS-Wew.js";
+import { DATE_FORMATS as h, formatDate as P, formatTime as x, snakeCaseToTitleCase as p } from "../../../../utils/formatting.js";
+import '../../../../../assets/CustomTooltipContent.css';const F = v.base, O = "custom-tooltip-content", R = (a, l) => l ? x(a) : typeof a == "number" ? Number.isInteger(a) ? a : a.toFixed(2) : a, k = ({ entry: a, formatLabelValue: l }) => {
+  var t;
+  return /* @__PURE__ */ r("div", { className: "pie-chart-label", children: [
+    /* @__PURE__ */ r("div", { className: "status", children: [
+      /* @__PURE__ */ s(
+        "span",
+        {
+          className: "dot",
+          style: { backgroundColor: (t = a == null ? void 0 : a.payload) == null ? void 0 : t.color }
+        }
+      ),
+      /* @__PURE__ */ s("p", { className: "label", style: { color: a.color, textTransform: "capitalize" }, children: `${p(a.name)}  ` }, `${a.name}`)
+    ] }),
+    /* @__PURE__ */ s("p", { className: "value", children: `${l(a.value)}` })
+  ] });
+}, A = ({ entry: a, formatLabelValue: l }) => {
+  var t, i;
+  return /* @__PURE__ */ r($, { children: [
+    /* @__PURE__ */ s("p", { children: "Submissions" }),
+    /* @__PURE__ */ r("div", { className: "pie-chart-label", children: [
+      /* @__PURE__ */ r("div", { className: "status", children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            className: "dot",
+            style: { backgroundColor: (t = a == null ? void 0 : a.payload) == null ? void 0 : t.color }
+          }
+        ),
+        /* @__PURE__ */ s("p", { className: "label", style: { color: a.color, textTransform: "capitalize" }, children: `${p(a.name)}  ` }, `${a.name}`)
+      ] }),
+      /* @__PURE__ */ s("p", { className: "value", children: `${l(a.value)}` }),
+      /* @__PURE__ */ s("p", { className: "percentage-title", children: `${(i = a == null ? void 0 : a.payload) == null ? void 0 : i.percentage}%` })
+    ] })
+  ] });
+}, D = ({ entry: a, formatLabelValue: l }) => /* @__PURE__ */ s("p", { className: "label", style: { color: a.color, textTransform: "capitalize" }, children: `${p(a.name)}: ${l(a.value)}` }, `${a.name}`), u = ({
+  id: a,
+  className: l,
+  dateFormat: t,
+  isTimeFormat: i,
+  isDateValue: N,
+  active: C,
+  payload: n,
+  label: f,
+  isPieChart: d,
+  isPayOutChart: b
+}) => {
+  const c = m.useCallback(
+    (o) => R(o, i),
+    [i]
+  ), g = m.useCallback((o) => d && b ? /* @__PURE__ */ s(k, { entry: o, formatLabelValue: c }) : d ? /* @__PURE__ */ s(A, { entry: o, formatLabelValue: c }) : /* @__PURE__ */ s(D, { entry: o, formatLabelValue: c }), [d, b, c]);
+  if (!C || !n || !n.length)
+    return null;
+  const T = n.filter((o) => (o == null ? void 0 : o.name) !== "bounds");
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      id: a,
+      className: [
+        F,
+        O,
+        l
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ s("p", { className: "label", children: N ? P(f, t) : f }),
+        T.map((o) => /* @__PURE__ */ s(m.Fragment, { children: g(o) }, o.name || o.dataKey))
+      ]
+    }
+  );
+};
+u.propTypes = {
+  /**
+   * The id of the tooltip component
+   */
+  id: e.string,
+  /**
+   * Additional class names for the tooltip component
+   */
+  className: e.string,
+  /**
+   * Flag indicating whether values should be formatted as time
+   */
+  isTimeFormat: e.bool,
+  /**
+   * The format to use for date values
+   */
+  dateFormat: e.oneOf(Object.values(h)),
+  /**
+   * Flag indicating whether the label is a date value
+   */
+  isDateValue: e.bool,
+  /**
+   * If true, the tooltip is displayed
+   */
+  active: e.bool.isRequired,
+  /**
+   * The source data to be displayed in the tooltip
+   */
+  payload: e.arrayOf(e.shape({
+    name: e.string,
+    value: e.oneOfType([e.string, e.number]),
+    payload: e.shape({}),
+    dataKey: e.string,
+    color: e.string
+  })).isRequired,
+  /**
+   * The label value which is active
+   */
+  label: e.oneOfType([e.string, e.number]).isRequired,
+  /**
+   * Flag indicating whether the chart is a pie chart
+   */
+  isPieChart: e.bool,
+  /**
+   * Flag indicating whether the chart is a payout chart
+   */
+  isPayOutChart: e.bool
+};
+u.defaultProps = {
+  id: void 0,
+  className: void 0,
+  isTimeFormat: !1,
+  isDateValue: !0,
+  dateFormat: h.HUMAN_READABLE,
+  isPieChart: !1,
+  isPayOutChart: !1
+};
+const E = m.memo(u);
+export {
+  E as default
+};

package/dist/ui/a/Charts/Common/CustomTooltipContent/index.js

@@ -0,0 +1,4 @@
+import { default as e } from "./CustomTooltipContent.js";
+export {
+  e as CustomTooltipContent
+};

package/dist/ui/a/Charts/Common/YLabelsDropDown/YlabelsDropDown.js

@@ -0,0 +1,107 @@
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import * as g from "react";
+import { P as s } from "../../../../../index-CxkFVI6N.js";
+import { s as o } from "../../../../../exports.module-DmUnHWIJ.js";
+import "../../../../../debounce-Cm69Z_cF.js";
+import "../../../../../throttle-BCrS-Wew.js";
+import { snakeCaseToTitleCase as u } from "../../../../utils/formatting.js";
+import '../../../../../assets/YlabelsDropDown.css';const C = o.base, k = "y-labels-dropdown", i = ({
+  id: p,
+  className: m,
+  placeholder: d,
+  selectedYLabels: c,
+  setSelectedYLabels: b,
+  allYLabels: f
+}) => {
+  const [r, N] = g.useState(!1), h = (e) => {
+    b(
+      (a) => a.some((t) => t.label === e.label) ? a.filter((t) => t.label !== e.label) : [...a, e]
+    );
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      id: p,
+      className: [
+        C,
+        k,
+        m
+      ].filter((e) => e).join(" "),
+      children: [
+        /* @__PURE__ */ n(
+          "button",
+          {
+            className: "dropdown-button",
+            onClick: () => N(!r),
+            type: "button",
+            children: [
+              d,
+              /* @__PURE__ */ l("span", { className: `icon ${r ? o.modifierOpen : ""}`, children: "W" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ l("div", { className: `dropdown-content ${r ? o.modifierOpen : ""}`, children: f.map((e) => (
+          // eslint-disable-next-line max-len
+          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: `dropdown-item ${c.some((a) => a.label === e.label) ? o.modifierActive : ""}`,
+              onClick: () => h(e),
+              children: [
+                /* @__PURE__ */ l(
+                  "span",
+                  {
+                    className: "status-dot",
+                    style: { backgroundColor: e.color }
+                  }
+                ),
+                u(e.label),
+                c.some((a) => a.label === e.label) && /* @__PURE__ */ l("span", { className: "icon checkmark", children: "I" })
+              ]
+            },
+            e.label
+          )
+        )) })
+      ]
+    }
+  );
+};
+i.propTypes = {
+  /**
+   * The id of the dropdown component.
+   */
+  id: s.string,
+  /**
+   * Additional class names for the dropdown component.
+   */
+  className: s.string,
+  /**
+   * Placeholder text for the dropdown button.
+   */
+  placeholder: s.string,
+  /**
+   * Array of selected Y labels with their corresponding colors.
+   */
+  selectedYLabels: s.arrayOf(s.shape({
+    label: s.string,
+    color: s.string
+  })),
+  /**
+   * Function to set the selected Y labels.
+   */
+  setSelectedYLabels: s.func,
+  /**
+   * Array of all Y labels with their corresponding colors.
+   */
+  allYLabels: s.arrayOf(s.shape({
+    label: s.string,
+    color: s.string
+  }))
+};
+i.defaultProps = {
+  placeholder: "Select Item"
+};
+export {
+  i as default
+};

package/dist/ui/a/Charts/Common/YLabelsDropDown/index.js

@@ -0,0 +1,4 @@
+import { default as e } from "./YlabelsDropDown.js";
+export {
+  e as YLabelsDropDown
+};

package/dist/ui/a/Charts/Common/index.js

@@ -0,0 +1,8 @@
+import { default as e } from "./CustomLegend/CustomLegend.js";
+import { default as r } from "./CustomTooltipContent/CustomTooltipContent.js";
+import { default as s } from "./YLabelsDropDown/YlabelsDropDown.js";
+export {
+  e as CustomLegend,
+  r as CustomTooltipContent,
+  s as YLabelsDropDown
+};