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 2025-02-21 17:58:58 +01:00
parent 6c401a34c4
commit b39e3f327c
2 changed files with 34 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/utils.ts
View File

@ -706,7 +706,11 @@ if (color) {
}
export function abbreviateNumber(number, addDollarSign = false) {
export function abbreviateNumber(
number,
addDollarSign = false,
stripTrailingZeros = true
) {
// Check if number is null or undefined, return "-" if true
if (number == null) {
return "-";
@ -745,10 +749,13 @@ export function abbreviateNumber(number, addDollarSign = false) {
abbreviation = abbreviation.toFixed(2);
}
abbreviation = parseFloat(abbreviation).toLocaleString("en-US", {
// When stripTrailingZeros is true, we set the minimumFractionDigits to 0
const localeOptions = {
maximumFractionDigits: 2,
minimumFractionDigits: 2,
});
minimumFractionDigits: stripTrailingZeros ? 0 : 2,
};
abbreviation = parseFloat(abbreviation).toLocaleString("en-US", localeOptions);
const formattedNumber = abbreviation + suffixes[index];
@ -768,6 +775,7 @@ export function abbreviateNumber(number, addDollarSign = false) {
}
}
export function formatDate(dateStr) {
try {
// Parse the input date string in Berlin timezone

34
src/routes/stocks/[tickerID]/statistics/revenue/+page.svelte
View File

@ -3,7 +3,6 @@
import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
import SEO from "$lib/components/SEO.svelte";
//import * as XLSX from 'xlsx';
import { goto } from "$app/navigation";
import highcharts from "$lib/highcharts.ts";
@ -12,7 +11,6 @@
export let data;
let config = null;
let chartInstance;
let rawData = data?.getHistoricalRevenue || {};
let tableList = [];
@ -66,7 +64,7 @@
config = plotData();
try {
config.yAxis.labels.formatter = function () {
return abbreviateNumber(this.value);
return abbreviateNumber(this?.value);
};
} catch (e) {
console.log(e);
@ -96,14 +94,21 @@
type: "column",
backgroundColor: "#09090B",
plotBackgroundColor: "#09090B",
height: 360, // Set the maximum height for the chart
animation: false,
},
title: {
text:
timeIdx === 0
? `${removeCompanyStrings($displayCompanyName)} Revenue - Annual`
: `${removeCompanyStrings($displayCompanyName)} Revenue - Quarterly`,
style: { color: "white" },
? `<h3 class="mt-3 mb-1">${removeCompanyStrings($displayCompanyName)} Revenue - Annual</h3>`
: `<h3 class="mt-3 mb-1">${removeCompanyStrings($displayCompanyName)} Revenue - Quarterly</h3>`,
style: {
color: "white",
// Using inline CSS for margin-top and margin-bottom
},
useHTML: true, // Enable HTML to apply custom class styling
},
xAxis: {
categories: dates,
gridLineWidth: 0,
@ -205,7 +210,7 @@
/>
<div
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6 mt-3"
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4 mt-3"
>
<div
class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors"
@ -301,7 +306,7 @@
</div>
<div
class="mt-10 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between"
class=" flex flex-col sm:flex-row items-start sm:items-center w-full justify-between"
>
<h2 class="text-xl sm:text-2xl text-white font-bold">
Revenue Chart
@ -340,12 +345,17 @@
</div>
</div>
<div class="chart mt-5" use:highcharts={config}></div>
<div
class="chart mt-5 sm:mt-0 border border-gray-800 rounded"
use:highcharts={config}
></div>
<div
class="mt-10 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between"
class="mt-5 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between sm:border-y border-gray-800 sm:pt-2 sm:pb-2"
>
<h3 class="text-xl sm:text-2xl text-white font-bold">
<h3
class="text-xl sm:text-2xl text-white font-bold mb-2 sm:mb-0"
>
Revenue History
</h3>
@ -353,7 +363,7 @@
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
>
<div
class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
>
{#each tabs as item, i}
{#if data?.user?.tier !== "Pro" && i > 0}