TABLE DATA
Overview
The Fund Analysis Dashboard is a web application that allows users to analyze and filter financial data for different funds. It utilizes HTML for the structure, CSS for styling, and JavaScript (with Bootstrap) for dynamic interactions.
Installation
If you haven't installed Bootstrap in your project, you can use a package manager like npm or yarn to install it. Open your terminal and run:
npm install bootstrapor using yarn:
yarn add bootstrapCheckbox Change Event Listeners
If the checkbox is checked (element.checked is true), it logs "yes" to the console and adds a series to the chart using chart.addSeries. If the checkbox is unchecked, it logs the element's ID to the console and removes the corresponding series from the chart using chart.get(element.id).remove().
elements.forEach(element => {
element.addEventListener("change", (i) => {
var idd = element.checked;
var ida = parseInt(element.id.match(/(\d+)/));
if (idd) {
console.log("yes");
chart.addSeries(series_data[ida]);
} else {
console.log(element.id);
if (chart.series.length) {
chart.get(element.id).remove();
}
}
});
});
HandleCheckboxChange Function
The handleCheckboxChange function is called when either checkbox1 or checkbox2 changes or when the dropdown (fundFilter) value changes.
It iterates over each row in the table. It retrieves the selected value from the dropdown and the content of the second column in each row.
It checks various conditions to determine whether the row should be hidden (hideRow = true) based on the state of the checkboxes and the values in the row.
It sets the display style property of the row to 'none' or 'table-row' based on whether the row should be hidden.
const handleCheckboxChange = function() {
for (let i = 0; i < tableRows.length; i++) {
var selectedValue = fundFilter.value;
var fundCell = tableRows[i].querySelector('td:nth-child(2)');
const row = tableRows[i];
const cells = row.getElementsByTagName('td');
let hideRow = false;
if (cells.length >= 2) {
if ((!checkbox1.checked && !checkbox2.checked) ||
(checkbox1.checked && !checkbox2.checked && !cells[0].textContent.startsWith('SHK')) ||
(checkbox2.checked && !checkbox1.checked && !cells[0].textContent.startsWith('SMO')) ||
(fundCell.textContent !== selectedValue && selectedValue !== "")) {
hideRow = true;
}
if ((!checkbox1.checked && !checkbox2.checked)) {
hideRow = true;
}
row.style.display = hideRow ? 'none' : 'table-row';
}
}
};
Initial Check for Checkbox1 and Checkbox2:
This code checks if either checkbox1 or checkbox2 is initially checked.
If true, it calls handleCheckboxChange(), which will initially handle the visibility of table rows based on the checkbox states.
if (checkbox1.checked || checkbox2.checked) {
handleCheckboxChange();
}Event Listeners for Dropdown and Checkboxes:
Event listeners are set up for the dropdown (fundFilter) and both checkboxes (checkbox1 and checkbox2).
Whenever the dropdown value changes or either checkbox is toggled, the handleCheckboxChange function is called, which updates the visibility of table rows based on the current state of checkboxes and the dropdown value.
fundFilter.addEventListener("change", handleCheckboxChange);
checkbox1.addEventListener('change', handleCheckboxChange);
checkbox2.addEventListener('change', handleCheckboxChange);Code Part
Code Structure
Template Section
<template>
<div class="row">
<!-- Column -->
<div class="col-lg-12 col-md-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="d-flex flex-wrap">
<div>
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
>
<h3 class="card-title" id="show-container">Fund Analysis</h3>
<div
style="
display: flex;
align-items: center;
margin-right: 10px;
"
>
<input
type="checkbox"
name="checkbox1"
id="checkbox1"
checked
/>
<label
for="checkbox1"
style="
padding: 5px 0px;
display: flex;
align-items: center;
justify-content: center;
"
>
<h4 style="margin: 0; margin-left: 15px;">Hong Kong</h4>
</label>
</div>
<div
style="
display: flex;
align-items: center;
margin-right: 10px;
"
>
<input
type="checkbox"
name="checkbox2"
id="checkbox2"
checked
/>
<label
for="checkbox2"
style="
padding: 5px 0px;
display: flex;
align-items: center;
justify-content: center;
"
>
<h4 style="margin: 0; margin-left: 15px;">Macau</h4>
</label>
</div>
</div>
</div>
<div class="listdown">
<div class="form-group">
<select class="form-control" id="fundFilter">
<option value="">All</option>
<option value="Equities">Equities</option>
<option value="Bonds">Bonds</option>
<option value="Balance">Balance</option>
<option value="Guaranteed">Guaranteed</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12">
<div
class="table-responsive"
style=" overflow: auto;"
>
<table
class="table product-overview"
style="height: 200px; overflow-y: auto;"
id="macau_dataTable"
>
<thead>
<tr>
<th>Fund Name</th>
<th>Fund</th>
<th>3 Month</th>
<th>Year to Date</th>
<th>1 Year</th>
<th>3 Year</th>
<th>5 Year</th>
<th>10 Year</th>
<th>Since Launch</th>
</tr>
</thead>
<tbody style="pointer-events: auto">
<tr>
<td>SHK 123</td>
<td>Equities</td>
<td> d_macau.0.mth3 </td>
<td> d_macau.0.ytd </td>
<td> d_macau.0.yr1 </td>
<td> d_macau.0.yr3 </td>
<td> d_macau.0.yr5 </td>
<td> d_macau.0.yr10 </td>
<td> d_macau.0.since </td>
</tr>
<tr>
<td>SMO 123</td>
<td>Bonds</td>
<td> i.mth3 </td>
<td> i.ytd </td>
<td> i.yr1 </td>
<td> i.yr3 </td>
<td> i.yr5 </td>
<td> i.yr10 </td>
<td> i.since </td>
</tr>
<tr>
<td>SHK 13</td>
<td>Balance</td>
<td> i.mth3 </td>
<td> i.ytd </td>
<td> i.yr1 </td>
<td> i.yr3 </td>
<td> i.yr5 </td>
<td> i.yr10 </td>
<td> i.since </td>
</tr>
<tr>
<td>SMO 13</td>
<td>Guaranteed</td>
<td> i.mth3 </td>
<td> i.ytd </td>
<td> i.yr1 </td>
<td> i.yr3 </td>
<td> i.yr5 </td>
<td> i.yr10 </td>
<td> i.since </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>Javascript Session
<script>
export default {
data() {
return {
// Any data or variables you want to use in your component
};
},
mounted() {
// Your existing script logic goes here
const tableRows = document.querySelectorAll("#macau_dataTable tr");
var fundFilter = document.getElementById("fundFilter");
const checkbox1 = document.getElementById("checkbox1");
const checkbox2 = document.getElementById("checkbox2");
const handleCheckboxChange = function () {
for (let i = 0; i < tableRows.length; i++) {
var selectedValue = fundFilter.value;
var fundCell = tableRows[i].querySelector("td:nth-child(2)");
const row = tableRows[i];
const cells = row.getElementsByTagName("td");
let hideRow = false;
if (cells.length >= 2) {
if (
(!checkbox1.checked && !checkbox2.checked) ||
(checkbox1.checked && !checkbox2.checked && !cells[0].textContent.startsWith("SHK")) ||
(checkbox2.checked && !checkbox1.checked && !cells[0].textContent.startsWith("SMO")) ||
(fundCell.textContent !== selectedValue && selectedValue !== "")
) {
hideRow = true;
}
if ((!checkbox1.checked && !checkbox2.checked)) {
hideRow = true;
}
row.style.display = hideRow ? "none" : "table-row";
}
}
};
if (checkbox1.checked || checkbox2.checked) {
handleCheckboxChange();
}
fundFilter.addEventListener("change", handleCheckboxChange);
checkbox1.addEventListener("change", handleCheckboxChange);
checkbox2.addEventListener("change", handleCheckboxChange);
},
methods: {
// Any additional methods you may need
},
};
</script>CSS Section
<style scoped>
@import 'bootstrap/dist/css/bootstrap.min.css';
/* Your existing CSS styles go here */
#show-container {
display: inline-block;
margin-right: 10px;
}
@media (max-width: 451px) {
#show-container {
display: block;
margin-right: 10px;
}
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: 0.25rem;
}
.listdown {
margin-left: auto;
}
.col-lg-12, .col-md-12 {
position: relative;
width: 80%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
</style>Last updated