ui fix
This commit is contained in:
MuslemRahimi
parent
179c18456b
commit
8fe301e91f
@ -188,11 +188,11 @@
|
|||||||
|
|
||||||
// Loop through each point in the shared tooltip
|
// Loop through each point in the shared tooltip
|
||||||
this.points?.forEach((point) => {
|
this.points?.forEach((point) => {
|
||||||
tooltipContent += `<span class=" text-[1rem] font-[501]">${point.series.name}: ${point.y}</span><br>`;
|
tooltipContent += `<span class="text-white text-[1rem] font-[501]">${point.series.name}: ${point.y}</span><br>`;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Append the formatted date at the end
|
// Append the formatted date at the end
|
||||||
tooltipContent += `<span class=" m-auto text-black text-sm font-normal">${formattedDate}</span><br>`;
|
tooltipContent += `<span class="text-white m-auto text-black text-sm font-normal">${formattedDate}</span><br>`;
|
||||||
|
|
||||||
return tooltipContent;
|
return tooltipContent;
|
||||||
},
|
},
|
||||||
@ -674,82 +674,66 @@
|
|||||||
<!-- Start Graph -->
|
<!-- Start Graph -->
|
||||||
|
|
||||||
<div class="sm:pl-7 mt-4 mb-5 lg:flex lg:flex-row lg:gap-x-4 w-full">
|
<div class="sm:pl-7 mt-4 mb-5 lg:flex lg:flex-row lg:gap-x-4 w-full">
|
||||||
{#if dataMapping[displayData]?.length === 0}
|
<div
|
||||||
<div
|
class="order-1 lg:order-5 grow overflow-hidden border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
|
||||||
class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-300 dark:border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
|
>
|
||||||
>
|
<div class="flex items-center justify-between py-1 sm:pt-0.5">
|
||||||
<div class="h-[360px]">
|
<div class="hide-scroll overflow-x-auto">
|
||||||
<div
|
<ul class="flex space-x-2">
|
||||||
class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-300 dark:border-gray-300 dark:border-gray-800 p-6 text-center md:p-12"
|
{#each intervals as interval}
|
||||||
>
|
<li>
|
||||||
<div class="mb-4 text-[1rem] sm:text-xl font-semibold">
|
<button
|
||||||
No {displayData} chart data available
|
on:click={() => changeData(interval)}
|
||||||
</div>
|
class="cursor-pointer focus:outline-none"
|
||||||
</div>
|
>
|
||||||
</div>
|
<span
|
||||||
</div>
|
class="block px-3 py-1 rounded transition-colors duration-100 ease-in-out
|
||||||
{:else}
|
|
||||||
<div
|
|
||||||
class="order-1 lg:order-5 grow overflow-hidden border-gray-300 dark:border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
|
|
||||||
>
|
|
||||||
<div class="flex items-center justify-between py-1 sm:pt-0.5">
|
|
||||||
<div class="hide-scroll overflow-x-auto">
|
|
||||||
<ul class="flex space-x-2">
|
|
||||||
{#each intervals as interval}
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
on:click={() => changeData(interval)}
|
|
||||||
class="cursor-pointer focus:outline-none"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="block px-3 py-1 rounded transition-colors duration-100 ease-in-out
|
|
||||||
{displayData === interval
|
{displayData === interval
|
||||||
? 'bg-blue-50 text-blue-700 dark:bg-primary dark:text-white font-semibold'
|
? 'bg-blue-50 text-blue-700 dark:bg-primary dark:text-white font-semibold'
|
||||||
: 'bg-transparent text-gray-600 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
|
: 'bg-transparent text-gray-600 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
|
||||||
>
|
>
|
||||||
{interval}
|
{interval}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex shrink flex-row space-x-1 pr-1 text-sm sm:text-[1rem]"
|
class="flex shrink flex-row space-x-1 pr-1 text-sm sm:text-[1rem]"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class={displayLegend?.graphChange >= 0
|
||||||
|
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
|
||||||
|
: "text-[#FF2F1F]"}
|
||||||
>
|
>
|
||||||
<span
|
{displayLegend?.graphChange ??
|
||||||
class={displayLegend?.graphChange >= 0
|
data?.getStockQuote?.changesPercentage?.toFixed(2)}%
|
||||||
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
|
</span>
|
||||||
: "text-[#FF2F1F]"}
|
<span class="hidden text-muted dark:text-gray-200 sm:block"
|
||||||
>
|
>({displayData})</span
|
||||||
{displayLegend?.graphChange ??
|
>
|
||||||
data?.getStockQuote?.changesPercentage?.toFixed(2)}%
|
</div>
|
||||||
</span>
|
</div>
|
||||||
<span class="hidden text-muted dark:text-gray-200 sm:block"
|
|
||||||
>({displayData})</span
|
{#if output !== null && config !== null && dataMapping[displayData]?.length !== 0}
|
||||||
|
<div use:highcharts={config}></div>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="flex justify-center w-full sm:w-[650px] h-[360px] items-center"
|
||||||
|
>
|
||||||
|
<div class="relative">
|
||||||
|
<label
|
||||||
|
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||||
>
|
>
|
||||||
|
<span
|
||||||
|
class="loading loading-spinner loading-md text-gray-400"
|
||||||
|
></span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
{#if output !== null && config !== null && dataMapping[displayData]?.length !== 0}
|
</div>
|
||||||
<div use:highcharts={config}></div>
|
|
||||||
{:else}
|
|
||||||
<div
|
|
||||||
class="flex justify-center w-full sm:w-[650px] h-[360px] items-center"
|
|
||||||
>
|
|
||||||
<div class="relative">
|
|
||||||
<label
|
|
||||||
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="loading loading-spinner loading-md text-gray-400"
|
|
||||||
></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4 text-muted dark:text-white"
|
class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4 text-muted dark:text-white"
|
||||||
|
|||||||
@ -677,83 +677,69 @@
|
|||||||
<!--End Ticker Section-->
|
<!--End Ticker Section-->
|
||||||
<!-- Start Graph -->
|
<!-- Start Graph -->
|
||||||
|
|
||||||
<div class="sm:pl-7 mt-4 mb-5 lg:flex lg:flex-row lg:gap-x-4 w-full">
|
<div
|
||||||
{#if dataMapping[displayData]?.length === 0}
|
class="sm:pl-7 mt-4 mb-5 lg:flex lg:flex-row lg:gap-x-4 w-full min-h-[360px]"
|
||||||
<div
|
>
|
||||||
class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
|
<div
|
||||||
>
|
class="order-1 lg:order-5 grow overflow-hidden border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
|
||||||
<div class="h-[360px]">
|
>
|
||||||
<div
|
<div class="flex items-center justify-between py-1 sm:pt-0.5">
|
||||||
class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-300 dark:border-gray-800 p-6 text-center md:p-12"
|
<div class="hide-scroll overflow-x-auto">
|
||||||
>
|
<ul class="flex space-x-2">
|
||||||
<div class="mb-4 text-[1rem] sm:text-xl font-semibold">
|
{#each intervals as interval}
|
||||||
No {displayData} chart data available
|
<li>
|
||||||
</div>
|
<button
|
||||||
</div>
|
on:click={() => changeData(interval)}
|
||||||
</div>
|
class="cursor-pointer focus:outline-none"
|
||||||
</div>
|
>
|
||||||
{:else}
|
<span
|
||||||
<div
|
class="block px-3 py-1 rounded transition-colors duration-100 ease-in-out
|
||||||
class="order-1 lg:order-5 grow overflow-hidden border-gray-300 dark:border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
|
|
||||||
>
|
|
||||||
<div class="flex items-center justify-between py-1 sm:pt-0.5">
|
|
||||||
<div class="hide-scroll overflow-x-auto">
|
|
||||||
<ul class="flex space-x-2">
|
|
||||||
{#each intervals as interval}
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
on:click={() => changeData(interval)}
|
|
||||||
class="cursor-pointer focus:outline-none"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="block px-3 py-1 rounded transition-colors duration-100 ease-in-out
|
|
||||||
{displayData === interval
|
{displayData === interval
|
||||||
? 'bg-blue-50 text-blue-700 dark:bg-primary dark:text-white font-semibold'
|
? 'bg-blue-50 text-blue-700 dark:bg-primary dark:text-white font-semibold'
|
||||||
: 'bg-transparent text-gray-600 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
|
: 'bg-transparent text-gray-600 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
|
||||||
>
|
>
|
||||||
{interval}
|
{interval}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex shrink flex-row space-x-1 pr-1 text-sm sm:text-[1rem]"
|
class="flex shrink flex-row space-x-1 pr-1 text-sm sm:text-[1rem]"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class={displayLegend?.graphChange >= 0
|
||||||
|
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
|
||||||
|
: "text-[#FF2F1F]"}
|
||||||
>
|
>
|
||||||
<span
|
{displayLegend?.graphChange ??
|
||||||
class={displayLegend?.graphChange >= 0
|
data?.getStockQuote?.changesPercentage?.toFixed(2)}%
|
||||||
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
|
</span>
|
||||||
: "text-[#FF2F1F]"}
|
<span class="hidden text-muted dark:text-gray-200 sm:block"
|
||||||
>
|
>({displayData})</span
|
||||||
{displayLegend?.graphChange ??
|
>
|
||||||
data?.getStockQuote?.changesPercentage?.toFixed(2)}%
|
</div>
|
||||||
</span>
|
</div>
|
||||||
<span class="hidden text-muted dark:text-gray-200 sm:block"
|
|
||||||
>({displayData})</span
|
{#if output !== null && config !== null && dataMapping[displayData]?.length !== 0}
|
||||||
|
<div use:highcharts={config}></div>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="flex justify-center w-full sm:w-[650px] h-[360px] items-center"
|
||||||
|
>
|
||||||
|
<div class="relative">
|
||||||
|
<label
|
||||||
|
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||||
>
|
>
|
||||||
|
<span
|
||||||
|
class="loading loading-spinner loading-md text-gray-400"
|
||||||
|
></span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
{#if output !== null && config !== null && dataMapping[displayData]?.length !== 0}
|
</div>
|
||||||
<div use:highcharts={config}></div>
|
|
||||||
{:else}
|
|
||||||
<div
|
|
||||||
class="flex justify-center w-full sm:w-[650px] h-[360px] items-center"
|
|
||||||
>
|
|
||||||
<div class="relative">
|
|
||||||
<label
|
|
||||||
class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="loading loading-spinner loading-md text-gray-400"
|
|
||||||
></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4"
|
class="mt-10 lg:mt-0 order-5 lg:order-1 flex flex-row space-x-2 sm:space-x-3 xs:space-x-4"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user