@ifto/mantine-kit 0.3.0 → 0.5.1

package/README.md

@@ -49,7 +49,7 @@ Install the optional ones only if you use the components that need them:
 | `@mantine/form` | the form templates (`FormPage`, `CreateFormPage`, `EditFormPage`) and `DataForm`, which take a `useForm` form |
 | `@mantine/modals` | the confirmations of `Table` (delete), `ListPage` and `DataForm` |
 | `@mantine/dates` and `dayjs` (its peer dependency) | `DateField` |
-| `mantine-datatable` | `Table`, `ViewTable`, `ListPage` |
+| `mantine-datatable` | `Table`, `ViewTable`, `DataTableView` |
 | `echarts` | `EChart` and the chart types |
 | `exceljs` | Excel export |
 | `axios` | `AxiosHttpClient` |
@@ -117,11 +117,13 @@ module.exports = {
 
 ### CRUD list page
 
-`ListPage` shows the records in a sortable, paginated table with view, edit and delete actions. Its `service` is any
-object with `findAll` and `delete`:
+`ListPage` lays out the header with the "Add" button, optional filters and a table. The `Table` shows the records with
+view, edit and delete actions. Its `service` is any object with `delete`, and its `data` comes from a pagination hook:
 
 ```tsx
 import ListPage from '@ifto/mantine-kit/component/template/ListPage/ListPage';
+import Table from '@ifto/mantine-kit/component/organism/Table/Table';
+import { useClientPagination } from '@ifto/mantine-kit/component/organism/Table/useClientPagination';
 import type { ListDataSource } from '@ifto/mantine-kit/data/ListDataSource';
 
 type Region = { id?: number; name: string };
@@ -132,20 +134,88 @@ const regions: ListDataSource<Region> = {
 };
 
 export function RegionsPage() {
+    // The object must be stable (here, a module constant), since a new one fetches again.
+    const data = useClientPagination(regions);
+
     return (
         <ListPage
             title="Regions"
             titlePlural="Regions"
             breadcrumbItems={[{ title: 'Regions', href: '/region' }]}
             addActionRoute="/region/create"
-            service={regions}
-            resourceBasePath="/region"
-            tableColumns={[{ accessor: 'name', title: 'Name', sortable: true }]}
-        />
+        >
+            <Table
+                data={data}
+                service={regions}
+                basePath="/region"
+                columns={[{ accessor: 'name', title: 'Name', sortable: true }]}
+            />
+        </ListPage>
+    );
+}
+```
+
+#### Client-side or server-side pagination
+
+The hook that creates the `data` of the `Table` defines where the records are sorted and paginated:
+
+| | `useClientPagination(source, { pagination })` | `useServerPagination(source, { firstPage })` |
+|---|---|---|
+| **Fetch** | all records at once | one page, with page, size and sort |
+| **Sorted and paginated by** | browser (sorting follows the locale) | backend |
+| **Total of records** | number of fetched records | `totalRecords` of the response |
+
+Both take a `source`, which is either:
+
+- an object with the method that fetches the records: `findAll()` (a `ListDataSource`) or `findPage(request)` (a
+  `PageDataSource`), such as a service. The hook calls the method on the object, so it keeps its `this`;
+- or a function that fetches them, for fetches with a filter (e.g. `useCallback(request => service.findPageByYear(year,
+  request), [year])`).
+
+The source must be stable (e.g. a module constant, or a function created with `useCallback`), since a new one fetches
+again: a `new Service()` inside the component would fetch on every render.
+
+`findPage` (or the function) receives the page, the size and the sort, and returns the records of that page and the total of records. The
+contract knows nothing about your backend, so convert it to the format of your API (here, Spring Data, returning a
+`PagedModel`, which puts the total of records in `page.totalElements`). The page starts at 1, or at the `firstPage`
+option (e.g. 0 for Spring), which only changes the requests: the table always shows the pages starting at 1.
+
+```tsx
+import { useCallback } from 'react';
+import { useServerPagination } from '@ifto/mantine-kit/component/organism/Table/useServerPagination';
+import type { FetchPage } from '@ifto/mantine-kit/data/PageRequest';
+
+export function RegionsTable({ name }: { name: string }) {
+    // A new function means the filter changed, which goes back to page 1.
+    const fetchPage: FetchPage<Region> = useCallback(
+        async ({ page, size, sort }) => {
+            const params = new URLSearchParams({
+                name,
+                page: String(page),
+                size: String(size),
+                sort: `${String(sort.columnAccessor)},${sort.direction}`
+            });
+            const response = await fetch(`/api/region?${params}`).then(result => result.json());
+
+            return { records: response.content, totalRecords: response.page.totalElements };
+        },
+        [name]
     );
+    const data = useServerPagination(fetchPage, { firstPage: 0 });
+
+    return <Table data={data} service={regions} basePath="/region" columns={columns} />;
 }
 ```
 
+With `useServerPagination`:
+
+- `sort.columnAccessor` holds the `sortKey` of the column, if it has one, or else its `accessor`. A calculated column
+  needs a `sortKey` or `sortable: false`.
+- The table goes back to page 1 when the page size, the sort or the filter changes, and to the last existing page when
+  the current one no longer exists (e.g. its last record was deleted).
+- The order of null values and the text collation are defined by the backend, so they can differ from client-side
+  pagination, which follows the locale and always puts null values last.
+
 ### CRUD form page
 
 `FormPage` creates, edits or views a record and saves it with any object that has a `save(id, data)` method:
@@ -226,6 +296,10 @@ The chart types in `component/organism/EChart/chart` (`LINE_CHART`, `BAR_CHART`,
 build a complete option, with one panel per unit, from generic series:
 `option={LINE_CHART.buildOption(data, { title: 'Revenue', locale: 'en-US' })}`.
 
+Each of these types has an `icon`, to show in a chart type selector (e.g. `IconChartBar` for `BAR_CHART`). To use another
+one, create the type with it: `new BarChart(IconChartHistogram)`. The `icon` is optional in the `ChartType` contract, so
+a custom chart type does not need one.
+
 ### Export to Excel or CSV
 
 ```tsx
@@ -391,9 +465,10 @@ Every file is imported by its path inside `src`, without the extension, e.g.
 | `Navbar` | Side menu with links and collapsible groups, highlighting the current page. |
 | `PageHeader` | Page title with the breadcrumb and, in list pages, the "Add" button. |
 | `StatsGrid` | Responsive grid of `StatsCard`s, with placeholders while loading. |
-| `Table` | Table of the records of a data source, with view, edit and delete (with confirmation) actions. |
+| `Table` | Table of records with view, edit and delete (with confirmation) actions, paginated by `useClientPagination` or `useServerPagination`. |
 | `RowActions` | View, edit and delete buttons of a `Table` row. |
-| `ViewTable` | Sortable and paginated table (on top of mantine-datatable), with locale-aware sorting. |
+| `ViewTable` | Table that sorts (locale-aware) and paginates the given records in the browser (on top of mantine-datatable). |
+| `DataTableView` | Table that shows records as received, with the pagination and sort given by the caller. |
 
 The `EChart/chart` folder has chart types that build the ECharts option from generic series: `LineChart`, `BarChart`
 (negative values highlighted), `StackedBarChart` and `DonutChart`, with one panel per unit of measure.
@@ -403,7 +478,7 @@ The `EChart/chart` folder has chart types that build the ECharts option from gen
 | Component | What it does |
 |---|---|
 | `Layout` | App shell: header with the brand, color scheme toggle and user menu, collapsible side menu and content area. |
-| `ListPage` | List page of records: header with the "Add" button, optional filters and the `Table`. |
+| `ListPage` | List page of records: header with the "Add" button, optional filters and the table given as children. |
 | `FormPage` | Create, edit or view form page that saves the record in a `SaveDataSource`. |
 | `CreateFormPage` | Form page to create a record with a given function. |
 | `EditFormPage` | Form page to update a record with a given function. |

package/dist/component/organism/EChart/chart/BarChart.d.ts

@@ -1,3 +1,4 @@
+import { type Icon } from '@tabler/icons-react';
 import { ChartSeries } from './ChartSeries';
 import { ChartTypeId } from './ChartTypeId';
 import { CartesianChart, CartesianSeries, DataPoint } from './CartesianChart';
@@ -11,6 +12,8 @@ export declare const NEGATIVE_VALUE_COLOR = "#d9480f";
  */
 export declare class BarChart extends CartesianChart {
     readonly id: ChartTypeId;
+    /** @param icon icon that replaces the default one */
+    constructor(icon?: Icon);
     protected seriesStyle(): CartesianSeries;
     protected seriesData(serie: ChartSeries): DataPoint[];
 }

package/dist/component/organism/EChart/chart/BarChart.js

@@ -1,5 +1,6 @@
 "use client";
 import { CartesianChart } from "./CartesianChart.js";
+import { IconChartBar } from "@tabler/icons-react";
 // src/component/organism/EChart/chart/BarChart.ts
 /** Color of the columns with a negative value (e.g. a deficit), to set them apart from the positive ones. */
 var NEGATIVE_VALUE_COLOR = "#d9480f";
@@ -11,6 +12,10 @@ var NEGATIVE_VALUE_COLOR = "#d9480f";
 */
 var BarChart = class extends CartesianChart {
 	id = "bar";
+	/** @param icon icon that replaces the default one */
+	constructor(icon = IconChartBar) {
+		super(icon);
+	}
 	seriesStyle() {
 		return { type: "bar" };
 	}

package/dist/component/organism/EChart/chart/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","names":[],"sources":["../../../../../src/component/organism/EChart/chart/BarChart.ts"],"sourcesContent":["import { ChartSeries } from './ChartSeries';\nimport { ChartTypeId } from './ChartTypeId';\nimport { CartesianChart, CartesianSeries, DataPoint } from './CartesianChart';\n\n/** Color of the columns with a negative value (e.g. a deficit), to set them apart from the positive ones. */\nexport const NEGATIVE_VALUE_COLOR = '#d9480f';\n\n/**\n * Grouped column chart: compares the series category by category.\n * Suited to flows (e.g. yearly values) and to balances that may be negative (deficit/surplus): the negative columns\n * get the {@link NEGATIVE_VALUE_COLOR}, without changing the color of the series in the legend.\n * @author Manoel Campos\n */\nexport class BarChart extends CartesianChart {\n    readonly id: ChartTypeId = 'bar';\n\n    protected seriesStyle(): CartesianSeries {\n        return { type: 'bar' };\n    }\n\n    protected seriesData(serie: ChartSeries): DataPoint[] {\n        return highlightNegativeValues(serie.values);\n    }\n}\n\n/**\n * Gives the {@link NEGATIVE_VALUE_COLOR} only to the negative values. The others keep the color of the series.\n * @param values values of a series\n * @return the values in the `series[i].data` format, with their own style in the negative ones\n */\nexport function highlightNegativeValues(values: (number | null)[]): DataPoint[] {\n    return values.map(value =>\n        value !== null && value < 0 ? { value, itemStyle: { color: NEGATIVE_VALUE_COLOR } } : value\n    );\n}\n"],"mappings":";;;;AAKA,IAAa,uBAAuB;;;;;;;AAQpC,IAAa,WAAb,cAA8B,eAAe;CACzC,KAA2B;CAE3B,cAAyC;EACrC,OAAO,EAAE,MAAM,MAAM;CACzB;CAEA,WAAqB,OAAiC;EAClD,OAAO,wBAAwB,MAAM,MAAM;CAC/C;AACJ;;;;;;AAOA,SAAgB,wBAAwB,QAAwC;CAC5E,OAAO,OAAO,KAAI,UACd,UAAU,QAAQ,QAAQ,IAAI;EAAE;EAAO,WAAW,EAAE,OAAO,qBAAqB;CAAE,IAAI,KAC1F;AACJ"}
+{"version":3,"file":"BarChart.js","names":[],"sources":["../../../../../src/component/organism/EChart/chart/BarChart.ts"],"sourcesContent":["import { IconChartBar, type Icon } from '@tabler/icons-react';\n\nimport { ChartSeries } from './ChartSeries';\nimport { ChartTypeId } from './ChartTypeId';\nimport { CartesianChart, CartesianSeries, DataPoint } from './CartesianChart';\n\n/** Color of the columns with a negative value (e.g. a deficit), to set them apart from the positive ones. */\nexport const NEGATIVE_VALUE_COLOR = '#d9480f';\n\n/**\n * Grouped column chart: compares the series category by category.\n * Suited to flows (e.g. yearly values) and to balances that may be negative (deficit/surplus): the negative columns\n * get the {@link NEGATIVE_VALUE_COLOR}, without changing the color of the series in the legend.\n * @author Manoel Campos\n */\nexport class BarChart extends CartesianChart {\n    readonly id: ChartTypeId = 'bar';\n\n    /** @param icon icon that replaces the default one */\n    constructor(icon: Icon = IconChartBar) {\n        super(icon);\n    }\n\n    protected seriesStyle(): CartesianSeries {\n        return { type: 'bar' };\n    }\n\n    protected seriesData(serie: ChartSeries): DataPoint[] {\n        return highlightNegativeValues(serie.values);\n    }\n}\n\n/**\n * Gives the {@link NEGATIVE_VALUE_COLOR} only to the negative values. The others keep the color of the series.\n * @param values values of a series\n * @return the values in the `series[i].data` format, with their own style in the negative ones\n */\nexport function highlightNegativeValues(values: (number | null)[]): DataPoint[] {\n    return values.map(value =>\n        value !== null && value < 0 ? { value, itemStyle: { color: NEGATIVE_VALUE_COLOR } } : value\n    );\n}\n"],"mappings":";;;;;AAOA,IAAa,uBAAuB;;;;;;;AAQpC,IAAa,WAAb,cAA8B,eAAe;CACzC,KAA2B;;CAG3B,YAAY,OAAa,cAAc;EACnC,MAAM,IAAI;CACd;CAEA,cAAyC;EACrC,OAAO,EAAE,MAAM,MAAM;CACzB;CAEA,WAAqB,OAAiC;EAClD,OAAO,wBAAwB,MAAM,MAAM;CAC/C;AACJ;;;;;;AAOA,SAAgB,wBAAwB,QAAwC;CAC5E,OAAO,OAAO,KAAI,UACd,UAAU,QAAQ,QAAQ,IAAI;EAAE;EAAO,WAAW,EAAE,OAAO,qBAAqB;CAAE,IAAI,KAC1F;AACJ"}

package/dist/component/organism/EChart/chart/CartesianChart.d.ts

@@ -1,3 +1,4 @@
+import type { Icon } from '@tabler/icons-react';
 import type { BarSeriesOption, EChartsOption, LineSeriesOption } from 'echarts';
 import { ChartData, ChartSeries } from './ChartSeries';
 import { ChartContext, ChartType } from './ChartType';
@@ -17,8 +18,11 @@ export type DataPoint = number | null | {
  * @author Manoel Campos
  */
 export declare abstract class CartesianChart implements ChartType {
+    readonly icon?: Icon | undefined;
     abstract readonly id: ChartTypeId;
     readonly singleCategory = false;
+    /** @param icon icon of the type (see {@link ChartType#icon}) */
+    constructor(icon?: Icon | undefined);
     /** Types with axes work for any set of series, except the ones that restrict it (see the subclasses). */
     isAvailable(series: ChartSeries[]): boolean;
     buildOption(data: ChartData, context: ChartContext): EChartsOption;

package/dist/component/organism/EChart/chart/CartesianChart.js

@@ -9,7 +9,12 @@ import { buildChartHeader, legendExtraHeight, tooltipFormatter } from "./ChartHe
 * @author Manoel Campos
 */
 var CartesianChart = class {
+	icon;
 	singleCategory = false;
+	/** @param icon icon of the type (see {@link ChartType#icon}) */
+	constructor(icon) {
+		this.icon = icon;
+	}
 	/** Types with axes work for any set of series, except the ones that restrict it (see the subclasses). */
 	isAvailable(series) {
 		return series.length > 0;

package/dist/component/organism/EChart/chart/CartesianChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.js","names":[],"sources":["../../../../../src/component/organism/EChart/chart/CartesianChart.ts"],"sourcesContent":["import type { BarSeriesOption, EChartsOption, LineSeriesOption } from 'echarts';\n\nimport { ChartData, ChartSeries } from './ChartSeries';\nimport { ChartContext, ChartType } from './ChartType';\nimport { ChartTypeId } from './ChartTypeId';\nimport { chartLocale, chartMessages } from './ChartTexts';\nimport { buildPanelAxes, groupByUnit, panelsHeight } from './UnitPanels';\nimport { buildChartHeader, legendExtraHeight, tooltipFormatter } from './ChartHeader';\n\n/** Column or line series, the two formats used in the charts with axes (cartesian). */\nexport type CartesianSeries = BarSeriesOption | LineSeriesOption;\n\n/** Value of a category in a series, in the format accepted by `series[i].data` (with or without its own style). */\nexport type DataPoint = number | null | { value: number; itemStyle: { color: string } };\n\n/**\n * Base of the chart types with an X axis of categories (line, columns, stacked columns).\n * It builds the panels per unit, the header and the tooltip, leaving to each type just the style of each series.\n * @author Manoel Campos\n */\nexport abstract class CartesianChart implements ChartType {\n    abstract readonly id: ChartTypeId;\n    readonly singleCategory = false;\n\n    /** Types with axes work for any set of series, except the ones that restrict it (see the subclasses). */\n    isAvailable(series: ChartSeries[]): boolean {\n        return series.length > 0;\n    }\n\n    buildOption(data: ChartData, context: ChartContext): EChartsOption {\n        const panels = groupByUnit(data.series);\n        const series = panels.flatMap((panel, index) =>\n            panel.series.map(serie => this.buildSeries(serie, data.series, index))\n        );\n        const names = data.series.map(serie => serie.name);\n        const extraTop = legendExtraHeight(names, context.width);\n\n        return {\n            ...buildChartHeader(context.title, names, chartMessages(context)),\n            tooltip: { trigger: 'axis' },\n            ...buildPanelAxes(panels, data.categories, extraTop, chartLocale(context)),\n            series\n        };\n    }\n\n    height(data: ChartData, context: ChartContext): number {\n        const extraTop = legendExtraHeight(\n            data.series.map(serie => serie.name),\n            context.width\n        );\n        return panelsHeight(groupByUnit(data.series).length, data.categories.length, extraTop);\n    }\n\n    /**\n     * Defines how a series is drawn (type, stacking etc.).\n     * @param serie series to draw\n     * @param all all series of the chart, for types that depend on the whole set (e.g. stacking)\n     * @return the style of the series in the ECharts format, without name, data and axes (filled by the base)\n     */\n    protected abstract seriesStyle(serie: ChartSeries, all: ChartSeries[]): CartesianSeries;\n\n    /**\n     * Values of the series in the `series[i].data` format. By default, the values themselves; subclasses may give\n     * their own style to some values (e.g. negative values).\n     * @param serie series of the chart\n     * @return one value per category\n     */\n    protected seriesData(serie: ChartSeries): DataPoint[] {\n        return serie.values;\n    }\n\n    /**\n     * Creates the complete ECharts series: style of the type, name, values, axes of the panel and tooltip format.\n     * @param serie series of the chart\n     * @param all all series of the chart\n     * @param panelIndex index of the panel (and of the axes) of the unit of the series\n     * @return the series in the ECharts format\n     */\n    private buildSeries(serie: ChartSeries, all: ChartSeries[], panelIndex: number): CartesianSeries {\n        return {\n            ...this.seriesStyle(serie, all),\n            id: serie.id,\n            name: serie.name,\n            data: this.seriesData(serie),\n            xAxisIndex: panelIndex,\n            yAxisIndex: panelIndex,\n            tooltip: { valueFormatter: tooltipFormatter(serie.unit) }\n        } as CartesianSeries;\n    }\n}\n"],"mappings":";;;;;;;;;;AAoBA,IAAsB,iBAAtB,MAA0D;CAEtD,iBAA0B;;CAG1B,YAAY,QAAgC;EACxC,OAAO,OAAO,SAAS;CAC3B;CAEA,YAAY,MAAiB,SAAsC;EAC/D,MAAM,SAAS,YAAY,KAAK,MAAM;EACtC,MAAM,SAAS,OAAO,SAAS,OAAO,UAClC,MAAM,OAAO,KAAI,UAAS,KAAK,YAAY,OAAO,KAAK,QAAQ,KAAK,CAAC,CACzE;EACA,MAAM,QAAQ,KAAK,OAAO,KAAI,UAAS,MAAM,IAAI;EACjD,MAAM,WAAW,kBAAkB,OAAO,QAAQ,KAAK;EAEvD,OAAO;GACH,GAAG,iBAAiB,QAAQ,OAAO,OAAO,cAAc,OAAO,CAAC;GAChE,SAAS,EAAE,SAAS,OAAO;GAC3B,GAAG,eAAe,QAAQ,KAAK,YAAY,UAAU,YAAY,OAAO,CAAC;GACzE;EACJ;CACJ;CAEA,OAAO,MAAiB,SAA+B;EACnD,MAAM,WAAW,kBACb,KAAK,OAAO,KAAI,UAAS,MAAM,IAAI,GACnC,QAAQ,KACZ;EACA,OAAO,aAAa,YAAY,KAAK,MAAM,CAAC,CAAC,QAAQ,KAAK,WAAW,QAAQ,QAAQ;CACzF;;;;;;;CAgBA,WAAqB,OAAiC;EAClD,OAAO,MAAM;CACjB;;;;;;;;CASA,YAAoB,OAAoB,KAAoB,YAAqC;EAC7F,OAAO;GACH,GAAG,KAAK,YAAY,OAAO,GAAG;GAC9B,IAAI,MAAM;GACV,MAAM,MAAM;GACZ,MAAM,KAAK,WAAW,KAAK;GAC3B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,gBAAgB,iBAAiB,MAAM,IAAI,EAAE;EAC5D;CACJ;AACJ"}
+{"version":3,"file":"CartesianChart.js","names":[],"sources":["../../../../../src/component/organism/EChart/chart/CartesianChart.ts"],"sourcesContent":["import type { Icon } from '@tabler/icons-react';\nimport type { BarSeriesOption, EChartsOption, LineSeriesOption } from 'echarts';\n\nimport { ChartData, ChartSeries } from './ChartSeries';\nimport { ChartContext, ChartType } from './ChartType';\nimport { ChartTypeId } from './ChartTypeId';\nimport { chartLocale, chartMessages } from './ChartTexts';\nimport { buildPanelAxes, groupByUnit, panelsHeight } from './UnitPanels';\nimport { buildChartHeader, legendExtraHeight, tooltipFormatter } from './ChartHeader';\n\n/** Column or line series, the two formats used in the charts with axes (cartesian). */\nexport type CartesianSeries = BarSeriesOption | LineSeriesOption;\n\n/** Value of a category in a series, in the format accepted by `series[i].data` (with or without its own style). */\nexport type DataPoint = number | null | { value: number; itemStyle: { color: string } };\n\n/**\n * Base of the chart types with an X axis of categories (line, columns, stacked columns).\n * It builds the panels per unit, the header and the tooltip, leaving to each type just the style of each series.\n * @author Manoel Campos\n */\nexport abstract class CartesianChart implements ChartType {\n    abstract readonly id: ChartTypeId;\n    readonly singleCategory = false;\n\n    /** @param icon icon of the type (see {@link ChartType#icon}) */\n    constructor(readonly icon?: Icon) {}\n\n    /** Types with axes work for any set of series, except the ones that restrict it (see the subclasses). */\n    isAvailable(series: ChartSeries[]): boolean {\n        return series.length > 0;\n    }\n\n    buildOption(data: ChartData, context: ChartContext): EChartsOption {\n        const panels = groupByUnit(data.series);\n        const series = panels.flatMap((panel, index) =>\n            panel.series.map(serie => this.buildSeries(serie, data.series, index))\n        );\n        const names = data.series.map(serie => serie.name);\n        const extraTop = legendExtraHeight(names, context.width);\n\n        return {\n            ...buildChartHeader(context.title, names, chartMessages(context)),\n            tooltip: { trigger: 'axis' },\n            ...buildPanelAxes(panels, data.categories, extraTop, chartLocale(context)),\n            series\n        };\n    }\n\n    height(data: ChartData, context: ChartContext): number {\n        const extraTop = legendExtraHeight(\n            data.series.map(serie => serie.name),\n            context.width\n        );\n        return panelsHeight(groupByUnit(data.series).length, data.categories.length, extraTop);\n    }\n\n    /**\n     * Defines how a series is drawn (type, stacking etc.).\n     * @param serie series to draw\n     * @param all all series of the chart, for types that depend on the whole set (e.g. stacking)\n     * @return the style of the series in the ECharts format, without name, data and axes (filled by the base)\n     */\n    protected abstract seriesStyle(serie: ChartSeries, all: ChartSeries[]): CartesianSeries;\n\n    /**\n     * Values of the series in the `series[i].data` format. By default, the values themselves; subclasses may give\n     * their own style to some values (e.g. negative values).\n     * @param serie series of the chart\n     * @return one value per category\n     */\n    protected seriesData(serie: ChartSeries): DataPoint[] {\n        return serie.values;\n    }\n\n    /**\n     * Creates the complete ECharts series: style of the type, name, values, axes of the panel and tooltip format.\n     * @param serie series of the chart\n     * @param all all series of the chart\n     * @param panelIndex index of the panel (and of the axes) of the unit of the series\n     * @return the series in the ECharts format\n     */\n    private buildSeries(serie: ChartSeries, all: ChartSeries[], panelIndex: number): CartesianSeries {\n        return {\n            ...this.seriesStyle(serie, all),\n            id: serie.id,\n            name: serie.name,\n            data: this.seriesData(serie),\n            xAxisIndex: panelIndex,\n            yAxisIndex: panelIndex,\n            tooltip: { valueFormatter: tooltipFormatter(serie.unit) }\n        } as CartesianSeries;\n    }\n}\n"],"mappings":";;;;;;;;;;AAqBA,IAAsB,iBAAtB,MAA0D;CAKjC;CAHrB,iBAA0B;;CAG1B,YAAY,MAAsB;EAAb,KAAA,OAAA;CAAc;;CAGnC,YAAY,QAAgC;EACxC,OAAO,OAAO,SAAS;CAC3B;CAEA,YAAY,MAAiB,SAAsC;EAC/D,MAAM,SAAS,YAAY,KAAK,MAAM;EACtC,MAAM,SAAS,OAAO,SAAS,OAAO,UAClC,MAAM,OAAO,KAAI,UAAS,KAAK,YAAY,OAAO,KAAK,QAAQ,KAAK,CAAC,CACzE;EACA,MAAM,QAAQ,KAAK,OAAO,KAAI,UAAS,MAAM,IAAI;EACjD,MAAM,WAAW,kBAAkB,OAAO,QAAQ,KAAK;EAEvD,OAAO;GACH,GAAG,iBAAiB,QAAQ,OAAO,OAAO,cAAc,OAAO,CAAC;GAChE,SAAS,EAAE,SAAS,OAAO;GAC3B,GAAG,eAAe,QAAQ,KAAK,YAAY,UAAU,YAAY,OAAO,CAAC;GACzE;EACJ;CACJ;CAEA,OAAO,MAAiB,SAA+B;EACnD,MAAM,WAAW,kBACb,KAAK,OAAO,KAAI,UAAS,MAAM,IAAI,GACnC,QAAQ,KACZ;EACA,OAAO,aAAa,YAAY,KAAK,MAAM,CAAC,CAAC,QAAQ,KAAK,WAAW,QAAQ,QAAQ;CACzF;;;;;;;CAgBA,WAAqB,OAAiC;EAClD,OAAO,MAAM;CACjB;;;;;;;;CASA,YAAoB,OAAoB,KAAoB,YAAqC;EAC7F,OAAO;GACH,GAAG,KAAK,YAAY,OAAO,GAAG;GAC9B,IAAI,MAAM;GACV,MAAM,MAAM;GACZ,MAAM,KAAK,WAAW,KAAK;GAC3B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,gBAAgB,iBAAiB,MAAM,IAAI,EAAE;EAC5D;CACJ;AACJ"}

package/dist/component/organism/EChart/chart/ChartType.d.ts

@@ -1,3 +1,4 @@
+import type { Icon } from '@tabler/icons-react';
 import type { EChartsOption } from 'echarts';
 import { KitLocale } from '../../../../i18n/KitLocale';
 import { ChartMessages } from '../../../../i18n/KitMessages';
@@ -25,6 +26,8 @@ export type ChartContext = {
 };
 export interface ChartType {
     readonly id: ChartTypeId;
+    /** Icon that represents the type, such as in a chart type selector; absent if the type has none. */
+    readonly icon?: Icon;
     /** Whether the type shows a single category (so the screen should show a category selector, such as the year). */
     readonly singleCategory: boolean;
     /**

package/dist/component/organism/EChart/chart/DonutChart.d.ts

@@ -1,3 +1,4 @@
+import { type Icon } from '@tabler/icons-react';
 import type { EChartsOption } from 'echarts';
 import { ChartData, ChartSeries } from './ChartSeries';
 import { ChartContext, ChartType } from './ChartType';
@@ -16,8 +17,11 @@ export declare const DONUT_HEIGHT = 520;
  * @author Manoel Campos
  */
 export declare class DonutChart implements ChartType {
+    readonly icon: Icon;
     readonly id: ChartTypeId;
     readonly singleCategory = true;
+    /** @param icon icon that replaces the default one */
+    constructor(icon?: Icon);
     isAvailable(series: ChartSeries[]): boolean;
     buildOption(data: ChartData, context: ChartContext): EChartsOption;
     height(data: ChartData, context: ChartContext): number;

package/dist/component/organism/EChart/chart/DonutChart.js

@@ -2,6 +2,7 @@
 import { groupByStack } from "./ChartSeries.js";
 import { chartMessages } from "./ChartTexts.js";
 import { buildChartHeader, legendExtraHeight, tooltipFormatter } from "./ChartHeader.js";
+import { IconChartDonut } from "@tabler/icons-react";
 // src/component/organism/EChart/chart/DonutChart.ts
 /**
 * Height of the donut chart with the legend in one row (px). It does not depend on the number of categories; it only
@@ -21,8 +22,13 @@ var DONUT_CENTER = ["50%", "58%"];
 * @author Manoel Campos
 */
 var DonutChart = class {
+	icon;
 	id = "donut";
 	singleCategory = true;
+	/** @param icon icon that replaces the default one */
+	constructor(icon = IconChartDonut) {
+		this.icon = icon;
+	}
 	isAvailable(series) {
 		const stacks = [...groupByStack(series).entries()];
 		if (stacks.length !== 1) return false;

package/dist/component/organism/EChart/chart/DonutChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.js","names":[],"sources":["../../../../../src/component/organism/EChart/chart/DonutChart.ts"],"sourcesContent":["import type { EChartsOption } from 'echarts';\n\nimport { ChartData, ChartSeries, groupByStack } from './ChartSeries';\nimport { ChartContext, ChartType } from './ChartType';\nimport { ChartTypeId } from './ChartTypeId';\nimport { chartMessages } from './ChartTexts';\nimport { buildChartHeader, legendExtraHeight, tooltipFormatter } from './ChartHeader';\n\n/**\n * Height of the donut chart with the legend in one row (px). It does not depend on the number of categories; it only\n * grows when the legend wraps in more rows.\n */\nexport const DONUT_HEIGHT = 520;\n\n/** Inner and outer radius of the donut, relative to the area of the donut ({@link DONUT_HEIGHT} high). */\nconst DONUT_RADIUS = ['40%', '68%'];\n\n/** Center of the donut: moved down so it is not under the title. */\nconst DONUT_CENTER = ['50%', '58%'];\n\n/**\n * Donut chart: shows how the total of a stack ({@link ChartSeries#stack}) splits among its series in a single\n * category (e.g. \"how the revenue splits by category in 2040\").\n * It is available only when there is exactly one stack, none of its series has a negative value (negative slices make\n * no sense) and all series of the chart are in the stack or are its total ({@link ChartSeries#totalOf}).\n * So choosing the donut never stops showing, without warning, a series the user selected.\n * @author Manoel Campos\n */\nexport class DonutChart implements ChartType {\n    readonly id: ChartTypeId = 'donut';\n    readonly singleCategory = true;\n\n    isAvailable(series: ChartSeries[]): boolean {\n        const stacks = [...groupByStack(series).entries()];\n        if (stacks.length !== 1) return false;\n\n        const [stack, slicesSeries] = stacks[0];\n        const belongsToStack = (serie: ChartSeries) => serie.stack === stack || serie.totalOf === stack;\n        return series.every(belongsToStack) && slicesSeries.every(hasNoNegativeValues);\n    }\n\n    buildOption(data: ChartData, context: ChartContext): EChartsOption {\n        const messages = chartMessages(context);\n        const category = shownCategory(data.categories, context.category);\n        const slices = buildSlices(data, context);\n        const unit = stackSeries(data)[0]?.unit;\n        const total = slices.reduce((sum, slice) => sum + slice.value, 0);\n        const header = buildChartHeader(\n            `${context.title} - ${category}`,\n            slices.map(slice => slice.name),\n            messages\n        );\n\n        return {\n            ...header,\n            title: { ...header.title, subtext: unit && messages.total(unit.format(total)) },\n            // The legend goes to the bottom, so it is not under the subtitle with the total.\n            legend: { ...header.legend, top: undefined, bottom: 0 },\n            tooltip: { trigger: 'item', valueFormatter: unit && tooltipFormatter(unit) },\n            series: [\n                {\n                    type: 'pie',\n                    // The area of the donut is fixed at the top; the extra legend rows stay below it.\n                    top: 0,\n                    height: DONUT_HEIGHT,\n                    radius: DONUT_RADIUS,\n                    center: DONUT_CENTER,\n                    data: slices,\n                    label: { formatter: '{b}: {d}%' }\n                }\n            ]\n        } as EChartsOption;\n    }\n\n    height(data: ChartData, context: ChartContext): number {\n        return (\n            DONUT_HEIGHT +\n            legendExtraHeight(\n                buildSlices(data, context).map(slice => slice.name),\n                context.width\n            )\n        );\n    }\n}\n\n/** Slice of the donut: the value of a series of the stack in the category shown. */\ntype Slice = { name: string; value: number };\n\n/**\n * Returns the series of the only stack of the chart, which become the slices of the donut.\n * @param data series and categories of the chart\n * @return the series of the stack (empty if there is no stack)\n */\nfunction stackSeries(data: ChartData): ChartSeries[] {\n    return [...groupByStack(data.series).values()][0] ?? [];\n}\n\n/**\n * Builds the slices of the donut in the category shown, without the series that have no value in it.\n * @param data series and categories of the chart\n * @param context category chosen on the screen\n * @return a slice per series of the stack with a value in the category\n */\nfunction buildSlices(data: ChartData, context: ChartContext): Slice[] {\n    const categoryIndex = data.categories.indexOf(shownCategory(data.categories, context.category));\n    return stackSeries(data)\n        .map(serie => ({ name: serie.name, value: serie.values[categoryIndex] }))\n        .filter((slice): slice is Slice => slice.value !== null);\n}\n\n/**\n * Checks whether a series has no negative values, which make no sense as slices.\n * @param serie series of a stack\n * @return true if the series has no negative value (categories without a value are ignored)\n */\nfunction hasNoNegativeValues(serie: ChartSeries): boolean {\n    return serie.values.every(value => value === null || value >= 0);\n}\n\n/**\n * Returns the category a single-category chart should show: the chosen one, if it is in the chart; otherwise, the last.\n * @template C type of the categories (e.g. the years, as numbers)\n * @param categories categories of the chart\n * @param chosen category chosen on the screen; absent if none was chosen\n * @return the category to show\n */\nexport function shownCategory<C extends string | number>(categories: C[], chosen?: C): C {\n    return chosen !== undefined && categories.includes(chosen) ? chosen : categories[categories.length - 1];\n}\n"],"mappings":";;;;;;;;;AAYA,IAAa,eAAe;;AAG5B,IAAM,eAAe,CAAC,OAAO,KAAK;;AAGlC,IAAM,eAAe,CAAC,OAAO,KAAK;;;;;;;;;AAUlC,IAAa,aAAb,MAA6C;CACzC,KAA2B;CAC3B,iBAA0B;CAE1B,YAAY,QAAgC;EACxC,MAAM,SAAS,CAAC,GAAG,aAAa,MAAM,CAAC,CAAC,QAAQ,CAAC;EACjD,IAAI,OAAO,WAAW,GAAG,OAAO;EAEhC,MAAM,CAAC,OAAO,gBAAgB,OAAO;EACrC,MAAM,kBAAkB,UAAuB,MAAM,UAAU,SAAS,MAAM,YAAY;EAC1F,OAAO,OAAO,MAAM,cAAc,KAAK,aAAa,MAAM,mBAAmB;CACjF;CAEA,YAAY,MAAiB,SAAsC;EAC/D,MAAM,WAAW,cAAc,OAAO;EACtC,MAAM,WAAW,cAAc,KAAK,YAAY,QAAQ,QAAQ;EAChE,MAAM,SAAS,YAAY,MAAM,OAAO;EACxC,MAAM,OAAO,YAAY,IAAI,CAAC,CAAC,EAAE,EAAE;EACnC,MAAM,QAAQ,OAAO,QAAQ,KAAK,UAAU,MAAM,MAAM,OAAO,CAAC;EAChE,MAAM,SAAS,iBACX,GAAG,QAAQ,MAAM,KAAK,YACtB,OAAO,KAAI,UAAS,MAAM,IAAI,GAC9B,QACJ;EAEA,OAAO;GACH,GAAG;GACH,OAAO;IAAE,GAAG,OAAO;IAAO,SAAS,QAAQ,SAAS,MAAM,KAAK,OAAO,KAAK,CAAC;GAAE;GAE9E,QAAQ;IAAE,GAAG,OAAO;IAAQ,KAAK,KAAA;IAAW,QAAQ;GAAE;GACtD,SAAS;IAAE,SAAS;IAAQ,gBAAgB,QAAQ,iBAAiB,IAAI;GAAE;GAC3E,QAAQ,CACJ;IACI,MAAM;IAEN,KAAK;IACL,QAAA;IACA,QAAQ;IACR,QAAQ;IACR,MAAM;IACN,OAAO,EAAE,WAAW,YAAY;GACpC,CACJ;EACJ;CACJ;CAEA,OAAO,MAAiB,SAA+B;EACnD,OAAA,MAEI,kBACI,YAAY,MAAM,OAAO,CAAC,CAAC,KAAI,UAAS,MAAM,IAAI,GAClD,QAAQ,KACZ;CAER;AACJ;;;;;;AAUA,SAAS,YAAY,MAAgC;CACjD,OAAO,CAAC,GAAG,aAAa,KAAK,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;AAC1D;;;;;;;AAQA,SAAS,YAAY,MAAiB,SAAgC;CAClE,MAAM,gBAAgB,KAAK,WAAW,QAAQ,cAAc,KAAK,YAAY,QAAQ,QAAQ,CAAC;CAC9F,OAAO,YAAY,IAAI,CAAC,CACnB,KAAI,WAAU;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM,OAAO;CAAe,EAAE,CAAC,CACxE,QAAQ,UAA0B,MAAM,UAAU,IAAI;AAC/D;;;;;;AAOA,SAAS,oBAAoB,OAA6B;CACtD,OAAO,MAAM,OAAO,OAAM,UAAS,UAAU,QAAQ,SAAS,CAAC;AACnE;;;;;;;;AASA,SAAgB,cAAyC,YAAiB,QAAe;CACrF,OAAO,WAAW,KAAA,KAAa,WAAW,SAAS,MAAM,IAAI,SAAS,WAAW,WAAW,SAAS;AACzG"}
+{"version":3,"file":"DonutChart.js","names":[],"sources":["../../../../../src/component/organism/EChart/chart/DonutChart.ts"],"sourcesContent":["import { IconChartDonut, type Icon } from '@tabler/icons-react';\nimport type { EChartsOption } from 'echarts';\n\nimport { ChartData, ChartSeries, groupByStack } from './ChartSeries';\nimport { ChartContext, ChartType } from './ChartType';\nimport { ChartTypeId } from './ChartTypeId';\nimport { chartMessages } from './ChartTexts';\nimport { buildChartHeader, legendExtraHeight, tooltipFormatter } from './ChartHeader';\n\n/**\n * Height of the donut chart with the legend in one row (px). It does not depend on the number of categories; it only\n * grows when the legend wraps in more rows.\n */\nexport const DONUT_HEIGHT = 520;\n\n/** Inner and outer radius of the donut, relative to the area of the donut ({@link DONUT_HEIGHT} high). */\nconst DONUT_RADIUS = ['40%', '68%'];\n\n/** Center of the donut: moved down so it is not under the title. */\nconst DONUT_CENTER = ['50%', '58%'];\n\n/**\n * Donut chart: shows how the total of a stack ({@link ChartSeries#stack}) splits among its series in a single\n * category (e.g. \"how the revenue splits by category in 2040\").\n * It is available only when there is exactly one stack, none of its series has a negative value (negative slices make\n * no sense) and all series of the chart are in the stack or are its total ({@link ChartSeries#totalOf}).\n * So choosing the donut never stops showing, without warning, a series the user selected.\n * @author Manoel Campos\n */\nexport class DonutChart implements ChartType {\n    readonly id: ChartTypeId = 'donut';\n    readonly singleCategory = true;\n\n    /** @param icon icon that replaces the default one */\n    constructor(readonly icon: Icon = IconChartDonut) {}\n\n    isAvailable(series: ChartSeries[]): boolean {\n        const stacks = [...groupByStack(series).entries()];\n        if (stacks.length !== 1) return false;\n\n        const [stack, slicesSeries] = stacks[0];\n        const belongsToStack = (serie: ChartSeries) => serie.stack === stack || serie.totalOf === stack;\n        return series.every(belongsToStack) && slicesSeries.every(hasNoNegativeValues);\n    }\n\n    buildOption(data: ChartData, context: ChartContext): EChartsOption {\n        const messages = chartMessages(context);\n        const category = shownCategory(data.categories, context.category);\n        const slices = buildSlices(data, context);\n        const unit = stackSeries(data)[0]?.unit;\n        const total = slices.reduce((sum, slice) => sum + slice.value, 0);\n        const header = buildChartHeader(\n            `${context.title} - ${category}`,\n            slices.map(slice => slice.name),\n            messages\n        );\n\n        return {\n            ...header,\n            title: { ...header.title, subtext: unit && messages.total(unit.format(total)) },\n            // The legend goes to the bottom, so it is not under the subtitle with the total.\n            legend: { ...header.legend, top: undefined, bottom: 0 },\n            tooltip: { trigger: 'item', valueFormatter: unit && tooltipFormatter(unit) },\n            series: [\n                {\n                    type: 'pie',\n                    // The area of the donut is fixed at the top; the extra legend rows stay below it.\n                    top: 0,\n                    height: DONUT_HEIGHT,\n                    radius: DONUT_RADIUS,\n                    center: DONUT_CENTER,\n                    data: slices,\n                    label: { formatter: '{b}: {d}%' }\n                }\n            ]\n        } as EChartsOption;\n    }\n\n    height(data: ChartData, context: ChartContext): number {\n        return (\n            DONUT_HEIGHT +\n            legendExtraHeight(\n                buildSlices(data, context).map(slice => slice.name),\n                context.width\n            )\n        );\n    }\n}\n\n/** Slice of the donut: the value of a series of the stack in the category shown. */\ntype Slice = { name: string; value: number };\n\n/**\n * Returns the series of the only stack of the chart, which become the slices of the donut.\n * @param data series and categories of the chart\n * @return the series of the stack (empty if there is no stack)\n */\nfunction stackSeries(data: ChartData): ChartSeries[] {\n    return [...groupByStack(data.series).values()][0] ?? [];\n}\n\n/**\n * Builds the slices of the donut in the category shown, without the series that have no value in it.\n * @param data series and categories of the chart\n * @param context category chosen on the screen\n * @return a slice per series of the stack with a value in the category\n */\nfunction buildSlices(data: ChartData, context: ChartContext): Slice[] {\n    const categoryIndex = data.categories.indexOf(shownCategory(data.categories, context.category));\n    return stackSeries(data)\n        .map(serie => ({ name: serie.name, value: serie.values[categoryIndex] }))\n        .filter((slice): slice is Slice => slice.value !== null);\n}\n\n/**\n * Checks whether a series has no negative values, which make no sense as slices.\n * @param serie series of a stack\n * @return true if the series has no negative value (categories without a value are ignored)\n */\nfunction hasNoNegativeValues(serie: ChartSeries): boolean {\n    return serie.values.every(value => value === null || value >= 0);\n}\n\n/**\n * Returns the category a single-category chart should show: the chosen one, if it is in the chart; otherwise, the last.\n * @template C type of the categories (e.g. the years, as numbers)\n * @param categories categories of the chart\n * @param chosen category chosen on the screen; absent if none was chosen\n * @return the category to show\n */\nexport function shownCategory<C extends string | number>(categories: C[], chosen?: C): C {\n    return chosen !== undefined && categories.includes(chosen) ? chosen : categories[categories.length - 1];\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAa,eAAe;;AAG5B,IAAM,eAAe,CAAC,OAAO,KAAK;;AAGlC,IAAM,eAAe,CAAC,OAAO,KAAK;;;;;;;;;AAUlC,IAAa,aAAb,MAA6C;CAKpB;CAJrB,KAA2B;CAC3B,iBAA0B;;CAG1B,YAAY,OAAsB,gBAAgB;EAA7B,KAAA,OAAA;CAA8B;CAEnD,YAAY,QAAgC;EACxC,MAAM,SAAS,CAAC,GAAG,aAAa,MAAM,CAAC,CAAC,QAAQ,CAAC;EACjD,IAAI,OAAO,WAAW,GAAG,OAAO;EAEhC,MAAM,CAAC,OAAO,gBAAgB,OAAO;EACrC,MAAM,kBAAkB,UAAuB,MAAM,UAAU,SAAS,MAAM,YAAY;EAC1F,OAAO,OAAO,MAAM,cAAc,KAAK,aAAa,MAAM,mBAAmB;CACjF;CAEA,YAAY,MAAiB,SAAsC;EAC/D,MAAM,WAAW,cAAc,OAAO;EACtC,MAAM,WAAW,cAAc,KAAK,YAAY,QAAQ,QAAQ;EAChE,MAAM,SAAS,YAAY,MAAM,OAAO;EACxC,MAAM,OAAO,YAAY,IAAI,CAAC,CAAC,EAAE,EAAE;EACnC,MAAM,QAAQ,OAAO,QAAQ,KAAK,UAAU,MAAM,MAAM,OAAO,CAAC;EAChE,MAAM,SAAS,iBACX,GAAG,QAAQ,MAAM,KAAK,YACtB,OAAO,KAAI,UAAS,MAAM,IAAI,GAC9B,QACJ;EAEA,OAAO;GACH,GAAG;GACH,OAAO;IAAE,GAAG,OAAO;IAAO,SAAS,QAAQ,SAAS,MAAM,KAAK,OAAO,KAAK,CAAC;GAAE;GAE9E,QAAQ;IAAE,GAAG,OAAO;IAAQ,KAAK,KAAA;IAAW,QAAQ;GAAE;GACtD,SAAS;IAAE,SAAS;IAAQ,gBAAgB,QAAQ,iBAAiB,IAAI;GAAE;GAC3E,QAAQ,CACJ;IACI,MAAM;IAEN,KAAK;IACL,QAAA;IACA,QAAQ;IACR,QAAQ;IACR,MAAM;IACN,OAAO,EAAE,WAAW,YAAY;GACpC,CACJ;EACJ;CACJ;CAEA,OAAO,MAAiB,SAA+B;EACnD,OAAA,MAEI,kBACI,YAAY,MAAM,OAAO,CAAC,CAAC,KAAI,UAAS,MAAM,IAAI,GAClD,QAAQ,KACZ;CAER;AACJ;;;;;;AAUA,SAAS,YAAY,MAAgC;CACjD,OAAO,CAAC,GAAG,aAAa,KAAK,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;AAC1D;;;;;;;AAQA,SAAS,YAAY,MAAiB,SAAgC;CAClE,MAAM,gBAAgB,KAAK,WAAW,QAAQ,cAAc,KAAK,YAAY,QAAQ,QAAQ,CAAC;CAC9F,OAAO,YAAY,IAAI,CAAC,CACnB,KAAI,WAAU;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM,OAAO;CAAe,EAAE,CAAC,CACxE,QAAQ,UAA0B,MAAM,UAAU,IAAI;AAC/D;;;;;;AAOA,SAAS,oBAAoB,OAA6B;CACtD,OAAO,MAAM,OAAO,OAAM,UAAS,UAAU,QAAQ,SAAS,CAAC;AACnE;;;;;;;;AASA,SAAgB,cAAyC,YAAiB,QAAe;CACrF,OAAO,WAAW,KAAA,KAAa,WAAW,SAAS,MAAM,IAAI,SAAS,WAAW,WAAW,SAAS;AACzG"}

package/dist/component/organism/EChart/chart/LineChart.d.ts

@@ -1,3 +1,4 @@
+import { type Icon } from '@tabler/icons-react';
 import { ChartTypeId } from './ChartTypeId';
 import { CartesianChart, CartesianSeries } from './CartesianChart';
 /**
@@ -7,5 +8,7 @@ import { CartesianChart, CartesianSeries } from './CartesianChart';
  */
 export declare class LineChart extends CartesianChart {
     readonly id: ChartTypeId;
+    /** @param icon icon that replaces the default one */
+    constructor(icon?: Icon);
     protected seriesStyle(): CartesianSeries;
 }

package/dist/component/organism/EChart/chart/LineChart.js

@@ -1,5 +1,6 @@
 "use client";
 import { CartesianChart } from "./CartesianChart.js";
+import { IconChartLine } from "@tabler/icons-react";
 // src/component/organism/EChart/chart/LineChart.ts
 /**
 * Line chart: shows the trend of each series along the categories.
@@ -8,6 +9,10 @@ import { CartesianChart } from "./CartesianChart.js";
 */
 var LineChart = class extends CartesianChart {
 	id = "line";
+	/** @param icon icon that replaces the default one */
+	constructor(icon = IconChartLine) {
+		super(icon);
+	}
 	seriesStyle() {
 		return {
 			type: "line",

package/dist/component/organism/EChart/chart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","names":[],"sources":["../../../../../src/component/organism/EChart/chart/LineChart.ts"],"sourcesContent":["import { ChartTypeId } from './ChartTypeId';\nimport { CartesianChart, CartesianSeries } from './CartesianChart';\n\n/**\n * Line chart: shows the trend of each series along the categories.\n * Suited to rates and levels (e.g. percentages, coefficients, population).\n * @author Manoel Campos\n */\nexport class LineChart extends CartesianChart {\n    readonly id: ChartTypeId = 'line';\n\n    protected seriesStyle(): CartesianSeries {\n        // connectNulls false: a category without a value is a gap in the line, instead of joining the neighbors.\n        return { type: 'line', connectNulls: false };\n    }\n}\n"],"mappings":";;;;;;;;AAQA,IAAa,YAAb,cAA+B,eAAe;CAC1C,KAA2B;CAE3B,cAAyC;EAErC,OAAO;GAAE,MAAM;GAAQ,cAAc;EAAM;CAC/C;AACJ"}
+{"version":3,"file":"LineChart.js","names":[],"sources":["../../../../../src/component/organism/EChart/chart/LineChart.ts"],"sourcesContent":["import { IconChartLine, type Icon } from '@tabler/icons-react';\n\nimport { ChartTypeId } from './ChartTypeId';\nimport { CartesianChart, CartesianSeries } from './CartesianChart';\n\n/**\n * Line chart: shows the trend of each series along the categories.\n * Suited to rates and levels (e.g. percentages, coefficients, population).\n * @author Manoel Campos\n */\nexport class LineChart extends CartesianChart {\n    readonly id: ChartTypeId = 'line';\n\n    /** @param icon icon that replaces the default one */\n    constructor(icon: Icon = IconChartLine) {\n        super(icon);\n    }\n\n    protected seriesStyle(): CartesianSeries {\n        // connectNulls false: a category without a value is a gap in the line, instead of joining the neighbors.\n        return { type: 'line', connectNulls: false };\n    }\n}\n"],"mappings":";;;;;;;;;AAUA,IAAa,YAAb,cAA+B,eAAe;CAC1C,KAA2B;;CAG3B,YAAY,OAAa,eAAe;EACpC,MAAM,IAAI;CACd;CAEA,cAAyC;EAErC,OAAO;GAAE,MAAM;GAAQ,cAAc;EAAM;CAC/C;AACJ"}

package/dist/component/organism/EChart/chart/StackedBarChart.d.ts

@@ -1,3 +1,4 @@
+import { type Icon } from '@tabler/icons-react';
 import { ChartSeries } from './ChartSeries';
 import { ChartTypeId } from './ChartTypeId';
 import { CartesianChart, CartesianSeries } from './CartesianChart';
@@ -10,6 +11,8 @@ import { CartesianChart, CartesianSeries } from './CartesianChart';
  */
 export declare class StackedBarChart extends CartesianChart {
     readonly id: ChartTypeId;
+    /** @param icon icon that replaces the default one */
+    constructor(icon?: Icon);
     isAvailable(series: ChartSeries[]): boolean;
     protected seriesStyle(serie: ChartSeries, all: ChartSeries[]): CartesianSeries;
 }

package/dist/component/organism/EChart/chart/StackedBarChart.js

@@ -1,6 +1,7 @@
 "use client";
 import { groupByStack } from "./ChartSeries.js";
 import { CartesianChart } from "./CartesianChart.js";
+import { IconChartColumn } from "@tabler/icons-react";
 // src/component/organism/EChart/chart/StackedBarChart.ts
 /**
 * Stacked column chart with lines: the series of the same stack ({@link ChartSeries#stack}) are stacked, showing how
@@ -11,6 +12,10 @@ import { CartesianChart } from "./CartesianChart.js";
 */
 var StackedBarChart = class extends CartesianChart {
 	id = "stacked-bar";
+	/** @param icon icon that replaces the default one */
+	constructor(icon = IconChartColumn) {
+		super(icon);
+	}
 	isAvailable(series) {
 		return groupByStack(series).size > 0;
 	}

package/dist/component/organism/EChart/chart/StackedBarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackedBarChart.js","names":[],"sources":["../../../../../src/component/organism/EChart/chart/StackedBarChart.ts"],"sourcesContent":["import { ChartSeries, groupByStack } from './ChartSeries';\nimport { ChartTypeId } from './ChartTypeId';\nimport { CartesianChart, CartesianSeries } from './CartesianChart';\n\n/**\n * Stacked column chart with lines: the series of the same stack ({@link ChartSeries#stack}) are stacked, showing how\n * much each one contributes to each category, and the other series (such as a total) become lines over the columns.\n * It is available only when there is a stack with enough series (see `groupByStack`). Whoever builds the series\n * decides which ones can be stacked, so series whose sum makes no sense are never stacked.\n * @author Manoel Campos\n */\nexport class StackedBarChart extends CartesianChart {\n    readonly id: ChartTypeId = 'stacked-bar';\n\n    isAvailable(series: ChartSeries[]): boolean {\n        return groupByStack(series).size > 0;\n    }\n\n    protected seriesStyle(serie: ChartSeries, all: ChartSeries[]): CartesianSeries {\n        // A series with a stack, but alone in it, has nothing to be stacked with: it becomes a line.\n        if (!serie.stack || !groupByStack(all).has(serie.stack)) return { type: 'line', connectNulls: false };\n\n        // Each stack is stacked separately, so series of different wholes are not added up.\n        return { type: 'bar', stack: serie.stack };\n    }\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAa,kBAAb,cAAqC,eAAe;CAChD,KAA2B;CAE3B,YAAY,QAAgC;EACxC,OAAO,aAAa,MAAM,CAAC,CAAC,OAAO;CACvC;CAEA,YAAsB,OAAoB,KAAqC;EAE3E,IAAI,CAAC,MAAM,SAAS,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,MAAM,KAAK,GAAG,OAAO;GAAE,MAAM;GAAQ,cAAc;EAAM;EAGpG,OAAO;GAAE,MAAM;GAAO,OAAO,MAAM;EAAM;CAC7C;AACJ"}
+{"version":3,"file":"StackedBarChart.js","names":[],"sources":["../../../../../src/component/organism/EChart/chart/StackedBarChart.ts"],"sourcesContent":["import { IconChartColumn, type Icon } from '@tabler/icons-react';\n\nimport { ChartSeries, groupByStack } from './ChartSeries';\nimport { ChartTypeId } from './ChartTypeId';\nimport { CartesianChart, CartesianSeries } from './CartesianChart';\n\n/**\n * Stacked column chart with lines: the series of the same stack ({@link ChartSeries#stack}) are stacked, showing how\n * much each one contributes to each category, and the other series (such as a total) become lines over the columns.\n * It is available only when there is a stack with enough series (see `groupByStack`). Whoever builds the series\n * decides which ones can be stacked, so series whose sum makes no sense are never stacked.\n * @author Manoel Campos\n */\nexport class StackedBarChart extends CartesianChart {\n    readonly id: ChartTypeId = 'stacked-bar';\n\n    /** @param icon icon that replaces the default one */\n    constructor(icon: Icon = IconChartColumn) {\n        super(icon);\n    }\n\n    isAvailable(series: ChartSeries[]): boolean {\n        return groupByStack(series).size > 0;\n    }\n\n    protected seriesStyle(serie: ChartSeries, all: ChartSeries[]): CartesianSeries {\n        // A series with a stack, but alone in it, has nothing to be stacked with: it becomes a line.\n        if (!serie.stack || !groupByStack(all).has(serie.stack)) return { type: 'line', connectNulls: false };\n\n        // Each stack is stacked separately, so series of different wholes are not added up.\n        return { type: 'bar', stack: serie.stack };\n    }\n}\n"],"mappings":";;;;;;;;;;;;AAaA,IAAa,kBAAb,cAAqC,eAAe;CAChD,KAA2B;;CAG3B,YAAY,OAAa,iBAAiB;EACtC,MAAM,IAAI;CACd;CAEA,YAAY,QAAgC;EACxC,OAAO,aAAa,MAAM,CAAC,CAAC,OAAO;CACvC;CAEA,YAAsB,OAAoB,KAAqC;EAE3E,IAAI,CAAC,MAAM,SAAS,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,MAAM,KAAK,GAAG,OAAO;GAAE,MAAM;GAAQ,cAAc;EAAM;EAGpG,OAAO;GAAE,MAAM;GAAO,OAAO,MAAM;EAAM;CAC7C;AACJ"}

package/dist/component/organism/Table/Table.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 import { DataTableColumn } from 'mantine-datatable';
+import { TableData } from './TableData';
 import { ListDataSource } from '../../../data/ListDataSource';
 import { Identifiable } from '../../../model/Identifiable';
 /** Which actions the table shows for each record. */
@@ -15,21 +16,19 @@ export type ActionsSettings = {
 };
 /** Props of the {@link Table}. */
 type TableProps<M extends Identifiable, S extends ListDataSource<M>> = {
-    /** Source of the records and of their deletion (e.g. a service that accesses an API). */
-    service: S;
     /**
-     * Fetches the records shown, instead of `service.findAll()`. To show data already available, use
-     * `() => Promise.resolve(data)`.
+     * Records and their pagination and sort, given by `useClientPagination` (sorted and paginated in the browser) or
+     * `useServerPagination` (sorted and paginated by the backend).
      */
-    customFetchMethod?: () => Promise<M[]>;
+    data: TableData<M>;
+    /** Source of the records, which deletes them (e.g. a service that accesses an API). */
+    service: S;
     /** Columns of the table. */
     columns: DataTableColumn<M>[];
     /** Base path of the pages of the records (e.g. `/region`), used to build the view and edit URLs. */
     basePath: string;
     /** Which actions are shown; the ones not given are shown. */
     actionsSettings?: Partial<ActionsSettings>;
-    /** Whether the table is paginated. */
-    pagination?: boolean;
     /**
      * Called by the edit action instead of opening the edit page of the record.
      * @param itemId id of the record to edit
@@ -42,8 +41,9 @@ type TableProps<M extends Identifiable, S extends ListDataSource<M>> = {
     getViewUrl?: (item: M) => string;
 };
 /**
- * A table that shows the records of a data source, with the view, edit and delete actions. Clicking a row opens the
- * record.
+ * A table that shows the records of a data source, with the view, edit and delete actions, or an alert when they cannot
+ * be fetched. Clicking a row opens the record. Its `data` comes from `useClientPagination` or `useServerPagination`,
+ * which define where the records are sorted and paginated.
  * @template M type of the records, shown one per row
  * @template S source of the records (e.g. a service that accesses an API)
  */

package/dist/component/organism/Table/Table.js

@@ -1,17 +1,14 @@
 "use client";
-import ViewTable from "../ViewTable/ViewTable.js";
+import DataTableView from "../ViewTable/DataTableView.js";
 import RowActions from "./RowActions.js";
 import { useKitConfig } from "../../../provider/useKit.js";
 import ErrorAlert from "../../atom/ErrorAlert/ErrorAlert.js";
-import useService from "../../../hook/useService.js";
 import { showErrorNotification, showSuccessNotification } from "../../../util/Notifications.js";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Box } from "@mantine/core";
 // src/component/organism/Table/Table.tsx
 var ROW_HOVER_COLOR = "var(--mantine-primary-color-light)";
-/** Initial records of the table, while they are fetched; a single constant, so it is stable across renders. */
-var NO_RECORDS = [];
 /** Every action shown, used for the settings the caller does not give. */
 var DEFAULT_ACTIONS_SETTINGS = {
 	canShowActions: true,
@@ -30,13 +27,13 @@ function viewUrl(props, item, segments) {
 }
 /**
 * Creates the function that deletes a record and reloads the table.
-* @param setData function that sets the records of the table, obtained from `useState`
+* @param setData function that sets the records of the table
 * @param service source of the records, which deletes them
-* @param fetchMethod fetches the records again after the deletion
+* @param reload fetches the records again after the deletion
 * @param messages texts of the locale
 * @return a function that receives the record to delete and returns a promise resolved when it is deleted
 */
-function getDeleteRecordFn(setData, service, fetchMethod, messages) {
+function getDeleteRecordFn(setData, service, reload, messages) {
 	return async (item) => {
 		const id = item?.id ?? 0;
 		if (!id) {
@@ -46,33 +43,32 @@ function getDeleteRecordFn(setData, service, fetchMethod, messages) {
 		try {
 			await service.delete(id);
 			showSuccessNotification(messages.table.deleteSuccess, messages.common.success);
-			setData(await fetchMethod());
+			await reload();
 		} catch (e) {
 			showErrorNotification(e, void 0, messages.common.error);
 		}
 	};
 }
 /**
-* A table that shows the records of a data source, with the view, edit and delete actions. Clicking a row opens the
-* record.
+* A table that shows the records of a data source, with the view, edit and delete actions, or an alert when they cannot
+* be fetched. Clicking a row opens the record. Its `data` comes from `useClientPagination` or `useServerPagination`,
+* which define where the records are sorted and paginated.
 * @template M type of the records, shown one per row
 * @template S source of the records (e.g. a service that accesses an API)
 */
 var Table = (props) => {
-	const { customFetchMethod, service, columns, basePath, customEditFunction } = props;
-	const fetchMethod = useCallback(() => customFetchMethod ? customFetchMethod() : service.findAll(), [customFetchMethod, service]);
+	const { service, columns, basePath, customEditFunction, data } = props;
+	const { setRecords, reload } = data;
 	const { router, messages, formRouteSegments } = useKitConfig();
 	const navigate = router.useNavigate();
 	const settings = {
 		...DEFAULT_ACTIONS_SETTINGS,
 		...props.actionsSettings
 	};
-	const { data: fetchedData, loading, error } = useService(fetchMethod, NO_RECORDS);
-	const [data, setData] = useState([]);
-	useEffect(() => setData(fetchedData), [fetchedData]);
-	const deleteRecord = useMemo(() => getDeleteRecordFn(setData, service, fetchMethod, messages), [
+	const deleteRecord = useMemo(() => getDeleteRecordFn(setRecords, service, reload, messages), [
+		setRecords,
 		service,
-		fetchMethod,
+		reload,
 		messages
 	]);
 	const actionsColumn = {
@@ -91,15 +87,16 @@ var Table = (props) => {
 		})
 	};
 	const effectiveColumns = settings.canShowActions ? [...columns, actionsColumn] : columns;
-	if (error) return /* @__PURE__ */ jsx(ErrorAlert, {
+	if (data.error) return /* @__PURE__ */ jsx(ErrorAlert, {
 		title: messages.common.loadError,
-		message: String(error)
+		message: String(data.error)
 	});
-	return /* @__PURE__ */ jsx(ViewTable, {
-		data,
+	return /* @__PURE__ */ jsx(DataTableView, {
+		records: data.records,
+		state: data.tableState,
+		paginated: data.paginated,
 		columns: effectiveColumns,
-		loading,
-		pagination: props.pagination,
+		loading: data.loading,
 		highlightOnHover: true,
 		highlightOnHoverColor: ROW_HOVER_COLOR,
 		onRowClick: ({ record }) => navigate(viewUrl(props, record, formRouteSegments))