BM/sshs.html at main · drphe/BM · GitHub

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Biểu đồ phân tán</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script id="theme-script" src="https://code.highcharts.com/themes/brand-light.js"></script>

    <style>
        /* Cải thiện giao diện của trang */
        body {
            background-color:#fff;
            color: #000;
            font-family: Arial, sans-serif;
	    overflow: hidden;
        }

        /* Style cho các nút */
        .button-container {
            margin: 10px;
        }

        .button-container button {
            padding: 3px 6px;
            margin-right: 10px;
            cursor: pointer;
            border: 2px solid #007bff;
            /* Đặt viền cho nút */
            background-color: #007bff;
            /* Màu nền nút */
            color: white;
            /* Màu chữ */
            font-size: 14px;
            /* Kích thước chữ */
            border-radius: 5px;
            /* Bo góc cho nút */
            transition: all 0.3s ease;
            /* Hiệu ứng chuyển tiếp */
        }

        /* Hiệu ứng khi người dùng di chuột vào nút */
        .button-container button:hover {
            background-color: #0056b3;
            transform: scale(1.1);
        }

        /* Hiệu ứng khi nút được nhấn */
        .button-container button:active {
            background-color: #003f7f;
            /* Màu nền khi nút bị nhấn */
            transform: scale(0.98);
            /* Thu nhỏ nút khi nhấn */
        }

        /* Thêm hiệu ứng khi nút bị vô hiệu hóa */
        .button-container button:disabled {
            background-color: #ccc;
            /* Màu nền cho nút vô hiệu hóa */
            cursor: not-allowed;
            /* Thay đổi con trỏ khi nút vô hiệu hóa */
        }
    </style>

</head>

<body>
    <div class="button-container">
        <button onclick="updateChart('ytd')">YTD</button>
        <button onclick="updateChart('1')">1 Year</button>
        <button onclick="updateChart('3')">3 Years</button>
        <button onclick="updateChart('5')">5 Years</button>
        <button onclick="generateTable()" style="float:right;" title="Xem bảng dữ liệu"><svg fill="#000000" width="16px" height="16px" viewBox="0 0 32 32" id="icon" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      .cls-1 {
        fill: none;
      }
    </style>
  </defs>
  <polygon points="4 20 4 22 8.586 22 2 28.586 3.414 30 10 23.414 10 28 12 28 12 20 4 20"/>
  <rect x="20" y="22" width="4" height="2"/>
  <rect x="16" y="18" width="4" height="2"/>
  <rect x="20" y="14" width="4" height="2"/>
  <rect x="8" y="14" width="4" height="2"/>
  <path d="M27,3H5A2.0027,2.0027,0,0,0,3,5V16H5V11H27V27H16v2H27a2.0027,2.0027,0,0,0,2-2V5A2.0027,2.0027,0,0,0,27,3Zm0,6H5V5H27Z"/>
  <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/>
</svg></button>
    </div>
    <div id="container" style="width:100%; height:400px;"></div>
    <script>
        var vnindexpoint = {
            x: 0,
            y: 0
        };
        // Đặt ngôn ngữ tiếng việt
        Highcharts.setOptions({
            lang: {
                months: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'],
                weekdays: ['Chủ nhật', 'Thứ hai', 'Thứ ba', 'Thứ tư', 'Thứ năm', 'Thứ sáu', 'Thứ bảy'],
                shortMonths: ['Thg 1', 'Thg 2', 'Thg 3', 'Thg 4', 'Thg 5', 'Thg 6', 'Thg 7', 'Thg 8', 'Thg 9', 'Thg 10', 'Thg 11', 'Thg 12'],
                thousandsSep: ',',
                decimalPoint: '.',
                downloadPNG: 'Tải xuống PNG',
                downloadPDF: 'Tải xuống PDF',
                downloadSVG: 'Tải xuống SVG',
                downloadCSV: 'Tải xuống CSV',
                downloadXLS: 'Tải xuống XLS',
                viewData: 'Xem dữ liệu',
                viewFullscreen: 'Phóng to',
                exitFullscreen: 'Thu nhỏ',
                printChart: 'In biểu đồ',
                resetZoom: 'Đặt lại thu phóng',
                resetZoomTitle: 'Đặt lại mức thu phóng 1:1'
            }
        });
        // Thiết lập chủ đề tối cho biểu đồ
        Highcharts.setOptions({
            exporting: {
                enabled: true,
                buttons: {
                    contextButton: {
                        menuItems: [

                            'viewFullscreen', // Thêm nút xem toàn màn hình
                            'separator',
                            'downloadPNG',
                            'downloadPDF',
                            'downloadSVG',
                            'separator',
                            {
                                text: 'Xuất Dữ liệu CSV',
                                onclick: function() {
                                    var csv = this.getCSV();
                                    var link = document.createElement('a');
                                    link.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);
                                    link.download = 'data.csv';
                                    link.click();
                                }
                            },
                        ]
                    }
                }
            }
        });
        // Dữ liệu mẫu
        const retrievedData = localStorage.getItem("sshs");
        const data = JSON.parse(retrievedData) || {};

        let currentPeriod = '5'; // Khoảng thời gian mặc định là 5 năm
        let seriesData = prepareChartData(currentPeriod);
        // Khởi tạo biểu đồ
        const chart = Highcharts.chart('container', {
            chart: {
                type: 'scatter',
                zoomType: 'xy',
            },
            title: {
                text: 'Risk-Return: 5 năm'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: 'STD (%)'
                }
            },
            yAxis: {
                title: {
                    enabled: true,
                    text: 'CAGR (%)'
                },
                gridLineWidth: 0, // Tắt tất cả các đường kẻ ngang
                plotLines: [{
                    value: 0, // Đặt giá trị plotLine tại y = 0
                    color: '#ddd0', // Màu của đường kẻ
                    width: 1, // Độ dày của đường kẻ
                    zIndex: 5 // Đảm bảo đường kẻ này nằm trên các phần tử khác
                }]
            },
            tooltip: {
                formatter: function() {
                    return `${this.point.name}<br>CAGR: ${this.point.y.toFixed(2)} %<br>STD: ${this.point.x.toFixed(2)} %`;
                }
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false // Ẩn credit (logo Highcharts)
            },
            series: [{
                name: 'CAGR vs Standard Deviation',
                data: seriesData
            }]
        });

        // Hàm chuẩn bị dữ liệu cho biểu đồ theo thời gian
        function prepareChartData(period) {
            let dataForPeriod = [];
            let maxCAGR = -Infinity; // Giá trị CAGR lớn nhất, ban đầu là -Infinity
            let maxSharpe = -Infinity; // Giá trị CAGR lớn nhất, ban đầu là -Infinity
            // Tìm ra CAGR lớn nhất trong tất cả các công ty
            Object.keys(data).forEach(key => {
                const companyData = data[key];
                const point = companyData[period];
                if (point.cagr > maxCAGR) {
                    maxCAGR = point.cagr; // Cập nhật giá trị CAGR lớn nhất
                }
                if (point.sharpe > maxSharpe) {
                    maxSharpe = point.sharpe; // Cập nhật giá trị Sharpe lớn nhất
                }
            });
            vnindexpoint.x = data['VNINDEX'][period].std;
            vnindexpoint.y = data['VNINDEX'][period].cagr;

            const vnindexCAGR = data['VNINDEX'][period].cagr; // Lấy CAGR của VNINDEX cho khoảng thời gian hiện tại
            Object.keys(data).forEach(key => {
                const companyData = data[key];
                const point = companyData[period];
                let color = point.cagr == vnindexCAGR ? 'blue' : (point.cagr == maxCAGR ? 'yellow' : (point.cagr > vnindexCAGR ? 'gray' : 'red'));
		if(point.sharpe == maxSharpe) {color = "purple";}
                const enableLable = point.cagr === maxCAGR || point.cagr == vnindexCAGR || point.sharpe == maxSharpe;
                dataForPeriod.push({
                    name: `${key}`, // Tên công ty và thời gian
                    x: point.std, // Trục X: std
                    y: point.cagr, // Trục Y: cagr
                    color: color, // Màu sắc của chấm
                    dataLabels: {
                        enabled: enableLable, // Chỉ hiển thị tên công ty nếu CAGR là lớn nhất
                        format: `${key}`, // Hiển thị tên công ty
                        style: {
                            fontWeight: 'bold',
                            color: 'black'
                        }
                    }
                });
            });
            return dataForPeriod;
        }

        function updatePlotLines(chart, point) {
            // Xóa tất cả các đường kẻ cũ (để tránh trùng lặp)
            chart.xAxis[0].removePlotLine('verticalLine');
            chart.yAxis[0].removePlotLine('horizontalLine');

            // Thêm đường kẻ dọc qua tọa độ x (std)
            chart.xAxis[0].addPlotLine({
                id: 'verticalLine', // Thêm id để dễ dàng tham chiếu sau này
                color: 'red',
                width: 1,
                value: point.x, // Tọa độ x của điểm
                dashStyle: 'ShortDash',
            });

            // Thêm đường kẻ ngang qua tọa độ y (cagr)
            chart.yAxis[0].addPlotLine({
                id: 'horizontalLine', // Thêm id để dễ dàng tham chiếu sau này
                color: 'blue',
                width: 1,
                value: point.y, // Tọa độ y của điểm
                dashStyle: 'ShortDash',
            });
        }
        updatePlotLines(chart, vnindexpoint);

        function updateChart(period) {
            currentPeriod = period; // Cập nhật thời gian hiện tại
            let periodtext = period == 'ytd' ? 'Từ đầu năm' : period + ' năm';
            // Cập nhật dữ liệu mới
            let updatedData = prepareChartData(currentPeriod);
            updatePlotLines(chart, vnindexpoint);
            // Cập nhật biểu đồ với dữ liệu mới
            chart.series[0].setData(updatedData);
            chart.setTitle({
                text: `Risk-Return: ${periodtext}`
            });
        }

       function openNewPage(text) {
            const newWindow = window.open("", "_blank", "width=600,height=400");
            const content = `
                <html>
                <head>
                    <title>Bảng dữ liệu</title>
                    <meta charset="UTF-8">
			<style>
        * {
            font-family: Roboto, Helvetica, Arial, sans-serif;
            margin: 0px;
        }

        body {
            background-color: #39394a;
            color: white;
            margin: 10px;
            padding: 4px;
        }
        /* Viền cho bảng và các ô */
        table {
            width: 100%;
            border-collapse: collapse;
            /* Các viền sẽ không bị chồng lên nhau */
            margin-bottom: .25rem;
            margin-top: .25rem;
        }

        /* Định dạng cho tiêu đề bảng */
        th {
            background-color: hsla(0, 0%, 100%, .1);
            border-bottom: 1px solid hsla(0, 0%, 100%, .15);
            border-top: 1px solid hsla(0, 0%, 100%, .15);
            padding: .25rem .75rem;
        }

        /* Viền cho các ô thẻ tiêu đề */
        th {
            border-left: 1px solid hsla(0, 0%, 100%, .15);
        }

        tr tg:last-child {
            border-right: 1px solid hsla(0, 0%, 100%, .15);
        }

        /* Định dạng cho ô cuối cùng (bên phải) */
        .last_child {
            border-right-width: 1px;
            border-top-right-radius: .375rem;
            padding-right: .75rem;
        }

        /* Định dạng cho ô đầu tiên (bên trái) */
        .first_child {
            border-top-left-radius: .375rem;
            padding-left: .75rem;
        }


        /* Viền cho các ô dữ liệu */
        td {
            border-left: 1px solid hsla(0, 0%, 100%, .15);
            /* Viền bên trái */
            border-bottom: 1px solid hsla(0, 0%, 100%, .15);
            /* Viền bên dưới */
            padding: .25rem .75rem;
        }

        tr td:last-child {
            border-right: 1px solid hsla(0, 0%, 100%, .15);
            /* Viền bên phải */
        }
		</style>
                </head>
                <body>
                    <p>${text}</p>
                </body>
                </html>
            `;
            newWindow.document.open();
            newWindow.document.write(content);
            newWindow.document.close();
        }

        function generateTable() {
            let tableHTML = `<table>
<caption style="font-size:18px;">Thống kê Risk-Return</caption>
<thead><tr class="first_child last_child"><th rowspan="2">Mã <br> Đơn vị: %</th><th colspan="3">YTD</th><th colspan="3">1 năm</th><th colspan="3">3 năm</th><th colspan="3">5 năm</th></tr><tr><th>CAGR</th><th>STD</th><th>Sharpe</th><th>CAGR</th><th>STD</th><th>Sharpe</th><th>CAGR</th><th>STD</th><th>Sharpe</th><th>CAGR</th><th>STD</th><th>Sharpe</th></tr></thead>
<tbody>`;
            // Duyệt qua các mã trong đối tượng data
            for (let stock in data) {
                let stockData = data[stock];

                // Lấy các giá trị cagr và std cho từng khoảng thời gian
                let oneYearCAGR = stockData['1'].cagr.toFixed(2);
                let oneYearSTD = stockData['1'].std.toFixed(2);
                let oneYearSharpe = stockData['1'].sharpe.toFixed(2);

                let threeYearsCAGR = stockData['3'].cagr.toFixed(2);
                let threeYearsSTD = stockData['3'].std.toFixed(2);
                let threeYearsSharpe = stockData['3'].sharpe.toFixed(2);

                let fiveYearsCAGR = stockData['5'].cagr.toFixed(2);
                let fiveYearsSTD = stockData['5'].std.toFixed(2);
                let fiveYearsSharpe = stockData['5'].sharpe.toFixed(2);

                let ytdCAGR = stockData['ytd'].cagr.toFixed(2);
                let ytdSTD = stockData['ytd'].std.toFixed(2);
                let ytdSharpe = stockData['ytd'].sharpe.toFixed(2);

                // Tạo một dòng cho mã cổ phiếu và các giá trị tương ứng
                tableHTML += `<tr>
                        <td>${stock}</td>
                        <td>${ytdCAGR}</td><td>${ytdSTD}</td><td>${ytdSharpe}</td>
                        <td>${oneYearCAGR}</td><td>${oneYearSTD}</td><td>${oneYearSharpe}</td>
                        <td>${threeYearsCAGR}</td><td>${threeYearsSTD}</td><td>${threeYearsSharpe}</td>
                        <td>${fiveYearsCAGR}</td><td>${fiveYearsSTD}</td><td>${fiveYearsSharpe}</td>
                      </tr>`;
            }

            tableHTML += '</tbody></table>';
	   openNewPage(tableHTML)

        }

    </script>
</body>

</html>