@mittwald/flow-react-components 0.2.0-alpha.779 → 0.2.0-alpha.780
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 +6 -0
- package/dist/assets/doc-properties.json +1414 -1350
- package/dist/css/all.css +1 -1
- package/dist/js/_virtual/_.locale.json@774f50b2495c87d6d13911bcd596e720.mjs +8 -0
- package/dist/js/_virtual/_.locale.json@774f50b2495c87d6d13911bcd596e720.mjs.map +1 -0
- package/dist/js/flr-universal.mjs +2 -2
- package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.mjs +8 -2
- 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/ChartTooltip.module.scss.mjs +4 -2
- package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.module.scss.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipContent.mjs +9 -5
- 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/TooltipLegendItem.mjs +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.mjs +40 -0
- package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.mjs.map +1 -0
- package/dist/js/packages/components/src/components/Label/Label.mjs +4 -4
- package/dist/js/packages/components/src/components/Label/Label.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Label/Label.module.scss.mjs +2 -2
- package/dist/js/packages/components/src/components/ProgressBar/ProgressBar.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarBar.mjs +16 -12
- package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarBar.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Switch/Switch.mjs +2 -2
- package/dist/js/packages/components/src/components/Switch/Switch.mjs.map +1 -1
- package/dist/types/components/CartesianChart/components/ChartTooltip/ChartTooltip.d.ts +2 -0
- package/dist/types/components/CartesianChart/components/ChartTooltip/ChartTooltip.d.ts.map +1 -1
- package/dist/types/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.d.ts +8 -0
- package/dist/types/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.d.ts.map +1 -0
- package/dist/types/components/ProgressBar/ProgressBar.d.ts +2 -2
- package/dist/types/components/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/types/components/ProgressBar/components/ProgressBarBar.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_.locale.json@774f50b2495c87d6d13911bcd596e720.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -162,6 +162,8 @@ import './packages/components/src/components/Text/Text.mjs';
|
|
|
162
162
|
import '@mittwald/react-use-promise';
|
|
163
163
|
import './packages/components/src/components/Heading/Heading.mjs';
|
|
164
164
|
import './packages/components/src/views/SkeletonTextView.mjs';
|
|
165
|
+
import './packages/components/src/components/ProgressBar/ProgressBar.mjs';
|
|
166
|
+
import './packages/components/src/components/Label/Label.mjs';
|
|
165
167
|
import './packages/components/src/views/LoadingSpinnerView.mjs';
|
|
166
168
|
import './packages/components/src/components/Checkbox/Checkbox.mjs';
|
|
167
169
|
import './packages/components/src/components/CheckboxButton/CheckboxButton.mjs';
|
|
@@ -197,7 +199,6 @@ import './packages/components/src/components/Image/Image.mjs';
|
|
|
197
199
|
import 'react-easy-crop';
|
|
198
200
|
import './packages/components/src/components/Slider/Slider.mjs';
|
|
199
201
|
import './packages/components/src/components/Initials/Initials.mjs';
|
|
200
|
-
import './packages/components/src/components/Label/Label.mjs';
|
|
201
202
|
import './packages/components/src/components/LayoutCard/LayoutCard.mjs';
|
|
202
203
|
export { LightBoxTrigger } from './packages/components/src/components/LightBox/components/LightBoxTrigger/LightBoxTrigger.mjs';
|
|
203
204
|
export { LightBox } from './packages/components/src/components/LightBox/LightBox.mjs';
|
|
@@ -232,7 +233,6 @@ import './packages/components/src/components/OverlayTrigger/components/MenuTrigg
|
|
|
232
233
|
import './packages/components/src/components/PasswordCreationField/PasswordCreationField.mjs';
|
|
233
234
|
export { PopoverTrigger } from './packages/components/src/components/Popover/components/PopoverTrigger/PopoverTrigger.mjs';
|
|
234
235
|
export { Popover } from './packages/components/src/components/Popover/Popover.mjs';
|
|
235
|
-
import './packages/components/src/components/ProgressBar/ProgressBar.mjs';
|
|
236
236
|
import './packages/components/src/components/RadioGroup/RadioGroup.mjs';
|
|
237
237
|
import './packages/components/src/components/RadioGroup/components/Radio/Radio.mjs';
|
|
238
238
|
import './packages/components/src/components/RadioGroup/components/RadioButton/RadioButton.mjs';
|
|
@@ -12,7 +12,12 @@ import styles from './ChartTooltip.module.scss.mjs';
|
|
|
12
12
|
import LoadingSpinnerView from '../../../../views/LoadingSpinnerView.mjs';
|
|
13
13
|
|
|
14
14
|
const ChartTooltip = (props) => {
|
|
15
|
-
const {
|
|
15
|
+
const {
|
|
16
|
+
headingFormatter,
|
|
17
|
+
formatter,
|
|
18
|
+
showProgressBar = true,
|
|
19
|
+
...rest
|
|
20
|
+
} = props;
|
|
16
21
|
return /* @__PURE__ */ jsx(
|
|
17
22
|
Tooltip,
|
|
18
23
|
{
|
|
@@ -28,7 +33,8 @@ const ChartTooltip = (props) => {
|
|
|
28
33
|
{
|
|
29
34
|
...props2,
|
|
30
35
|
headingFormatter,
|
|
31
|
-
formatter
|
|
36
|
+
formatter,
|
|
37
|
+
showProgressBar
|
|
32
38
|
}
|
|
33
39
|
) }) });
|
|
34
40
|
}
|
|
@@ -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\n/** @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n const {
|
|
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":";;;;;;;;;;;AAgDO,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;;;;"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
const tooltip = "flow--cartesian-chart--chart-tooltip--tooltip";
|
|
4
|
+
const progressBar = "flow--cartesian-chart--chart-tooltip--progress-bar";
|
|
4
5
|
const styles = {
|
|
5
|
-
tooltip: tooltip
|
|
6
|
+
tooltip: tooltip,
|
|
7
|
+
progressBar: progressBar
|
|
6
8
|
};
|
|
7
9
|
|
|
8
|
-
export { styles as default, tooltip };
|
|
10
|
+
export { styles as default, progressBar, tooltip };
|
|
9
11
|
//# sourceMappingURL=ChartTooltip.module.scss.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartTooltip.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ChartTooltip.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import { jsx, jsxs
|
|
3
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
4
|
import { Suspense } from 'react';
|
|
5
5
|
import { usePromise } from '@mittwald/react-use-promise';
|
|
6
6
|
import { Heading } from '../../../Heading/Heading.mjs';
|
|
7
7
|
import { TooltipLegendItem } from './TooltipLegendItem.mjs';
|
|
8
8
|
import SkeletonTextView from '../../../../views/SkeletonTextView.mjs';
|
|
9
|
+
import { TooltipProgressBar } from './TooltipProgressBar.mjs';
|
|
10
|
+
import { Flex } from '../../../Flex/Flex.mjs';
|
|
9
11
|
|
|
10
12
|
const TooltipContent = (props) => {
|
|
11
|
-
const { headingFormatter, formatter, label, payload } = props;
|
|
13
|
+
const { headingFormatter, formatter, label, payload, showProgressBar } = props;
|
|
12
14
|
const formattedHeading = usePromise(
|
|
13
15
|
async (label2, formatter2) => {
|
|
14
16
|
if (!formatter2) {
|
|
@@ -18,12 +20,14 @@ const TooltipContent = (props) => {
|
|
|
18
20
|
},
|
|
19
21
|
[label, headingFormatter]
|
|
20
22
|
);
|
|
21
|
-
const
|
|
23
|
+
const filteredPayload = payload.filter((item) => item.fill !== "none");
|
|
24
|
+
const items = filteredPayload.map((item, index) => {
|
|
22
25
|
return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(SkeletonTextView, {}), children: /* @__PURE__ */ jsx(TooltipLegendItem, { formatter, item, index }) }, item.dataKey);
|
|
23
26
|
});
|
|
24
|
-
return /* @__PURE__ */ jsxs(
|
|
27
|
+
return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "s", children: [
|
|
25
28
|
/* @__PURE__ */ jsx(Heading, { level: 4, children: formattedHeading }),
|
|
26
|
-
items
|
|
29
|
+
showProgressBar && /* @__PURE__ */ jsx(TooltipProgressBar, { items: filteredPayload }),
|
|
30
|
+
/* @__PURE__ */ jsx("div", { children: items })
|
|
27
31
|
] });
|
|
28
32
|
};
|
|
29
33
|
|
|
@@ -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\";\n\n/** @internal */\nexport const TooltipContent: FC<\n WithTooltipFormatters &\n Omit<TooltipContentProps<ValueType, NameType>, \"formatter\"
|
|
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 { headingFormatter, formatter, label, payload, 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 && <TooltipProgressBar items={filteredPayload} />}\n <div>{items}</div>\n </Flex>\n );\n};\n"],"names":["label","formatter"],"mappings":";;;;;;;;;AAeO,MAAM,cAAA,GAKT,CAAC,KAAA,KAAU;AACb,EAAA,MAAM,EAAE,gBAAA,EAAkB,SAAA,EAAW,KAAA,EAAO,OAAA,EAAS,iBAAgB,GACnE,KAAA;AAEF,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,oBAAmB,GAAA,CAAC,kBAAA,EAAA,EAAmB,KAAA,EAAO,eAAA,EAAiB,CAAA;AAAA,oBAChE,GAAA,CAAC,SAAK,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACd,CAAA;AAEJ;;;;"}
|
|
@@ -13,7 +13,7 @@ const TooltipLegendItem = ({
|
|
|
13
13
|
const formattedLabel = usePromise(
|
|
14
14
|
async (value2, dataKey2, index2, unit2, formatter2) => {
|
|
15
15
|
if (!formatter2) {
|
|
16
|
-
return `${dataKey2}
|
|
16
|
+
return `${dataKey2} (${value2}${unit2 ? ` ${unit2}` : ""})`;
|
|
17
17
|
}
|
|
18
18
|
return formatter2(value2, dataKey2, index2, unit2);
|
|
19
19
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipLegendItem.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.tsx"],"sourcesContent":["import { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type { WithTooltipFormatters } from \"./ChartTooltip\";\nimport type { FC } from \"react\";\nimport type { DefaultTooltipContentProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\n\n/** @internal */\nexport type TooltipPayloadItem = NonNullable<\n DefaultTooltipContentProps<ValueType, NameType>[\"payload\"]\n>[number];\n\n/** @internal */\ninterface LegendItemLabelProps extends Pick<\n WithTooltipFormatters,\n \"formatter\"\n> {\n item: TooltipPayloadItem;\n index: number;\n}\n\n/** @internal */\nexport const TooltipLegendItem: FC<LegendItemLabelProps> = ({\n formatter,\n item,\n index,\n}) => {\n const { value, dataKey, unit, fill } = item;\n\n const formattedLabel = usePromise(\n async (value, dataKey, index, unit, formatter) => {\n if (!formatter) {\n return `${dataKey}
|
|
1
|
+
{"version":3,"file":"TooltipLegendItem.mjs","sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/TooltipLegendItem.tsx"],"sourcesContent":["import { LegendItem } from \"@/components/Legend/components/LegendItem\";\nimport type { WithTooltipFormatters } from \"./ChartTooltip\";\nimport type { FC } from \"react\";\nimport type { DefaultTooltipContentProps } from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { usePromise } from \"@mittwald/react-use-promise\";\n\n/** @internal */\nexport type TooltipPayloadItem = NonNullable<\n DefaultTooltipContentProps<ValueType, NameType>[\"payload\"]\n>[number];\n\n/** @internal */\ninterface LegendItemLabelProps extends Pick<\n WithTooltipFormatters,\n \"formatter\"\n> {\n item: TooltipPayloadItem;\n index: number;\n}\n\n/** @internal */\nexport const TooltipLegendItem: FC<LegendItemLabelProps> = ({\n formatter,\n item,\n index,\n}) => {\n const { value, dataKey, unit, fill } = item;\n\n const formattedLabel = usePromise(\n async (value, dataKey, index, unit, formatter) => {\n if (!formatter) {\n return `${dataKey} (${value}${unit ? ` ${unit}` : \"\"})`;\n }\n\n return formatter(value, dataKey, index, unit);\n },\n [value, dataKey, index, unit, formatter] as const,\n );\n\n return <LegendItem color={fill}>{formattedLabel}</LegendItem>;\n};\n"],"names":["value","dataKey","index","unit","formatter"],"mappings":";;;;AAyBO,MAAM,oBAA8C,CAAC;AAAA,EAC1D,SAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,IAAA,EAAM,MAAK,GAAI,IAAA;AAEvC,EAAA,MAAM,cAAA,GAAiB,UAAA;AAAA,IACrB,OAAOA,MAAAA,EAAOC,QAAAA,EAASC,MAAAA,EAAOC,OAAMC,UAAAA,KAAc;AAChD,MAAA,IAAI,CAACA,UAAAA,EAAW;AACd,QAAA,OAAO,CAAA,EAAGH,QAAO,CAAA,EAAA,EAAKD,MAAK,GAAGG,KAAAA,GAAO,CAAA,CAAA,EAAIA,KAAI,CAAA,CAAA,GAAK,EAAE,CAAA,CAAA,CAAA;AAAA,MACtD;AAEA,MAAA,OAAOC,UAAAA,CAAUJ,MAAAA,EAAOC,QAAAA,EAASC,MAAAA,EAAOC,KAAI,CAAA;AAAA,IAC9C,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,OAAA,EAAS,KAAA,EAAO,MAAM,SAAS;AAAA,GACzC;AAEA,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,IAAA,EAAO,QAAA,EAAA,cAAA,EAAe,CAAA;AAClD;;;;"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
import { ProgressBar } from '../../../ProgressBar/ProgressBar.mjs';
|
|
5
|
+
import { Label } from '../../../Label/Label.mjs';
|
|
6
|
+
import { useLocalizedStringFormatter } from 'react-aria';
|
|
7
|
+
import locales from '../../../../../../../_virtual/_.locale.json@774f50b2495c87d6d13911bcd596e720.mjs';
|
|
8
|
+
import styles from './ChartTooltip.module.scss.mjs';
|
|
9
|
+
|
|
10
|
+
const TooltipProgressBar = (props) => {
|
|
11
|
+
const { items } = props;
|
|
12
|
+
const areaItems = items.filter(
|
|
13
|
+
(item) => item.fill !== "none" && item.graphicalItemId.includes("area")
|
|
14
|
+
);
|
|
15
|
+
const stringFormatter = useLocalizedStringFormatter(locales);
|
|
16
|
+
const unit = areaItems[0]?.unit;
|
|
17
|
+
const segments = areaItems.map((i) => ({
|
|
18
|
+
title: i.dataKey,
|
|
19
|
+
value: i.value,
|
|
20
|
+
color: i.fill
|
|
21
|
+
}));
|
|
22
|
+
const total = segments.reduce((sum, segment) => sum + segment.value, 0);
|
|
23
|
+
if (areaItems.length < 2) {
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
return /* @__PURE__ */ jsx(
|
|
27
|
+
ProgressBar,
|
|
28
|
+
{
|
|
29
|
+
className: styles.progressBar,
|
|
30
|
+
showLegend: false,
|
|
31
|
+
segments,
|
|
32
|
+
valueLabel: unit ? `${total} ${unit}` : total,
|
|
33
|
+
maxValue: unit === "%" ? void 0 : total,
|
|
34
|
+
children: /* @__PURE__ */ jsx(Label, { children: stringFormatter.format("cartesianChart.total") })
|
|
35
|
+
}
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export { TooltipProgressBar };
|
|
40
|
+
//# sourceMappingURL=TooltipProgressBar.mjs.map
|
|
@@ -0,0 +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={unit ? `${total} ${unit}` : total}\n maxValue={unit === \"%\" ? undefined : total}\n >\n <Label>{stringFormatter.format(\"cartesianChart.total\")}</Label>\n </ProgressBar>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAYO,MAAM,kBAAA,GAAkD,CAAC,KAAA,KAAU;AACxE,EAAA,MAAM,EAAE,OAAM,GAAI,KAAA;AAElB,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,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,YAAY,IAAA,GAAO,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,GAAK,KAAA;AAAA,MACxC,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;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/* */
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
4
|
import React from 'react';
|
|
5
|
-
import
|
|
5
|
+
import labelStyles from './Label.module.scss.mjs';
|
|
6
6
|
import * as Aria from 'react-aria-components';
|
|
7
7
|
import clsx from 'clsx';
|
|
8
8
|
import '../../lib/propsContext/propsContext.mjs';
|
|
@@ -23,8 +23,8 @@ const Label = flowComponent("Label", (props) => {
|
|
|
23
23
|
...rest
|
|
24
24
|
} = props;
|
|
25
25
|
const stringFormatter = useLocalizedStringFormatter(locales);
|
|
26
|
-
const rootClassName = unstyled ? className : clsx(
|
|
27
|
-
const optionalMarker = /* @__PURE__ */ jsx("span", { className:
|
|
26
|
+
const rootClassName = unstyled ? className : clsx(labelStyles.label, isDisabled && labelStyles.disabled, className);
|
|
27
|
+
const optionalMarker = /* @__PURE__ */ jsx("span", { className: labelStyles.optional, children: stringFormatter.format("label.optional") });
|
|
28
28
|
const propsContext = {
|
|
29
29
|
ContextualHelpTrigger: {
|
|
30
30
|
tunnelId: "contextualHelp",
|
|
@@ -54,7 +54,7 @@ const Label = flowComponent("Label", (props) => {
|
|
|
54
54
|
} }),
|
|
55
55
|
/* @__PURE__ */ jsx(TunnelExit, { id: "right", children: (children2) => {
|
|
56
56
|
if (React.Children.count(children2) >= 1) {
|
|
57
|
-
return /* @__PURE__ */ jsx("div", { className:
|
|
57
|
+
return /* @__PURE__ */ jsx("div", { className: labelStyles.right, children: children2 });
|
|
58
58
|
}
|
|
59
59
|
return void 0;
|
|
60
60
|
} })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.mjs","sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface LabelProps\n extends\n PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {\n /** Whether the label should show an \"optional\" indicator. */\n optional?: boolean;\n /** Whether the label should be displayed as disabled. */\n isDisabled?: boolean;\n /* @internal */\n unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n const {\n children,\n className,\n optional,\n isDisabled,\n ref,\n unstyled = false,\n ...rest\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const rootClassName = unstyled\n ? className\n : clsx(styles.label, isDisabled && styles.disabled, className);\n\n const optionalMarker = (\n <span className={styles.optional}>\n {stringFormatter.format(\"label.optional\")}\n </span>\n );\n\n const propsContext: PropsContext = {\n ContextualHelpTrigger: {\n tunnelId: \"contextualHelp\",\n Button: {\n tunnelId: null,\n },\n },\n Button: {\n tunnelId: \"right\",\n size: \"s\",\n },\n Action: {\n tunnelId: \"right\",\n Button: {\n tunnelId: null,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <TunnelProvider>\n <Aria.Label {...rest} className={rootClassName} ref={ref}>\n {children}\n {optional && optionalMarker}\n <TunnelExit id=\"contextualHelp\">\n {(children) => {\n if (React.Children.count(children) >= 1) {\n return children;\n }\n\n return undefined;\n }}\n </TunnelExit>\n <TunnelExit id=\"right\">\n {(children) => {\n if (React.Children.count(children) >= 1) {\n return <div className={styles.right}>{children}</div>;\n }\n\n return undefined;\n }}\n </TunnelExit>\n </Aria.Label>\n </TunnelProvider>\n </PropsContextProvider>\n );\n});\n\nexport default Label;\n"],"names":["children"],"mappings":";;;;;;;;;;;;AAyBO,MAAM,KAAA,GAAQ,aAAA,CAAc,OAAA,EAAS,CAAC,KAAA,KAAU;AACrD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,aAAA,GAAgB,WAClB,SAAA,GACA,IAAA,
|
|
1
|
+
{"version":3,"file":"Label.mjs","sources":["../../../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport styles from \"./Label.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface LabelProps\n extends\n PropsWithChildren<Omit<Aria.LabelProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {\n /** Whether the label should show an \"optional\" indicator. */\n optional?: boolean;\n /** Whether the label should be displayed as disabled. */\n isDisabled?: boolean;\n /* @internal */\n unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Label = flowComponent(\"Label\", (props) => {\n const {\n children,\n className,\n optional,\n isDisabled,\n ref,\n unstyled = false,\n ...rest\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const rootClassName = unstyled\n ? className\n : clsx(styles.label, isDisabled && styles.disabled, className);\n\n const optionalMarker = (\n <span className={styles.optional}>\n {stringFormatter.format(\"label.optional\")}\n </span>\n );\n\n const propsContext: PropsContext = {\n ContextualHelpTrigger: {\n tunnelId: \"contextualHelp\",\n Button: {\n tunnelId: null,\n },\n },\n Button: {\n tunnelId: \"right\",\n size: \"s\",\n },\n Action: {\n tunnelId: \"right\",\n Button: {\n tunnelId: null,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n <TunnelProvider>\n <Aria.Label {...rest} className={rootClassName} ref={ref}>\n {children}\n {optional && optionalMarker}\n <TunnelExit id=\"contextualHelp\">\n {(children) => {\n if (React.Children.count(children) >= 1) {\n return children;\n }\n\n return undefined;\n }}\n </TunnelExit>\n <TunnelExit id=\"right\">\n {(children) => {\n if (React.Children.count(children) >= 1) {\n return <div className={styles.right}>{children}</div>;\n }\n\n return undefined;\n }}\n </TunnelExit>\n </Aria.Label>\n </TunnelProvider>\n </PropsContextProvider>\n );\n});\n\nexport default Label;\n"],"names":["styles","children"],"mappings":";;;;;;;;;;;;AAyBO,MAAM,KAAA,GAAQ,aAAA,CAAc,OAAA,EAAS,CAAC,KAAA,KAAU;AACrD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,aAAA,GAAgB,WAClB,SAAA,GACA,IAAA,CAAKA,YAAO,KAAA,EAAO,UAAA,IAAcA,WAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAE/D,EAAA,MAAM,cAAA,uBACH,MAAA,EAAA,EAAK,SAAA,EAAWA,YAAO,QAAA,EACrB,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,gBAAgB,CAAA,EAC1C,CAAA;AAGF,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,qBAAA,EAAuB;AAAA,MACrB,QAAA,EAAU,gBAAA;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU,OAAA;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU,OAAA;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA;AACZ;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,8BAAC,cAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,IAAA,CAAK,KAAA,EAAL,EAAY,GAAG,IAAA,EAAM,SAAA,EAAW,eAAe,GAAA,EAC7C,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,QAAA,IAAY,cAAA;AAAA,oBACb,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,gBAAA,EACZ,WAACC,SAAAA,KAAa;AACb,MAAA,IAAI,KAAA,CAAM,QAAA,CAAS,KAAA,CAAMA,SAAQ,KAAK,CAAA,EAAG;AACvC,QAAA,OAAOA,SAAAA;AAAA,MACT;AAEA,MAAA,OAAO,MAAA;AAAA,IACT,CAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,OAAA,EACZ,WAACA,SAAAA,KAAa;AACb,MAAA,IAAI,KAAA,CAAM,QAAA,CAAS,KAAA,CAAMA,SAAQ,KAAK,CAAA,EAAG;AACvC,QAAA,2BAAQ,KAAA,EAAA,EAAI,SAAA,EAAWD,WAAA,CAAO,KAAA,EAAQ,UAAAC,SAAAA,EAAS,CAAA;AAAA,MACjD;AAEA,MAAA,OAAO,MAAA;AAAA,IACT,CAAA,EACF;AAAA,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -4,12 +4,12 @@ const label = "flow--label";
|
|
|
4
4
|
const disabled = "flow--label--disabled";
|
|
5
5
|
const optional = "flow--label--optional";
|
|
6
6
|
const right = "flow--label--right";
|
|
7
|
-
const
|
|
7
|
+
const labelStyles = {
|
|
8
8
|
label: label,
|
|
9
9
|
disabled: disabled,
|
|
10
10
|
optional: optional,
|
|
11
11
|
right: right
|
|
12
12
|
};
|
|
13
13
|
|
|
14
|
-
export {
|
|
14
|
+
export { labelStyles as default, disabled, label, optional, right };
|
|
15
15
|
//# sourceMappingURL=Label.module.scss.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.mjs","sources":["../../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type {
|
|
1
|
+
{"version":3,"file":"ProgressBar.mjs","sources":["../../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { Status } from \"@/lib/types/props\";\n\nexport interface ProgressBarProps\n extends\n PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n FlowComponentProps {\n status?: Exclude<Status, \"unavailable\">;\n /** Whether the max value should be displayed. */\n showMaxValue?: boolean;\n /** The size variant of the progress bar. @default \"m\" */\n size?: \"s\" | \"m\" | \"l\";\n /** Divides the fill of the progress bar into segments */\n segments?: {\n value: number;\n title: string;\n color?: CategoricalWithCustomColor;\n valueText?: string;\n }[];\n /**\n * Whether the legend component is shown when segments are used. @default:\n * true\n */\n showLegend?: boolean;\n}\n\n/** @flr-generate all */\nexport const ProgressBar = flowComponent(\"ProgressBar\", (props) => {\n const {\n children,\n className,\n status = \"info\",\n showMaxValue,\n size = \"m\",\n segments,\n value,\n formatOptions,\n showLegend = true,\n maxValue,\n valueLabel,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n className,\n styles.progressBar,\n styles[`size-${size}`],\n styles[status],\n );\n\n const propsContext: PropsContext = {\n Label: {\n className: styles.label,\n unstyled: true,\n },\n };\n\n const segmentsTotalValue = segments\n ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n : undefined;\n\n return (\n <Aria.ProgressBar\n className={rootClassName}\n value={segmentsTotalValue ?? value}\n formatOptions={formatOptions}\n maxValue={maxValue}\n {...rest}\n >\n {({ percentage }) => (\n <PropsContextProvider props={propsContext}>\n {children}\n\n <ProgressBarValue\n showMaxValue={showMaxValue}\n maxValue={maxValue}\n formatOptions={formatOptions}\n value={segmentsTotalValue ?? value}\n valueLabel={valueLabel}\n />\n\n <ProgressBarBar\n percentage={percentage}\n segmentsTotalValue={segmentsTotalValue}\n segments={segments}\n />\n\n <ProgressBarLegend\n showLegend={showLegend}\n segments={segments}\n formatOptions={formatOptions}\n />\n </PropsContextProvider>\n )}\n </Aria.ProgressBar>\n );\n});\n\nexport default ProgressBar;\n"],"names":[],"mappings":";;;;;;;;;;;AAwCO,MAAM,WAAA,GAAc,aAAA,CAAc,aAAA,EAAe,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA,GAAS,MAAA;AAAA,IACT,YAAA;AAAA,IACA,IAAA,GAAO,GAAA;AAAA,IACP,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAA,GAAa,IAAA;AAAA,IACb,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,SAAA;AAAA,IACA,MAAA,CAAO,WAAA;AAAA,IACP,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,IACrB,OAAO,MAAM;AAAA,GACf;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,WAAW,MAAA,CAAO,KAAA;AAAA,MAClB,QAAA,EAAU;AAAA;AACZ,GACF;AAEA,EAAA,MAAM,qBAAqB,QAAA,GACvB,QAAA,CAAS,GAAA,CAAI,CAAC,MAAM,CAAA,CAAE,KAAK,CAAA,CAAE,MAAA,CAAO,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,GAAI,CAAA,EAAG,CAAC,CAAA,GACtD,MAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,WAAA;AAAA,IAAL;AAAA,MACC,SAAA,EAAW,aAAA;AAAA,MACX,OAAO,kBAAA,IAAsB,KAAA;AAAA,MAC7B,aAAA;AAAA,MACA,QAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,WAAC,EAAE,UAAA,uBACF,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBAED,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,YAAA;AAAA,YACA,QAAA;AAAA,YACA,aAAA;AAAA,YACA,OAAO,kBAAA,IAAsB,KAAA;AAAA,YAC7B;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,kBAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA;AACF,OAAA,EACF;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}
|
package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarBar.mjs
CHANGED
|
@@ -4,21 +4,25 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
4
4
|
import styles from '../ProgressBar.module.scss.mjs';
|
|
5
5
|
import 'react';
|
|
6
6
|
import { getCategoricalColorByIndex } from '../../../lib/tokens/getCategoricalColorByIndex.mjs';
|
|
7
|
+
import { isCategoricalColor } from '../../../lib/tokens/isCategoricalColor.mjs';
|
|
7
8
|
|
|
8
9
|
const ProgressBarBar = (props) => {
|
|
9
10
|
const { segments, segmentsTotalValue, percentage } = props;
|
|
10
|
-
const segmentFill = segmentsTotalValue && segments && segments?.length > 0 ? segments.map((s, i) =>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
"
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
11
|
+
const segmentFill = segmentsTotalValue && segments && segments?.length > 0 ? segments.map((s, i) => {
|
|
12
|
+
const backgroundColor = !s.color ? `var(--color--categorical--${getCategoricalColorByIndex(i)})` : isCategoricalColor(s.color) ? `var(--color--categorical--${s.color})` : s.color;
|
|
13
|
+
return /* @__PURE__ */ jsx(
|
|
14
|
+
"div",
|
|
15
|
+
{
|
|
16
|
+
"aria-hidden": true,
|
|
17
|
+
style: {
|
|
18
|
+
backgroundColor,
|
|
19
|
+
width: 100 / segmentsTotalValue * s.value + "%",
|
|
20
|
+
height: "100%"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
s.title
|
|
24
|
+
);
|
|
25
|
+
}) : null;
|
|
22
26
|
return /* @__PURE__ */ jsx("div", { className: styles.bar, children: /* @__PURE__ */ jsx("div", { className: styles.fill, style: { width: percentage + "%" }, children: segmentFill }) });
|
|
23
27
|
};
|
|
24
28
|
|
package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarBar.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBarBar.mjs","sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC } from \"react\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ninterface Props extends Pick<ProgressBarProps, \"segments\"> {\n percentage?: number;\n segmentsTotalValue?: number;\n}\n\nexport const ProgressBarBar: FC<Props> = (props) => {\n const { segments, segmentsTotalValue, percentage } = props;\n\n const segmentFill =\n segmentsTotalValue && segments && segments?.length > 0\n ? segments.map((s, i) =>
|
|
1
|
+
{"version":3,"file":"ProgressBarBar.mjs","sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC } from \"react\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\ninterface Props extends Pick<ProgressBarProps, \"segments\"> {\n percentage?: number;\n segmentsTotalValue?: number;\n}\n\nexport const ProgressBarBar: FC<Props> = (props) => {\n const { segments, segmentsTotalValue, percentage } = props;\n\n const segmentFill =\n segmentsTotalValue && segments && segments?.length > 0\n ? segments.map((s, i) => {\n const backgroundColor = !s.color\n ? `var(--color--categorical--${getCategoricalColorByIndex(i)})`\n : isCategoricalColor(s.color)\n ? `var(--color--categorical--${s.color})`\n : s.color;\n\n return (\n <div\n key={s.title}\n aria-hidden\n style={{\n backgroundColor,\n width: (100 / segmentsTotalValue) * s.value + \"%\",\n height: \"100%\",\n }}\n />\n );\n })\n : null;\n\n return (\n <div className={styles.bar}>\n <div className={styles.fill} style={{ width: percentage + \"%\" }}>\n {segmentFill}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;AAWO,MAAM,cAAA,GAA4B,CAAC,KAAA,KAAU;AAClD,EAAA,MAAM,EAAE,QAAA,EAAU,kBAAA,EAAoB,UAAA,EAAW,GAAI,KAAA;AAErD,EAAA,MAAM,WAAA,GACJ,kBAAA,IAAsB,QAAA,IAAY,QAAA,EAAU,MAAA,GAAS,IACjD,QAAA,CAAS,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAM;AACrB,IAAA,MAAM,kBAAkB,CAAC,CAAA,CAAE,KAAA,GACvB,CAAA,0BAAA,EAA6B,2BAA2B,CAAC,CAAC,CAAA,CAAA,CAAA,GAC1D,kBAAA,CAAmB,EAAE,KAAK,CAAA,GACxB,6BAA6B,CAAA,CAAE,KAAK,MACpC,CAAA,CAAE,KAAA;AAER,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEC,aAAA,EAAW,IAAA;AAAA,QACX,KAAA,EAAO;AAAA,UACL,eAAA;AAAA,UACA,KAAA,EAAQ,GAAA,GAAM,kBAAA,GAAsB,CAAA,CAAE,KAAA,GAAQ,GAAA;AAAA,UAC9C,MAAA,EAAQ;AAAA;AACV,OAAA;AAAA,MANK,CAAA,CAAE;AAAA,KAOT;AAAA,EAEJ,CAAC,CAAA,GACD,IAAA;AAEN,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,GAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,OAAO,EAAE,KAAA,EAAO,aAAa,GAAA,EAAI,EAC3D,uBACH,CAAA,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -15,7 +15,7 @@ import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
|
|
|
15
15
|
import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
|
|
16
16
|
import '../../lib/propsContext/propsContext.mjs';
|
|
17
17
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
18
|
-
import
|
|
18
|
+
import labelStyles from '../Label/Label.module.scss.mjs';
|
|
19
19
|
import { useObjectRef } from 'react-aria';
|
|
20
20
|
|
|
21
21
|
const Switch = flowComponent("Switch", (props) => {
|
|
@@ -48,7 +48,7 @@ const Switch = flowComponent("Switch", (props) => {
|
|
|
48
48
|
return /* @__PURE__ */ jsxs("div", { ...fieldProps, children: [
|
|
49
49
|
/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Switch, { ...rest, className: rootClassName, inputRef: objectRef, children: ({ isSelected }) => /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
|
|
50
50
|
/* @__PURE__ */ jsx("div", { className: styles.track, children: /* @__PURE__ */ jsx("div", { className: styles.handle, children: isSelected ? /* @__PURE__ */ jsx(IconCheck, { size: "s" }) : /* @__PURE__ */ jsx(IconClose, { size: "s" }) }) }),
|
|
51
|
-
/* @__PURE__ */ jsx("div", { className:
|
|
51
|
+
/* @__PURE__ */ jsx("div", { className: labelStyles.label, children })
|
|
52
52
|
] }) }) }),
|
|
53
53
|
/* @__PURE__ */ jsx(FieldErrorView, {})
|
|
54
54
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.mjs","sources":["../../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport labelStyles from \"../Label/Label.module.scss\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface SwitchProps\n extends\n PropsWithChildren<Omit<Aria.SwitchProps, \"children\" | \"inputRef\">>,\n FlowComponentProps<HTMLInputElement> {\n /**\n * Whether the label should appear before or after the switch. @default\n * \"trailing\"\n */\n labelPosition?: \"leading\" | \"trailing\";\n}\n\n/** @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n const {\n children,\n className,\n labelPosition = \"trailing\",\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.switch,\n className,\n styles[`label-${labelPosition}`],\n );\n\n const objectRef = useObjectRef(ref);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props);\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n ...fieldPropsContext.Label,\n optional: false,\n },\n };\n\n return (\n <div {...fieldProps}>\n <FieldErrorCaptureContext>\n <Aria.Switch {...rest} className={rootClassName} inputRef={objectRef}>\n {({ isSelected }) => (\n <PropsContextProvider props={propsContext}>\n <div className={styles.track}>\n <div className={styles.handle}>\n {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n </div>\n </div>\n <div className={labelStyles.label}>{children}</div>\n </PropsContextProvider>\n )}\n </Aria.Switch>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Switch;\n"],"names":[
|
|
1
|
+
{"version":3,"file":"Switch.mjs","sources":["../../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport labelStyles from \"../Label/Label.module.scss\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface SwitchProps\n extends\n PropsWithChildren<Omit<Aria.SwitchProps, \"children\" | \"inputRef\">>,\n FlowComponentProps<HTMLInputElement> {\n /**\n * Whether the label should appear before or after the switch. @default\n * \"trailing\"\n */\n labelPosition?: \"leading\" | \"trailing\";\n}\n\n/** @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n const {\n children,\n className,\n labelPosition = \"trailing\",\n ref,\n ...rest\n } = props;\n\n const rootClassName = clsx(\n styles.switch,\n className,\n styles[`label-${labelPosition}`],\n );\n\n const objectRef = useObjectRef(ref);\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldPropsContext,\n fieldProps,\n } = useFieldComponent(props);\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n ...fieldPropsContext.Label,\n optional: false,\n },\n };\n\n return (\n <div {...fieldProps}>\n <FieldErrorCaptureContext>\n <Aria.Switch {...rest} className={rootClassName} inputRef={objectRef}>\n {({ isSelected }) => (\n <PropsContextProvider props={propsContext}>\n <div className={styles.track}>\n <div className={styles.handle}>\n {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n </div>\n </div>\n <div className={labelStyles.label}>{children}</div>\n </PropsContextProvider>\n )}\n </Aria.Switch>\n </FieldErrorCaptureContext>\n <FieldErrorView />\n </div>\n );\n});\n\nexport default Switch;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAwBO,MAAM,MAAA,GAAS,aAAA,CAAc,QAAA,EAAU,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA,GAAgB,UAAA;AAAA,IAChB,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,CAAA,MAAA,EAAS,aAAa,CAAA,CAAE;AAAA,GACjC;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,GAAG,CAAA;AAElC,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,GAAG,iBAAA;AAAA,IACH,KAAA,EAAO;AAAA,MACL,GAAG,iBAAA,CAAkB,KAAA;AAAA,MACrB,QAAA,EAAU;AAAA;AACZ,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EACP,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,4BACC,QAAA,kBAAA,GAAA,CAAC,IAAA,CAAK,QAAL,EAAa,GAAG,MAAM,SAAA,EAAW,aAAA,EAAe,QAAA,EAAU,SAAA,EACxD,WAAC,EAAE,UAAA,uBACF,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,KAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,MAAA,EACpB,QAAA,EAAA,UAAA,uBAAc,SAAA,EAAA,EAAU,IAAA,EAAK,KAAI,CAAA,mBAAK,GAAA,CAAC,aAAU,IAAA,EAAK,GAAA,EAAI,GAC7D,CAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,OAAQ,QAAA,EAAS;AAAA,KAAA,EAC/C,GAEJ,CAAA,EACF,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -17,6 +17,8 @@ export interface WithTooltipFormatters {
|
|
|
17
17
|
headingFormatter?: TooltipHeadingFormatter;
|
|
18
18
|
}
|
|
19
19
|
export interface ChartTooltipProps extends Pick<TooltipProps<ValueType, NameType>, "wrapperClassName" | "allowEscapeViewBox">, WithTooltipFormatters {
|
|
20
|
+
/** Show progress bar for stacked areas @default "true" */
|
|
21
|
+
showProgressBar?: boolean;
|
|
20
22
|
}
|
|
21
23
|
/** @flr-generate all */
|
|
22
24
|
export declare const ChartTooltip: FC<ChartTooltipProps>;
|
|
@@ -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;CAC5C;AAED,MAAM,WAAW,iBACf,SACE,IAAI,CACF,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC,EACjC,kBAAkB,GAAG,oBAAoB,CAC1C,EACD,qBAAqB;
|
|
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;CAC5C;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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { TooltipPayloadItem } from './TooltipLegendItem';
|
|
3
|
+
interface TooltipProgressBarProps {
|
|
4
|
+
items: TooltipPayloadItem[];
|
|
5
|
+
}
|
|
6
|
+
export declare const TooltipProgressBar: FC<TooltipProgressBarProps>;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=TooltipProgressBar.d.ts.map
|
package/dist/types/components/CartesianChart/components/ChartTooltip/TooltipProgressBar.d.ts.map
ADDED
|
@@ -0,0 +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;AAKhH,UAAU,uBAAuB;IAC/B,KAAK,EAAE,kBAAkB,EAAE,CAAC;CAC7B;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAkC1D,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { CategoricalWithCustomColor } from '../../lib/tokens/CategoricalColors';
|
|
3
3
|
import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
|
|
4
4
|
import { Status } from '../../lib/types/props';
|
|
5
5
|
import * as Aria from "react-aria-components";
|
|
@@ -13,7 +13,7 @@ export interface ProgressBarProps extends PropsWithChildren<Omit<Aria.ProgressBa
|
|
|
13
13
|
segments?: {
|
|
14
14
|
value: number;
|
|
15
15
|
title: string;
|
|
16
|
-
color?:
|
|
16
|
+
color?: CategoricalWithCustomColor;
|
|
17
17
|
valueText?: string;
|
|
18
18
|
}[];
|
|
19
19
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQ/C,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQ/C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,WAAW,gBACf,SACE,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC,EAC1D,kBAAkB;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACxC,iDAAiD;IACjD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,yDAAyD;IACzD,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,0BAA0B,CAAC;QACnC,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,EAAE,CAAC;IACJ;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAwB;AACxB,eAAO,MAAM,WAAW,qGAqEtB,CAAC;AAEH,eAAe,WAAW,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBarBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"ProgressBarBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAIjE,UAAU,KAAM,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAiCpC,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.780",
|
|
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-compiler": "^3.2.6",
|
|
62
62
|
"@lezer/highlight": "^1.2.3",
|
|
63
|
-
"@mittwald/flow-icons": "0.2.0-alpha.
|
|
63
|
+
"@mittwald/flow-icons": "0.2.0-alpha.780",
|
|
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.780",
|
|
66
66
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
67
67
|
"@react-aria/form": "^3.1.3",
|
|
68
68
|
"@react-aria/live-announcer": "^3.4.4",
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
"@lezer/generator": "^1.8.0",
|
|
114
114
|
"@lezer/lr": "^1.4.8",
|
|
115
115
|
"@mittwald/flow-core": "",
|
|
116
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
116
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.780",
|
|
117
117
|
"@mittwald/flow-icons-base": "",
|
|
118
118
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
119
119
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
},
|
|
167
167
|
"peerDependencies": {
|
|
168
168
|
"@internationalized/date": "^3.10.0",
|
|
169
|
-
"@mittwald/flow-icons-pro": "0.2.0-alpha.
|
|
169
|
+
"@mittwald/flow-icons-pro": "0.2.0-alpha.779",
|
|
170
170
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
171
171
|
"next": "*",
|
|
172
172
|
"react": "^19.2.0",
|
|
@@ -187,5 +187,5 @@
|
|
|
187
187
|
"optional": true
|
|
188
188
|
}
|
|
189
189
|
},
|
|
190
|
-
"gitHead": "
|
|
190
|
+
"gitHead": "624ba9147b56b6835e0d752d438f199692fb79e2"
|
|
191
191
|
}
|