bento-charts
Version:
Charts library for Bento-platform
62 lines • 4.64 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from 'react';
import { Bar, BarChart, CartesianGrid, Cell, Label, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
import { TOOLTIP_STYLE, COUNT_STYLE, LABEL_STYLE, MAX_TICK_LABEL_CHARS, TITLE_STYLE, TICKS_SHOW_ALL_LABELS_BELOW, UNITS_LABEL_OFFSET, TICK_MARGIN, COUNT_KEY, } from '../../constants/chartConstants';
import { useChartTranslation } from '../../ChartConfigProvider';
import NoData from '../NoData';
import { useTransformedChartData } from '../../util/chartUtils';
import ChartWrapper from './ChartWrapper';
var tickFormatter = function (tickLabel) {
if (tickLabel.length <= MAX_TICK_LABEL_CHARS) {
return tickLabel;
}
return "".concat(tickLabel.substring(0, MAX_TICK_LABEL_CHARS), "...");
};
var BAR_CHART_MARGINS = { top: 10, bottom: 100, right: 20 };
var BaseBarChart = function (_a) {
var height = _a.height, width = _a.width, units = _a.units, title = _a.title, onClick = _a.onClick, onChartClick = _a.onChartClick, chartFill = _a.chartFill, otherFill = _a.otherFill, params = __rest(_a, ["height", "width", "units", "title", "onClick", "onChartClick", "chartFill", "otherFill"]);
var t = useChartTranslation();
var fill = function (entry, index) {
return entry.x === 'missing' ? otherFill : chartFill[index % chartFill.length];
};
var data = useTransformedChartData(params, true);
var totalCount = data.reduce(function (sum, e) { return sum + e.y; }, 0);
var onHover = useCallback(function (_data, _index, e) {
var target = e.target;
if (onClick && target)
target.style.cursor = 'pointer';
}, [onClick]);
if (data.length === 0) {
return _jsx(NoData, { height: height });
}
// Regarding XAxis.ticks below:
// The weird conditional is added from https://github.com/recharts/recharts/issues/2593#issuecomment-1311678397
// Basically, if data is empty, Recharts will default to a domain of [0, "auto"] and our tickFormatter trips up
// on formatting a non-string. This hack manually overrides the ticks for the axis and blanks it out.
// - David L, 2023-01-03
return (_jsxs(ChartWrapper, { responsive: typeof width !== 'number', children: [_jsx("div", { style: TITLE_STYLE, children: title }), _jsx(ResponsiveContainer, { width: width !== null && width !== void 0 ? width : '100%', height: height, children: _jsxs(BarChart, { data: data, margin: BAR_CHART_MARGINS, onClick: onChartClick, children: [_jsx(XAxis, { dataKey: "x", height: 20, angle: -45, ticks: data.length ? undefined : [''], tickFormatter: tickFormatter, tickMargin: TICK_MARGIN, textAnchor: "end", interval: data.length < TICKS_SHOW_ALL_LABELS_BELOW ? 0 : 'preserveStartEnd', children: _jsx(Label, { value: units, offset: UNITS_LABEL_OFFSET, position: "insideBottom" }) }), _jsx(YAxis, { children: _jsx(Label, { value: t[COUNT_KEY], offset: -10, position: "left", angle: 270 }) }), _jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }), _jsx(Tooltip, { content: _jsx(BarTooltip, { totalCount: totalCount }) }), _jsx(Bar, { dataKey: "y", isAnimationActive: false, onClick: onClick, onMouseEnter: onHover, maxBarSize: 70, children: data.map(function (entry, index) { return (_jsx(Cell, { fill: fill(entry, index) }, entry.x)); }) })] }) })] }));
};
var BarTooltip = function (_a) {
var _b, _c, _d;
var active = _a.active, payload = _a.payload, totalCount = _a.totalCount;
if (!active) {
return null;
}
var name = (payload && ((_c = (_b = payload[0]) === null || _b === void 0 ? void 0 : _b.payload) === null || _c === void 0 ? void 0 : _c.x)) || '';
var value = (payload && ((_d = payload[0]) === null || _d === void 0 ? void 0 : _d.value)) || 0;
var percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
return (_jsxs("div", { style: TOOLTIP_STYLE, children: [_jsx("p", { style: LABEL_STYLE, children: name }), _jsxs("p", { style: COUNT_STYLE, children: [value, " (", percentage, "%)"] })] }));
};
export default BaseBarChart;
//# sourceMappingURL=BaseBarChart.js.map