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-10-16 18:47:00 +02:00
parent 400d8e0253
commit 3803368f53
2 changed files with 3023 additions and 1616 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4210
src/routes/stock-screener/+page.svelte
View File

File diff suppressed because it is too large Load Diff

353
src/routes/stocks/[tickerID]/+page.svelte
View File

@ -1,11 +1,5 @@
<script lang="ts"> <script lang="ts">
import { import { AreaSeries, Chart, PriceLine } from "svelte-lightweight-charts";
AreaSeries,
Chart,
PriceLine,
CandlestickSeries,
} from "svelte-lightweight-charts";
import { DateTime } from "luxon";
import { TrackingModeExitMode, ColorType } from "lightweight-charts"; import { TrackingModeExitMode, ColorType } from "lightweight-charts";
import { import {
getCache, getCache,
@ -54,8 +48,6 @@
export let data; export let data;
export let form; export let form;
let displayChartType = "line";
let prePostData = {}; let prePostData = {};
let communitySentiment = {}; let communitySentiment = {};
@ -605,9 +597,11 @@
crosshair: { crosshair: {
horzLine: { horzLine: {
visible: true, visible: true,
labelBackgroundColor: "#7E3AF2",
}, },
vertLine: { vertLine: {
labelVisible: true, labelVisible: true,
labelBackgroundColor: "#7E3AF2",
style: 0, style: 0,
}, },
}, },
@ -667,14 +661,6 @@
$globalForm = []; $globalForm = [];
}); });
function changeChartType() {
if (displayChartType === "line") {
displayChartType = "candlestick";
} else {
displayChartType = "line";
}
}
$: dataMapping = { $: dataMapping = {
"1D": oneDayPrice, "1D": oneDayPrice,
"1W": oneWeekPrice, "1W": oneWeekPrice,
@ -950,7 +936,8 @@
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<button <button
on:click={() => changeData("1D")} on:click={() => changeData("1D")}
class="text-sm font-medium text-gray-400 {displayData === '1D' class="text-sm font-medium sm:hover:text-white text-gray-400 {displayData ===
'1D'
? 'text-white ' ? 'text-white '
: 'bg-[#09090B]'}" : 'bg-[#09090B]'}"
> >
@ -965,7 +952,7 @@
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<button <button
on:click={() => changeData("1W")} on:click={() => changeData("1W")}
class="w-full text-sm font-medium text-gray-400 {displayData === class="w-full text-sm font-medium sm:hover:text-white text-gray-400 {displayData ===
'1W' '1W'
? 'text-white ' ? 'text-white '
: 'bg-[#09090B]'}" : 'bg-[#09090B]'}"
@ -981,7 +968,7 @@
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<button <button
on:click={() => changeData("1M")} on:click={() => changeData("1M")}
class="text-sm font-medium text-gray-400 {displayData === '1M' class="text-sm font-medium {displayData === '1M'
? 'text-white ' ? 'text-white '
: 'bg-[#09090B]'}" : 'bg-[#09090B]'}"
> >
@ -996,7 +983,8 @@
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<button <button
on:click={() => changeData("6M")} on:click={() => changeData("6M")}
class="text-sm font-medium text-gray-400 {displayData === '6M' class="text-sm font-medium sm:hover:text-white text-gray-400 {displayData ===
'6M'
? 'text-white ' ? 'text-white '
: 'bg-[#09090B]'}" : 'bg-[#09090B]'}"
> >
@ -1011,7 +999,8 @@
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<button <button
on:click={() => changeData("1Y")} on:click={() => changeData("1Y")}
class="text-sm font-medium text-gray-400 {displayData === '1Y' class="text-sm font-medium sm:hover:text-white text-gray-400 {displayData ===
'1Y'
? 'text-white ' ? 'text-white '
: 'bg-[#09090B]'}" : 'bg-[#09090B]'}"
> >
@ -1027,7 +1016,8 @@
<div class="flex flex-col items-center mr-4"> <div class="flex flex-col items-center mr-4">
<button <button
on:click={() => changeData("MAX")} on:click={() => changeData("MAX")}
class="text-sm font-medium text-gray-400 {displayData === 'MAX' class="text-sm font-medium sm:hover:text-white text-gray-400 {displayData ===
'MAX'
? 'text-white ' ? 'text-white '
: 'bg-[#09090B]'}" : 'bg-[#09090B]'}"
> >
@ -1040,40 +1030,9 @@
/> />
</div> </div>
<Button
on:click={changeChartType}
class="ml-auto border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
>
{#if displayChartType === "line"}
<svg
class="w-6 h-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="white"
d="M7 20v-2H5V6h2V4h2v2h2v12H9v2zm8 0v-5h-2V8h2V4h2v4h2v7h-2v5z"
/></svg
>
{:else}
<svg
class="w-6 h-6"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="none"
stroke="white"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M3 16.5L9 10l4 6l8-9.5"
/></svg
>
{/if}
</Button>
<Button <Button
on:click={exportData} on:click={exportData}
class="ml-2 border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate" class="ml-auto border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
> >
<span class="truncate text-white">Export</span> <span class="truncate text-white">Export</span>
</Button> </Button>
@ -1084,7 +1043,7 @@
<!-- Start Graph --> <!-- Start Graph -->
{#if output !== null} {#if output !== null}
<div class="w-full sm:pl-7 ml-auto max-w-5xl mb-10 mt-5"> <div class="w-full sm:pl-7 ml-auto max-w-5xl mb-10 sm:mt-10">
{#if dataMapping[displayData]?.length === 0} {#if dataMapping[displayData]?.length === 0}
<div <div
class="mt-20 flex h-[240px] justify-center items-center mb-20 m-auto" class="mt-20 flex h-[240px] justify-center items-center mb-20 m-auto"
@ -1112,179 +1071,125 @@
on:crosshairMove={handleCrosshairMove} on:crosshairMove={handleCrosshairMove}
> >
{#if displayData === "1D"} {#if displayData === "1D"}
{#if displayChartType === "line"} <AreaSeries
<AreaSeries data={oneDayPrice?.map(({ time, close }) => ({
data={oneDayPrice?.map(({ time, close }) => ({ time,
time, value: close,
value: close, }))}
}))} lineWidth={1.5}
lineWidth={1.5} priceScaleId="right"
priceScaleId="right" lineColor={colorChange}
lineColor={colorChange} topColor={topColorChange}
topColor={topColorChange} bottomColor={bottomColorChange}
bottomColor={bottomColorChange} ref={handleSeriesReference}
ref={handleSeriesReference} priceLineVisible={false}
priceLineVisible={false} >
lastPriceAnimation={1} <PriceLine
> price={oneDayPrice?.at(0)?.close}
<PriceLine lineWidth={1}
price={oneDayPrice?.at(0)?.close} color="#fff"
lineWidth={1} />
color="#fff" </AreaSeries>
/>
</AreaSeries>
{:else}
<CandlestickSeries
data={oneDayPrice}
ref={handleSeriesReference}
></CandlestickSeries>
{/if}
{:else if displayData === "1W"} {:else if displayData === "1W"}
{#if displayChartType === "line"} <AreaSeries
<AreaSeries data={oneWeekPrice?.map(({ time, close }) => ({
data={oneWeekPrice?.map(({ time, close }) => ({ time,
time, value: close,
value: close, }))}
}))} lineWidth={1.5}
lineWidth={1.5} priceScaleId="right"
priceScaleId="right" lineColor={colorChange}
lineColor={colorChange} topColor={topColorChange}
topColor={topColorChange} bottomColor={bottomColorChange}
bottomColor={bottomColorChange} ref={handleSeriesReference}
ref={handleSeriesReference} priceLineVisible={false}
priceLineVisible={false} >
lastPriceAnimation={1} <PriceLine
> price={oneWeekPrice?.at(0)?.close}
<PriceLine lineWidth={1}
price={oneWeekPrice?.at(0)?.close} color="#fff"
lineWidth={1} />
color="#fff" </AreaSeries>
/>
</AreaSeries>
{:else}
<CandlestickSeries
data={oneWeekPrice}
ref={handleSeriesReference}
></CandlestickSeries>
{/if}
{:else if displayData === "1M"} {:else if displayData === "1M"}
{#if displayChartType === "line"} <AreaSeries
<AreaSeries data={oneMonthPrice?.map(({ time, close }) => ({
data={oneMonthPrice?.map(({ time, close }) => ({ time: time,
time: time, value: close,
value: close, }))}
}))} lineWidth={1.5}
lineWidth={1.5} priceScaleId="right"
priceScaleId="right" lineColor={colorChange}
lineColor={colorChange} topColor={topColorChange}
topColor={topColorChange} bottomColor={bottomColorChange}
bottomColor={bottomColorChange} ref={handleSeriesReference}
ref={handleSeriesReference} priceLineVisible={false}
priceLineVisible={false} >
lastPriceAnimation={1} <PriceLine
> price={oneMonthPrice?.at(0)?.close}
<PriceLine lineWidth={1}
price={oneMonthPrice?.at(0)?.close} color="#fff"
lineWidth={1} />
color="#fff" </AreaSeries>
/>
</AreaSeries>
{:else}
<CandlestickSeries
data={oneMonthPrice}
ref={handleSeriesReference}
></CandlestickSeries>
{/if}
{:else if displayData === "6M"} {:else if displayData === "6M"}
{#if displayChartType === "line"} <AreaSeries
<AreaSeries data={sixMonthPrice?.map(({ time, close }) => ({
data={sixMonthPrice?.map(({ time, close }) => ({ time,
time, value: close,
value: close, }))}
}))} lineWidth={1.5}
lineWidth={1.5} priceScaleId="right"
priceScaleId="right" lineColor={colorChange}
lineColor={colorChange} topColor={topColorChange}
topColor={topColorChange} bottomColor={bottomColorChange}
bottomColor={bottomColorChange} ref={handleSeriesReference}
ref={handleSeriesReference} priceLineVisible={false}
priceLineVisible={false} >
lastPriceAnimation={1} <PriceLine
> price={sixMonthPrice?.at(0)?.close}
<PriceLine lineWidth={1}
price={sixMonthPrice?.at(0)?.close} color="#fff"
lineWidth={1} />
color="#fff" </AreaSeries>
/>
</AreaSeries>
{:else}
<CandlestickSeries
data={sixMonthPrice}
ref={handleSeriesReference}
></CandlestickSeries>
{/if}
{:else if displayData === "1Y"} {:else if displayData === "1Y"}
{#if displayChartType === "line"} <AreaSeries
<AreaSeries data={oneYearPrice?.map(({ time, close }) => ({
data={oneYearPrice?.map(({ time, close }) => ({ time,
time, value: close,
value: close, }))}
}))} lineWidth={1.5}
lineWidth={1.5} priceScaleId="right"
priceScaleId="right" lineColor={colorChange}
lineColor={colorChange} topColor={topColorChange}
topColor={topColorChange} bottomColor={bottomColorChange}
bottomColor={bottomColorChange} ref={handleSeriesReference}
ref={handleSeriesReference} priceLineVisible={false}
priceLineVisible={false} >
lastPriceAnimation={1} <PriceLine
> price={oneYearPrice?.at(0)?.close}
<PriceLine lineWidth={1}
price={oneYearPrice?.at(0)?.close} color="#fff"
lineWidth={1} />
color="#fff" </AreaSeries>
/>
</AreaSeries>
{:else}
<CandlestickSeries
data={oneYearPrice}
ref={handleSeriesReference}
>
<PriceLine
price={oneYearPrice?.at(0)?.close}
lineWidth={1}
color="#fff"
/>
</CandlestickSeries>
{/if}
{:else if displayData === "MAX"} {:else if displayData === "MAX"}
{#if displayChartType === "line"} <AreaSeries
<AreaSeries data={maxPrice?.map(({ time, close }) => ({
data={maxPrice?.map(({ time, close }) => ({ time,
time, value: close,
value: close, }))}
}))} lineWidth={1.5}
lineWidth={1.5} priceScaleId="right"
priceScaleId="right" lineColor={colorChange}
lineColor={colorChange} topColor={topColorChange}
topColor={topColorChange} bottomColor={bottomColorChange}
bottomColor={bottomColorChange} ref={handleSeriesReference}
ref={handleSeriesReference} priceLineVisible={false}
priceLineVisible={false} >
lastPriceAnimation={1} <PriceLine
> price={maxPrice?.at(0)?.close}
<PriceLine lineWidth={1}
price={maxPrice?.at(0)?.close} color="#fff"
lineWidth={1} />
color="#fff" </AreaSeries>
/>
</AreaSeries>
{:else}
<CandlestickSeries
data={maxPrice}
ref={handleSeriesReference}
></CandlestickSeries>
{/if}
{/if} {/if}
</Chart> </Chart>
{/if} {/if}