@ansible/react-json-chart-builder
Version:
A chart builder component in react, which uses JSON for schema.
186 lines • 8.84 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 _a;
import React, { useState } from 'react';
import { Chart as PFChart, ChartAxis, ChartLabel, ChartLegendTooltip, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts/victory';
import { ChartKind, ChartType } from '../types';
import createChart from './createChart';
import createGroup from './createGroup';
import createStack from './createStack';
import { axisFormatPreprocess, getBarWidthFromData, paddingNumberToObject } from '../Common/helpers';
import ResponsiveContainer from '../Common/ResponsiveContainer';
import { getInteractiveLegendForMultiSeries as getInteractiveLegend, getLegendProps } from '../Common/getLegendProps';
import { ChartAxisFormatFunctionNames, ChartLabelFormatFunctionNames } from '../Functions';
var components = (_a = {},
_a[ChartKind.group] = createGroup,
_a[ChartKind.stack] = createStack,
_a[ChartKind.simple] = createChart,
_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 === ChartKind.simple;
});
return simpleCharts.some(function (_a) {
var type = _a.type;
return type !== ChartType.bar;
})
? 0
: (getBarWidthFromData(data, width) * data.length) / 2;
};
var getAllDisplayedValues = function (charts) {
return charts.filter(function (_a) {
var kind = _a.kind;
return kind === 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 = 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: paddingNumberToObject(wrapper.props.padding) }
: {
padding: {
bottom: 70,
left: 70,
right: 50,
top: 50
}
}));
var legendProps = getLegendProps(wrapper, data, props.padding);
if ((_c = wrapper.legend) === null || _c === void 0 ? void 0 : _c.interactive) {
legendProps = __assign(__assign({}, legendProps), { legendComponent: getInteractiveLegend(wrapper, data, setData) });
delete legendProps.legendData;
}
var labelProps = {};
if (wrapper.tooltip) {
var tooltip_1 = wrapper.tooltip;
var ContainerComponent = tooltip_1.cursor
? createContainer('voronoi', 'cursor')
: ChartVoronoiContainer;
labelProps = {
containerComponent: (React.createElement(ContainerComponent, __assign({ cursorDimension: tooltip_1.stickToAxis, labels: functions.labelFormat[(_d = tooltip_1.labelFormat) !== null && _d !== void 0 ? _d : ChartLabelFormatFunctionNames.default], voronoiPadding: props.padding }, (tooltip_1.legendTooltip && {
labelComponent: (React.createElement(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.createElement(ChartLabel, __assign({}, xLabelProps)) }, (minMaxValue[0] < 0 && { offsetY: xOffsetY })), xAxisProps), { tickFormat: axisFormatPreprocess({
wrapText: xAxisProps.wrapText,
turncateAtNumber: xAxisProps.turncateAt,
fnc: functions.axisFormat[(_f = xAxisProps.tickFormat) !== null && _f !== void 0 ? _f : ChartAxisFormatFunctionNames.default]
}) });
var _k = wrapper.yAxis, yLabelProps = _k.labelProps, yAxisProps = __rest(_k, ["labelProps"]);
var yAxis = __assign(__assign(__assign({ tickLabelComponent: React.createElement(ChartLabel, __assign({}, yLabelProps)) }, (minMaxValue[0] < 0 && {
domain: yDomain,
tickValues: yTicks.slice(1, -1)
})), yAxisProps), { tickFormat: axisFormatPreprocess({
wrapText: yAxisProps.wrapText,
turncateAtNumber: yAxisProps.turncateAt,
fnc: functions.axisFormat[(_g = yAxisProps.tickFormat) !== null && _g !== void 0 ? _g : ChartAxisFormatFunctionNames.default]
}) });
return (React.createElement(ResponsiveContainer, { setWidth: setWidth, height: props.height }, data.series.length > 0 && (React.createElement(PFChart, __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.createElement(ChartAxis, __assign({}, xAxis)),
React.createElement(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);
})))));
};
export default CreateWrapper;
//# sourceMappingURL=CreateWrapper.js.map