design-system-simplefi
Version:
Design System for SimpleFi Applications
129 lines • 8.09 kB
JavaScript
var __spreadArray = (this && this.__spreadArray) || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
};
import React from 'react';
import { Card } from '../Card';
import { FlexContainer, Padbox } from '../layout';
import { colors } from '../../theme/colors';
import { IconButton } from '../IconButton';
import { Text } from '../typography';
import { theme } from '../../theme';
var Legend = function (_a) {
var hoverData = _a.hoverData, currency = _a.currency, legendVisible = _a.legendVisible, options = _a.options, _b = _a.closeAction, closeAction = _b === void 0 ? function () { } : _b, _c = _a.enterAction, enterAction = _c === void 0 ? function () { } : _c, _d = _a.exitAction, exitAction = _d === void 0 ? function () { } : _d, _e = _a.setLegendVisbility, setLegendVisbility = _e === void 0 ? function () { } : _e, legendType = _a.legendType, source = _a.source, _f = _a.legendLabel, legendLabel = _f === void 0 ? '' : _f, _g = _a.isBarChart, isBarChart = _g === void 0 ? false : _g;
var renderPieChartLegend = function () {
return (React.createElement("div", { style: { height: '100%' } },
React.createElement(Text, { size: "lg", style: {
position: 'absolute',
top: '20px',
left: '20px',
backgroundColor: 'white',
}, isBold: true },
' ',
"Where is my ",
source,
' '),
React.createElement(Padbox, { style: { marginTop: '20px' } },
React.createElement(FlexContainer, { flexDirection: "column", justifyContent: "left" }, options.map(function (el) {
return (React.createElement(Padbox, { key: el.key, paddingSize: "sm", paddingType: "squish", onMouseEnter: function () { return enterAction(el.key); }, onMouseLeave: exitAction },
React.createElement(FlexContainer, { flexDirection: "row", justifyContent: "left", style: {
width: '100%',
} },
React.createElement("div", { style: {
height: '18px',
width: '18px',
margin: '4px',
background: theme.colors[el.color],
} }),
React.createElement("span", { style: {
paddingLeft: '1rem',
} }, el.name))));
})))));
};
var renderDoubleLegend = function () {
var sum = options
.map(function (el) { return parseInt(hoverData[el.key], 10); })
.reduce(function (a, b) { return a + b; }, 0);
return (React.createElement(Padbox, null,
React.createElement(FlexContainer, { flexDirection: "row" },
React.createElement(Padbox, { paddingSize: "md", paddingType: "squish" },
React.createElement(Card, { borderRadius: "sm", flexDirection: "column", height: "min-content", style: {
backgroundColor: 'white',
}, width: "max-content" },
React.createElement("span", { style: {
color: theme.colors[options[0].color],
fontWeight: 'bold',
} },
legendLabel,
' ',
Number.isNaN(sum)
? ''
: ": " + sum.toLocaleString('en-US', {
style: 'currency',
currency: currency,
})),
!isBarChart && hoverData && (React.createElement("div", { style: {
margin: '1px',
color: colors.darkGrey,
padding: '1px',
fontWeight: 'bold',
textTransform: 'capitalize',
display: 'block',
} }, hoverData.timestamp &&
new Date(+hoverData.timestamp).toDateString())))),
React.createElement(FlexContainer, { alignItems: "start", flexDirection: "row", justifyContent: "left", style: { paddingTop: '0.4rem' } }, options.map(function (el) {
return (React.createElement(Padbox, { key: el.key, paddingSize: "sm", paddingType: "stretch", onMouseEnter: function () { return enterAction(el.key); }, onMouseLeave: exitAction },
React.createElement(FlexContainer, { flexDirection: "row", justifyContent: "left", style: {
width: '100%',
} },
React.createElement("div", { style: {
height: '16px',
width: '16px',
margin: '0px 4px 4px',
background: theme.colors[el.color],
} }),
React.createElement("span", null,
el.name,
' ',
hoverData[el.key]
? ": " + parseInt(hoverData[el.key], 10).toLocaleString('en-US', { style: 'currency', currency: currency })
: ''))));
})))));
};
var renderListLegend = function () { return (React.createElement(Card, { borderRadius: "md", height: "min-content", style: {
background: 'white',
}, width: "max-content" },
React.createElement(IconButton, { color: "deepPurple", iconName: "times", label: "hide legend", onClick: closeAction }),
React.createElement(Padbox, { paddingSize: "sm", paddingType: "squish" },
React.createElement(FlexContainer, { flexDirection: "column", justifyContent: "space-evenly" },
__spreadArray([], options).map(function (el) {
return (React.createElement("div", { key: el.key, id: el.key + "-legend", style: {
margin: '1px',
color: colors[el.color],
padding: '1px',
fontWeight: 'bold',
textTransform: 'capitalize',
}, onMouseEnter: function () { return enterAction(el.key); }, onMouseLeave: exitAction },
el.name,
' ',
hoverData[el.key]
? ": " + parseInt(hoverData[el.key], 10).toLocaleString('en-US', { style: 'currency', currency: currency })
: ''));
}),
!isBarChart && hoverData && (React.createElement("div", { style: {
margin: '1px',
color: colors.darkGrey,
padding: '1px',
fontWeight: 'bold',
textTransform: 'capitalize',
} }, hoverData.timestamp &&
new Date(+hoverData.timestamp).toDateString())))))); };
return (React.createElement(React.Fragment, null,
legendType === 'pieChart' && renderPieChartLegend(),
legendType === 'list' && legendVisible && renderListLegend(),
legendType === 'double' && legendVisible && renderDoubleLegend(),
legendType !== 'pieChart' && !legendVisible && (React.createElement(IconButton, { color: "deepPurple", iconName: "book", label: "legend", onClick: function () { return setLegendVisbility(true); } }))));
};
export default Legend;
//# sourceMappingURL=Legend.js.map