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

remove axis from graph

Browse Source
This commit is contained in:
MuslemRahimi 2024-09-23 11:55:29 +02:00
parent fa2df40340
commit 580375132a
15 changed files with 152 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/lib/components/BorrowedShare.svelte
View File

@ -2,7 +2,7 @@
import { borrowedShareComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store'; import { borrowedShareComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte'; import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts' 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 { init, use } from 'echarts/core'
import { LineChart } from 'echarts/charts' 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() { function getPlotOptions() {
let dates = []; let dates = [];
@ -89,7 +73,6 @@ function findLowestAndHighestFee(data, lastDateStr) {
return accumulator + sum; return accumulator + sum;
}, 0); }, 0);
const {unit, denominator } = normalizer(Math.max(...availableList) ?? 0)
const option = { const option = {
silent: true, silent: true,
@ -99,19 +82,26 @@ function findLowestAndHighestFee(data, lastDateStr) {
}, },
animation: false, animation: false,
grid: { grid: {
left: '2%', left: '3%',
right: '2%', right: '3%',
bottom: '2%', bottom: '2%',
top: '5%', top: '5%',
containLabel: true containLabel: true
}, },
xAxis: xAxis: {
{
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: dates, data: dates,
axisLabel: { 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: [ yAxis: [
@ -121,16 +111,7 @@ function findLowestAndHighestFee(data, lastDateStr) {
show: false, // Disable x-axis grid lines show: false, // Disable x-axis grid lines
}, },
axisLabel: { axisLabel: {
color: '#fff', // Change label color to white show: false // Hide y-axis labels
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
}
}
}, },
}, },
{ {
@ -140,15 +121,8 @@ function findLowestAndHighestFee(data, lastDateStr) {
}, },
position: 'right', position: 'right',
axisLabel: { axisLabel: {
color: '#fff', show: false // Hide y-axis labels
formatter: function (value, index) { },
if (index % 2 === 0) {
return value?.toFixed(1)+'%'
} else {
return ''; // Hide this tick
}
}
}
}, },
], ],
series: [ series: [

34
src/lib/components/DarkPool.svelte
View File

@ -21,22 +21,6 @@
let monthlyVolume; let monthlyVolume;
let avgMonthlyShort; 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) { function findMonthlyValue(data, lastDateStr) {
// Convert lastDateStr to Date object // Convert lastDateStr to Date object
@ -90,7 +74,6 @@ function getPlotOptions() {
const totalShort = shortVolumeList?.reduce((acc, sentiment) => acc + sentiment, 0); const totalShort = shortVolumeList?.reduce((acc, sentiment) => acc + sentiment, 0);
avgShortVolume = totalShort / shortVolumeList?.length; avgShortVolume = totalShort / shortVolumeList?.length;
const {unit, denominator } = normalizer(Math.max(...totalVolumeList) ?? 0)
const option = { const option = {
silent: true, silent: true,
@ -100,8 +83,8 @@ function getPlotOptions() {
}, },
animation: false, animation: false,
grid: { grid: {
left: '2%', left: '3%',
right: '2%', right: '3%',
bottom: '2%', bottom: '2%',
top: '5%', top: '5%',
containLabel: true containLabel: true
@ -121,17 +104,8 @@ function getPlotOptions() {
show: false, // Disable x-axis grid lines show: false, // Disable x-axis grid lines
}, },
axisLabel: { axisLabel: {
color: '#fff', // Change label color to white show: false // Hide y-axis labels
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
} }
}
},
}, },
], ],
series: [ series: [
@ -280,7 +254,7 @@ $: {
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"> <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Date</span> <span>Date</span>
</td> </td>
<td class="px-[5px] py-1.5 whitespace-nowrap text-right font-medium xs:px-2.5 xs:py-2"> <td class="text-sm sm:text-[1rem] px-[5px] py-1.5 whitespace-nowrap text-right font-medium xs:px-2.5 xs:py-2">
{ formatDateRange(rawData?.slice(-1)?.at(0)?.date)} { formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
</td> </td>
</tr> </tr>

33
src/lib/components/Enterprise.svelte
View File

@ -19,21 +19,7 @@
let optionsData; 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() { function getPlotOptions() {
let dates = []; let dates = [];
let enterpriseValue = []; let enterpriseValue = [];
@ -54,7 +40,6 @@ function getPlotOptions() {
}); });
const {unit, denominator } = normalizer(Math.max(...enterpriseValue) ?? 0)
const option = { const option = {
@ -78,24 +63,17 @@ function getPlotOptions() {
color: '#fff', color: '#fff',
} }
}, },
yAxis: [ yAxis: {
{
type: 'value',
splitLine: { splitLine: {
show: false, // Disable x-axis grid lines show: false, // Disable x-axis grid lines
}, },
axisLabel: { axisLabel: {
color: '#fff', // Change label color to white show: false // Hide y-axis labels
formatter: function (value) {
//value = Math.max(value, 0);
return '$'+(value / denominator)?.toFixed(1) + unit; // Format value in millions
}, },
}, },
},
],
series: [ series: [
{ {
name: 'Cash Equiv.',
data: cashEquivalent, data: cashEquivalent,
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
@ -103,6 +81,7 @@ function getPlotOptions() {
} }
}, },
{ {
name: 'Debt',
data: addTotalDebt, data: addTotalDebt,
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
@ -110,6 +89,7 @@ function getPlotOptions() {
} }
}, },
{ {
name: 'Market Cap',
data: marketCapitalization, data: marketCapitalization,
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
@ -117,6 +97,7 @@ function getPlotOptions() {
} }
}, },
{ {
name: 'Enterprise Value',
data: enterpriseValue, data: enterpriseValue,
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {

60
src/lib/components/FailToDeliver.svelte
View File

@ -2,7 +2,7 @@
import { failToDeliverComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store'; import { failToDeliverComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte'; import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts' 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 { init, use } from 'echarts/core'
import { LineChart } from 'echarts/charts' 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() { function getPlotOptions() {
let dates = []; let dates = [];
@ -80,11 +64,9 @@ function findLowestAndHighestPrice(data, lastDateStr) {
// Compute the average of item?.traded // Compute the average of item?.traded
const totalNumber = failToDeliverList?.reduce((acc, item) => acc + item, 0); 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 = { const option = {
silent: true, silent: true,
tooltip: { tooltip: {
@ -93,19 +75,26 @@ function findLowestAndHighestPrice(data, lastDateStr) {
}, },
animation: false, animation: false,
grid: { grid: {
left: '2%', left: '3%',
right: '2%', right: '3%',
bottom: '2%', bottom: '2%',
top: '5%', top: '5%',
containLabel: true containLabel: true
}, },
xAxis: xAxis: {
{
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: dates, data: dates,
axisLabel: { 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: [ yAxis: [
@ -116,14 +105,7 @@ function findLowestAndHighestPrice(data, lastDateStr) {
}, },
axisLabel: { axisLabel: {
color: '#fff', show: false // Hide y-axis labels
formatter: function (value, index) {
if (index % 2 === 0) {
return '$'+value?.toFixed(1)
} else {
return ''; // Hide this tick
}
}
} }
}, },
{ {
@ -133,21 +115,12 @@ function findLowestAndHighestPrice(data, lastDateStr) {
}, },
position: 'right', position: 'right',
axisLabel: { axisLabel: {
color: '#fff', // Change label color to white show: false // Hide y-axis labels
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
}
}
}, },
}, },
], ],
series: [ series: [
{ { name: 'Price',
data: priceList, data: priceList,
type: 'line', type: 'line',
itemStyle: { itemStyle: {
@ -156,6 +129,7 @@ function findLowestAndHighestPrice(data, lastDateStr) {
showSymbol: false showSymbol: false
}, },
{ {
name: 'FTD Shares',
data: failToDeliverList, data: failToDeliverList,
type: 'line', type: 'line',
areaStyle: {opacity: 1}, areaStyle: {opacity: 1},

2
src/lib/components/GovernmentContract.svelte
View File

@ -156,7 +156,7 @@ use([BarChart, GridComponent, CanvasRenderer])
const postData = {'ticker': ticker, path: 'government-contract'}; const postData = {'ticker': ticker, path: 'government-contract'};
// make the POST request to the endpoint // make the POST request to the endpoint
const response = await fetch('/ticker-data', { const response = await fetch('/api/ticker-data', {
method: 'POST', method: 'POST',
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json"

61
src/lib/components/MarketMaker.svelte
View File

@ -2,7 +2,7 @@
import { marketMakerComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store'; import { marketMakerComponent, displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte'; import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts' 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 { init, use } from 'echarts/core'
import { LineChart } from 'echarts/charts' import { LineChart } from 'echarts/charts'
@ -27,21 +27,6 @@
let showFullStats = false; 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() { function getPlotOptions() {
@ -70,8 +55,6 @@ function getPlotOptions() {
avgNotionalSum = totalSum / notionalSumList?.length; avgNotionalSum = totalSum / notionalSumList?.length;
const {unit, denominator } = normalizer(Math.max(...notionalSumList) ?? 0)
const { unit: shareUnit, denominator: shareDenominator } = normalizer(Math.max(...shareQuantityList) ?? 0);
const option = { const option = {
silent: true, silent: true,
@ -81,19 +64,26 @@ function getPlotOptions() {
hideDelay: 100, // Set the delay in milliseconds hideDelay: 100, // Set the delay in milliseconds
}, },
grid: { grid: {
left: '2%', left: '3%',
right: '2%', right: '3%',
bottom: '2%', bottom: '2%',
top: '5%', top: '5%',
containLabel: true containLabel: true
}, },
xAxis: xAxis: {
{
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: dates, data: dates,
axisLabel: { 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: [ yAxis: [
@ -103,16 +93,7 @@ function getPlotOptions() {
show: false, // Disable x-axis grid lines show: false, // Disable x-axis grid lines
}, },
axisLabel: { axisLabel: {
color: '#fff', // Change label color to white show: false // Hide y-axis labels
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
}
}
}, },
}, },
{ {
@ -122,19 +103,12 @@ function getPlotOptions() {
}, },
position: 'right', position: 'right',
axisLabel: { axisLabel: {
color: '#fff', show: false // Hide y-axis labels
formatter: function (value, index) { },
if (index % 2 === 0) {
return (value / shareDenominator)?.toFixed(1) + shareUnit; // Format value in millions
} else {
return ''; // Hide this tick
}
}
}
} }
], ],
series: [ series: [
{ { name: 'Notional Sum',
data: notionalSumList, data: notionalSumList,
type: 'line', type: 'line',
itemStyle: { itemStyle: {
@ -143,12 +117,13 @@ function getPlotOptions() {
showSymbol: false showSymbol: false
}, },
{ {
name: 'Shares',
data: shareQuantityList, data: shareQuantityList,
type: 'line', type: 'line',
areaStyle: {opacity: 1}, areaStyle: {opacity: 1},
yAxisIndex: 1, yAxisIndex: 1,
itemStyle: { itemStyle: {
color: '#3B82F6' // Change bar color to white color: '#408FFF' // Change bar color to white
}, },
showSymbol: false showSymbol: false
}, },

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

@ -3,7 +3,7 @@
import { retailVolumeComponent,displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store'; import { retailVolumeComponent,displayCompanyName, stockTicker, assetType, etfTicker, screenWidth, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte'; import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts' 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 { init, use } from 'echarts/core'
import { LineChart, BarChart } from 'echarts/charts' import { LineChart, BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components' import { GridComponent, TooltipComponent } from 'echarts/components'
@ -16,7 +16,6 @@
let isLoaded = false; let isLoaded = false;
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
let historyData = [] let historyData = []
let rawData = []; 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() { function getPlotOptions() {
let dates = []; let dates = [];
let tradingList = []; let tradingList = [];
@ -94,7 +79,6 @@ function getPlotOptions() {
const totalSentiment = sentimentList?.reduce((acc, sentiment) => acc + sentiment, 0); const totalSentiment = sentimentList?.reduce((acc, sentiment) => acc + sentiment, 0);
avgSentiment = totalSentiment / tradingList?.length > 1 ? 'Bullish' : 'Bearish'; avgSentiment = totalSentiment / tradingList?.length > 1 ? 'Bullish' : 'Bearish';
const {unit, denominator } = normalizer(Math.max(...tradingList) ?? 0)
const option = { const option = {
@ -105,8 +89,8 @@ function getPlotOptions() {
hideDelay: 100, // Set the delay in milliseconds hideDelay: 100, // Set the delay in milliseconds
}, },
grid: { grid: {
left: '0%', left: '3%',
right: '0%', right: '3%',
bottom: '0%', bottom: '0%',
top: '5%', top: '5%',
containLabel: true containLabel: true
@ -129,46 +113,29 @@ function getPlotOptions() {
}, },
yAxis: [ yAxis: [
{ {
name: 'Volume',
position: 'left',
type: 'value', type: 'value',
splitLine: { splitLine: {
show: false, // Disable x-axis grid lines show: false, // Disable x-axis grid lines
}, },
axisLabel: { axisLabel: {
color: '#fff', // Change label color to white show: false // Hide y-axis labels
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', type: 'value',
splitLine: { splitLine: {
show: false, // Disable x-axis grid lines show: false, // Disable x-axis grid lines
}, },
name: 'Sentiment',
position: 'right', position: 'right',
axisLabel: { axisLabel: {
color: '#fff', show: false // Hide y-axis labels
formatter: function (value, index) { },
if (index % 2 === 0) { },
return value?.toFixed(2); // Format the sentiment value
} else {
return ''; // Hide this tick
}
}
}
}
], ],
series: [ series: [
{ {
name: 'Volume [$]',
data: tradingList, data: tradingList,
type: 'line', type: 'line',
itemStyle: { itemStyle: {
@ -177,7 +144,7 @@ function getPlotOptions() {
showSymbol: false showSymbol: false
}, },
{ {
name: 'Sentiment', name: 'Retail Sentiment',
data: sentimentList, data: sentimentList,
type: 'bar', type: 'bar',
yAxisIndex: 1, yAxisIndex: 1,

35
src/lib/components/ShareStatistics.svelte
View File

@ -23,21 +23,6 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
let optionsData; 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() { function getPlotOptions() {
let dates = []; let dates = [];
let floatShares = []; let floatShares = [];
@ -52,9 +37,6 @@ function getPlotOptions() {
}); });
const {unit, denominator } = normalizer(Math.max(...floatShares) ?? 0)
const option = { const option = {
silent: true, silent: true,
animation: false, animation: false,
@ -63,8 +45,8 @@ function getPlotOptions() {
hideDelay: 100, // Set the delay in milliseconds hideDelay: 100, // Set the delay in milliseconds
}, },
grid: { grid: {
left: $screenWidth < 640 ? '1%' : '2%', left: $screenWidth < 640 ? '3%' : '2%',
right: $screenWidth < 640 ? '0%' : '2%', right: $screenWidth < 640 ? '3%' : '2%',
bottom: $screenWidth < 640 ? '0%' : '2%', bottom: $screenWidth < 640 ? '0%' : '2%',
top: '5%', top: '5%',
containLabel: true containLabel: true
@ -82,25 +64,22 @@ function getPlotOptions() {
splitLine: { splitLine: {
show: false, // Disable x-axis grid lines show: false, // Disable x-axis grid lines
}, },
axisLabel: { axisLabel: {
color: '#fff', // Change label color to white show: false // Hide y-axis labels
formatter: function (value) { }
value = Math.max(value, 0);
return (value / denominator)?.toFixed(1) + unit; // Format value in millions
},
},
}, },
], ],
series: [ series: [
{ { name: 'Floating Shares',
data: floatShares, data: floatShares,
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
color: '#3B82F6' // Change bar color to white color: '#3B82F6' // Change bar color to white
} }
}, },
{ { name: 'Outstanding Shares',
data: outstandingShares, data: outstandingShares,
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {

2
src/lib/components/TARating.svelte
View File

@ -160,7 +160,7 @@ $: if ($assetType || $stockTicker || $etfTicker || $cryptoTicker) {
<tbody> <tbody>
{#each (showFullStats ? signalList : signalList?.slice(0, 3)) as item,index} {#each (showFullStats ? signalList : signalList?.slice(0, 3)) as item,index}
<tr class="border-y border-gray-800 odd:bg-[#27272A] {index === 2 && !showFullStats && signalList?.length > 2 ? 'opacity-[0.3]' : '' }"> <tr class="border-y border-gray-800 odd:bg-[#27272A] {index === 2 && !showFullStats && signalList?.length > 2 ? 'opacity-[0.3]' : '' }">
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap"> <td class="text-white text-sm sm:text-[1rem] ">
{item?.name} {item?.name}
</td> </td>

12
src/lib/components/VaR.svelte
View File

@ -48,7 +48,7 @@ function getPlotOptions() {
}, },
animation: false, animation: false,
grid: { grid: {
left: '0%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',
top: '5%', top: '5%',
@ -75,16 +75,8 @@ function getPlotOptions() {
splitLine: { splitLine: {
show: false, // Disable x-axis grid lines show: false, // Disable x-axis grid lines
}, },
axisLabel: { axisLabel: {
color: '#fff', show: false // Hide y-axis labels
formatter: function (value, index) {
if (index % 2 === 0) {
return value?.toFixed(0)+'%'
} else {
return ''; // Hide this tick
}
}
} }
} }
], ],

27
src/lib/utils.ts
View File

@ -20,7 +20,7 @@ type FlyAndScaleParams = {
export const flyAndScale = ( export const flyAndScale = (
node: Element, 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 => { ): TransitionConfig => {
const style = getComputedStyle(node); const style = getComputedStyle(node);
const transform = style.transform === "none" ? "" : style.transform; const transform = style.transform === "none" ? "" : style.transform;
@ -28,7 +28,7 @@ export const flyAndScale = (
const scaleConversion = ( const scaleConversion = (
valueA: number, valueA: number,
scaleA: [number, number], scaleA: [number, number],
scaleB: [number, number], scaleB: [number, number]
) => { ) => {
const [minA, maxA] = scaleA; const [minA, maxA] = scaleA;
const [minB, maxB] = scaleB; const [minB, maxB] = scaleB;
@ -40,7 +40,7 @@ export const flyAndScale = (
}; };
const styleToString = ( const styleToString = (
style: Record<string, number | string | undefined>, style: Record<string, number | string | undefined>
): string => { ): string => {
return Object.keys(style).reduce((str, key) => { return Object.keys(style).reduce((str, key) => {
if (style[key] === undefined) return str; if (style[key] === undefined) return str;
@ -212,7 +212,7 @@ export function sumQuarterlyResultsByYear(quarterlyResults, namingList) {
// Filter out years with less than 4 quarters // Filter out years with less than 4 quarters
const validYears = Object?.keys(quarterCounts)?.filter( const validYears = Object?.keys(quarterCounts)?.filter(
(year) => quarterCounts[year] === 4, (year) => quarterCounts[year] === 4
); );
const annualResults = validYears?.map((year) => yearlySummaries[year]); const annualResults = validYears?.map((year) => yearlySummaries[year]);
@ -420,7 +420,7 @@ export function formatETFName(inputString) {
// Capitalize the first letter of each word // Capitalize the first letter of each word
const capitalizedWords = words?.map( 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 // Join the words back together with a space between them
@ -442,7 +442,7 @@ export function addDays(data, days, state) {
} else { } else {
const differenceInTime = result - createdDate; const differenceInTime = result - createdDate;
const differenceInDays = Math.round( const differenceInDays = Math.round(
differenceInTime / (1000 * 60 * 60 * 24), differenceInTime / (1000 * 60 * 60 * 24)
); );
return Math.abs(differenceInDays); return Math.abs(differenceInDays);
} }
@ -1207,3 +1207,18 @@ export const industryList = [
"Diversified Utilities", "Diversified Utilities",
"General Utilities", "General Utilities",
]; ];
export const monthNames = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];

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

@ -297,7 +297,7 @@ function normalizer(value) {
axisLabel: { axisLabel: {
color: '#fff', // Change label color to white color: '#fff', // Change label color to white
formatter: function (value) { formatter: function (value) {
return '$'+(value / denominator)?.toFixed(1) + unit; // Format value in millions return (value / denominator)?.toFixed(1) + unit; // Format value in millions
}, },
}, },
}, },

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

@ -264,7 +264,7 @@ function plotData()
axisLabel: { axisLabel: {
color: '#fff', // Change label color to white color: '#fff', // Change label color to white
formatter: function (value) { formatter: function (value) {
return '$'+(value / denominator)?.toFixed(1) + unit; // Format value in millions return (value / denominator)?.toFixed(1) + unit; // Format value in millions
}, },
}, },
}, },

2
src/routes/stocks/[tickerID]/stats/income/+page.svelte
View File

@ -238,7 +238,7 @@ function plotData()
axisLabel: { axisLabel: {
color: '#fff', // Change label color to white color: '#fff', // Change label color to white
formatter: function (value) { formatter: function (value) {
return '$'+(value / denominator)?.toFixed(1) + unit; // Format value in millions return (value / denominator)?.toFixed(1) + unit; // Format value in millions
}, },
}, },
}, },

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

@ -231,7 +231,7 @@ async function plotData()
axisLabel: { axisLabel: {
color: '#fff', // Change label color to white color: '#fff', // Change label color to white
formatter: function (value) { 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()
<div class="grid grid-cols-1 gap-2"> <div class="grid grid-cols-1 gap-2">
<div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"> <div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg> <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
{$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.
</div> </div>
@ -327,12 +327,12 @@ async function plotData()
</div> </div>
<h2 class="mt-5 text-2xl text-gray-200 font-semibold"> <h2 class="mt-10 text-xl text-gray-200 font-bold">
Market Cap History Market Cap History
</h2> </h2>
<ul class="text-[0.8rem] font-medium text-center w-56 pt-3 sm:w-56 mb-5 flex justify-center sm:justify-end items-center ml-auto"> <ul class="text-[0.8rem] font-medium text-center w-56 pt-5 sm:pt-3 sm:w-56 mb-5 flex m-auto sm:justify-end items-center sm:ml-auto">
<li class="w-full"> <li class="w-full">
<label on:click={() => changeTablePeriod('annual')} class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule === 'annual' ? 'bg-purple-600' : 'bg-[#2A303C]'} font-semibold border-r border-gray-600" aria-current="page"> <label on:click={() => changeTablePeriod('annual')} class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule === 'annual' ? 'bg-purple-600' : 'bg-[#2A303C]'} font-semibold border-r border-gray-600" aria-current="page">
Annual Annual