@mittwald/flow-react-components 0.2.0-alpha.796 → 0.2.0-alpha.798
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/dist/assets/doc-properties.json +878 -821
- package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipContent.mjs +15 -2
- package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipContent.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.mjs +12 -2
- package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.mjs.map +1 -1
- package/dist/types/components/CartesianChart/components/ChartTooltip/ChartTooltip.d.ts +6 -0
- package/dist/types/components/CartesianChart/components/ChartTooltip/ChartTooltip.d.ts.map +1 -1
- package/dist/types/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.d.ts +2 -1
- package/dist/types/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.d.ts.map +1 -1
- package/dist/types/components/CartesianChart/stories/Default.stories.d.ts +1 -0
- package/dist/types/components/CartesianChart/stories/Default.stories.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartTooltip.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import React, { type FC, Suspense } from \"react\";\nimport { Tooltip, type TooltipProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { type TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport { TooltipContent } from \"@/components/CartesianChart/components/ChartTooltip/TooltipContent\";\nimport clsx from \"clsx\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport LoadingSpinnerView from \"@/views/LoadingSpinnerView\";\n\nexport type TooltipLineFormatter = (\n value: TooltipPayloadItem[\"value\"],\n name: TooltipPayloadItem[\"dataKey\"],\n index: number,\n unit?: TooltipPayloadItem[\"unit\"],\n) => Promise<string> | string;\n\nexport type TooltipHeadingFormatter = (\n title: string | number | undefined,\n) => Promise<string> | string;\n\nexport interface WithTooltipFormatters {\n /**\n * A formatter function for the lines in the tooltip. Can be used for purposes\n * like translations.\n */\n formatter?: TooltipLineFormatter;\n /**\n * A formatter function for the heading of the tooltip. Can be used for\n * purposes like translations.\n */\n headingFormatter?: TooltipHeadingFormatter;\n}\n\nexport interface ChartTooltipProps\n extends\n Pick<\n TooltipProps<ValueType, NameType>,\n \"wrapperClassName\" | \"allowEscapeViewBox\"\n >,\n WithTooltipFormatters {\n /** Show progress bar for stacked areas @default \"true\" */\n showProgressBar?: boolean;\n}\n\n/** @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n const {\n headingFormatter,\n formatter,\n showProgressBar = true,\n ...rest\n } = props;\n\n return (\n <Tooltip\n {...rest}\n cursor={false}\n content={(props) => {\n if (!props.active || !props.payload || props.payload.length === 0) {\n return null;\n }\n\n const className = clsx(props.wrapperClassName, styles.tooltip);\n return (\n <div className={className}>\n <Suspense fallback={<LoadingSpinnerView />}>\n <TooltipContent\n {...props}\n headingFormatter={headingFormatter}\n formatter={formatter}\n showProgressBar={showProgressBar}\n />\n </Suspense>\n </div>\n );\n }}\n />\n );\n};\n\nexport default ChartTooltip;\n"],"names":["props"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ChartTooltip.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import React, { type FC, Suspense } from \"react\";\nimport { Tooltip, type TooltipProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { type TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport { TooltipContent } from \"@/components/CartesianChart/components/ChartTooltip/TooltipContent\";\nimport clsx from \"clsx\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport LoadingSpinnerView from \"@/views/LoadingSpinnerView\";\n\nexport type TooltipLineFormatter = (\n value: TooltipPayloadItem[\"value\"],\n name: TooltipPayloadItem[\"dataKey\"],\n index: number,\n unit?: TooltipPayloadItem[\"unit\"],\n) => Promise<string> | string;\n\nexport type TooltipHeadingFormatter = (\n title: string | number | undefined,\n) => Promise<string> | string;\n\nexport type TooltipLProgressBarFormatter = (\n value: TooltipPayloadItem[\"value\"],\n unit?: TooltipPayloadItem[\"unit\"],\n) => Promise<string> | string;\n\nexport interface WithTooltipFormatters {\n /**\n * A formatter function for the lines in the tooltip. Can be used for purposes\n * like translations.\n */\n formatter?: TooltipLineFormatter;\n /**\n * A formatter function for the heading of the tooltip. Can be used for\n * purposes like translations.\n */\n headingFormatter?: TooltipHeadingFormatter;\n /**\n * A formatter function for the progressBar of the tooltip. Can be used for\n * purposes like translations.\n */\n progressBarFormatter?: TooltipLProgressBarFormatter;\n}\n\nexport interface ChartTooltipProps\n extends\n Pick<\n TooltipProps<ValueType, NameType>,\n \"wrapperClassName\" | \"allowEscapeViewBox\"\n >,\n WithTooltipFormatters {\n /** Show progress bar for stacked areas @default \"true\" */\n showProgressBar?: boolean;\n}\n\n/** @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n const {\n headingFormatter,\n formatter,\n showProgressBar = true,\n ...rest\n } = props;\n\n return (\n <Tooltip\n {...rest}\n cursor={false}\n content={(props) => {\n if (!props.active || !props.payload || props.payload.length === 0) {\n return null;\n }\n\n const className = clsx(props.wrapperClassName, styles.tooltip);\n return (\n <div className={className}>\n <Suspense fallback={<LoadingSpinnerView />}>\n <TooltipContent\n {...props}\n headingFormatter={headingFormatter}\n formatter={formatter}\n showProgressBar={showProgressBar}\n />\n </Suspense>\n </div>\n );\n }}\n />\n );\n};\n\nexport default ChartTooltip;\n"],"names":["props"],"mappings":";;;;;;;;;;;AA0DO,MAAM,YAAA,GAAsC,CAAC,KAAA,KAAU;AAC5D,EAAA,MAAM;AAAA,IACJ,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA,GAAkB,IAAA;AAAA,IAClB,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,MAAA,EAAQ,KAAA;AAAA,MACR,OAAA,EAAS,CAACA,MAAAA,KAAU;AAClB,QAAA,IAAI,CAACA,OAAM,MAAA,IAAU,CAACA,OAAM,OAAA,IAAWA,MAAAA,CAAM,OAAA,CAAQ,MAAA,KAAW,CAAA,EAAG;AACjE,UAAA,OAAO,IAAA;AAAA,QACT;AAEA,QAAA,MAAM,SAAA,GAAY,IAAA,CAAKA,MAAAA,CAAM,gBAAA,EAAkB,OAAO,OAAO,CAAA;AAC7D,QAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EACH,QAAA,kBAAA,GAAA,CAAC,YAAS,QAAA,kBAAU,GAAA,CAAC,sBAAmB,CAAA,EACtC,QAAA,kBAAA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACE,GAAGA,MAAAA;AAAA,YACJ,gBAAA;AAAA,YACA,SAAA;AAAA,YACA;AAAA;AAAA,WAEJ,CAAA,EACF,CAAA;AAAA,MAEJ;AAAA;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -10,7 +10,14 @@ import { TooltipProgressBar } from './TooltipProgressBar.mjs';
|
|
|
10
10
|
import { Flex } from '../../../Flex/Flex.mjs';
|
|
11
11
|
|
|
12
12
|
const TooltipContent = (props) => {
|
|
13
|
-
const {
|
|
13
|
+
const {
|
|
14
|
+
headingFormatter,
|
|
15
|
+
formatter,
|
|
16
|
+
progressBarFormatter,
|
|
17
|
+
label,
|
|
18
|
+
payload,
|
|
19
|
+
showProgressBar
|
|
20
|
+
} = props;
|
|
14
21
|
const formattedHeading = usePromise(
|
|
15
22
|
async (label2, formatter2) => {
|
|
16
23
|
if (!formatter2) {
|
|
@@ -26,7 +33,13 @@ const TooltipContent = (props) => {
|
|
|
26
33
|
});
|
|
27
34
|
return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "s", children: [
|
|
28
35
|
/* @__PURE__ */ jsx(Heading, { level: 4, children: formattedHeading }),
|
|
29
|
-
showProgressBar && /* @__PURE__ */ jsx(
|
|
36
|
+
showProgressBar && /* @__PURE__ */ jsx(
|
|
37
|
+
TooltipProgressBar,
|
|
38
|
+
{
|
|
39
|
+
progressBarFormatter,
|
|
40
|
+
items: filteredPayload
|
|
41
|
+
}
|
|
42
|
+
),
|
|
30
43
|
/* @__PURE__ */ jsx("div", { children: items })
|
|
31
44
|
] });
|
|
32
45
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipContent.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipContent.tsx"],"sourcesContent":["import React, { type FC, Suspense } from \"react\";\nimport type { TooltipContentProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport Heading from \"@/components/Heading\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart\";\nimport { TooltipLegendItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport SkeletonTextView from \"@/views/SkeletonTextView\";\nimport { TooltipProgressBar } from \"@/components/CartesianChart/components/ChartTooltip/TooltipProgressBar\";\nimport { Flex } from \"@/components/Flex\";\n\n/** @internal */\nexport const TooltipContent: FC<\n WithTooltipFormatters &\n Omit<TooltipContentProps<ValueType, NameType>, \"formatter\"> & {\n showProgressBar?: boolean;\n }\n> = (props) => {\n const {
|
|
1
|
+
{"version":3,"file":"TooltipContent.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipContent.tsx"],"sourcesContent":["import React, { type FC, Suspense } from \"react\";\nimport type { TooltipContentProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\nimport Heading from \"@/components/Heading\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart\";\nimport { TooltipLegendItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport SkeletonTextView from \"@/views/SkeletonTextView\";\nimport { TooltipProgressBar } from \"@/components/CartesianChart/components/ChartTooltip/TooltipProgressBar\";\nimport { Flex } from \"@/components/Flex\";\n\n/** @internal */\nexport const TooltipContent: FC<\n WithTooltipFormatters &\n Omit<TooltipContentProps<ValueType, NameType>, \"formatter\"> & {\n showProgressBar?: boolean;\n }\n> = (props) => {\n const {\n headingFormatter,\n formatter,\n progressBarFormatter,\n label,\n payload,\n showProgressBar,\n } = props;\n\n const formattedHeading = usePromise(\n async (label, formatter) => {\n if (!formatter) {\n return label;\n }\n\n return formatter(label);\n },\n [label, headingFormatter] as const,\n );\n\n const filteredPayload = payload.filter((item) => item.fill !== \"none\");\n\n const items = filteredPayload.map((item, index) => {\n return (\n <Suspense key={item.dataKey} fallback={<SkeletonTextView />}>\n <TooltipLegendItem formatter={formatter} item={item} index={index} />\n </Suspense>\n );\n });\n\n return (\n <Flex direction=\"column\" gap=\"s\">\n <Heading level={4}>{formattedHeading}</Heading>\n {showProgressBar && (\n <TooltipProgressBar\n progressBarFormatter={progressBarFormatter}\n items={filteredPayload}\n />\n )}\n <div>{items}</div>\n </Flex>\n );\n};\n"],"names":["label","formatter"],"mappings":";;;;;;;;;AAeO,MAAM,cAAA,GAKT,CAAC,KAAA,KAAU;AACb,EAAA,MAAM;AAAA,IACJ,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,oBAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,gBAAA,GAAmB,UAAA;AAAA,IACvB,OAAOA,QAAOC,UAAAA,KAAc;AAC1B,MAAA,IAAI,CAACA,UAAAA,EAAW;AACd,QAAA,OAAOD,MAAAA;AAAA,MACT;AAEA,MAAA,OAAOC,WAAUD,MAAK,CAAA;AAAA,IACxB,CAAA;AAAA,IACA,CAAC,OAAO,gBAAgB;AAAA,GAC1B;AAEA,EAAA,MAAM,kBAAkB,OAAA,CAAQ,MAAA,CAAO,CAAC,IAAA,KAAS,IAAA,CAAK,SAAS,MAAM,CAAA;AAErE,EAAA,MAAM,KAAA,GAAQ,eAAA,CAAgB,GAAA,CAAI,CAAC,MAAM,KAAA,KAAU;AACjD,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAA4B,QAAA,kBAAU,GAAA,CAAC,gBAAA,EAAA,EAAiB,CAAA,EACvD,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,SAAA,EAAsB,IAAA,EAAY,KAAA,EAAc,CAAA,EAAA,EADtD,KAAK,OAEpB,CAAA;AAAA,EAEJ,CAAC,CAAA;AAED,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,QAAA,EAAS,KAAI,GAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,EAAI,QAAA,EAAA,gBAAA,EAAiB,CAAA;AAAA,IACpC,eAAA,oBACC,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,oBAAA;AAAA,QACA,KAAA,EAAO;AAAA;AAAA,KACT;AAAA,oBAEF,GAAA,CAAC,SAAK,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACd,CAAA;AAEJ;;;;"}
|
|
@@ -6,9 +6,10 @@ import { Label } from '../../../Label/Label.mjs';
|
|
|
6
6
|
import { useLocalizedStringFormatter } from 'react-aria';
|
|
7
7
|
import locales from '../../../../../../../_virtual/_.locale.json@774f50b2495c87d6d13911bcd596e720.mjs';
|
|
8
8
|
import styles from './ChartTooltip.module.scss.mjs';
|
|
9
|
+
import { usePromise } from '@mittwald/react-use-promise';
|
|
9
10
|
|
|
10
11
|
const TooltipProgressBar = (props) => {
|
|
11
|
-
const { items } = props;
|
|
12
|
+
const { items, progressBarFormatter } = props;
|
|
12
13
|
const areaItems = items.filter(
|
|
13
14
|
(item) => item.fill !== "none" && item.graphicalItemId.includes("area")
|
|
14
15
|
);
|
|
@@ -20,6 +21,15 @@ const TooltipProgressBar = (props) => {
|
|
|
20
21
|
color: i.fill
|
|
21
22
|
}));
|
|
22
23
|
const total = segments.reduce((sum, segment) => sum + segment.value, 0);
|
|
24
|
+
const formattedLabel = usePromise(
|
|
25
|
+
async (value, unit2, formatter) => {
|
|
26
|
+
if (!formatter) {
|
|
27
|
+
return `${value}${unit2 ? ` ${unit2}` : ""}`;
|
|
28
|
+
}
|
|
29
|
+
return formatter(value, unit2);
|
|
30
|
+
},
|
|
31
|
+
[total, unit, progressBarFormatter]
|
|
32
|
+
);
|
|
23
33
|
if (areaItems.length < 2) {
|
|
24
34
|
return null;
|
|
25
35
|
}
|
|
@@ -29,7 +39,7 @@ const TooltipProgressBar = (props) => {
|
|
|
29
39
|
className: styles.progressBar,
|
|
30
40
|
showLegend: false,
|
|
31
41
|
segments,
|
|
32
|
-
valueLabel:
|
|
42
|
+
valueLabel: formattedLabel,
|
|
33
43
|
maxValue: unit === "%" ? void 0 : total,
|
|
34
44
|
children: /* @__PURE__ */ jsx(Label, { children: stringFormatter.format("cartesianChart.total") })
|
|
35
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipProgressBar.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { ProgressBar } from \"@/components/ProgressBar\";\nimport { Label } from \"@/components/Label\";\nimport type { TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport styles from \"./ChartTooltip.module.scss\";\n\ninterface TooltipProgressBarProps {\n items: TooltipPayloadItem[];\n}\n\nexport const TooltipProgressBar: FC<TooltipProgressBarProps> = (props) => {\n const { items } = props;\n\n const areaItems = items.filter(\n (item) => item.fill !== \"none\" && item.graphicalItemId.includes(\"area\"),\n );\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const unit = areaItems[0]?.unit;\n\n const segments = areaItems.map((i) => ({\n title: i.dataKey as string,\n value: i.value as number,\n color: i.fill,\n }));\n\n const total = segments.reduce((sum, segment) => sum + segment.value, 0);\n\n if (areaItems.length < 2) {\n return null;\n }\n\n return (\n <ProgressBar\n className={styles.progressBar}\n showLegend={false}\n segments={segments}\n valueLabel={
|
|
1
|
+
{"version":3,"file":"TooltipProgressBar.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { ProgressBar } from \"@/components/ProgressBar\";\nimport { Label } from \"@/components/Label\";\nimport type { TooltipPayloadItem } from \"@/components/CartesianChart/components/ChartTooltip/TooltipLegendItem\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../../locales/*.locale.json\";\nimport styles from \"./ChartTooltip.module.scss\";\nimport type { WithTooltipFormatters } from \"@/components/CartesianChart\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\n\ninterface TooltipProgressBarProps extends Pick<\n WithTooltipFormatters,\n \"progressBarFormatter\"\n> {\n items: TooltipPayloadItem[];\n}\n\nexport const TooltipProgressBar: FC<TooltipProgressBarProps> = (props) => {\n const { items, progressBarFormatter } = props;\n\n const areaItems = items.filter(\n (item) => item.fill !== \"none\" && item.graphicalItemId.includes(\"area\"),\n );\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const unit = areaItems[0]?.unit;\n\n const segments = areaItems.map((i) => ({\n title: i.dataKey as string,\n value: i.value as number,\n color: i.fill,\n }));\n\n const total = segments.reduce((sum, segment) => sum + segment.value, 0);\n\n const formattedLabel = usePromise(\n async (value, unit, formatter) => {\n if (!formatter) {\n return `${value}${unit ? ` ${unit}` : \"\"}`;\n }\n\n return formatter(value, unit);\n },\n [total, unit, progressBarFormatter] as const,\n );\n\n if (areaItems.length < 2) {\n return null;\n }\n\n return (\n <ProgressBar\n className={styles.progressBar}\n showLegend={false}\n segments={segments}\n valueLabel={formattedLabel}\n maxValue={unit === \"%\" ? undefined : total}\n >\n <Label>{stringFormatter.format(\"cartesianChart.total\")}</Label>\n </ProgressBar>\n );\n};\n"],"names":["unit"],"mappings":";;;;;;;;AAiBO,MAAM,kBAAA,GAAkD,CAAC,KAAA,KAAU;AACxE,EAAA,MAAM,EAAE,KAAA,EAAO,oBAAA,EAAqB,GAAI,KAAA;AAExC,EAAA,MAAM,YAAY,KAAA,CAAM,MAAA;AAAA,IACtB,CAAC,SAAS,IAAA,CAAK,IAAA,KAAS,UAAU,IAAA,CAAK,eAAA,CAAgB,SAAS,MAAM;AAAA,GACxE;AAEA,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,IAAA,GAAO,SAAA,CAAU,CAAC,CAAA,EAAG,IAAA;AAE3B,EAAA,MAAM,QAAA,GAAW,SAAA,CAAU,GAAA,CAAI,CAAC,CAAA,MAAO;AAAA,IACrC,OAAO,CAAA,CAAE,OAAA;AAAA,IACT,OAAO,CAAA,CAAE,KAAA;AAAA,IACT,OAAO,CAAA,CAAE;AAAA,GACX,CAAE,CAAA;AAEF,EAAA,MAAM,KAAA,GAAQ,SAAS,MAAA,CAAO,CAAC,KAAK,OAAA,KAAY,GAAA,GAAM,OAAA,CAAQ,KAAA,EAAO,CAAC,CAAA;AAEtE,EAAA,MAAM,cAAA,GAAiB,UAAA;AAAA,IACrB,OAAO,KAAA,EAAOA,KAAAA,EAAM,SAAA,KAAc;AAChC,MAAA,IAAI,CAAC,SAAA,EAAW;AACd,QAAA,OAAO,GAAG,KAAK,CAAA,EAAGA,QAAO,CAAA,CAAA,EAAIA,KAAI,KAAK,EAAE,CAAA,CAAA;AAAA,MAC1C;AAEA,MAAA,OAAO,SAAA,CAAU,OAAOA,KAAI,CAAA;AAAA,IAC9B,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,IAAA,EAAM,oBAAoB;AAAA,GACpC;AAEA,EAAA,IAAI,SAAA,CAAU,SAAS,CAAA,EAAG;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAA,CAAO,WAAA;AAAA,MAClB,UAAA,EAAY,KAAA;AAAA,MACZ,QAAA;AAAA,MACA,UAAA,EAAY,cAAA;AAAA,MACZ,QAAA,EAAU,IAAA,KAAS,GAAA,GAAM,MAAA,GAAY,KAAA;AAAA,MAErC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAO,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,sBAAsB,CAAA,EAAE;AAAA;AAAA,GACzD;AAEJ;;;;"}
|
|
@@ -4,6 +4,7 @@ import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipCont
|
|
|
4
4
|
import { TooltipPayloadItem } from './TooltipLegendItem';
|
|
5
5
|
export type TooltipLineFormatter = (value: TooltipPayloadItem["value"], name: TooltipPayloadItem["dataKey"], index: number, unit?: TooltipPayloadItem["unit"]) => Promise<string> | string;
|
|
6
6
|
export type TooltipHeadingFormatter = (title: string | number | undefined) => Promise<string> | string;
|
|
7
|
+
export type TooltipLProgressBarFormatter = (value: TooltipPayloadItem["value"], unit?: TooltipPayloadItem["unit"]) => Promise<string> | string;
|
|
7
8
|
export interface WithTooltipFormatters {
|
|
8
9
|
/**
|
|
9
10
|
* A formatter function for the lines in the tooltip. Can be used for purposes
|
|
@@ -15,6 +16,11 @@ export interface WithTooltipFormatters {
|
|
|
15
16
|
* purposes like translations.
|
|
16
17
|
*/
|
|
17
18
|
headingFormatter?: TooltipHeadingFormatter;
|
|
19
|
+
/**
|
|
20
|
+
* A formatter function for the progressBar of the tooltip. Can be used for
|
|
21
|
+
* purposes like translations.
|
|
22
|
+
*/
|
|
23
|
+
progressBarFormatter?: TooltipLProgressBarFormatter;
|
|
18
24
|
}
|
|
19
25
|
export interface ChartTooltipProps extends Pick<TooltipProps<ValueType, NameType>, "wrapperClassName" | "allowEscapeViewBox">, WithTooltipFormatters {
|
|
20
26
|
/** Show progress bar for stacked areas @default "true" */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AACjD,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,KAAK,EACV,QAAQ,EACR,SAAS,EACV,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,uEAAuE,CAAC;AAMhH,MAAM,MAAM,oBAAoB,GAAG,CACjC,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,EAClC,IAAI,EAAE,kBAAkB,CAAC,SAAS,CAAC,EACnC,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,KAC9B,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;AAE9B,MAAM,MAAM,uBAAuB,GAAG,CACpC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAC/B,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;AAE9B,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AACjD,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,KAAK,EACV,QAAQ,EACR,SAAS,EACV,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,uEAAuE,CAAC;AAMhH,MAAM,MAAM,oBAAoB,GAAG,CACjC,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,EAClC,IAAI,EAAE,kBAAkB,CAAC,SAAS,CAAC,EACnC,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,KAC9B,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;AAE9B,MAAM,MAAM,uBAAuB,GAAG,CACpC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAC/B,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;AAE9B,MAAM,MAAM,4BAA4B,GAAG,CACzC,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,EAClC,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,KAC9B,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;AAE9B,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,4BAA4B,CAAC;CACrD;AAED,MAAM,WAAW,iBACf,SACE,IAAI,CACF,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC,EACjC,kBAAkB,GAAG,oBAAoB,CAC1C,EACD,qBAAqB;IACvB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAwB;AACxB,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAiC9C,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
package/dist/types/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { TooltipPayloadItem } from './TooltipLegendItem';
|
|
3
|
-
|
|
3
|
+
import { WithTooltipFormatters } from '../..';
|
|
4
|
+
interface TooltipProgressBarProps extends Pick<WithTooltipFormatters, "progressBarFormatter"> {
|
|
4
5
|
items: TooltipPayloadItem[];
|
|
5
6
|
}
|
|
6
7
|
export declare const TooltipProgressBar: FC<TooltipProgressBarProps>;
|
package/dist/types/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipProgressBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uEAAuE,CAAC;
|
|
1
|
+
{"version":3,"file":"TooltipProgressBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uEAAuE,CAAC;AAIhH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAGzE,UAAU,uBAAwB,SAAQ,IAAI,CAC5C,qBAAqB,EACrB,sBAAsB,CACvB;IACC,KAAK,EAAE,kBAAkB,EAAE,CAAC;CAC7B;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA6C1D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/CartesianChart/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAyD/C,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAUrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyB5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsB3B,CAAC;AA8BF,eAAO,MAAM,QAAQ,EAAE,KAuBtB,CAAC"}
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/CartesianChart/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAyD/C,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAUrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyB5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAsB3B,CAAC;AA8BF,eAAO,MAAM,QAAQ,EAAE,KAuBtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAyClC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.798",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -60,9 +60,9 @@
|
|
|
60
60
|
"@codemirror/lint": "^6.9.5",
|
|
61
61
|
"@internationalized/string": "^3.2.7",
|
|
62
62
|
"@lezer/highlight": "^1.2.3",
|
|
63
|
-
"@mittwald/flow-icons": "0.2.0-alpha.
|
|
63
|
+
"@mittwald/flow-icons": "0.2.0-alpha.798",
|
|
64
64
|
"@mittwald/password-tools-js": "3.0.0-alpha.18",
|
|
65
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
65
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.798",
|
|
66
66
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
67
67
|
"@react-aria/form": "^3.1.3",
|
|
68
68
|
"@react-aria/i18n": "^3.12.16",
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
"@lezer/generator": "^1.8.0",
|
|
117
117
|
"@lezer/lr": "^1.4.8",
|
|
118
118
|
"@mittwald/flow-core": "",
|
|
119
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
119
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.798",
|
|
120
120
|
"@mittwald/flow-icons-base": "",
|
|
121
121
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
122
122
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
},
|
|
170
170
|
"peerDependencies": {
|
|
171
171
|
"@internationalized/date": "^3.10.0",
|
|
172
|
-
"@mittwald/flow-icons-pro": "0.2.0-alpha.
|
|
172
|
+
"@mittwald/flow-icons-pro": "0.2.0-alpha.797",
|
|
173
173
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
174
174
|
"next": "*",
|
|
175
175
|
"react": "^19.2.0",
|
|
@@ -190,5 +190,5 @@
|
|
|
190
190
|
"optional": true
|
|
191
191
|
}
|
|
192
192
|
},
|
|
193
|
-
"gitHead": "
|
|
193
|
+
"gitHead": "41e4014ca15949c350017796c33a9e43d7984c4a"
|
|
194
194
|
}
|