-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathconstants.ts
More file actions
124 lines (117 loc) · 2.95 KB
/
Copy pathconstants.ts
File metadata and controls
124 lines (117 loc) · 2.95 KB
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import {
CandlestickSeriesPartialOptions,
ChartOptions,
ColorType,
DeepPartial,
} from 'lightweight-charts';
export const navItems = [
{
label: 'Home',
href: '/',
},
{
label: 'Search',
href: '/',
},
{
label: 'Coins',
href: '/coins',
},
];
const CHART_COLORS = {
background: '#0b1116',
text: '#8f9fb1',
grid: '#1a2332',
border: '#1a2332',
crosshairVertical: '#ffffff40',
crosshairHorizontal: '#ffffff20',
candleUp: '#158A6E',
candleDown: '#EB1C36',
} as const;
export const getCandlestickConfig = (): CandlestickSeriesPartialOptions => ({
upColor: CHART_COLORS.candleUp,
downColor: CHART_COLORS.candleDown,
wickUpColor: CHART_COLORS.candleUp,
wickDownColor: CHART_COLORS.candleDown,
borderVisible: true,
wickVisible: true,
});
export const getChartConfig = (
height: number,
timeVisible: boolean = true
): DeepPartial<ChartOptions> => ({
width: 0,
height,
layout: {
background: { type: ColorType.Solid, color: CHART_COLORS.background },
textColor: CHART_COLORS.text,
fontSize: 12,
fontFamily: 'Inter, Roboto, "Helvetica Neue", Arial',
},
grid: {
vertLines: { visible: false },
horzLines: {
visible: true,
color: CHART_COLORS.grid,
style: 2,
},
},
rightPriceScale: {
borderColor: CHART_COLORS.border,
},
timeScale: {
borderColor: CHART_COLORS.border,
timeVisible,
secondsVisible: false,
},
handleScroll: true,
handleScale: true,
crosshair: {
mode: 1,
vertLine: {
visible: true,
color: CHART_COLORS.crosshairVertical,
width: 1,
style: 0,
},
horzLine: {
visible: true,
color: CHART_COLORS.crosshairHorizontal,
width: 1,
style: 0,
},
},
localization: {
priceFormatter: (price: number) =>
'$' + price.toLocaleString(undefined, { maximumFractionDigits: 2 }),
},
});
export const PERIOD_CONFIG: Record<
Period,
{ days: number | string; interval?: 'hourly' | 'daily' }
> = {
daily: { days: 1, interval: 'hourly' },
weekly: { days: 7, interval: 'hourly' },
monthly: { days: 30, interval: 'hourly' },
'3months': { days: 90, interval: 'daily' },
'6months': { days: 180, interval: 'daily' },
yearly: { days: 365 },
max: { days: 'max' },
};
export const PERIOD_BUTTONS: { value: Period; label: string }[] = [
{ value: 'daily', label: '1D' },
{ value: 'weekly', label: '1W' },
{ value: 'monthly', label: '1M' },
{ value: '3months', label: '3M' },
{ value: '6months', label: '6M' },
{ value: 'yearly', label: '1Y' },
{ value: 'max', label: 'Max' },
];
// Test Data
export const orderBook = [
{ price: '0.031 BTC', amountBTC: '0.5 BTC', amountETH: '$15,000' },
{ price: '0.0305 BTC', amountBTC: '1.0 BTC', amountETH: '$30,000' },
{ price: '0.0300 BTC', amountBTC: '2.0 BTC', amountETH: '$60,000' },
{ price: '0.0295 BTC', amountBTC: '1.5 BTC', amountETH: '$45,000' },
{ price: '0.0290 BTC', amountBTC: '3.0 BTC', amountETH: '$90,000' },
];