@mittwald/flow-react-components 1.6.0-next.5 → 1.6.0-next.7
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/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.mjs +6 -8
- package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.mjs.map +1 -1
- package/package.json +10 -10
|
@@ -16,10 +16,12 @@ import { TypedChartLegend } from "./components/ChartLegend/ChartLegend.mjs";
|
|
|
16
16
|
import { TypedChartTooltip } from "./components/ChartTooltip/types.mjs";
|
|
17
17
|
import { TypedLine } from "./components/Line/Line.mjs";
|
|
18
18
|
import clsx from "clsx";
|
|
19
|
-
import {
|
|
19
|
+
import { useId, useMemo } from "react";
|
|
20
20
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
21
21
|
import { ComposedChart, ResponsiveContainer } from "recharts";
|
|
22
22
|
//#region src/components/CartesianChart/CartesianChart.tsx
|
|
23
|
+
var reactComponentTypes = [Symbol.for("react.memo"), Symbol.for("react.forward_ref")];
|
|
24
|
+
var isEmptyViewComponent = (value) => typeof value === "function" || typeof value === "object" && value !== null && "$$typeof" in value && reactComponentTypes.includes(value.$$typeof);
|
|
23
25
|
/** @flr-generate all */
|
|
24
26
|
var CartesianChart = (props) => {
|
|
25
27
|
const { children, data, className, height, flexGrow, emptyView, layout = "horizontal", ...rest } = props;
|
|
@@ -27,12 +29,8 @@ var CartesianChart = (props) => {
|
|
|
27
29
|
const { viewDimensions, ref: containerRef } = useChartClipRect();
|
|
28
30
|
const showEmptyView = !!((!data || data.length === 0) && emptyView);
|
|
29
31
|
const rootClassName = clsx(CartesianChart_module_default.cartesianChart, showEmptyView && CartesianChart_module_default.emptyView, className);
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
if (isValidElement(emptyView)) return emptyView;
|
|
33
|
-
if (!emptyView) return;
|
|
34
|
-
return null;
|
|
35
|
-
}, [emptyView]);
|
|
32
|
+
const EmptyViewComponent = isEmptyViewComponent(emptyView) ? emptyView : void 0;
|
|
33
|
+
if (EmptyViewComponent) warnDeprecation("Passing a component to the 'emptyView' prop is deprecated and will be removed in a future release. Use 'emptyView={<Element />}' instead.");
|
|
36
34
|
const chartId = useId().replaceAll(/[^\w-]/g, "");
|
|
37
35
|
const contextValue = useMemo(() => ({
|
|
38
36
|
layout,
|
|
@@ -74,7 +72,7 @@ var CartesianChart = (props) => {
|
|
|
74
72
|
...viewDimensions,
|
|
75
73
|
children: /* @__PURE__ */ jsx(DivView, {
|
|
76
74
|
className: CartesianChart_module_default.emptyViewContainer,
|
|
77
|
-
children:
|
|
75
|
+
children: EmptyViewComponent ? /* @__PURE__ */ jsx(EmptyViewComponent, { data }) : emptyView
|
|
78
76
|
})
|
|
79
77
|
})]
|
|
80
78
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartesianChart.mjs","names":["styles"],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n type ComponentProps,\n type ComponentType,\n type FC,\n
|
|
1
|
+
{"version":3,"file":"CartesianChart.mjs","names":["styles"],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n type ComponentProps,\n type ComponentType,\n type FC,\n type PropsWithChildren,\n type ReactNode,\n useId,\n useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n CartesianChartLayout,\n ChartDataValue,\n DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n extends\n Pick<\n ComponentProps<typeof ComposedChart>,\n \"className\" | \"syncId\" | \"syncMethod\"\n >,\n PropsWithChildren {\n /** The data points rendered by the chart. */\n data?: TData[];\n\n /** The height of the chart. */\n height?: string;\n\n /**\n * The orientation of the axes and graphical items. `\"horizontal\"` puts the\n * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n * on their own; only the `dataKey` moves to whichever axis is the categorical\n * one.\n *\n * @default \"horizontal\"\n */\n layout?: CartesianChartLayout;\n\n /** View that is provided when data is empty/undefined */\n emptyView?: ReactNode;\n\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\nconst reactComponentTypes = [\n Symbol.for(\"react.memo\"),\n Symbol.for(\"react.forward_ref\"),\n];\n\nconst isEmptyViewComponent = (\n value: unknown,\n): value is ComponentType<CartesianChartEmptyViewProps> =>\n typeof value === \"function\" ||\n (typeof value === \"object\" &&\n value !== null &&\n \"$$typeof\" in value &&\n reactComponentTypes.includes(value.$$typeof as symbol));\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,\n layout = \"horizontal\",\n ...rest\n } = props;\n const warnDeprecation = useWarnDeprecation();\n\n const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n const showEmptyView = !!((!data || data.length === 0) && emptyView);\n const rootClassName = clsx(\n styles.cartesianChart,\n showEmptyView && styles.emptyView,\n className,\n );\n const EmptyViewComponent = isEmptyViewComponent(emptyView)\n ? emptyView\n : undefined;\n\n if (EmptyViewComponent) {\n warnDeprecation(\n \"Passing a component to the 'emptyView' prop is deprecated and will be removed in a future release. Use 'emptyView={<Element />}' instead.\",\n );\n }\n\n const chartId = useId().replaceAll(/[^\\w-]/g, \"\");\n const contextValue = useMemo(\n () => ({ layout, stackIdPrefix: `${chartId}-` }),\n [layout, chartId],\n );\n\n const isSkeleton = useSkeletonMode();\n\n /* No recharts and no svg: one surface in the size the chart would take. */\n if (isSkeleton) {\n return (\n <div\n className={styles.skeleton}\n style={{\n height,\n aspectRatio: height ? undefined : 3,\n flex: flexGrow ? 1 : undefined,\n }}\n aria-hidden\n inert\n />\n );\n }\n\n return (\n <CartesianChartContextProvider value={contextValue}>\n <Wrap if={height}>\n <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n <ResponsiveContainer\n initialDimension={{\n // fix warning on initial render\n width: 1,\n height: 1,\n }}\n width={height ? undefined : \"100%\"}\n aspect={height ? undefined : 3}\n ref={containerRef}\n >\n <ComposedChart\n data={data}\n className={rootClassName}\n layout={layout}\n {...rest}\n >\n {children}\n {showEmptyView && viewDimensions && (\n <foreignObject {...viewDimensions}>\n <DivView className={styles.emptyViewContainer}>\n {EmptyViewComponent ? (\n <EmptyViewComponent data={data} />\n ) : (\n emptyView\n )}\n </DivView>\n </foreignObject>\n )}\n </ComposedChart>\n </ResponsiveContainer>\n </div>\n </Wrap>\n </CartesianChartContextProvider>\n );\n};\n\nexport const typedCartesianChart = <\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n TData extends ChartDataValue<any> = ChartDataValue<any>,\n XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n Area: TypedArea<TData>(),\n Bar: TypedBar<TData>(),\n XAxis: TypedXAxis<TData, XAxisDataKey>(),\n YAxis: TypedYAxis<TData>(),\n Grid: TypedChartGrid(),\n Legend: TypedChartLegend(),\n Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuEA,IAAM,sBAAsB,CAC1B,OAAO,IAAI,YAAY,GACvB,OAAO,IAAI,mBAAmB,CAChC;AAEA,IAAM,wBACJ,UAEA,OAAO,UAAU,cAChB,OAAO,UAAU,YAChB,UAAU,QACV,cAAc,SACd,oBAAoB,SAAS,MAAM,QAAkB;;AAGzD,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpBA,8BAAO,gBACP,iBAAiBA,8BAAO,WACxB,SACF;CACA,MAAM,qBAAqB,qBAAqB,SAAS,IACrD,YACA,KAAA;CAEJ,IAAI,oBACF,gBACE,2IACF;CAGF,MAAM,UAAU,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAChD,MAAM,eAAe,eACZ;EAAE;EAAQ,eAAe,GAAG,QAAQ;CAAG,IAC9C,CAAC,QAAQ,OAAO,CAClB;CAKA,IAHmB,gBAGf,GACF,OACE,oBAAC,OAAD;EACE,WAAWA,8BAAO;EAClB,OAAO;GACL;GACA,aAAa,SAAS,KAAA,IAAY;GAClC,MAAM,WAAW,IAAI,KAAA;EACvB;EACA,eAAA;EACA,OAAA;CACD,CAAA;CAIL,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAWA,8BAAO;QACxB,UAAA,qBACC,oBAAC,oBAAD,EAA0B,KAAO,CAAA,IAEjC;OAEK,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.6.0-next.
|
|
3
|
+
"version": "1.6.0-next.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -84,9 +84,9 @@
|
|
|
84
84
|
"@internationalized/string-compiler": "^3.4.1",
|
|
85
85
|
"@lezer/common": "^1.5.2",
|
|
86
86
|
"@lezer/highlight": "^1.2.3",
|
|
87
|
-
"@mittwald/flow-icons": "^1.6.0-next.
|
|
87
|
+
"@mittwald/flow-icons": "^1.6.0-next.7",
|
|
88
88
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
89
|
-
"@mittwald/react-tunnel": "^1.6.0-next.
|
|
89
|
+
"@mittwald/react-tunnel": "^1.6.0-next.7",
|
|
90
90
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
91
91
|
"@react-aria/form": "^3.2.1",
|
|
92
92
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -139,13 +139,13 @@
|
|
|
139
139
|
"@internationalized/date": "^3.12.3",
|
|
140
140
|
"@lezer/generator": "^1.8.0",
|
|
141
141
|
"@lezer/lr": "^1.4.10",
|
|
142
|
-
"@mittwald/flow-components-base": "1.6.0-next.
|
|
143
|
-
"@mittwald/flow-core": "1.6.0-next.
|
|
144
|
-
"@mittwald/flow-design-tokens": "1.6.0-next.
|
|
145
|
-
"@mittwald/flow-icons-base": "1.6.0-next.
|
|
142
|
+
"@mittwald/flow-components-base": "1.6.0-next.7",
|
|
143
|
+
"@mittwald/flow-core": "1.6.0-next.7",
|
|
144
|
+
"@mittwald/flow-design-tokens": "1.6.0-next.7",
|
|
145
|
+
"@mittwald/flow-icons-base": "1.6.0-next.7",
|
|
146
146
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
147
147
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
148
|
-
"@mittwald/typescript-config": "1.6.0-next.
|
|
148
|
+
"@mittwald/typescript-config": "1.6.0-next.7",
|
|
149
149
|
"@nx/storybook": "^22.7.6",
|
|
150
150
|
"@storybook/addon-a11y": "^10.5.10",
|
|
151
151
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -199,7 +199,7 @@
|
|
|
199
199
|
},
|
|
200
200
|
"peerDependencies": {
|
|
201
201
|
"@internationalized/date": "^3.12.2",
|
|
202
|
-
"@mittwald/flow-icons-pro": "1.6.0-next.
|
|
202
|
+
"@mittwald/flow-icons-pro": "1.6.0-next.7",
|
|
203
203
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
204
204
|
"next": "^16.2.3",
|
|
205
205
|
"react": "^19.2.0",
|
|
@@ -223,5 +223,5 @@
|
|
|
223
223
|
"browserslist": [
|
|
224
224
|
"baseline widely available"
|
|
225
225
|
],
|
|
226
|
-
"gitHead": "
|
|
226
|
+
"gitHead": "6c53d07849c13c8447e15ee7596986469f3137f3"
|
|
227
227
|
}
|