@ansible/react-json-chart-builder
Version:
A chart builder component in react, which uses JSON for schema.
142 lines • 7.78 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 __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;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getLegendProps = exports.getInteractiveLegendForSingleSeries = exports.getInteractiveLegendForMultiSeries = void 0;
var victory_1 = require("@patternfly/react-charts/victory");
var react_core_1 = require("@patternfly/react-core");
var react_1 = __importDefault(require("react"));
var helpers_1 = require("./helpers");
var LegendWithTooltip = function (_a) {
var datum = _a.datum, rest = __rest(_a, ["datum"]);
return (react_1.default.createElement(react_core_1.Tooltip, { content: datum.tooltipText, triggerRef: function () { return document.getElementById(rest.text.toString()); }, enableFlip: true },
react_1.default.createElement(victory_1.ChartLabel, __assign({}, rest, { id: rest.text.toString() }))));
};
var getLegendName = function (_a) {
var name = _a.name, turncateAtNumber = _a.turncateAtNumber, wrapText = _a.wrapText;
return (wrapText ? (0, helpers_1.wrapAt)(name, turncateAtNumber) : (0, helpers_1.turncateAt)(name, turncateAtNumber));
};
var getChartLegend = function (id, legend, isHidden, handleClick, turncateAtNumber, wrapText, hasTooltip) {
if (turncateAtNumber === void 0) { turncateAtNumber = Infinity; }
if (wrapText === void 0) { wrapText = false; }
if (hasTooltip === void 0) { hasTooltip = true; }
return (react_1.default.createElement(victory_1.ChartLegend, { name: "legend-".concat(id), data: legend.map(function (el, index) { return (__assign(__assign(__assign({ tooltipText: el.name }, el), { name: getLegendName({ name: el.name, turncateAtNumber: turncateAtNumber, wrapText: wrapText }) }), (0, victory_1.getInteractiveLegendItemStyles)(isHidden(index)))); }), style: {
labels: {
cursor: 'pointer'
}
}, events: [
{
target: 'labels',
eventHandlers: {
onClick: function () { return [
{
target: 'data',
mutation: function (props) {
handleClick(props);
return null;
}
}
]; }
}
}
], labelComponent: hasTooltip ? react_1.default.createElement(LegendWithTooltip, null) : react_1.default.createElement(victory_1.ChartLabel, null) }));
};
var getInteractiveLegendForMultiSeries = function (element, chartData, setData) {
var _a, _b, _c;
var handleClick = function (_a) {
var index = _a.index;
var hiddenCount = chartData.series.filter(function (_a) {
var hidden = _a.hidden;
return hidden;
}).length;
if (!chartData.series[index].hidden && chartData.series.length === hiddenCount + 1) {
return;
}
var tempData = __spreadArray([], chartData.series, true);
tempData[index].hidden = !tempData[index].hidden;
setData(__assign(__assign({}, chartData), { series: tempData }));
};
var isHidden = function (idx) { return chartData.series[idx].hidden; };
return element.legend && chartData.legend
? getChartLegend(element.id, chartData.legend, isHidden, handleClick, (_a = element === null || element === void 0 ? void 0 : element.legend) === null || _a === void 0 ? void 0 : _a.turncateAt, (_b = element === null || element === void 0 ? void 0 : element.legend) === null || _b === void 0 ? void 0 : _b.wrapText, (_c = element === null || element === void 0 ? void 0 : element.legend) === null || _c === void 0 ? void 0 : _c.hasTooltip)
: null;
};
exports.getInteractiveLegendForMultiSeries = getInteractiveLegendForMultiSeries;
var getInteractiveLegendForSingleSeries = function (element, serie, setSerie, chartData) {
var _a, _b, _c;
var handleClick = function (_a) {
var index = _a.index;
var hiddenCount = serie.filter(function (_a) {
var hidden = _a.hidden;
return hidden;
}).length;
if (!serie[index].hidden && serie.length === hiddenCount + 1) {
return;
}
var tempData = __spreadArray([], serie, true);
tempData[index].hidden = !tempData[index].hidden;
setSerie(tempData);
};
var isHidden = function (idx) { var _a; return !!((_a = serie[idx]) === null || _a === void 0 ? void 0 : _a.hidden); };
return element.legend && chartData.legend
? getChartLegend(element.id, chartData.legend, isHidden, handleClick, (_a = element === null || element === void 0 ? void 0 : element.legend) === null || _a === void 0 ? void 0 : _a.turncateAt, (_b = element === null || element === void 0 ? void 0 : element.legend) === null || _b === void 0 ? void 0 : _b.wrapText, (_c = element === null || element === void 0 ? void 0 : element.legend) === null || _c === void 0 ? void 0 : _c.hasTooltip)
: null;
};
exports.getInteractiveLegendForSingleSeries = getInteractiveLegendForSingleSeries;
var getLegendProps = function (element, chartData, originalPadding) {
var props = {
padding: originalPadding
};
if (element.legend) {
var legend = element.legend;
if (legend.position === 'bottom' || legend.position === 'right') {
props.padding[legend.position] += 100;
}
if (legend.position === 'bottom') {
element.props.height += 100;
}
props = __assign(__assign(__assign(__assign({}, props), (legend.position && { legendPosition: legend.position })), (legend.orientation && { legendOrientation: legend.orientation })), { legendData: chartData.legend.map(function (el) {
var _a, _b, _c;
return (__assign(__assign({}, el), { name: getLegendName({
name: el.name,
turncateAtNumber: (_b = (_a = element === null || element === void 0 ? void 0 : element.legend) === null || _a === void 0 ? void 0 : _a.turncateAt) !== null && _b !== void 0 ? _b : Infinity,
wrapText: (_c = element === null || element === void 0 ? void 0 : element.legend) === null || _c === void 0 ? void 0 : _c.wrapText
}) }));
}) });
}
return props;
};
exports.getLegendProps = getLegendProps;
//# sourceMappingURL=getLegendProps.js.map