@ansible/react-json-chart-builder
Version:
A chart builder component in react, which uses JSON for schema.
214 lines • 10.3 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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 __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var victory_1 = require("@patternfly/react-charts/victory");
var types_1 = require("../types");
var createChart_1 = __importDefault(require("./createChart"));
var createGroup_1 = __importDefault(require("./createGroup"));
var createStack_1 = __importDefault(require("./createStack"));
var helpers_1 = require("../Common/helpers");
var ResponsiveContainer_1 = __importDefault(require("../Common/ResponsiveContainer"));
var getLegendProps_1 = require("../Common/getLegendProps");
var Functions_1 = require("../Functions");
var components = (_a = {},
_a[types_1.ChartKind.group] = createGroup_1.default,
_a[types_1.ChartKind.stack] = createStack_1.default,
_a[types_1.ChartKind.simple] = createChart_1.default,
_a);
var getDomainPadding = function (_a) {
var data = _a.data, charts = _a.charts, width = _a.width;
var simpleCharts = charts.filter(function (_a) {
var kind = _a.kind;
return kind === types_1.ChartKind.simple;
});
return simpleCharts.some(function (_a) {
var type = _a.type;
return type !== types_1.ChartType.bar;
})
? 0
: ((0, helpers_1.getBarWidthFromData)(data, width) * data.length) / 2;
};
var getAllDisplayedValues = function (charts) {
return charts.filter(function (_a) {
var kind = _a.kind;
return kind === types_1.ChartKind.simple;
}).map(function (_a) {
var _b;
var props = _a.props;
return (_b = props === null || props === void 0 ? void 0 : props.y) !== null && _b !== void 0 ? _b : 'y';
});
};
var getNiceNumber = function (n) {
var rounded = Math.pow(10, Math.floor(Math.log10(Math.abs(n)))) / 2;
return rounded === 0 ? 0 : rounded * Math.ceil(Math.abs(n) / rounded);
};
var getMinMaxFromData = function (data, dataKeys) {
var maxInAnyData = 1;
var minInAnyData = 0;
data.map(function (_a) {
var serie = _a.serie, hidden = _a.hidden;
if (hidden)
return;
serie.map(function (el) {
dataKeys.forEach(function (key) {
if (!isNaN(+el[key])) {
if (el[key] > 0) {
maxInAnyData = Math.max(maxInAnyData, getNiceNumber(+el[key]));
}
else {
minInAnyData = Math.min(minInAnyData, -getNiceNumber(+el[key]));
}
}
});
});
});
return [minInAnyData, maxInAnyData];
};
var getTicksFromMinMax = function (minMaxValue) {
var no = Math.pow(2, 3);
var interval = Math.abs(minMaxValue[0]) + Math.abs(minMaxValue[1]);
var ticksInterval = interval / no + 1;
var ticks = [];
var currTick = 0;
while (currTick > minMaxValue[0] - ticksInterval) {
currTick -= ticksInterval;
}
while (currTick < minMaxValue[1]) {
currTick += ticksInterval;
ticks.push(currTick);
}
return ticks;
};
var getDomainFromTicks = function (ticks) { return [
ticks[0],
ticks[ticks.length - 1]
]; };
var CreateWrapper = function (_a) {
var _b, _c, _d, _e, _f, _g;
var id = _a.id, schema = _a.schema, functions = _a.functions, dataState = _a.dataState;
var wrapper = schema.find(function (_a) {
var i = _a.id;
return i === id;
});
var children = schema.filter(function (_a) {
var parent = _a.parent;
return parent === wrapper.id;
});
var data = dataState[0], setData = dataState[1];
var _h = (0, react_1.useState)(0), width = _h[0], setWidth = _h[1];
var props = __assign(__assign({ height: 300 }, wrapper.props), (((_b = wrapper === null || wrapper === void 0 ? void 0 : wrapper.props) === null || _b === void 0 ? void 0 : _b.padding)
? { padding: (0, helpers_1.paddingNumberToObject)(wrapper.props.padding) }
: {
padding: {
bottom: 70,
left: 70,
right: 50,
top: 50
}
}));
var legendProps = (0, getLegendProps_1.getLegendProps)(wrapper, data, props.padding);
if ((_c = wrapper.legend) === null || _c === void 0 ? void 0 : _c.interactive) {
legendProps = __assign(__assign({}, legendProps), { legendComponent: (0, getLegendProps_1.getInteractiveLegendForMultiSeries)(wrapper, data, setData) });
delete legendProps.legendData;
}
var labelProps = {};
if (wrapper.tooltip) {
var tooltip_1 = wrapper.tooltip;
var ContainerComponent = tooltip_1.cursor
? (0, victory_1.createContainer)('voronoi', 'cursor')
: victory_1.ChartVoronoiContainer;
labelProps = {
containerComponent: (react_1.default.createElement(ContainerComponent, __assign({ cursorDimension: tooltip_1.stickToAxis, labels: functions.labelFormat[(_d = tooltip_1.labelFormat) !== null && _d !== void 0 ? _d : Functions_1.ChartLabelFormatFunctionNames.default], voronoiPadding: props.padding }, (tooltip_1.legendTooltip && {
labelComponent: (react_1.default.createElement(victory_1.ChartLegendTooltip, __assign({ legendData: (_e = tooltip_1.legendTooltip.legendData) !== null && _e !== void 0 ? _e : data.legend }, (tooltip_1.legendTooltip.titleProperyForLegend && {
title: function (datum) {
return datum[tooltip_1.legendTooltip.titleProperyForLegend];
}
}))))
}), { voronoiDimension: tooltip_1.stickToAxis, mouseFollowTooltips: tooltip_1.mouseFollow, constrainToVisibleArea: true })))
};
}
var dataKeys = getAllDisplayedValues(schema);
var minMaxValue = getMinMaxFromData(data.series, dataKeys);
var yTicks = getTicksFromMinMax(minMaxValue);
var yDomain = getDomainFromTicks(yTicks);
var xOffsetY = props.padding.bottom;
var _j = wrapper.xAxis, xLabelProps = _j.labelProps, xAxisProps = __rest(_j, ["labelProps"]);
var xAxis = __assign(__assign(__assign({ fixLabelOverlap: true, tickLabelComponent: react_1.default.createElement(victory_1.ChartLabel, __assign({}, xLabelProps)) }, (minMaxValue[0] < 0 && { offsetY: xOffsetY })), xAxisProps), { tickFormat: (0, helpers_1.axisFormatPreprocess)({
wrapText: xAxisProps.wrapText,
turncateAtNumber: xAxisProps.turncateAt,
fnc: functions.axisFormat[(_f = xAxisProps.tickFormat) !== null && _f !== void 0 ? _f : Functions_1.ChartAxisFormatFunctionNames.default]
}) });
var _k = wrapper.yAxis, yLabelProps = _k.labelProps, yAxisProps = __rest(_k, ["labelProps"]);
var yAxis = __assign(__assign(__assign({ tickLabelComponent: react_1.default.createElement(victory_1.ChartLabel, __assign({}, yLabelProps)) }, (minMaxValue[0] < 0 && {
domain: yDomain,
tickValues: yTicks.slice(1, -1)
})), yAxisProps), { tickFormat: (0, helpers_1.axisFormatPreprocess)({
wrapText: yAxisProps.wrapText,
turncateAtNumber: yAxisProps.turncateAt,
fnc: functions.axisFormat[(_g = yAxisProps.tickFormat) !== null && _g !== void 0 ? _g : Functions_1.ChartAxisFormatFunctionNames.default]
}) });
return (react_1.default.createElement(ResponsiveContainer_1.default, { setWidth: setWidth, height: props.height }, data.series.length > 0 && (react_1.default.createElement(victory_1.Chart, __assign({ domainPadding: children.length === 1
? getDomainPadding({
data: data.series,
charts: schema,
width: width - props.padding.left - props.padding.right
})
: 0 }, props, legendProps, labelProps, { width: width }),
react_1.default.createElement(victory_1.ChartAxis, __assign({}, xAxis)),
react_1.default.createElement(victory_1.ChartAxis, __assign({ dependentAxis: true }, yAxis)),
children &&
children.map(function (child) {
return components[child.kind](child.id, { schema: schema, functions: functions, dataState: dataState }, data, width - props.padding.left - props.padding.right);
})))));
};
exports.default = CreateWrapper;
//# sourceMappingURL=CreateWrapper.js.map