@tap-payments/os-micro-frontend-shared 0.1.365-test.13 → 0.1.365-test.15

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 (5) hide show
  1. package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.d.ts +1 -2
  2. package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.js +16 -18
  3. package/build/components/MultiDatakeyDonut/style.d.ts +1 -19
  4. package/build/components/MultiDatakeyDonut/style.js +3 -26
  5. package/package.json +2 -2
package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
2
  interface DonutProps {
3
- isLoading: boolean;
4
3
  size?: number;
5
4
  chartData: Array<{
6
5
  name: string;
@@ -9,5 +8,5 @@ interface DonutProps {
9
8
  }>;
10
9
  chartInfo?: ReactNode;
11
10
  }
12
- export declare const MultiDatakeyDonut: ({ isLoading, chartData, size, }: DonutProps) => import("react/jsx-runtime").JSX.Element;
11
+ export declare const MultiDatakeyDonut: ({ chartData, size, chartInfo }: DonutProps) => import("react/jsx-runtime").JSX.Element;
13
12
  export {};
package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.js CHANGED
@@ -1,21 +1,19 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useMemo } from 'react';
2
3
  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 const 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))) })] })));
4
+ import { DonutWrapper, CenterOverlay, Empty } from './style';
5
+ export const MultiDatakeyDonut = ({ chartData, size = 170, chartInfo }) => {
6
+ const pieSegments = useMemo(() => {
7
+ const total = chartData.reduce((sum, d) => sum + d.value, 0) || 1;
8
+ let cumulative = 0;
9
+ return chartData.map((d) => {
10
+ const start = (cumulative / total) * 360;
11
+ const end = ((cumulative + d.value) / total) * 360;
12
+ cumulative += d.value;
13
+ return Object.assign(Object.assign({}, d), { startAngle: start, endAngle: end });
14
+ });
15
+ }, [chartData]);
16
+ const isEmpty = chartData.every((d) => d.value === 0);
17
+ 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 }), !isEmpty &&
18
+ pieSegments.map((segment) => (_jsx(Pie, Object.assign({ data: [segment], dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", startAngle: 90 - segment.startAngle, endAngle: 90 - segment.endAngle, cornerRadius: 0, stroke: "none", isAnimationActive: true, animationDuration: 800, style: { outline: 'none' } }, { children: _jsx(Cell, { fill: segment.color, tabIndex: -1 }, segment.name) }), segment.name)))] }) }), _jsx(CenterOverlay, { children: !chartInfo ? _jsx(Empty, { children: "----" }) : chartInfo })] })));
21
19
  };
package/build/components/MultiDatakeyDonut/style.d.ts CHANGED
@@ -5,24 +5,6 @@ export declare const DonutWrapper: import("@emotion/styled").StyledComponent<imp
5
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
6
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
7
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"> & {
8
+ export declare const Empty: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
9
9
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
10
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 CHANGED
@@ -1,6 +1,5 @@
1
1
  import { Box } from '@mui/material';
2
2
  import { styled } from '@mui/material/styles';
3
- import Text from '../Text';
4
3
  export const DonutWrapper = styled(Box)(() => ({
5
4
  width: '100%',
6
5
  maxWidth: 500,
@@ -17,30 +16,8 @@ export const CenterOverlay = styled(Box)(({ theme }) => ({
17
16
  pointerEvents: 'none',
18
17
  gap: theme.spacing(1),
19
18
  }));
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,
19
+ export const Empty = styled(Box)(({ theme }) => ({
20
+ fontSize: 17,
28
21
  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,
22
+ color: '#CFD0D2',
46
23
  }));
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.13",
5
- "testVersion": 13,
4
+ "version": "0.1.365-test.15",
5
+ "testVersion": 15,
6
6
  "type": "module",
7
7
  "main": "build/index.js",
8
8
  "module": "build/index.js",