Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance Telemetria page: add currency formatting helpers and improve CSV download functionality

Browse Source
This commit is contained in:
Giuliano Paschoalino 2025-10-31 15:01:12 -03:00
parent 873d84ede0
commit de7388b205
2 changed files with 52 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/sidebar/SidebarView.ts
View File

@ -245,13 +245,14 @@ export const ModalContainer = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 2em;
flex-direction: column; flex-direction: column;
article { article {
display: flex; display: flex;
justify-content: space-around; justify-content: center;
align-items: center; gap: 10px;
margin-top: 20px;
width: 50%; width: 50%;

90
src/pages/telemetria/index.tsx
View File

@ -85,8 +85,23 @@ export default function Telemetria({ userName, clients }: any) {
setOpenSnackFields(false) setOpenSnackFields(false)
} }
// Helpers
const currencyBRL = (v: any) =>
Number(v ?? 0)
.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
.replace(/\u00A0/g, ' '); // remove NBSP
const numberBR = (v: any, min = 2, max = 2) =>
Number(v ?? 0).toLocaleString('pt-BR', {
minimumFractionDigits: min,
maximumFractionDigits: max
});
function downloadCSVFile(csv, filename) { function downloadCSVFile(csv, filename) {
const csv_file = new Blob([csv], { type: 'text/csv;charset=utf-8' }) const BOM = '\uFEFF'; // Excel-friendly UTF-8 BOM
const csv_file = new Blob([BOM, csv.replace(/\u00A0/g, ' ')], {
type: 'text/csv;charset=utf-8;'
})
const download_link = document.createElement('a') const download_link = document.createElement('a')
@ -102,21 +117,23 @@ export default function Telemetria({ userName, clients }: any) {
} }
function htmlToCSV(filename) { function htmlToCSV(filename) {
const data = [] const data = [];
const rows = document.querySelectorAll('table tr') const rows = document.querySelectorAll('table tr');
for (let i = 0; i < rows.length; i++) { for (let i = 0; i < rows.length; i++) {
const row = [], const row = [],
cols: any = rows[i].querySelectorAll('td, th') cols: any = rows[i].querySelectorAll('td, th');
for (let j = 0; j < cols.length; j++) { for (let j = 0; j < cols.length; j++) {
row.push(cols[j].innerText) row.push(
cols[j].innerText.replace(/\u00A0/g, ' ') // sanitize NBSP
);
} }
data.push(row.join(';')) data.push(row.join(';'));
} }
downloadCSVFile(data.join('\n'), filename) downloadCSVFile(data.join('\n'), filename);
} }
const [tableData, setTableData] = useState(null) const [tableData, setTableData] = useState(null)
@ -170,6 +187,7 @@ export default function Telemetria({ userName, clients }: any) {
.catch(() => { .catch(() => {
setSend(false) setSend(false)
setOpenSnackFields(true) setOpenSnackFields(true)
setLoader(false) // ensure the overlay doesn’t hide the table
}) })
getDemand(unity, startDate, endDate, discretization) getDemand(unity, startDate, endDate, discretization)
@ -805,41 +823,29 @@ export default function Telemetria({ userName, clients }: any) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{fatorPotenciaData !== null {Array.isArray(fatorPotenciaData) && fatorPotenciaData.length > 0 ? (
? fatorPotenciaData?.map((value, index) => { fatorPotenciaData.map((value, index) => (
return ( <tr key={index}>
<tr key={index}> <td className="tg-gceh">{unity}</td>
<td className="tg-gceh">{unity}</td> <td className="tg-gceh">{value?.ponto}</td>
<td className="tg-gceh">{value?.ponto}</td> <td className="tg-gceh">{Number(value?.dia_num)}</td>
<td className="tg-gceh"> <td className="tg-uulg">{value?.day_formatted}</td>
{parseFloat(value?.dia_num)} <td className="tg-gceh">{value?.hora}</td>
</td> <td className="tg-gceh">{value?.minut}</td>
<td className="tg-uulg">{value?.day_formatted}</td> <td className="tg-gceh">{numberBR(value?.f_ref, 2, 2)}</td>
<td className="tg-gceh">{value?.hora}</td> <td className="tg-uulg">{numberBR(value?.consumo, 2, 5)}</td>
<td className="tg-gceh">{value.minut}</td> <td className="tg-gceh">{numberBR(value?.reativa, 2, 5)}</td>
<td className="tg-gceh">{value?.f_ref}</td> <td className="tg-gceh">{numberBR(value?.fp, 0, 5)}</td>
<td className="tg-uulg"> <td className="tg-gceh">{numberBR(value?.dem_cont, 0, 0)}</td>
{parseFloat(value?.consumo).toLocaleString('pt-br', { <td className="tg-gceh">{numberBR(value?.dem_reg, 0, 0)}</td>
style: 'currency', <td className="tg-gceh">{numberBR(value?.dem_tolerancia, 0, 0)}</td>
currency: 'BRL', </tr>
minimumFractionDigits: 2 ))
})} ) : (
</td> <tr>
<td className="tg-gceh"> <td className="tg-gceh" colSpan={13}>Sem dados no período selecionado.</td>
{parseFloat(value?.reativa).toLocaleString('pt-br', { </tr>
style: 'currency', )}
currency: 'BRL',
minimumFractionDigits: 2
})}
</td>
<td className="tg-gceh">{parseFloat(value?.fp)}</td>
<td className="tg-gceh">{value?.dem_cont}</td>
<td className="tg-gceh">{value?.dem_reg}</td>
<td className="tg-gceh">{value?.dem_tolerancia}</td>
</tr>
)
})
: null}
</tbody> </tbody>
</table> </table>