From f193771b63ab899768d593bb0197567d864f2207 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Fri, 9 Aug 2024 21:41:43 +0200 Subject: [PATCH] add tooltip --- src/lib/components/BorrowedShare.svelte | 4 ++-- src/lib/components/CorporateLobbying.svelte | 9 +++++++-- src/lib/components/DarkPool.svelte | 10 ++-------- src/lib/components/Enterprise.svelte | 9 ++++++--- src/lib/components/FailToDeliver.svelte | 4 ++-- src/lib/components/MarketMaker.svelte | 8 ++++++-- src/lib/components/PriceAnalysis.svelte | 4 ++-- src/lib/components/RetailVolume.svelte | 8 ++++++-- src/lib/components/ShareStatistics.svelte | 8 ++++++-- 9 files changed, 39 insertions(+), 25 deletions(-) diff --git a/src/lib/components/BorrowedShare.svelte b/src/lib/components/BorrowedShare.svelte index fb91444b..8edc7683 100644 --- a/src/lib/components/BorrowedShare.svelte +++ b/src/lib/components/BorrowedShare.svelte @@ -6,12 +6,12 @@ import { init, use } from 'echarts/core' import { LineChart } from 'echarts/charts' - import { GridComponent } from 'echarts/components' + import { GridComponent, TooltipComponent } from 'echarts/components' import { CanvasRenderer } from 'echarts/renderers' export let data; - use([LineChart, GridComponent, CanvasRenderer]) + use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]) let isLoaded = false; diff --git a/src/lib/components/CorporateLobbying.svelte b/src/lib/components/CorporateLobbying.svelte index eac00336..29a11e1b 100644 --- a/src/lib/components/CorporateLobbying.svelte +++ b/src/lib/components/CorporateLobbying.svelte @@ -6,9 +6,9 @@ import { Chart } from 'svelte-echarts' import { abbreviateNumber } from "$lib/utils"; import { init, use } from 'echarts/core' import { BarChart } from 'echarts/charts' -import { GridComponent } from 'echarts/components' +import { GridComponent, TooltipComponent } from 'echarts/components' import { CanvasRenderer } from 'echarts/renderers' -use([BarChart, GridComponent, CanvasRenderer]) +use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]) export let data; @@ -52,6 +52,11 @@ function getPlotOptions() { const option = { silent: true, + animation: false, + tooltip: { + trigger: 'axis', + hideDelay: 100, // Set the delay in milliseconds + }, grid: { left: $screenWidth < 640 ? '0%' : '2%', right: $screenWidth < 640 ? '5%' : '2%', diff --git a/src/lib/components/DarkPool.svelte b/src/lib/components/DarkPool.svelte index 27ddbbe6..76898650 100644 --- a/src/lib/components/DarkPool.svelte +++ b/src/lib/components/DarkPool.svelte @@ -5,10 +5,10 @@ import { abbreviateNumber, formatDateRange } from "$lib/utils"; import { init, use } from 'echarts/core' import { LineChart } from 'echarts/charts' - import { GridComponent } from 'echarts/components' + import { GridComponent, TooltipComponent } from 'echarts/components' import { CanvasRenderer } from 'echarts/renderers' - use([LineChart, GridComponent, CanvasRenderer]) + use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]) export let data; @@ -97,12 +97,6 @@ function getPlotOptions() { tooltip: { trigger: 'axis', hideDelay: 100, // Set the delay in milliseconds - backgroundColor: '#202327', - axisPointer: { - lineStyle: { - color: '' - }, - }, }, animation: false, grid: { diff --git a/src/lib/components/Enterprise.svelte b/src/lib/components/Enterprise.svelte index 036b98a8..9737c0da 100644 --- a/src/lib/components/Enterprise.svelte +++ b/src/lib/components/Enterprise.svelte @@ -5,13 +5,13 @@ import { Chart } from 'svelte-echarts'; import { init, use } from 'echarts/core' import { BarChart } from 'echarts/charts' - import { GridComponent } from 'echarts/components' + import { GridComponent, TooltipComponent } from 'echarts/components' import { CanvasRenderer } from 'echarts/renderers' export let data; // now with tree-shaking - use([BarChart, GridComponent, CanvasRenderer]) + use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]) let isLoaded = false; @@ -37,7 +37,6 @@ function normalizer(value) { function getPlotOptions() { let dates = []; let enterpriseValue = []; - let numberOfShares = []; let marketCapitalization = []; let addTotalDebt = []; let cashEquivalent = []; @@ -61,6 +60,10 @@ function getPlotOptions() { const option = { silent: true, animation: false, + tooltip: { + trigger: 'axis', + hideDelay: 100, // Set the delay in milliseconds + }, grid: { left: $screenWidth < 640 ? '0%' : '2%', right: $screenWidth < 640 ? '2%' : '2%', diff --git a/src/lib/components/FailToDeliver.svelte b/src/lib/components/FailToDeliver.svelte index a2304c34..d9e41ad6 100644 --- a/src/lib/components/FailToDeliver.svelte +++ b/src/lib/components/FailToDeliver.svelte @@ -6,12 +6,12 @@ import { init, use } from 'echarts/core' import { LineChart } from 'echarts/charts' - import { GridComponent } from 'echarts/components' + import { GridComponent, TooltipComponent } from 'echarts/components' import { CanvasRenderer } from 'echarts/renderers' export let data; - use([LineChart, GridComponent, CanvasRenderer]) + use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]) let isLoaded = false; diff --git a/src/lib/components/MarketMaker.svelte b/src/lib/components/MarketMaker.svelte index 9bc9e78c..82f76eea 100644 --- a/src/lib/components/MarketMaker.svelte +++ b/src/lib/components/MarketMaker.svelte @@ -6,10 +6,10 @@ import { init, use } from 'echarts/core' import { LineChart } from 'echarts/charts' - import { GridComponent } from 'echarts/components' + import { GridComponent, TooltipComponent } from 'echarts/components' import { CanvasRenderer } from 'echarts/renderers' - use([LineChart, GridComponent, CanvasRenderer]) + use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]) export let data; @@ -76,6 +76,10 @@ function getPlotOptions() { const option = { silent: true, animation: false, + tooltip: { + trigger: 'axis', + hideDelay: 100, // Set the delay in milliseconds + }, grid: { left: '2%', right: '2%', diff --git a/src/lib/components/PriceAnalysis.svelte b/src/lib/components/PriceAnalysis.svelte index dcbd2dbb..16e3681f 100644 --- a/src/lib/components/PriceAnalysis.svelte +++ b/src/lib/components/PriceAnalysis.svelte @@ -7,10 +7,10 @@ import { init, use } from 'echarts/core' import { LineChart } from 'echarts/charts' - import { GridComponent } from 'echarts/components' + import { GridComponent, TooltipComponent } from 'echarts/components' import { CanvasRenderer } from 'echarts/renderers' - use([LineChart, GridComponent, CanvasRenderer]) + use([LineChart, GridComponent, TooltipComponent, CanvasRenderer]) export let data; diff --git a/src/lib/components/RetailVolume.svelte b/src/lib/components/RetailVolume.svelte index 6daaad02..90da29b4 100644 --- a/src/lib/components/RetailVolume.svelte +++ b/src/lib/components/RetailVolume.svelte @@ -6,10 +6,10 @@ import { abbreviateNumber, formatDateRange } from "$lib/utils"; import { init, use } from 'echarts/core' import { LineChart, BarChart } from 'echarts/charts' - import { GridComponent } from 'echarts/components' + import { GridComponent, TooltipComponent } from 'echarts/components' import { CanvasRenderer } from 'echarts/renderers' - use([LineChart, BarChart, GridComponent, CanvasRenderer]) + use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]) export let data; @@ -101,6 +101,10 @@ function getPlotOptions() { const option = { silent: true, animation: false, + tooltip: { + trigger: 'axis', + hideDelay: 100, // Set the delay in milliseconds + }, grid: { left: '0%', right: '0%', diff --git a/src/lib/components/ShareStatistics.svelte b/src/lib/components/ShareStatistics.svelte index a3de0e84..7118c067 100644 --- a/src/lib/components/ShareStatistics.svelte +++ b/src/lib/components/ShareStatistics.svelte @@ -9,9 +9,9 @@ import { abbreviateNumber } from "$lib/utils"; import { init, use } from 'echarts/core' import { BarChart } from 'echarts/charts' -import { GridComponent } from 'echarts/components' +import { GridComponent, TooltipComponent } from 'echarts/components' import { CanvasRenderer } from 'echarts/renderers' -use([BarChart, GridComponent, CanvasRenderer]) +use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]) export let data; @@ -58,6 +58,10 @@ function getPlotOptions() { const option = { silent: true, animation: false, + tooltip: { + trigger: 'axis', + hideDelay: 100, // Set the delay in milliseconds + }, grid: { left: $screenWidth < 640 ? '1%' : '2%', right: $screenWidth < 640 ? '0%' : '2%',