53 lines
1.5 KiB
TypeScript
53 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 };
|
|
};
|