@airplane/views
Version:
A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.
126 lines (125 loc) • 2.81 kB
JavaScript
import { COLORS } from "../theme/colors.js";
const FONT_FAMILY = "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji";
const FONT = {
family: FONT_FAMILY,
color: COLORS.gray[7],
size: 12
};
const buildLayout = ({
legendPosition = "right",
xAxisType = "auto",
yAxisType = "auto",
xAxisRange,
yAxisRange,
...props
}) => {
const baseLayout = {
font: FONT,
margin: {
t: 0,
l: 16,
r: 24,
b: 32,
pad: 2
},
clickmode: "event+select",
barmode: props.mode,
...computeLegend(legendPosition)
};
switch (props.type) {
case "pie":
return {
...baseLayout
};
default: {
const xAxisTitle = props.xAxisTitle ? {
text: props.xAxisTitle,
standoff: 20
} : void 0;
const yAxisTitle = props.yAxisTitle ? {
text: props.yAxisTitle,
standoff: 20
} : void 0;
return {
...baseLayout,
xaxis: {
title: xAxisTitle,
type: xAxisType === "auto" ? "-" : xAxisType,
tickformat: props.xAxisFormat,
automargin: true,
fixedrange: true,
zerolinecolor: "#DEDEDE",
range: Array.isArray(xAxisRange) ? xAxisRange : void 0,
rangemode: typeof xAxisRange === "string" ? xAxisRange : void 0
},
yaxis: {
title: yAxisTitle,
type: yAxisType === "auto" ? "-" : yAxisType,
tickformat: props.yAxisFormat,
automargin: true,
fixedrange: true,
zerolinecolor: "#DEDEDE",
range: Array.isArray(yAxisRange) ? yAxisRange : void 0,
rangemode: typeof yAxisRange === "string" ? yAxisRange : void 0
}
};
}
}
};
const computeLegend = (legendPosition) => {
switch (legendPosition ?? "right") {
case "left": {
return {
showlegend: true,
legend: {
xanchor: "left",
orientation: "v",
x: -0.1,
y: 0.5
}
};
}
case "right": {
return {
showlegend: true,
legend: {
xanchor: "left",
orientation: "v",
x: 1.05,
y: 0.5
}
};
}
case "top": {
return {
showlegend: true,
legend: {
xanchor: "center",
orientation: "h",
x: 0.5,
y: 1.1
}
};
}
case "bottom": {
return {
showlegend: true,
legend: {
xanchor: "center",
orientation: "h",
x: 0.45,
y: -0.2
}
};
}
case "hidden": {
return {
showlegend: false
};
}
}
};
export {
buildLayout
};
//# sourceMappingURL=buildLayout.js.map