@ifto/mantine-kit 0.0.0-stage → 0.1.0

package/dist/component/organism/DataForm/DataForm.js

@@ -0,0 +1,83 @@
+"use client";
+import { useKitConfig } from "../../../provider/useKit.js";
+import { formatValues } from "../../../util/TransformData.js";
+import { errorMessage, showErrorNotification, showSuccessNotification } from "../../../util/Notifications.js";
+import PaperCard from "../../molecule/PaperCard/PaperCard.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Button, Grid, Group, Stack, Text } from "@mantine/core";
+import { IconArrowBack, IconDeviceFloppy } from "@tabler/icons-react";
+import { modals } from "@mantine/modals";
+// src/component/organism/DataForm/DataForm.tsx
+/**
+* Form in a card, with the back and submit buttons. On submit, calls `fetchMethod` (optionally after a confirmation),
+* shows a notification and goes back to `backRoute`, if given.
+*/
+function DataForm(props) {
+	const { title, backRoute, fetchMethod, form, children, submit } = props;
+	const { router, messages } = useKitConfig();
+	const navigate = router.useNavigate();
+	const { Link } = router;
+	const [loading, setLoading] = useState(false);
+	const handleSubmit = async (data, evt) => {
+		setLoading(true);
+		try {
+			const effectiveData = formatValues(data);
+			await fetchMethod(effectiveData);
+			submit.successMsg && showSuccessNotification(submit.successMsg, messages.common.success);
+			backRoute && navigate(backRoute);
+		} catch (error) {
+			showErrorNotification(error, `${submit.errorMsg}: ${errorMessage(error)}`, messages.common.error);
+		} finally {
+			setLoading(false);
+		}
+		!backRoute && evt?.preventDefault();
+	};
+	const openModal = async () => modals.openConfirmModal({
+		title: messages.form.confirmTitle,
+		centered: true,
+		children: /* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: submit.confirmationMessage
+		}),
+		labels: {
+			confirm: messages.common.confirm,
+			cancel: messages.common.cancel
+		},
+		onConfirm: async () => await handleSubmit(form.values, void 0)
+	});
+	return /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Grid.Col, {
+		span: {
+			base: 12,
+			lg: 12
+		},
+		children: /* @__PURE__ */ jsx(PaperCard, { children: /* @__PURE__ */ jsx(Box, {
+			component: "form",
+			onSubmit: form.onSubmit(submit.confirmationMessage ? openModal : handleSubmit),
+			children: /* @__PURE__ */ jsxs(Stack, { children: [
+				/* @__PURE__ */ jsx(Text, {
+					size: "lg",
+					fw: 600,
+					children: title
+				}),
+				children,
+				/* @__PURE__ */ jsxs(Group, { children: [backRoute && /* @__PURE__ */ jsx(Button, {
+					leftSection: /* @__PURE__ */ jsx(IconArrowBack, { size: 16 }),
+					component: Link,
+					href: backRoute,
+					variant: "default",
+					children: messages.common.back
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					leftSection: /* @__PURE__ */ jsx(IconDeviceFloppy, { size: 16 }),
+					loading,
+					disabled: submit.disabled,
+					children: submit.title
+				})] })
+			] })
+		}) })
+	}) });
+}
+export { DataForm as default };
+
+//# sourceMappingURL=DataForm.js.map

package/dist/component/organism/DataForm/DataForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataForm.js","names":[],"sources":["../../../../src/component/organism/DataForm/DataForm.tsx"],"sourcesContent":["import React, { FormEvent, ReactElement, useState } from 'react';\n\nimport { Box, Button, Grid, Group, Stack, Text } from '@mantine/core';\nimport type { UseFormReturnType } from '@mantine/form';\nimport { modals } from '@mantine/modals';\nimport { IconArrowBack, IconDeviceFloppy } from '@tabler/icons-react';\n\nimport { useKitConfig } from '../../../provider/useKit';\nimport { formatValues } from '../../../util/TransformData';\nimport { errorMessage, showErrorNotification, showSuccessNotification } from '../../../util/Notifications';\nimport PaperCard from '../../molecule/PaperCard/PaperCard';\n\n/** Props of the submit button. */\ninterface SubmitProps {\n    title: string;\n    successMsg?: string;\n    errorMsg: string;\n    disabled?: boolean;\n\n    /** Question shown in a confirmation dialog before submitting; absent to submit right away. */\n    confirmationMessage?: string;\n}\n\ninterface FormProps<D extends object> {\n    title: string;\n\n    /** Page opened after the data is saved and by the back button; absent for no back button nor navigation. */\n    backRoute?: string;\n\n    /** Sends the form data (e.g. to the API). */\n    fetchMethod: (data: D) => Promise<unknown>;\n    form: UseFormReturnType<D>;\n    submit: SubmitProps;\n}\n\n/**\n * Form in a card, with the back and submit buttons. On submit, calls `fetchMethod` (optionally after a confirmation),\n * shows a notification and goes back to `backRoute`, if given.\n */\nfunction DataForm<D extends object>(props: React.PropsWithChildren<FormProps<D>>): ReactElement {\n    const { title, backRoute, fetchMethod, form, children, submit } = props;\n    const { router, messages } = useKitConfig();\n    const navigate = router.useNavigate();\n    const { Link } = router;\n\n    const [loading, setLoading] = useState(false);\n\n    const handleSubmit = async (data: D, evt: FormEvent<HTMLFormElement> | undefined) => {\n        setLoading(true);\n        try {\n            const effectiveData = formatValues(data) as D;\n            await fetchMethod(effectiveData);\n            submit.successMsg && showSuccessNotification(submit.successMsg, messages.common.success);\n\n            backRoute && navigate(backRoute);\n        } catch (error) {\n            showErrorNotification(error, `${submit.errorMsg}: ${errorMessage(error)}`, messages.common.error);\n        } finally {\n            setLoading(false);\n        }\n\n        !backRoute && evt?.preventDefault();\n    };\n\n    const openModal = async () =>\n        modals.openConfirmModal({\n            title: messages.form.confirmTitle,\n            centered: true,\n            children: <Text size=\"sm\">{submit.confirmationMessage}</Text>,\n            labels: { confirm: messages.common.confirm, cancel: messages.common.cancel },\n            onConfirm: async () => await handleSubmit(form.values, undefined)\n        });\n\n    return (\n        <Grid>\n            <Grid.Col span={{ base: 12, lg: 12 }}>\n                <PaperCard>\n                    <Box\n                        component=\"form\"\n                        onSubmit={form.onSubmit(submit.confirmationMessage ? openModal : handleSubmit)}\n                    >\n                        <Stack>\n                            <Text size=\"lg\" fw={600}>\n                                {title}\n                            </Text>\n\n                            {children}\n\n                            <Group>\n                                {backRoute && (\n                                    <Button\n                                        leftSection={<IconArrowBack size={16} />}\n                                        component={Link}\n                                        href={backRoute}\n                                        variant=\"default\"\n                                    >\n                                        {messages.common.back}\n                                    </Button>\n                                )}\n                                <Button\n                                    type=\"submit\"\n                                    leftSection={<IconDeviceFloppy size={16} />}\n                                    loading={loading}\n                                    disabled={submit.disabled}\n                                >\n                                    {submit.title}\n                                </Button>\n                            </Group>\n                        </Stack>\n                    </Box>\n                </PaperCard>\n            </Grid.Col>\n        </Grid>\n    );\n}\n\nexport default DataForm;\n"],"mappings":";;;;;;;;;;;;;;;AAuCA,SAAS,SAA2B,OAA4D;CAC5F,MAAM,EAAE,OAAO,WAAW,aAAa,MAAM,UAAU,WAAW;CAClE,MAAM,EAAE,QAAQ,aAAa,aAAa;CAC1C,MAAM,WAAW,OAAO,YAAY;CACpC,MAAM,EAAE,SAAS;CAEjB,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,eAAe,OAAO,MAAS,QAAgD;EACjF,WAAW,IAAI;EACf,IAAI;GACA,MAAM,gBAAgB,aAAa,IAAI;GACvC,MAAM,YAAY,aAAa;GAC/B,OAAO,cAAc,wBAAwB,OAAO,YAAY,SAAS,OAAO,OAAO;GAEvF,aAAa,SAAS,SAAS;EACnC,SAAS,OAAO;GACZ,sBAAsB,OAAO,GAAG,OAAO,SAAS,IAAI,aAAa,KAAK,KAAK,SAAS,OAAO,KAAK;EACpG,UAAU;GACN,WAAW,KAAK;EACpB;EAEA,CAAC,aAAa,KAAK,eAAe;CACtC;CAEA,MAAM,YAAY,YACd,OAAO,iBAAiB;EACpB,OAAO,SAAS,KAAK;EACrB,UAAU;EACV,UAAU,oBAAC,MAAD;GAAM,MAAK;GAAM,UAAA,OAAO;EAA0B,CAAA;EAC5D,QAAQ;GAAE,SAAS,SAAS,OAAO;GAAS,QAAQ,SAAS,OAAO;EAAO;EAC3E,WAAW,YAAY,MAAM,aAAa,KAAK,QAAQ,KAAA,CAAS;CACpE,CAAC;CAEL,OACI,oBAAC,MAAD,EAAA,UACI,oBAAC,KAAK,KAAN;EAAU,MAAM;GAAE,MAAM;GAAI,IAAI;EAAG;EAC/B,UAAA,oBAAC,WAAD,EAAA,UACI,oBAAC,KAAD;GACI,WAAU;GACV,UAAU,KAAK,SAAS,OAAO,sBAAsB,YAAY,YAAY;GAE7E,UAAA,qBAAC,OAAD,EAAA,UAAA;IACI,oBAAC,MAAD;KAAM,MAAK;KAAK,IAAI;KACf,UAAA;IACC,CAAA;IAEL;IAED,qBAAC,OAAD,EAAA,UAAA,CACK,aACG,oBAAC,QAAD;KACI,aAAa,oBAAC,eAAD,EAAe,MAAM,GAAK,CAAA;KACvC,WAAW;KACX,MAAM;KACN,SAAQ;KAEP,UAAA,SAAS,OAAO;IACb,CAAA,GAEZ,oBAAC,QAAD;KACI,MAAK;KACL,aAAa,oBAAC,kBAAD,EAAkB,MAAM,GAAK,CAAA;KACjC;KACT,UAAU,OAAO;KAEhB,UAAA,OAAO;IACJ,CAAA,CACL,EAAA,CAAA;GACJ,EAAA,CAAA;EACN,CAAA,EACE,CAAA;CACL,CAAA,EACR,CAAA;AAEd"}

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

@@ -0,0 +1,24 @@
+import { ReactElement, ReactNode } from 'react';
+import type { Identifiable } from '../../../model/Identifiable';
+type TabListProps<M extends Identifiable> = {
+    /** One tab per object. */
+    dataArray: M[];
+    /** Returns the icon of the tab of an object; without it, all tabs use a generic icon. */
+    tabIconFn?: (obj: M, tabIndex: number) => ReactNode;
+    /** Index of the tab selected at first. */
+    defaultTabIndex?: number;
+    /** Value of the selected tab, to control it from outside (the id of the object, as a string). */
+    value?: string | null;
+    onChange?: (value: string | null) => void;
+    /** Returns the title of the tab of an object. */
+    tabTitleFn: (obj: M) => string;
+    /** Returns the content of the tab of an object. */
+    children: (obj: M, tabIndex: number) => ReactNode;
+};
+/**
+ * Tabs built from an array of objects, one tab per object.
+ * Each tab is as wide as its title (up to a maximum width, wrapping longer titles), and tabs that do not fit in a row
+ * move to the next one, aligned to the left, keeping the same look.
+ */
+declare function DataTabList<M extends Identifiable>({ dataArray, tabIconFn, tabTitleFn, defaultTabIndex, value, onChange, children }: TabListProps<M>): ReactElement;
+export default DataTabList;

package/dist/component/organism/DataTabList/DataTabList.js

@@ -0,0 +1,37 @@
+"use client";
+import DataTabList_module_default from "./DataTabList.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@mantine/core";
+import { IconTableColumn } from "@tabler/icons-react";
+// src/component/organism/DataTabList/DataTabList.tsx
+/**
+* Tabs built from an array of objects, one tab per object.
+* Each tab is as wide as its title (up to a maximum width, wrapping longer titles), and tabs that do not fit in a row
+* move to the next one, aligned to the left, keeping the same look.
+*/
+function DataTabList({ dataArray, tabIconFn = () => /* @__PURE__ */ jsx(IconTableColumn, {}), tabTitleFn, defaultTabIndex = 0, value, onChange, children }) {
+	if (dataArray.length == 0) return /* @__PURE__ */ jsx(Fragment, {});
+	const tabValue = (obj, index) => (obj.id || index).toString();
+	return /* @__PURE__ */ jsxs(Tabs, {
+		defaultValue: dataArray[defaultTabIndex]?.id?.toString(),
+		value,
+		onChange,
+		variant: "pills",
+		classNames: {
+			tab: DataTabList_module_default.tab,
+			tabSection: DataTabList_module_default.tabSection,
+			panel: DataTabList_module_default.panel
+		},
+		children: [/* @__PURE__ */ jsx(Tabs.List, { children: dataArray.map((data, i) => /* @__PURE__ */ jsx(Tabs.Tab, {
+			value: tabValue(data, i),
+			leftSection: tabIconFn(data, i),
+			children: tabTitleFn(data)
+		}, tabValue(data, i))) }), dataArray.map((data, i) => /* @__PURE__ */ jsx(Tabs.Panel, {
+			value: tabValue(data, i),
+			children: children(data, i)
+		}, tabValue(data, i)))]
+	});
+}
+export { DataTabList as default };
+
+//# sourceMappingURL=DataTabList.js.map

package/dist/component/organism/DataTabList/DataTabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTabList.js","names":["_Fragment","classes"],"sources":["../../../../src/component/organism/DataTabList/DataTabList.tsx"],"sourcesContent":["import { Tabs } from '@mantine/core';\nimport { IconTableColumn } from '@tabler/icons-react';\nimport { ReactElement, ReactNode } from 'react';\n\nimport type { Identifiable } from '../../../model/Identifiable';\nimport classes from './DataTabList.module.css';\n\ntype TabListProps<M extends Identifiable> = {\n    /** One tab per object. */\n    dataArray: M[];\n\n    /** Returns the icon of the tab of an object; without it, all tabs use a generic icon. */\n    tabIconFn?: (obj: M, tabIndex: number) => ReactNode;\n\n    /** Index of the tab selected at first. */\n    defaultTabIndex?: number;\n\n    /** Value of the selected tab, to control it from outside (the id of the object, as a string). */\n    value?: string | null;\n    onChange?: (value: string | null) => void;\n\n    /** Returns the title of the tab of an object. */\n    tabTitleFn: (obj: M) => string;\n\n    /** Returns the content of the tab of an object. */\n    children: (obj: M, tabIndex: number) => ReactNode;\n};\n\n/**\n * Tabs built from an array of objects, one tab per object.\n * Each tab is as wide as its title (up to a maximum width, wrapping longer titles), and tabs that do not fit in a row\n * move to the next one, aligned to the left, keeping the same look.\n */\nfunction DataTabList<M extends Identifiable>({\n    dataArray,\n    tabIconFn = () => <IconTableColumn />,\n    tabTitleFn,\n    defaultTabIndex = 0,\n    value,\n    onChange,\n    children\n}: TabListProps<M>): ReactElement {\n    if (dataArray.length == 0) {\n        return <></>;\n    }\n\n    const tabValue = (obj: M, index: number) => (obj.id || index).toString();\n\n    return (\n        <Tabs\n            defaultValue={dataArray[defaultTabIndex]?.id?.toString()}\n            value={value}\n            onChange={onChange}\n            variant=\"pills\"\n            classNames={{ tab: classes.tab, tabSection: classes.tabSection, panel: classes.panel }}\n        >\n            <Tabs.List>\n                {dataArray.map((data, i) => (\n                    <Tabs.Tab value={tabValue(data, i)} key={tabValue(data, i)} leftSection={tabIconFn(data, i)}>\n                        {tabTitleFn(data)}\n                    </Tabs.Tab>\n                ))}\n            </Tabs.List>\n\n            {dataArray.map((data, i) => (\n                <Tabs.Panel value={tabValue(data, i)} key={tabValue(data, i)}>\n                    {children(data, i)}\n                </Tabs.Panel>\n            ))}\n        </Tabs>\n    );\n}\n\nexport default DataTabList;\n"],"mappings":";;;;;;;;;;;AAiCA,SAAS,YAAoC,EACzC,WACA,kBAAkB,oBAAC,iBAAD,CAAkB,CAAA,GACpC,YACA,kBAAkB,GAClB,OACA,UACA,YAC8B;CAC9B,IAAI,UAAU,UAAU,GACpB,OAAO,oBAAAA,UAAA,CAAI,CAAA;CAGf,MAAM,YAAY,KAAQ,WAAmB,IAAI,MAAM,MAAA,CAAO,SAAS;CAEvE,OACI,qBAAC,MAAD;EACI,cAAc,UAAU,gBAAgB,EAAE,IAAI,SAAS;EAChD;EACG;EACV,SAAQ;EACR,YAAY;GAAE,KAAKC,2BAAQ;GAAK,YAAYA,2BAAQ;GAAY,OAAOA,2BAAQ;EAAM;EALzF,UAAA,CAOI,oBAAC,KAAK,MAAN,EAAA,UACK,UAAU,KAAK,MAAM,MAClB,oBAAC,KAAK,KAAN;GAAU,OAAO,SAAS,MAAM,CAAC;GAA2B,aAAa,UAAU,MAAM,CAAC;GACrF,UAAA,WAAW,IAAI;EACV,GAF+B,SAAS,MAAM,CAAC,CAE/C,CACb,EACM,CAAA,GAEV,UAAU,KAAK,MAAM,MAClB,oBAAC,KAAK,OAAN;GAAY,OAAO,SAAS,MAAM,CAAC;GAC9B,UAAA,SAAS,MAAM,CAAC;EACT,GAF+B,SAAS,MAAM,CAAC,CAE/C,CACf,CACC;;AAEd"}

package/dist/component/organism/DataTabList/DataTabList.module.js

@@ -0,0 +1,13 @@
+"use client";
+// src/component/organism/DataTabList/DataTabList.module.css
+var tab = "mk-DataTabList-module-tab-15vyU";
+var tabSection = "mk-DataTabList-module-tabSection-WA0SY";
+var panel = "mk-DataTabList-module-panel-R37nf";
+var DataTabList_module_default = {
+	tab,
+	tabSection,
+	panel
+};
+export { DataTabList_module_default as default, panel, tab, tabSection };
+
+//# sourceMappingURL=DataTabList.module.js.map

package/dist/component/organism/DataTabList/DataTabList.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTabList.module.js","names":[],"sources":["../../../../src/component/organism/DataTabList/DataTabList.module.css"],"sourcesContent":["/*\n * Tabs as wide as their own text (without stretching to fill the row), up to a maximum width.\n * A title longer than the limit wraps in more than one line inside the tab, instead of widening it.\n */\n.tab {\n    max-width: 14rem;\n    min-height: 2.5rem;\n    white-space: normal;\n    line-height: 1.25;\n\n    /* Border on the inactive tabs, so they look clickable, and not like loose text of the page. */\n    border: 1px solid var(--mantine-color-default-border);\n}\n\n.tab[data-active] {\n    border-color: var(--mantine-primary-color-filled);\n}\n\n/* Same size for any given icon, so all tabs have the same height. */\n.tabSection svg {\n    width: 1rem;\n    height: 1rem;\n}\n\n.panel {\n    padding-top: var(--mantine-spacing-xs);\n}\n"],"mappings":""}

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

@@ -0,0 +1,47 @@
+import { CSSProperties, ReactElement } from 'react';
+import type { EChartsOption } from 'echarts';
+import { EChartDataAccessors } from './buildEChartOption';
+import { EChartEventHandlers, EChartMaps, EChartRenderer } from './useEChart';
+/**
+ * Props of the {@link EChart}. `getName` and `getValue` extract from each item of `data` the name and the value of the
+ * element in the chart.
+ */
+export type EChartProps<T> = EChartDataAccessors<T> & {
+    /** Raw domain data, used to fill the `data` of the series that define no data of their own. */
+    data: T[];
+    /**
+     * ECharts options specific to the chart (series type, map, axes etc.).
+     * They replace the default values of `tooltip`, `toolbox` and `visualMap` (deep merge).
+     */
+    option?: EChartsOption;
+    /**
+     * Whether the elements of the chart should be colored according to their percentage value (0..1), showing a
+     * gradient legend from "0%" to "100%" (see {@link DEFAULT_VISUAL_MAP}). Default: `true`.
+     * Turn it off in charts of absolute values (money, volumes), since the 0..1 scale does not match these values and
+     * the color of the series would be replaced by the one of the scale.
+     */
+    withVisualMap?: boolean;
+    /**
+     * Functions that handle ECharts events, indexed by the event name (e.g. `click`, `legendselectchanged`).
+     * Prefer a stable object (e.g. with `useMemo`), since the handlers are bound again when the object changes.
+     */
+    onEvents?: EChartEventHandlers;
+    /**
+     * Maps (e.g. the GeoJSON of the cities) used by the `map` series, indexed by the name used in `series[i].map`.
+     * They are registered before the chart is created and again when the object changes, so prefer a stable object
+     * (e.g. with `useMemo`).
+     */
+    maps?: EChartMaps;
+    /** How the chart is drawn: `svg` is printed as vector graphics (e.g. in reports). Default: `canvas`. */
+    renderer?: EChartRenderer;
+    /** Style of the chart container. Default: {@link DEFAULT_STYLE}. */
+    style?: CSSProperties;
+    className?: string;
+};
+/**
+ * React wrapper of Apache ECharts that receives the raw domain data and builds the series from it, applying the
+ * default `option` values.
+ * The chart is redrawn when a prop changes, so prefer giving stable `option`, `getName` and `getValue` (e.g. with
+ * `useMemo`/`useCallback` or defined outside the component) to avoid needless redraws.
+ */
+export declare function EChart<T>({ data, getName, getValue, option, withVisualMap, onEvents, maps, renderer, style, className }: EChartProps<T>): ReactElement;

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

@@ -0,0 +1,37 @@
+"use client";
+import { useKitMessages } from "../../../provider/useKit.js";
+import { buildEChartOption } from "./buildEChartOption.js";
+import { DEFAULT_STYLE } from "./echartDefaults.js";
+import { useEChart } from "./useEChart.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/component/organism/EChart/EChart.tsx
+/**
+* React wrapper of Apache ECharts that receives the raw domain data and builds the series from it, applying the
+* default `option` values.
+* The chart is redrawn when a prop changes, so prefer giving stable `option`, `getName` and `getValue` (e.g. with
+* `useMemo`/`useCallback` or defined outside the component) to avoid needless redraws.
+*/
+function EChart({ data, getName, getValue, option, withVisualMap = true, onEvents, maps, renderer, style = DEFAULT_STYLE, className }) {
+	const saveAsImageTitle = useKitMessages().chart.saveAsImage;
+	const finalOption = useMemo(() => buildEChartOption(data, {
+		getName,
+		getValue
+	}, option, withVisualMap, saveAsImageTitle), [
+		data,
+		getName,
+		getValue,
+		option,
+		withVisualMap,
+		saveAsImageTitle
+	]);
+	const containerRef = useEChart(finalOption, onEvents, maps, renderer);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		style,
+		className
+	});
+}
+export { EChart };
+
+//# sourceMappingURL=EChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EChart.js","names":[],"sources":["../../../../src/component/organism/EChart/EChart.tsx"],"sourcesContent":["'use client';\n\nimport { CSSProperties, ReactElement, useMemo } from 'react';\n\nimport type { EChartsOption } from 'echarts';\n\nimport { useKitMessages } from '../../../provider/useKit';\nimport { buildEChartOption, EChartDataAccessors } from './buildEChartOption';\nimport { DEFAULT_STYLE } from './echartDefaults';\nimport { EChartEventHandlers, EChartMaps, EChartRenderer, useEChart } from './useEChart';\n\n/**\n * Props of the {@link EChart}. `getName` and `getValue` extract from each item of `data` the name and the value of the\n * element in the chart.\n */\nexport type EChartProps<T> = EChartDataAccessors<T> & {\n    /** Raw domain data, used to fill the `data` of the series that define no data of their own. */\n    data: T[];\n\n    /**\n     * ECharts options specific to the chart (series type, map, axes etc.).\n     * They replace the default values of `tooltip`, `toolbox` and `visualMap` (deep merge).\n     */\n    option?: EChartsOption;\n\n    /**\n     * Whether the elements of the chart should be colored according to their percentage value (0..1), showing a\n     * gradient legend from \"0%\" to \"100%\" (see {@link DEFAULT_VISUAL_MAP}). Default: `true`.\n     * Turn it off in charts of absolute values (money, volumes), since the 0..1 scale does not match these values and\n     * the color of the series would be replaced by the one of the scale.\n     */\n    withVisualMap?: boolean;\n\n    /**\n     * Functions that handle ECharts events, indexed by the event name (e.g. `click`, `legendselectchanged`).\n     * Prefer a stable object (e.g. with `useMemo`), since the handlers are bound again when the object changes.\n     */\n    onEvents?: EChartEventHandlers;\n\n    /**\n     * Maps (e.g. the GeoJSON of the cities) used by the `map` series, indexed by the name used in `series[i].map`.\n     * They are registered before the chart is created and again when the object changes, so prefer a stable object\n     * (e.g. with `useMemo`).\n     */\n    maps?: EChartMaps;\n\n    /** How the chart is drawn: `svg` is printed as vector graphics (e.g. in reports). Default: `canvas`. */\n    renderer?: EChartRenderer;\n\n    /** Style of the chart container. Default: {@link DEFAULT_STYLE}. */\n    style?: CSSProperties;\n\n    className?: string;\n};\n\n/**\n * React wrapper of Apache ECharts that receives the raw domain data and builds the series from it, applying the\n * default `option` values.\n * The chart is redrawn when a prop changes, so prefer giving stable `option`, `getName` and `getValue` (e.g. with\n * `useMemo`/`useCallback` or defined outside the component) to avoid needless redraws.\n */\nexport function EChart<T>({\n    data,\n    getName,\n    getValue,\n    option,\n    withVisualMap = true,\n    onEvents,\n    maps,\n    renderer,\n    style = DEFAULT_STYLE,\n    className\n}: EChartProps<T>): ReactElement {\n    const saveAsImageTitle = useKitMessages().chart.saveAsImage;\n    const finalOption = useMemo(\n        () => buildEChartOption(data, { getName, getValue }, option, withVisualMap, saveAsImageTitle),\n        [data, getName, getValue, option, withVisualMap, saveAsImageTitle]\n    );\n    const containerRef = useEChart(finalOption, onEvents, maps, renderer);\n\n    return <div ref={containerRef} style={style} className={className} />;\n}\n"],"mappings":";;;;;;;;;;;;;;AA6DA,SAAgB,OAAU,EACtB,MACA,SACA,UACA,QACA,gBAAgB,MAChB,UACA,MACA,UACA,QAAQ,eACR,aAC6B;CAC7B,MAAM,mBAAmB,eAAe,CAAC,CAAC,MAAM;CAChD,MAAM,cAAc,cACV,kBAAkB,MAAM;EAAE;EAAS;CAAS,GAAG,QAAQ,eAAe,gBAAgB,GAC5F;EAAC;EAAM;EAAS;EAAU;EAAQ;EAAe;CAAgB,CACrE;CACA,MAAM,eAAe,UAAU,aAAa,UAAU,MAAM,QAAQ;CAEpE,OAAO,oBAAC,OAAD;EAAK,KAAK;EAAqB;EAAkB;CAAY,CAAA;AACxE"}

package/dist/component/organism/EChart/buildEChartOption.d.ts

@@ -0,0 +1,40 @@
+import type { EChartsOption } from 'echarts';
+/**
+ * Value of an element of the chart. `null`/`undefined` mean an absent value, which ECharts shows as empty (e.g. a
+ * city without a computed index).
+ */
+export type EChartValue = number | null | undefined;
+/** Element of a series, in the format ECharts expects in `series[i].data`. */
+export type EChartDataItem = {
+    name: string;
+    value: EChartValue;
+};
+/**
+ * Functions that extract from a domain item what ECharts needs to show it.
+ * They are used by the {@link EChart}, so whoever uses it gives the raw data, without building the series by hand.
+ */
+export type EChartDataAccessors<T> = {
+    /** Returns the name of the element in the chart (e.g. the code of a city, which links the data to the map area). */
+    getName: (item: T) => string;
+    /** Returns the value of the element in the chart. */
+    getValue: (item: T) => EChartValue;
+};
+/**
+ * Converts the domain data to the `{ name, value }[]` format used in the ECharts series.
+ * @param data raw domain data
+ * @param accessors functions that extract the name and the value of each item
+ * @return an element `{ name, value }` for each item of `data`, in the same order
+ */
+export declare function toEChartData<T>(data: T[], { getName, getValue }: EChartDataAccessors<T>): EChartDataItem[];
+/**
+ * Builds the final `option` of a chart, applying the default values and the domain data.
+ * The attributes of `option` replace the corresponding defaults (deep merge).
+ * @param data raw domain data
+ * @param accessors functions that extract the name and the value of each item
+ * @param option options specific to the chart
+ * @param withVisualMap whether the elements should be colored according to their percentage value (0..1), with the
+ *        gradient legend of the {@link DEFAULT_VISUAL_MAP}. Use `false` in charts of absolute values.
+ * @param saveAsImageTitle title of the button that saves the chart as an image, in the language of the user
+ * @return the `option` ready to be given to the ECharts `setOption`
+ */
+export declare function buildEChartOption<T>(data: T[], accessors: EChartDataAccessors<T>, option?: EChartsOption, withVisualMap?: boolean, saveAsImageTitle?: string): EChartsOption;

package/dist/component/organism/EChart/buildEChartOption.js

@@ -0,0 +1,57 @@
+"use client";
+import { DEFAULT_OPTION, DEFAULT_VISUAL_MAP } from "./echartDefaults.js";
+import { mergeDeep } from "../../../util/ObjectUtil.js";
+// src/component/organism/EChart/buildEChartOption.ts
+/**
+* Converts the domain data to the `{ name, value }[]` format used in the ECharts series.
+* @param data raw domain data
+* @param accessors functions that extract the name and the value of each item
+* @return an element `{ name, value }` for each item of `data`, in the same order
+*/
+function toEChartData(data, { getName, getValue }) {
+	return data.map((item) => ({
+		name: getName(item),
+		value: getValue(item)
+	}));
+}
+/**
+* Fills the `data` of the series that define no data of their own. Series that already have `data` are kept as they are.
+* @param series single series or array of series, as accepted by the ECharts `option.series`
+* @param chartData data to use in the series
+* @return the series in the same format received (single object or array), or `undefined` if there are no series
+*/
+function fillSeriesData(series, chartData) {
+	const fill = (serie) => "data" in serie && serie.data !== void 0 ? serie : {
+		...serie,
+		data: chartData
+	};
+	if (series === void 0) return void 0;
+	return Array.isArray(series) ? series.map(fill) : fill(series);
+}
+/**
+* Builds the final `option` of a chart, applying the default values and the domain data.
+* The attributes of `option` replace the corresponding defaults (deep merge).
+* @param data raw domain data
+* @param accessors functions that extract the name and the value of each item
+* @param option options specific to the chart
+* @param withVisualMap whether the elements should be colored according to their percentage value (0..1), with the
+*        gradient legend of the {@link DEFAULT_VISUAL_MAP}. Use `false` in charts of absolute values.
+* @param saveAsImageTitle title of the button that saves the chart as an image, in the language of the user
+* @return the `option` ready to be given to the ECharts `setOption`
+*/
+function buildEChartOption(data, accessors, option = {}, withVisualMap = true, saveAsImageTitle) {
+	const defaultOption = saveAsImageTitle ? mergeDeep(DEFAULT_OPTION, { toolbox: { feature: { saveAsImage: { title: saveAsImageTitle } } } }) : DEFAULT_OPTION;
+	const defaults = withVisualMap ? {
+		...defaultOption,
+		visualMap: DEFAULT_VISUAL_MAP
+	} : defaultOption;
+	const mergedOption = mergeDeep(defaults, option);
+	const series = fillSeriesData(mergedOption.series, toEChartData(data, accessors));
+	return series === void 0 ? mergedOption : {
+		...mergedOption,
+		series
+	};
+}
+export { buildEChartOption, toEChartData };
+
+//# sourceMappingURL=buildEChartOption.js.map

package/dist/component/organism/EChart/buildEChartOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildEChartOption.js","names":[],"sources":["../../../../src/component/organism/EChart/buildEChartOption.ts"],"sourcesContent":["import type { EChartsOption, SeriesOption } from 'echarts';\n\nimport { DEFAULT_OPTION, DEFAULT_VISUAL_MAP } from './echartDefaults';\nimport { mergeDeep } from '../../../util/ObjectUtil';\n\n/**\n * Value of an element of the chart. `null`/`undefined` mean an absent value, which ECharts shows as empty (e.g. a\n * city without a computed index).\n */\nexport type EChartValue = number | null | undefined;\n\n/** Element of a series, in the format ECharts expects in `series[i].data`. */\nexport type EChartDataItem = { name: string; value: EChartValue };\n\n/**\n * Functions that extract from a domain item what ECharts needs to show it.\n * They are used by the {@link EChart}, so whoever uses it gives the raw data, without building the series by hand.\n */\nexport type EChartDataAccessors<T> = {\n    /** Returns the name of the element in the chart (e.g. the code of a city, which links the data to the map area). */\n    getName: (item: T) => string;\n\n    /** Returns the value of the element in the chart. */\n    getValue: (item: T) => EChartValue;\n};\n\n/**\n * Converts the domain data to the `{ name, value }[]` format used in the ECharts series.\n * @param data raw domain data\n * @param accessors functions that extract the name and the value of each item\n * @return an element `{ name, value }` for each item of `data`, in the same order\n */\nexport function toEChartData<T>(data: T[], { getName, getValue }: EChartDataAccessors<T>): EChartDataItem[] {\n    return data.map(item => ({ name: getName(item), value: getValue(item) }));\n}\n\n/**\n * Fills the `data` of the series that define no data of their own. Series that already have `data` are kept as they are.\n * @param series single series or array of series, as accepted by the ECharts `option.series`\n * @param chartData data to use in the series\n * @return the series in the same format received (single object or array), or `undefined` if there are no series\n */\nfunction fillSeriesData(series: EChartsOption['series'], chartData: EChartDataItem[]): EChartsOption['series'] {\n    const fill = (serie: SeriesOption): SeriesOption =>\n        'data' in serie && serie.data !== undefined ? serie : ({ ...serie, data: chartData } as SeriesOption);\n\n    if (series === undefined) return undefined;\n\n    return Array.isArray(series) ? series.map(fill) : fill(series);\n}\n\n/**\n * Builds the final `option` of a chart, applying the default values and the domain data.\n * The attributes of `option` replace the corresponding defaults (deep merge).\n * @param data raw domain data\n * @param accessors functions that extract the name and the value of each item\n * @param option options specific to the chart\n * @param withVisualMap whether the elements should be colored according to their percentage value (0..1), with the\n *        gradient legend of the {@link DEFAULT_VISUAL_MAP}. Use `false` in charts of absolute values.\n * @param saveAsImageTitle title of the button that saves the chart as an image, in the language of the user\n * @return the `option` ready to be given to the ECharts `setOption`\n */\nexport function buildEChartOption<T>(\n    data: T[],\n    accessors: EChartDataAccessors<T>,\n    option: EChartsOption = {},\n    withVisualMap: boolean = true,\n    saveAsImageTitle?: string\n): EChartsOption {\n    const defaultOption: EChartsOption = saveAsImageTitle\n        ? mergeDeep(DEFAULT_OPTION, { toolbox: { feature: { saveAsImage: { title: saveAsImageTitle } } } })\n        : DEFAULT_OPTION;\n    const defaults: EChartsOption = withVisualMap ? { ...defaultOption, visualMap: DEFAULT_VISUAL_MAP } : defaultOption;\n    const mergedOption = mergeDeep(defaults, option);\n    const series = fillSeriesData(mergedOption.series, toEChartData(data, accessors));\n\n    /* Without series in the option, there is nowhere to put the data: returns the option as it is, without creating\n       `series: undefined`. With series, returns a copy of the option whose series are the ones that received `data`. */\n    return series === undefined ? mergedOption : { ...mergedOption, series };\n}\n"],"mappings":";;;;;;;;;;AAgCA,SAAgB,aAAgB,MAAW,EAAE,SAAS,YAAsD;CACxG,OAAO,KAAK,KAAI,UAAS;EAAE,MAAM,QAAQ,IAAI;EAAG,OAAO,SAAS,IAAI;CAAE,EAAE;AAC5E;;;;;;;AAQA,SAAS,eAAe,QAAiC,WAAsD;CAC3G,MAAM,QAAQ,UACV,UAAU,SAAS,MAAM,SAAS,KAAA,IAAY,QAAS;EAAE,GAAG;EAAO,MAAM;CAAU;CAEvF,IAAI,WAAW,KAAA,GAAW,OAAO,KAAA;CAEjC,OAAO,MAAM,QAAQ,MAAM,IAAI,OAAO,IAAI,IAAI,IAAI,KAAK,MAAM;AACjE;;;;;;;;;;;;AAaA,SAAgB,kBACZ,MACA,WACA,SAAwB,CAAC,GACzB,gBAAyB,MACzB,kBACa;CACb,MAAM,gBAA+B,mBAC/B,UAAU,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,iBAAiB,EAAE,EAAE,EAAE,CAAC,IAChG;CACN,MAAM,WAA0B,gBAAgB;EAAE,GAAG;EAAe,WAAW;CAAmB,IAAI;CACtG,MAAM,eAAe,UAAU,UAAU,MAAM;CAC/C,MAAM,SAAS,eAAe,aAAa,QAAQ,aAAa,MAAM,SAAS,CAAC;CAIhF,OAAO,WAAW,KAAA,IAAY,eAAe;EAAE,GAAG;EAAc;CAAO;AAC3E"}

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

@@ -0,0 +1,22 @@
+import { ChartSeries } from './ChartSeries';
+import { ChartTypeId } from './ChartTypeId';
+import { CartesianChart, CartesianSeries, DataPoint } from './CartesianChart';
+/** Color of the columns with a negative value (e.g. a deficit), to set them apart from the positive ones. */
+export declare const NEGATIVE_VALUE_COLOR = "#d9480f";
+/**
+ * Grouped column chart: compares the series category by category.
+ * Suited to flows (e.g. yearly values) and to balances that may be negative (deficit/surplus): the negative columns
+ * get the {@link NEGATIVE_VALUE_COLOR}, without changing the color of the series in the legend.
+ * @author Manoel Campos
+ */
+export declare class BarChart extends CartesianChart {
+    readonly id: ChartTypeId;
+    protected seriesStyle(): CartesianSeries;
+    protected seriesData(serie: ChartSeries): DataPoint[];
+}
+/**
+ * Gives the {@link NEGATIVE_VALUE_COLOR} only to the negative values. The others keep the color of the series.
+ * @param values values of a series
+ * @return the values in the `series[i].data` format, with their own style in the negative ones
+ */
+export declare function highlightNegativeValues(values: (number | null)[]): DataPoint[];

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

@@ -0,0 +1,34 @@
+"use client";
+import { CartesianChart } from "./CartesianChart.js";
+// 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";
+/**
+* Grouped column chart: compares the series category by category.
+* Suited to flows (e.g. yearly values) and to balances that may be negative (deficit/surplus): the negative columns
+* get the {@link NEGATIVE_VALUE_COLOR}, without changing the color of the series in the legend.
+* @author Manoel Campos
+*/
+var BarChart = class extends CartesianChart {
+	id = "bar";
+	seriesStyle() {
+		return { type: "bar" };
+	}
+	seriesData(serie) {
+		return highlightNegativeValues(serie.values);
+	}
+};
+/**
+* Gives the {@link NEGATIVE_VALUE_COLOR} only to the negative values. The others keep the color of the series.
+* @param values values of a series
+* @return the values in the `series[i].data` format, with their own style in the negative ones
+*/
+function highlightNegativeValues(values) {
+	return values.map((value) => value !== null && value < 0 ? {
+		value,
+		itemStyle: { color: NEGATIVE_VALUE_COLOR }
+	} : value);
+}
+export { BarChart, NEGATIVE_VALUE_COLOR, highlightNegativeValues };
+
+//# sourceMappingURL=BarChart.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,48 @@
+import type { BarSeriesOption, EChartsOption, LineSeriesOption } from 'echarts';
+import { ChartData, ChartSeries } from './ChartSeries';
+import { ChartContext, ChartType } from './ChartType';
+import { ChartTypeId } from './ChartTypeId';
+/** Column or line series, the two formats used in the charts with axes (cartesian). */
+export type CartesianSeries = BarSeriesOption | LineSeriesOption;
+/** Value of a category in a series, in the format accepted by `series[i].data` (with or without its own style). */
+export type DataPoint = number | null | {
+    value: number;
+    itemStyle: {
+        color: string;
+    };
+};
+/**
+ * Base of the chart types with an X axis of categories (line, columns, stacked columns).
+ * It builds the panels per unit, the header and the tooltip, leaving to each type just the style of each series.
+ * @author Manoel Campos
+ */
+export declare abstract class CartesianChart implements ChartType {
+    abstract readonly id: ChartTypeId;
+    readonly singleCategory = false;
+    /** 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;
+    height(data: ChartData, context: ChartContext): number;
+    /**
+     * Defines how a series is drawn (type, stacking etc.).
+     * @param serie series to draw
+     * @param all all series of the chart, for types that depend on the whole set (e.g. stacking)
+     * @return the style of the series in the ECharts format, without name, data and axes (filled by the base)
+     */
+    protected abstract seriesStyle(serie: ChartSeries, all: ChartSeries[]): CartesianSeries;
+    /**
+     * Values of the series in the `series[i].data` format. By default, the values themselves; subclasses may give
+     * their own style to some values (e.g. negative values).
+     * @param serie series of the chart
+     * @return one value per category
+     */
+    protected seriesData(serie: ChartSeries): DataPoint[];
+    /**
+     * Creates the complete ECharts series: style of the type, name, values, axes of the panel and tooltip format.
+     * @param serie series of the chart
+     * @param all all series of the chart
+     * @param panelIndex index of the panel (and of the axes) of the unit of the series
+     * @return the series in the ECharts format
+     */
+    private buildSeries;
+}

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

@@ -0,0 +1,63 @@
+"use client";
+import { chartLocale, chartMessages } from "./ChartTexts.js";
+import { buildPanelAxes, groupByUnit, panelsHeight } from "./UnitPanels.js";
+import { buildChartHeader, legendExtraHeight, tooltipFormatter } from "./ChartHeader.js";
+// src/component/organism/EChart/chart/CartesianChart.ts
+/**
+* Base of the chart types with an X axis of categories (line, columns, stacked columns).
+* It builds the panels per unit, the header and the tooltip, leaving to each type just the style of each series.
+* @author Manoel Campos
+*/
+var CartesianChart = class {
+	singleCategory = false;
+	/** Types with axes work for any set of series, except the ones that restrict it (see the subclasses). */
+	isAvailable(series) {
+		return series.length > 0;
+	}
+	buildOption(data, context) {
+		const panels = groupByUnit(data.series);
+		const series = panels.flatMap((panel, index) => panel.series.map((serie) => this.buildSeries(serie, data.series, index)));
+		const names = data.series.map((serie) => serie.name);
+		const extraTop = legendExtraHeight(names, context.width);
+		return {
+			...buildChartHeader(context.title, names, chartMessages(context)),
+			tooltip: { trigger: "axis" },
+			...buildPanelAxes(panels, data.categories, extraTop, chartLocale(context)),
+			series
+		};
+	}
+	height(data, context) {
+		const extraTop = legendExtraHeight(data.series.map((serie) => serie.name), context.width);
+		return panelsHeight(groupByUnit(data.series).length, data.categories.length, extraTop);
+	}
+	/**
+	* Values of the series in the `series[i].data` format. By default, the values themselves; subclasses may give
+	* their own style to some values (e.g. negative values).
+	* @param serie series of the chart
+	* @return one value per category
+	*/
+	seriesData(serie) {
+		return serie.values;
+	}
+	/**
+	* Creates the complete ECharts series: style of the type, name, values, axes of the panel and tooltip format.
+	* @param serie series of the chart
+	* @param all all series of the chart
+	* @param panelIndex index of the panel (and of the axes) of the unit of the series
+	* @return the series in the ECharts format
+	*/
+	buildSeries(serie, all, panelIndex) {
+		return {
+			...this.seriesStyle(serie, all),
+			id: serie.id,
+			name: serie.name,
+			data: this.seriesData(serie),
+			xAxisIndex: panelIndex,
+			yAxisIndex: panelIndex,
+			tooltip: { valueFormatter: tooltipFormatter(serie.unit) }
+		};
+	}
+};
+export { CartesianChart };
+
+//# sourceMappingURL=CartesianChart.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,36 @@
+import type { EChartsOption } from 'echarts';
+import { ChartMessages } from '../../../../i18n/KitMessages';
+import { ChartUnit } from './ChartSeries';
+/** Height of each legend row, including the space until the next one (px). */
+export declare const LEGEND_ROW_HEIGHT: number;
+/**
+ * Builds the title, the legend and the image export button.
+ * The title also appears in the saved image, so it has context outside the screen.
+ * @param title title of the chart
+ * @param names names of the series, shown in the legend
+ * @param messages texts of the chart; defaults to the one of the default locales
+ * @return the parts of the `option` of the header
+ */
+export declare function buildChartHeader(title: string, names: string[], messages?: ChartMessages): Pick<EChartsOption, 'title' | 'legend' | 'toolbox'>;
+/**
+ * Creates the function that formats a value in the tooltip with the unit of the series.
+ * @param unit unit of the series
+ * @return a function that formats the value received from ECharts (or "-" when the category has no value)
+ */
+export declare function tooltipFormatter(unit: ChartUnit): (value: unknown) => string;
+/**
+ * Computes the extra height the legend takes when it wraps in more than one row, so the chart is moved down and is
+ * not drawn under it.
+ * @param names names of the series, shown in the legend
+ * @param width width of the chart (px); absent while unknown, considering the legend in one row
+ * @return the height of the legend rows beyond the first one (px)
+ */
+export declare function legendExtraHeight(names: string[], width?: number): number;
+/**
+ * Estimates in how many rows the legend wraps, placing the items as ECharts does: from left to right, moving to the
+ * next row when the next item does not fit.
+ * @param names names of the series, shown in the legend
+ * @param width width of the chart (px); absent while unknown
+ * @return the number of rows of the legend (at least 1)
+ */
+export declare function legendRows(names: string[], width?: number): number;