@tap-payments/os-micro-frontend-shared 0.1.365-test.10 → 0.1.365-test.12

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.
Files changed (9) hide show
  1. package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.d.ts +13 -0
  2. package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.js +21 -0
  3. package/build/components/MultiDatakeyDonut/index.d.ts +2 -0
  4. package/build/components/MultiDatakeyDonut/index.js +2 -0
  5. package/build/components/MultiDatakeyDonut/style.d.ts +28 -0
  6. package/build/components/MultiDatakeyDonut/style.js +46 -0
  7. package/build/components/index.d.ts +1 -0
  8. package/build/components/index.js +1 -0
  9. package/package.json +2 -2
package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { ReactNode } from 'react';
2
+ interface DonutProps {
3
+ isLoading: boolean;
4
+ size?: number;
5
+ chartData: Array<{
6
+ name: string;
7
+ value: number;
8
+ color: string;
9
+ }>;
10
+ chartInfo?: ReactNode;
11
+ }
12
+ export default function MultiDatakeyDonut({ isLoading, chartData, size, }: DonutProps): import("react/jsx-runtime").JSX.Element;
13
+ export {};
package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.js ADDED
@@ -0,0 +1,21 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
3
+ import { DonutWrapper, CenterOverlay, CenterItem, ValueText, LegendWrapper, LegendDot, LegendText } from './style';
4
+ import Skeleton from '../Skeleton';
5
+ export default function MultiDatakeyDonut({ isLoading = true, chartData,
6
+ // activeDataKey = 'count',
7
+ size = 170, }) {
8
+ // const chartData = [
9
+ // {
10
+ // name: 'Customer',
11
+ // value: activeDataKey === 'amount' ? data.customerAmount : data.customerCount,
12
+ // color: '#76BB40',
13
+ // },
14
+ // {
15
+ // name: 'Merchant',
16
+ // value: activeDataKey === 'amount' ? data.merchantAmount : data.merchantCount,
17
+ // color: '#1F88D0',
18
+ // },
19
+ // ]
20
+ return (_jsxs(DonutWrapper, Object.assign({ sx: { width: size, height: size } }, { children: [_jsx(ResponsiveContainer, { children: _jsxs(PieChart, { children: [_jsx(Pie, { data: [{ value: 100 }], dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", fill: "#E5E7EB", stroke: "none", isAnimationActive: false }), _jsx(Pie, Object.assign({ data: chartData, dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", cornerRadius: 0, stroke: "none", startAngle: 90, endAngle: -270 }, { children: chartData.map((entry) => (_jsx(Cell, { fill: entry.color }, entry.name))) }))] }) }), _jsx(CenterOverlay, { children: chartData.map((entry) => (_jsxs(CenterItem, { children: [isLoading ? _jsx(Skeleton, { width: 49, height: 7, sx: { margin: '2px' } }) : _jsx(ValueText, { children: entry.value.toLocaleString() }), isLoading ? (_jsx(Skeleton, { width: 80, height: 7 })) : (_jsxs(LegendWrapper, { children: [_jsx(LegendDot, { color: entry.color }), _jsx(LegendText, { children: entry.name })] }))] }, entry.name))) })] })));
21
+ }
package/build/components/MultiDatakeyDonut/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import PieChart from './MultiDatakeyDonut';
2
+ export default PieChart;
package/build/components/MultiDatakeyDonut/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import PieChart from './MultiDatakeyDonut';
2
+ export default PieChart;
package/build/components/MultiDatakeyDonut/style.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ /// <reference types="react" />
2
+ export declare const DonutWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
3
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
4
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
5
+ export declare const CenterOverlay: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
6
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
7
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
8
+ export declare const CenterItem: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
9
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
10
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
11
+ export declare const ValueText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
12
+ ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
13
+ }, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
14
+ component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
15
+ } & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
16
+ export declare const LegendWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
17
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
18
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
19
+ export declare const LegendDot: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
20
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
21
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
22
+ color: string;
23
+ }, {}, {}>;
24
+ export declare const LegendText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
25
+ ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
26
+ }, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
27
+ component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
28
+ } & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
package/build/components/MultiDatakeyDonut/style.js ADDED
@@ -0,0 +1,46 @@
1
+ import { Box } from '@mui/material';
2
+ import { styled } from '@mui/material/styles';
3
+ import Text from '../Text';
4
+ export const DonutWrapper = styled(Box)(() => ({
5
+ width: '100%',
6
+ maxWidth: 500,
7
+ aspectRatio: '1',
8
+ position: 'relative',
9
+ }));
10
+ export const CenterOverlay = styled(Box)(({ theme }) => ({
11
+ position: 'absolute',
12
+ inset: 0,
13
+ display: 'flex',
14
+ flexDirection: 'column',
15
+ justifyContent: 'center',
16
+ alignItems: 'center',
17
+ pointerEvents: 'none',
18
+ gap: theme.spacing(1),
19
+ }));
20
+ export const CenterItem = styled(Box)(({ theme }) => ({
21
+ display: 'flex',
22
+ flexDirection: 'column',
23
+ alignItems: 'center',
24
+ justifyContent: 'center',
25
+ }));
26
+ export const ValueText = styled(Text)(({ theme }) => ({
27
+ fontSize: 12,
28
+ fontWeight: 700,
29
+ lineHeight: 1.2,
30
+ wordWrap: 'break-word',
31
+ }));
32
+ export const LegendWrapper = styled(Box)(({ theme }) => ({
33
+ display: 'flex',
34
+ alignItems: 'center',
35
+ gap: 4,
36
+ }));
37
+ export const LegendDot = styled(Box)(({ color }) => ({
38
+ width: 8,
39
+ height: 8,
40
+ borderRadius: '50%',
41
+ background: color,
42
+ }));
43
+ export const LegendText = styled(Text)(({ theme }) => ({
44
+ fontSize: 11,
45
+ fontWeight: 500,
46
+ }));
package/build/components/index.d.ts CHANGED
@@ -153,3 +153,4 @@ export * from './SalesChannelFilter';
153
153
  export * from './ReferenceTypeFilter';
154
154
  export * from './ListColumnFilter';
155
155
  export * from './VerificationIcon';
156
+ export * from './MultiDatakeyDonut';
package/build/components/index.js CHANGED
@@ -153,3 +153,4 @@ export * from './SalesChannelFilter';
153
153
  export * from './ReferenceTypeFilter';
154
154
  export * from './ListColumnFilter';
155
155
  export * from './VerificationIcon';
156
+ export * from './MultiDatakeyDonut';
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.365-test.10",
5
- "testVersion": 10,
4
+ "version": "0.1.365-test.12",
5
+ "testVersion": 12,
6
6
  "type": "module",
7
7
  "main": "build/index.js",
8
8
  "module": "build/index.js",