lazy loading stock splits
This commit is contained in:
MuslemRahimi
parent
d431683e8b
commit
0ed2a92497
@ -45,13 +45,7 @@
|
|||||||
|
|
||||||
|
|
||||||
onMount(async() => {
|
onMount(async() => {
|
||||||
|
|
||||||
if (chart) {
|
|
||||||
chart.timeScale().fitContent();
|
|
||||||
}
|
|
||||||
WIIM = (await import('$lib/components/WIIM.svelte')).default;
|
WIIM = (await import('$lib/components/WIIM.svelte')).default;
|
||||||
StockSplits = (await import('$lib/components/StockSplits.svelte')).default;
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
@ -61,7 +55,6 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//==========================//
|
//==========================//
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
@ -902,228 +895,226 @@ function changeChartType() {
|
|||||||
No data available
|
No data available
|
||||||
</h2>
|
</h2>
|
||||||
{:else}
|
{:else}
|
||||||
|
|
||||||
|
<Chart {...options} autoSize={true} ref={(ref) => chart = ref} on:crosshairMove={handleCrosshairMove} >
|
||||||
|
|
||||||
<div class="chart-container">
|
{#if displayData === '1D'}
|
||||||
<Chart {...options} autoSize={true} ref={(ref) => chart = ref} on:crosshairMove={handleCrosshairMove} >
|
{#if displayChartType === 'line'}
|
||||||
|
<AreaSeries
|
||||||
{#if displayData === '1D'}
|
data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||||
{#if displayChartType === 'line'}
|
lineWidth={1.5}
|
||||||
<AreaSeries
|
priceScaleId="left"
|
||||||
data={oneDayPrice?.map(({ time, close }) => ({ time, value: close }))}
|
lineColor={colorChange}
|
||||||
lineWidth={1.5}
|
topColor={topColorChange}
|
||||||
priceScaleId="left"
|
bottomColor={bottomColorChange}
|
||||||
lineColor={colorChange}
|
crosshairMarkerVisible={false}
|
||||||
topColor={topColorChange}
|
ref={handleSeriesReference}
|
||||||
bottomColor={bottomColorChange}
|
priceLineVisible= {false}
|
||||||
|
lastPriceAnimation={1}
|
||||||
|
>
|
||||||
|
<PriceLine
|
||||||
|
price={oneDayPrice?.at(0)?.close}
|
||||||
|
lineWidth = {1}
|
||||||
|
color="#fff"
|
||||||
|
/>
|
||||||
|
</AreaSeries>
|
||||||
|
{:else}
|
||||||
|
<CandlestickSeries
|
||||||
|
data={oneDayPrice}
|
||||||
crosshairMarkerVisible={false}
|
crosshairMarkerVisible={false}
|
||||||
ref={handleSeriesReference}
|
ref={handleSeriesReference}
|
||||||
priceLineVisible= {false}
|
priceLineVisible= {false}
|
||||||
lastPriceAnimation={1}
|
|
||||||
>
|
>
|
||||||
<PriceLine
|
<PriceLine
|
||||||
price={oneDayPrice?.at(0)?.close}
|
price={oneDayPrice?.at(0)?.close}
|
||||||
lineWidth = {1}
|
lineWidth = {1}
|
||||||
color="#fff"
|
color="#fff"
|
||||||
/>
|
/>
|
||||||
</AreaSeries>
|
</CandlestickSeries>
|
||||||
{:else}
|
|
||||||
<CandlestickSeries
|
|
||||||
data={oneDayPrice}
|
|
||||||
crosshairMarkerVisible={false}
|
|
||||||
ref={handleSeriesReference}
|
|
||||||
priceLineVisible= {false}
|
|
||||||
>
|
|
||||||
<PriceLine
|
|
||||||
price={oneDayPrice?.at(0)?.close}
|
|
||||||
lineWidth = {1}
|
|
||||||
color="#fff"
|
|
||||||
/>
|
|
||||||
</CandlestickSeries>
|
|
||||||
{/if}
|
|
||||||
{:else if displayData === '1W'}
|
|
||||||
{#if displayChartType === 'line'}
|
|
||||||
<AreaSeries
|
|
||||||
data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))}
|
|
||||||
lineWidth={1.5}
|
|
||||||
priceScaleId="left"
|
|
||||||
lineColor={colorChange}
|
|
||||||
topColor={topColorChange}
|
|
||||||
bottomColor={bottomColorChange}
|
|
||||||
crosshairMarkerVisible={false}
|
|
||||||
ref={handleSeriesReference}
|
|
||||||
priceLineVisible= {false}
|
|
||||||
lastPriceAnimation={1}
|
|
||||||
>
|
|
||||||
<PriceLine
|
|
||||||
price={oneWeekPrice?.at(0)?.close}
|
|
||||||
lineWidth = {1}
|
|
||||||
color="#fff"
|
|
||||||
/>
|
|
||||||
</AreaSeries>
|
|
||||||
{:else}
|
|
||||||
<CandlestickSeries
|
|
||||||
data={oneWeekPrice}
|
|
||||||
crosshairMarkerVisible={false}
|
|
||||||
ref={handleSeriesReference}
|
|
||||||
priceLineVisible= {false}
|
|
||||||
>
|
|
||||||
<PriceLine
|
|
||||||
price={oneWeekPrice?.at(0)?.close}
|
|
||||||
lineWidth = {1}
|
|
||||||
color="#fff"
|
|
||||||
/>
|
|
||||||
</CandlestickSeries>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{:else if displayData === '1M'}
|
|
||||||
{#if displayChartType === 'line'}
|
|
||||||
<AreaSeries
|
|
||||||
data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
|
|
||||||
lineWidth={1.5}
|
|
||||||
priceScaleId="left"
|
|
||||||
lineColor={colorChange}
|
|
||||||
topColor={topColorChange}
|
|
||||||
bottomColor={bottomColorChange}
|
|
||||||
crosshairMarkerVisible={false}
|
|
||||||
ref={handleSeriesReference}
|
|
||||||
priceLineVisible= {false}
|
|
||||||
lastPriceAnimation={1}
|
|
||||||
>
|
|
||||||
<PriceLine
|
|
||||||
price={oneMonthPrice?.at(0)?.close}
|
|
||||||
lineWidth = {1}
|
|
||||||
color="#fff"
|
|
||||||
/>
|
|
||||||
</AreaSeries>
|
|
||||||
{:else}
|
|
||||||
<CandlestickSeries
|
|
||||||
data={oneMonthPrice}
|
|
||||||
crosshairMarkerVisible={false}
|
|
||||||
ref={handleSeriesReference}
|
|
||||||
priceLineVisible= {false}
|
|
||||||
>
|
|
||||||
<PriceLine
|
|
||||||
price={oneMonthPrice?.at(0)?.close}
|
|
||||||
lineWidth = {1}
|
|
||||||
color="#fff"
|
|
||||||
/>
|
|
||||||
</CandlestickSeries>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
{:else if displayData === '6M'}
|
|
||||||
{#if displayChartType === 'line'}
|
|
||||||
<AreaSeries
|
|
||||||
data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
|
|
||||||
lineWidth={1.5}
|
|
||||||
priceScaleId="left"
|
|
||||||
lineColor={colorChange}
|
|
||||||
topColor={topColorChange}
|
|
||||||
bottomColor={bottomColorChange}
|
|
||||||
crosshairMarkerVisible={false}
|
|
||||||
ref={handleSeriesReference}
|
|
||||||
priceLineVisible= {false}
|
|
||||||
lastPriceAnimation={1}
|
|
||||||
>
|
|
||||||
<PriceLine
|
|
||||||
price={sixMonthPrice?.at(0)?.close}
|
|
||||||
lineWidth = {1}
|
|
||||||
color="#fff"
|
|
||||||
/>
|
|
||||||
</AreaSeries>
|
|
||||||
{:else}
|
|
||||||
<CandlestickSeries
|
|
||||||
data={sixMonthPrice}
|
|
||||||
crosshairMarkerVisible={false}
|
|
||||||
ref={handleSeriesReference}
|
|
||||||
priceLineVisible= {false}
|
|
||||||
>
|
|
||||||
<PriceLine
|
|
||||||
price={sixMonthPrice?.at(0)?.close}
|
|
||||||
lineWidth = {1}
|
|
||||||
color="#fff"
|
|
||||||
/>
|
|
||||||
</CandlestickSeries>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{:else if displayData === '1Y'}
|
|
||||||
{#if displayChartType === 'line'}
|
|
||||||
<AreaSeries
|
|
||||||
data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))}
|
|
||||||
lineWidth={1.5}
|
|
||||||
priceScaleId="left"
|
|
||||||
lineColor={colorChange}
|
|
||||||
topColor={topColorChange}
|
|
||||||
bottomColor={bottomColorChange}
|
|
||||||
crosshairMarkerVisible={false}
|
|
||||||
ref={handleSeriesReference}
|
|
||||||
priceLineVisible= {false}
|
|
||||||
lastPriceAnimation={1}
|
|
||||||
>
|
|
||||||
<PriceLine
|
|
||||||
price={oneYearPrice?.at(0)?.close}
|
|
||||||
lineWidth = {1}
|
|
||||||
color="#fff"
|
|
||||||
/>
|
|
||||||
</AreaSeries>
|
|
||||||
{:else}
|
|
||||||
<CandlestickSeries
|
|
||||||
data={oneYearPrice}
|
|
||||||
crosshairMarkerVisible={false}
|
|
||||||
ref={handleSeriesReference}
|
|
||||||
priceLineVisible= {false}
|
|
||||||
>
|
|
||||||
<PriceLine
|
|
||||||
price={oneYearPrice?.at(0)?.close}
|
|
||||||
lineWidth = {1}
|
|
||||||
color="#fff"
|
|
||||||
/>
|
|
||||||
</CandlestickSeries>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{:else if displayData === 'MAX'}
|
|
||||||
{#if displayChartType === 'line'}
|
|
||||||
<AreaSeries
|
|
||||||
data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))}
|
|
||||||
lineWidth={1.5}
|
|
||||||
priceScaleId="left"
|
|
||||||
lineColor={colorChange}
|
|
||||||
topColor={topColorChange}
|
|
||||||
bottomColor={bottomColorChange}
|
|
||||||
crosshairMarkerVisible={false}
|
|
||||||
ref={handleSeriesReference}
|
|
||||||
priceLineVisible= {false}
|
|
||||||
lastPriceAnimation={1}
|
|
||||||
>
|
|
||||||
<PriceLine
|
|
||||||
price={threeYearPrice?.at(0)?.close}
|
|
||||||
lineWidth = {1}
|
|
||||||
color="#fff"
|
|
||||||
/>
|
|
||||||
</AreaSeries>
|
|
||||||
{:else}
|
|
||||||
<CandlestickSeries
|
|
||||||
data={threeYearPrice}
|
|
||||||
crosshairMarkerVisible={false}
|
|
||||||
ref={handleSeriesReference}
|
|
||||||
priceLineVisible= {false}
|
|
||||||
>
|
|
||||||
<PriceLine
|
|
||||||
price={threeYearPrice?.at(0)?.close}
|
|
||||||
lineWidth = {1}
|
|
||||||
color="#fff"
|
|
||||||
/>
|
|
||||||
</CandlestickSeries>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
{/if}
|
{/if}
|
||||||
</Chart>
|
{:else if displayData === '1W'}
|
||||||
</div>
|
{#if displayChartType === 'line'}
|
||||||
|
<AreaSeries
|
||||||
|
data={oneWeekPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||||
|
lineWidth={1.5}
|
||||||
|
priceScaleId="left"
|
||||||
|
lineColor={colorChange}
|
||||||
|
topColor={topColorChange}
|
||||||
|
bottomColor={bottomColorChange}
|
||||||
|
crosshairMarkerVisible={false}
|
||||||
|
ref={handleSeriesReference}
|
||||||
|
priceLineVisible= {false}
|
||||||
|
lastPriceAnimation={1}
|
||||||
|
>
|
||||||
|
<PriceLine
|
||||||
|
price={oneWeekPrice?.at(0)?.close}
|
||||||
|
lineWidth = {1}
|
||||||
|
color="#fff"
|
||||||
|
/>
|
||||||
|
</AreaSeries>
|
||||||
|
{:else}
|
||||||
|
<CandlestickSeries
|
||||||
|
data={oneWeekPrice}
|
||||||
|
crosshairMarkerVisible={false}
|
||||||
|
ref={handleSeriesReference}
|
||||||
|
priceLineVisible= {false}
|
||||||
|
>
|
||||||
|
<PriceLine
|
||||||
|
price={oneWeekPrice?.at(0)?.close}
|
||||||
|
lineWidth = {1}
|
||||||
|
color="#fff"
|
||||||
|
/>
|
||||||
|
</CandlestickSeries>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{:else if displayData === '1M'}
|
||||||
|
{#if displayChartType === 'line'}
|
||||||
|
<AreaSeries
|
||||||
|
data={oneMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||||
|
lineWidth={1.5}
|
||||||
|
priceScaleId="left"
|
||||||
|
lineColor={colorChange}
|
||||||
|
topColor={topColorChange}
|
||||||
|
bottomColor={bottomColorChange}
|
||||||
|
crosshairMarkerVisible={false}
|
||||||
|
ref={handleSeriesReference}
|
||||||
|
priceLineVisible= {false}
|
||||||
|
lastPriceAnimation={1}
|
||||||
|
>
|
||||||
|
<PriceLine
|
||||||
|
price={oneMonthPrice?.at(0)?.close}
|
||||||
|
lineWidth = {1}
|
||||||
|
color="#fff"
|
||||||
|
/>
|
||||||
|
</AreaSeries>
|
||||||
|
{:else}
|
||||||
|
<CandlestickSeries
|
||||||
|
data={oneMonthPrice}
|
||||||
|
crosshairMarkerVisible={false}
|
||||||
|
ref={handleSeriesReference}
|
||||||
|
priceLineVisible= {false}
|
||||||
|
>
|
||||||
|
<PriceLine
|
||||||
|
price={oneMonthPrice?.at(0)?.close}
|
||||||
|
lineWidth = {1}
|
||||||
|
color="#fff"
|
||||||
|
/>
|
||||||
|
</CandlestickSeries>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
|
{:else if displayData === '6M'}
|
||||||
|
{#if displayChartType === 'line'}
|
||||||
|
<AreaSeries
|
||||||
|
data={sixMonthPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||||
|
lineWidth={1.5}
|
||||||
|
priceScaleId="left"
|
||||||
|
lineColor={colorChange}
|
||||||
|
topColor={topColorChange}
|
||||||
|
bottomColor={bottomColorChange}
|
||||||
|
crosshairMarkerVisible={false}
|
||||||
|
ref={handleSeriesReference}
|
||||||
|
priceLineVisible= {false}
|
||||||
|
lastPriceAnimation={1}
|
||||||
|
>
|
||||||
|
<PriceLine
|
||||||
|
price={sixMonthPrice?.at(0)?.close}
|
||||||
|
lineWidth = {1}
|
||||||
|
color="#fff"
|
||||||
|
/>
|
||||||
|
</AreaSeries>
|
||||||
|
{:else}
|
||||||
|
<CandlestickSeries
|
||||||
|
data={sixMonthPrice}
|
||||||
|
crosshairMarkerVisible={false}
|
||||||
|
ref={handleSeriesReference}
|
||||||
|
priceLineVisible= {false}
|
||||||
|
>
|
||||||
|
<PriceLine
|
||||||
|
price={sixMonthPrice?.at(0)?.close}
|
||||||
|
lineWidth = {1}
|
||||||
|
color="#fff"
|
||||||
|
/>
|
||||||
|
</CandlestickSeries>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{:else if displayData === '1Y'}
|
||||||
|
{#if displayChartType === 'line'}
|
||||||
|
<AreaSeries
|
||||||
|
data={oneYearPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||||
|
lineWidth={1.5}
|
||||||
|
priceScaleId="left"
|
||||||
|
lineColor={colorChange}
|
||||||
|
topColor={topColorChange}
|
||||||
|
bottomColor={bottomColorChange}
|
||||||
|
crosshairMarkerVisible={false}
|
||||||
|
ref={handleSeriesReference}
|
||||||
|
priceLineVisible= {false}
|
||||||
|
lastPriceAnimation={1}
|
||||||
|
>
|
||||||
|
<PriceLine
|
||||||
|
price={oneYearPrice?.at(0)?.close}
|
||||||
|
lineWidth = {1}
|
||||||
|
color="#fff"
|
||||||
|
/>
|
||||||
|
</AreaSeries>
|
||||||
|
{:else}
|
||||||
|
<CandlestickSeries
|
||||||
|
data={oneYearPrice}
|
||||||
|
crosshairMarkerVisible={false}
|
||||||
|
ref={handleSeriesReference}
|
||||||
|
priceLineVisible= {false}
|
||||||
|
>
|
||||||
|
<PriceLine
|
||||||
|
price={oneYearPrice?.at(0)?.close}
|
||||||
|
lineWidth = {1}
|
||||||
|
color="#fff"
|
||||||
|
/>
|
||||||
|
</CandlestickSeries>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{:else if displayData === 'MAX'}
|
||||||
|
{#if displayChartType === 'line'}
|
||||||
|
<AreaSeries
|
||||||
|
data={threeYearPrice?.map(({ time, close }) => ({ time, value: close }))}
|
||||||
|
lineWidth={1.5}
|
||||||
|
priceScaleId="left"
|
||||||
|
lineColor={colorChange}
|
||||||
|
topColor={topColorChange}
|
||||||
|
bottomColor={bottomColorChange}
|
||||||
|
crosshairMarkerVisible={false}
|
||||||
|
ref={handleSeriesReference}
|
||||||
|
priceLineVisible= {false}
|
||||||
|
lastPriceAnimation={1}
|
||||||
|
>
|
||||||
|
<PriceLine
|
||||||
|
price={threeYearPrice?.at(0)?.close}
|
||||||
|
lineWidth = {1}
|
||||||
|
color="#fff"
|
||||||
|
/>
|
||||||
|
</AreaSeries>
|
||||||
|
{:else}
|
||||||
|
<CandlestickSeries
|
||||||
|
data={threeYearPrice}
|
||||||
|
crosshairMarkerVisible={false}
|
||||||
|
ref={handleSeriesReference}
|
||||||
|
priceLineVisible= {false}
|
||||||
|
>
|
||||||
|
<PriceLine
|
||||||
|
price={threeYearPrice?.at(0)?.close}
|
||||||
|
lineWidth = {1}
|
||||||
|
color="#fff"
|
||||||
|
/>
|
||||||
|
</CandlestickSeries>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
|
{/if}
|
||||||
|
</Chart>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -1432,14 +1423,14 @@ function changeChartType() {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--Start DCF -->
|
<!--
|
||||||
|
<Lazy>
|
||||||
<div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {!$dcfComponent ? 'hidden' : ''}">
|
<div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {!$dcfComponent ? 'hidden' : ''}">
|
||||||
{#await import('$lib/components/DCF.svelte') then {default: Comp}}
|
{#await import('$lib/components/DCF.svelte') then {default: Comp}}
|
||||||
<svelte:component this={Comp} data={data}/>
|
<svelte:component this={Comp} data={data}/>
|
||||||
{/await}
|
{/await}
|
||||||
</div>
|
</div>
|
||||||
<!--End DCF-->
|
</Lazy>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
<div class="w-full m-auto pt-10 sm:pl-6 sm:pb-6 sm:pt-6 {!$correlationComponent ? 'hidden' : ''}">
|
<div class="w-full m-auto pt-10 sm:pl-6 sm:pb-6 sm:pt-6 {!$correlationComponent ? 'hidden' : ''}">
|
||||||
@ -1449,15 +1440,13 @@ function changeChartType() {
|
|||||||
</div>
|
</div>
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!--Start Stock Splits-->
|
<Lazy>
|
||||||
{#if StockSplits && stockDeck?.at(0)?.stockSplits?.length !== 0}
|
<div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto {stockDeck?.at(0)?.stockSplits?.length === 0 ? 'hidden' : ''}">
|
||||||
<div class="w-full pt-10 sm:pl-6 sm:pb-6 sm:pt-6 m-auto rounded-2xl mb-10">
|
{#await import('$lib/components/StockSplits.svelte') then {default: Comp}}
|
||||||
<StockSplits
|
<svelte:component this={Comp} stockDeck={stockDeck}/>
|
||||||
stockDeck={stockDeck}
|
{/await}
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</Lazy>
|
||||||
<!--End Stock Splits-->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1480,13 +1469,7 @@ function changeChartType() {
|
|||||||
|
|
||||||
<style lang='scss'>
|
<style lang='scss'>
|
||||||
|
|
||||||
.chart-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 350px;
|
|
||||||
min-height: 300px;
|
|
||||||
display: block; /* Ensures the container is visible */
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas {
|
canvas {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user