react-native-chart-kit
Version:
Beautiful React Native charts for dashboards, reports, and data-rich mobile apps.
146 lines (145 loc) • 7.99 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { createClipPathRef } from "../../../svg-renderer/index";
const getAreaGradientId = (chartId, index) => `${chartId}-area-gradient-${index}`;
const getThresholdClipId = (chartId, index, side) => `${chartId}-threshold-${index}-${side}`;
export const getLineChartAreaGradientRef = (chartId, index) => `url(#${getAreaGradientId(chartId, index)})`;
export const getLineChartAreaGradientId = getAreaGradientId;
const getThresholdRectClips = ({ plot, thresholdY }) => {
const plotBottom = plot.y + plot.height;
return {
above: {
height: Math.max(0, thresholdY - plot.y),
width: plot.width,
x: plot.x,
y: plot.y
},
below: {
height: Math.max(0, plotBottom - thresholdY),
width: plot.width,
x: plot.x,
y: thresholdY
}
};
};
const getThresholdY = ({ plot, threshold, yScale }) => {
const plotBottom = plot.y + plot.height;
return Math.min(Math.max(yScale.scale(threshold), plot.y), plotBottom);
};
export const LineChartThresholdClipDefs = ({ chartId, geometries, plot, renderer, yScale }) => {
const ClipRect = renderer.ClipRect;
if (!ClipRect || renderer.capabilities?.clipPaths !== true) {
return null;
}
return (_jsx(_Fragment, { children: geometries.flatMap(({ style }, index) => {
if (!style.threshold) {
return [];
}
const thresholdY = getThresholdY({
plot,
threshold: style.threshold.y,
yScale
});
const rectClips = getThresholdRectClips({ plot, thresholdY });
return [
_jsx(ClipRect, { id: getThresholdClipId(chartId, index, "above"), ...rectClips.above }, `threshold-above-${index}`),
_jsx(ClipRect, { id: getThresholdClipId(chartId, index, "below"), ...rectClips.below }, `threshold-below-${index}`)
];
}) }));
};
export const LineChartAreaPaths = ({ chartId, geometries, plot, yScale, renderer }) => {
const Path = renderer.Path;
const supportsClipPaths = renderer.capabilities?.clipPaths === true;
const supportsGradientDefs = renderer.capabilities?.gradients !== false &&
renderer.capabilities?.pathGradients !== true;
const supportsPathGradients = renderer.capabilities?.pathGradients === true;
const supportsRectClips = renderer.capabilities?.rectClips === true;
return (_jsx(_Fragment, { children: geometries.flatMap(({ geometry, style }, index) => {
if (!geometry.area) {
return [];
}
const paths = [
_jsx(Path, { d: geometry.area.path, fill: supportsGradientDefs
? getLineChartAreaGradientRef(chartId, index)
: style.areaFill.fromColor, ...(supportsPathGradients
? {
fillGradient: {
x1: "0%",
x2: "0%",
y1: "0%",
y2: "100%",
stops: [
{
offset: "0%",
color: style.areaFill.fromColor,
opacity: style.areaFill.fromOpacity
},
{
offset: "100%",
color: style.areaFill.toColor,
opacity: style.areaFill.toOpacity
}
]
}
}
: {}), ...(!supportsGradientDefs && !supportsPathGradients
? { opacity: style.areaFill.fromOpacity }
: {}) }, `area-${geometry.key}`)
];
if (style.threshold && supportsClipPaths) {
paths.push(_jsx(Path, { d: geometry.area.path, fill: style.threshold.areaAboveColor, opacity: style.threshold.areaOpacity, clipPath: createClipPathRef(getThresholdClipId(chartId, index, "above")) }, `area-${geometry.key}-above`), _jsx(Path, { d: geometry.area.path, fill: style.threshold.areaBelowColor, opacity: style.threshold.areaOpacity, clipPath: createClipPathRef(getThresholdClipId(chartId, index, "below")) }, `area-${geometry.key}-below`));
}
else if (style.threshold && supportsRectClips && plot && yScale) {
const thresholdY = getThresholdY({
plot,
threshold: style.threshold.y,
yScale
});
const rectClips = getThresholdRectClips({ plot, thresholdY });
paths.push(_jsx(Path, { d: geometry.area.path, fill: style.threshold.areaAboveColor, opacity: style.threshold.areaOpacity, clipRect: rectClips.above }, `area-${geometry.key}-above`), _jsx(Path, { d: geometry.area.path, fill: style.threshold.areaBelowColor, opacity: style.threshold.areaOpacity, clipRect: rectClips.below }, `area-${geometry.key}-below`));
}
return paths;
}) }));
};
export const LineChartLinePaths = ({ chartId, geometries, plot, yScale, renderer }) => {
const Path = renderer.Path;
const supportsClipPaths = renderer.capabilities?.clipPaths === true;
const supportsRectClips = renderer.capabilities?.rectClips === true;
return (_jsx(_Fragment, { children: geometries.flatMap(({ geometry, style }, index) => {
const commonLineProps = {
d: geometry.line.path,
fill: "none",
strokeWidth: style.strokeWidth,
strokeLinecap: style.strokeStyle.strokeLinecap,
strokeLinejoin: style.strokeStyle.strokeLinejoin,
...(style.strokeStyle.strokeDasharray
? { strokeDasharray: style.strokeStyle.strokeDasharray }
: {})
};
if (!style.threshold) {
return [
_jsx(Path, { ...commonLineProps, stroke: style.color, strokeOpacity: style.strokeStyle.strokeOpacity }, `line-${geometry.key}`)
];
}
if (supportsRectClips && plot && yScale) {
const thresholdY = getThresholdY({
plot,
threshold: style.threshold.y,
yScale
});
const rectClips = getThresholdRectClips({ plot, thresholdY });
return [
_jsx(Path, { ...commonLineProps, stroke: style.threshold.aboveColor, strokeOpacity: style.threshold.aboveOpacity, clipRect: rectClips.above }, `line-${geometry.key}-above`),
_jsx(Path, { ...commonLineProps, stroke: style.threshold.belowColor, strokeOpacity: style.threshold.belowOpacity, clipRect: rectClips.below }, `line-${geometry.key}-below`)
];
}
if (!supportsClipPaths) {
return [
_jsx(Path, { ...commonLineProps, stroke: style.color, strokeOpacity: style.strokeStyle.strokeOpacity }, `line-${geometry.key}`)
];
}
return [
_jsx(Path, { ...commonLineProps, stroke: style.threshold.aboveColor, strokeOpacity: style.threshold.aboveOpacity, clipPath: createClipPathRef(getThresholdClipId(chartId, index, "above")) }, `line-${geometry.key}-above`),
_jsx(Path, { ...commonLineProps, stroke: style.threshold.belowColor, strokeOpacity: style.threshold.belowOpacity, clipPath: createClipPathRef(getThresholdClipId(chartId, index, "below")) }, `line-${geometry.key}-below`)
];
}) }));
};