59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
// Only static number props are included for this list
|
|
const propNames = ["graphHeight", "labelSize", "labelWidth"] as const;
|
|
|
|
// This type is needed for smart autocomplete
|
|
type PropName = typeof propNames[number];
|
|
|
|
const mobileBarGraphFactor = 1.25;
|
|
const desktopBarGraphFactor = 2;
|
|
|
|
const mobilePieChartFactor = 1.25;
|
|
const desktopPieChartFactor = 3;
|
|
|
|
const graphWidth = (
|
|
isMobile: boolean,
|
|
pageWidth: number,
|
|
isPieChart: boolean
|
|
): number => {
|
|
const mobileFactor = isPieChart ? mobilePieChartFactor : mobileBarGraphFactor;
|
|
const desktopFactor = isPieChart
|
|
? desktopPieChartFactor
|
|
: desktopBarGraphFactor;
|
|
return isMobile ? pageWidth / mobileFactor : pageWidth / desktopFactor;
|
|
};
|
|
|
|
export const barGraphWidth = (isMobile: boolean, width: number) =>
|
|
graphWidth(isMobile, width, false);
|
|
|
|
export const pieChartWidth = (isMobile: boolean, width: number) =>
|
|
graphWidth(isMobile, width, true);
|
|
|
|
export const barGraphMargin = {
|
|
top: 20,
|
|
bottom: 80,
|
|
left: 60,
|
|
right: 20,
|
|
};
|
|
|
|
export const DefaultProp: { [key in PropName]: number } = {
|
|
graphHeight: 500,
|
|
labelSize: 24,
|
|
labelWidth: 100,
|
|
};
|
|
|
|
export const barGraphProps = (isMobile: boolean, pageWidth: number) => {
|
|
return {
|
|
width: barGraphWidth(isMobile, pageWidth),
|
|
height: DefaultProp.graphHeight,
|
|
margin: barGraphMargin,
|
|
};
|
|
};
|
|
|
|
export const pieChartProps = (isMobile: boolean, pageWidth: number) => {
|
|
return {
|
|
width: pieChartWidth(isMobile, pageWidth),
|
|
labelWidth: DefaultProp.labelWidth,
|
|
labelTextSize: DefaultProp.labelSize,
|
|
};
|
|
};
|