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

package/charts/Pie/Pie.d.ts

@@ -1,9 +1,9 @@
 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
+ * Pie component for the pie chart.
+ * @param values - Values for the chart
+ * @param size - Component size
+ * @returns Pie component
  */
 export declare function Pie({ values, size }: PieProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Pie;

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

@@ -1 +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,SAgNvB,CAAC"}
+{"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,SAkNvB,CAAC"}

package/charts/Pie/Pie.styles.js

@@ -2,7 +2,7 @@ import { getTypographyStyles as i } from "@m4l/components";
 const a = {
   /**
    * ***************************************************************
-   * Contenedor raíz: contexto de consulta de contenedores para el diseño responsivo.
+   * Root container: container query context for responsive layout.
    * ***************************************************************
    */
   pieRoot: () => ({
@@ -13,7 +13,7 @@ const a = {
   }),
   /**
    * ******************************************************************
-   * Contenedor flex interno que envuelve el gráfico y la leyenda.
+   * Inner flex container wrapping the chart and the legend.
    * ******************************************************************
    */
   pieParent: () => ({
@@ -25,7 +25,7 @@ const a = {
   }),
   /**
    * *******************************************************************
-   * Caja izquierda: contenedor del gráfico. ReactECharts se renderiza dentro.
+   * Left box: chart container. ReactECharts is rendered inside.
    * *******************************************************************
    */
   chartContainer: () => ({
@@ -62,9 +62,10 @@ const a = {
   }),
   /**
    * ********************************************************************
-   * Caja derecha: contenedor de la leyenda. CustomLegend se renderiza dentro.
+   * Right box: legend container. CustomLegend is rendered inside.
    * ********************************************************************
    */
+  /** Returns style object for the legend grid based on theme and ownerState. */
   legendContainer: ({ theme: e, ownerState: t }) => ({
     display: "grid",
     gridAutoFlow: "row",
@@ -98,7 +99,7 @@ const a = {
   }),
   /**
    * ******************************************************************
-   * Elemento de la leyenda (Grid).
+   * Legend item (Grid).
    * ******************************************************************
    */
   legendItem: ({ theme: e }) => ({
@@ -112,7 +113,7 @@ const a = {
   }),
   /**
    * ******************************************************************
-   * Punto de color del elemento de la leyenda.
+   * Color dot of the legend item.
    * ******************************************************************
    */
   legendItemColor: ({ theme: e, ownerState: t }) => ({
@@ -124,7 +125,7 @@ const a = {
   }),
   /**
    * ******************************************************************
-   * Contenedor de texto del elemento de la leyenda.
+   * Text container of the legend item.
    * ******************************************************************
    */
   legendItemTextContainer: ({ theme: e }) => ({
@@ -136,7 +137,7 @@ const a = {
   }),
   /**
    * ******************************************************************
-   * Contenedor de texto sub del elemento de la leyenda.
+   * Sub text container of the legend item.
    * ******************************************************************
    */
   legendItemTextSubContainer: ({ theme: e }) => ({
@@ -147,7 +148,7 @@ const a = {
   }),
   /**
    * ******************************************************************
-   * Nombre del elemento de la leyenda.
+   * Name of the legend item.
    * ******************************************************************
    */
   legendItemName: ({ theme: e, ownerState: t }) => ({
@@ -159,7 +160,7 @@ const a = {
   }),
   /**
    * ******************************************************************
-   * Badge de valor del elemento de la leyenda.
+   * Value badge of the legend item.
    * ******************************************************************
    */
   legendItemValueBadge: ({ theme: e, ownerState: t }) => ({
@@ -176,7 +177,7 @@ const a = {
   }),
   /**
    * ******************************************************************
-   * Categoría del elemento de la leyenda.
+   * Category of the legend item.
    * ******************************************************************
    */
   legendItemCategory: ({ theme: e, ownerState: t }) => ({

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

@@ -1,7 +1,7 @@
 import { PieChartData } from '../types';
 import { Theme } from '@mui/material/styles';
 /**
- * Construye la configuración de opciones de ECharts para el gráfico de pastel desde los datos y el tema.
+ * Builds the ECharts options configuration for the pie chart from data and theme.
  */
 export declare function generateOptions(data: PieChartData[], theme: Theme): {
     baseOption: {

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

@@ -1,8 +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
+ * Custom hook to resize the chart when the container size changes.
+ * @param chartRef - Reference to the chart element
+ * @returns Reference setter for the chart parent element
  */
 export declare function useChartResize(chartRef: React.RefObject<ReactECharts | null>): (node: HTMLDivElement | null) => void;
 //# sourceMappingURL=useChartResize.d.ts.map

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

@@ -1,6 +1,6 @@
 import { PieProps } from '../types';
 /**
- * Retorna los datos remapeados del gráfico de pastel y las opciones de ECharts para los valores dados y el tema actual.
+ * Returns the remapped pie chart data and ECharts options for the given values and current theme.
  */
 export declare function usePieChartData(values: PieProps['values']): {
     data: import('..').PieChartData[];

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

@@ -1,6 +1,6 @@
 /**
- * Nombres de los slots para el componente de gráfico circular (Pie chart).
- * Deben coincidir con las claves en Pie.styles.ts.
+ * Slot names for the pie chart component.
+ * Must match the keys in Pie.styles.ts.
  */
 export declare enum PieSlots {
     pieRoot = "pieRoot",

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

@@ -1,12 +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
+ * CustomLegend component for the pie chart. Displays segment labels and values.
+ * Items are laid out in a row when there is enough space and wrap to the next line (vertical stack) when not.
+ * @param data - Data for the chart
+ * @param onLegendClick - Handler for legend click
+ * @param selectedLegendName - Name of the selected legend
+ * @param size - Component size
+ * @returns CustomLegend component
  */
 export declare function CustomLegend({ data, size }: CustomLegendProps): import("@emotion/react/jsx-runtime").JSX.Element[];
 //# sourceMappingURL=CustomLegend.d.ts.map

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

@@ -1,7 +1,7 @@
 import { Sizes } from '@m4l/styles';
 import { PieChartData } from '../../types';
 /**
- * Props para el subcomponente CustomLegend.
+ * Props for the CustomLegend subcomponent.
  */
 export interface CustomLegendProps {
     data: PieChartData[];

package/charts/Pie/types.d.ts

@@ -4,44 +4,44 @@ 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).
+ * Item for the Pie chart (API shape).
  */
 export interface PieValueItem {
-    /** Muestra el nombre de la categoría. */
+    /** Displays the category name. */
     title: string;
-    /** Muestra el valor formateado de la categoría. */
+    /** Displays the formatted value of the category. */
     v: string;
-    /** Muestra el valor numérico de la categoría. */
+    /** Displays the numeric value of the category. */
     r: number;
-    /** Muestra el color de la categoría. */
+    /** Displays the category color. */
     palletColor: string;
 }
 /**
- * Props para el componente de gráfico de Pie.
+ * Props for the Pie chart component.
  */
 export interface PieProps {
-    /** Valores del gráfico (nombre, valor formateado, valor numérico, color). */
+    /** Chart values (name, formatted value, numeric value, color). */
     values: PieValueItem[];
-    /** Tamaño del componente. */
+    /** Component size. */
     size?: Extract<Sizes, 'small' | 'medium'>;
 }
 /**
- * Datos para el gráfico de Pie (nombre, valor, itemStyle).
+ * Data for the Pie chart (name, value, itemStyle).
  */
 export interface PieChartData {
-    /** Muestra el nombre de la categoría. */
+    /** Displays the category name. */
     name: string;
-    /** Muestra el valor numérico de la categoría. */
+    /** Displays the numeric value of the category. */
     value: number;
-    /** Muestra el valor formateado de la categoría. */
+    /** Displays the formatted value of the category. */
     valueFormatted: string;
-    /** Muestra el color de la categoría. */
+    /** Displays the category color. */
     itemStyle: {
         color: string;
     };
-    /** Muestra el color de la categoría. */
+    /** Displays the category color. */
     colorName: string;
-    /** Muestra el largo de los datos. */
+    /** Displays the data length. */
     lenght: number;
 }
 export type PieOwnerState = {

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

@@ -1 +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;IAClB,qCAAqC;IACrC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,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"}
+{"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,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,CAAC,EAAE,MAAM,CAAC;IACV,kDAAkD;IAClD,CAAC,EAAE,MAAM,CAAC;IACV,mCAAmC;IACnC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,kEAAkE;IAClE,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CAC3C;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,cAAc,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,SAAS,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,mCAAmC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/widgets",
-  "version": "0.0.2-beta-add-widget-piechart.0",
+  "version": "0.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -24,9 +24,6 @@
   "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"
   },