68 lines
1.3 KiB
TypeScript
68 lines
1.3 KiB
TypeScript
import {
|
|
Chart as ChartJS,
|
|
LinearScale,
|
|
CategoryScale,
|
|
PointElement,
|
|
Tooltip,
|
|
BarElement,
|
|
LineElement,
|
|
LineController,
|
|
BarController,
|
|
ChartDataset,
|
|
TooltipOptions,
|
|
defaults
|
|
} from 'chart.js'
|
|
|
|
export declare type GraphType = 'tvl' | 'price' | 'volume'
|
|
|
|
export const graphTypes = ['TVL', 'Price', 'Volume']
|
|
|
|
// Chart.js global defaults
|
|
ChartJS.register(
|
|
LineElement,
|
|
BarElement,
|
|
PointElement,
|
|
LinearScale,
|
|
CategoryScale,
|
|
Tooltip,
|
|
LineController,
|
|
BarController
|
|
)
|
|
|
|
defaults.font.family = `'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif`
|
|
defaults.animation = { easing: 'easeInOutQuart', duration: 1000 }
|
|
|
|
export const lineStyle: Partial<ChartDataset> = {
|
|
fill: false,
|
|
borderWidth: 2,
|
|
pointBorderWidth: 1,
|
|
pointRadius: 2,
|
|
pointHoverRadius: 4,
|
|
pointHoverBorderWidth: 0,
|
|
pointHitRadius: 2,
|
|
pointHoverBackgroundColor: '#ff4092'
|
|
}
|
|
|
|
export const tooltipOptions: Partial<TooltipOptions> = {
|
|
intersect: false,
|
|
displayColors: false,
|
|
padding: 10,
|
|
cornerRadius: 3,
|
|
borderWidth: 1,
|
|
caretSize: 7,
|
|
bodyFont: {
|
|
size: 13,
|
|
weight: 'bold',
|
|
lineHeight: 1,
|
|
style: 'normal',
|
|
family: defaults.font.family
|
|
},
|
|
titleFont: {
|
|
size: 10,
|
|
weight: 'normal',
|
|
lineHeight: 1,
|
|
style: 'normal',
|
|
family: defaults.font.family
|
|
}
|
|
}
|