react-native-gifted-charts
Version:
The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid and Radar charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
103 lines (102 loc) • 7.97 kB
JavaScript
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;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Fragment, useState } from 'react';
import { styles } from '../../../BarChart/styles';
import { TouchableOpacity, View } from 'react-native';
import { getXForLineInBar, getYForLineInBar } from 'gifted-charts-core';
import { Rect, Text as CanvasText, Circle, ForeignObject, } from 'react-native-svg';
import { isWebApp } from '../../../utils';
export var renderDataPoints = function (props) {
var data = props.data, lineConfig = props.lineConfig, barWidth = props.barWidth, containerHeight = props.containerHeight, maxValue = props.maxValue, firstBarWidth = props.firstBarWidth, yAxisLabelWidth = props.yAxisLabelWidth, spacing = props.spacing, selectedIndex = props.selectedIndex, yAxisOffset = props.yAxisOffset, opacity = props.opacity, svgHeight = props.svgHeight, totalWidth = props.totalWidth;
var focusEnabled = lineConfig.focusEnabled, dataPointLabelComponent = lineConfig.dataPointLabelComponent, showDataPointLabelOnFocus = lineConfig.showDataPointLabelOnFocus, focusedDataPointIndex = lineConfig.focusedDataPointIndex;
var _a = __read(useState(focusedDataPointIndex !== null && focusedDataPointIndex !== void 0 ? focusedDataPointIndex : -1), 2), selectedDataPointIndex = _a[0], setSelectedDataPointIndex = _a[1];
return (_jsxs(_Fragment, { children: [data.map(function (item, index) {
var _a, _b, _c;
if (index < lineConfig.startIndex ||
index > lineConfig.endIndex ||
item.hideDataPoint) {
return null;
}
var currentBarWidth = item.barWidth || barWidth || 30;
var customDataPoint = item.customDataPoint || lineConfig.customDataPoint;
var dataPointColor = lineConfig.focusEnabled && index === selectedDataPointIndex
? lineConfig.focusedDataPointColor
: lineConfig.dataPointsColor;
var dataPointRadius = lineConfig.focusEnabled && index === selectedDataPointIndex
? lineConfig.focusedDataPointRadius
: lineConfig.dataPointsRadius;
var value = (_a = item.value) !== null && _a !== void 0 ? _a : item.stacks.reduce(function (total, item) { return total + item.value; }, 0);
var x = getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing);
var y = getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset);
if (customDataPoint) {
return (_jsx(TouchableOpacity, { style: [
styles.customDataPointContainer,
{
opacity: opacity,
height: lineConfig.dataPointsHeight,
width: lineConfig.dataPointsWidth,
top: containerHeight -
(value * containerHeight) / maxValue -
((_c = (_b = item.shiftY) !== null && _b !== void 0 ? _b : lineConfig.shiftY) !== null && _c !== void 0 ? _c : 0),
left: getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing),
},
], onPress: function () {
if (focusEnabled)
setSelectedDataPointIndex(index);
}, children: customDataPoint(item, index) }, index + '.' + value + 'custom'));
}
if (lineConfig.dataPointsShape === 'rectangular') {
return (_jsxs(Fragment, { children: [_jsx(Rect, { x: x, y: y - lineConfig.dataPointsHeight / 2, width: lineConfig.dataPointsWidth, height: lineConfig.dataPointsHeight, fill: dataPointColor, opacity: opacity, onPress: function () {
if (focusEnabled)
setSelectedDataPointIndex(index);
} }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, opacity: opacity, fontSize: item.textFontSize || lineConfig.textFontSize, x: x + (item.textShiftX || lineConfig.textShiftX || 0), y: y -
lineConfig.dataPointsHeight / 2 +
(item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index + '.' + value + 'rect'));
}
return (_jsxs(Fragment, { children: [_jsx(Circle, { cx: x, cy: y, r: dataPointRadius, fill: dataPointColor, opacity: opacity, onPress: function () {
if (focusEnabled)
setSelectedDataPointIndex(index);
} }), item.dataPointText && (_jsx(CanvasText, { fill: item.textColor || lineConfig.textColor, opacity: opacity, fontSize: item.textFontSize || lineConfig.textFontSize, x: x + (item.textShiftX || lineConfig.textShiftX || 0), y: y -
lineConfig.dataPointsHeight / 2 +
(item.textShiftY || lineConfig.textShiftY || 0), children: item.dataPointText }))] }, index + '.' + value + 'circ'));
}), dataPointLabelComponent
? data.map(function (item, index) {
var _a;
if (index < lineConfig.startIndex ||
index > lineConfig.endIndex ||
item.hideDataPoint) {
return null;
}
var currentBarWidth = item.barWidth || barWidth || 30;
var value = (_a = item.value) !== null && _a !== void 0 ? _a : item.stacks.reduce(function (total, item) { return total + item.value; }, 0);
var x = getXForLineInBar(index, firstBarWidth, currentBarWidth, yAxisLabelWidth, lineConfig, spacing);
var y = getYForLineInBar(value, lineConfig.shiftY, containerHeight, maxValue, yAxisOffset);
if (isWebApp)
return (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: x - 12, y: y - 24, children: showDataPointLabelOnFocus
? selectedDataPointIndex === index
? dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index)
: null
: dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index) }, index + '.' + value + 'label'));
return (_jsx(View, { style: { top: y - 24, left: x - 12, position: 'absolute' }, children: showDataPointLabelOnFocus
? selectedDataPointIndex === index
? dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index)
: null
: dataPointLabelComponent === null || dataPointLabelComponent === void 0 ? void 0 : dataPointLabelComponent(item, index) }, index + '.' + value + 'label'));
})
: null] }));
};