@mittwald/flow-react-components 0.2.0-alpha.184 → 0.2.0-alpha.185
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 +2498 -2460
- package/dist/css/all.css +1 -1
- package/dist/js/components/src/components/AreaChart/AreaChart.mjs +52 -8
- package/dist/js/components/src/components/AreaChart/AreaChart.mjs.map +1 -1
- package/dist/js/components/src/components/AreaChart/components/Area/Area.mjs +1 -1
- package/dist/js/components/src/components/AreaChart/components/Area/Area.mjs.map +1 -1
- package/dist/js/components/src/components/ChartTooltip/ChartTooltip.mjs.map +1 -1
- package/dist/types/components/AreaChart/AreaChart.d.ts +11 -1
- package/dist/types/components/AreaChart/AreaChart.d.ts.map +1 -1
- package/dist/types/components/AreaChart/index.d.ts +1 -1
- package/dist/types/components/AreaChart/index.d.ts.map +1 -1
- package/dist/types/components/AreaChart/stories/Default.stories.d.ts +1 -0
- package/dist/types/components/AreaChart/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/ChartTooltip/ChartTooltip.d.ts +1 -1
- package/dist/types/components/ChartTooltip/ChartTooltip.d.ts.map +1 -1
- package/package.json +5 -5
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/* */
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
4
|
import * as Recharts from 'recharts';
|
|
5
|
-
import { Children, cloneElement } from 'react';
|
|
5
|
+
import { Children, cloneElement, useRef, useState, useEffect } from 'react';
|
|
6
6
|
import { Area } from './components/Area/Area.mjs';
|
|
7
7
|
import { CartesianGrid } from '../CartesianGrid/CartesianGrid.mjs';
|
|
8
8
|
import clsx from 'clsx';
|
|
@@ -10,7 +10,15 @@ import styles from './AreaChart.module.scss.mjs';
|
|
|
10
10
|
import { Wrap } from '../Wrap/Wrap.mjs';
|
|
11
11
|
|
|
12
12
|
const AreaChart = (props) => {
|
|
13
|
-
const {
|
|
13
|
+
const {
|
|
14
|
+
children,
|
|
15
|
+
data,
|
|
16
|
+
className,
|
|
17
|
+
height,
|
|
18
|
+
flexGrow,
|
|
19
|
+
emptyView: EmptyView,
|
|
20
|
+
...rest
|
|
21
|
+
} = props;
|
|
14
22
|
const rootClassName = clsx(styles.areaChart, className);
|
|
15
23
|
const areasWithoutDots = [];
|
|
16
24
|
const areasWithDots = [];
|
|
@@ -38,12 +46,48 @@ const AreaChart = (props) => {
|
|
|
38
46
|
otherChildren.push(element);
|
|
39
47
|
}
|
|
40
48
|
});
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
49
|
+
const showEmptyView = (!data || data.length === 0) && EmptyView;
|
|
50
|
+
const chartContainerRef = useRef(null);
|
|
51
|
+
const [viewDimensions, setViewDimensions] = useState(null);
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
if (showEmptyView) {
|
|
54
|
+
const updateDimensions = () => {
|
|
55
|
+
const svg = chartContainerRef.current?.querySelector(
|
|
56
|
+
"svg"
|
|
57
|
+
);
|
|
58
|
+
if (!svg) return;
|
|
59
|
+
const clip = svg.querySelector("clipPath rect");
|
|
60
|
+
if (clip) {
|
|
61
|
+
const x = parseFloat(clip.getAttribute("x") ?? "0");
|
|
62
|
+
const y = parseFloat(clip.getAttribute("y") ?? "0");
|
|
63
|
+
const width = parseFloat(clip.getAttribute("width") ?? "0");
|
|
64
|
+
const height2 = parseFloat(clip.getAttribute("height") ?? "0");
|
|
65
|
+
setViewDimensions({ x, y, width, height: height2 });
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
updateDimensions();
|
|
69
|
+
const container = chartContainerRef.current;
|
|
70
|
+
const observer = new ResizeObserver(updateDimensions);
|
|
71
|
+
if (container) observer.observe(container);
|
|
72
|
+
return () => {
|
|
73
|
+
observer.disconnect();
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
}, []);
|
|
77
|
+
return /* @__PURE__ */ jsx(Wrap, { if: height, children: /* @__PURE__ */ jsx(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
style: { height, flex: flexGrow ? 1 : void 0 },
|
|
81
|
+
ref: chartContainerRef,
|
|
82
|
+
children: /* @__PURE__ */ jsx(Recharts.ResponsiveContainer, { children: /* @__PURE__ */ jsxs(Recharts.AreaChart, { data, className: rootClassName, ...rest, children: [
|
|
83
|
+
!showEmptyView && gridChildren,
|
|
84
|
+
areasWithoutDots,
|
|
85
|
+
otherChildren,
|
|
86
|
+
areasWithDots,
|
|
87
|
+
showEmptyView && viewDimensions && /* @__PURE__ */ jsx("foreignObject", { ...viewDimensions, children: /* @__PURE__ */ jsx(EmptyView, { data }) })
|
|
88
|
+
] }) })
|
|
89
|
+
}
|
|
90
|
+
) });
|
|
47
91
|
};
|
|
48
92
|
|
|
49
93
|
export { AreaChart, AreaChart as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AreaChart.mjs","sources":["../../../../../../src/components/AreaChart/AreaChart.tsx"],"sourcesContent":["import * as Recharts from \"recharts\";\nimport type { CategoricalChartProps } from \"recharts/types/chart/generateCategoricalChart\";\nimport {\n Children,\n cloneElement,\n type FC,\n type PropsWithChildren,\n type ReactElement,\n} from \"react\";\nimport { Area, type AreaProps } from \"./components/Area\";\nimport CartesianGrid from \"../CartesianGrid\";\nimport clsx from \"clsx\";\nimport styles from \"./AreaChart.module.scss\";\nimport Wrap from \"../Wrap\";\n\nexport interface AreaChartProps\n extends Pick<\n CategoricalChartProps,\n \"data\" | \"className\" | \"syncId\" | \"syncMethod\"\n >,\n PropsWithChildren {\n height?: string;\n}\n\n/** @flr-generate all */\nexport const AreaChart: FC<AreaChartProps> = (props) => {\n const {
|
|
1
|
+
{"version":3,"file":"AreaChart.mjs","sources":["../../../../../../src/components/AreaChart/AreaChart.tsx"],"sourcesContent":["import * as Recharts from \"recharts\";\nimport type { CategoricalChartProps } from \"recharts/types/chart/generateCategoricalChart\";\nimport React, {\n Children,\n cloneElement,\n useEffect,\n useRef,\n useState,\n type FC,\n type PropsWithChildren,\n type ReactElement,\n type SVGProps,\n} from \"react\";\nimport { Area, type AreaProps } from \"./components/Area\";\nimport CartesianGrid from \"../CartesianGrid\";\nimport clsx from \"clsx\";\nimport styles from \"./AreaChart.module.scss\";\nimport Wrap from \"../Wrap\";\n\nexport interface AreaChartEmptyViewProps {\n data?: CategoricalChartProps[\"data\"];\n}\n\nexport interface AreaChartProps\n extends Pick<\n CategoricalChartProps,\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<AreaChartEmptyViewProps>;\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 AreaChart: FC<AreaChartProps> = (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.areaChart, className);\n\n // render order: grid, areas without dots, other children, areas with dots\n // this is needed to ensure that the dots will always overlay the areas\n const areasWithoutDots: ReactElement[] = [];\n const areasWithDots: ReactElement[] = [];\n const otherChildren: ReactElement[] = [];\n const gridChildren: ReactElement[] = [];\n\n Children.forEach(children, (child, index) => {\n if (!child) return;\n const element = child as ReactElement;\n\n if (element.type === CartesianGrid) {\n gridChildren.push(element);\n } else if (element.type === Area) {\n areasWithoutDots.push(\n cloneElement(element as ReactElement<AreaProps>, {\n onlyDots: false,\n key: `area-${index}`,\n }),\n );\n areasWithDots.push(\n cloneElement(element as ReactElement<AreaProps>, {\n onlyDots: true,\n key: `area-dots-${index}`,\n }),\n );\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.AreaChart data={data} className={rootClassName} {...rest}>\n {!showEmptyView && gridChildren}\n {areasWithoutDots}\n {otherChildren}\n {areasWithDots}\n {showEmptyView && viewDimensions && (\n <foreignObject {...viewDimensions}>\n <EmptyView data={data} />\n </foreignObject>\n )}\n </Recharts.AreaChart>\n </Recharts.ResponsiveContainer>\n </div>\n </Wrap>\n );\n};\n\nexport default AreaChart;\n"],"names":["height"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Area.mjs","sources":["../../../../../../../../src/components/AreaChart/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 { CategoricalColors } from \"@/lib/tokens/CategoricalColors\";\nimport { getCategoricalColorValue } from \"@/lib/tokens/getCategoricalColorValue\";\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?: CategoricalColors;\n /** @internal */\n onlyDots?: boolean;\n}\n\n/** @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n const {\n color = \"sea-green\",\n stackId =
|
|
1
|
+
{"version":3,"file":"Area.mjs","sources":["../../../../../../../../src/components/AreaChart/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 { CategoricalColors } from \"@/lib/tokens/CategoricalColors\";\nimport { getCategoricalColorValue } from \"@/lib/tokens/getCategoricalColorValue\";\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?: CategoricalColors;\n /** @internal */\n onlyDots?: boolean;\n}\n\n/** @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n const {\n color = \"sea-green\",\n stackId = 1,\n fillOpacity = 1,\n onlyDots = true,\n ...rest\n } = props;\n\n return (\n <Recharts.Area\n stackId={stackId}\n fillOpacity={fillOpacity}\n {...rest}\n activeDot={\n onlyDots ? <AreaDot color={getCategoricalColorValue(color)} /> : false\n }\n fill={onlyDots ? \"none\" : getCategoricalColorValue(color)}\n stroke={onlyDots ? \"none\" : tokens.area[\"border-color\"].value}\n strokeWidth={onlyDots ? undefined : tokens.area[\"border-width\"].value}\n />\n );\n};\n\nexport default Area;\n"],"names":[],"mappings":";;;;;;;AA2Ba,MAAA,IAAA,GAAsB,CAAC,KAAU,KAAA;AAC5C,EAAM,MAAA;AAAA,IACJ,KAAQ,GAAA,WAAA;AAAA,IACR,OAAU,GAAA,CAAA;AAAA,IACV,WAAc,GAAA,CAAA;AAAA,IACd,QAAW,GAAA,IAAA;AAAA,IACX,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EACE,uBAAA,GAAA;AAAA,IAAC,QAAS,CAAA,IAAA;AAAA,IAAT;AAAA,MACC,OAAA;AAAA,MACA,WAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,SAAA,EACE,2BAAY,GAAA,CAAA,OAAA,EAAA,EAAQ,OAAO,wBAAyB,CAAA,KAAK,GAAG,CAAK,GAAA,KAAA;AAAA,MAEnE,IAAM,EAAA,QAAA,GAAW,MAAS,GAAA,wBAAA,CAAyB,KAAK,CAAA;AAAA,MACxD,QAAQ,QAAW,GAAA,MAAA,GAAS,MAAO,CAAA,IAAA,CAAK,cAAc,CAAE,CAAA,KAAA;AAAA,MACxD,aAAa,QAAW,GAAA,MAAA,GAAY,MAAO,CAAA,IAAA,CAAK,cAAc,CAAE,CAAA;AAAA;AAAA,GAClE;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartTooltip.mjs","sources":["../../../../../../src/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { TooltipContent } from \"./components\";\n\nexport type TooltipLineFormatter = (\n value: ValueType,\n name: NameType,\n index: number,\n unit?: string | number,\n) => string;\n\nexport type TooltipHeadingFormatter = (title: 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 Pick<\n Recharts.TooltipProps<ValueType, NameType>,\n \"wrapperClassName\" | \"allowEscapeViewBox\"\n >,\n WithTooltipFormatters {}\n\n/** @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n const { formatter, headingFormatter, ...rest } = props;\n return (\n <Recharts.Tooltip\n {...rest}\n content={(props) => {\n const {\n formatter: ignoredFormatter,\n labelFormatter: ignoredLabelFormatter,\n ...rest\n } = props;\n\n return (\n <TooltipContent\n formatter={formatter}\n headingFormatter={headingFormatter}\n {...rest}\n />\n );\n }}\n cursor={false}\n />\n );\n};\n\nexport default ChartTooltip;\n"],"names":["props","rest"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"ChartTooltip.mjs","sources":["../../../../../../src/components/ChartTooltip/ChartTooltip.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n NameType,\n ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\";\nimport { TooltipContent } from \"./components\";\n\nexport type TooltipLineFormatter = (\n value: ValueType,\n name: NameType,\n index: number,\n unit?: string | number,\n) => string;\n\nexport type TooltipHeadingFormatter = (\n title: string | number | undefined,\n) => 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 Pick<\n Recharts.TooltipProps<ValueType, NameType>,\n \"wrapperClassName\" | \"allowEscapeViewBox\"\n >,\n WithTooltipFormatters {}\n\n/** @flr-generate all */\nexport const ChartTooltip: FC<ChartTooltipProps> = (props) => {\n const { formatter, headingFormatter, ...rest } = props;\n return (\n <Recharts.Tooltip\n {...rest}\n content={(props) => {\n const {\n formatter: ignoredFormatter,\n labelFormatter: ignoredLabelFormatter,\n ...rest\n } = props;\n\n return (\n <TooltipContent\n formatter={formatter}\n headingFormatter={headingFormatter}\n {...rest}\n />\n );\n }}\n cursor={false}\n />\n );\n};\n\nexport default ChartTooltip;\n"],"names":["props","rest"],"mappings":";;;;AAwCa,MAAA,YAAA,GAAsC,CAAC,KAAU,KAAA;AAC5D,EAAA,MAAM,EAAE,SAAA,EAAW,gBAAkB,EAAA,GAAG,MAAS,GAAA,KAAA;AACjD,EACE,uBAAA,GAAA;AAAA,IAAC,QAAS,CAAA,OAAA;AAAA,IAAT;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,OAAA,EAAS,CAACA,MAAU,KAAA;AAClB,QAAM,MAAA;AAAA,UACJ,SAAW,EAAA,gBAAA;AAAA,UACX,cAAgB,EAAA,qBAAA;AAAA,UAChB,GAAGC;AAAA,SACDD,GAAAA,MAAAA;AAEJ,QACE,uBAAA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,SAAA;AAAA,YACA,gBAAA;AAAA,YACC,GAAGC;AAAA;AAAA,SACN;AAAA,OAEJ;AAAA,MACA,MAAQ,EAAA;AAAA;AAAA,GACV;AAEJ;;;;"}
|
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
import { CategoricalChartProps } from 'recharts/types/chart/generateCategoricalChart';
|
|
2
|
-
import { FC, PropsWithChildren } from 'react';
|
|
2
|
+
import { default as React, FC, PropsWithChildren } from 'react';
|
|
3
|
+
export interface AreaChartEmptyViewProps {
|
|
4
|
+
data?: CategoricalChartProps["data"];
|
|
5
|
+
}
|
|
3
6
|
export interface AreaChartProps extends Pick<CategoricalChartProps, "data" | "className" | "syncId" | "syncMethod">, PropsWithChildren {
|
|
4
7
|
height?: string;
|
|
8
|
+
/** View that is provided when data is empty/undefined */
|
|
9
|
+
emptyView?: React.ComponentType<AreaChartEmptyViewProps>;
|
|
10
|
+
/**
|
|
11
|
+
* Allow the height controlling container to set flex-grow: 1. Can only be
|
|
12
|
+
* used in combination with `height`
|
|
13
|
+
*/
|
|
14
|
+
flexGrow?: boolean;
|
|
5
15
|
}
|
|
6
16
|
/** @flr-generate all */
|
|
7
17
|
export declare const AreaChart: FC<AreaChartProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../../src/components/AreaChart/AreaChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AAC3F,OAAO,
|
|
1
|
+
{"version":3,"file":"AreaChart.d.ts","sourceRoot":"","sources":["../../../../src/components/AreaChart/AreaChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AAC3F,OAAO,KAAK,EAAE,EAMZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CACR,qBAAqB,EACrB,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,uBAAuB,CAAC,CAAC;IACzD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAwB;AACxB,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAuGxC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AreaChart } from './AreaChart';
|
|
2
|
-
export { type AreaChartProps, AreaChart } from './AreaChart';
|
|
2
|
+
export { type AreaChartProps, AreaChart, type AreaChartEmptyViewProps, } from './AreaChart';
|
|
3
3
|
export * from './components/Area';
|
|
4
4
|
export default AreaChart;
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/AreaChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/AreaChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EACL,KAAK,cAAc,EACnB,SAAS,EACT,KAAK,uBAAuB,GAC7B,MAAM,aAAa,CAAC;AACrB,cAAc,mBAAmB,CAAC;AAClC,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/AreaChart/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,SAAS,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/AreaChart/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,SAAS,MAAM,cAAc,CAAC;AAuDrC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAUhC,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"}
|
|
@@ -2,7 +2,7 @@ import { FC } from 'react';
|
|
|
2
2
|
import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
|
|
3
3
|
import * as Recharts from "recharts";
|
|
4
4
|
export type TooltipLineFormatter = (value: ValueType, name: NameType, index: number, unit?: string | number) => string;
|
|
5
|
-
export type TooltipHeadingFormatter = (title: string) => string;
|
|
5
|
+
export type TooltipHeadingFormatter = (title: string | number | undefined) => string;
|
|
6
6
|
export interface WithTooltipFormatters {
|
|
7
7
|
/**
|
|
8
8
|
* A formatter function for the lines in the tooltip. Can be used for purposes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/ChartTooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,QAAQ,MAAM,UAAU,CAAC;AACrC,OAAO,KAAK,EACV,QAAQ,EACR,SAAS,EACV,MAAM,gDAAgD,CAAC;AAGxD,MAAM,MAAM,oBAAoB,GAAG,CACjC,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,KACnB,MAAM,CAAC;AAEZ,MAAM,MAAM,uBAAuB,GAAG,
|
|
1
|
+
{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/ChartTooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,QAAQ,MAAM,UAAU,CAAC;AACrC,OAAO,KAAK,EACV,QAAQ,EACR,SAAS,EACV,MAAM,gDAAgD,CAAC;AAGxD,MAAM,MAAM,oBAAoB,GAAG,CACjC,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,KACnB,MAAM,CAAC;AAEZ,MAAM,MAAM,uBAAuB,GAAG,CACpC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAC/B,MAAM,CAAC;AAEZ,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;CAC5C;AAED,MAAM,WAAW,iBACf,SAAQ,IAAI,CACR,QAAQ,CAAC,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC,EAC1C,kBAAkB,GAAG,oBAAoB,CAC1C,EACD,qBAAqB;CAAG;AAE5B,wBAAwB;AACxB,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAuB9C,CAAC;AAEF,eAAe,YAAY,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.185",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@chakra-ui/live-region": "^2.1.0",
|
|
55
55
|
"@internationalized/string-compiler": "^3.2.6",
|
|
56
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
56
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.185",
|
|
57
57
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
58
58
|
"@react-aria/form": "^3.0.14",
|
|
59
59
|
"@react-aria/utils": "^3.28.1",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"react-markdown": "^10.1.0",
|
|
84
84
|
"react-stately": "^3.36.1",
|
|
85
85
|
"react-syntax-highlighter": "^15.6.1",
|
|
86
|
-
"recharts": "3.0.0-
|
|
86
|
+
"recharts": "3.0.0-beta.1",
|
|
87
87
|
"remeda": "^2.21.1",
|
|
88
88
|
"type-fest": "^4.37.0",
|
|
89
89
|
"use-callback-ref": "^1.3.3",
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
"devDependencies": {
|
|
93
93
|
"@faker-js/faker": "^9.6.0",
|
|
94
94
|
"@internationalized/date": "^3.7.0",
|
|
95
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
95
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.185",
|
|
96
96
|
"@mittwald/react-use-promise": "^2.6.0",
|
|
97
97
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.3",
|
|
98
98
|
"@mittwald/typescript-config": "",
|
|
@@ -173,5 +173,5 @@
|
|
|
173
173
|
"optional": true
|
|
174
174
|
}
|
|
175
175
|
},
|
|
176
|
-
"gitHead": "
|
|
176
|
+
"gitHead": "2764aa17418791a8cf488634b1a7d11eac0aa735"
|
|
177
177
|
}
|