Skip to content

Commit 9966c87

Browse files
alaa-eddinealaa-eddine
committed
updated demos
1 parent af9ba2c commit 9966c87

File tree

3 files changed

+113
-82
lines changed

3 files changed

+113
-82
lines changed

‎docs/demos/basic-01.html‎

Lines changed: 12 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -8,47 +8,22 @@
88
<!-- QFChart Library (Bundled with ECharts) -->
99
<script src="https://cdn.jsdelivr.net/npm/@qfo/qfchart/dist/qfchart.min.browser.js"></script>
1010

11-
<style>
12-
body {
13-
background-color: #0f172a;
14-
margin: 0;
15-
display: flex;
16-
flex-direction: column;
17-
align-items: center;
18-
justify-content: center;
19-
min-height: 100vh;
20-
color: #cbd5e1;
21-
font-family: 'Segoe UI', system-ui, sans-serif;
22-
}
23-
24-
#container {
25-
width: 100%;
26-
max-width: 90vw;
27-
margin: 0 auto;
28-
padding: 1.5rem;
29-
background-color: #1e293b;
30-
border: 1px solid #334155;
31-
border-radius: 8px;
32-
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
33-
}
34-
35-
h1 {
36-
color: #5eead4;
37-
font-size: 2rem;
38-
margin-bottom: 1rem;
39-
text-align: center;
40-
}
41-
42-
#main-chart {
43-
width: 100%;
44-
height: 100%;
45-
}
46-
</style>
11+
<link rel="stylesheet" href="styles.css" />
4712
</head>
4813

4914
<body>
15+
<nav>
16+
<a href="https://quantforgeorg.github.io/QFChart/" target="_blank">
17+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
18+
<path
19+
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
20+
/>
21+
</svg>
22+
QFChart on GitHub
23+
</a>
24+
</nav>
5025
<div id="container">
51-
<h1>QFChart Library Demo</h1>
26+
<h1>Basic Demo</h1>
5227
<div id="main-chart"></div>
5328
</div>
5429

‎docs/demos/full.html‎

Lines changed: 18 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -5,53 +5,26 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>QFChart - Demo</title>
77

8-
<style>
9-
body {
10-
background-color: #0f172a;
11-
margin: 0;
12-
display: flex;
13-
flex-direction: column;
14-
align-items: center;
15-
justify-content: center;
16-
min-height: 100vh;
17-
color: #cbd5e1;
18-
font-family: 'Segoe UI', system-ui, sans-serif;
19-
}
20-
21-
#container {
22-
width: 100%;
23-
max-width: 90vw;
24-
margin: 0 auto;
25-
padding: 1.5rem;
26-
background-color: #1e293b;
27-
border: 1px solid #334155;
28-
border-radius: 8px;
29-
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
30-
}
31-
32-
h1 {
33-
color: #5eead4;
34-
font-size: 2rem;
35-
margin-bottom: 1rem;
36-
text-align: center;
37-
}
38-
39-
#main-chart {
40-
width: 100%;
41-
height: 100%;
42-
}
43-
a {
44-
color: #5eead4;
45-
}
46-
</style>
8+
<link rel="stylesheet" href="styles.css" />
479
</head>
4810

4911
<body>
12+
<nav>
13+
<a href="https://quantforgeorg.github.io/QFChart/" target="_blank">
14+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
15+
<path
16+
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
17+
/>
18+
</svg>
19+
QFChart on GitHub
20+
</a>
21+
</nav>
5022
<div id="container">
51-
<!-- <h1>QFChart Library Demo</h1> -->
23+
<h1>Full featured Demo</h1>
5224
<p>
53-
This is a demo of the QFChart library. It uses the
54-
<a href="https://github.com/QuantForgeOrg/PineTS" target="_blank">PineTS</a> library to get the data and the indicators.
25+
This demo uses the
26+
<a href="https://github.com/QuantForgeOrg/PineTS" target="_blank">PineTS</a> library to load the maret data and calculate multiple
27+
indicators.
5528
</p>
5629
<hr />
5730
<div id="main-chart"><center>Loading...</center></div>
@@ -102,7 +75,7 @@
10275
const chartContainer = document.getElementById('main-chart');
10376
window.chart = new QFChart.QFChart(chartContainer, {
10477
title: 'BTC/USDT', // Custom title
105-
height: '840px',
78+
height: '800px',
10679
padding: 0.2,
10780
databox: {
10881
position: 'right',
@@ -137,14 +110,14 @@
137110
// Group plots into one indicator
138111
chart.addIndicator('MACD', macdPlots, {
139112
isOverlay: false,
140-
height: 16,
113+
height: 14,
141114
titleColor: '#ff9900',
142115
controls: { collapse: true, maximize: true },
143116
});
144117

145118
chart.addIndicator('SQZMOM', sqzmomPlots, {
146119
isOverlay: false,
147-
height: 16,
120+
height: 14,
148121
controls: { collapse: true, maximize: true },
149122
});
150123

‎docs/demos/styles.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
body {
2+
background-color: #1e293b;
3+
margin: 0;
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
justify-content: center;
8+
min-height: 100vh;
9+
color: #cbd5e1;
10+
font-family: 'Segoe UI', system-ui, sans-serif;
11+
}
12+
13+
#container {
14+
width: 100%;
15+
max-width: 90vw;
16+
margin: 0 auto;
17+
padding: 0px 1.5rem;
18+
background-color: #1e293b;
19+
20+
border-radius: 8px;
21+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
22+
}
23+
24+
h1 {
25+
color: #5eead4;
26+
font-size: 1.5rem;
27+
margin-bottom: 1rem;
28+
text-align: center;
29+
padding: 0;
30+
}
31+
32+
#main-chart {
33+
width: 100%;
34+
height: 100%;
35+
}
36+
a {
37+
color: #5eead4;
38+
}
39+
40+
nav {
41+
position: fixed;
42+
top: 0;
43+
left: 0;
44+
width: 100%;
45+
display: flex;
46+
justify-content: flex-end;
47+
padding: 0.5rem 0.5rem;
48+
z-index: 1000;
49+
}
50+
nav a {
51+
display: inline-flex;
52+
align-items: center;
53+
gap: 0.5rem;
54+
color: #5eead4;
55+
text-decoration: none;
56+
font-size: 1rem;
57+
font-weight: 600;
58+
padding: 0.4rem 1.25rem;
59+
background-color: rgba(94, 234, 212, 0.1);
60+
border: 1px solid rgba(94, 234, 212, 0.3);
61+
border-radius: 0.5rem;
62+
transition: all 0.3s ease;
63+
backdrop-filter: blur(10px);
64+
margin-right: 1rem;
65+
}
66+
67+
nav a:hover {
68+
background-color: rgba(94, 234, 212, 0.2);
69+
border-color: #5eead4;
70+
transform: translateY(-2px);
71+
box-shadow: 0 4px 12px rgba(94, 234, 212, 0.3);
72+
}
73+
74+
nav a:active {
75+
transform: translateY(0);
76+
box-shadow: 0 2px 6px rgba(94, 234, 212, 0.2);
77+
}
78+
79+
nav a svg {
80+
width: 1.25rem;
81+
height: 1.25rem;
82+
fill: currentColor;
83+
}

0 commit comments

Comments
 (0)