diff --git a/src/lib/components/RetailVolume.svelte b/src/lib/components/RetailVolume.svelte index 2d7dba68..31e5d95a 100644 --- a/src/lib/components/RetailVolume.svelte +++ b/src/lib/components/RetailVolume.svelte @@ -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 }, @@ -90,25 +90,44 @@ function getPlotOptions() { } }, yAxis: [ - { - type: 'value', - splitLine: { + { + name: 'Volume', + position: 'left', + type: 'value', + splitLine: { show: false, // Disable x-axis grid lines - }, - axisLabel: { + }, + axisLabel: { color: '#6E7079', // Change label color to white - formatter: function (value) { - value = Math.max(value, 0); - return '$'+(value / denominator)?.toFixed(1) + unit; // Format value in millions - }, - }, + 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', - show: false, - }, - - ], + }, + { + type: 'value', + 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: [ { data: tradingList, @@ -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 @@ $: { @@ -207,32 +226,33 @@ $: { {#if isLoaded} {#if rawData?.length !== 0} -
- -
-
- In the past six months, the {$displayCompanyName} had an average retail investor volume of {abbreviateNumber(avgVolume,true)}, with a prevailing - {#if avgSentiment === 'Bullish' } - - - {avgSentiment} - - - {:else if avgSentiment === 'Bearish' } - - - {avgSentiment} - - {:else} - - - Neutral - - {/if} trend. -
-
- +
+
+ In the past six months, the {$displayCompanyName} had an average retail investor volume of {abbreviateNumber(avgVolume,true)}, with a prevailing + {#if avgSentiment === 'Bullish' } + + + {avgSentiment} + + + {:else if avgSentiment === 'Bearish' } + + + {avgSentiment} + + {:else} + + + Neutral + + {/if} trend. +
+
+ +
+ +
@@ -269,7 +289,7 @@ $: { Retail Sentiment - {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)'}