Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 2x 2x | import { palette } from "@palette";
import moment from "moment";
const generalFont = {
size: 12,
weight: "normal",
family: "Give Whyte, sans-serif",
lineHeight: "14.4px",
};
const generateOptions = (isCustomer?: boolean) => {
return {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: "index" as const,
intersect: false,
},
stacked: false,
plugins: {
title: {
display: false,
},
legend: {
display: false,
},
tooltip: {
displayColors: false,
padding: {
left: 12,
right: 12,
top: 9,
bottom: 9,
},
titleColor(ctx: any, options: any) {
return palette.gray[300];
},
backgroundColor: palette.black[300],
titleFont: generalFont,
bodyFont: generalFont,
position: "nearest" as const,
xAlign: "left" as const,
yAlign: "center" as const,
cornerRadius: 6,
caretSize: 0,
callbacks: {
title(tooltipItem: any) {
const label = tooltipItem[0]?.label;
const title = isCustomer
? moment.utc(new Date(label)).format("MMMM YYYY")
: moment.utc(new Date(label)).format("MMM DD");
return title;
},
labelTextColor(tooltipItem: any) {
return palette.liftedWhite[300];
},
},
},
},
scales: {
y: {
type: "linear" as const,
display: true,
position: "right" as const,
ticks: {
display: false,
},
grid: {
drawTicks: false,
},
},
x: {
type: "time" as const,
position: "bottom" as const,
ticks: {
display: true,
},
grid: {
drawOnChartArea: false,
drawTicks: false,
},
},
},
};
};
export default generateOptions;
|