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-06-17 17:24:06 +02:00
parent ab37494b15
commit 7f294fcf56
1 changed files with 65 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,7 +70,7 @@ function getPlotOptions() {
animation: $screenWidth < 640 ? false: true,
grid: {
left: $screenWidth < 640 ? '0%' : '2%',
right: $screenWidth < 640 ? '5%' : '2%',
right: $screenWidth < 640 ? '0%' : '2%',
bottom: $screenWidth < 640 ? '0%' : '2%',
containLabel: true
},
@ -91,23 +91,42 @@ function getPlotOptions() {
},
yAxis: [
{
name: 'Volume',
position: 'left',
type: 'value',
splitLine: {
show: false, // Disable x-axis grid lines
},
axisLabel: {
color: '#6E7079', // Change label color to white
formatter: function (value) {
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
},
return '$' + (value / denominator)?.toFixed(1) + unit; // Format value in millions
} else {
return ''; // Hide this tick
}
}
},
},
{
type: 'value',
show: false,
splitLine: {
show: false, // Disable x-axis grid lines
},
name: 'Sentiment',
position: 'right',
axisLabel: {
formatter: function (value, index) {
if (index % 2 === 0) {
return value.toFixed(2); // Format the sentiment value
} else {
return ''; // Hide this tick
}
}
}
}
],
series: [
{
@ -122,7 +141,6 @@ function getPlotOptions() {
name: 'Sentiment',
data: sentimentList,
type: 'bar',
smooth: true,
yAxisIndex: 1,
itemStyle: {
color: (params) => {
@ -130,6 +148,7 @@ function getPlotOptions() {
return params.data >= 0 ? '#10DB06' : '#FF2F1F';
},
},
},
]
};
@ -199,7 +218,7 @@ $: {
</label>
<InfoModal
title={"Retail Investor Volume"}
content={"Understand retail investor activity: The green bar shows the daily volume trend, indicating if it was more bullish (above the axis) or bearish (below the axis). The white line represents the daily volume of retail investors."}
content={"Gain insights into retail investor activity with the following visualization: The green bar illustrates the daily volume trend, signifying a bullish sentiment if it ranges from 0 to 100, or bearish if it spans from -100 to just below 0. The white line depicts the daily trading volume of retail investors."}
id={"retailTraderTrackerInfo"}
/>
</div>
@ -207,10 +226,9 @@ $: {
{#if isLoaded}
{#if rawData?.length !== 0}
<div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
<div class="w-full flex flex-col items-start">
<div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
<div class="text-white text-sm sm:text-[1rem] mt-2 mb-2 w-full">
In the past six months, the {$displayCompanyName} had an average retail investor volume of <span class="font-semibold">{abbreviateNumber(avgVolume,true)}</span>, with a prevailing
{#if avgSentiment === 'Bullish' }
<span class="text-[#10DB06]">
@ -232,6 +250,8 @@ $: {
</div>
</div>
<div class="p-3 sm:p-0 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] ">
@ -269,7 +289,7 @@ $: {
<span>Retail Sentiment</span>
</td>
<td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2 { rawData?.slice(-1)?.at(0)?.sentiment > 0 ? 'text-[#10DB06]' : 'text-[#E57C34]'} ">
{rawData?.slice(-1)?.at(0)?.sentiment > 0 ? 'Bullish' : 'Bearish'}
{rawData?.slice(-1)?.at(0)?.sentiment > 0 ? rawData?.slice(-1)?.at(0)?.sentimentt+' '+'(Bullish)' : rawData?.slice(-1)?.at(0)?.sentiment+' '+'(Bearish)'}
</td>
</tr>
</tbody>