design-system-simplefi
Version:
Design System for SimpleFi Applications
113 lines • 9.66 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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, { useState } from 'react';
import styled, { css, keyframes } from 'styled-components';
import { AreaChart } from './Graph';
import { BarChart } from './BarChart';
import { PieChart } from './PieChart';
import Legend from './Legend';
import { IconButton } from '../IconButton';
var ChartContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n padding: 6px 8px;\n position: relative;\n opacity: ", ";\n transition: height 0.5s, opacity 0.3s;\n"], ["\n width: 100%;\n height: ", ";\n padding: 6px 8px;\n position: relative;\n opacity: ", ";\n transition: height 0.5s, opacity 0.3s;\n"])), function (_a) {
var height = _a.height, isCollapsed = _a.isCollapsed;
return (isCollapsed ? '2.2rem' : height);
}, function (_a) {
var isCollapsed = _a.isCollapsed;
return (isCollapsed ? 0 : 1);
});
var CollapseIconContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n right: 10px;\n bottom: 8px;\n"], ["\n position: absolute;\n right: 10px;\n bottom: 8px;\n"])));
var bottomAnimation = keyframes(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n 25% {\n top: 15px;\n left: 35px;\n opacity: 0;\n }\n 50% {\n top: 10px;\n left: 30px;\n opacity: 0.2;\n }\n 75% {\n top: 5px;\n left: 25px;\n opacity: 0.4;\n }\n\n 100% {\n top: 0x;\n left: 20px;\n opacity: 1;\n }\n"], ["\n 25% {\n top: 15px;\n left: 35px;\n opacity: 0;\n }\n 50% {\n top: 10px;\n left: 30px;\n opacity: 0.2;\n }\n 75% {\n top: 5px;\n left: 25px;\n opacity: 0.4;\n }\n\n 100% {\n top: 0x;\n left: 20px;\n opacity: 1;\n }\n"])));
var topAnimation = keyframes(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n 25% {\n top: -15px;\n left: -20px;\n opacity: 0;\n }\n 50% {\n top: -10px;\n left: -15px;\n opacity: 0.6;\n }\n 75% {\n top: -5px;\n left: -10px;\n opacity: 0.8;\n }\n\n 100% {\n top: 5x;\n left: 5px;\n opacity: 1;\n }\n"], ["\n 25% {\n top: -15px;\n left: -20px;\n opacity: 0;\n }\n 50% {\n top: -10px;\n left: -15px;\n opacity: 0.6;\n }\n 75% {\n top: -5px;\n left: -10px;\n opacity: 0.8;\n }\n\n 100% {\n top: 5x;\n left: 5px;\n opacity: 1;\n }\n"])));
var CollapsedHeadingIconContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n padding: 8px;\n text-align: left;\n width: 100%;\n color: ", ";\n white-space: pre;\n font-weight: bold;\n opacity: 0;\n ", "\n"], ["\n position: absolute;\n padding: 8px;\n text-align: left;\n width: 100%;\n color: ", ";\n white-space: pre;\n font-weight: bold;\n opacity: 0;\n ", "\n"])), function (props) { return props.theme.colors[props.color]; }, function (_a) {
var isCollapsed = _a.isCollapsed;
return isCollapsed && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n animation: ", " 0.3s 0.2s ease-in forwards;\n "], ["\n animation: ", " 0.3s 0.2s ease-in forwards;\n "])), bottomAnimation);
});
var LegendContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: absolute;\n top: 5px;\n left: 5px;\n z-index: 5;\n opacity: 1;\n ", "\n"], ["\n position: absolute;\n top: 5px;\n left: 5px;\n z-index: 5;\n opacity: 1;\n ", "\n"])), function (_a) {
var isCollapsed = _a.isCollapsed;
return isCollapsed && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n animation: ", " 0.5s ease-in-out forwards;\n "], ["\n animation: ", " 0.5s ease-in-out forwards;\n "])), topAnimation);
});
export var Graph = function (_a) {
var data = _a.data, options = _a.options, _b = _a.barWhiteSpaceModifier, barWhiteSpaceModifier = _b === void 0 ? 0 : _b, _c = _a.currency, currency = _c === void 0 ? 'usd' : _c, isStacked = _a.isStacked, _d = _a.hasLegend, hasLegend = _d === void 0 ? true : _d, _e = _a.type, type = _e === void 0 ? 'areaGraph' : _e, _f = _a.legendType, legendType = _f === void 0 ? 'list' : _f, legendLabel = _a.legendLabel, _g = _a.collapsible, collapsible = _g === void 0 ? false : _g, _h = _a.defaultCollapsed, defaultCollapsed = _h === void 0 ? false : _h, _j = _a.height, height = _j === void 0 ? '400px' : _j, _k = _a.shouldGraphAnimate, shouldGraphAnimate = _k === void 0 ? false : _k, tickFormatter = _a.tickFormatter, _l = _a.withTooltip, withTooltip = _l === void 0 ? false : _l, tooltipLabelFormatter = _a.tooltipLabelFormatter;
var _m = useState({}), hoverValues = _m[0], setHoverValues = _m[1];
var _o = useState(true), showLegend = _o[0], setShowLegend = _o[1];
var _p = useState(__spreadArray([], options)), optionsData = _p[0], setOptionsData = _p[1];
var _q = useState(defaultCollapsed), collapsed = _q[0], setCollapsed = _q[1];
var graph = (React.createElement(AreaChart, { callback: setHoverValues, data: data, doubleLegend: legendType === 'double', hoverData: hoverValues, isStacked: isStacked, options: optionsData, shouldAnimate: shouldGraphAnimate, tickFormatter: tickFormatter, tooltipLabelFormatter: tooltipLabelFormatter, withTooltip: withTooltip }));
if (type === 'barChart') {
graph = (React.createElement(BarChart, { callback: setHoverValues, data: data, hoverData: hoverValues, isStacked: isStacked, options: options, shouldAnimate: shouldGraphAnimate, tickFormatter: tickFormatter, whiteSpaceModifier: barWhiteSpaceModifier }));
}
var handleMouseEnter = function (id) {
var newOptions = __spreadArray([], optionsData).map(function (el) {
if (el.key !== id) {
el.opacity = 0.2;
}
else {
el.opacity = 0.9;
}
return el;
});
setHoverValues({});
setOptionsData(function () { return newOptions; });
};
var handleMouseLeave = function () {
var newOptions = __spreadArray([], optionsData).map(function (el) { return (__assign(__assign({}, el), { opacity: 0.8 })); });
setOptionsData(function () { return newOptions; });
};
return (React.createElement(React.Fragment, null,
collapsible && collapsed && (React.createElement(CollapsedHeadingIconContainer, { color: options[0].color || 'deepBlue', isCollapsed: collapsed }, legendLabel)),
React.createElement(ChartContainer, { height: height, isCollapsed: collapsed },
hasLegend && (React.createElement(LegendContainer, { isCollapsed: collapsed && collapsible },
React.createElement(Legend, { closeAction: function () { return setShowLegend(false); }, currency: currency, enterAction: function (id) { return handleMouseEnter(id); }, exitAction: function () { return handleMouseLeave(); }, hoverData: hoverValues, isBarChart: type === 'barChart', legendLabel: legendLabel, legendType: legendType, legendVisible: showLegend, options: optionsData, setLegendVisbility: setShowLegend }))),
React.createElement("div", { style: {
height: height,
width: '100%',
transition: 'opacity 0.3s',
opacity: collapsed ? 0 : 1,
} }, graph)),
collapsible && (React.createElement(CollapseIconContainer, null,
React.createElement(IconButton, { color: "deepPurple", iconName: collapsed ? 'expand' : 'collapse', label: "legend", onClick: function () { return setCollapsed(!collapsed); } })))));
};
export var Chart = function (_a) {
var data = _a.data, source = _a.source, hasLegend = _a.hasLegend, _b = _a.showLabel, showLabel = _b === void 0 ? false : _b;
var optionsData = useState(__spreadArray([], data))[0];
return (React.createElement(ChartContainer, { style: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-evenly',
} },
hasLegend && (React.createElement("div", { style: {
zIndex: 5,
width: '40%',
margin: 'auto',
height: '90%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
overflow: 'auto',
} },
React.createElement(Legend, { legendType: "pieChart", options: optionsData, source: source }))),
React.createElement("div", { style: {
width: '60%',
height: '100%',
} },
React.createElement(PieChart, { data: data, showLabel: showLabel }))));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
//# sourceMappingURL=Chart.js.map