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

remove lazy load

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-07 10:23:01 +02:00
parent 6ea0a1c7f8
commit 10a0d29603
16 changed files with 45 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -264,7 +264,7 @@ $: {
<div class="flex flex-row items-center justify-between m-auto mt-10">
<div class="flex flex-row items-center w-1/2 sm:w-full justify-center">
<div class="h-full bg-gray-800 transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#00BBFF] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#3B82F6] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
<span class="text-white text-sm sm:text-md sm:font-medium inline-block">
Analyst Forecast
</span>

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

@ -8,7 +8,6 @@
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import Lazy from 'svelte-lazy';
export let data;
@ -160,10 +159,10 @@ function findLowestAndHighestFee(data, lastDateStr) {
{
data: feeList,
type: 'line',
areaStyle: {opacity: 0.3},
areaStyle: {opacity: 1},
yAxisIndex: 1,
itemStyle: {
color: '#FF9E21' // Change bar color to white
color: '#22C55E' // Change bar color to white
},
showSymbol: false
},
@ -259,11 +258,9 @@ function findLowestAndHighestFee(data, lastDateStr) {
<div class="pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</div>

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

@ -3,7 +3,6 @@
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber, formatDateRange } from "$lib/utils";
import Lazy from 'svelte-lazy';
import { init, use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
@ -248,11 +247,9 @@ $: {
<div class="pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</div>
@ -288,7 +285,7 @@ $: {
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Date</span>
</td>
<td class="px-[5px] py-1.5 text-sm sm:text[1rem] text-right font-medium xs:px-2.5 xs:py-2">
<td class="px-[5px] py-1.5 text-sm sm:text-[1rem] text-right font-medium xs:px-2.5 xs:py-2">
{ formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
</td>
</tr>

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

@ -3,7 +3,6 @@
import { enterpriseComponent, displayCompanyName, stockTicker, screenWidth, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts';
import Lazy from 'svelte-lazy';
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
@ -207,11 +206,9 @@ $: {
Full report
</a>
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
<div class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12">
<div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">

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

@ -4,8 +4,6 @@
import { Chart } from 'svelte-echarts'
import { abbreviateNumber, formatDateRange } from "$lib/utils";
import Lazy from 'svelte-lazy';
import { init, use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
@ -156,10 +154,10 @@ function findLowestAndHighestPrice(data, lastDateStr) {
{
data: failToDeliverList,
type: 'line',
areaStyle: {opacity: 0.3},
areaStyle: {opacity: 1},
yAxisIndex: 1,
itemStyle: {
color: '#FF9E21' // Change bar color to white
color: '#E11D48' // Change bar color to white
},
showSymbol: false
},
@ -267,11 +265,9 @@ function findLowestAndHighestPrice(data, lastDateStr) {
<div class="pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</div>

4
src/lib/components/ImpliedVolatility.svelte
View File

@ -170,7 +170,7 @@ function changeStatement(event)
stack: 'ImpliedVolatility',
yAxisIndex: 1,
itemStyle: {
color: '#00BBFF'
color: '#3B82F6'
},
showSymbol: false,
@ -309,7 +309,7 @@ function changeStatement(event)
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#00BBFF] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#3B82F6] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Realized Volatility
</span>

2
src/lib/components/LayerCake/Bar/Bar.svelte
View File

@ -7,7 +7,7 @@
const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
/** @type {String} [fill='#00bbff'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
/** @type {String} [fill='#3B82F6'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
export let fill = '#fff';
</script>

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

@ -8,7 +8,6 @@
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import Lazy from 'svelte-lazy';
use([LineChart, GridComponent, CanvasRenderer])
@ -138,10 +137,10 @@ function getPlotOptions() {
{
data: shareQuantityList,
type: 'line',
areaStyle: {opacity: 0.3},
areaStyle: {opacity: 1},
yAxisIndex: 1,
itemStyle: {
color: '#00BBFF' // Change bar color to white
color: '#3B82F6' // Change bar color to white
},
showSymbol: false
},
@ -255,11 +254,9 @@ else {
<div class="pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</div>
@ -273,7 +270,7 @@ else {
</div>
<div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
<div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#00BBFF] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<div class="w-3 h-3 bg-[#3B82F6] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
<span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
Share Quantity
</span>

3
src/lib/components/OptionsNetFlow.svelte
View File

@ -2,7 +2,6 @@
import { optionsNetFlowComponent, stockTicker, assetType, etfTicker, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import Lazy from 'svelte-lazy';
import { init, use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
@ -241,11 +240,9 @@
<div class="pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>
</div>

9
src/lib/components/PriceAnalysis.svelte
View File

@ -3,7 +3,6 @@
import { priceAnalysisComponent, displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, screenWidth, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import Lazy from 'svelte-lazy';
import { init, use } from 'echarts/core'
@ -294,11 +293,9 @@ $: {
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] ">
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>
<div class="app w-full h-[300px]">
<Chart {init} options={optionsData} class="chart" />
</div>
<div class="text-white text-[1rem] mt-4 sm:mt-7 ml-1">
Over the next 12 months, the model predicts a

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

@ -4,7 +4,6 @@
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber, formatDateRange } from "$lib/utils";
import Lazy from 'svelte-lazy';
import { init, use } from 'echarts/core'
import { LineChart, BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
@ -291,11 +290,9 @@ $: {
<div class="pb-8 sm:pb-2 rounded-lg bg-[#09090B]">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</div>
@ -316,7 +313,7 @@ $: {
<td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
<span>Date</span>
</td>
<td class="px-[5px] text-sm py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
<td class="px-[5px] text-sm sm:text-[1rem] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
{formatDateRange(rawData?.lastDate)}
</td>
</tr>

4
src/lib/components/RevenueSegmentation.svelte
View File

@ -240,8 +240,8 @@ $: {
>
<Svg>
<Sankey
colorNodes={d => '#00bbff'}
colorLinks={d => '#00bbff35'}
colorNodes={d => '#3B82F6'}
colorLinks={d => '#3B82F635'}
/>
</Svg>
</LayerCake>

9
src/lib/components/ShareHolders.svelte
View File

@ -6,7 +6,6 @@ import { formatString } from '$lib/utils';
import { goto } from '$app/navigation';
import { abbreviateNumber } from '$lib/utils';
import InfoModal from '$lib/components/InfoModal.svelte';
import Lazy from 'svelte-lazy';
import { init, use } from 'echarts/core'
import { PieChart } from 'echarts/charts'
@ -187,11 +186,9 @@ let charNumber = 20;
<div class="flex flex-row items-center sm:-mt-5">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-56">
<Chart {init} options={optionsPieChart} class="chart w-full" />
</div>
</Lazy>
<div class="app w-56">
<Chart {init} options={optionsPieChart} class="chart w-full" />
</div>
<div class="flex flex-col items-center sm:pt-0 m-auto">

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

@ -5,7 +5,6 @@ import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber } from "$lib/utils";
import Lazy from 'svelte-lazy';
import { init, use } from 'echarts/core'
@ -91,14 +90,14 @@ function getPlotOptions() {
data: floatShares,
type: 'bar',
itemStyle: {
color: '#5470C6' // Change bar color to white
color: '#3B82F6' // Change bar color to white
}
},
{
data: outstandingShares,
type: 'bar',
itemStyle: {
color: '#C12F23' // Change bar color to white
color: '#E11D48'
}
},
]
@ -188,11 +187,9 @@ $: {
</div>
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-6">
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>
<div class="app w-full h-[300px] mt-6">
<Chart {init} options={optionsData} class="chart" />
</div>
<div class="flex flex-row items-center justify-between mx-auto mt-8 w-full sm:w-11/12">

6
src/lib/components/Swap.svelte
View File

@ -9,9 +9,7 @@
import { init, use } from 'echarts/core'
import { ScatterChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import Lazy from 'svelte-lazy';
import { CanvasRenderer } from 'echarts/renderers';
export let data;
use([ScatterChart, GridComponent, CanvasRenderer])
@ -277,11 +275,9 @@
</div>
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>
</div>

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

@ -2,7 +2,6 @@
import { taRatingComponent, stockTicker, etfTicker, cryptoTicker, assetType, getCache, setCache} from '$lib/store';
import SignalBar from '$lib/components/SignalBar.svelte'
import InfoModal from '$lib/components/InfoModal.svelte';
import Lazy from 'svelte-lazy';
export let data;
@ -151,7 +150,6 @@ $: if ($assetType || $stockTicker || $etfTicker || $cryptoTicker) {
<!--Start Momentum Indicators-->
<div class="w-full overflow-hidden">
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<table class="table table-sm table-compact w-full mb-5 mt-5">
<!-- head -->
<thead>
@ -188,7 +186,6 @@ $: if ($assetType || $stockTicker || $etfTicker || $cryptoTicker) {
<svg class="w-10 h-10 transform {showFullStats ? 'rotate-180' : ''} " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#2A323C" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"/></svg>
</label>
</Lazy>
</div>
<!--End Momentum Indicators-->