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

add tree-shakeable for echarts

Browse Source
This commit is contained in:
MuslemRahimi 2024-08-05 17:37:49 +02:00
parent a2846a337f
commit 0e3ae010ab
32 changed files with 317 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@ -74,7 +74,7 @@
"autoprefixer": "^10.4.19",
"daisyui": "^4.12.3",
"date-picker-svelte": "^2.12.0",
"echarts": "^5.5.0",
"echarts": "^5.5.1",
"object-to-formdata": "^4.5.1",
"postcss": "^8.4.38",
"prettier": "^3.2.5",
@ -84,7 +84,7 @@
"sass": "^1.75.0",
"svelte": "^4.2.15",
"svelte-check": "^3.6.9",
"svelte-echarts": "^0.1.1",
"svelte-echarts": "^1.0.0-rc3",
"svelte-french-toast": "^1.2.0",
"svelte-intersection-observer": "^1.0.0",
"svelte-lazy": "^1.2.7",
@ -7496,12 +7496,12 @@
}
},
"node_modules/svelte-echarts": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/svelte-echarts/-/svelte-echarts-0.1.1.tgz",
"integrity": "sha512-kLnTPz6gmRl47Oe/Vjh6sIRBYRUUmzl8uvrdMg9wFXe1ur6L/xBo3c7e5lMBQarPRteC24+XT335P/htNyihHA==",
"version": "1.0.0-rc3",
"resolved": "https://registry.npmjs.org/svelte-echarts/-/svelte-echarts-1.0.0-rc3.tgz",
"integrity": "sha512-jM9EU4m7yFJaISCXhnGgtYirMD1VP2DzoI3Lhbl2jsvGzZFIAg8wsn/5n8GccZxm7wHgzcEL48EVJVlrKPU7gQ==",
"dev": true,
"peerDependencies": {
"echarts": "^5.4.3",
"echarts": "^5.0.0",
"svelte": "^4.0.0"
}
},

4
package.json
View File

@ -28,7 +28,7 @@
"autoprefixer": "^10.4.19",
"daisyui": "^4.12.3",
"date-picker-svelte": "^2.12.0",
"echarts": "^5.5.0",
"echarts": "^5.5.1",
"object-to-formdata": "^4.5.1",
"postcss": "^8.4.38",
"prettier": "^3.2.5",
@ -38,7 +38,7 @@
"sass": "^1.75.0",
"svelte": "^4.2.15",
"svelte-check": "^3.6.9",
"svelte-echarts": "^0.1.1",
"svelte-echarts": "^1.0.0-rc3",
"svelte-french-toast": "^1.2.0",
"svelte-intersection-observer": "^1.0.0",
"svelte-lazy": "^1.2.7",

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

@ -4,9 +4,17 @@
import { Chart } from 'svelte-echarts'
import { abbreviateNumber, formatDateRange } from "$lib/utils";
import { init, use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import Lazy from 'svelte-lazy';
export let data;
use([LineChart, GridComponent, CanvasRenderer])
let isLoaded = false;
let rawData = [];
@ -253,7 +261,7 @@ function findLowestAndHighestFee(data, lastDateStr) {
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>

7
src/lib/components/ClinicalTrial.svelte
View File

@ -3,6 +3,11 @@
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber, formatString } from "$lib/utils";
import { init, use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([LineChart, GridComponent, CanvasRenderer])
import Lazy from 'svelte-lazy';
export let data;
@ -245,7 +250,7 @@ let charNumber = 20;
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>

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

@ -4,6 +4,12 @@
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'
import { CanvasRenderer } from 'echarts/renderers'
use([LineChart, GridComponent, CanvasRenderer])
export let data;
@ -244,7 +250,7 @@ $: {
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>

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

@ -4,9 +4,16 @@
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'
import { CanvasRenderer } from 'echarts/renderers'
export let data;
// now with tree-shaking
use([BarChart, GridComponent, CanvasRenderer])
let isLoaded = false;
let rawData = [];
@ -202,7 +209,7 @@ $: {
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>

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

@ -5,8 +5,16 @@
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'
import { CanvasRenderer } from 'echarts/renderers'
export let data;
use([LineChart, GridComponent, CanvasRenderer])
let isLoaded = false;
@ -261,7 +269,7 @@ function findLowestAndHighestPrice(data, lastDateStr) {
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>

10
src/lib/components/GovernmentContract.svelte
View File

@ -2,7 +2,13 @@
import { governmentContractComponent, displayCompanyName, stockTicker, screenWidth, getCache, setCache} from '$lib/store';
import InfoModal from '$lib/components/InfoModal.svelte';
import { Chart } from 'svelte-echarts'
import { abbreviateNumber, formatString } from "$lib/utils";
import { abbreviateNumber } from "$lib/utils";
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
import Lazy from 'svelte-lazy';
export let data;
@ -238,7 +244,7 @@
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>

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

@ -4,6 +4,12 @@
import { Chart } from 'svelte-echarts'
import { 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'
import { CanvasRenderer } from 'echarts/renderers'
use([LineChart, GridComponent, CanvasRenderer])
export let data;
@ -279,7 +285,7 @@ function changeStatement(event)
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>

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

@ -4,7 +4,15 @@
import { Chart } from 'svelte-echarts'
import { abbreviateNumber, formatString, formatDateRange } from "$lib/utils";
import { init, use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import Lazy from 'svelte-lazy';
use([LineChart, GridComponent, CanvasRenderer])
export let data;
let isLoaded = false;
@ -249,7 +257,7 @@ else {
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>

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

@ -3,9 +3,15 @@
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'
import { CanvasRenderer } from 'echarts/renderers'
export let data;
use([LineChart, GridComponent, CanvasRenderer])
let isLoaded = false;
@ -237,7 +243,7 @@
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>

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

@ -5,6 +5,15 @@
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'
import { CanvasRenderer } from 'echarts/renderers'
use([LineChart, GridComponent, CanvasRenderer])
export let data;
let isLoaded = false;
@ -287,7 +296,7 @@ $: {
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] ">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>

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

@ -5,6 +5,13 @@
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'
import { CanvasRenderer } from 'echarts/renderers'
use([LineChart, BarChart, GridComponent, CanvasRenderer])
export let data;
@ -286,7 +293,7 @@ $: {
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>

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

@ -1,8 +1,13 @@
<script lang='ts'>
//import { Chart } from 'svelte-echarts';
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'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
import {stockTicker, etfTicker, cryptoTicker, assetType} from '$lib/store';
@ -292,7 +297,7 @@
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5 mb-16">
<Chart options={optionsAnnualReturn} class="chart" />
<Chart {init} options={optionsAnnualReturn} class="chart" />
</div>
</Lazy>
@ -305,7 +310,7 @@
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5 mb-16">
<Chart options={optionsMonthlyDistributionReturn} class="chart" />
<Chart {init} options={optionsMonthlyDistributionReturn} class="chart" />
</div>
</Lazy>
{/if}

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

@ -1,13 +1,21 @@
<script lang='ts'>
import { Chart } from 'svelte-echarts'
import { shareholderComponent, screenWidth, stockTicker, getCache, setCache, displayCompanyName} from '$lib/store';
import { shareholderComponent, stockTicker, getCache, setCache, displayCompanyName} from '$lib/store';
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'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([PieChart, GridComponent, CanvasRenderer])
export let data;
let isLoaded = false;
@ -148,16 +156,6 @@ $: {
let charNumber = 20;
$: {
if($screenWidth < 640)
{
charNumber = 20;
}
else {
charNumber =20;
}
}
</script>
@ -191,7 +189,7 @@ $: {
<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 options={optionsPieChart} class="chart w-full" />
<Chart {init} options={optionsPieChart} class="chart w-full" />
</div>
</Lazy>

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

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

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

@ -6,9 +6,16 @@
import { Chart } from 'svelte-echarts'
import { Motion, AnimateSharedLayout } from "svelte-motion";
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';
export let data;
use([ScatterChart, GridComponent, CanvasRenderer])
let isLoaded = false;
const tabs = [
@ -272,7 +279,7 @@
<Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
<div class="app w-full h-[300px] mt-5">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
</Lazy>

11
src/routes/etf/[tickerID]/dividends/+page.svelte
View File

@ -1,6 +1,11 @@
<script lang="ts">
import {numberOfUnreadNotification, displayCompanyName, etfTicker} from '$lib/store';
import Chart from '$lib/components/Chart.svelte'
import { Chart } from 'svelte-echarts'
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
export let data;
@ -225,7 +230,7 @@
{#if stockDividends?.length !== 0}
<div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#09090B] shadow-md rounded-xl p-5 flex justify-center items-center mb-2">
<div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#27272A] shadow-md rounded-lg p-5 flex justify-center items-center mb-2">
<!--Start Column Title-->
<div class="flex flex-col">
<div class="flex flex-row items-center">
@ -336,7 +341,7 @@
{#if mode}
<div class="app w-full ">
<Chart options={optionsDividend} class="chart" />
<Chart {init} options={optionsDividend} class="chart" />
</div>
<span class="text-gray-200 text-sm italic">

10
src/routes/etf/[tickerID]/options/+page.svelte
View File

@ -6,6 +6,12 @@
import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte'
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
export let data;
@ -305,7 +311,7 @@
{#if optionsPlotData?.length !== 0}
<div class="stats stats-horizontal bg-[#09090B] w-full rounded-lg">
<div class="stats stats-horizontal bg-[#27272A] w-full rounded-lg">
<div class="grid grid-cols-2">
@ -387,7 +393,7 @@
<div class="app w-full bg-[#09090B] bg-opacity-1 rounded-xl">
<Chart options={options} class="chart" />
<Chart {init} options={options} class="chart" />
</div>

11
src/routes/heatmaps/+page.svelte
View File

@ -1,12 +1,15 @@
<script lang='ts'>
import Chart from '$lib/components/Chart.svelte'
import { screenWidth, numberOfUnreadNotification } from '$lib/store';
import { goto } from '$app/navigation';
//import * as echarts from 'echarts';
import { Chart } from 'svelte-echarts'
import { init, use } from 'echarts/core'
import { HeatmapChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([HeatmapChart, GridComponent, CanvasRenderer])
export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
@ -414,7 +417,7 @@ $: {
<div class="app w-[100vw] h-full mt-10">
<Chart id="treemap" options={options} class="chart w-full h-full" />
<Chart id="treemap" {init} options={options} class="chart w-full h-full" />
</div>

8
src/routes/hedge-funds/[slug]/+page.svelte
View File

@ -10,6 +10,12 @@
import { abbreviateNumber, formatString } from '$lib/utils';
import { Chart } from 'svelte-echarts'
import { init, use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([LineChart, GridComponent, CanvasRenderer])
import { onMount } from 'svelte';
@ -535,7 +541,7 @@ function tabFunction(state) {
</div>
<div class="app w-full h-[300px] ">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>

8
src/routes/politicians/[slug]/+page.svelte
View File

@ -8,6 +8,12 @@
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import { Chart } from 'svelte-echarts'
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
import { onMount } from 'svelte';
export let data;
@ -352,7 +358,7 @@
<span class="ml-3 text-white text-xl">Trade Amount by Year</span>
</div>
<div class="app w-full h-[300px] ">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
<div class="flex flex-row items-center justify-between mx-auto mt-10 sm:mt-5 w-56 sm:w-80">

11
src/routes/reddit-tracker/+page.svelte
View File

@ -11,6 +11,11 @@ import Link from "lucide-svelte/icons/external-link";
import ThumbsUp from "lucide-svelte/icons/thumbs-up";
import MessageCircle from "lucide-svelte/icons/message-circle";
import Lazy from '$lib/components/Lazy.svelte';
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
@ -339,7 +344,7 @@ const optionCompanySpread = {
<Card.Content>
<Lazy>
<div class="app w-full h-[150px]">
<Chart options={optionGraphPost} class="chart" />
<Chart {init} options={optionGraphPost} class="chart" />
</div>
</Lazy>
</Card.Content>
@ -361,7 +366,7 @@ const optionCompanySpread = {
<Card.Content>
<Lazy>
<div class="app w-full h-[150px]">
<Chart options={optionGraphComment} class="chart" />
<Chart {init} options={optionGraphComment} class="chart" />
</div>
</Lazy>
</Card.Content>
@ -384,7 +389,7 @@ const optionCompanySpread = {
<Card.Content>
<Lazy>
<div class="app w-full h-[150px]">
<Chart options={optionGraphCompanySpread} class="chart" />
<Chart {init} options={optionGraphCompanySpread} class="chart" />
</div>
</Lazy>
</Card.Content>

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

@ -131,7 +131,7 @@ changeTab(0)
{#if historyList?.length !== 0}
<div class="stats stats-horizontal bg-[#09090B] w-full rounded-lg pr-6 sm:pr-0">
<div class="stats stats-horizontal bg-[#272727] w-full rounded-lg pr-6 sm:pr-0">
<div class="grid grid-cols-2">

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

@ -1,9 +1,17 @@
<script lang="ts">
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
import Chart from '$lib/components/Chart.svelte'
import { onMount } from 'svelte';
import Lazy from 'svelte-lazy';
import { Chart } from 'svelte-echarts'
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
export let data;
let dateDistance;
@ -198,7 +206,7 @@ onMount(async() => {
{#if stockDividends?.length !== 0}
<div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#09090B] shadow-md rounded-xl p-5 flex justify-center items-center mb-2">
<div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#27272A] shadow-md rounded-lg p-5 flex justify-center items-center mb-2">
<!--Start Column Title-->
<div class="flex flex-col">
<div class="flex flex-row items-center">
@ -309,7 +317,7 @@ onMount(async() => {
{#if mode}
<Lazy height={300} fadeOption={{delay: 0, duration: 0}} keep={true}>
<div class="app w-full ">
<Chart options={optionsDividend} class="chart" />
<Chart {init} options={optionsDividend} class="chart" />
</div>
</Lazy>

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

@ -2,9 +2,15 @@
import { displayCompanyName, numberOfUnreadNotification, stockTicker } from '$lib/store';
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import { formatString, abbreviateNumber } from '$lib/utils';
import Chart from '$lib/components/Chart.svelte';
import InfoModal from '$lib/components/InfoModal.svelte';
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import { Chart } from 'svelte-echarts'
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
import { onMount } from 'svelte';
@ -349,7 +355,7 @@ onMount(async() => {
{#if Object?.keys(options)?.length !== 0}
<div class="app w-full h-[400px] sm:h-[500px]">
<Chart options={options} class="chart" />
<Chart {init} options={options} class="chart" />
</div>
<div class="flex flex-row items-center justify-between mx-auto mb-10 w-full sm:w-5/6">

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

@ -6,6 +6,11 @@ import { abbreviateNumber } from '$lib/utils';
import InfoModal from '$lib/components/InfoModal.svelte';
import { onMount } from 'svelte'
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
export let data;
@ -305,7 +310,7 @@ $: {
{#if optionsPlotData?.length !== 0}
<div class="stats stats-horizontal bg-[#09090B] w-full rounded-lg">
<div class="stats stats-horizontal bg-[#272727] w-full rounded-lg">
<div class="grid grid-cols-2">
@ -387,7 +392,7 @@ $: {
<div class="app w-full bg-[#09090B] bg-opacity-1 rounded-xl">
<Chart options={options} class="chart" />
<Chart {init} options={options} class="chart" />
</div>

11
src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
View File

@ -4,6 +4,13 @@
import { abbreviateNumber,sumQuarterlyResultsByYear } from '$lib/utils';
//import * as XLSX from 'xlsx';
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
export let data;
@ -480,7 +487,7 @@ $: {
</label>
<label for="timeFrameModal" class="cursor-pointer bg-[#09090B] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
<label for="timeFrameModal" class="cursor-pointer bg-[#27272A] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
<div class="flex flex-row items-center">
<span class="m-auto mr-0.5 text-white text-sm">{timeFrame}</span>
<svg class="inline-block w-4 h-4 ml-1 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g transform="rotate(180 512 512)"> <path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/></g></svg>
@ -558,7 +565,7 @@ $: {
</div>
<div class="app w-full h-[300px] m-auto">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
{:else}

13
src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
View File

@ -1,8 +1,15 @@
<script lang="ts">
import Chart from '$lib/components/Chart.svelte'
import {numberOfUnreadNotification,displayCompanyName, stockTicker} from '$lib/store';
import { abbreviateNumber, sumQuarterlyResultsByYear } from '$lib/utils';
//import * as XLSX from 'xlsx';
import { Chart } from 'svelte-echarts'
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
export let data;
@ -442,7 +449,7 @@ $: {
</label>
<label for="timeFrameModal" class="cursor-pointer bg-[#09090B] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
<label for="timeFrameModal" class="cursor-pointer bg-[#27272A] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
<div class="flex flex-row items-center">
<span class="m-auto mr-0.5 text-white text-sm">{timeFrame}</span>
<svg class="inline-block w-4 h-4 ml-1 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g transform="rotate(180 512 512)"> <path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/></g></svg>
@ -515,7 +522,7 @@ $: {
</div>
<div class="app w-full h-[300px] m-auto">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
{:else}

17
src/routes/stocks/[tickerID]/stats/employees/+page.svelte
View File

@ -2,6 +2,11 @@
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
import { Chart } from 'svelte-echarts'
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
import { abbreviateNumber } from '$lib/utils';
@ -307,7 +312,7 @@ optionsGrowth = plotGrowth();
Employees
</h2>
<div class="text-white p-3 sm:p-5 mb-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
<div class="text-white p-3 sm:p-5 mb-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-gray-800 text-sm sm:text-[1rem]">
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
{#if employeeHistory?.length !== 0 && !dateDistance}
@ -337,7 +342,7 @@ optionsGrowth = plotGrowth();
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#09090B] shadow-md rounded-xl p-5 flex justify-center items-center mb-2">
<div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#27272A] shadow-md rounded-xl p-5 flex justify-center items-center mb-2">
<!--Start Column Title-->
<div class="flex flex-col">
<div class="flex flex-row items-center">
@ -410,7 +415,7 @@ optionsGrowth = plotGrowth();
<div class="{employeeHistory?.length === 0 ? 'hidden' : ''} flex justify-end ml-auto items-center mr-2">
<label for="sortByModal" class="cursor-pointer bg-[#09090B] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
<label for="sortByModal" class="cursor-pointer bg-[#27272A] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
<div class="flex flex-row">
<span class="text-sm m-auto font-medium text-white">
{sortBy}
@ -435,15 +440,15 @@ optionsGrowth = plotGrowth();
{#if sortBy === 'Total'}
<div class="app w-full">
<Chart options={optionsTotal} class="chart" />
<Chart {init} options={optionsTotal} class="chart" />
</div>
{:else if sortBy === 'Change'}
<div class="app w-full">
<Chart options={optionsChange} class="chart" />
<Chart {init} options={optionsChange} class="chart" />
</div>
{:else if sortBy === 'Growth'}
<div class="app w-full">
<Chart options={optionsGrowth} class="chart" />
<Chart {init} options={optionsGrowth} class="chart" />
</div>
{/if}

13
src/routes/stocks/[tickerID]/stats/income/+page.svelte
View File

@ -1,8 +1,15 @@
<script lang="ts">
import Chart from '$lib/components/Chart.svelte'
import {numberOfUnreadNotification,displayCompanyName, stockTicker} from '$lib/store';
import { abbreviateNumber, sumQuarterlyResultsByYear } from '$lib/utils';
//import * as XLSX from 'xlsx';
import { Chart } from 'svelte-echarts'
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
export let data;
@ -432,7 +439,7 @@ const exportData = (format = 'csv') => {
</label>
<label for="timeFrameModal" class="cursor-pointer bg-[#09090B] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
<label for="timeFrameModal" class="cursor-pointer bg-[#27272A] sm:hover:bg-[#313131] duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
<div class="flex flex-row items-center">
<span class="m-auto mr-0.5 text-white text-sm">{timeFrame}</span>
<svg class="inline-block w-4 h-4 ml-1 mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><g transform="rotate(180 512 512)"> <path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/></g></svg>
@ -502,7 +509,7 @@ const exportData = (format = 'csv') => {
</div>
<div class="app w-full h-[300px] m-auto">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
{:else}

9
src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
View File

@ -3,6 +3,13 @@ import { Chart } from 'svelte-echarts'
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
import { sumQuarterlyResultsByYear } from '$lib/utils';
//import * as XLSX from 'xlsx';
import { init, use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([BarChart, GridComponent, CanvasRenderer])
export let data;
@ -480,7 +487,7 @@ $: {
</div>
<div class="app w-full h-[300px] m-auto">
<Chart options={optionsData} class="chart" />
<Chart {init} options={optionsData} class="chart" />
</div>
{:else}