<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/[Link]" alt="Portfolio Logo"
style="height: 10px;" onclick="openSelectMenu();" />
<select id="filter-select" id="time-period"
onchange="fetchData([Link]); 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 = [Link]("filter-select");
if ([Link] === "none" ||
[Link] === "") {
[Link] = "block";
} else {
[Link] = "none";
}
[Link]();
}

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

function downloadCSV() {
var table = [Link]("data-table");
var rows = [Link]("tr");
var csv = [];

// Loop through each row in the table

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

// Loop through each column in the row

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

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

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

[Link](cellData);
}

[Link]([Link](","));
}

// Convert CSV array to a string

 var csvString = [Link]("\n");

// Create a temporary link to trigger the download

var link = [Link]('a');
[Link] = 'data:text/csv;charset=utf-8,' +
encodeURI(csvString);
[Link] = '_blank';
[Link] = 'daily_pnl.csv'; // Name of the file to be
downloaded
[Link]();
}
</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>{{ [Link] }}</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 = [Link]('stackedBarChart').getContext('2d');

let chart = new Chart(ctx, {
type: 'bar',
data: {
labels: [Link],
datasets: [
{
label: 'PnL',
data: [Link],
backgroundColor: 'rgb(255,219,99)',
},
{
label: 'Max Runup',
data: [Link],
backgroundColor: 'rgba(7,147,46,0.95)',
},
{
label: 'Min Runup',
data: [Link],
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([Link]([Link]() - 1));
break;
case '3months':
startDate = new
Date([Link]([Link]() - 3));
break;
case '6months':
startDate = new
Date([Link]([Link]() - 6));
break;
case '1year':
startDate = new
Date([Link]([Link]() - 1));
break;
case 'max':
startDate = new Date([Link](...[Link](date
=> new Date(date))));
break;
default:
return;
}

const filteredLabels = [];

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

for (let i = 0; i < [Link]; i++) {

const date = new Date([Link][i]);
if (date >= startDate) {
[Link]([Link][i]);
[Link]([Link][i]);
[Link]([Link][i]);
[Link]([Link][i]);
}
 }

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

[Link] = [Link];
[Link][0].data = [Link];
[Link][1].data = [Link];
[Link][2].data = [Link];

[Link]();
}
</script>
</div>