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
413 lines • 32.5 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 __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
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));
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Rule from '../lineSvg';
import { styles } from '../../LineChart/styles';
import { getHorizSectionVals, yAxisSides, chartTypes } from 'gifted-charts-core';
export var renderHorizSections = function (props) {
var _a, _b, _c, _d, _e;
var width = props.width, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, totalWidth = props.totalWidth, endSpacing = props.endSpacing, yAxisSide = props.yAxisSide, horizontalRulesStyle = props.horizontalRulesStyle, noOfSections = props.noOfSections, sectionColors = props.sectionColors, stepHeight = props.stepHeight, negativeStepHeight = props.negativeStepHeight, yAxisLabelWidth = props.yAxisLabelWidth, yAxisLabelContainerStyle = props.yAxisLabelContainerStyle, yAxisThickness = props.yAxisThickness, yAxisColor = props.yAxisColor, xAxisThickness = props.xAxisThickness, xAxisColor = props.xAxisColor, xAxisLength = props.xAxisLength, xAxisType = props.xAxisType, dashWidth = props.dashWidth, dashGap = props.dashGap, backgroundColor = props.backgroundColor, hideRules = props.hideRules, rulesLength = props.rulesLength, rulesType = props.rulesType, rulesThickness = props.rulesThickness, rulesColor = props.rulesColor, rulesConfigArray = props.rulesConfigArray, spacing = props.spacing, showYAxisIndices = props.showYAxisIndices, yAxisIndicesHeight = props.yAxisIndicesHeight, yAxisIndicesWidth = props.yAxisIndicesWidth, yAxisIndicesColor = props.yAxisIndicesColor, hideOrigin = props.hideOrigin, hideYAxisText = props.hideYAxisText, yAxisTextNumberOfLines = props.yAxisTextNumberOfLines, yAxisTextStyle = props.yAxisTextStyle, rotateYAxisTexts = props.rotateYAxisTexts, rtl = props.rtl, containerHeight = props.containerHeight, containerHeightIncludingBelowXAxis = props.containerHeightIncludingBelowXAxis, hasNegative = props.hasNegative, maxValue = props.maxValue, yAxisOffset = props.yAxisOffset, horizontal = props.horizontal, yAxisAtTop = props.yAxisAtTop, secondaryYAxis = props.secondaryYAxis, onlyReferenceLines = props.onlyReferenceLines, renderReferenceLines = props.renderReferenceLines, chartType = props.chartType, secondaryXAxis = props.secondaryXAxis;
var _f = getHorizSectionVals(props), secondaryYAxisConfig = _f.secondaryYAxisConfig, horizSections = _f.horizSections, yAxisExtraHeightAtTop = _f.yAxisExtraHeightAtTop, secondaryHorizSections = _f.secondaryHorizSections, showReferenceLine1 = _f.showReferenceLine1, referenceLine1Config = _f.referenceLine1Config, referenceLine1Position = _f.referenceLine1Position, showReferenceLine2 = _f.showReferenceLine2, referenceLine2Config = _f.referenceLine2Config, referenceLine2Position = _f.referenceLine2Position, showReferenceLine3 = _f.showReferenceLine3, referenceLine3Config = _f.referenceLine3Config, referenceLine3Position = _f.referenceLine3Position, horizSectionsBelow = _f.horizSectionsBelow, secondaryHorizSectionsBelow = _f.secondaryHorizSectionsBelow, getLabelTexts = _f.getLabelTexts, getLabelTextsForSecondaryYAxis = _f.getLabelTextsForSecondaryYAxis;
var secondaryYAxisExtraHeightAtBottom = 10;
var negativeSectionsCountDiffPrimaryVsSecondary = secondaryHorizSectionsBelow.length - horizSectionsBelow.length;
var isLineChart = chartType === chartTypes.LINE;
var isLineBiColor = chartType === chartTypes.LINE_BI_COLOR;
var horizSectionsLeft = (chartType === chartTypes.BAR
? yAxisLabelWidth
: yAxisLabelWidth + 21 - Math.min(Math.max(spacing, 21), 56)) -
Math.max((width ? 14 : 19) - endSpacing, 0);
var renderAxesAndRules = function (index) {
var _a, _b, _c, _d, _e, _f, _g;
var invertedIndex = horizSections.length - index - 1;
var rulesConfigArrayLocal = rulesConfigArray[invertedIndex - 1];
return (_jsxs("div", { style: (function () {
var _a;
var style = {
position: 'relative',
display: 'flex',
flexDirection: 'column'
};
if (index === noOfSections) {
style = __assign(__assign({}, style), styles.lastLeftPart);
}
else if (!index) {
style = __assign(__assign({}, style), { justifyContent: 'flex-start' });
}
else {
style = __assign(__assign({}, style), styles.leftPart);
}
style = __assign(__assign({}, style), { borderColor: yAxisColor, backgroundColor: (_a = sectionColors === null || sectionColors === void 0 ? void 0 : sectionColors[invertedIndex]) !== null && _a !== void 0 ? _a : backgroundColor, width: (props.width || totalWidth - spacing) + endSpacing, height: stepHeight, marginLeft: yAxisSide === yAxisSides.RIGHT ? 0 : yAxisLabelWidth });
if (!index || !invertedIndex) {
style.height = stepHeight / 2;
}
if (yAxisSide === yAxisSides.RIGHT) {
style.borderRightWidth = yAxisThickness;
style.borderRightStyle = 'solid';
}
else {
style.borderLeftWidth = yAxisThickness;
style.borderLeftStyle = 'solid';
}
return style;
})(), children: [index === noOfSections ? (_jsx(Rule, { config: {
thickness: xAxisThickness,
color: xAxisColor,
width: xAxisLength ||
(props.width || totalWidth - spacing) + endSpacing,
dashWidth: dashWidth,
dashGap: dashGap,
type: xAxisType
} })) : (_jsx(Rule, { config: {
thickness: hideRules
? 0
: (_a = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesThickness) !== null && _a !== void 0 ? _a : rulesThickness,
color: (_b = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesColor) !== null && _b !== void 0 ? _b : rulesColor,
width: (_d = (_c = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesLength) !== null && _c !== void 0 ? _c : rulesLength) !== null && _d !== void 0 ? _d : (props.width || totalWidth - spacing) + endSpacing,
dashWidth: (_e = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.dashWidth) !== null && _e !== void 0 ? _e : dashWidth,
dashGap: (_f = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.dashGap) !== null && _f !== void 0 ? _f : dashGap,
type: (_g = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesType) !== null && _g !== void 0 ? _g : rulesType
} })), showYAxisIndices && index !== noOfSections ? (_jsx("div", { style: {
position: 'absolute',
height: yAxisIndicesHeight,
width: yAxisIndicesWidth,
left: yAxisIndicesWidth / -2 +
(yAxisSide === yAxisSides.RIGHT
? (width !== null && width !== void 0 ? width : totalWidth) + endSpacing
: 0),
marginTop: -yAxisIndicesHeight / 2, // added
backgroundColor: yAxisIndicesColor
} })) : null] }));
};
var renderExtraHeightOfYAxisAtTop = function () { return (_jsxs("div", { style: (function () {
var style = __assign(__assign({}, styles.horizBar), { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing + yAxisLabelWidth });
if (horizontal && !yAxisAtTop) {
style.transform = "rotateY(180deg)";
}
if (yAxisSide == yAxisSides.RIGHT) {
style.marginLeft = -yAxisLabelWidth;
}
style = __assign(__assign({}, style), horizontalRulesStyle);
return style;
})(), children: [_jsx("div", { style: __assign(__assign(__assign({}, styles.leftLabel), { height: yAxisExtraHeightAtTop, width: yAxisLabelWidth }), yAxisLabelContainerStyle) }), _jsx("div", { style: (function () {
var _a, _b;
var style = __assign(__assign({}, styles.leftPart), { borderLeftColor: yAxisColor, borderRightColor: yAxisColor, borderTopColor: ((_a = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.color) !== null && _a !== void 0 ? _a : xAxisColor), borderTopWidth: secondaryXAxis
? (_b = secondaryXAxis.thickness) !== null && _b !== void 0 ? _b : xAxisThickness
: 0, backgroundColor: backgroundColor, width: (props.width || totalWidth - spacing) + endSpacing });
if (yAxisSide === yAxisSides.RIGHT) {
style.borderRightWidth = yAxisThickness;
style.borderRightStyle = 'solid';
style.marginRight = -2;
}
else {
style.borderLeftWidth = yAxisThickness;
style.borderLeftStyle = 'solid';
}
return style;
})() })] })); };
var renderSecondaryYaxisLabels = function (horizSections, isBelow) {
return horizSections.map(function (sectionItems, index) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
var label = getLabelTextsForSecondaryYAxis(sectionItems.value, index);
if (secondaryYAxisConfig.hideOrigin &&
index === secondaryHorizSections.length - 1) {
label = '';
}
return (_jsxs("div", { style: __assign(__assign(__assign(__assign({}, styles.horizBar), styles.leftLabel), { position: 'absolute', zIndex: 1, bottom: (index - 0.5) *
(isBelow
? (_b = (_a = secondaryYAxisConfig.negativeStepHeight) !== null && _a !== void 0 ? _a : secondaryYAxisConfig.stepHeight) !== null && _b !== void 0 ? _b : 0
: (_c = secondaryYAxisConfig.stepHeight) !== null && _c !== void 0 ? _c : 0) +
30 +
(isBelow
? secondaryYAxisExtraHeightAtBottom + stepHeight * -1.5
: containerHeightIncludingBelowXAxis -
containerHeight -
stepHeight / 2), width: secondaryYAxisConfig.yAxisLabelWidth,
// backgroundColor:'red',
height: isBelow
? (_e = (_d = secondaryYAxisConfig.negativeStepHeight) !== null && _d !== void 0 ? _d : secondaryYAxisConfig.stepHeight) !== null && _e !== void 0 ? _e : 0
: (_f = secondaryYAxisConfig.stepHeight) !== null && _f !== void 0 ? _f : 0 }), ((_g = secondaryYAxisConfig.yAxisLabelContainerStyle) !== null && _g !== void 0 ? _g : yAxisLabelContainerStyle)), children: [secondaryYAxisConfig.showYAxisIndices && (index !== 0 || isBelow) ? (_jsx("div", { style: {
height: secondaryYAxisConfig.yAxisIndicesHeight,
width: secondaryYAxisConfig.yAxisIndicesWidth,
position: 'absolute',
left: ((_h = secondaryYAxisConfig.yAxisIndicesWidth) !== null && _h !== void 0 ? _h : 0) / -2,
backgroundColor: (_j = secondaryYAxisConfig.yAxisIndicesColor) === null || _j === void 0 ? void 0 : _j.toString()
} })) : null, _jsx("div", {
// numberOfLines={secondaryYAxisConfig.yAxisTextNumberOfLines}
// ellipsizeMode={'clip'}
style: __assign({ textAlign: 'left', width: (_l = (_k = secondaryYAxisConfig.yAxisLabelContainerStyle) === null || _k === void 0 ? void 0 : _k.width) !== null && _l !== void 0 ? _l : secondaryYAxisConfig.yAxisLabelWidth, marginLeft: 10 }, secondaryYAxisConfig.yAxisTextStyle), children: label })] }, index));
});
};
var referenceLines = function () {
return (_jsxs(_Fragment, { children: [showReferenceLine1 ? (_jsxs("div", { style: {
position: 'absolute',
zIndex: referenceLine1Config.zIndex,
bottom: ((referenceLine1Position - (yAxisOffset !== null && yAxisOffset !== void 0 ? yAxisOffset : 0)) *
containerHeight) /
maxValue +
25 +
(hasNegative
? containerHeightIncludingBelowXAxis - containerHeight - 8
: 0),
left: yAxisSide === yAxisSides.RIGHT
? 0
: yAxisLabelWidth + yAxisThickness
}, children: [_jsx(Rule, { config: referenceLine1Config }), referenceLine1Config.labelText ? (_jsx("div", { style: __assign({ position: 'absolute' }, referenceLine1Config.labelTextStyle), children: referenceLine1Config.labelText })) : null] })) : null, showReferenceLine2 ? (_jsxs("div", { style: {
position: 'absolute',
zIndex: referenceLine2Config.zIndex,
bottom: ((referenceLine2Position - (yAxisOffset !== null && yAxisOffset !== void 0 ? yAxisOffset : 0)) *
containerHeight) /
maxValue +
25 +
(hasNegative
? containerHeightIncludingBelowXAxis - containerHeight - 8
: 0),
left: yAxisSide === yAxisSides.RIGHT
? 0
: yAxisLabelWidth + yAxisThickness
}, children: [_jsx(Rule, { config: referenceLine2Config }), referenceLine2Config.labelText ? (_jsx("div", { style: __assign({ position: 'absolute' }, referenceLine2Config.labelTextStyle), children: referenceLine2Config.labelText })) : null] })) : null, showReferenceLine3 ? (_jsxs("div", { style: {
position: 'absolute',
zIndex: referenceLine3Config.zIndex,
bottom: ((referenceLine1Position - (yAxisOffset !== null && yAxisOffset !== void 0 ? yAxisOffset : 0)) *
containerHeight) /
maxValue +
25 +
(hasNegative
? containerHeightIncludingBelowXAxis - containerHeight - 8
: 0),
left: yAxisSide === yAxisSides.RIGHT
? 0
: yAxisLabelWidth + yAxisThickness
}, children: [_jsx(Rule, { config: referenceLine3Config }), referenceLine3Config.labelText ? (_jsx("div", { style: __assign({ position: 'absolute' }, referenceLine3Config.labelTextStyle), children: referenceLine3Config.labelText })) : null] })) : null] }));
};
var leftShiftForRIghtYaxis = (width ? width + (isLineChart ? 50 : 20) : totalWidth) +
yAxisLabelWidth / 2 +
endSpacing -
(isLineChart ? 70 : 40);
var horizSectionsBelowRenderer = function (index, showBorder) {
var _a;
// negative sections height will correspond to negative Y-axis config in case there are extra negative horiz sections corresponding to the secondary Y axis
var localNegativeStepHeight = !showBorder
? (_a = secondaryYAxisConfig.negativeStepHeight) !== null && _a !== void 0 ? _a : negativeStepHeight
: negativeStepHeight;
return (_jsxs("div", { style: (function () {
var style = __assign(__assign({}, styles.horizBar), { width: width ? width + 15 : totalWidth, marginLeft: isLineChart && yAxisSide !== yAxisSides.RIGHT ? 29 : 0 });
// if (index === 0) {
// style.marginTop = negativeStepHeight / 2
// }
return style;
})(), children: [_jsx("div", { style: (function () {
var style = __assign(__assign({}, styles.leftLabel), { borderRightWidth: yAxisThickness, borderRightStyle: 'solid', borderColor: yAxisColor, marginLeft: yAxisThickness - 1, height: localNegativeStepHeight,
// width: yAxisLabelWidth,
transform: "translateX(".concat(yAxisSide === yAxisSides.RIGHT
? (width !== null && width !== void 0 ? width : totalWidth) + endSpacing - (isLineChart ? 50 : 20)
: horizSectionsLeft, "px)") });
// if(yAxisSide===yAxisSides.LEFT){
// style={...style,
// borderLeftWidth: yAxisThickness,
// borderLeftStyle: 'solid',
// borderColor: yAxisColor,}
// }
// else{
// style={...style,
// borderRightWidth: yAxisThickness,
// borderRightStyle: 'solid',
// borderColor: yAxisColor,}
// }
return style;
})() }), _jsxs("div", { style: __assign(__assign(__assign({}, styles.leftLabel), {
// width: yAxisLabelWidth,
transform: "translateX(".concat(yAxisSide === yAxisSides.RIGHT ? 0 : horizSectionsLeft, "px)"), display: 'flex', alignItems: 'flex-end' }), yAxisLabelContainerStyle), children: [hideRules ? null : (_jsx(Rule, { config: {
thickness: rulesThickness,
color: rulesColor,
width: rulesLength ||
(props.width || totalWidth - spacing) + endSpacing,
dashWidth: dashWidth,
dashGap: dashGap,
type: rulesType
} })), showYAxisIndices && index !== noOfSections ? (_jsx("div", { style: {
position: 'absolute',
height: yAxisIndicesHeight,
width: yAxisIndicesWidth,
left: yAxisIndicesWidth / -2 +
(yAxisSide === yAxisSides.RIGHT
? (width !== null && width !== void 0 ? width : totalWidth) + endSpacing
: 0),
marginTop: -yAxisIndicesHeight - 3, // added
backgroundColor: yAxisIndicesColor
} })) : null] })] }, index));
};
return (_jsx(_Fragment, { children: onlyReferenceLines ? (_jsx("div", { style: {
display: 'flex',
backgroundColor: 'green'
}, children: _jsx("div", { style: { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing }, children: referenceLines() }) })) : (_jsxs("div", { style: {
display: 'flex',
// marginTop: stepHeight / -2,
pointerEvents: 'none'
}, children: [_jsxs("div", { style: {
position: 'relative',
width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing + yAxisLabelWidth
}, children: [yAxisExtraHeightAtTop ? renderExtraHeightOfYAxisAtTop() : null, horizSections.map(function (sectionItems, index) {
return (_jsxs("div", { style: (function () {
var style = __assign(__assign({}, styles.horizBar), { width: (width !== null && width !== void 0 ? width : totalWidth) + endSpacing });
if (horizontal && !yAxisAtTop) {
style.transform = "rotateY(180deg)";
}
style = __assign(__assign({}, style), horizontalRulesStyle);
return style;
})(), children: [_jsx("div", { style: __assign(__assign({}, styles.leftLabel), yAxisLabelContainerStyle) }), renderAxesAndRules(index)] }, index));
}),
/***********************************************************************************************/
/************************** Render the y axis labels separately **********************/
/***********************************************************************************************/
!hideYAxisText &&
horizSections.map(function (sectionItems, index) {
var label = getLabelTexts(sectionItems.value, index);
if (hideOrigin && index === horizSections.length - 1) {
label = '';
}
return (_jsx("div", { style: (function () {
var style = __assign(__assign(__assign({}, styles.horizBar), styles.leftLabel), { position: 'absolute', zIndex: 1, top: negativeStepHeight * index +
yAxisExtraHeightAtTop -
negativeStepHeight / 2, width: yAxisLabelWidth, height: index === noOfSections
? negativeStepHeight / 2
: negativeStepHeight });
if (yAxisSide === yAxisSides.RIGHT) {
style.left = leftShiftForRIghtYaxis;
}
if (horizontal && !yAxisAtTop) {
style.transform = "translateX(".concat((width !== null && width !== void 0 ? width : totalWidth) - 30 + endSpacing, "px)");
}
style = __assign(__assign({}, style), yAxisLabelContainerStyle);
return style;
})(), children: _jsx("div", {
// numberOfLines={yAxisTextNumberOfLines}
// ellipsizeMode={'clip'}
style: (function () {
var style = __assign({}, yAxisTextStyle);
if (horizontal) {
style.transform = "rotate(".concat(rotateYAxisTexts !== null && rotateYAxisTexts !== void 0 ? rotateYAxisTexts : (rtl ? 90 : -90), "deg)");
}
if (index === noOfSections) {
style.marginBottom = negativeStepHeight / -2;
}
return style;
})(), children: label }) }, index));
})
/***********************************************************************************************/
/***********************************************************************************************/
, horizSectionsBelow.map(function (_, index) {
return horizSectionsBelowRenderer(index, true);
}),
/***********************************************************************************************/
/* If more -ve sections in Secondary Y-axis, then we need to render the Rules for them */
/***********************************************************************************************/
secondaryYAxis && negativeSectionsCountDiffPrimaryVsSecondary > 0
? __spreadArray([], __read(Array(negativeSectionsCountDiffPrimaryVsSecondary).keys()), false).map(function (_, index) { return horizSectionsBelowRenderer(index, false); })
: null,
/***********************************************************************************************/
/************************* Render the y axis labels below origin *********************/
/***********************************************************************************************/
!hideYAxisText &&
horizSectionsBelow.map(function (sectionItems, index) {
var label = getLabelTexts(horizSectionsBelow[index].value, index);
return (_jsx("div", { style: (function () {
var style = __assign(__assign(__assign({}, styles.horizBar), styles.leftLabel), { position: 'absolute', zIndex: 1, top: containerHeight +
stepHeight / 2 +
negativeStepHeight * (index + 0.5), width: yAxisLabelWidth, height: index === noOfSections
? negativeStepHeight / 2
: negativeStepHeight });
if (yAxisSide === yAxisSides.RIGHT) {
style.left =
(width
? width - 15
: totalWidth - (isLineChart ? 65 : 35)) +
yAxisLabelWidth / 2 +
10; // or maybe yAxislabelWidth here
}
style = __assign(__assign({}, style), yAxisLabelContainerStyle);
return style;
})(), children: _jsx("div", {
// numberOfLines={yAxisTextNumberOfLines}
// ellipsizeMode={'clip'}
style: (function () {
var style = __assign({}, yAxisTextStyle);
if (index === noOfSections) {
style.marginBottom = negativeStepHeight / -2;
}
return style;
})(), children: label }) }, index));
})
/***********************************************************************************************/
/***********************************************************************************************/
, renderReferenceLines ? referenceLines() : null] }),
/***********************************************************************************************/
/************************* Render the secondary Y Axis *********************/
/***********************************************************************************************/
secondaryYAxis ? (_jsx("div", { style: {
width: secondaryYAxisConfig.yAxisLabelWidth,
marginLeft: width ? 0 : -spacing,
borderColor: (_a = secondaryYAxisConfig.yAxisColor) === null || _a === void 0 ? void 0 : _a.toString(),
borderLeftWidth: secondaryYAxisConfig.yAxisThickness,
borderLeftStyle: 'solid',
height: containerHeight + yAxisExtraHeightAtTop,
bottom: stepHeight / -2
}, children: !secondaryYAxisConfig.hideYAxisText
? renderSecondaryYaxisLabels(secondaryHorizSections, false)
: null })) : null,
/***********************************************************************************************/
/************************* Render the secondary Y Axis below origin *********************/
/***********************************************************************************************/
secondaryYAxisConfig.noOfSectionsBelowXAxis ? (_jsx("div", { style: {
position: 'absolute',
width: (_b = secondaryYAxisConfig.yAxisLabelWidth) !== null && _b !== void 0 ? _b : yAxisLabelWidth,
left: (width !== null && width !== void 0 ? width : totalWidth) +
yAxisLabelWidth -
(isLineChart ? 30 : 0),
// (width ? yAxisLabelWidth : yAxisLabelWidth - spacing) -
// (secondaryYAxisConfig.yAxisLabelWidth ?? yAxisLabelWidth),
borderColor: (_c = secondaryYAxisConfig.yAxisColor) === null || _c === void 0 ? void 0 : _c.toString(),
borderLeftWidth: secondaryYAxisConfig.yAxisThickness,
borderLeftStyle: 'solid',
height: ((_e = (_d = secondaryYAxisConfig.negativeStepHeight) !== null && _d !== void 0 ? _d : secondaryYAxisConfig.stepHeight) !== null && _e !== void 0 ? _e : stepHeight) *
secondaryHorizSectionsBelow.length +
secondaryYAxisExtraHeightAtBottom,
top: containerHeight + stepHeight / 2
}, children: !secondaryYAxisConfig.hideYAxisText
? renderSecondaryYaxisLabels(secondaryHorizSectionsBelow, true)
: null })) : null] })) }));
};
//# sourceMappingURL=renderHorizSections.js.map