44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import { GraphData } from "./graph-types";
|
|
|
|
|
|
export const convertToGraphData = (
|
|
graphData: GraphData,
|
|
options: {
|
|
selectedLeftYAxisLabel?: string;
|
|
selectedRightYAxisLabel?: string;
|
|
maxRightYAxisValue: number;
|
|
maxLeftYAxisValue: number;
|
|
includeColors: boolean;
|
|
barColors: Array<string>
|
|
}
|
|
) => {
|
|
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;
|
|
|
|
// 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';
|
|
|
|
const mappedData = scaledValues.map((scaledValue) => ({ value: scaledValue }));
|
|
|
|
return {
|
|
data: mappedData,
|
|
svg: { fill: 'transparent', stroke: strokeColor } // Apply the stroke color here
|
|
};
|
|
});
|
|
const yAxisLeftLabels = leftAxisIndex !== -1 ? graphData.yValues[leftAxisIndex] : null;
|
|
const yAxisRightLabels = rightAxisIndex !== -1 ? graphData.yValues[rightAxisIndex] : undefined;
|
|
|
|
return { yData, yAxisLeftLabels, yAxisRightLabels, xValues };
|
|
};
|