@naarni/design-system
Version:
Naarni React Native Design System for EV Fleet Apps
91 lines (90 loc) • 3.57 kB
JavaScript
const PADDING = 20;
export const getChartDimensions = (width, height) => {
const padding = 40;
return {
padding,
chartWidth: width - padding * 2,
chartHeight: height - padding * 2,
};
};
export const scalePoint = (value, index, data, dimensions) => {
const minValue = Math.min(...data);
const maxValue = Math.max(...data);
const valueRange = maxValue - minValue;
const x = (index / (data.length - 1)) * dimensions.chartWidth + dimensions.padding;
const y = valueRange === 0
? dimensions.chartHeight / 2 + dimensions.padding // Center the line if all values are the same
: dimensions.chartHeight - ((value - minValue) / valueRange) * dimensions.chartHeight + dimensions.padding;
return { x, y };
};
export const generateAxisPoints = (count, min, max) => {
if (min === max) {
return [min];
}
const step = (max - min) / (count - 1);
return Array.from({ length: count }, (_, i) => min + step * i);
};
export const formatAxisLabel = (value) => {
if (value >= 1000) {
return `${(value / 1000).toFixed(1)}k`;
}
return value.toFixed(1);
};
export const generateYAxisLabels = (data, dimensions, count = 5) => {
const minValue = Math.min(...data);
const maxValue = Math.max(...data);
const valueRange = maxValue - minValue;
if (valueRange === 0) {
return [{ value: minValue, y: dimensions.chartHeight / 2 + dimensions.padding }];
}
const labels = [];
for (let i = 0; i < count; i++) {
const value = minValue + (valueRange * i) / (count - 1);
const y = dimensions.chartHeight - ((value - minValue) / valueRange) * dimensions.chartHeight + dimensions.padding;
labels.push({ value, y });
}
return labels;
};
export const generateXAxisLabels = (data, dimensions) => {
// Calculate how many labels we can show without overlapping
const maxLabels = Math.min(data.length, Math.floor(dimensions.chartWidth / 60)); // 60px minimum spacing
const step = Math.max(1, Math.ceil(data.length / maxLabels));
const labels = [];
for (let i = 0; i < data.length; i += step) {
const x = (i / (data.length - 1)) * dimensions.chartWidth + dimensions.padding;
labels.push({
value: data[i],
x,
label: `Item ${i + 1}`,
});
}
// Always include the last item if it's not already included
if (data.length > 0 && labels.length > 0) {
const lastLabel = labels[labels.length - 1];
const lastIndex = data.length - 1;
if (lastLabel.x !== (lastIndex / (data.length - 1)) * dimensions.chartWidth + dimensions.padding) {
const x = (lastIndex / (data.length - 1)) * dimensions.chartWidth + dimensions.padding;
labels.push({
value: data[lastIndex],
x,
label: `Item ${lastIndex + 1}`,
});
}
}
return labels;
};
export const generateGridLines = (data, dimensions, count = 5) => {
const minValue = Math.min(...data);
const maxValue = Math.max(...data);
const valueRange = maxValue - minValue;
if (valueRange === 0) {
return [{ y: dimensions.chartHeight / 2 + dimensions.padding }];
}
const lines = [];
for (let i = 0; i < count; i++) {
const value = minValue + (valueRange * i) / (count - 1);
const y = dimensions.chartHeight - ((value - minValue) / valueRange) * dimensions.chartHeight + dimensions.padding;
lines.push({ y });
}
return lines;
};