@lunit/oui 2.3.8 → 2.4.0
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/ic-copy-coordinates-url-outlined-20px.d.ts +3 -0
- package/dist/assets/ic-copy-coordinates-url-outlined-20px.js +3 -0
- package/dist/assets/index.d.ts +1 -0
- package/dist/assets/index.js +1 -0
- package/dist/components/TextField/components/Buttons.js +12 -2
- package/dist/components/UploadManager/UploadManager.js +2 -2
- package/dist/icons/CopyCoordinatesUrl/index.d.ts +12 -0
- package/dist/icons/CopyCoordinatesUrl/index.js +13 -0
- package/dist/icons/index.d.ts +1 -0
- package/dist/icons/index.js +1 -0
- package/dist/presentations/AnalysisBar/AnalysisBar.js +8 -9
- package/dist/presentations/AnalysisBar/AnalysisBar.styled.d.ts +4 -9
- package/dist/presentations/AnalysisBar/AnalysisBar.styled.js +16 -41
- package/dist/presentations/AnalysisBar/HeatmapGraphIcon/HeatmapGraphSVG.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
const SvgIcCopyCoordinatesUrloutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M3 5C2.44772 5 2 5.44772 2 6V17C2 17.5523 2.44772 18 3 18H14C14.5523 18 15 17.5523 15 17H16C16 18.1046 15.1046 19 14 19H3C1.89543 19 1 18.1046 1 17V6C1 4.89543 1.89543 4 3 4V5ZM17 1C18.1046 1 19 1.89543 19 3V14C19 15.1046 18.1046 16 17 16H6C4.89543 16 4 15.1046 4 14V3C4 1.89543 4.89543 1 6 1H17ZM6 2C5.44772 2 5 2.44772 5 3V14C5 14.5523 5.44772 15 6 15H17C17.5523 15 18 14.5523 18 14V3C18 2.44772 17.5523 2 17 2H6ZM8.88086 8.06055C9.06857 7.87301 9.37285 7.87299 9.56055 8.06055C9.74813 8.24824 9.74809 8.55252 9.56055 8.74023L8.46582 9.83594C7.81199 10.4899 7.8101 11.4722 8.36914 12.0312C8.92794 12.5899 9.90957 12.5884 10.5635 11.9355L11.6543 10.8369C11.8413 10.6485 12.1455 10.6471 12.334 10.834C12.5221 11.0209 12.5236 11.3252 12.3369 11.5137L11.2451 12.6143L11.2441 12.6152C10.2581 13.6007 8.66576 13.6871 7.68945 12.7109C6.71315 11.7346 6.79961 10.1424 7.78516 9.15625L8.88086 8.06055ZM12.8506 6.87012C13.0383 6.68238 13.3425 6.68238 13.5303 6.87012C13.7179 7.05786 13.718 7.36211 13.5303 7.5498L10.5527 10.5273C10.365 10.7146 10.0607 10.7148 9.87305 10.5273C9.68545 10.3397 9.68573 10.0354 9.87305 9.84766L12.8506 6.87012ZM12.1465 4.79492C13.1367 3.80469 14.7347 3.70746 15.7139 4.68652C16.6929 5.6657 16.5957 7.26367 15.6055 8.25391L14.5234 9.33594C14.3357 9.52351 14.0315 9.52352 13.8438 9.33594C13.6561 9.14824 13.6561 8.844 13.8438 8.65625L14.9258 7.57422C15.5896 6.91042 15.5905 5.9227 15.0342 5.36621C14.4777 4.80985 13.49 4.81081 12.8262 5.47461L11.7441 6.55762C11.5565 6.74483 11.2521 6.74486 11.0645 6.55762C10.8768 6.36992 10.8768 6.0647 11.0645 5.87695L12.1465 4.79492Z", clipRule: "evenodd" }) }));
|
|
3
|
+
export default SvgIcCopyCoordinatesUrloutlined20Px;
|
package/dist/assets/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export { default as IcBellNotiOutlined20Px } from './ic-bell-noti-outlined-20px'
|
|
|
2
2
|
export { default as IcCloseLargeOutlined20Px } from './ic-close-large-outlined-20px';
|
|
3
3
|
export { default as IcCloseSmallOutlined20Px } from './ic-close-small-outlined-20px';
|
|
4
4
|
export { default as IcCopyCoordinatesOutlined20Px } from './ic-copy-coordinates-outlined-20px';
|
|
5
|
+
export { default as IcCopyCoordinatesUrlOutlined20Px } from './ic-copy-coordinates-url-outlined-20px';
|
|
5
6
|
export { default as IcDownloadPdfOutlined20Px } from './ic-download-pdf-outlined-20px';
|
|
6
7
|
export { default as IcEllipseOutlined20Px } from './ic-ellipse-outlined-20px';
|
|
7
8
|
export { default as IcFilterNotiOutlined20Px } from './ic-filter-noti-outlined-20px';
|
package/dist/assets/index.js
CHANGED
|
@@ -2,6 +2,7 @@ export { default as IcBellNotiOutlined20Px } from './ic-bell-noti-outlined-20px'
|
|
|
2
2
|
export { default as IcCloseLargeOutlined20Px } from './ic-close-large-outlined-20px';
|
|
3
3
|
export { default as IcCloseSmallOutlined20Px } from './ic-close-small-outlined-20px';
|
|
4
4
|
export { default as IcCopyCoordinatesOutlined20Px } from './ic-copy-coordinates-outlined-20px';
|
|
5
|
+
export { default as IcCopyCoordinatesUrlOutlined20Px } from './ic-copy-coordinates-url-outlined-20px';
|
|
5
6
|
export { default as IcDownloadPdfOutlined20Px } from './ic-download-pdf-outlined-20px';
|
|
6
7
|
export { default as IcEllipseOutlined20Px } from './ic-ellipse-outlined-20px';
|
|
7
8
|
export { default as IcFilterNotiOutlined20Px } from './ic-filter-noti-outlined-20px';
|
|
@@ -2,10 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { CloseSmall, HideSmall, ShowSmall } from '../../../icons';
|
|
3
3
|
import { ButtonWrapper } from '../TextInput.styled';
|
|
4
4
|
function ClearButton({ onClick }) {
|
|
5
|
-
return (_jsx(ButtonWrapper, { onClick: onClick,
|
|
5
|
+
return (_jsx(ButtonWrapper, { onClick: onClick, onKeyDown: (event) => {
|
|
6
|
+
if (event.key === 'Enter') {
|
|
7
|
+
event.preventDefault();
|
|
8
|
+
event.stopPropagation();
|
|
9
|
+
}
|
|
10
|
+
}, children: _jsx(CloseSmall, { fontSize: "small" }) }));
|
|
6
11
|
}
|
|
7
12
|
function ShowHidePasswordButton({ onClick, isHidden, }) {
|
|
8
|
-
return (_jsx(ButtonWrapper, { onClick: onClick,
|
|
13
|
+
return (_jsx(ButtonWrapper, { onClick: onClick, onKeyDown: (event) => {
|
|
14
|
+
if (event.key === 'Enter') {
|
|
15
|
+
event.preventDefault();
|
|
16
|
+
event.stopPropagation();
|
|
17
|
+
}
|
|
18
|
+
}, children: isHidden ? _jsx(HideSmall, {}) : _jsx(ShowSmall, {}) }));
|
|
9
19
|
}
|
|
10
20
|
function FileInputWrapperButton({ children, onClick, width, }) {
|
|
11
21
|
return (_jsx("button", { onClick: onClick, style: {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Grow, Typography, Box } from '@mui/material';
|
|
3
|
-
import {
|
|
3
|
+
import { Close, Success, Warning16, RefreshLeft, ArrowUp } from '../../icons';
|
|
4
4
|
import { useState, Fragment, useMemo } from 'react';
|
|
5
5
|
import { Divider } from '../Divider';
|
|
6
6
|
import { Button } from '../Button';
|
|
@@ -82,7 +82,7 @@ const UploadManager = ({ title, subTitle, files, onClose, onCancel, onRetry, })
|
|
|
82
82
|
position: 'absolute',
|
|
83
83
|
bottom: '20px',
|
|
84
84
|
right: '20px',
|
|
85
|
-
}, children: _jsxs(StyledPaper, { elevation: 1, children: [_jsxs(StyledToolbar, { children: [_jsx(Typography, { variant: "h9", children: title }), _jsx(Typography, { variant: "body1", sx: { marginLeft: '8px' }, children: subTitle }), _jsxs(StyledToolbarButtonContainer, { children: [_jsx(Tooltip, { title: expanded ? 'Minimize' : 'Maximize', children: _jsx(Box, { children: _jsx(Button, { onClick: handleExpandClick, variant: "ghost", color: "secondary", icon: _jsx(
|
|
85
|
+
}, children: _jsxs(StyledPaper, { elevation: 1, children: [_jsxs(StyledToolbar, { children: [_jsx(Typography, { variant: "h9", children: title }), _jsx(Typography, { variant: "body1", sx: { marginLeft: '8px' }, children: subTitle }), _jsxs(StyledToolbarButtonContainer, { children: [_jsx(Tooltip, { title: expanded ? 'Minimize' : 'Maximize', children: _jsx(Box, { children: _jsx(Button, { onClick: handleExpandClick, variant: "ghost", color: "secondary", icon: _jsx(ArrowUp, { style: { color: theme.palette.neutralGrey[40] } }), size: "small", sx: {
|
|
86
86
|
transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
|
|
87
87
|
} }) }) }), _jsx(Tooltip, { title: "Close", children: _jsx(Box, { children: _jsx(Button, { onClick: onClose, variant: "ghost", color: "secondary", icon: _jsx(Close, { style: { color: theme.palette.neutralGrey[40] } }), size: "small" }) }) })] })] }), expanded && _jsx(Divider, { orientation: "horizontal" }), _jsx(StyledCollapse, { in: expanded, timeout: "auto", unmountOnExit: true, children: files.map((download, index) => (_jsxs(Fragment, { children: [_jsx(UploadFile, { file: download, onCancel: onCancel, onRetry: onRetry }), index !== files.length - 1 && _jsx(Divider, { orientation: "horizontal" })] }, download.id))) })] }) }));
|
|
88
88
|
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { SvgIconProps } from '@mui/material/SvgIcon';
|
|
2
|
+
declare const variants: readonly ["outlined"];
|
|
3
|
+
type Variant = (typeof variants)[number];
|
|
4
|
+
type IconProps = SvgIconProps & {
|
|
5
|
+
variant?: Variant;
|
|
6
|
+
};
|
|
7
|
+
declare const CopyCoordinatesUrl: {
|
|
8
|
+
({ variant, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element | null;
|
|
9
|
+
displayName: string;
|
|
10
|
+
variants: readonly ["outlined"];
|
|
11
|
+
};
|
|
12
|
+
export default CopyCoordinatesUrl;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import SvgIcon from '@mui/material/SvgIcon';
|
|
3
|
+
import { IcCopyCoordinatesUrlOutlined20Px as outlined } from '../../assets';
|
|
4
|
+
const variants = ['outlined'];
|
|
5
|
+
const CopyCoordinatesUrl = ({ variant = 'outlined', ...rest }) => {
|
|
6
|
+
if (variant === 'outlined') {
|
|
7
|
+
return (_jsx(SvgIcon, { ...rest, component: outlined, inheritViewBox: true }));
|
|
8
|
+
}
|
|
9
|
+
return null;
|
|
10
|
+
};
|
|
11
|
+
CopyCoordinatesUrl.displayName = 'CopyCoordinatesUrl';
|
|
12
|
+
CopyCoordinatesUrl.variants = variants;
|
|
13
|
+
export default CopyCoordinatesUrl;
|
package/dist/icons/index.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ export { default as RefreshRight } from './RefreshRight';
|
|
|
15
15
|
export { default as ShowLarge } from './ShowLarge';
|
|
16
16
|
export { default as ShowSmall } from './ShowSmall';
|
|
17
17
|
export { default as CopyCoordinates } from './CopyCoordinates';
|
|
18
|
+
export { default as CopyCoordinatesUrl } from './CopyCoordinatesUrl';
|
|
18
19
|
export { Analyze } from '@lunit/design-system-icons';
|
|
19
20
|
export { Annotation } from '@lunit/design-system-icons';
|
|
20
21
|
export { Apps } from '@lunit/design-system-icons';
|
package/dist/icons/index.js
CHANGED
|
@@ -15,6 +15,7 @@ export { default as RefreshRight } from './RefreshRight';
|
|
|
15
15
|
export { default as ShowLarge } from './ShowLarge';
|
|
16
16
|
export { default as ShowSmall } from './ShowSmall';
|
|
17
17
|
export { default as CopyCoordinates } from './CopyCoordinates';
|
|
18
|
+
export { default as CopyCoordinatesUrl } from './CopyCoordinatesUrl';
|
|
18
19
|
export { Analyze } from '@lunit/design-system-icons';
|
|
19
20
|
export { Annotation } from '@lunit/design-system-icons';
|
|
20
21
|
export { Apps } from '@lunit/design-system-icons';
|
|
@@ -3,19 +3,19 @@ import { Box } from '@mui/material';
|
|
|
3
3
|
import { AnalysisBarSegmentContainer, AnalysisBarOuter, AxisLabels, GraphAxisLabel, GraphScoreIndicator, GraphSegment, } from './AnalysisBar.styled';
|
|
4
4
|
import { parseStringValToNumber } from './AnalysisBar.utils';
|
|
5
5
|
import HeatmapGraphSVG from './HeatmapGraphIcon/HeatmapGraphSVG';
|
|
6
|
-
const Segments = ({ segments
|
|
6
|
+
const Segments = ({ segments }) => {
|
|
7
7
|
if (!segments) {
|
|
8
8
|
return null;
|
|
9
9
|
}
|
|
10
|
-
const
|
|
10
|
+
const validSegments = segments.filter((segment) => segment.width > 0);
|
|
11
11
|
if (segments?.length === 1 && segments[0].color === 'jet') {
|
|
12
12
|
return (_jsx(Box, { sx: { width: '100%', height: '14px', transform: 'scaleY(0.8)' }, children: _jsx(HeatmapGraphSVG, {}) }));
|
|
13
13
|
}
|
|
14
|
-
return (_jsx(_Fragment, { children:
|
|
14
|
+
return (_jsx(_Fragment, { children: validSegments?.map((segment, i) => {
|
|
15
15
|
if (segment.color === 'jet') {
|
|
16
16
|
return _jsx(HeatmapGraphSVG, { width: `${segment.width}%` });
|
|
17
17
|
}
|
|
18
|
-
return (_jsx(GraphSegment, { color: segment.color,
|
|
18
|
+
return (_jsx(GraphSegment, { color: segment.color, width: segment.width, isFirstSegment: i === 0, isLastSegment: i === segments.length - 1 }, i));
|
|
19
19
|
}) }));
|
|
20
20
|
};
|
|
21
21
|
const AnalysisBar = ({ componentType = 'analysisBar', expressionValue, caption, expressionLevels = [], expressionLabels = [], segments, isDimmed = false, }) => {
|
|
@@ -23,11 +23,10 @@ const AnalysisBar = ({ componentType = 'analysisBar', expressionValue, caption,
|
|
|
23
23
|
throw new Error("The 'componentType' prop is required.");
|
|
24
24
|
if (!expressionLevels.length)
|
|
25
25
|
throw new Error("The 'expressionLevels' prop must contain at least one item.");
|
|
26
|
-
const
|
|
27
|
-
return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, {
|
|
26
|
+
const validSegments = segments.filter((segment) => segment.width > 0);
|
|
27
|
+
return (_jsxs(AnalysisBarOuter, { className: "analysis-bar", isDimmed: isDimmed, children: [_jsxs(AnalysisBarSegmentContainer, { children: [expressionValue && (_jsx(GraphScoreIndicator, { value: expressionValue, isJet: segments?.[0].color === 'jet' })), _jsx(Segments, { segments: validSegments })] }), (expressionLevels.length > 0 || caption) && (_jsxs(AxisLabels, { children: [expressionLevels.length > 0 &&
|
|
28
28
|
expressionLevels.map((val, i) => {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}), caption && (_jsx(GraphAxisLabel, { label: caption, adjustForOnePercent: hasAdjustedOnePercentSegment, leftPos: 50 }))] }))] }));
|
|
29
|
+
return (_jsx(GraphAxisLabel, { label: expressionLabels[i] || val, leftPos: parseStringValToNumber(val) }, i));
|
|
30
|
+
}), caption && (_jsx(GraphAxisLabel, { label: caption, leftPos: 50 }))] }))] }));
|
|
32
31
|
};
|
|
33
32
|
export default AnalysisBar;
|
|
@@ -7,15 +7,13 @@ export declare const AnalysisBarOuter: import("@emotion/styled").StyledComponent
|
|
|
7
7
|
export declare const AnalysisBarSegmentContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
8
8
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
9
9
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
10
|
-
export declare const GraphScoreIndicator: ({ value,
|
|
10
|
+
export declare const GraphScoreIndicator: ({ value, isJet }: {
|
|
11
11
|
value: string;
|
|
12
|
-
adjustForOnePercent: boolean;
|
|
13
12
|
isJet?: boolean | undefined;
|
|
14
13
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
-
export declare const GraphAxisLabel: ({ label, leftPos
|
|
14
|
+
export declare const GraphAxisLabel: ({ label, leftPos }: {
|
|
16
15
|
label: string;
|
|
17
16
|
leftPos: number;
|
|
18
|
-
adjustForOnePercent: boolean;
|
|
19
17
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
20
18
|
export declare const AxisLabels: ({ children }: {
|
|
21
19
|
percent?: boolean;
|
|
@@ -26,11 +24,8 @@ export declare const AnalysisBarCaption: ({ label }: {
|
|
|
26
24
|
interface GraphSegmentProps {
|
|
27
25
|
color: string | undefined;
|
|
28
26
|
width: number;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
combinedWidth?: number;
|
|
32
|
-
isNextSegment?: boolean;
|
|
33
|
-
isOnePercentSegment?: boolean;
|
|
27
|
+
isFirstSegment: boolean;
|
|
28
|
+
isLastSegment: boolean;
|
|
34
29
|
}
|
|
35
30
|
export declare const GraphSegment: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & GraphSegmentProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
36
31
|
export {};
|
|
@@ -17,6 +17,7 @@ export const AnalysisBarSegmentContainer = styled(Box)(() => ({
|
|
|
17
17
|
alignItems: 'center',
|
|
18
18
|
position: 'relative',
|
|
19
19
|
width: '100%',
|
|
20
|
+
gap: '1px',
|
|
20
21
|
}));
|
|
21
22
|
const GraphScoreIndicatorContainer = styled('span', {
|
|
22
23
|
shouldForwardProp: (prop) => prop !== 'isJet',
|
|
@@ -41,11 +42,8 @@ const GraphScoreIndicatorPip = styled('span')(() => {
|
|
|
41
42
|
boxSizing: 'content-box',
|
|
42
43
|
};
|
|
43
44
|
});
|
|
44
|
-
export const GraphScoreIndicator = ({ value,
|
|
45
|
-
|
|
46
|
-
if (adjustForOnePercent && +value <= 1) {
|
|
47
|
-
leftPos = '12px';
|
|
48
|
-
}
|
|
45
|
+
export const GraphScoreIndicator = ({ value, isJet }) => {
|
|
46
|
+
const leftPos = `${parseStringValToNumber(value)}%`;
|
|
49
47
|
return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: {
|
|
50
48
|
left: leftPos,
|
|
51
49
|
transform: isJet ? 'translateX(-50%) translateY(8px)' : 'translateX(-50%)',
|
|
@@ -61,15 +59,12 @@ const GraphAxisLabelContainer = styled('span')(() => {
|
|
|
61
59
|
alignItems: 'center',
|
|
62
60
|
};
|
|
63
61
|
});
|
|
64
|
-
export const GraphAxisLabel = ({ label, leftPos
|
|
65
|
-
const getLeft = (value
|
|
66
|
-
if (adjustForOnePercent) {
|
|
67
|
-
return '12px';
|
|
68
|
-
}
|
|
62
|
+
export const GraphAxisLabel = ({ label, leftPos }) => {
|
|
63
|
+
const getLeft = (value) => {
|
|
69
64
|
return `${clampBarLabelPosition(value)}%`;
|
|
70
65
|
};
|
|
71
66
|
return (_jsx(GraphAxisLabelContainer, { sx: {
|
|
72
|
-
left: getLeft(leftPos
|
|
67
|
+
left: getLeft(leftPos),
|
|
73
68
|
transform: 'translateX(-50%)',
|
|
74
69
|
}, className: "analysis-bar-axis-label", children: _jsx(Typography, { variant: "small_body_m5", sx: { textAlign: 'center' }, children: label }) }));
|
|
75
70
|
};
|
|
@@ -89,43 +84,23 @@ export const AnalysisBarCaption = ({ label }) => {
|
|
|
89
84
|
width: 'auto',
|
|
90
85
|
}, className: "analysis-bar-caption", children: _jsx(Typography, { variant: "small_body_m5", sx: { textAlign: 'center' }, children: label }) }));
|
|
91
86
|
};
|
|
92
|
-
const segmentStyle = (color, width,
|
|
93
|
-
|
|
87
|
+
const segmentStyle = (color, width, isFirstSegment, isLastSegment) => {
|
|
88
|
+
return {
|
|
94
89
|
backgroundColor: color,
|
|
95
90
|
height: '8px',
|
|
96
|
-
|
|
91
|
+
borderTopLeftRadius: isFirstSegment ? '2px' : '0px',
|
|
92
|
+
borderTopRightRadius: isLastSegment ? '2px' : '0px',
|
|
93
|
+
borderBottomLeftRadius: isFirstSegment ? '2px' : '0px',
|
|
94
|
+
borderBottomRightRadius: isLastSegment ? '2px' : '0px',
|
|
95
|
+
width: `${width}%`,
|
|
97
96
|
};
|
|
98
|
-
if (isOnePercentSegment) {
|
|
99
|
-
return {
|
|
100
|
-
...baseStyle,
|
|
101
|
-
width: '12px',
|
|
102
|
-
minWidth: '12px',
|
|
103
|
-
maxWidth: '12px',
|
|
104
|
-
};
|
|
105
|
-
}
|
|
106
|
-
else {
|
|
107
|
-
return {
|
|
108
|
-
...baseStyle,
|
|
109
|
-
width: hasAdjustedOnePercentSegment && isNextSegment
|
|
110
|
-
? `calc(${combinedWidth}% - 12px)`
|
|
111
|
-
: `${width}%`,
|
|
112
|
-
};
|
|
113
|
-
}
|
|
114
97
|
};
|
|
115
98
|
export const GraphSegment = styled('span', {
|
|
116
|
-
shouldForwardProp: (prop) => ![
|
|
117
|
-
|
|
118
|
-
'width',
|
|
119
|
-
'square',
|
|
120
|
-
'hasAdjustedOnePercentSegment',
|
|
121
|
-
'combinedWidth',
|
|
122
|
-
'isNextSegment',
|
|
123
|
-
'isOnePercentSegment',
|
|
124
|
-
].includes(prop.toString()),
|
|
125
|
-
})(({ color, width, square, hasAdjustedOnePercentSegment, combinedWidth, isNextSegment, isOnePercentSegment, }) => {
|
|
99
|
+
shouldForwardProp: (prop) => !['color', 'width', 'isFirstSegment', 'isLastSegment'].includes(prop.toString()),
|
|
100
|
+
})(({ color, width, isFirstSegment, isLastSegment }) => {
|
|
126
101
|
// cover undefined and empty string
|
|
127
102
|
const barColor = color && color.length ? color : 'red';
|
|
128
103
|
return {
|
|
129
|
-
...segmentStyle(barColor, width,
|
|
104
|
+
...segmentStyle(barColor, width, isFirstSegment, isLastSegment), // fallback color
|
|
130
105
|
};
|
|
131
106
|
});
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
const HeatmapGraphSVG = (props) => (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 234 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "
|
|
2
|
+
const HeatmapGraphSVG = (props) => (_jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 234 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 0C0.895431 0 0 0.895431 0 2V6C0 7.10457 0.895431 8 2 8H232C233.105 8 234 7.10457 234 6V2C234 0.895431 233.105 0 232 0H2Z", fill: "url(#paint0_linear_4060_316245)" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_4060_316245", x1: "-0.585003", y1: "5.99984", x2: "228.159", y2: "4.97311", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#3000FF" }), _jsx("stop", { offset: "0.239583", stopColor: "#5CFFE2" }), _jsx("stop", { offset: "0.447917", stopColor: "#E2FFA4" }), _jsx("stop", { offset: "0.546875", stopColor: "#FCFF75" }), _jsx("stop", { offset: "0.78125", stopColor: "#FDBA73" }), _jsx("stop", { offset: "1", stopColor: "#FF0F00" })] }) })] }));
|
|
3
3
|
export default HeatmapGraphSVG;
|
package/package.json
CHANGED