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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-12-07 23:15:01 +01:00
parent 8ebdf11682
commit 32a2518518
12 changed files with 165 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/lib/components/RatingsChart.svelte
View File

@ -3,6 +3,7 @@
import { setCache, getCache } from "$lib/store";
import { init, use } from "echarts/core";
import { LineChart, BarChart } from "echarts/charts";
import { monthNames } from "$lib/utils";
import {
GridComponent,
TooltipComponent,
@ -92,21 +93,6 @@
optionsData = plotData();
}
const monthNames = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
// Function to plot data based on a specified time period
function plotData() {
// Extract the time (x-axis) and close values (y-axis)
@ -237,6 +223,12 @@
tooltip: {
trigger: "axis",
hideDelay: 100,
borderColor: "#969696", // Black border color
borderWidth: 1, // Border width of 1px
backgroundColor: "#313131", // Optional: Set background color for contrast
textStyle: {
color: "#fff", // Optional: Text color for better visibility
},
formatter: function (params) {
const date = params[0].name; // Get the date from the x-axis value
const dateParts = date.split("-");

29
src/routes/etf/[tickerID]/dividends/+page.svelte
View File

@ -5,7 +5,7 @@
etfTicker,
} from "$lib/store";
import { onMount } from "svelte";
import { monthNames } from "$lib/utils";
import { Chart } from "svelte-echarts";
import { init, use } from "echarts/core";
import { LineChart, BarChart } from "echarts/charts";
@ -30,7 +30,7 @@
// Combine the data into an array of objects to keep them linked
const combinedData = rawData?.history?.map((item) => ({
date: item?.paymentDate,
dividend: item?.adjDividend?.toFixed(2),
dividend: item?.adjDividend?.toFixed(3),
}));
// Sort the combined data array based on the date
@ -41,10 +41,6 @@
const dividendList = combinedData.map((item) => item.dividend);
const options = {
tooltip: {
trigger: "axis",
hideDelay: 100, // Set the delay in milliseconds
},
animation: false,
grid: {
left: "3%",
@ -86,6 +82,27 @@
},
},
],
tooltip: {
trigger: "axis",
hideDelay: 100,
borderColor: "#969696", // Black border color
borderWidth: 1, // Border width of 1px
backgroundColor: "#313131", // Optional: Set background color for contrast
textStyle: {
color: "#fff", // Optional: Text color for better visibility
},
formatter: function (params) {
const date = params[0].name; // Get the date from the x-axis value
const dateParts = date.split("-");
const year = dateParts[0];
const monthIndex = parseInt(dateParts[1]) - 1;
const day = dateParts[2];
const formattedDate = `${monthNames[monthIndex]} ${day}, ${year}`;
// Return the tooltip content
return `${formattedDate}<br/> Dividend Per Share: ${params[0].value}`;
},
},
};
return options;

4
src/routes/politicians/[slug]/+page.svelte
View File

@ -393,9 +393,9 @@
>
<span class="font-semibold">
{#if item?.type === "Bought"}
<span class="text-[#57D7BA]">Purchase</span>
<span class="text-[#00FC50]">{item?.type}</span>
{:else if item?.type === "Sold"}
<span class="text-[#fe5555]">Sale</span>
<span class="text-[#FF2F1F]">{item?.type}</span>
{:else if item?.type === "Exchange"}
<span class="text-[#C6A755]">Exchange</span>
{/if}

3
src/routes/politicians/flow-data/+page.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts">
import { formatString } from "$lib/utils";
import { getPartyForPoliticians } from "$lib/utils";
import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import { onMount } from "svelte";
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
@ -175,7 +174,7 @@
<th
class="{index % 2
? 'bg-[#09090B]'
: 'bg-primary'} text-white text-sm sm:text-[1rem] whitespace-nowrap"
: 'bg-secondary'} text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
<div class="flex flex-row items-center">
<div

31
src/routes/stocks/[tickerID]/dividends/+page.svelte
View File

@ -5,7 +5,7 @@
stockTicker,
} from "$lib/store";
import { onMount } from "svelte";
import { monthNames } from "$lib/utils";
import { Chart } from "svelte-echarts";
import { init, use } from "echarts/core";
import { LineChart, BarChart } from "echarts/charts";
@ -30,7 +30,7 @@
// Combine the data into an array of objects to keep them linked
const combinedData = rawData?.history?.map((item) => ({
date: item?.paymentDate,
dividend: item?.adjDividend?.toFixed(2),
dividend: item?.adjDividend?.toFixed(3),
}));
// Sort the combined data array based on the date
@ -38,13 +38,9 @@
// Separate the sorted data back into individual arrays
const dates = combinedData.map((item) => item.date);
const dividendList = combinedData.map((item) => item.dividend);
const dividendList = combinedData?.map((item) => item.dividend);
const options = {
tooltip: {
trigger: "axis",
hideDelay: 100, // Set the delay in milliseconds
},
animation: false,
grid: {
left: "3%",
@ -86,6 +82,27 @@
},
},
],
tooltip: {
trigger: "axis",
hideDelay: 100,
borderColor: "#969696", // Black border color
borderWidth: 1, // Border width of 1px
backgroundColor: "#313131", // Optional: Set background color for contrast
textStyle: {
color: "#fff", // Optional: Text color for better visibility
},
formatter: function (params) {
const date = params[0].name; // Get the date from the x-axis value
const dateParts = date.split("-");
const year = dateParts[0];
const monthIndex = parseInt(dateParts[1]) - 1;
const day = dateParts[2];
const formattedDate = `${monthNames[monthIndex]} ${day}, ${year}`;
// Return the tooltip content
return `${formattedDate}<br/> Dividend Per Share: ${params[0].value}`;
},
},
};
return options;

15
src/routes/stocks/[tickerID]/financials/+page.svelte
View File

@ -265,6 +265,21 @@
tooltip: {
trigger: "axis",
hideDelay: 100,
borderColor: "#969696", // Black border color
borderWidth: 1, // Border width of 1px
backgroundColor: "#313131", // Optional: Set background color for contrast
textStyle: {
color: "#fff", // Optional: Text color for better visibility
},
formatter: function (params) {
const date = params[0].name; // Get the date from the x-axis value
// Return the tooltip content
return `${date}<br/> ${
statementConfig?.find(
(item) => item?.propertyName === displayStatement,
)?.label
}: ${abbreviateNumber(params[0].value)}`;
},
},
};

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

@ -320,6 +320,21 @@
tooltip: {
trigger: "axis",
hideDelay: 100,
borderColor: "#969696", // Black border color
borderWidth: 1, // Border width of 1px
backgroundColor: "#313131", // Optional: Set background color for contrast
textStyle: {
color: "#fff", // Optional: Text color for better visibility
},
formatter: function (params) {
const date = params[0].name; // Get the date from the x-axis value
// Return the tooltip content
return `${date}<br/> ${
statementConfig?.find(
(item) => item?.propertyName === displayStatement,
)?.label
}: ${abbreviateNumber(params[0].value)}`;
},
},
};

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

@ -266,6 +266,21 @@
tooltip: {
trigger: "axis",
hideDelay: 100,
borderColor: "#969696", // Black border color
borderWidth: 1, // Border width of 1px
backgroundColor: "#313131", // Optional: Set background color for contrast
textStyle: {
color: "#fff", // Optional: Text color for better visibility
},
formatter: function (params) {
const date = params[0].name; // Get the date from the x-axis value
// Return the tooltip content
return `${date}<br/> ${
statementConfig?.find(
(item) => item?.propertyName === displayStatement,
)?.label
}: ${abbreviateNumber(params[0].value)}`;
},
},
};

15
src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
View File

@ -224,6 +224,21 @@
tooltip: {
trigger: "axis",
hideDelay: 100,
borderColor: "#969696", // Black border color
borderWidth: 1, // Border width of 1px
backgroundColor: "#313131", // Optional: Set background color for contrast
textStyle: {
color: "#fff", // Optional: Text color for better visibility
},
formatter: function (params) {
const date = params[0].name; // Get the date from the x-axis value
// Return the tooltip content
return `${date}<br/> ${
statementConfig?.find(
(item) => item?.propertyName === displayStatement,
)?.label
}: ${abbreviateNumber(params[0].value)}`;
},
},
};

20
src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
View File

@ -4,10 +4,9 @@
displayCompanyName,
stockTicker,
} from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import { abbreviateNumber, monthNames } from "$lib/utils";
import { Chart } from "svelte-echarts";
import { init, use } from "echarts/core";
import { LineChart, BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
@ -102,6 +101,23 @@
tooltip: {
trigger: "axis",
hideDelay: 100,
borderColor: "#969696", // Black border color
borderWidth: 1, // Border width of 1px
backgroundColor: "#313131", // Optional: Set background color for contrast
textStyle: {
color: "#fff", // Optional: Text color for better visibility
},
formatter: function (params) {
const date = params[0].name; // Get the date from the x-axis value
const dateParts = date.split("-");
const year = dateParts[0];
const monthIndex = parseInt(dateParts[1]) - 1;
const day = dateParts[2];
const formattedDate = `${monthNames[monthIndex]} ${day}, ${year}`;
// Return the tooltip content
return `${formattedDate}<br/> Revenue: ${abbreviateNumber(params[0].value)}`;
},
},
};

12
src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
View File

@ -110,6 +110,18 @@
tooltip: {
trigger: "axis",
hideDelay: 100,
borderColor: "#969696", // Black border color
borderWidth: 1, // Border width of 1px
backgroundColor: "#313131", // Optional: Set background color for contrast
textStyle: {
color: "#fff", // Optional: Text color for better visibility
},
formatter: function (params) {
const date = params[0].name; // Get the date from the x-axis value
// Return the tooltip content
return `${date}<br/> Employees: ${params[0].value?.toLocaleString("en-US")}`;
},
},
};

19
src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
View File

@ -4,7 +4,7 @@
displayCompanyName,
stockTicker,
} from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import { abbreviateNumber, monthNames } 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';
@ -311,6 +311,23 @@
tooltip: {
trigger: "axis",
hideDelay: 100,
borderColor: "#969696", // Black border color
borderWidth: 1, // Border width of 1px
backgroundColor: "#313131", // Optional: Set background color for contrast
textStyle: {
color: "#fff", // Optional: Text color for better visibility
},
formatter: function (params) {
const date = params[0].name; // Get the date from the x-axis value
const dateParts = date.split("-");
const year = dateParts[0];
const monthIndex = parseInt(dateParts[1]) - 1;
const day = dateParts[2];
const formattedDate = `${monthNames[monthIndex]} ${day}, ${year}`;
// Return the tooltip content
return `${formattedDate}<br/> ${abbreviateNumber(params[0].value)}`;
},
},
};