@mittwald/flow-react-components 0.2.0-alpha.551 → 0.2.0-alpha.552
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 +4 -0
- package/dist/assets/doc-properties.json +26300 -26280
- package/dist/js/components/src/components/CartesianChart/CartesianChart.mjs +120 -25
- package/dist/js/components/src/components/CartesianChart/CartesianChart.mjs.map +1 -1
- package/dist/js/components/src/components/CartesianChart/components/Area/Area.mjs +5 -11
- package/dist/js/components/src/components/CartesianChart/components/Area/Area.mjs.map +1 -1
- package/dist/js/components/src/components/CartesianChart/components/YAxis/YAxis.mjs +1 -1
- package/dist/js/components/src/components/CartesianChart/components/YAxis/YAxis.mjs.map +1 -1
- package/dist/types/components/CartesianChart/CartesianChart.d.ts +4 -4
- package/dist/types/components/CartesianChart/CartesianChart.d.ts.map +1 -1
- package/dist/types/components/CartesianChart/components/Area/Area.d.ts.map +1 -1
- package/package.json +5 -5
|
@@ -2,12 +2,116 @@
|
|
|
2
2
|
/* */
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
4
|
import * as Recharts from 'recharts';
|
|
5
|
-
import { Children,
|
|
6
|
-
import { Area } from './components/Area/Area.mjs';
|
|
5
|
+
import { Children, useRef, useState, useEffect } from 'react';
|
|
7
6
|
import clsx from 'clsx';
|
|
8
7
|
import styles from './CartesianChart.module.scss.mjs';
|
|
9
8
|
import { Wrap } from '../Wrap/Wrap.mjs';
|
|
9
|
+
import '../AccentBox/AccentBox.mjs';
|
|
10
|
+
import '../../lib/propsContext/propsContext.mjs';
|
|
11
|
+
import '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
12
|
+
import '../Button/Button.mjs';
|
|
13
|
+
import '@tabler/icons-react';
|
|
14
|
+
import '../Icon/Icon.mjs';
|
|
15
|
+
import '../../views/IconView.mjs';
|
|
16
|
+
import '@mittwald/react-tunnel';
|
|
17
|
+
import '../SuspenseTrigger/SuspenseTrigger.mjs';
|
|
18
|
+
import 'react-aria';
|
|
19
|
+
import '../Action/Action.mjs';
|
|
20
|
+
import '@react-aria/live-announcer';
|
|
21
|
+
import '../ActionGroup/ActionGroup.mjs';
|
|
22
|
+
import '../Alert/Alert.mjs';
|
|
23
|
+
import '../AlertBadge/AlertBadge.mjs';
|
|
24
|
+
import '../Align/Align.mjs';
|
|
25
|
+
import '../Autocomplete/Autocomplete.mjs';
|
|
26
|
+
import '../Avatar/Avatar.mjs';
|
|
27
|
+
import '../Badge/Badge.mjs';
|
|
28
|
+
import 'react-aria-components';
|
|
29
|
+
import 'mobx';
|
|
30
|
+
import '../../lib/controller/overlay/context.mjs';
|
|
31
|
+
import 'remeda';
|
|
32
|
+
import '@react-aria/utils';
|
|
33
|
+
import 'dot-prop';
|
|
34
|
+
import '../Heading/Heading.mjs';
|
|
35
|
+
import '../Text/Text.mjs';
|
|
10
36
|
import { CartesianGrid } from './components/CartesianGrid/CartesianGrid.mjs';
|
|
37
|
+
import '../Checkbox/Checkbox.mjs';
|
|
38
|
+
import '../CheckboxButton/CheckboxButton.mjs';
|
|
39
|
+
import '../CheckboxGroup/CheckboxGroup.mjs';
|
|
40
|
+
import '../../lib/propsContext/inherit/PropsContextLevelProvider.mjs';
|
|
41
|
+
import 'react-syntax-highlighter';
|
|
42
|
+
import '../CopyButton/CopyButton.mjs';
|
|
43
|
+
import '../ColumnLayout/ColumnLayout.mjs';
|
|
44
|
+
import '../ComboBox/ComboBox.mjs';
|
|
45
|
+
import '../../lib/propsContext/components/ComponentPropsContextProvider.mjs';
|
|
46
|
+
import '../Content/Content.mjs';
|
|
47
|
+
import '../ContextMenu/ContextMenu.mjs';
|
|
48
|
+
import '../MenuItem/MenuItem.mjs';
|
|
49
|
+
import '../ContextMenu/components/ContextMenuTrigger/ContextMenuTrigger.mjs';
|
|
50
|
+
import '../ContextMenu/components/ContextMenuSection/ContextMenuSection.mjs';
|
|
51
|
+
import '../ContextualHelp/ContextualHelp.mjs';
|
|
52
|
+
import '../ContextualHelp/components/ContextualHelpTrigger/ContextualHelpTrigger.mjs';
|
|
53
|
+
import '../CounterBadge/CounterBadge.mjs';
|
|
54
|
+
import '../CountryOptions/CountryOptions.mjs';
|
|
55
|
+
import '../DatePicker/DatePicker.mjs';
|
|
56
|
+
import '../DateRangePicker/DateRangePicker.mjs';
|
|
57
|
+
import '../FieldDescription/FieldDescription.mjs';
|
|
58
|
+
import '../FieldError/FieldError.mjs';
|
|
59
|
+
import '../FileCard/FileCard.mjs';
|
|
60
|
+
import '../FileCardList/FileCardList.mjs';
|
|
61
|
+
import '../FileDropZone/FileDropZone.mjs';
|
|
62
|
+
import '../FileField/FileField.mjs';
|
|
63
|
+
import '../Header/Header.mjs';
|
|
64
|
+
import '../Image/Image.mjs';
|
|
65
|
+
import '../Initials/Initials.mjs';
|
|
66
|
+
import '../Label/Label.mjs';
|
|
67
|
+
import '../LayoutCard/LayoutCard.mjs';
|
|
68
|
+
import '../OverlayTrigger/components/MenuTrigger/MenuTrigger.mjs';
|
|
69
|
+
import '../../views/DialogTriggerView.mjs';
|
|
70
|
+
import '../LightBox/LightBox.mjs';
|
|
71
|
+
import '../Link/Link.mjs';
|
|
72
|
+
import 'invariant';
|
|
73
|
+
import '../../views/ListItemViewContentView.mjs';
|
|
74
|
+
import '../../views/ButtonView.mjs';
|
|
75
|
+
import '../../views/ContextMenuTriggerView.mjs';
|
|
76
|
+
import '../List/components/ListSummary/ListSummary.mjs';
|
|
77
|
+
import '../List/listContext.mjs';
|
|
78
|
+
import '../List/List.mjs';
|
|
79
|
+
import 'react-markdown';
|
|
80
|
+
import 'remark-gfm';
|
|
81
|
+
import '../MarkdownEditor/MarkdownEditor.mjs';
|
|
82
|
+
import '../Message/Message.mjs';
|
|
83
|
+
import '../MessageThread/MessageThread.mjs';
|
|
84
|
+
import '../Modal/Modal.mjs';
|
|
85
|
+
import '../Navigation/Navigation.mjs';
|
|
86
|
+
import '../Navigation/components/NavigationGroup/NavigationGroup.mjs';
|
|
87
|
+
import '../NotificationProvider/NotificationProvider.mjs';
|
|
88
|
+
import 'luxon';
|
|
89
|
+
import '../NumberField/NumberField.mjs';
|
|
90
|
+
import '../Option/Option.mjs';
|
|
91
|
+
import '../../views/OverlayContentView.mjs';
|
|
92
|
+
import '../../views/ClearPropsContextView.mjs';
|
|
93
|
+
import '../../views/LoadingSpinnerView.mjs';
|
|
94
|
+
import '../PasswordCreationField/PasswordCreationField.mjs';
|
|
95
|
+
import '../Popover/components/PopoverTrigger/PopoverTrigger.mjs';
|
|
96
|
+
import '../Popover/Popover.mjs';
|
|
97
|
+
import '../ProgressBar/ProgressBar.mjs';
|
|
98
|
+
import '../RadioGroup/RadioGroup.mjs';
|
|
99
|
+
import '../RadioGroup/components/Radio/Radio.mjs';
|
|
100
|
+
import '../RadioGroup/components/RadioButton/RadioButton.mjs';
|
|
101
|
+
import '../SearchField/SearchField.mjs';
|
|
102
|
+
import '../Section/Section.mjs';
|
|
103
|
+
import '../SegmentedControl/SegmentedControl.mjs';
|
|
104
|
+
import '../SegmentedControl/components/Segment/Segment.mjs';
|
|
105
|
+
import '../Select/Select.mjs';
|
|
106
|
+
import '../SettingsProvider/SettingsProvider.mjs';
|
|
107
|
+
import '../Slider/Slider.mjs';
|
|
108
|
+
import '../Switch/Switch.mjs';
|
|
109
|
+
import '../Tabs/Tabs.mjs';
|
|
110
|
+
import '../Tabs/components/Tab/context.mjs';
|
|
111
|
+
import '../TextArea/TextArea.mjs';
|
|
112
|
+
import '../TextField/TextField.mjs';
|
|
113
|
+
import '../TimeField/TimeField.mjs';
|
|
114
|
+
import '../TranslationProvider/TranslationProvider.mjs';
|
|
11
115
|
|
|
12
116
|
const CartesianChart = (props) => {
|
|
13
117
|
const {
|
|
@@ -20,28 +124,13 @@ const CartesianChart = (props) => {
|
|
|
20
124
|
...rest
|
|
21
125
|
} = props;
|
|
22
126
|
const rootClassName = clsx(styles.cartesianChart, className);
|
|
23
|
-
const areasWithoutDots = [];
|
|
24
|
-
const areasWithDots = [];
|
|
25
127
|
const otherChildren = [];
|
|
26
128
|
const gridChildren = [];
|
|
27
|
-
Children.forEach(children, (child
|
|
129
|
+
Children.forEach(children, (child) => {
|
|
28
130
|
if (!child) return;
|
|
29
131
|
const element = child;
|
|
30
132
|
if (element.type === CartesianGrid) {
|
|
31
133
|
gridChildren.push(element);
|
|
32
|
-
} else if (element.type === Area) {
|
|
33
|
-
areasWithoutDots.push(
|
|
34
|
-
cloneElement(element, {
|
|
35
|
-
onlyDots: false,
|
|
36
|
-
key: `area-${index}`
|
|
37
|
-
})
|
|
38
|
-
);
|
|
39
|
-
areasWithDots.push(
|
|
40
|
-
cloneElement(element, {
|
|
41
|
-
onlyDots: true,
|
|
42
|
-
key: `area-dots-${index}`
|
|
43
|
-
})
|
|
44
|
-
);
|
|
45
134
|
} else {
|
|
46
135
|
otherChildren.push(element);
|
|
47
136
|
}
|
|
@@ -79,13 +168,19 @@ const CartesianChart = (props) => {
|
|
|
79
168
|
{
|
|
80
169
|
style: { height, flex: flexGrow ? 1 : void 0 },
|
|
81
170
|
ref: chartContainerRef,
|
|
82
|
-
children: /* @__PURE__ */ jsx(Recharts.ResponsiveContainer, { children: /* @__PURE__ */ jsxs(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
171
|
+
children: /* @__PURE__ */ jsx(Recharts.ResponsiveContainer, { children: /* @__PURE__ */ jsxs(
|
|
172
|
+
Recharts.ComposedChart,
|
|
173
|
+
{
|
|
174
|
+
data,
|
|
175
|
+
className: rootClassName,
|
|
176
|
+
...rest,
|
|
177
|
+
children: [
|
|
178
|
+
!showEmptyView && gridChildren,
|
|
179
|
+
otherChildren,
|
|
180
|
+
showEmptyView && viewDimensions && /* @__PURE__ */ jsx("foreignObject", { ...viewDimensions, children: /* @__PURE__ */ jsx("div", { className: styles.emptyViewContainer, children: /* @__PURE__ */ jsx(EmptyView, { data }) }) })
|
|
181
|
+
]
|
|
182
|
+
}
|
|
183
|
+
) })
|
|
89
184
|
}
|
|
90
185
|
) });
|
|
91
186
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartesianChart.mjs","sources":["../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import * as Recharts from \"recharts\";\nimport
|
|
1
|
+
{"version":3,"file":"CartesianChart.mjs","sources":["../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import * as Recharts from \"recharts\";\nimport React, {\n Children,\n useEffect,\n useRef,\n useState,\n type ComponentProps,\n type FC,\n type PropsWithChildren,\n type ReactElement,\n type SVGProps,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport Wrap from \"../Wrap\";\nimport { CartesianGrid } from \"../public\";\n\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof Recharts.ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps\n extends Pick<\n ComponentProps<typeof Recharts.ComposedChart>,\n \"data\" | \"className\" | \"syncId\" | \"syncMethod\"\n >,\n PropsWithChildren {\n height?: string;\n /** View that is provided when data is empty/undefined */\n emptyView?: React.ComponentType<CartesianChartEmptyViewProps>;\n /**\n * Allow the height controlling container to set flex-grow: 1. Can only be\n * used in combination with `height`\n */\n flexGrow?: boolean;\n}\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n const {\n children,\n data,\n className,\n height,\n flexGrow,\n emptyView: EmptyView,\n ...rest\n } = props;\n const rootClassName = clsx(styles.cartesianChart, className);\n\n const otherChildren: ReactElement[] = [];\n const gridChildren: ReactElement[] = [];\n\n Children.forEach(children, (child) => {\n if (!child) return;\n const element = child as ReactElement;\n\n if (element.type === CartesianGrid) {\n gridChildren.push(element);\n } else {\n otherChildren.push(element);\n }\n });\n\n const showEmptyView = (!data || data.length === 0) && EmptyView;\n\n const chartContainerRef = useRef<HTMLDivElement>(null);\n const [viewDimensions, setViewDimensions] = useState<Partial<\n SVGProps<SVGForeignObjectElement>\n > | null>(null);\n\n // resizing the foreignObject for the EmptyView on size changes\n useEffect(() => {\n if (showEmptyView) {\n const updateDimensions = () => {\n const svg = chartContainerRef.current?.querySelector(\n \"svg\",\n ) as SVGSVGElement | null;\n if (!svg) return;\n\n const clip = svg.querySelector(\"clipPath rect\");\n if (clip) {\n const x = parseFloat(clip.getAttribute(\"x\") ?? \"0\");\n const y = parseFloat(clip.getAttribute(\"y\") ?? \"0\");\n const width = parseFloat(clip.getAttribute(\"width\") ?? \"0\");\n const height = parseFloat(clip.getAttribute(\"height\") ?? \"0\");\n setViewDimensions({ x, y, width, height });\n }\n };\n\n updateDimensions();\n\n const container = chartContainerRef.current;\n const observer = new ResizeObserver(updateDimensions);\n if (container) observer.observe(container);\n\n return () => {\n observer.disconnect();\n };\n }\n }, []);\n\n return (\n <Wrap if={height}>\n <div\n style={{ height, flex: flexGrow ? 1 : undefined }}\n ref={chartContainerRef}\n >\n <Recharts.ResponsiveContainer>\n <Recharts.ComposedChart\n data={data}\n className={rootClassName}\n {...rest}\n >\n {!showEmptyView && gridChildren}\n {otherChildren}\n {showEmptyView && viewDimensions && (\n <foreignObject {...viewDimensions}>\n <div className={styles.emptyViewContainer}>\n <EmptyView data={data} />\n </div>\n </foreignObject>\n )}\n </Recharts.ComposedChart>\n </Recharts.ResponsiveContainer>\n </div>\n </Wrap>\n );\n};\n\nexport default CartesianChart;\n"],"names":["height"],"mappings":"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"}
|
|
@@ -7,23 +7,17 @@ import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
|
|
|
7
7
|
import { AreaDot } from '../AreaDot/AreaDot.mjs';
|
|
8
8
|
|
|
9
9
|
const Area = (props) => {
|
|
10
|
-
const {
|
|
11
|
-
color = "sea-green",
|
|
12
|
-
stackId = 1,
|
|
13
|
-
fillOpacity = 1,
|
|
14
|
-
onlyDots = true,
|
|
15
|
-
...rest
|
|
16
|
-
} = props;
|
|
10
|
+
const { color = "sea-green", stackId = 1, fillOpacity = 1, ...rest } = props;
|
|
17
11
|
return /* @__PURE__ */ jsx(
|
|
18
12
|
Recharts.Area,
|
|
19
13
|
{
|
|
20
14
|
stackId,
|
|
21
15
|
fillOpacity,
|
|
22
16
|
...rest,
|
|
23
|
-
activeDot:
|
|
24
|
-
fill:
|
|
25
|
-
stroke:
|
|
26
|
-
strokeWidth:
|
|
17
|
+
activeDot: /* @__PURE__ */ jsx(AreaDot, { color: `var(--color--categorical--${color})` }),
|
|
18
|
+
fill: `var(--color--categorical--${color})`,
|
|
19
|
+
stroke: tokens.area["border-color"].value,
|
|
20
|
+
strokeWidth: tokens.area["border-width"].value
|
|
27
21
|
}
|
|
28
22
|
);
|
|
29
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Area.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalColor } from \"@/lib/tokens/CategoricalColors\";\n\nexport interface AreaProps\n extends Pick<\n Recharts.AreaProps,\n | \"className\"\n | \"dataKey\"\n | \"stackId\"\n | \"fillOpacity\"\n | \"key\"\n | \"xAxisId\"\n | \"yAxisId\"\n | \"type\"\n | \"unit\"\n > {\n /** The color of the area. @default \"sea-green\" */\n color?: CategoricalColor;\n
|
|
1
|
+
{"version":3,"file":"Area.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalColor } from \"@/lib/tokens/CategoricalColors\";\n\nexport interface AreaProps\n extends Pick<\n Recharts.AreaProps,\n | \"className\"\n | \"dataKey\"\n | \"stackId\"\n | \"fillOpacity\"\n | \"key\"\n | \"xAxisId\"\n | \"yAxisId\"\n | \"type\"\n | \"unit\"\n > {\n /** The color of the area. @default \"sea-green\" */\n color?: CategoricalColor;\n}\n\n/** @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n const { color = \"sea-green\", stackId = 1, fillOpacity = 1, ...rest } = props;\n\n return (\n <Recharts.Area\n stackId={stackId}\n fillOpacity={fillOpacity}\n {...rest}\n activeDot={<AreaDot color={`var(--color--categorical--${color})`} />}\n fill={`var(--color--categorical--${color})`}\n stroke={tokens.area[\"border-color\"].value}\n strokeWidth={tokens.area[\"border-width\"].value}\n />\n );\n};\n\nexport default Area;\n"],"names":[],"mappings":";;;;;;AAwBO,MAAM,IAAA,GAAsB,CAAC,KAAA,KAAU;AAC5C,EAAA,MAAM,EAAE,QAAQ,WAAA,EAAa,OAAA,GAAU,GAAG,WAAA,GAAc,CAAA,EAAG,GAAG,IAAA,EAAK,GAAI,KAAA;AAEvE,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,IAAA;AAAA,IAAT;AAAA,MACC,OAAA;AAAA,MACA,WAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,2BAAW,GAAA,CAAC,OAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,0BAAA,EAA6B,KAAK,CAAA,CAAA,CAAA,EAAK,CAAA;AAAA,MAClE,IAAA,EAAM,6BAA6B,KAAK,CAAA,CAAA,CAAA;AAAA,MACxC,MAAA,EAAQ,MAAA,CAAO,IAAA,CAAK,cAAc,CAAA,CAAE,KAAA;AAAA,MACpC,WAAA,EAAa,MAAA,CAAO,IAAA,CAAK,cAAc,CAAA,CAAE;AAAA;AAAA,GAC3C;AAEJ;;;;"}
|
|
@@ -5,7 +5,7 @@ import * as Recharts from 'recharts';
|
|
|
5
5
|
import tokens from '../../../../../../design-tokens/dist/variables.json.mjs';
|
|
6
6
|
|
|
7
7
|
const YAxis = (props) => {
|
|
8
|
-
const { domain
|
|
8
|
+
const { domain, ...rest } = props;
|
|
9
9
|
return /* @__PURE__ */ jsx(
|
|
10
10
|
Recharts.YAxis,
|
|
11
11
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YAxis.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\n\nexport type YAxisProps = Pick<\n Recharts.YAxisProps,\n | \"className\"\n | \"dataKey\"\n | \"orientation\"\n | \"allowDecimals\"\n | \"interval\"\n | \"minTickGap\"\n | \"scale\"\n | \"type\"\n | \"domain\"\n | \"hide\"\n | \"unit\"\n | \"tickFormatter\"\n>;\n\n/** @flr-generate all */\nexport const YAxis: FC<YAxisProps> = (props) => {\n const { domain
|
|
1
|
+
{"version":3,"file":"YAxis.mjs","sources":["../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport tokens from \"@mittwald/flow-design-tokens/variables.json\";\n\nexport type YAxisProps = Pick<\n Recharts.YAxisProps,\n | \"className\"\n | \"dataKey\"\n | \"orientation\"\n | \"allowDecimals\"\n | \"interval\"\n | \"minTickGap\"\n | \"scale\"\n | \"type\"\n | \"domain\"\n | \"hide\"\n | \"unit\"\n | \"tickFormatter\"\n>;\n\n/** @flr-generate all */\nexport const YAxis: FC<YAxisProps> = (props) => {\n const { domain, ...rest } = props;\n\n return (\n <Recharts.YAxis\n {...rest}\n allowDataOverflow\n domain={domain}\n fontSize={tokens.axis[\"font-size\"].value}\n tick={{\n fill: tokens.axis[\"text-color\"].value,\n }}\n tickMargin={parseInt(tokens.axis.spacing.value)}\n tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n />\n );\n};\n\nexport default YAxis;\n"],"names":[],"mappings":";;;;AAqBO,MAAM,KAAA,GAAwB,CAAC,KAAA,KAAU;AAC9C,EAAA,MAAM,EAAE,MAAA,EAAQ,GAAG,IAAA,EAAK,GAAI,KAAA;AAE5B,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA,CAAS,KAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,iBAAA,EAAiB,IAAA;AAAA,MACjB,MAAA;AAAA,MACA,QAAA,EAAU,MAAA,CAAO,IAAA,CAAK,WAAW,CAAA,CAAE,KAAA;AAAA,MACnC,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,MAAA,CAAO,IAAA,CAAK,YAAY,CAAA,CAAE;AAAA,OAClC;AAAA,MACA,UAAA,EAAY,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,QAAQ,KAAK,CAAA;AAAA,MAC9C,UAAU,QAAA,CAAS,MAAA,CAAO,IAAA,CAAK,WAAW,EAAE,KAAK;AAAA;AAAA,GACnD;AAEJ;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { default as React, ComponentProps, FC, PropsWithChildren } from 'react';
|
|
2
|
+
import * as Recharts from "recharts";
|
|
3
3
|
export interface CartesianChartEmptyViewProps {
|
|
4
|
-
data?:
|
|
4
|
+
data?: ComponentProps<typeof Recharts.ComposedChart>["data"];
|
|
5
5
|
}
|
|
6
|
-
export interface CartesianChartProps extends Pick<
|
|
6
|
+
export interface CartesianChartProps extends Pick<ComponentProps<typeof Recharts.ComposedChart>, "data" | "className" | "syncId" | "syncMethod">, PropsWithChildren {
|
|
7
7
|
height?: string;
|
|
8
8
|
/** View that is provided when data is empty/undefined */
|
|
9
9
|
emptyView?: React.ComponentType<CartesianChartEmptyViewProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../../src/components/CartesianChart/CartesianChart.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../../src/components/CartesianChart/CartesianChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,UAAU,CAAC;AACrC,OAAO,KAAK,EAAE,EAKZ,KAAK,cAAc,EACnB,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,4BAA4B;IAC3C,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;CAC9D;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CACR,cAAc,CAAC,OAAO,QAAQ,CAAC,aAAa,CAAC,EAC7C,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,YAAY,CAC/C,EACD,iBAAiB;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAC9D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAwB;AACxB,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA0FlD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,QAAQ,MAAM,UAAU,CAAC;AAGrC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,MAAM,WAAW,SACf,SAAQ,IAAI,CACV,QAAQ,CAAC,SAAS,EAChB,WAAW,GACX,SAAS,GACT,SAAS,GACT,aAAa,GACb,KAAK,GACL,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,CACT;IACD,kDAAkD;IAClD,KAAK,CAAC,EAAE,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Area.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,QAAQ,MAAM,UAAU,CAAC;AAGrC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,MAAM,WAAW,SACf,SAAQ,IAAI,CACV,QAAQ,CAAC,SAAS,EAChB,WAAW,GACX,SAAS,GACT,SAAS,GACT,aAAa,GACb,KAAK,GACL,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,CACT;IACD,kDAAkD;IAClD,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,wBAAwB;AACxB,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAc9B,CAAC;AAEF,eAAe,IAAI,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.552",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"dependencies": {
|
|
59
59
|
"@internationalized/string-compiler": "^3.2.6",
|
|
60
60
|
"@mittwald/password-tools-js": "3.0.0-alpha.18",
|
|
61
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
61
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.552",
|
|
62
62
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
63
63
|
"@react-aria/form": "^3.1.2",
|
|
64
64
|
"@react-aria/live-announcer": "^3.4.4",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"react-markdown": "^10.1.0",
|
|
90
90
|
"react-stately": "^3.42.0",
|
|
91
91
|
"react-syntax-highlighter": "^15.6.6",
|
|
92
|
-
"recharts": "3.
|
|
92
|
+
"recharts": "3.4.1",
|
|
93
93
|
"remark-gfm": "^4.0.1",
|
|
94
94
|
"remeda": "^2.32.0",
|
|
95
95
|
"type-fest": "^4.41.0",
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
"@faker-js/faker": "^10.1.0",
|
|
102
102
|
"@internationalized/date": "^3.10.0",
|
|
103
103
|
"@mittwald/flow-core": "",
|
|
104
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
104
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.552",
|
|
105
105
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
106
106
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
107
107
|
"@mittwald/typescript-config": "",
|
|
@@ -174,5 +174,5 @@
|
|
|
174
174
|
"optional": true
|
|
175
175
|
}
|
|
176
176
|
},
|
|
177
|
-
"gitHead": "
|
|
177
|
+
"gitHead": "cabaa1067c8ba3e2d5ddfc7597bf345bb3067390"
|
|
178
178
|
}
|