@ifto/mantine-kit 0.3.0 → 0.4.0

package/README.md

@@ -226,6 +226,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

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ifto/mantine-kit",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "description": "General purpose Mantine components for React apps: CRUD tables and forms, layout, ECharts charts, Excel/CSV export, print pages and a REST HTTP client, with i18n (en-US and pt-BR).",
     "license": "MIT",
     "author": "IFTO - Campus Palmas",