Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@LetsWorkAround
LetsWorkAround authored Aug 21, 2024
1 parent 9f01db2 commit 25b9321
Showing 1 changed file with 0 additions and 136 deletions.
136 changes: 0 additions & 136 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -383,142 +383,6 @@ <h3><span class="material-icons">extension</span> 맞춤형 솔루션</h3>
</div>
</div>

<script>
const fundsData = [
{
name: "DB바이오헬스케어증권자투자신탁제1호[주식]ClassA-E",
threeMonth: 11.12, sixMonth: 24.12, oneYear: 42.03, threeYear: 2.28, sinceLaunch: 42.94, size: 71,
stocks: ["삼성바이오로직스", "셀트리온", "유한양행", "SK바이오사이언스", "한미약품"]
},
{
name: "미래에셋연금한국헬스케어증권자투자신탁1호주식CPe",
threeMonth: 10.33, sixMonth: 17.97, oneYear: 13.57, threeYear: -13.88, sinceLaunch: 27.50, size: 184,
stocks: ["삼성바이오로직스", "셀트리온", "유한양행", "녹십자"]
},
{
name: "미래에셋한국헬스케어증권자투자신탁1호(주식)A-e",
threeMonth: 10.32, sixMonth: 17.92, oneYear: 13.43, threeYear: -14.11, sinceLaunch: 161.55, size: 109,
stocks: ["삼성바이오로직스", "셀트리온", "유한양행", "한미약품", "녹십자"]
},
{
name: "웰컴액티브공모주코스닥벤처기업증권투자신탁[주혼]Ae",
threeMonth: 7.54, sixMonth: 30.24, oneYear: 25.31, threeYear: 0, sinceLaunch: 12, size: 1.05,
stocks: ["카카오뱅크", "LG에너지솔루션", "SK아이이테크놀로지"]
},
{
name: "삼성ABF코리아장기채권인덱스증권투자신탁[채권]I",
threeMonth: 4.49, sixMonth: 5.78, oneYear: 11.08, threeYear: 0.85, sinceLaunch: 85.18, size: 157,
stocks: ["국고채권", "한국전력공사채권", "한국도로공사채권", "한국가스공사채권"]
}
];

function getRandomChange() {
return (Math.random() - 0.5) * 2; // Random number between -1 and 1
}

function updateFundData() {
fundsData.forEach(fund => {
fund.threeMonth += getRandomChange();
fund.sixMonth += getRandomChange();
fund.oneYear += getRandomChange();
fund.threeYear += getRandomChange();
fund.sinceLaunch += getRandomChange();
fund.size += getRandomChange() * 10;
});
}

function getColorClass(value) {
const absValue = Math.abs(value);
if (absValue >= 20) return value >= 0 ? 'positive-4' : 'negative-4';
if (absValue >= 15) return value >= 0 ? 'positive-3' : 'negative-3';
if (absValue >= 10) return value >= 0 ? 'positive-2' : 'negative-2';
if (absValue >= 5) return value >= 0 ? 'positive-1' : 'negative-1';
return '';
}

function renderTable() {
const tableBody = document.getElementById('fundTableBody');
tableBody.innerHTML = '';

fundsData.forEach(fund => {
const fundRow = document.createElement('tr');
fundRow.innerHTML = `
<td>${fund.name}</td>
<td class="value ${getColorClass(fund.threeMonth)}" data-value="${fund.threeMonth}">${fund.threeMonth.toFixed(2)}%</td>
<td class="value ${getColorClass(fund.sixMonth)}" data-value="${fund.sixMonth}">${fund.sixMonth.toFixed(2)}%</td>
<td class="value ${getColorClass(fund.oneYear)}" data-value="${fund.oneYear}">${fund.oneYear.toFixed(2)}%</td>
<td class="value ${getColorClass(fund.threeYear)}" data-value="${fund.threeYear}">${fund.threeYear.toFixed(2)}%</td>
<td class="value ${getColorClass(fund.sinceLaunch)}" data-value="${fund.sinceLaunch}">${fund.sinceLaunch.toFixed(2)}%</td>
<td class="value" data-value="${fund.size}">${fund.size.toFixed(2)}</td>
`;
tableBody.appendChild(fundRow);

// Add stock rows
fund.stocks.forEach(stock => {
const stockRow = document.createElement('tr');
stockRow.className = 'stock-row';
stockRow.innerHTML = `
<td class="stock-name" colspan="7">- ${stock}</td>
`;
tableBody.appendChild(stockRow);
});
});
}

function sortTable(column) {
fundsData.sort((a, b) => b[column] - a[column]);
}

function animateValue(element, start, end, duration) {
let startTimestamp = null;
element.classList.add('changing');
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const currentValue = start + progress * (end - start);
element.textContent = currentValue.toFixed(2) + '%';
element.className = `value ${getColorClass(currentValue)}`;
if (progress < 1) {
window.requestAnimationFrame(step);
} else {
element.classList.remove('changing');
}
};
window.requestAnimationFrame(step);
}

function updateTableWithAnimation() {
const valueElements = document.querySelectorAll('.value');
updateFundData();

valueElements.forEach((element, index) => {
const column = element.cellIndex - 1; // Subtract 1 because the first column is the fund name
const fund = fundsData[Math.floor(index / 6)]; // Divide by 6 because there are 6 value columns per fund
const newValue = Object.values(fund)[column + 1]; // Add 1 to skip the name property
const oldValue = parseFloat(element.dataset.value);

if (newValue !== oldValue) {
animateValue(element, oldValue, newValue, 1000);
element.dataset.value = newValue;
}
});
}

document.querySelectorAll('th.sortable').forEach(th => {
th.addEventListener('click', () => {
const column = th.dataset.sort;
sortTable(column);
renderTable();
});
});

// Initial render
renderTable();

// Update data and re-render every 3 seconds
setInterval(updateTableWithAnimation, 3000);
</script>

<section class="section success-cases">
<div class="section-content">
<h2 class="section-title">고객 성공 사례</h2>
Expand Down

0 comments on commit 25b9321

Please sign in to comment.