victory-native
Version:
A charting library for React Native with a focus on performance and customization.
122 lines (121 loc) • 6.05 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CategoryYAxis = void 0;
const react_1 = __importDefault(require("react"));
const react_native_skia_1 = require("@shopify/react-native-skia");
const boundsToClip_1 = require("../../utils/boundsToClip");
const getCategoryYAxisLabelPosition_1 = require("../utils/getCategoryYAxisLabelPosition");
const getAxisTitleLayout_1 = require("../utils/getAxisTitleLayout");
const getAxisLabelLayout_1 = require("../utils/getAxisLabelLayout");
const CategoryYAxis = ({ xScale, yScale, yTicksNormalized, axisSide, labelPosition, labelOffset, labelColor, lineWidth, lineColor, font, title, labelRenderer, formatYLabel = (label) => String(label), linePathEffect, chartBounds, ix, }) => {
var _a;
const [x1 = 0, x2 = 0] = xScale.domain();
const fontSize = (_a = font === null || font === void 0 ? void 0 : font.getSize()) !== null && _a !== void 0 ? _a : 0;
const yTickLabels = yTicksNormalized.map((tick, index) => {
const categoryValue = ix[tick];
const contentY = categoryValue === undefined
? String(tick)
: String(formatYLabel(categoryValue));
const labelLayout = (0, getAxisLabelLayout_1.getAxisLabelLayout)({
axis: "y",
orientation: "horizontal",
value: categoryValue,
text: contentY,
index,
font,
labelRenderer,
});
return {
tick,
labelLayout,
};
});
const maxYLabelWidth = Math.max(0, ...yTickLabels.map(({ labelLayout }) => labelLayout.width));
const labelOutset = labelPosition === "outset" && yTickLabels.length > 0 && maxYLabelWidth > 0
? maxYLabelWidth + labelOffset
: 0;
const titleLayout = (0, getAxisTitleLayout_1.getAxisTitleLayout)({ title, font });
const titleFont = titleLayout.font;
const titleBaselineY = (0, getAxisTitleLayout_1.getRotatedYAxisTitleBaselineY)(titleLayout);
const titleX = axisSide === "left"
? chartBounds.left - labelOutset - titleLayout.offset
: chartBounds.right + labelOutset + titleLayout.offset;
const titleCenterY = (() => {
if (titleLayout.position === "start") {
return chartBounds.top + titleLayout.width / 2;
}
if (titleLayout.position === "end") {
return chartBounds.bottom - titleLayout.width / 2;
}
return chartBounds.top + (chartBounds.bottom - chartBounds.top) / 2;
})();
const titleNodes = titleLayout.hasContent && titleFont
? titleLayout.lines.map((line, index) => {
var _a;
return (<react_native_skia_1.Text key={`category-y-axis-title-line-${index}`} color={(_a = titleLayout.color) !== null && _a !== void 0 ? _a : labelColor} text={line} font={titleFont} y={titleBaselineY + index * titleLayout.lineHeight} x={-titleLayout.width / 2}/>);
})
: null;
const yAxisNodes = yTickLabels.map(({ tick, labelLayout }) => {
const labelWidth = labelLayout.width;
const tickPosition = yScale(tick);
const { x: labelX, y: labelY, canFitContent, } = (0, getCategoryYAxisLabelPosition_1.getCategoryYAxisLabelPosition)({
axisSide,
labelPosition,
labelOffset,
labelWidth,
lineCount: labelLayout.lines.length,
lineHeight: labelLayout.lineHeight,
fontSize,
tickPosition,
chartBounds,
});
const customLabelTopY = tickPosition - labelLayout.height / 2;
const canFitCustomLabel = customLabelTopY >= chartBounds.top &&
customLabelTopY + labelLayout.height <= chartBounds.bottom;
return (<react_1.default.Fragment key={`category-y-tick-${tick}`}>
{lineWidth > 0 ? (<react_native_skia_1.Group clip={(0, boundsToClip_1.boundsToClip)(chartBounds)}>
<react_native_skia_1.Line p1={(0, react_native_skia_1.vec)(xScale(x1), tickPosition)} p2={(0, react_native_skia_1.vec)(xScale(x2), tickPosition)} color={lineColor} strokeWidth={lineWidth}>
{linePathEffect ? linePathEffect : null}
</react_native_skia_1.Line>
</react_native_skia_1.Group>) : null}
{labelRenderer
? labelWidth > 0 && labelLayout.height > 0
? labelRenderer.render({
axis: "y",
orientation: "horizontal",
value: labelLayout.value,
text: labelLayout.text,
index: labelLayout.index,
x: labelX,
y: customLabelTopY,
width: labelLayout.width,
height: labelLayout.height,
fontSize: labelLayout.fontSize,
lineHeight: labelLayout.lineHeight,
color: labelColor,
canFitContent: canFitCustomLabel,
chartBounds,
})
: null
: font
? canFitContent && (<>
{labelLayout.lines.map((line, index) => (<react_native_skia_1.Text key={`category-y-tick-${tick}-label-line-${index}`} color={labelColor} text={line} font={font} y={labelY + index * labelLayout.lineHeight} x={labelX}/>))}
</>)
: null}
</react_1.default.Fragment>);
});
return (<>
{yAxisNodes}
{titleNodes ? (<react_native_skia_1.Group transform={[
{ translateX: titleX },
{ translateY: titleCenterY },
{ rotate: axisSide === "right" ? Math.PI / 2 : -Math.PI / 2 },
]}>
{titleNodes}
</react_native_skia_1.Group>) : null}
</>);
};
exports.CategoryYAxis = CategoryYAxis;