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
102 lines • 8.99 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);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
import { renderHorizSections } from './renderHorizSections';
import RenderVerticalLines from './renderVerticalLines';
import { chartTypes, yAxisSides, useBarAndLineChartsWrapper } from 'gifted-charts-core';
import './styles.css';
import RenderLineInBarChart from './renderLineInBarChart';
var BarAndLineChartsWrapper = function (props) {
var chartType = props.chartType, containerHeight = props.containerHeight, noOfSectionsBelowXAxis = props.noOfSectionsBelowXAxis, stepHeight = props.stepHeight, labelsExtraHeight = props.labelsExtraHeight, yAxisLabelWidth = props.yAxisLabelWidth, horizontal = props.horizontal, scrollRef = props.scrollRef, initialSpacing = props.initialSpacing, data = props.data, barWidth = props.barWidth, xAxisThickness = props.xAxisThickness, totalWidth = props.totalWidth, disableScroll = props.disableScroll, showScrollIndicator = props.showScrollIndicator, scrollToEnd = props.scrollToEnd, scrollToIndex = props.scrollToIndex, scrollAnimation = props.scrollAnimation, indicatorColor = props.indicatorColor, spacing = props.spacing, showLine = props.showLine, points2 = props.points2, renderChartContent = props.renderChartContent, remainingScrollViewProps = props.remainingScrollViewProps, endSpacing = props.endSpacing, hideAxesAndRules = props.hideAxesAndRules, showXAxisIndices = props.showXAxisIndices, xAxisIndicesHeight = props.xAxisIndicesHeight, xAxisIndicesWidth = props.xAxisIndicesWidth, xAxisIndicesColor = props.xAxisIndicesColor, pointerConfig = props.pointerConfig, getPointerProps = props.getPointerProps, pointerIndex = props.pointerIndex, pointerX = props.pointerX, pointerY = props.pointerY, onEndReached = props.onEndReached, onStartReached = props.onStartReached, _a = props.extraWidthDueToDataPoint // extraWidthDueToDataPoint will be receved from props onlhy in case of LineCharts, for other charts it will be undefined and will default to 0
, extraWidthDueToDataPoint = _a === void 0 ? 0 : _a // extraWidthDueToDataPoint will be receved from props onlhy in case of LineCharts, for other charts it will be undefined and will default to 0
;
var _b = useBarAndLineChartsWrapper(__assign(__assign({}, props), { isRTL: false })), containerHeightIncludingBelowXAxis = _b.containerHeightIncludingBelowXAxis, xAxisLabelsVerticalShift = _b.xAxisLabelsVerticalShift, trimYAxisAtTop = _b.trimYAxisAtTop, yAxisExtraHeight = _b.yAxisExtraHeight, overflowTop = _b.overflowTop, xAxisLabelsHeight = _b.xAxisLabelsHeight, xAxisTextNumberOfLines = _b.xAxisTextNumberOfLines, actualContainerWidth = _b.actualContainerWidth, transformForHorizontalForReactJS = _b.transformForHorizontalForReactJS, horizSectionProps = _b.horizSectionProps, referenceLinesOverChartContent = _b.referenceLinesOverChartContent, setCanMomentum = _b.setCanMomentum, isCloseToStart = _b.isCloseToStart, isCloseToEnd = _b.isCloseToEnd, canMomentum = _b.canMomentum, yAxisAtTop = _b.yAxisAtTop, yAxisThickness = _b.yAxisThickness, yAxisSide = _b.yAxisSide, showVerticalLines = _b.showVerticalLines, verticalLinesProps = _b.verticalLinesProps, lineInBarChartProps = _b.lineInBarChartProps, lineInBarChartProps2 = _b.lineInBarChartProps2;
useEffect(function () {
if (pointerConfig && getPointerProps) {
getPointerProps({ pointerIndex: pointerIndex, pointerX: pointerX, pointerY: pointerY });
}
}, [pointerIndex, pointerX, pointerY]);
/*******************************************************************************************************************************************/
/*******************************************************************************************************************************************/
var container = {
width: '100%',
overflow: 'hidden',
position: 'relative',
height: containerHeightIncludingBelowXAxis +
labelsExtraHeight +
xAxisLabelsVerticalShift +
(trimYAxisAtTop ? 0 : yAxisExtraHeight) +
20 -
overflowTop,
marginTop: trimYAxisAtTop ? containerHeight / 20 : 0,
marginBottom: (xAxisLabelsHeight !== null && xAxisLabelsHeight !== void 0 ? xAxisLabelsHeight : xAxisTextNumberOfLines * 18) -
20 -
xAxisLabelsVerticalShift //This is to not let the Things that should be rendered below the chart overlap with it
};
if (horizontal) {
container = __assign(__assign({}, container), { width: actualContainerWidth, transform: transformForHorizontalForReactJS });
}
// return <div>Hello</div>
var hasNegative = data.some(function (item) { return item.value < 0; });
return (_jsxs("div", { style: container, children: [hideAxesAndRules !== true
? renderHorizSections(__assign(__assign({}, horizSectionProps), { onlyReferenceLines: false, containerHeightIncludingBelowXAxis: containerHeightIncludingBelowXAxis, renderReferenceLines: !referenceLinesOverChartContent, chartType: chartType, hasNegative: hasNegative }))
: null, _jsxs("div", __assign({ ref: scrollRef, style: (function () {
var _a, _b, _c, _d;
var style = {
height: Number(container.height) + 68, // added this to disable vertical scroll
display: 'flex',
width: '100%',
overflowX: disableScroll ? 'hidden' : 'scroll',
marginLeft: horizontal && !yAxisAtTop
? -yAxisThickness -
(props.width ? 20 : 0) -
((_c = (_b = (_a = data[data.length - 1]) === null || _a === void 0 ? void 0 : _a.barWidth) !== null && _b !== void 0 ? _b : barWidth) !== null && _c !== void 0 ? _c : 0) / 2
: yAxisSide === yAxisSides.RIGHT
? 0
: yAxisLabelWidth + yAxisThickness,
paddingLeft: initialSpacing,
position: 'absolute',
bottom: (chartType === chartTypes.LINE_BI_COLOR ? 0 : xAxisThickness) - 40
};
if (!!props.width) {
style.width = props.width + extraWidthDueToDataPoint;
}
if (horizontal) {
style.width =
((_d = props.width) !== null && _d !== void 0 ? _d : totalWidth) +
(props.width ? endSpacing : -20) +
extraWidthDueToDataPoint;
}
return style;
})(), className: showScrollIndicator ? '' : 'hideScrollBar' }, remainingScrollViewProps, { children: [showVerticalLines ? (_jsx(RenderVerticalLines, __assign({}, verticalLinesProps, { noOfSectionsBelowXAxis: noOfSectionsBelowXAxis }))) : null,
// Only For Bar Charts-
showLine ? _jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps)) : null,
// Only For Bar Charts-
showLine && (points2 === null || points2 === void 0 ? void 0 : points2.length) ? (_jsx(RenderLineInBarChart, __assign({}, lineInBarChartProps2))) : null,
// Only For Line Charts-
chartType === chartTypes.LINE &&
data.map(function (item, index) {
return showXAxisIndices || item.showXAxisIndex ? (_jsx("div", { style: {
position: 'absolute',
height: xAxisIndicesWidth,
width: xAxisIndicesHeight,
backgroundColor: xAxisIndicesColor.toString(),
bottom: 68 - xAxisIndicesHeight / 2,
left: initialSpacing * 2 + index * spacing - xAxisIndicesHeight
} }, index + '' + item.value)) : null;
}), renderChartContent(containerHeightIncludingBelowXAxis)] })), referenceLinesOverChartContent
? renderHorizSections(__assign(__assign({}, horizSectionProps), { onlyReferenceLines: true, containerHeightIncludingBelowXAxis: containerHeightIncludingBelowXAxis, chartType: chartType, hasNegative: hasNegative }))
: null] }));
};
export default BarAndLineChartsWrapper;
//# sourceMappingURL=index.js.map