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

make table sortable for industry page

Browse Source
This commit is contained in:
MuslemRahimi 2024-11-07 19:32:03 +01:00
parent 9f349627b3
commit 990c818727
6 changed files with 135 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/lib/components/SectorSegmentation.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { etfTicker, screenWidth } from "$lib/store";
import { formatString } from "$lib/utils";
import { etfTicker } from "$lib/store";
import { formatString, sectorNavigation } from "$lib/utils";
import { goto } from "$app/navigation";
import InfoModal from "$lib/components/InfoModal.svelte";
@ -8,57 +8,6 @@
let showFullStats = false;
const sectorNavigation = [
{
title: "Financial Services",
link: "/list/sector/financial",
},
{
title: "Finance",
link: "/list/sector/financial",
},
{
title: "Healthcare",
link: "/list/sector/healthcare",
},
{
title: "Technology",
link: "/list/sector/technology",
},
{
title: "Industrials",
link: "/list/sector/industrials",
},
{
title: "Energy",
link: "/list/sector/energy",
},
{
title: "Utilities",
link: "/list/sector/utilities",
},
{
title: "Consumer Cyclical",
link: "/list/sector/consumer-cyclical",
},
{
title: "Real Estate",
link: "/list/sector/real-estate",
},
{
title: "Basic Materials",
link: "/list/sector/basic-materials",
},
{
title: "Communication Services",
link: "/list/sector/communication-services",
},
{
title: "Consumer Defensive",
link: "/list/sector/consumer-defensive",
},
];
function sectorSelector(sector) {
const selectedSector = sectorNavigation?.find(
(item) => item?.title === sector,

55
src/lib/components/Sidecard.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import { stockTicker, screenWidth } from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import { stockTicker } from "$lib/store";
import { sectorNavigation } from "$lib/utils";
export let data;
let info;
@ -24,57 +24,6 @@
let showFullText = false;
const sectorNavigation = [
{
title: "Financial Services",
link: "/list/sector/financial",
},
{
title: "Finance",
link: "/list/sector/financial",
},
{
title: "Healthcare",
link: "/list/sector/healthcare",
},
{
title: "Technology",
link: "/list/sector/technology",
},
{
title: "Industrials",
link: "/list/sector/industrials",
},
{
title: "Energy",
link: "/list/sector/energy",
},
{
title: "Utilities",
link: "/list/sector/utilities",
},
{
title: "Consumer Cyclical",
link: "/list/sector/consumer-cyclical",
},
{
title: "Real Estate",
link: "/list/sector/real-estate",
},
{
title: "Basic Materials",
link: "/list/sector/basic-materials",
},
{
title: "Communication Services",
link: "/list/sector/communication-services",
},
{
title: "Consumer Defensive",
link: "/list/sector/consumer-defensive",
},
];
function getIndustryHref(industryName) {
// Replace spaces with hyphens
let formattedName = industryName?.replace(/ /g, "-");

51
src/lib/utils.ts
View File

@ -1321,3 +1321,54 @@ export const getLastTradingDay = () => {
nyDate.setDate(nyDate.getDate() - 1);
}
};
export const sectorNavigation = [
{
title: "Financial Services",
link: "/list/sector/financial",
},
{
title: "Finance",
link: "/list/sector/financial",
},
{
title: "Healthcare",
link: "/list/sector/healthcare",
},
{
title: "Technology",
link: "/list/sector/technology",
},
{
title: "Industrials",
link: "/list/sector/industrials",
},
{
title: "Energy",
link: "/list/sector/energy",
},
{
title: "Utilities",
link: "/list/sector/utilities",
},
{
title: "Consumer Cyclical",
link: "/list/sector/consumer-cyclical",
},
{
title: "Real Estate",
link: "/list/sector/real-estate",
},
{
title: "Basic Materials",
link: "/list/sector/basic-materials",
},
{
title: "Communication Services",
link: "/list/sector/communication-services",
},
{
title: "Consumer Defensive",
link: "/list/sector/consumer-defensive",
},
];

54
src/routes/industry/+page.svelte
View File

@ -1,63 +1,11 @@
<script lang="ts">
import { screenWidth } from "$lib/store";
import IndustryTable from "$lib/components/IndustryTable.svelte";
import { industryList, sectorList } from "$lib/utils";
import { goto } from "$app/navigation";
import { industryList, sectorList, sectorNavigation } from "$lib/utils";
export let data;
let rawData = data?.getSectorIndustryOverview;
const sectorNavigation = [
{
title: "Financial Services",
link: "/list/sector/financial",
},
{
title: "Finance",
link: "/list/sector/financial",
},
{
title: "Healthcare",
link: "/list/sector/healthcare",
},
{
title: "Technology",
link: "/list/sector/technology",
},
{
title: "Industrials",
link: "/list/sector/industrials",
},
{
title: "Energy",
link: "/list/sector/energy",
},
{
title: "Utilities",
link: "/list/sector/utilities",
},
{
title: "Consumer Cyclical",
link: "/list/sector/consumer-cyclical",
},
{
title: "Real Estate",
link: "/list/sector/real-estate",
},
{
title: "Basic Materials",
link: "/list/sector/basic-materials",
},
{
title: "Communication Services",
link: "/list/sector/communication-services",
},
{
title: "Consumer Defensive",
link: "/list/sector/consumer-defensive",
},
];
$: charNumber = $screenWidth < 640 ? 20 : 30;
</script>

54
src/routes/industry/sectors/+page.svelte
View File

@ -1,62 +1,10 @@
<script lang="ts">
import { screenWidth } from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import { goto } from "$app/navigation";
import { abbreviateNumber, sectorNavigation } from "$lib/utils";
export let data;
let rawData = data?.getSectorOverview;
const sectorNavigation = [
{
title: "Financial Services",
link: "/list/sector/financial",
},
{
title: "Finance",
link: "/list/sector/financial",
},
{
title: "Healthcare",
link: "/list/sector/healthcare",
},
{
title: "Technology",
link: "/list/sector/technology",
},
{
title: "Industrials",
link: "/list/sector/industrials",
},
{
title: "Energy",
link: "/list/sector/energy",
},
{
title: "Utilities",
link: "/list/sector/utilities",
},
{
title: "Consumer Cyclical",
link: "/list/sector/consumer-cyclical",
},
{
title: "Real Estate",
link: "/list/sector/real-estate",
},
{
title: "Basic Materials",
link: "/list/sector/basic-materials",
},
{
title: "Communication Services",
link: "/list/sector/communication-services",
},
{
title: "Consumer Defensive",
link: "/list/sector/consumer-defensive",
},
];
$: charNumber = $screenWidth < 640 ? 20 : 30;
</script>

117
src/routes/list/industry/[slug]/+page.svelte
View File

@ -1,8 +1,10 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { screenWidth } from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import { onMount } from "svelte";
import TableHeader from "$lib/components/Table/TableHeader.svelte";
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
import { Chart } from "svelte-echarts";
import { init, use } from "echarts/core";
@ -139,6 +141,79 @@
});
$: charNumber = $screenWidth < 640 ? 15 : 20;
let columns = [
{ key: "symbol", label: "Symbol", align: "left" },
{ key: "name", label: "Name", align: "left" },
{ key: "marketCap", label: "Market Cap", align: "right" },
{ key: "changesPercentage", label: "% Change", align: "right" },
{ key: "volume", label: "Volume", align: "right" },
{ key: "revenue", label: "Revenue", align: "right" },
];
let sortOrders = {
symbol: { order: "none", type: "string" },
name: { order: "none", type: "string" },
marketCap: { order: "none", type: "number" },
changesPercentage: { order: "none", type: "number" },
volume: { order: "none", type: "number" },
revenue: { order: "none", type: "number" },
};
const sortData = (key) => {
// Reset all other keys to 'none' except the current key
for (const k in sortOrders) {
if (k !== key) {
sortOrders[k].order = "none";
}
}
const originalData = rawData;
// Cycle through 'none', 'asc', 'desc' for the clicked key
const orderCycle = ["none", "asc", "desc"];
const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
sortOrders[key].order =
orderCycle[(currentOrderIndex + 1) % orderCycle.length];
const sortOrder = sortOrders[key].order;
// Reset to original data when 'none' and stop further sorting
if (sortOrder === "none") {
stockList = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
return;
}
// Define a generic comparison function
const compareValues = (a, b) => {
const { type } = sortOrders[key];
let valueA, valueB;
switch (type) {
case "date":
valueA = new Date(a[key]);
valueB = new Date(b[key]);
break;
case "string":
valueA = a[key].toUpperCase();
valueB = b[key].toUpperCase();
return sortOrder === "asc"
? valueA.localeCompare(valueB)
: valueB.localeCompare(valueA);
case "number":
default:
valueA = parseFloat(a[key]);
valueB = parseFloat(b[key]);
break;
}
if (sortOrder === "asc") {
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
} else {
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
}
};
// Sort using the generic comparison function
stockList = [...originalData].sort(compareValues)?.slice(0, 50);
};
</script>
<section class="w-full overflow-hidden m-auto">
@ -190,38 +265,7 @@
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
>
<thead>
<tr class="bg-[#09090B]">
<th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Symbol
</th>
<th
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
>
Name
</th>
<th
class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"
>
Market Cap
</th>
<th
class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"
>
% Change
</th>
<th
class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"
>
Volume
</th>
<th
class="hidden xl:table-cell text-end bg-[#09090B] text-white text-[1rem] font-semibold"
>
Revenue
</th>
</tr>
<TableHeader {columns} {sortOrders} {sortData} />
</thead>
<tbody>
{#each stockList as item}
@ -229,12 +273,7 @@
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"
>
<td class="text-sm sm:text-[1rem] whitespace-nowrap text-start">
<a
href={`/stocks/${item?.symbol}`}
class="sm:hover:text-white text-blue-400"
>
{item?.symbol}
</a>
<HoverStockChart symbol={item?.symbol} />
</td>
<td