<div class="card">

<div class="card-header card-header-warning row" style="display: flex; justify-

content: space-between; align-items: center;">
<thead>
<h4>Daily Pnl</h4>
<div>
<img src="/static/img/ddown.png" alt="Portfolio Logo"
style="height: 10px;" onclick="openSelectMenu();" />
<select id="filter-select" id="time-period"
onchange="fetchData(this.value); filterTable();" style="display:none;">
<option value="1m">1 m</option>
<option value="3m">3 m</option>
<option value="6m">6 m</option>
<option value="1y">1 Y</option>
<option value="all" selected>Max</option>
</select>
</div>
<script>
// Function to show the select dropdown when the image is clicked
function openSelectMenu() {
var selectElement = document.getElementById("filter-select");
if (selectElement.style.display === "none" ||
selectElement.style.display === "") {
selectElement.style.display = "block";
} else {
selectElement.style.display = "none";
}
selectElement.focus();
}

// Function to download the table data as a CSV file

function downloadCSV() {
var table = document.getElementById("data-table");
var rows = table.getElementsByTagName("tr");
var csv = [];

// Loop through each row in the table

for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var cols = row.getElementsByTagName("td");
var rowData = [];

// Loop through each column in the row

for (var j = 0; j < cols.length; j++) {
var cellData = cols[j].innerText.trim();

// If the cell data is a number, remove decimals (make

it integer)
if (!isNaN(cellData) && cellData !== "") {
cellData = parseInt(cellData, 10);
}

rowData.push(cellData);
}

csv.push(rowData.join(","));
}

// Convert CSV array to a string

 var csvString = csv.join("\n");

// Create a temporary link to trigger the download

var link = document.createElement('a');
link.href = 'data:text/csv;charset=utf-8,' +
encodeURI(csvString);
link.target = '_blank';
link.download = 'daily_pnl.csv'; // Name of the file to be
downloaded
link.click();
}
</script>
</thead>
</div>
<div style="height: auto; max-height: 378px; overflow-y: auto;">
<table id="data-table">
<thead>
<tr>
<td style="width: 20%;"><strong>Date</strong></td>
<td style="width: 20%;"><strong>Day</strong></td>
<td style="width: 20%;"><strong>PNL</strong></td>
<td style="width: 22%;"><strong>Return (%)</strong></td>
<td style="width: 40%;"><strong>Max</strong></td>
<td style="width: 45%;"><strong>Min</strong></td>
</tr>
</thead>
<tbody>
{% for row in table_data %}
<tr>
<td>{{ row.Date1 }}</td>
<td>{{ row.day_name }}</td>
<td>{{ row.PNL }}</td>
<td>
{% if row.Return1 > 0 %}
<span class="material-icons" style="color:#2f8145;
font-size: 18px; margin-right: 8px">arrow_upward</span>
<span style="margin-right: 10px;">{{ row.Return1|
floatformat:2 }}%</span>
{% elif row.Return1 < 0 %}
<span class="material-icons" style="color:red;
font-size: 18px; margin-right: 8px">arrow_downward</span>
<span style="margin-right: 16px;">{{ row.Return1|
floatformat:2 }}%</span>
{% endif %}
</td>
<td>{{ row.max_runup }}</td>
<td>{{ row.min_runup }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- Add button to trigger CSV download -->
<button onclick="downloadCSV()">Download CSV</button>
</div>
</div>

======================================================================bar==========
==================================================================================
<div class="card" style="border-radius: 5px; overflow: hidden;">
<div>
<button onclick="filterData('1month')">1m</button>
<button onclick="filterData('3months')">3m</button>
<button onclick="filterData('6months')">6m</button>
<button onclick="filterData('1year')">1y</button>
<button onclick="filterData('max')">Max</button>
</div>
<canvas id="stackedBarChart"></canvas>

<script>
// Example Data
const labels = {{date_bar|safe}}; // Dates
const pnl = {{pnl_all|safe}}; // PnL values
const maxRunup = {{max_runup|safe}}; // Max Runup values
const minRunup = {{min_runup|safe}}; // Min Runup values

const originalData = {
labels: labels,
pnl: pnl,
maxRunup: maxRunup,
minRunup: minRunup
};

let filteredData = { ...originalData };

const ctx = document.getElementById('stackedBarChart').getContext('2d');

let chart = new Chart(ctx, {
type: 'bar',
data: {
labels: filteredData.labels,
datasets: [
{
label: 'PnL',
data: filteredData.pnl,
backgroundColor: 'rgb(255,219,99)',
},
{
label: 'Max Runup',
data: filteredData.maxRunup,
backgroundColor: 'rgba(7,147,46,0.95)',
},
{
label: 'Min Runup',
data: filteredData.minRunup,
backgroundColor: 'rgba(225,8,8,0.91)',
}
]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
tooltip: {
mode: 'index',
intersect: false,
 },
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
},
},
elements: {
bar: {
borderRadius: 5, // Apply border radius to the bars
}
}
}
});

function filterData(period) {
let startDate;
const currentDate = new Date();
switch (period) {
case '1month':
startDate = new
Date(currentDate.setMonth(currentDate.getMonth() - 1));
break;
case '3months':
startDate = new
Date(currentDate.setMonth(currentDate.getMonth() - 3));
break;
case '6months':
startDate = new
Date(currentDate.setMonth(currentDate.getMonth() - 6));
break;
case '1year':
startDate = new
Date(currentDate.setFullYear(currentDate.getFullYear() - 1));
break;
case 'max':
startDate = new Date(Math.min(...filteredData.labels.map(date
=> new Date(date))));
break;
default:
return;
}

const filteredLabels = [];

const filteredPnl = [];
const filteredMaxRunup = [];
const filteredMinRunup = [];

for (let i = 0; i < originalData.labels.length; i++) {

const date = new Date(originalData.labels[i]);
if (date >= startDate) {
filteredLabels.push(originalData.labels[i]);
filteredPnl.push(originalData.pnl[i]);
filteredMaxRunup.push(originalData.maxRunup[i]);
filteredMinRunup.push(originalData.minRunup[i]);
}
 }

filteredData = {
labels: filteredLabels,
pnl: filteredPnl,
maxRunup: filteredMaxRunup,
minRunup: filteredMinRunup
};

chart.data.labels = filteredData.labels;
chart.data.datasets[0].data = filteredData.pnl;
chart.data.datasets[1].data = filteredData.maxRunup;
chart.data.datasets[2].data = filteredData.minRunup;

chart.update();
}
</script>
</div>