ui fixes
This commit is contained in:
MuslemRahimi
parent
398ac94331
commit
dce96004d4
@ -40,21 +40,6 @@ function findIndex(data) {
|
||||
displayData = event.target.value;
|
||||
}
|
||||
|
||||
function normalizer(value) {
|
||||
if (Math?.abs(value) >= 1e18) {
|
||||
return { unit: "Q", denominator: 1e18 };
|
||||
} else if (Math?.abs(value) >= 1e12) {
|
||||
return { unit: "T", denominator: 1e12 };
|
||||
} else if (Math?.abs(value) >= 1e9) {
|
||||
return { unit: "B", denominator: 1e9 };
|
||||
} else if (Math?.abs(value) >= 1e6) {
|
||||
return { unit: "M", denominator: 1e6 };
|
||||
} else if (Math?.abs(value) >= 1e5) {
|
||||
return { unit: "K", denominator: 1e5 };
|
||||
} else {
|
||||
return { unit: "", denominator: 1 };
|
||||
}
|
||||
}
|
||||
|
||||
let tableDataActual = [];
|
||||
let tableDataForecast = [];
|
||||
@ -115,7 +100,6 @@ function findIndex(data) {
|
||||
}
|
||||
|
||||
// Normalize the data if needed (not required in this case, but leaving it here for reference)
|
||||
const { unit, denominator } = normalizer(Math.max(...valueList, ...avgList) ?? 0);
|
||||
|
||||
const option = {
|
||||
silent: true,
|
||||
@ -139,23 +123,18 @@ function findIndex(data) {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
color: "#fff", // Change label color to white
|
||||
formatter: function (value, index) {
|
||||
// Display every second tick
|
||||
if (index % 2 === 0) {
|
||||
return (value / denominator)?.toFixed(0) + unit; // Format value in millions
|
||||
} else {
|
||||
return ""; // Hide this tick
|
||||
}
|
||||
},
|
||||
},
|
||||
show: false // Hide y-axis labels
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "Actual",
|
||||
|
||||
@ -37,7 +37,6 @@
|
||||
let r2Score;
|
||||
let mape;
|
||||
let priceSentiment = 'n/a';
|
||||
let displayData = 'threeMonth';
|
||||
let lastPrice = 'n/a';
|
||||
let oneYearPricePrediction = 'n/a';
|
||||
let optionsData;
|
||||
@ -59,6 +58,10 @@ function getPlotOptions() {
|
||||
bottom: $screenWidth < 640 ? '0%' : '5%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
hideDelay: 100, // Set the delay in milliseconds
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
@ -75,17 +78,31 @@ function getPlotOptions() {
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
}
|
||||
},
|
||||
series: [
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
show: false // Hide y-axis labels
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Stock Price',
|
||||
data: historicalPrice,
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Upperband',
|
||||
data: upperBand,
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
@ -98,6 +115,7 @@ function getPlotOptions() {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Lowerband',
|
||||
data: lowerBand,
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
@ -121,15 +139,6 @@ function getPlotOptions() {
|
||||
}
|
||||
},
|
||||
*/
|
||||
{
|
||||
data: historicalPrice,
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
@ -249,10 +249,10 @@ changeTab(0)
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each (data?.user?.tier === 'Pro' ? historyList : historyList?.slice(0,3)) as item,index}
|
||||
<tr on:click={() => goto(`/analysts/${item?.analystId}`)} class="cursor-pointer {latestInfoDate(item?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'odd:bg-[#27272A]'} border-b-[#09090B] {index+1 === historyList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
|
||||
<tr class="{latestInfoDate(item?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'odd:bg-[#27272A]'} border-b-[#09090B] {index+1 === historyList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
|
||||
<td class="text-sm sm:text-[1rem] whitespace-nowrap text-start">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="text-blue-400">{item?.analyst_name} </span>
|
||||
<a href={`/analysts/${item?.analystId}`} class="sm:hover:text-white text-blue-400">{item?.analyst_name} </a>
|
||||
<span class="text-white">{item?.analyst?.length > 15 ? item?.analyst?.slice(0,15) + '...' : item?.analyst}</span>
|
||||
|
||||
<div class="flex flex-row items-center mt-1">
|
||||
|
||||
@ -1,12 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { displayCompanyName, numberOfUnreadNotification, stockTicker } from '$lib/store';
|
||||
import republicanBackground from "$lib/images/bg-republican.png";
|
||||
import democraticBackground from "$lib/images/bg-democratic.png";
|
||||
import otherBackground from "$lib/images/bg-other.png";
|
||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
||||
import { getPartyForPoliticians } from '$lib/utils';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
|
||||
export let data;
|
||||
@ -15,7 +10,6 @@
|
||||
let buySellRatio = 0;
|
||||
let partyRatio = 0
|
||||
let senateTradingList = [];
|
||||
let displayStructure = 'Card';
|
||||
let isLoaded = false;
|
||||
let images = {};
|
||||
|
||||
@ -28,49 +22,19 @@ function backToTop() {
|
||||
});
|
||||
}
|
||||
|
||||
function changeStructure() {
|
||||
if(displayStructure === 'Card') {
|
||||
displayStructure = 'Table';
|
||||
}
|
||||
else {
|
||||
displayStructure = 'Card';
|
||||
|
||||
|
||||
async function handleScroll() {
|
||||
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||
if (isBottom && senateTradingList?.length !== rawData?.length) {
|
||||
const nextIndex = senateTradingList?.length;
|
||||
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 50);
|
||||
senateTradingList = [...senateTradingList, ...filteredNewResults];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const district = {
|
||||
'Tommy_Tuberville': 'Alabama',
|
||||
'Sheldon_Whitehouse': 'Rhode Island',
|
||||
'Pat_Toomey': 'Pennsylvania',
|
||||
'Tom_Carper': 'Delaware',
|
||||
'Pat_Roberts': 'Kansas',
|
||||
'Markwayne_Mullin': 'Oklahoma',
|
||||
'Shelley_Capito': 'West Virginia',
|
||||
'Jerry_Moran': 'Kansas',
|
||||
'Dan_Sullivan': 'Alaska',
|
||||
'Ron_Wyden': 'Oregon',
|
||||
'John_Hickenlooper': 'Colorado',
|
||||
'David_Perdue': 'Georgia',
|
||||
'Kelly_Loeffler': 'Georgia',
|
||||
'Bill_Cassidy': 'Louisiana',
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function infiniteHandler({ detail: { loaded, complete } })
|
||||
{
|
||||
if (senateTradingList?.length === rawData?.length) {
|
||||
complete();
|
||||
} else {
|
||||
const nextIndex = senateTradingList?.length;
|
||||
const newArticles = rawData?.slice(nextIndex, nextIndex + 20);
|
||||
senateTradingList = [...senateTradingList, ...newArticles];
|
||||
loaded();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMount(async () => {
|
||||
|
||||
|
||||
@ -105,6 +69,12 @@ onMount(async () => {
|
||||
senateTradingList = rawData.slice(0, 20) ?? [];
|
||||
|
||||
isLoaded = true;
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -161,7 +131,7 @@ onMount(async () => {
|
||||
|
||||
{#if senateTradingList?.length !== 0}
|
||||
|
||||
<h3 class="text-white text-xl font-semibold pt-5">
|
||||
<h3 class="text-white text-xl font-semibold ">
|
||||
Congress Statistics
|
||||
</h3>
|
||||
<!--Start Widget-->
|
||||
@ -169,7 +139,7 @@ onMount(async () => {
|
||||
<div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
|
||||
|
||||
<!--Start Buy/Sell-->
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Buy/Sell</span>
|
||||
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
|
||||
@ -196,7 +166,7 @@ onMount(async () => {
|
||||
</div>
|
||||
<!--End Buy/Sell-->
|
||||
<!--Start Dem/Rep-->
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-lg h-20">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Dem/Rep</span>
|
||||
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
|
||||
@ -227,14 +197,6 @@ onMount(async () => {
|
||||
<!--End Widget-->
|
||||
|
||||
|
||||
<label on:click={changeStructure} class="sm:hidden w-24 sm:ml-3 mr-2 sm:mr-0 cursor-pointer bg-[#27272A] px-4 py-2 rounded-lg shadow-md">
|
||||
<span class="m-auto mr-0.5 text-white text-sm">
|
||||
Switch To: {displayStructure}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
|
||||
{#if displayStructure === 'Card'}
|
||||
<div class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll">
|
||||
<table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
|
||||
<thead>
|
||||
@ -253,7 +215,7 @@ onMount(async () => {
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each senateTradingList as item}
|
||||
<tr on:click={() => goto(`/politicians/${item?.id}`)} class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] cursor-pointer">
|
||||
<tr class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]">
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]">
|
||||
<div class="flex flex-row items-center">
|
||||
@ -262,7 +224,7 @@ onMount(async () => {
|
||||
<img style="clip-path: circle(50%);" class="avatar rounded-full w-7 sm:w-9" src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`} loading="lazy"/>
|
||||
</div>
|
||||
<div class="flex flex-col ml-3">
|
||||
<span class="">{item?.representative?.replace('_',' ')}</span>
|
||||
<a href={`/politicians/${item?.id}`} class="sm:hover:text-white text-blue-400">{item?.representative?.replace('_',' ')}</a>
|
||||
<span class="">{item?.party}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -294,95 +256,7 @@ onMount(async () => {
|
||||
|
||||
</div>
|
||||
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
|
||||
{:else}
|
||||
<div class="relative w-full mt-10">
|
||||
{#each senateTradingList as item}
|
||||
<div class="w-full bg-[#09090B] border border-slate-800 shadow-lg h-auto pb-4 pt-4 mb-7">
|
||||
<div class="flex flex-col relative ">
|
||||
{#if item?.party === 'Republican'}
|
||||
<img class="absolute -mt-4 w-full m-auto " src={republicanBackground} />
|
||||
{:else if item?.party === 'Democratic'}
|
||||
<img class="absolute -mt-4 w-[500px] m-auto " src={democraticBackground} />
|
||||
{:else}
|
||||
<img class="absolute -mt-4 w-[500px] m-auto " src={otherBackground} />
|
||||
{/if}
|
||||
<div class="flex flex-col justify-center items-center rounded-2xl ">
|
||||
|
||||
|
||||
<div class="-mt-3 shadow-lg rounded-full border border-slate-600 w-20 h-20 relative {item?.party === 'Republican' ? 'bg-[#98272B]' : item?.party === 'Democratic' ? 'bg-[#295AC7]' : 'bg-[#20202E]'} flex items-center justify-center">
|
||||
<img style="clip-path: circle(50%);" class="rounded-full w-16" src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`} loading="lazy"/>
|
||||
</div>
|
||||
<span class="text-white text-lg font-medium mt-2 mb-2">
|
||||
{item?.representative?.replace('_',' ')}
|
||||
</span>
|
||||
<span class="text-white text-md mb-8">
|
||||
{item?.party ?? 'n/a'} / {district[item?.representative] ?? 'n/a'}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center pr-4 pl-4">
|
||||
|
||||
<div class="flex flex-col justify-start items-start">
|
||||
<span class="font-medium text-white">Owner</span>
|
||||
<span class="text-white text-opacity-[0.8] text-sm text-end">
|
||||
{item?.owner?.length !== 0 ? item?.owner : '-'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-1 border-b border-slate-800 w-full mt-5 mb-5" />
|
||||
|
||||
<div class="flex flex-row items-center pr-4 pl-4">
|
||||
<div class="flex flex-col w-40">
|
||||
<span class="font-medium text-white">Transaction Date</span>
|
||||
<span class="text-slate-300 text-sm">
|
||||
{new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-end items-end ml-auto">
|
||||
<span class="font-medium text-white">Disclosure Date</span>
|
||||
<span class="text-white text-opacity-[0.8] text-sm text-end">
|
||||
{new Date(item?.disclosureDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-1 border-b border-slate-800 w-full mt-5 mb-5" />
|
||||
|
||||
<div class="flex flex-row items-center pr-4 pl-4">
|
||||
<div class="flex flex-col w-40">
|
||||
<span class="font-medium text-white">Amount</span>
|
||||
<span class="text-slate-300 text-sm font-medium">
|
||||
{item?.amount?.replace("$1,000,001 - $5,000,000","$1Mio - $5Mio")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-end items-end ml-auto">
|
||||
<span class="font-medium text-slate-300 text-ends">Type</span>
|
||||
<span class="text-white font-medium text-end">
|
||||
{#if item?.type === 'Bought'}
|
||||
<span class="text-[#37C97D]">Bought</span>
|
||||
{:else if item?.type === 'Sold'}
|
||||
<span class="text-[#FF2F1F]">Sold</span>
|
||||
{:else if item?.type === 'Exchange'}
|
||||
<span class="text-[#C6A755]">Exchange</span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{#if rawData?.length >= 20}
|
||||
<label on:click={backToTop} class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-slate-800 rounded-full">
|
||||
@ -390,9 +264,6 @@ onMount(async () => {
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
|
||||
{/if}
|
||||
|
||||
{:else}
|
||||
<h2 class="pl-4 pr-4 flex justify-center items-center text-md sm:text-lg text-center text-slate-200">
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
import { Chart } from 'svelte-echarts'
|
||||
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
|
||||
import { abbreviateNumber } from '$lib/utils';
|
||||
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
|
||||
import { Button } from "$lib/components/shadcn/button/index.js";
|
||||
//import * as XLSX from 'xlsx';
|
||||
import { init, use } from 'echarts/core'
|
||||
import { LineChart, BarChart } from 'echarts/charts'
|
||||
@ -126,7 +128,6 @@ const statementConfig = [
|
||||
];
|
||||
|
||||
|
||||
let namingList = statementConfig?.map(config => config?.propertyName) || [];
|
||||
|
||||
function toggleMode()
|
||||
{
|
||||
@ -204,21 +205,16 @@ function plotData()
|
||||
type: 'category',
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
color: '#fff', // Change label color to white
|
||||
show: false // Hide y-axis labels
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false, // Disable x-axis grid lines
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
@ -237,53 +233,7 @@ function plotData()
|
||||
return options;
|
||||
}
|
||||
|
||||
/*
|
||||
const exportData = (format = 'csv') => {
|
||||
const data = fullStatement;
|
||||
if (!data || data.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let properties = [
|
||||
{ key: "calendarYear", label: "Year" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < statementConfig?.length; i++) {
|
||||
properties.push({ key: statementConfig[i]?.propertyName, label: statementConfig[i]?.label })
|
||||
}
|
||||
|
||||
// Helper function to handle special cases
|
||||
|
||||
|
||||
// Create rows for CSV/Excel
|
||||
let rows = data.map(item => properties?.map(property => item[property?.key] || 0));
|
||||
|
||||
// Include headers
|
||||
const headers = properties.map(prop => prop.label);
|
||||
rows.unshift(headers);
|
||||
|
||||
|
||||
// Check the format to export
|
||||
if (format.toLowerCase() === 'csv') {
|
||||
const csvContent = rows.map(row => row.join(",")).join("\n");
|
||||
const blob = new Blob([csvContent], { type: "data:text/csv;charset=utf-8" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = $stockTicker.toLowerCase() + "-ratios-statement.csv";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
} else if (format.toLowerCase() === 'excel') {
|
||||
const worksheet = XLSX.utils.aoa_to_sheet(rows);
|
||||
const workbook = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Ratios Statement");
|
||||
XLSX.writeFile(workbook, `${$stockTicker.toLowerCase()}-ratios-statement.xlsx`);
|
||||
}
|
||||
};
|
||||
|
||||
*/
|
||||
|
||||
|
||||
fullStatement = data?.getRatiosStatement;
|
||||
@ -404,12 +354,42 @@ $: {
|
||||
</label>
|
||||
|
||||
|
||||
<label for="timeFrameModal" class="cursor-pointer bg-[#27272A] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
|
||||
<div class="flex flex-row items-center">
|
||||
<span class="m-auto mr-0.5 text-white text-sm">{timeFrame}</span>
|
||||
<svg class="inline-block w-4 h-4 ml-1 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g transform="rotate(180 512 512)"> <path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/></g></svg>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
|
||||
<div class="flex w-full sm:w-[50%] md:block md:w-auto sm:ml-auto">
|
||||
<div class="relative inline-block text-left grow">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button builders={[builder]} class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate">
|
||||
<span class="truncate text-white">{timeFrame}</span>
|
||||
<svg class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="w-56 h-fit max-h-72 overflow-y-auto scroller">
|
||||
<DropdownMenu.Label class="text-gray-400">
|
||||
Select time frame
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item on:click={() => timeFrame = '5Y'} class="cursor-pointer hover:bg-[#27272A]">
|
||||
5 years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item on:click={() => timeFrame = '10Y'} class="cursor-pointer hover:bg-[#27272A]">
|
||||
10 years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item on:click={() => timeFrame = 'MAX'} class="cursor-pointer hover:bg-[#27272A]">
|
||||
Max
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
@ -713,173 +693,8 @@ $: {
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Start TimeFrame-->
|
||||
<input type="checkbox" id="timeFrameModal" class="modal-toggle" />
|
||||
|
||||
<dialog id="timeFrameModal" class="modal modal-bottom sm:modal-middle ">
|
||||
|
||||
|
||||
<label id="timeFrameModal" for="timeFrameModal" class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
|
||||
|
||||
|
||||
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
|
||||
|
||||
|
||||
|
||||
<label for="timeFrameModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
|
||||
✕
|
||||
</label>
|
||||
|
||||
<div class="text-white">
|
||||
|
||||
<h3 class="font-medium text-lg sm:text-xl mb-10">
|
||||
Time Frame
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="flex flex-col items-center w-full Max-w-3xl bg-[#09090B]">
|
||||
|
||||
|
||||
<label for="timeFrameModal" on:click={() => timeFrame= '5Y'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timeFrame === '5Y' ? 'ring-2 ring-[#04E000]' : ''}">
|
||||
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
5 years
|
||||
</span>
|
||||
|
||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||
{#if timeFrame === '5Y'}
|
||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
|
||||
<label for="timeFrameModal" on:click={() => timeFrame='10Y'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timeFrame === '10Y' ? 'ring-2 ring-[#04E000]' : ''}">
|
||||
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
10 years
|
||||
</span>
|
||||
|
||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||
{#if timeFrame === '10Y'}
|
||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
<label for="timeFrameModal" on:click={() => timeFrame='Max'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {timeFrame === 'Max' ? 'ring-2 ring-[#04E000]' : ''}">
|
||||
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
Max
|
||||
</span>
|
||||
|
||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
||||
{#if timeFrame === 'Max'}
|
||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</dialog>
|
||||
<!--End TimeFrame-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Start Export -->
|
||||
<!--
|
||||
<input type="checkbox" id="exportDataModal" class="modal-toggle" />
|
||||
|
||||
<dialog id="exportDataModal" class="modal modal-bottom sm:modal-middle ">
|
||||
|
||||
|
||||
<label id="exportDataModal" for="exportDataModal" class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
|
||||
|
||||
|
||||
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
|
||||
|
||||
|
||||
|
||||
<label for="exportDataModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
|
||||
✕
|
||||
</label>
|
||||
|
||||
<div class="text-white">
|
||||
|
||||
<h3 class="font-medium text-lg sm:text-xl mb-10">
|
||||
Export
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="flex flex-col items-center w-full Max-w-3xl bg-[#09090B]">
|
||||
|
||||
|
||||
<label for="exportDataModal" on:click={() => exportData('excel')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg">
|
||||
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
Export to Excel
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
|
||||
<label for="exportDataModal" on:click={() => exportData('csv')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
||||
|
||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg">
|
||||
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
Export to CSV
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</label>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</dialog>
|
||||
-->
|
||||
<!--End Export-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.app {
|
||||
height: 400px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user