@m4l/widgets 0.0.1 → 0.0.2-beta-add-widgets-piechart.0

package/charts/Pie/Pie.d.ts

@@ -0,0 +1,10 @@
+import { PieProps } from './types';
+/**
+ * Componente Pie para el gráfico de pastel (Pie chart).
+ * @param values - Valores para el gráfico
+ * @param size - Tamaño del componente
+ * @returns Componente Pie
+ */
+export declare function Pie({ values, size }: PieProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default Pie;
+//# sourceMappingURL=Pie.d.ts.map

package/charts/Pie/Pie.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pie.d.ts","sourceRoot":"","sources":["../../../../../../packages/widgets/src/charts/Pie/Pie.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAUxC;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,QAAQ,oDAgC7C;AAED,eAAe,GAAG,CAAC"}

package/charts/Pie/Pie.js

@@ -0,0 +1,36 @@
+import { jsx as e, jsxs as r } from "@emotion/react/jsx-runtime";
+import s from "echarts-for-react";
+import { useRef as d } from "react";
+import { CustomLegend as l } from "./subcomponents/CustomLegend/CustomLegend.js";
+import { PieRootStyled as f, PieParentStyled as h, ChartContainerStyled as p, LegendContainerStyled as c } from "./slots/PieSlots.js";
+import { usePieChartData as u } from "./hooks/usePieChartData.js";
+import { useChartResize as C } from "./hooks/useChartResize.js";
+function z({ values: o, size: i }) {
+  const t = d(null), { data: n, options: a } = u(o), m = C(t);
+  return /* @__PURE__ */ e(f, { children: /* @__PURE__ */ r(h, { children: [
+    /* @__PURE__ */ e(p, { ref: m, children: /* @__PURE__ */ e(
+      s,
+      {
+        ref: t,
+        option: a,
+        style: { height: "100%", width: "100%" },
+        notMerge: !0,
+        lazyUpdate: !0
+      }
+    ) }),
+    /* @__PURE__ */ r(c, { children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          data: n,
+          size: i
+        }
+      ),
+      " "
+    ] })
+  ] }) });
+}
+export {
+  z as Pie,
+  z as default
+};

package/charts/Pie/Pie.styles.d.ts

@@ -0,0 +1,3 @@
+import { PieStyles } from './types';
+export declare const pieStyles: PieStyles;
+//# sourceMappingURL=Pie.styles.d.ts.map

package/charts/Pie/Pie.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pie.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/widgets/src/charts/Pie/Pie.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC,eAAO,MAAM,SAAS,EAAE,SAyMvB,CAAC"}

package/charts/Pie/Pie.styles.js

@@ -0,0 +1,195 @@
+import { getTypographyStyles as i } from "@m4l/components";
+const a = {
+  /**
+   * ***************************************************************
+   * Contenedor raíz: contexto de consulta de contenedores para el diseño responsivo.
+   * ***************************************************************
+   */
+  pieRoot: () => ({
+    containerName: "root",
+    containerType: "size",
+    width: "100%",
+    height: "100%"
+  }),
+  /**
+   * ******************************************************************
+   * Contenedor flex interno que envuelve el gráfico y la leyenda.
+   * ******************************************************************
+   */
+  pieParent: () => ({
+    display: "flex",
+    flexFlow: "row wrap",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%"
+  }),
+  /**
+   * *******************************************************************
+   * Caja izquierda: contenedor del gráfico. ReactECharts se renderiza dentro.
+   * *******************************************************************
+   */
+  chartContainer: () => ({
+    display: "flex",
+    flex: "1 1 160px",
+    height: "100%",
+    width: "100%",
+    maxWidth: "200px",
+    maxHeight: "200px",
+    alignSelf: "center",
+    justifyContent: "center",
+    "@container root (max-width: 359px)": {
+      height: "auto",
+      flex: "1 0 160px"
+    },
+    "@container root (max-width: 359px) and (max-height: 300px)": {
+      width: "100%",
+      height: "100%",
+      maxWidth: "100%"
+    },
+    "@container root (max-height: 65px)": {
+      width: "100%",
+      height: "100%",
+      maxWidth: "100%"
+    },
+    "@container root (max-width: 120px)": {
+      width: "100%",
+      height: "100%",
+      maxWidth: "100%"
+    }
+  }),
+  /**
+   * ********************************************************************
+   * Caja derecha: contenedor de la leyenda. CustomLegend se renderiza dentro.
+   * ********************************************************************
+   */
+  legendContainer: ({ theme: e }) => ({
+    display: "flex",
+    flex: "1 0 100px",
+    flexFlow: "column wrap",
+    width: "100%",
+    height: "100%",
+    maxHeight: "150px",
+    alignSelf: "center",
+    // overflow: 'auto',
+    justifyContent: "flex-start",
+    alignContent: "flex-start",
+    gap: e.vars.size.baseSpacings.sp6,
+    "@container root (min-width: 0px) and (max-width: 299px)": {
+      flexFlow: "column nowrap",
+      alignContent: "flex-start",
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
+      // overflow: 'auto',
+      maxHeight: "fit-content",
+      maxWidth: "100px"
+    },
+    "@container root (min-width: 300px) and (max-width: 344px)": {
+      justifyContent: "center",
+      flexFlow: "column nowrap",
+      alignContent: "flex-start",
+      alignItems: "flex-start",
+      // overflow: 'auto',
+      maxHeight: "fit-content",
+      maxWidth: "100px"
+    },
+    "@container root (max-width: 359px) and (max-height: 300px)": {
+      display: "none"
+    },
+    "@container root (max-height: 65px)": {
+      display: "none"
+    },
+    "@container root (max-width: 120px)": {
+      display: "none"
+    }
+  }),
+  /**
+   * ******************************************************************
+   * Elemento de la leyenda (Grid).
+   * ******************************************************************
+   */
+  legendItem: ({ theme: e }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: e.vars.size.baseSpacings.sp2,
+    border: "1px solid transparent",
+    transition: "all 0.3s",
+    boxSizing: "border-box"
+  }),
+  /**
+   * ******************************************************************
+   * Punto de color del elemento de la leyenda.
+   * ******************************************************************
+   */
+  legendItemColor: ({ theme: e, ownerState: t }) => ({
+    width: 11,
+    height: 11,
+    borderRadius: "30%",
+    backgroundColor: e.vars.palette.chips[t?.color]?.outlined.color,
+    flexShrink: 0
+  }),
+  /**
+   * ******************************************************************
+   * Contenedor de texto del elemento de la leyenda.
+   * ******************************************************************
+   */
+  legendItemTextContainer: ({ theme: e }) => ({
+    color: e.vars.palette.text.primary,
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column"
+  }),
+  /**
+   * ******************************************************************
+   * Contenedor de texto sub del elemento de la leyenda.
+   * ******************************************************************
+   */
+  legendItemTextSubContainer: ({ theme: e }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: e.vars.size.baseSpacings["sp2-5"],
+    justifyContent: "flex-start"
+  }),
+  /**
+   * ******************************************************************
+   * Nombre del elemento de la leyenda.
+   * ******************************************************************
+   */
+  legendItemName: ({ theme: e, ownerState: t }) => ({
+    ...i(e.generalSettings.isMobile, t?.size || "medium", "subtitleDens"),
+    fontFamily: "Jura",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  }),
+  /**
+   * ******************************************************************
+   * Badge de valor del elemento de la leyenda.
+   * ******************************************************************
+   */
+  legendItemValueBadge: ({ theme: e, ownerState: t }) => ({
+    ...i(e.generalSettings.isMobile, t?.size || "medium", "body"),
+    fontFamily: "Inter",
+    padding: `0 ${e.vars.size.baseSpacings.sp1}`,
+    borderRadius: e.vars.size.borderRadius.r1,
+    backgroundColor: e.vars.palette.chips[t?.color]?.contained.backgroundColor,
+    color: e.vars.palette.chips[t?.color]?.contained.color,
+    flexShrink: 0
+  }),
+  /**
+   * ******************************************************************
+   * Categoría del elemento de la leyenda.
+   * ******************************************************************
+   */
+  legendItemCategory: ({ theme: e, ownerState: t }) => ({
+    ...i(e.generalSettings.isMobile, t?.size || "medium", "body"),
+    fontFamily: "Inter",
+    color: e.vars.palette.text.secondary,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  })
+};
+export {
+  a as pieStyles
+};

package/charts/Pie/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const PIE_KEY_COMPONENT = "M4LPieChart";
+//# sourceMappingURL=constants.d.ts.map

package/charts/Pie/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/widgets/src/charts/Pie/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,gBAAgB,CAAC"}

package/charts/Pie/constants.js

@@ -0,0 +1,4 @@
+const t = "M4LPieChart";
+export {
+  t as PIE_KEY_COMPONENT
+};

package/charts/Pie/helpers/options.d.ts

@@ -0,0 +1,99 @@
+import { PieChartData } from '../types';
+import { Theme } from '@mui/material/styles';
+/**
+ * Builds ECharts option config for the pie chart from data and theme.
+ */
+export declare function generateOptions(data: PieChartData[], theme: Theme): {
+    baseOption: {
+        tooltip: {
+            show: boolean;
+        };
+        legend: {
+            show: boolean;
+        };
+        series: ({
+            type: string;
+            coordinateSystem: string;
+            /**
+             * Custom renderItem for ECharts pie series.
+             */
+            renderItem: (params: any, api: any) => {
+                type: string;
+                children: ({
+                    type: string;
+                    shape: {
+                        cx: number;
+                        cy: number;
+                        r: number;
+                        r0?: undefined;
+                    };
+                    style: {
+                        fill: string;
+                        stroke: string;
+                    };
+                    z: number;
+                } | {
+                    type: string;
+                    shape: {
+                        cx: number;
+                        cy: number;
+                        r0: number;
+                        r: number;
+                    };
+                    style: {
+                        fill: string;
+                        stroke?: undefined;
+                    };
+                    z: number;
+                })[];
+            };
+            data: number[];
+            radius?: undefined;
+            center?: undefined;
+            padAngle?: undefined;
+            label?: undefined;
+            labelLine?: undefined;
+            itemStyle?: undefined;
+            emphasis?: undefined;
+        } | {
+            type: string;
+            radius: string[];
+            center: string[];
+            padAngle: number;
+            data: PieChartData[];
+            label: {
+                show: boolean;
+                position: string;
+            };
+            labelLine: {
+                show: boolean;
+            };
+            itemStyle: {
+                borderRadius: string;
+            };
+            emphasis: {
+                label: {
+                    show: boolean;
+                    fontSize: number;
+                    fontFamily: string;
+                    fontWeight: number;
+                    color: string;
+                    formatter: string;
+                };
+            };
+            coordinateSystem?: undefined;
+            /**
+             * Custom renderItem for ECharts pie series.
+             */
+            renderItem?: undefined;
+        })[];
+    };
+};
+export declare const loadingOptions: {
+    text: string;
+    color: string;
+    textColor: string;
+    maskColor: string;
+    zlevel: number;
+};
+//# sourceMappingURL=options.d.ts.map

package/charts/Pie/helpers/options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../../../../../packages/widgets/src/charts/Pie/helpers/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,KAAK;;;;;;;;;;;YAmBxD;;eAEG;iCAC2B,GAAG,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAH3C;;eAEG;;;;EAuEZ;AAED,eAAO,MAAM,cAAc;;;;;;CAM1B,CAAC"}

package/charts/Pie/helpers/options.js

@@ -0,0 +1,90 @@
+function u(e, t) {
+  const n = o(t.vars.palette.background.base), i = o(t.vars.palette.border.disabled), c = o(t.vars.palette.background.default), p = o(t.vars.palette.text.primary);
+  return {
+    baseOption: {
+      tooltip: {
+        show: !1
+      },
+      legend: {
+        show: !1
+      },
+      series: [
+        {
+          type: "custom",
+          coordinateSystem: "none",
+          /**
+           * Custom renderItem for ECharts pie series.
+           */
+          renderItem: function(d, r) {
+            const a = r.getWidth() / 2, s = r.getHeight() / 2, l = Math.min(r.getWidth(), r.getHeight());
+            return {
+              type: "group",
+              children: [
+                {
+                  type: "circle",
+                  shape: {
+                    cx: a,
+                    cy: s,
+                    r: l * 0.36
+                  },
+                  style: {
+                    fill: n,
+                    stroke: i
+                  },
+                  z: -10
+                },
+                {
+                  type: "ring",
+                  shape: {
+                    cx: a,
+                    cy: s,
+                    r0: l * 0.19,
+                    r: l * 0.33
+                  },
+                  style: {
+                    fill: c
+                  },
+                  z: -5
+                }
+              ]
+            };
+          },
+          data: [0]
+        },
+        {
+          type: "pie",
+          radius: ["44%", "60%"],
+          center: ["50%", "50%"],
+          padAngle: 4,
+          data: e,
+          label: {
+            show: !1,
+            position: "center"
+          },
+          labelLine: {
+            show: !1
+          },
+          itemStyle: {
+            borderRadius: "6%"
+          },
+          emphasis: {
+            label: {
+              show: !0,
+              fontSize: 15,
+              fontFamily: "Jura",
+              fontWeight: 700,
+              color: p,
+              formatter: "{d}%"
+            }
+          }
+        }
+      ]
+    }
+  };
+}
+function o(e) {
+  return e = e.replace("var(", ""), e = e.replace(")", ""), getComputedStyle(document.documentElement).getPropertyValue(e).trim();
+}
+export {
+  u as generateOptions
+};

package/charts/Pie/helpers/remap.d.ts

@@ -0,0 +1,6 @@
+import { PieProps, PieChartData } from '../types';
+/**
+ * Maps Pie props values to ECharts pie chart data shape.
+ */
+export declare function remapData(values: PieProps['values']): PieChartData[];
+//# sourceMappingURL=remap.d.ts.map

package/charts/Pie/helpers/remap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remap.d.ts","sourceRoot":"","sources":["../../../../../../../packages/widgets/src/charts/Pie/helpers/remap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGvD;;GAEG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,GAAG,YAAY,EAAE,CAYpE"}

package/charts/Pie/helpers/remap.js

@@ -0,0 +1,18 @@
+import { BASE_TAG_OBJECT_COLORS_LIGHT as e } from "@m4l/styles";
+function n(r) {
+  return r.map((o) => ({
+    name: o.title,
+    value: o.r,
+    valueFormatted: o.v,
+    itemStyle: {
+      color: l(o.palletColor)
+    },
+    colorName: o.palletColor
+  }));
+}
+function l(r) {
+  return r.includes("#") ? r : e[r].contained.backgroundColorTone;
+}
+export {
+  n as remapData
+};

package/charts/Pie/hooks/useChartResize.d.ts

@@ -0,0 +1,8 @@
+import { default as ReactECharts } from 'echarts-for-react';
+/**
+ * Custom hook para redimensionar el gráfico cuando el tamaño del contenedor cambia
+ * @param chartRef - Referencia al elemento del gráfico
+ * @returns Referencia al elemento padre del gráfico
+ */
+export declare function useChartResize(chartRef: React.RefObject<ReactECharts | null>): (node: HTMLDivElement | null) => void;
+//# sourceMappingURL=useChartResize.d.ts.map

package/charts/Pie/hooks/useChartResize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartResize.d.ts","sourceRoot":"","sources":["../../../../../../../packages/widgets/src/charts/Pie/hooks/useChartResize.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,YAAY,MAAM,mBAAmB,CAAC;AAGlD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,yCAoB5E"}

package/charts/Pie/hooks/useChartResize.js

@@ -0,0 +1,17 @@
+import { useEffect as s } from "react";
+import { useStateRef as a, useSizeContainer as o } from "@m4l/components";
+function l(e) {
+  const [t, n] = a(null), r = o(t, {
+    throttleTime: 200,
+    excludePadding: !1,
+    leading: !0,
+    trailing: !0
+  });
+  return s(() => {
+    const i = e.current?.getEchartsInstance();
+    window.requestAnimationFrame(() => i?.resize());
+  }, [r, e]), n;
+}
+export {
+  l as useChartResize
+};

package/charts/Pie/hooks/usePieChartData.d.ts

@@ -0,0 +1,88 @@
+import { PieProps } from '../types';
+/**
+ * Returns remapped pie data and ECharts options for the given values and current theme.
+ */
+export declare function usePieChartData(values: PieProps['values']): {
+    data: import('..').PieChartData[];
+    options: {
+        baseOption: {
+            tooltip: {
+                show: boolean;
+            };
+            legend: {
+                show: boolean;
+            };
+            series: ({
+                type: string;
+                coordinateSystem: string;
+                renderItem: (params: any, api: any) => {
+                    type: string;
+                    children: ({
+                        type: string;
+                        shape: {
+                            cx: number;
+                            cy: number;
+                            r: number;
+                            r0?: undefined;
+                        };
+                        style: {
+                            fill: string;
+                            stroke: string;
+                        };
+                        z: number;
+                    } | {
+                        type: string;
+                        shape: {
+                            cx: number;
+                            cy: number;
+                            r0: number;
+                            r: number;
+                        };
+                        style: {
+                            fill: string;
+                            stroke?: undefined;
+                        };
+                        z: number;
+                    })[];
+                };
+                data: number[];
+                radius?: undefined;
+                center?: undefined;
+                padAngle?: undefined;
+                label?: undefined;
+                labelLine?: undefined;
+                itemStyle?: undefined;
+                emphasis?: undefined;
+            } | {
+                type: string;
+                radius: string[];
+                center: string[];
+                padAngle: number;
+                data: import('..').PieChartData[];
+                label: {
+                    show: boolean;
+                    position: string;
+                };
+                labelLine: {
+                    show: boolean;
+                };
+                itemStyle: {
+                    borderRadius: string;
+                };
+                emphasis: {
+                    label: {
+                        show: boolean;
+                        fontSize: number;
+                        fontFamily: string;
+                        fontWeight: number;
+                        color: string;
+                        formatter: string;
+                    };
+                };
+                coordinateSystem?: undefined;
+                renderItem?: undefined;
+            })[];
+        };
+    };
+};
+//# sourceMappingURL=usePieChartData.d.ts.map

package/charts/Pie/hooks/usePieChartData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePieChartData.d.ts","sourceRoot":"","sources":["../../../../../../../packages/widgets/src/charts/Pie/hooks/usePieChartData.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAIzC;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMzD"}

package/charts/Pie/hooks/usePieChartData.js

@@ -0,0 +1,11 @@
+import { useMemo as r } from "react";
+import { useTheme as n } from "@mui/material";
+import { generateOptions as a } from "../helpers/options.js";
+import { remapData as i } from "../helpers/remap.js";
+function u(o) {
+  const e = n(), t = r(() => i(o), [o]), m = r(() => a(t, e), [t, e]);
+  return { data: t, options: m };
+}
+export {
+  u as usePieChartData
+};

package/charts/Pie/index.d.ts

@@ -0,0 +1,3 @@
+export { Pie } from './Pie';
+export type { PieProps, PieValueItem, PieChartData, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/charts/Pie/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/widgets/src/charts/Pie/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EACV,QAAQ,EACR,YAAY,EACZ,YAAY,GACb,MAAM,SAAS,CAAC"}

package/charts/Pie/slots/PieEnum.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Nombres de los slots para el componente de gráfico circular (Pie chart).
+ * Deben coincidir con las claves en Pie.styles.ts.
+ */
+export declare enum PieSlots {
+    pieRoot = "pieRoot",
+    pieParent = "pieParent",
+    chartContainer = "chartContainer",
+    legendContainer = "legendContainer",
+    legendItem = "legendItem",
+    legendItemColor = "legendItemColor",
+    legendItemTextContainer = "legendItemTextContainer",
+    legendItemTextSubContainer = "legendItemTextSubContainer",
+    legendItemName = "legendItemName",
+    legendItemValueBadge = "legendItemValueBadge",
+    legendItemCategory = "legendItemCategory"
+}
+//# sourceMappingURL=PieEnum.d.ts.map

package/charts/Pie/slots/PieEnum.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieEnum.d.ts","sourceRoot":"","sources":["../../../../../../../packages/widgets/src/charts/Pie/slots/PieEnum.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,oBAAY,QAAQ;IAClB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,cAAc,mBAAkB;IAEhC,eAAe,oBAAoB;IACnC,UAAU,eAAe;IACzB,eAAe,oBAAoB;IACnC,uBAAuB,4BAA4B;IACnD,0BAA0B,+BAA+B;IACzD,cAAc,mBAAmB;IACjC,oBAAoB,yBAAyB;IAC7C,kBAAkB,uBAAuB;CAC1C"}

package/charts/Pie/slots/PieEnum.js

@@ -0,0 +1,4 @@
+var n = /* @__PURE__ */ ((e) => (e.pieRoot = "pieRoot", e.pieParent = "pieParent", e.chartContainer = "chartContainer", e.legendContainer = "legendContainer", e.legendItem = "legendItem", e.legendItemColor = "legendItemColor", e.legendItemTextContainer = "legendItemTextContainer", e.legendItemTextSubContainer = "legendItemTextSubContainer", e.legendItemName = "legendItemName", e.legendItemValueBadge = "legendItemValueBadge", e.legendItemCategory = "legendItemCategory", e))(n || {});
+export {
+  n as PieSlots
+};

package/charts/Pie/slots/PieSlots.d.ts

@@ -0,0 +1,28 @@
+export declare const PieRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').PieOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const PieParentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').PieOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ChartContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').PieOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const LegendContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').PieOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const LegendItemStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').PieOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const LegendItemColorStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').PieOwnerState> & Record<string, unknown>) | undefined;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LegendItemTextContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').PieOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const LegendItemTextSubContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').PieOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const LegendItemNameStyled: any;
+export declare const LegendItemValueBadgeStyled: any;
+export declare const LegendItemCategoryStyled: any;
+//# sourceMappingURL=PieSlots.d.ts.map

package/charts/Pie/slots/PieSlots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieSlots.d.ts","sourceRoot":"","sources":["../../../../../../../packages/widgets/src/charts/Pie/slots/PieSlots.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,aAAa;;6NAGL,CAAC;AAEtB,eAAO,MAAM,eAAe;;6NAGL,CAAC;AAExB,eAAO,MAAM,oBAAoB;;6NAGL,CAAC;AAE7B,eAAO,MAAM,qBAAqB;;6NAGL,CAAC;AAE9B,eAAO,MAAM,gBAAgB;;6NAGL,CAAC;AAEzB,eAAO,MAAM,qBAAqB;;yGAIL,CAAC;AAE9B,eAAO,MAAM,6BAA6B;;6NAGL,CAAC;AAEtC,eAAO,MAAM,gCAAgC;;6NAGL,CAAC;AAEzC,eAAO,MAAM,oBAAoB,EAAE,GAGP,CAAC;AAE7B,eAAO,MAAM,0BAA0B,EAAE,GAGP,CAAC;AAEnC,eAAO,MAAM,wBAAwB,EAAE,GAGP,CAAC"}

package/charts/Pie/slots/PieSlots.js

@@ -0,0 +1,53 @@
+import { styled as e } from "@mui/material/styles";
+import { Typography as d } from "@mui/material";
+import { pieStyles as t } from "../Pie.styles.js";
+import { PieSlots as n } from "./PieEnum.js";
+import { PIE_KEY_COMPONENT as o } from "../constants.js";
+const s = e("div", {
+  name: o,
+  slot: n.pieRoot
+})(t.pieRoot), I = e("div", {
+  name: o,
+  slot: n.pieParent
+})(t.pieParent), C = e("div", {
+  name: o,
+  slot: n.chartContainer
+})(t.chartContainer), y = e("div", {
+  name: o,
+  slot: n.legendContainer
+})(t.legendContainer), S = e("div", {
+  name: o,
+  slot: n.legendItem
+})(t.legendItem), p = e("div", {
+  name: o,
+  slot: n.legendItemColor,
+  shouldForwardProp: (l) => l !== "ownerState"
+})(t.legendItemColor), c = e("div", {
+  name: o,
+  slot: n.legendItemTextContainer
+})(t.legendItemTextContainer), P = e("div", {
+  name: o,
+  slot: n.legendItemTextSubContainer
+})(t.legendItemTextSubContainer), v = e(d, {
+  name: o,
+  slot: n.legendItemName
+})(t.legendItemName), L = e(d, {
+  name: o,
+  slot: n.legendItemValueBadge
+})(t.legendItemValueBadge), T = e(d, {
+  name: o,
+  slot: n.legendItemCategory
+})(t.legendItemCategory);
+export {
+  C as ChartContainerStyled,
+  y as LegendContainerStyled,
+  T as LegendItemCategoryStyled,
+  p as LegendItemColorStyled,
+  v as LegendItemNameStyled,
+  S as LegendItemStyled,
+  c as LegendItemTextContainerStyled,
+  P as LegendItemTextSubContainerStyled,
+  L as LegendItemValueBadgeStyled,
+  I as PieParentStyled,
+  s as PieRootStyled
+};

package/charts/Pie/subcomponents/CustomLegend/CustomLegend.d.ts

@@ -0,0 +1,12 @@
+import { CustomLegendProps } from './types';
+/**
+ * Componente CustomLegend para el gráfico de pastel (Pie chart). Muestra las etiquetas y valores de los segmentos.
+ * Los elementos se disponen en una fila cuando hay suficiente espacio y se envuelven a la siguiente línea (en una pila vertical) cuando no lo hay.
+ * @param data - Datos para el gráfico
+ * @param onLegendClick - Función para manejar el clic en la leyenda
+ * @param selectedLegendName - Nombre de la leyenda seleccionada
+ * @param size - Tamaño del componente
+ * @returns Componente CustomLegend
+ */
+export declare function CustomLegend({ data, size }: CustomLegendProps): import("@emotion/react/jsx-runtime").JSX.Element[];
+//# sourceMappingURL=CustomLegend.d.ts.map

package/charts/Pie/subcomponents/CustomLegend/CustomLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomLegend.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/widgets/src/charts/Pie/subcomponents/CustomLegend/CustomLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAYjD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,iBAAiB,sDAgC7D"}

package/charts/Pie/subcomponents/CustomLegend/CustomLegend.js

@@ -0,0 +1,30 @@
+import { jsxs as d, jsx as t } from "@emotion/react/jsx-runtime";
+import { LegendItemStyled as m, LegendItemColorStyled as a, LegendItemTextContainerStyled as c, LegendItemTextSubContainerStyled as g, LegendItemNameStyled as i, LegendItemValueBadgeStyled as S, LegendItemCategoryStyled as y } from "../../slots/PieSlots.js";
+function u({ data: r, size: l }) {
+  return r.map((e, o) => {
+    const n = {
+      color: e.colorName,
+      size: l
+    };
+    return /* @__PURE__ */ d(
+      m,
+      {
+        ownerState: n,
+        children: [
+          /* @__PURE__ */ t(a, { ownerState: n }),
+          /* @__PURE__ */ d(c, { children: [
+            /* @__PURE__ */ d(g, { children: [
+              /* @__PURE__ */ t(i, { children: e.name.split(":")[1] }),
+              /* @__PURE__ */ t(S, { ownerState: n, children: e.valueFormatted })
+            ] }),
+            /* @__PURE__ */ t(y, { children: e.name.split(":")[0] })
+          ] })
+        ]
+      },
+      o
+    );
+  });
+}
+export {
+  u as CustomLegend
+};

package/charts/Pie/subcomponents/CustomLegend/types.d.ts

@@ -0,0 +1,10 @@
+import { Sizes } from '@m4l/styles';
+import { PieChartData } from '../../types';
+/**
+ * Props para el subcomponente CustomLegend.
+ */
+export interface CustomLegendProps {
+    data: PieChartData[];
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+//# sourceMappingURL=types.d.ts.map

package/charts/Pie/subcomponents/CustomLegend/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/widgets/src/charts/Pie/subcomponents/CustomLegend/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CAC3C"}

package/charts/Pie/types.d.ts

@@ -0,0 +1,52 @@
+import { Sizes } from '@m4l/styles';
+import { PieSlots } from './slots/PieEnum';
+import { PIE_KEY_COMPONENT } from './constants';
+import { M4LOverridesStyleRules } from '@m4l/components';
+import { Theme } from '@mui/material/styles';
+/**
+ * Item para el gráfico de Pie (API shape).
+ */
+export interface PieValueItem {
+    /** Muestra el nombre de la categoría. */
+    title: string;
+    /** Muestra el valor formateado de la categoría. */
+    v: string;
+    /** Muestra el valor numérico de la categoría. */
+    r: number;
+    /** Muestra el color de la categoría. */
+    palletColor: string;
+}
+/**
+ * Props para el componente de gráfico de Pie.
+ */
+export interface PieProps {
+    /** Valores del gráfico (nombre, valor formateado, valor numérico, color). */
+    values: PieValueItem[];
+    /** Tamaño del componente. */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+/**
+ * Datos para el gráfico de Pie (nombre, valor, itemStyle).
+ */
+export interface PieChartData {
+    /** Muestra el nombre de la categoría. */
+    name: string;
+    /** Muestra el valor numérico de la categoría. */
+    value: number;
+    /** Muestra el valor formateado de la categoría. */
+    valueFormatted: string;
+    /** Muestra el color de la categoría. */
+    itemStyle: {
+        color: string;
+    };
+    /** Muestra el color de la categoría. */
+    colorName: string;
+}
+export type PieOwnerState = {
+    color?: PieChartData['colorName'];
+    size?: PieProps['size'];
+    selected?: boolean;
+};
+export type PieSlotsType = keyof typeof PieSlots;
+export type PieStyles = M4LOverridesStyleRules<PieSlotsType, typeof PIE_KEY_COMPONENT, Theme>;
+//# sourceMappingURL=types.d.ts.map

package/charts/Pie/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/widgets/src/charts/Pie/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,CAAC,EAAE,MAAM,CAAC;IACV,iDAAiD;IACjD,CAAC,EAAE,MAAM,CAAC;IACV,wCAAwC;IACxC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,6EAA6E;IAC7E,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CAC3C;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,cAAc,EAAE,MAAM,CAAC;IACvB,wCAAwC;IACxC,SAAS,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AACF,MAAM,MAAM,YAAY,GAAI,MAAM,OAAO,QAAQ,CAAC;AAClD,MAAM,MAAM,SAAS,GAAG,sBAAsB,CAAC,YAAY,EAAE,OAAO,iBAAiB,EAAE,KAAK,CAAC,CAAC"}

package/charts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Pie';
+//# sourceMappingURL=index.d.ts.map

package/charts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/widgets/src/charts/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC"}

package/index.d.ts

@@ -1,2 +1,2 @@
-export * from './lib/widgets';
+export * from './charts';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/widgets/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/widgets/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/index.js

@@ -1,4 +1,4 @@
-import { M4lWidgets as r } from "./lib/widgets.js";
+import { Pie as r } from "./charts/Pie/Pie.js";
 export {
-  r as M4lWidgets
+  r as Pie
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/widgets",
-  "version": "0.0.1",
+  "version": "0.0.2-beta-add-widgets-piechart.0",
   "publishConfig": {
     "access": "public"
   },
@@ -24,11 +24,16 @@
   "peerDependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
+    "@mui/material": "^5.0.0",
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.1"
+    "echarts-for-react": "^3.0.6",
+    "react": "^19.0.0",
+    "@mui/material": "5.16.7"
   }
 }

package/lib/widgets.d.ts

@@ -1,6 +0,0 @@
-/**
- * Widgets component
- */
-export declare function M4lWidgets(): import("@emotion/react/jsx-runtime").JSX.Element;
-export default M4lWidgets;
-//# sourceMappingURL=widgets.d.ts.map

package/lib/widgets.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"widgets.d.ts","sourceRoot":"","sources":["../../../../../packages/widgets/src/lib/widgets.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,wBAAgB,UAAU,qDAMzB;AAED,eAAe,UAAU,CAAC"}

package/lib/widgets.js

@@ -1,12 +0,0 @@
-import { jsx as t } from "@emotion/react/jsx-runtime";
-import e from "@emotion/styled";
-const o = e.div`
-  color: pink;
-`;
-function r() {
-  return /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t("h1", { children: "Welcome to M4lWidgets!" }) });
-}
-export {
-  r as M4lWidgets,
-  r as default
-};