react-gifted-charts
Version:
ReactJS counterpart of react-native-gifted-charts. An intuitive charting library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid and Radar charts in React
59 lines • 4.15 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { chartTypes } from 'gifted-charts-core';
var RenderVerticalLines = function (props) {
var verticalLinesAr = props.verticalLinesAr, verticalLinesSpacing = props.verticalLinesSpacing, spacing = props.spacing, initialSpacing = props.initialSpacing, verticalLinesZIndex = props.verticalLinesZIndex, verticalLinesHeight = props.verticalLinesHeight, verticalLinesThickness = props.verticalLinesThickness, verticalLinesColor = props.verticalLinesColor, verticalLinesStrokeDashArray = props.verticalLinesStrokeDashArray, verticalLinesShift = props.verticalLinesShift, verticalLinesUptoDataPoint = props.verticalLinesUptoDataPoint, xAxisThickness = props.xAxisThickness, labelsExtraHeight = props.labelsExtraHeight, containerHeight = props.containerHeight, data = props.data, barWidth = props.barWidth, maxValue = props.maxValue, chartType = props.chartType, containerHeightIncludingBelowXAxis = props.containerHeightIncludingBelowXAxis, totalWidth = props.totalWidth, xAxisLabelsVerticalShift = props.xAxisLabelsVerticalShift, verticalLinesStrokeLinecap = props.verticalLinesStrokeLinecap;
var getHeightOfVerticalLine = function (index) {
if (verticalLinesUptoDataPoint) {
if (index < data.length) {
return (data[index].value * containerHeight) / maxValue - xAxisThickness;
}
else {
return verticalLinesHeight !== null && verticalLinesHeight !== void 0 ? verticalLinesHeight : 0;
}
}
else {
return (verticalLinesHeight ||
containerHeightIncludingBelowXAxis - xAxisThickness);
}
};
var extendedContainerHeight = containerHeight + 10 + labelsExtraHeight;
var totalSpacing = 0;
var thickness = verticalLinesThickness || 2;
var heightAdjustmentDueToStrokeLinecap = verticalLinesStrokeLinecap === 'round' ||
verticalLinesStrokeLinecap === 'square'
? thickness / 2
: 0;
return (_jsx("div", { style: {
position: 'absolute',
height: containerHeightIncludingBelowXAxis,
bottom: xAxisLabelsVerticalShift + 70, //(noOfSectionsBelowXAxis ? 22 : 30), //stepHeight * -0.5 + xAxisThickness,
width: totalWidth,
zIndex: verticalLinesZIndex || -1
}, children: _jsx("svg", { height: containerHeightIncludingBelowXAxis, width: totalWidth, children: verticalLinesAr.map(function (item, index) {
var _a, _b;
if (verticalLinesSpacing) {
totalSpacing = verticalLinesSpacing * (index + 1);
}
else {
totalSpacing += (((_a = data[index]) === null || _a === void 0 ? void 0 : _a.barWidth) || barWidth || 30) / 2;
totalSpacing += index ? spacing : 0;
totalSpacing += index
? (((_b = data[index - 1]) === null || _b === void 0 ? void 0 : _b.barWidth) || barWidth || 30) / 2
: 0;
}
var x = verticalLinesShift +
1 +
(chartType === chartTypes.BAR
? totalSpacing + initialSpacing - 2
: verticalLinesSpacing
? verticalLinesSpacing * (index + 1)
: index * spacing + (initialSpacing - 2));
return (_jsx("line", { x1: x, y1: extendedContainerHeight -
getHeightOfVerticalLine(index) +
heightAdjustmentDueToStrokeLinecap +
7, x2: x, y2: containerHeightIncludingBelowXAxis -
heightAdjustmentDueToStrokeLinecap, stroke: verticalLinesColor || 'lightgray', strokeWidth: verticalLinesThickness || 2, strokeDasharray: verticalLinesStrokeDashArray !== null && verticalLinesStrokeDashArray !== void 0 ? verticalLinesStrokeDashArray : '', strokeLinecap: verticalLinesStrokeLinecap }, index));
}) }) }));
};
export default RenderVerticalLines;
//# sourceMappingURL=renderVerticalLines.js.map