AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-13 14:01:33 +02:00
parent 99cf78c22d
commit 2e04240ef2
4 changed files with 143 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
View File

@ -578,54 +578,54 @@ $: {
<div class="w-full overflow-x-scroll"> <div class="w-full overflow-x-scroll">
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 "> <table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead> <thead>
<tr class="border border-slate-800"> <tr class="border border-slate-800">
<th class="text-white font-semibold text-start text-sm sm:text-[1rem]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th> <th class="text-white font-semibold text-start text-sm sm:text-[1rem]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th>
<th class="text-white font-semibold text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th> <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th>
<th class="text-white font-semibold text-center text-sm sm:text-[1rem]">Change</th> <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Change</th>
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th> <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each tableList as item, index} {#each tableList as item, index}
<!-- row --> <!-- row -->
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"> <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.date} {item?.date}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]">
{abbreviateNumber(item?.value)} {abbreviateNumber(item?.value)}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'} {item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{#if index+1-tableList?.length === 0} {#if index+1-tableList?.length === 0}
- -
{:else} {:else}
{#if (item?.value- tableList[index+1]?.value) > 0} {#if (item?.value- tableList[index+1]?.value) > 0}
<span class="text-[#10DB06]"> <span class="text-[#10DB06]">
+{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}% +{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
</span> </span>
{:else if (item?.value - tableList[index+1]?.value ) < 0} {:else if (item?.value - tableList[index+1]?.value ) < 0}
<span class="text-[#FF2F1F]"> <span class="text-[#FF2F1F]">
-{(((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}% -{(((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
</span> </span>
{:else} {:else}
- -
{/if} {/if}
{/if} {/if}
</td> </td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div> </div>

86
src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
View File

@ -533,56 +533,54 @@ $: {
<div class="w-full overflow-x-scroll"> <div class="w-full overflow-x-scroll">
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 "> <table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead> <thead>
<tr class="border border-slate-800"> <tr class="border border-slate-800">
<th class="text-white font-semibold text-start text-sm sm:text-[1rem]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th> <th class="text-white font-semibold text-start text-sm sm:text-[1rem]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th>
<th class="text-white font-semibold text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th> <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th>
<th class="text-white font-semibold text-center text-sm sm:text-[1rem]">Change</th> <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Change</th>
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th> <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each tableList as item, index} {#each tableList as item, index}
<!-- row --> <!-- row -->
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"> <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.date} {item?.date}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]">
{abbreviateNumber(item?.value)} {abbreviateNumber(item?.value)}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'} {item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{#if index+1-tableList?.length === 0} {#if index+1-tableList?.length === 0}
- -
{:else} {:else}
{#if (item?.value- tableList[index+1]?.value) > 0} {#if (item?.value- tableList[index+1]?.value) > 0}
<span class="text-[#10DB06]"> <span class="text-[#10DB06]">
+{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}% +{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
</span> </span>
{:else if (item?.value - tableList[index+1]?.value ) < 0} {:else if (item?.value - tableList[index+1]?.value ) < 0}
<span class="text-[#FF2F1F]"> <span class="text-[#FF2F1F]">
-{(((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}% -{(((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
</span> </span>
{:else} {:else}
- -
{/if} {/if}
{/if} {/if}
</td> </td>
</tr>
{/each}
</tbody>
</table>
</tr>
{/each}
</tbody>
</table>
</div> </div>
{:else} {:else}

8
src/routes/stocks/[tickerID]/stats/income/+page.svelte
View File

@ -516,8 +516,8 @@ const exportData = (format = 'csv') => {
<thead> <thead>
<tr class="border border-slate-800"> <tr class="border border-slate-800">
<th class="text-white font-semibold text-start text-sm sm:text-[1rem]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th> <th class="text-white font-semibold text-start text-sm sm:text-[1rem]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th>
<th class="text-white font-semibold text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th> <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th>
<th class="text-white font-semibold text-center text-sm sm:text-[1rem]">Change</th> <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Change</th>
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th> <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th>
</tr> </tr>
</thead> </thead>
@ -530,11 +530,11 @@ const exportData = (format = 'csv') => {
{item?.date} {item?.date}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]">
{abbreviateNumber(item?.value)} {abbreviateNumber(item?.value)}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'} {item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
</td> </td>

86
src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
View File

@ -469,56 +469,54 @@ $: {
<div class="w-full overflow-x-scroll"> <div class="w-full overflow-x-scroll">
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 "> <table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
<thead> <thead>
<tr class="border border-slate-800"> <tr class="border border-slate-800">
<th class="text-white font-semibold text-start text-sm sm:text-[1rem]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th> <th class="text-white font-semibold text-start text-sm sm:text-[1rem]">{filterRule === 'annual' ? 'Fiscal Year End' : 'Quarter Ends'}</th>
<th class="text-white font-semibold text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th> <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">{statementConfig?.find((item) => item?.propertyName === displayStatement)?.label}</th>
<th class="text-white font-semibold text-center text-sm sm:text-[1rem]">Change</th> <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Change</th>
<th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th> <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Growth</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each tableList as item, index} {#each tableList as item, index}
<!-- row --> <!-- row -->
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"> <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
{item?.date} {item?.date}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]">
{abbreviateNumber(item?.value)} {abbreviateNumber(item?.value)}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-center border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'} {item?.value-tableList[index+1]?.value !== 0 ? abbreviateNumber((item?.value-tableList[index+1]?.value)?.toFixed(2)) : '-'}
</td> </td>
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"> <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
{#if index+1-tableList?.length === 0} {#if index+1-tableList?.length === 0}
- -
{:else} {:else}
{#if (item?.value- tableList[index+1]?.value) > 0} {#if (item?.value- tableList[index+1]?.value) > 0}
<span class="text-[#10DB06]"> <span class="text-[#10DB06]">
+{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}% +{(((item?.value-tableList[index+1]?.value) / item?.value) * 100 )?.toFixed(2)}%
</span> </span>
{:else if (item?.value - tableList[index+1]?.value ) < 0} {:else if (item?.value - tableList[index+1]?.value ) < 0}
<span class="text-[#FF2F1F]"> <span class="text-[#FF2F1F]">
-{(((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}% -{(((tableList[index+1]?.value - item?.value) / item?.value) * 100 )?.toFixed(2)}%
</span> </span>
{:else} {:else}
- -
{/if} {/if}
{/if} {/if}
</td> </td>
</tr>
{/each}
</tbody>
</table>
</tr>
{/each}
</tbody>
</table>
</div> </div>
{:else} {:else}