railbird-gql/component/charts/graph-utils.tsx

44 lines
1.5 KiB
TypeScript
Raw Normal View History

2024-01-12 14:04:45 -07:00
import { GraphData } from "./graph-types";
export const convertToGraphData = (
2024-01-12 14:04:45 -07:00
graphData: GraphData,
options: {
selectedLeftYAxisLabel?: string;
selectedRightYAxisLabel?: string;
maxRightYAxisValue: number;
maxLeftYAxisValue: number;
includeColors: boolean;
barColors: Array<string>
2024-01-12 14:04:45 -07:00
}
) => {
const xValues = graphData.xValues;
const leftAxisIndex = graphData.yValues.findIndex(
(y) => y.key === options.selectedLeftYAxisLabel
);
const rightAxisIndex = graphData.yValues.findIndex(
(y) => y.key === options.selectedRightYAxisLabel
);
// scale data points according to max value
const yData = graphData.yValues.map((yAxis, index) => {
const maxValue = index === rightAxisIndex ? options.maxRightYAxisValue : options.maxLeftYAxisValue;
2024-01-12 14:04:45 -07:00
// scale values as a percentage of the max value
const scaledValues = yAxis.values.map((value) => (value / maxValue) * 100);
const strokeColor = options.includeColors && options.barColors ? options.barColors[index % options.barColors.length] : 'transparent';
2024-01-12 14:04:45 -07:00
const mappedData = scaledValues.map((scaledValue) => ({ value: scaledValue }));
return {
data: mappedData,
svg: { fill: 'transparent', stroke: strokeColor } // Apply the stroke color here
2024-01-12 14:04:45 -07:00
};
});
const yAxisLeftLabels = leftAxisIndex !== -1 ? graphData.yValues[leftAxisIndex] : null;
const yAxisRightLabels = rightAxisIndex !== -1 ? graphData.yValues[rightAxisIndex] : undefined;
return { yData, yAxisLeftLabels, yAxisRightLabels, xValues };
2024-01-12 14:04:45 -07:00
};