@tap-payments/os-micro-frontend-shared 0.1.398-test.2 → 0.1.398-test.6
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/build/components/FilterDropdown/FilterDropdown.d.ts +4 -11
- package/build/components/FilterDropdown/FilterDropdown.js +4 -18
- package/build/components/FilterDropdown/style.js +1 -1
- package/build/components/RangeCalender/RangeCalender.js +2 -4
- package/build/components/TableCells/CustomCells/MarketPlaceCell/MarketPlaceCell.js +11 -12
- package/build/components/Widget/List.js +1 -1
- package/build/components/index.d.ts +0 -1
- package/build/components/index.js +0 -1
- package/build/constants/assets.d.ts +0 -3
- package/build/constants/assets.js +0 -3
- package/build/types/index.d.ts +0 -1
- package/build/types/index.js +0 -1
- package/build/utils/date.d.ts +0 -4
- package/build/utils/date.js +0 -37
- package/package.json +2 -2
- package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.d.ts +0 -12
- package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.js +0 -19
- package/build/components/MultiDatakeyDonut/index.d.ts +0 -1
- package/build/components/MultiDatakeyDonut/index.js +0 -1
- package/build/components/MultiDatakeyDonut/style.d.ts +0 -10
- package/build/components/MultiDatakeyDonut/style.js +0 -23
- package/build/types/toggleOptions.d.ts +0 -2
- package/build/types/toggleOptions.js +0 -1
|
@@ -1,17 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
interface FilterDropdownProps extends BoxProps {
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface FilterDropdownProps {
|
|
3
|
+
children?: React.ReactNode;
|
|
5
4
|
onConfirm: () => void;
|
|
6
5
|
onCancel: () => void;
|
|
7
6
|
isOkayButDisabled?: boolean;
|
|
8
7
|
isDisabled?: boolean;
|
|
9
|
-
icon?: string;
|
|
10
|
-
title?: string;
|
|
11
|
-
menuStyle?: SxProps;
|
|
12
|
-
hideTitle?: boolean;
|
|
13
|
-
renderButton?: ReactNode;
|
|
14
|
-
onOpenChange?: (isOpen: boolean) => void;
|
|
15
8
|
}
|
|
16
|
-
export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled
|
|
9
|
+
export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled }: Readonly<FilterDropdownProps>): import("react/jsx-runtime").JSX.Element;
|
|
17
10
|
export {};
|
|
@@ -1,24 +1,12 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import { useState, useEffect } from 'react';
|
|
14
2
|
import Box from '@mui/material/Box';
|
|
15
|
-
import ClickAwayListener from '@mui/material/ClickAwayListener';
|
|
16
3
|
import { useTranslation } from 'react-i18next';
|
|
4
|
+
import { useState, useEffect } from 'react';
|
|
5
|
+
import { ClickAwayListener } from '@mui/material';
|
|
17
6
|
import { darkFilterIcon } from '../../constants/index.js';
|
|
18
7
|
import { Menu, CustomBackdrop } from '../index.js';
|
|
19
8
|
import { CancelButton, FilterButton, Footer, OkayButton, TitleStyled } from './style';
|
|
20
|
-
export default function FilterDropdown(
|
|
21
|
-
var { onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title, menuStyle, hideTitle = false, renderButton, onOpenChange } = _a, props = __rest(_a, ["onConfirm", "onCancel", "isOkayButDisabled", "children", "isDisabled", "icon", "title", "menuStyle", "hideTitle", "renderButton", "onOpenChange"]);
|
|
9
|
+
export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled }) {
|
|
22
10
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
23
11
|
const open = Boolean(anchorEl);
|
|
24
12
|
const { t } = useTranslation();
|
|
@@ -44,14 +32,12 @@ export default function FilterDropdown(_a) {
|
|
|
44
32
|
return;
|
|
45
33
|
if (!open) {
|
|
46
34
|
setAnchorEl(e.currentTarget);
|
|
47
|
-
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
|
|
48
35
|
return;
|
|
49
36
|
}
|
|
50
37
|
onClose();
|
|
51
38
|
};
|
|
52
39
|
const onClose = () => {
|
|
53
40
|
setAnchorEl(null);
|
|
54
|
-
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
|
|
55
41
|
onCancel();
|
|
56
42
|
};
|
|
57
43
|
const handleCancel = () => {
|
|
@@ -64,5 +50,5 @@ export default function FilterDropdown(_a) {
|
|
|
64
50
|
onConfirm();
|
|
65
51
|
onClose();
|
|
66
52
|
};
|
|
67
|
-
return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box,
|
|
53
|
+
return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box, { children: [_jsx(FilterButton, Object.assign({ isActive: open, onClick: onOpen, sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.5 })) }, { children: _jsx(Box, { component: "img", src: darkFilterIcon, alt: "filter" }) })), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open, sx: { marginTop: '8px', marginBottom: '8px', width: 193 }, placement: "bottom-end" }, { children: [_jsx(TitleStyled, Object.assign({ component: "span" }, { children: t('filterBy') })), children, _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: handleCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ disabled: isOkayButDisabled, onClick: handleConfirm }, { children: t('okay') }))] })] })), open && _jsx(CustomBackdrop, { onClick: onClose })] }) })));
|
|
68
54
|
}
|
|
@@ -2,7 +2,7 @@ import Box from '@mui/material/Box';
|
|
|
2
2
|
import { styled } from '@mui/material/styles';
|
|
3
3
|
import Button from '@mui/material/Button';
|
|
4
4
|
import { Text } from '../index.js';
|
|
5
|
-
export const FilterButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`,
|
|
5
|
+
export const FilterButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`, height: 32, width: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: theme.palette.common.white, ':hover': {
|
|
6
6
|
opacity: 0.7,
|
|
7
7
|
} }, (isActive && {
|
|
8
8
|
boxShadow: `0px 0px 4px 0px ${theme.palette.info.dark}80`,
|
|
@@ -58,10 +58,8 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
|
|
|
58
58
|
onChangeTimezone === null || onChangeTimezone === void 0 ? void 0 : onChangeTimezone(selectedTimezone);
|
|
59
59
|
};
|
|
60
60
|
const getSelectedDate = () => {
|
|
61
|
-
const
|
|
62
|
-
const
|
|
63
|
-
const startSelectedTime = formatDate(dates[0]);
|
|
64
|
-
const endSelectedTime = dates[1] ? formatDate(dates[1]) : formatDate(dates[0]);
|
|
61
|
+
const startSelectedTime = dates[0].format('MMM D');
|
|
62
|
+
const endSelectedTime = dates[1] ? dates[1].format('MMM D') : dates[0].format('MMM D');
|
|
65
63
|
return startSelectedTime === endSelectedTime && !noTimezone ? startSelectedTime : `${startSelectedTime} - ${endSelectedTime}`;
|
|
66
64
|
};
|
|
67
65
|
const onChange = (newDate) => {
|
|
@@ -9,21 +9,20 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import Tooltip from '../../../Tooltip';
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
13
|
import TableCell from '../../TableCell';
|
|
15
|
-
import { Box } from '@mui/material';
|
|
14
|
+
import { Box, Typography } from '@mui/material';
|
|
16
15
|
import { marketPlaceBlueIcon } from '../../../../constants/index.js';
|
|
17
16
|
export default function MarketPlaceCell(_a) {
|
|
18
17
|
var { marketPlaceIcon, marketPlaceName } = _a, props = __rest(_a, ["marketPlaceIcon", "marketPlaceName"]);
|
|
19
18
|
const logo = marketPlaceIcon !== null && marketPlaceIcon !== void 0 ? marketPlaceIcon : (_jsx("img", { src: marketPlaceBlueIcon, alt: "marketplace", style: { maxWidth: '18px', maxHeight: '18px', objectFit: 'cover' } }));
|
|
20
|
-
return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: marketPlaceName && (
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
19
|
+
return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: marketPlaceName && (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ sx: {
|
|
20
|
+
width: '24px',
|
|
21
|
+
height: '24px',
|
|
22
|
+
border: '1px solid #F2F2F2',
|
|
23
|
+
borderRadius: '50%',
|
|
24
|
+
display: 'flex',
|
|
25
|
+
alignItems: 'center',
|
|
26
|
+
justifyContent: 'center',
|
|
27
|
+
} }, { children: logo })), _jsx(Typography, Object.assign({ sx: { fontSize: '14px', fontWeight: 400 } }, { children: marketPlaceName }))] })) })) })));
|
|
29
28
|
}
|
|
@@ -18,6 +18,6 @@ import { useScrollWithShadow } from './useScrollWithShadow';
|
|
|
18
18
|
function List(_a) {
|
|
19
19
|
var { allowShadow = true, children } = _a, props = __rest(_a, ["allowShadow", "children"]);
|
|
20
20
|
const { onScrollHandler, showShadow } = useScrollWithShadow();
|
|
21
|
-
return (_jsxs(ListStyled, Object.assign({ component: "ul", "data-testid": "Widget_List", onScroll: onScrollHandler }, props, { children: [children, showShadow && allowShadow && (_jsx(Box, { component: "img", src: listShadowBg, sx: { width: '100%', position: 'fixed', bottom: 0, pointerEvents: 'none'
|
|
21
|
+
return (_jsxs(ListStyled, Object.assign({ component: "ul", "data-testid": "Widget_List", onScroll: onScrollHandler }, props, { children: [children, showShadow && allowShadow && (_jsx(Box, { component: "img", src: listShadowBg, sx: { width: '100%', position: 'fixed', bottom: 0, pointerEvents: 'none' } }))] })));
|
|
22
22
|
}
|
|
23
23
|
export default memo(List);
|
|
@@ -153,6 +153,5 @@ export * from './SalesChannelFilter';
|
|
|
153
153
|
export * from './ReferenceTypeFilter';
|
|
154
154
|
export * from './ListColumnFilter';
|
|
155
155
|
export * from './VerificationIcon';
|
|
156
|
-
export * from './MultiDatakeyDonut';
|
|
157
156
|
export { default as TreeDropdown } from './TreeDropdown';
|
|
158
157
|
export * from './TreeDropdown';
|
|
@@ -153,6 +153,5 @@ export * from './SalesChannelFilter';
|
|
|
153
153
|
export * from './ReferenceTypeFilter';
|
|
154
154
|
export * from './ListColumnFilter';
|
|
155
155
|
export * from './VerificationIcon';
|
|
156
|
-
export * from './MultiDatakeyDonut';
|
|
157
156
|
export { default as TreeDropdown } from './TreeDropdown';
|
|
158
157
|
export * from './TreeDropdown';
|
|
@@ -46,7 +46,6 @@ export declare const storedValueWalletIcon: string;
|
|
|
46
46
|
export declare const buyNowPayLaterIcon: string;
|
|
47
47
|
export declare const openBankingIcon: string;
|
|
48
48
|
export declare const visaIcon: string;
|
|
49
|
-
export declare const redArrowDownIcon: string;
|
|
50
49
|
export declare const completedIcon: string;
|
|
51
50
|
export declare const chargeBackRequestedIcon: string;
|
|
52
51
|
export declare const chargeBackIcon: string;
|
|
@@ -85,14 +84,12 @@ export declare const paidNoBgIcon: string;
|
|
|
85
84
|
export declare const refunededNoBgIcon: string;
|
|
86
85
|
export declare const deactivatedIcon: string;
|
|
87
86
|
export declare const topUpIcon: string;
|
|
88
|
-
export declare const AIOverviewIcon: string;
|
|
89
87
|
export declare const deMaximizeIcon: string;
|
|
90
88
|
export declare const pendingFlag: string;
|
|
91
89
|
export declare const ibanIcon: string;
|
|
92
90
|
export declare const payoutIcon: string;
|
|
93
91
|
export declare const releasedFlag: string;
|
|
94
92
|
export declare const acceptedFlag: string;
|
|
95
|
-
export declare const clearIcon: string;
|
|
96
93
|
export declare const unCapturedIcon: string;
|
|
97
94
|
export declare const newWindowIcon: string;
|
|
98
95
|
export declare const viewAllIcon: string;
|
|
@@ -51,7 +51,6 @@ export const storedValueWalletIcon = `${lightUrl}/storedValueWallet.svg`;
|
|
|
51
51
|
export const buyNowPayLaterIcon = `${lightUrl}/buyNowPayLater.svg`;
|
|
52
52
|
export const openBankingIcon = `${lightUrl}/openBanking.svg`;
|
|
53
53
|
export const visaIcon = `${lightUrl}/visa.svg`;
|
|
54
|
-
export const redArrowDownIcon = `${lightUrl}/redArrowDownIcon.svg`;
|
|
55
54
|
export const completedIcon = `${lightUrl}/completed.svg`;
|
|
56
55
|
export const chargeBackRequestedIcon = `${lightUrl}/chargebackRequested.svg`;
|
|
57
56
|
export const chargeBackIcon = `${lightUrl}/chargeback.svg`;
|
|
@@ -90,14 +89,12 @@ export const paidNoBgIcon = `${lightUrl}/paidStatusIcon.svg`;
|
|
|
90
89
|
export const refunededNoBgIcon = `${lightUrl}/refundedStatusIcon.svg`;
|
|
91
90
|
export const deactivatedIcon = `${lightUrl}/deactivatedIcon.svg`;
|
|
92
91
|
export const topUpIcon = `${lightUrl}/topup.svg`;
|
|
93
|
-
export const AIOverviewIcon = `${lightUrl}/AIOverviewIcon.svg`;
|
|
94
92
|
export const deMaximizeIcon = `${appBaseUrl}/demaximize.svg`;
|
|
95
93
|
export const pendingFlag = `${lightUrl}/pendingFlag.svg`;
|
|
96
94
|
export const ibanIcon = `${lightUrl}/ibanIcon.svg`;
|
|
97
95
|
export const payoutIcon = `${lightUrl}/payoutIcon.svg`;
|
|
98
96
|
export const releasedFlag = `${lightUrl}/releasedFlag.svg`;
|
|
99
97
|
export const acceptedFlag = `${lightUrl}/acceptedFlag.svg`;
|
|
100
|
-
export const clearIcon = `${lightUrl}/clearIcon.svg`;
|
|
101
98
|
export const unCapturedIcon = `${lightUrl}/status/unCaptured.svg`;
|
|
102
99
|
export const newWindowIcon = `${appBaseUrl}/newWindow.svg`;
|
|
103
100
|
export const viewAllIcon = `${appBaseUrl}/viewAll.svg`;
|
package/build/types/index.d.ts
CHANGED
package/build/types/index.js
CHANGED
package/build/utils/date.d.ts
CHANGED
|
@@ -43,9 +43,5 @@ export declare function isWithinTimeAgo(timestampMs: number, amount: number, uni
|
|
|
43
43
|
export declare const formatRelativeTimeWithinHour: (timestampMs: number) => string;
|
|
44
44
|
export declare const isTodayDate: (date: string | Date) => boolean;
|
|
45
45
|
export declare const isYesterdayDate: (date: string | Date) => boolean;
|
|
46
|
-
export declare const getDateLabel: (from: Date, to: Date) => {
|
|
47
|
-
label: string;
|
|
48
|
-
isCustom: boolean;
|
|
49
|
-
};
|
|
50
46
|
export declare const isValidDate: (date?: Date | string | number) => boolean;
|
|
51
47
|
export {};
|
package/build/utils/date.js
CHANGED
|
@@ -245,43 +245,6 @@ export const formatRelativeTimeWithinHour = (timestampMs) => {
|
|
|
245
245
|
};
|
|
246
246
|
export const isTodayDate = (date) => dayjs(date).isToday();
|
|
247
247
|
export const isYesterdayDate = (date) => dayjs(date).isYesterday();
|
|
248
|
-
export const getDateLabel = (from, to) => {
|
|
249
|
-
const start = dayjs(from).startOf('day');
|
|
250
|
-
const end = dayjs(to).endOf('day');
|
|
251
|
-
const today = dayjs().startOf('day');
|
|
252
|
-
const currentYear = today.year();
|
|
253
|
-
const diffDays = end.diff(start, 'day') + 1;
|
|
254
|
-
// Today / Yesterday
|
|
255
|
-
if (start.isToday() && end.isToday())
|
|
256
|
-
return { label: 'Today', isCustom: false };
|
|
257
|
-
if (start.isYesterday() && end.isYesterday())
|
|
258
|
-
return { label: 'Yesterday', isCustom: false };
|
|
259
|
-
// Last 7 days
|
|
260
|
-
if (diffDays === 7 && end.isSame(today, 'day'))
|
|
261
|
-
return { label: 'Last 7 days', isCustom: false };
|
|
262
|
-
// Last 30 days (inclusive)
|
|
263
|
-
if (diffDays === 31 && end.isSame(today, 'day'))
|
|
264
|
-
return { label: 'Last 30 days', isCustom: false };
|
|
265
|
-
// Full month
|
|
266
|
-
if (start.date() === 1 && end.date() === end.daysInMonth() && start.month() === end.month()) {
|
|
267
|
-
const monthLabel = start.year() === currentYear ? start.format('MMMM') : start.format('MMMM YYYY');
|
|
268
|
-
return { label: monthLabel, isCustom: false };
|
|
269
|
-
}
|
|
270
|
-
// Same day: show Month + Day
|
|
271
|
-
if (start.isSame(end, 'day')) {
|
|
272
|
-
const label = start.format(start.year() === currentYear ? 'MMM D' : 'MMM D YYYY');
|
|
273
|
-
return { label, isCustom: false };
|
|
274
|
-
}
|
|
275
|
-
// Custom range
|
|
276
|
-
const showStartYear = start.year() !== currentYear;
|
|
277
|
-
const showEndYear = end.year() !== currentYear;
|
|
278
|
-
const startLabel = start.format(`MMM D${showStartYear ? ' YYYY' : ''}`);
|
|
279
|
-
const endLabel = end.format(`MMM D${showEndYear ? ' YYYY' : ''}`);
|
|
280
|
-
return {
|
|
281
|
-
label: `${startLabel} – ${endLabel}`,
|
|
282
|
-
isCustom: true,
|
|
283
|
-
};
|
|
284
|
-
};
|
|
285
248
|
export const isValidDate = (date) => {
|
|
286
249
|
return dayjs(date).isValid();
|
|
287
250
|
};
|
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.398-test.
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.398-test.6",
|
|
5
|
+
"testVersion": 6,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
interface DonutProps {
|
|
3
|
-
size?: number;
|
|
4
|
-
chartData: Array<{
|
|
5
|
-
name: string;
|
|
6
|
-
value: number;
|
|
7
|
-
color: string;
|
|
8
|
-
}>;
|
|
9
|
-
chartInfo?: ReactNode;
|
|
10
|
-
}
|
|
11
|
-
export declare const MultiDatakeyDonut: ({ chartData, size, chartInfo }: DonutProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export {};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from 'react';
|
|
3
|
-
import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
|
|
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 })] })));
|
|
19
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './MultiDatakeyDonut';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './MultiDatakeyDonut';
|
|
@@ -1,10 +0,0 @@
|
|
|
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 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
|
-
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>, {}, {}>;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { Box } from '@mui/material';
|
|
2
|
-
import { styled } from '@mui/material/styles';
|
|
3
|
-
export const DonutWrapper = styled(Box)(() => ({
|
|
4
|
-
width: '100%',
|
|
5
|
-
maxWidth: 500,
|
|
6
|
-
aspectRatio: '1',
|
|
7
|
-
position: 'relative',
|
|
8
|
-
}));
|
|
9
|
-
export const CenterOverlay = styled(Box)(({ theme }) => ({
|
|
10
|
-
position: 'absolute',
|
|
11
|
-
inset: 0,
|
|
12
|
-
display: 'flex',
|
|
13
|
-
flexDirection: 'column',
|
|
14
|
-
justifyContent: 'center',
|
|
15
|
-
alignItems: 'center',
|
|
16
|
-
pointerEvents: 'none',
|
|
17
|
-
gap: theme.spacing(1),
|
|
18
|
-
}));
|
|
19
|
-
export const Empty = styled(Box)(({ theme }) => ({
|
|
20
|
-
fontSize: 17,
|
|
21
|
-
fontWeight: 700,
|
|
22
|
-
color: '#CFD0D2',
|
|
23
|
-
}));
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|