design-system-simplefi
Version:
Design System for SimpleFi Applications
98 lines • 5.83 kB
JavaScript
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;
};
/* eslint-disable fp/no-delete */
import React from 'react';
import { Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, XAxis, YAxis, } from 'recharts';
import { scalePow } from 'd3-scale';
import { formatDataInSingleObject } from '../utils/helpers';
import { theme } from '../../../theme';
var BarChartComponent = function (_a) {
var data = _a.data, options = _a.options, _b = _a.whiteSpaceModifier, whiteSpaceModifier = _b === void 0 ? 0 : _b, isStacked = _a.isStacked, _c = _a.callback, callback = _c === void 0 ? function () { } : _c, hoverData = _a.hoverData, _d = _a.shouldAnimate, shouldAnimate = _d === void 0 ? false : _d, tickFormatter = _a.tickFormatter;
var dataArray = formatDataInSingleObject(data);
var maxBarNumber = dataArray.reduce(function (prev, curr) {
return Math.max.apply(Math, __spreadArray([prev], Object.values(curr).slice(1)));
}, 0);
var whiteSpaceSize = maxBarNumber * whiteSpaceModifier;
var whiteSpaces = ['topBlank', 'bottomBlank'];
var whiteSpaceBars = isStacked
? whiteSpaces.map(function (item) { return (React.createElement(Bar, { key: item + "-bar", dataKey: item, fill: "rgba(255, 255, 255, 0)", isAnimationActive: shouldAnimate, maxBarSize: 80, radius: 5, stackId: "sign" })); })
: __spreadArray([], options).map(function (data, index) {
return whiteSpaces.map(function (item) { return (React.createElement(Bar, { key: item + "-" + data.key + "-bar", dataKey: item, fill: "rgba(255, 255, 255, 0)", isAnimationActive: shouldAnimate, maxBarSize: 80, radius: 5, stackId: index })); });
});
var bars = __spreadArray([], options).map(function (dataSet, index) {
return (React.createElement(Bar, { key: dataSet.key + "-bar", dataKey: dataSet.key, fill: theme.colors[dataSet.color], isAnimationActive: shouldAnimate, maxBarSize: 80, radius: 5, stackId: isStacked ? 'sign' : index }));
});
var calcTicks = function () {
var values = __spreadArray([], dataArray).map(function (el) {
var dataPoint = el;
delete dataPoint.timestamp;
delete dataPoint.bottomBlank;
delete dataPoint.topBlank;
return Object.values(dataPoint);
});
var allValues = values.flat().map(function (el) { return +el; });
var _a = {
minVal: Math.min.apply(Math, allValues),
maxVal: Math.max.apply(Math, allValues),
}, minVal = _a.minVal, maxVal = _a.maxVal;
var positiveRange = [1, maxVal];
var negativeRange = [1, Math.abs(minVal)];
var posPow = scalePow().range(positiveRange);
var negPow = scalePow().range(negativeRange);
var rangeObj = {
'-1': Math.round(-negativeRange[1]),
'-0.8': Math.round(-negPow(0.6)),
'-0.6': Math.round(-negPow(0.3)),
'-0.4': Math.round(-negPow(0.1)),
'-0.2': Math.round(-negPow(0.008)),
'0': 0,
'0.2': Math.round(posPow(0.008)),
'0.4': Math.round(posPow(0.1)),
'0.6': Math.round(posPow(0.3)),
'0.8': Math.round(posPow(0.6)),
'1': Math.round(positiveRange[1]),
};
if (negativeRange[1] < positiveRange[1] * 0.3) {
delete rangeObj['-0.8'];
delete rangeObj['-0.6'];
delete rangeObj['-0.4'];
delete rangeObj['-0.2'];
}
var ticks = Object.values(rangeObj);
// if (negativeRange[1] < positiveRange[1] * 0.3) ticks.splice(6, 2);
return ticks;
};
return (React.createElement(ResponsiveContainer, { height: "100%", width: "100%" },
React.createElement(BarChart, { barGap: 5, data: dataArray.map(function (data) { return (__assign({ timestamp: data.timestamp, topBlank: whiteSpaceSize, bottomBlank: -whiteSpaceSize }, data)); }), margin: { top: 2, bottom: 2, left: 2, right: 2 }, stackOffset: "sign", onMouseLeave: function () { return callback({}); }, onMouseMove: function (e) { return e !== null && callback(e.activePayload[0].payload); } },
React.createElement(ReferenceLine, { stroke: "black", strokeDasharray: "4 6", strokeWidth: 0.75, y: 0 }),
React.createElement(XAxis, { dataKey: "timestamp", tickFormatter: tickFormatter }),
React.createElement(YAxis, { domain: [
function (dataMin) {
var ticks = calcTicks();
return 0 - Math.abs(dataMin) - ticks[ticks.length - 1] * 0.03;
},
function (dataMax) { return dataMax + dataMax * 0.03; },
], interval: 0, orientation: "right", padding: { top: 10 }, scale: "sqrt", ticks: calcTicks() }),
!!(hoverData === null || hoverData === void 0 ? void 0 : hoverData.timestamp) && (React.createElement(ReferenceLine, { stroke: "black", strokeDasharray: "4 6", strokeWidth: 1, x: hoverData === null || hoverData === void 0 ? void 0 : hoverData.timestamp })),
React.createElement(CartesianGrid, { strokeDasharray: "4 6", style: {
zIndex: 2,
} }),
whiteSpaceBars,
bars)));
};
export default BarChartComponent;
//# sourceMappingURL=BarChart.js.map