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

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

File diff suppressed because it is too large Load Diff

125
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,7 +1071,6 @@
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,
@ -1125,7 +1083,6 @@
bottomColor={bottomColorChange} bottomColor={bottomColorChange}
ref={handleSeriesReference} ref={handleSeriesReference}
priceLineVisible={false} priceLineVisible={false}
lastPriceAnimation={1}
> >
<PriceLine <PriceLine
price={oneDayPrice?.at(0)?.close} price={oneDayPrice?.at(0)?.close}
@ -1133,14 +1090,7 @@
color="#fff" 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,
@ -1153,7 +1103,6 @@
bottomColor={bottomColorChange} bottomColor={bottomColorChange}
ref={handleSeriesReference} ref={handleSeriesReference}
priceLineVisible={false} priceLineVisible={false}
lastPriceAnimation={1}
> >
<PriceLine <PriceLine
price={oneWeekPrice?.at(0)?.close} price={oneWeekPrice?.at(0)?.close}
@ -1161,14 +1110,7 @@
color="#fff" 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,
@ -1181,7 +1123,6 @@
bottomColor={bottomColorChange} bottomColor={bottomColorChange}
ref={handleSeriesReference} ref={handleSeriesReference}
priceLineVisible={false} priceLineVisible={false}
lastPriceAnimation={1}
> >
<PriceLine <PriceLine
price={oneMonthPrice?.at(0)?.close} price={oneMonthPrice?.at(0)?.close}
@ -1189,14 +1130,7 @@
color="#fff" 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,
@ -1209,7 +1143,6 @@
bottomColor={bottomColorChange} bottomColor={bottomColorChange}
ref={handleSeriesReference} ref={handleSeriesReference}
priceLineVisible={false} priceLineVisible={false}
lastPriceAnimation={1}
> >
<PriceLine <PriceLine
price={sixMonthPrice?.at(0)?.close} price={sixMonthPrice?.at(0)?.close}
@ -1217,14 +1150,7 @@
color="#fff" 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,
@ -1237,7 +1163,6 @@
bottomColor={bottomColorChange} bottomColor={bottomColorChange}
ref={handleSeriesReference} ref={handleSeriesReference}
priceLineVisible={false} priceLineVisible={false}
lastPriceAnimation={1}
> >
<PriceLine <PriceLine
price={oneYearPrice?.at(0)?.close} price={oneYearPrice?.at(0)?.close}
@ -1245,20 +1170,7 @@
color="#fff" 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,
@ -1271,7 +1183,6 @@
bottomColor={bottomColorChange} bottomColor={bottomColorChange}
ref={handleSeriesReference} ref={handleSeriesReference}
priceLineVisible={false} priceLineVisible={false}
lastPriceAnimation={1}
> >
<PriceLine <PriceLine
price={maxPrice?.at(0)?.close} price={maxPrice?.at(0)?.close}
@ -1279,12 +1190,6 @@
color="#fff" color="#fff"
/> />
</AreaSeries> </AreaSeries>
{:else}
<CandlestickSeries
data={maxPrice}
ref={handleSeriesReference}
></CandlestickSeries>
{/if}
{/if} {/if}
</Chart> </Chart>
{/if} {/if}