From 580375132a90b6bee8b9d437efd9b16f90b8ccc0 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Mon, 23 Sep 2024 11:55:29 +0200 Subject: [PATCH] remove axis from graph --- src/lib/components/BorrowedShare.svelte | 72 ++++++------------ src/lib/components/DarkPool.svelte | 46 +++--------- src/lib/components/Enterprise.svelte | 43 +++-------- src/lib/components/FailToDeliver.svelte | 68 ++++++----------- src/lib/components/GovernmentContract.svelte | 2 +- src/lib/components/MarketMaker.svelte | 75 +++++++------------ src/lib/components/RetailVolume.svelte | 75 ++++++------------- src/lib/components/ShareStatistics.svelte | 37 ++------- src/lib/components/TARating.svelte | 2 +- src/lib/components/VaR.svelte | 12 +-- src/lib/utils.ts | 27 +++++-- .../stats/balance-sheet/+page.svelte | 2 +- .../[tickerID]/stats/cash-flow/+page.svelte | 2 +- .../[tickerID]/stats/income/+page.svelte | 2 +- .../[tickerID]/stats/market-cap/+page.svelte | 8 +- 15 files changed, 152 insertions(+), 321 deletions(-) diff --git a/src/lib/components/BorrowedShare.svelte b/src/lib/components/BorrowedShare.svelte index 2f032b50..2c4902af 100644 --- a/src/lib/components/BorrowedShare.svelte +++ b/src/lib/components/BorrowedShare.svelte @@ -2,7 +2,7 @@ import { borrowedShareComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store'; import InfoModal from '$lib/components/InfoModal.svelte'; import { Chart } from 'svelte-echarts' - import { abbreviateNumber, formatDateRange } from "$lib/utils"; + import { abbreviateNumber, formatDateRange, monthNames } from "$lib/utils"; import { init, use } from 'echarts/core' import { LineChart } from 'echarts/charts' @@ -50,22 +50,6 @@ function findLowestAndHighestFee(data, lastDateStr) { } - 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 }; - } - } - function getPlotOptions() { let dates = []; @@ -89,7 +73,6 @@ function findLowestAndHighestFee(data, lastDateStr) { return accumulator + sum; }, 0); - const {unit, denominator } = normalizer(Math.max(...availableList) ?? 0) const option = { silent: true, @@ -99,19 +82,26 @@ function findLowestAndHighestFee(data, lastDateStr) { }, animation: false, grid: { - left: '2%', - right: '2%', + left: '3%', + right: '3%', bottom: '2%', top: '5%', containLabel: true }, - xAxis: - { + xAxis: { type: 'category', boundaryGap: false, data: dates, axisLabel: { - color: '#fff', + color: '#fff', + formatter: function (value) { + // Assuming dates are in the format 'yyyy-mm-dd' + // Extract the month and day from the date string and convert the month to its abbreviated name + const dateParts = value.split('-'); + const day = dateParts[2].substring(0); // Extracting the last two digits of the year + const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects + return `${day} ${monthNames[monthIndex]}`; + } } }, yAxis: [ @@ -121,34 +111,18 @@ function findLowestAndHighestFee(data, lastDateStr) { 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) { - value = Math.max(value, 0); - return (value / denominator)?.toFixed(0) + unit; // Format value in millions - } else { - return ''; // Hide this tick - } - } - }, + show: false // Hide y-axis labels + }, }, - { - type: 'value', - splitLine: { + { + type: 'value', + splitLine: { show: false, // Disable x-axis grid lines - }, - position: 'right', - axisLabel: { - color: '#fff', - formatter: function (value, index) { - if (index % 2 === 0) { - return value?.toFixed(1)+'%' - } else { - return ''; // Hide this tick - } - } - } + }, + position: 'right', + axisLabel: { + show: false // Hide y-axis labels + }, }, ], series: [ diff --git a/src/lib/components/DarkPool.svelte b/src/lib/components/DarkPool.svelte index 5411dad8..94c2c6a5 100644 --- a/src/lib/components/DarkPool.svelte +++ b/src/lib/components/DarkPool.svelte @@ -21,22 +21,6 @@ let monthlyVolume; let avgMonthlyShort; -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 }; - } -} - function findMonthlyValue(data, lastDateStr) { // Convert lastDateStr to Date object @@ -90,7 +74,6 @@ function getPlotOptions() { const totalShort = shortVolumeList?.reduce((acc, sentiment) => acc + sentiment, 0); avgShortVolume = totalShort / shortVolumeList?.length; - const {unit, denominator } = normalizer(Math.max(...totalVolumeList) ?? 0) const option = { silent: true, @@ -100,8 +83,8 @@ function getPlotOptions() { }, animation: false, grid: { - left: '2%', - right: '2%', + left: '3%', + right: '3%', bottom: '2%', top: '5%', containLabel: true @@ -115,23 +98,14 @@ function getPlotOptions() { } }, yAxis: [ - { - type: 'value', - splitLine: { + { + type: 'value', + splitLine: { 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) { - value = Math.max(value, 0); - return (value / denominator)?.toFixed(1) + unit; // Format value in millions - } else { - return ''; // Hide this tick - } - } - }, + }, + axisLabel: { + show: false // Hide y-axis labels + } }, ], series: [ @@ -280,7 +254,7 @@ $: { Date - + { formatDateRange(rawData?.slice(-1)?.at(0)?.date)} diff --git a/src/lib/components/Enterprise.svelte b/src/lib/components/Enterprise.svelte index 5044438e..2267c54f 100644 --- a/src/lib/components/Enterprise.svelte +++ b/src/lib/components/Enterprise.svelte @@ -19,21 +19,7 @@ let optionsData; -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 }; - } -} + function getPlotOptions() { let dates = []; let enterpriseValue = []; @@ -54,7 +40,6 @@ function getPlotOptions() { }); - const {unit, denominator } = normalizer(Math.max(...enterpriseValue) ?? 0) const option = { @@ -78,24 +63,17 @@ function getPlotOptions() { color: '#fff', } }, - yAxis: [ - { - type: 'value', - splitLine: { + yAxis: { + splitLine: { show: false, // Disable x-axis grid lines - }, - axisLabel: { - color: '#fff', // Change label color to white - formatter: function (value) { - //value = Math.max(value, 0); - return '$'+(value / denominator)?.toFixed(1) + unit; // Format value in millions - }, - }, }, - - ], + axisLabel: { + show: false // Hide y-axis labels + }, + }, series: [ - { + { + name: 'Cash Equiv.', data: cashEquivalent, type: 'bar', itemStyle: { @@ -103,6 +81,7 @@ function getPlotOptions() { } }, { + name: 'Debt', data: addTotalDebt, type: 'bar', itemStyle: { @@ -110,6 +89,7 @@ function getPlotOptions() { } }, { + name: 'Market Cap', data: marketCapitalization, type: 'bar', itemStyle: { @@ -117,6 +97,7 @@ function getPlotOptions() { } }, { + name: 'Enterprise Value', data: enterpriseValue, type: 'bar', itemStyle: { diff --git a/src/lib/components/FailToDeliver.svelte b/src/lib/components/FailToDeliver.svelte index 7f46659e..5372eb23 100644 --- a/src/lib/components/FailToDeliver.svelte +++ b/src/lib/components/FailToDeliver.svelte @@ -2,7 +2,7 @@ import { failToDeliverComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store'; import InfoModal from '$lib/components/InfoModal.svelte'; import { Chart } from 'svelte-echarts' - import { abbreviateNumber, formatDateRange } from "$lib/utils"; + import { abbreviateNumber, formatDateRange, monthNames } from "$lib/utils"; import { init, use } from 'echarts/core' import { LineChart } from 'echarts/charts' @@ -46,22 +46,6 @@ function findLowestAndHighestPrice(data, lastDateStr) { } - 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: 1e3 }; - } else { - return { unit: '', denominator: 1 }; - } - } - function getPlotOptions() { let dates = []; @@ -80,11 +64,9 @@ function findLowestAndHighestPrice(data, lastDateStr) { // Compute the average of item?.traded const totalNumber = failToDeliverList?.reduce((acc, item) => acc + item, 0); - avgFailToDeliver = totalNumber / failToDeliverList?.length; + avgFailToDeliver = (totalNumber / failToDeliverList?.length)?.toFixed(0); - const {unit, denominator } = normalizer(Math.max(...failToDeliverList) ?? 0) - const option = { silent: true, tooltip: { @@ -93,19 +75,26 @@ function findLowestAndHighestPrice(data, lastDateStr) { }, animation: false, grid: { - left: '2%', - right: '2%', + left: '3%', + right: '3%', bottom: '2%', top: '5%', containLabel: true }, - xAxis: - { + xAxis: { type: 'category', boundaryGap: false, data: dates, axisLabel: { - color: '#fff', + color: '#fff', + formatter: function (value) { + // Assuming dates are in the format 'yyyy-mm-dd' + // Extract the month and day from the date string and convert the month to its abbreviated name + const dateParts = value.split('-'); + const day = dateParts[2].substring(0); // Extracting the last two digits of the year + const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects + return `${day} ${monthNames[monthIndex]}`; + } } }, yAxis: [ @@ -115,15 +104,8 @@ function findLowestAndHighestPrice(data, lastDateStr) { show: false, // Disable x-axis grid lines }, - axisLabel: { - color: '#fff', - formatter: function (value, index) { - if (index % 2 === 0) { - return '$'+value?.toFixed(1) - } else { - return ''; // Hide this tick - } - } + axisLabel: { + show: false // Hide y-axis labels } }, { @@ -133,21 +115,12 @@ function findLowestAndHighestPrice(data, lastDateStr) { }, position: 'right', axisLabel: { - color: '#fff', // Change label color to white - formatter: function (value, index) { - // Display every second tick - if (index % 2 === 0) { - value = Math.max(value, 0); - return (value / denominator)?.toFixed(0) + unit; // Format value in millions - } else { - return ''; // Hide this tick - } - } - }, + show: false // Hide y-axis labels + }, }, ], series: [ - { + { name: 'Price', data: priceList, type: 'line', itemStyle: { @@ -155,7 +128,8 @@ function findLowestAndHighestPrice(data, lastDateStr) { }, showSymbol: false }, - { + { + name: 'FTD Shares', data: failToDeliverList, type: 'line', areaStyle: {opacity: 1}, diff --git a/src/lib/components/GovernmentContract.svelte b/src/lib/components/GovernmentContract.svelte index f7671a49..ad9bf0b2 100644 --- a/src/lib/components/GovernmentContract.svelte +++ b/src/lib/components/GovernmentContract.svelte @@ -156,7 +156,7 @@ use([BarChart, GridComponent, CanvasRenderer]) const postData = {'ticker': ticker, path: 'government-contract'}; // make the POST request to the endpoint - const response = await fetch('/ticker-data', { + const response = await fetch('/api/ticker-data', { method: 'POST', headers: { "Content-Type": "application/json" diff --git a/src/lib/components/MarketMaker.svelte b/src/lib/components/MarketMaker.svelte index d85ab854..686a0ec2 100644 --- a/src/lib/components/MarketMaker.svelte +++ b/src/lib/components/MarketMaker.svelte @@ -2,7 +2,7 @@ import { marketMakerComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store'; import InfoModal from '$lib/components/InfoModal.svelte'; import { Chart } from 'svelte-echarts' - import { abbreviateNumber, formatString, formatDateRange } from "$lib/utils"; + import { abbreviateNumber, formatString, formatDateRange, monthNames } from "$lib/utils"; import { init, use } from 'echarts/core' import { LineChart } from 'echarts/charts' @@ -27,21 +27,6 @@ let showFullStats = false; -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 }; -} -} function getPlotOptions() { @@ -70,8 +55,6 @@ function getPlotOptions() { avgNotionalSum = totalSum / notionalSumList?.length; - const {unit, denominator } = normalizer(Math.max(...notionalSumList) ?? 0) - const { unit: shareUnit, denominator: shareDenominator } = normalizer(Math.max(...shareQuantityList) ?? 0); const option = { silent: true, @@ -81,21 +64,28 @@ function getPlotOptions() { hideDelay: 100, // Set the delay in milliseconds }, grid: { - left: '2%', - right: '2%', + left: '3%', + right: '3%', bottom: '2%', top: '5%', containLabel: true }, - xAxis: - { - type: 'category', - boundaryGap: false, - data: dates, - axisLabel: { - color: '#fff', + xAxis: { + type: 'category', + boundaryGap: false, + data: dates, + axisLabel: { + color: '#fff', + formatter: function (value) { + // Assuming dates are in the format 'yyyy-mm-dd' + // Extract the month and day from the date string and convert the month to its abbreviated name + const dateParts = value.split('-'); + const day = dateParts[2].substring(0); // Extracting the last two digits of the year + const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects + return `${day} ${monthNames[monthIndex]}`; } - }, + } + }, yAxis: [ { type: 'value', @@ -103,16 +93,7 @@ function getPlotOptions() { 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) { - value = Math.max(value, 0); - return '$'+(value / denominator)?.toFixed(1) + unit; // Format value in millions - } else { - return ''; // Hide this tick - } - } + show: false // Hide y-axis labels }, }, { @@ -122,19 +103,12 @@ function getPlotOptions() { }, position: 'right', axisLabel: { - color: '#fff', - formatter: function (value, index) { - if (index % 2 === 0) { - return (value / shareDenominator)?.toFixed(1) + shareUnit; // Format value in millions - } else { - return ''; // Hide this tick - } - } - } + show: false // Hide y-axis labels + }, } ], series: [ - { + { name: 'Notional Sum', data: notionalSumList, type: 'line', itemStyle: { @@ -142,13 +116,14 @@ function getPlotOptions() { }, showSymbol: false }, - { + { + name: 'Shares', data: shareQuantityList, type: 'line', areaStyle: {opacity: 1}, yAxisIndex: 1, itemStyle: { - color: '#3B82F6' // Change bar color to white + color: '#408FFF' // Change bar color to white }, showSymbol: false }, diff --git a/src/lib/components/RetailVolume.svelte b/src/lib/components/RetailVolume.svelte index 71e0cef7..5f298ceb 100644 --- a/src/lib/components/RetailVolume.svelte +++ b/src/lib/components/RetailVolume.svelte @@ -3,7 +3,7 @@ import { retailVolumeComponent,displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store'; import InfoModal from '$lib/components/InfoModal.svelte'; import { Chart } from 'svelte-echarts' - import { abbreviateNumber, formatDateRange } from "$lib/utils"; + import { abbreviateNumber, formatDateRange, monthNames } from "$lib/utils"; import { init, use } from 'echarts/core' import { LineChart, BarChart } from 'echarts/charts' import { GridComponent, TooltipComponent } from 'echarts/components' @@ -16,7 +16,6 @@ let isLoaded = false; - const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; let historyData = [] let rawData = []; @@ -55,21 +54,7 @@ } -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 }; - } -} + function getPlotOptions() { let dates = []; let tradingList = []; @@ -94,7 +79,6 @@ function getPlotOptions() { const totalSentiment = sentimentList?.reduce((acc, sentiment) => acc + sentiment, 0); avgSentiment = totalSentiment / tradingList?.length > 1 ? 'Bullish' : 'Bearish'; - const {unit, denominator } = normalizer(Math.max(...tradingList) ?? 0) const option = { @@ -105,8 +89,8 @@ function getPlotOptions() { hideDelay: 100, // Set the delay in milliseconds }, grid: { - left: '0%', - right: '0%', + left: '3%', + right: '3%', bottom: '0%', top: '5%', containLabel: true @@ -128,47 +112,30 @@ function getPlotOptions() { } }, yAxis: [ - { - name: 'Volume', - position: 'left', - type: 'value', - splitLine: { - 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) { - value = Math.max(value, 0); - return '$' + (value / denominator)?.toFixed(1) + unit; // Format value in millions - } else { - return ''; // Hide this tick - } - } - }, - }, { type: 'value', splitLine: { show: false, // Disable x-axis grid lines }, - name: 'Sentiment', - position: 'right', - axisLabel: { - color: '#fff', - formatter: function (value, index) { - if (index % 2 === 0) { - return value?.toFixed(2); // Format the sentiment value - } else { - return ''; // Hide this tick - } - } + + axisLabel: { + show: false // Hide y-axis labels } - } + }, + { + type: 'value', + splitLine: { + show: false, // Disable x-axis grid lines + }, + position: 'right', + axisLabel: { + show: false // Hide y-axis labels + }, + }, ], series: [ - { + { + name: 'Volume [$]', data: tradingList, type: 'line', itemStyle: { @@ -177,7 +144,7 @@ function getPlotOptions() { showSymbol: false }, { - name: 'Sentiment', + name: 'Retail Sentiment', data: sentimentList, type: 'bar', yAxisIndex: 1, diff --git a/src/lib/components/ShareStatistics.svelte b/src/lib/components/ShareStatistics.svelte index 2eb0f1df..e0ac7110 100644 --- a/src/lib/components/ShareStatistics.svelte +++ b/src/lib/components/ShareStatistics.svelte @@ -23,21 +23,6 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]) let optionsData; -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 }; - } -} function getPlotOptions() { let dates = []; let floatShares = []; @@ -52,9 +37,6 @@ function getPlotOptions() { }); - const {unit, denominator } = normalizer(Math.max(...floatShares) ?? 0) - - const option = { silent: true, animation: false, @@ -63,8 +45,8 @@ function getPlotOptions() { hideDelay: 100, // Set the delay in milliseconds }, grid: { - left: $screenWidth < 640 ? '1%' : '2%', - right: $screenWidth < 640 ? '0%' : '2%', + left: $screenWidth < 640 ? '3%' : '2%', + right: $screenWidth < 640 ? '3%' : '2%', bottom: $screenWidth < 640 ? '0%' : '2%', top: '5%', containLabel: true @@ -80,27 +62,24 @@ function getPlotOptions() { { 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) { - value = Math.max(value, 0); - return (value / denominator)?.toFixed(1) + unit; // Format value in millions - }, + show: false // Hide y-axis labels + } }, - }, ], series: [ - { + { name: 'Floating Shares', data: floatShares, type: 'bar', itemStyle: { color: '#3B82F6' // Change bar color to white } }, - { + { name: 'Outstanding Shares', data: outstandingShares, type: 'bar', itemStyle: { diff --git a/src/lib/components/TARating.svelte b/src/lib/components/TARating.svelte index ea36ac0f..178d575a 100644 --- a/src/lib/components/TARating.svelte +++ b/src/lib/components/TARating.svelte @@ -160,7 +160,7 @@ $: if ($assetType || $stockTicker || $etfTicker || $cryptoTicker) { {#each (showFullStats ? signalList : signalList?.slice(0, 3)) as item,index} - + {item?.name} diff --git a/src/lib/components/VaR.svelte b/src/lib/components/VaR.svelte index 7a1db20e..41bb70ba 100644 --- a/src/lib/components/VaR.svelte +++ b/src/lib/components/VaR.svelte @@ -48,7 +48,7 @@ function getPlotOptions() { }, animation: false, grid: { - left: '0%', + left: '2%', right: '2%', bottom: '2%', top: '5%', @@ -75,16 +75,8 @@ function getPlotOptions() { splitLine: { show: false, // Disable x-axis grid lines }, - axisLabel: { - color: '#fff', - formatter: function (value, index) { - if (index % 2 === 0) { - return value?.toFixed(0)+'%' - } else { - return ''; // Hide this tick - } - } + show: false // Hide y-axis labels } } ], diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 1afb35da..58252ab4 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -20,7 +20,7 @@ type FlyAndScaleParams = { export const flyAndScale = ( node: Element, - params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 0 }, + params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 0 } ): TransitionConfig => { const style = getComputedStyle(node); const transform = style.transform === "none" ? "" : style.transform; @@ -28,7 +28,7 @@ export const flyAndScale = ( const scaleConversion = ( valueA: number, scaleA: [number, number], - scaleB: [number, number], + scaleB: [number, number] ) => { const [minA, maxA] = scaleA; const [minB, maxB] = scaleB; @@ -40,7 +40,7 @@ export const flyAndScale = ( }; const styleToString = ( - style: Record, + style: Record ): string => { return Object.keys(style).reduce((str, key) => { if (style[key] === undefined) return str; @@ -212,7 +212,7 @@ export function sumQuarterlyResultsByYear(quarterlyResults, namingList) { // Filter out years with less than 4 quarters const validYears = Object?.keys(quarterCounts)?.filter( - (year) => quarterCounts[year] === 4, + (year) => quarterCounts[year] === 4 ); const annualResults = validYears?.map((year) => yearlySummaries[year]); @@ -420,7 +420,7 @@ export function formatETFName(inputString) { // Capitalize the first letter of each word const capitalizedWords = words?.map( - (word) => word.charAt(0)?.toUpperCase() + word?.slice(1), + (word) => word.charAt(0)?.toUpperCase() + word?.slice(1) ); // Join the words back together with a space between them @@ -442,7 +442,7 @@ export function addDays(data, days, state) { } else { const differenceInTime = result - createdDate; const differenceInDays = Math.round( - differenceInTime / (1000 * 60 * 60 * 24), + differenceInTime / (1000 * 60 * 60 * 24) ); return Math.abs(differenceInDays); } @@ -1207,3 +1207,18 @@ export const industryList = [ "Diversified Utilities", "General Utilities", ]; + +export const monthNames = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", +]; diff --git a/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte index 4060884b..f78170aa 100644 --- a/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte +++ b/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte @@ -297,7 +297,7 @@ function normalizer(value) { axisLabel: { color: '#fff', // Change label color to white formatter: function (value) { - return '$'+(value / denominator)?.toFixed(1) + unit; // Format value in millions + return (value / denominator)?.toFixed(1) + unit; // Format value in millions }, }, }, diff --git a/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte index ffd51264..bb9e2551 100644 --- a/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte +++ b/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte @@ -264,7 +264,7 @@ function plotData() axisLabel: { color: '#fff', // Change label color to white formatter: function (value) { - return '$'+(value / denominator)?.toFixed(1) + unit; // Format value in millions + return (value / denominator)?.toFixed(1) + unit; // Format value in millions }, }, }, diff --git a/src/routes/stocks/[tickerID]/stats/income/+page.svelte b/src/routes/stocks/[tickerID]/stats/income/+page.svelte index 9c8c96d1..fe027917 100644 --- a/src/routes/stocks/[tickerID]/stats/income/+page.svelte +++ b/src/routes/stocks/[tickerID]/stats/income/+page.svelte @@ -238,7 +238,7 @@ function plotData() axisLabel: { color: '#fff', // Change label color to white formatter: function (value) { - return '$'+(value / denominator)?.toFixed(1) + unit; // Format value in millions + return (value / denominator)?.toFixed(1) + unit; // Format value in millions }, }, }, diff --git a/src/routes/stocks/[tickerID]/stats/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/stats/market-cap/+page.svelte index 5a0ef3fa..2b0ec10f 100644 --- a/src/routes/stocks/[tickerID]/stats/market-cap/+page.svelte +++ b/src/routes/stocks/[tickerID]/stats/market-cap/+page.svelte @@ -231,7 +231,7 @@ async function plotData() axisLabel: { color: '#fff', // Change label color to white formatter: function (value) { - return '$'+(value / denominator)?.toFixed(1) + unit; // Format value in millions + return (value / denominator)?.toFixed(1) + unit; // Format value in millions }, }, }, @@ -303,7 +303,7 @@ async function plotData()
- {$displayCompanyName} has a market cap or net worth of {abbreviateNumber(data?.getStockQuote?.marketCap,true)} as of {(new Date())?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}. Its market cap has {changePercentageYearAgo > 0 ? 'increased' : changePercentageYearAgo < 0 ? 'decreased' : 'unchanged'} by {abbreviateNumber(changePercentageYearAgo?.toFixed(2))}% in one year. + {$displayCompanyName} has a market cap of {abbreviateNumber(data?.getStockQuote?.marketCap,true)} as of {(new Date())?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}. Its market cap has {changePercentageYearAgo > 0 ? 'increased' : changePercentageYearAgo < 0 ? 'decreased' : 'unchanged'} by {abbreviateNumber(changePercentageYearAgo?.toFixed(2))}% in one year.
@@ -327,12 +327,12 @@ async function plotData()
-

+

Market Cap History

-
    +