From adf77b12060b152a1bfda39f252e879b56c04095 Mon Sep 17 00:00:00 2001 From: daiagi Date: Sat, 30 Sep 2023 22:09:51 +0700 Subject: [PATCH 1/8] fix: events table did not load all events --- components/collection/activity/events/Events.vue | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue index 1781e572c5..82c558ec25 100644 --- a/components/collection/activity/events/Events.vue +++ b/components/collection/activity/events/Events.vue @@ -27,11 +27,14 @@ @@ -97,11 +100,13 @@ watch( const handleIntersection = (entries: IntersectionObserverEntry[]) => { const target = entries[0] - if (target.isIntersecting) { + if ( + target.isIntersecting && + displayedEvents.value.length < filteredEvents.value.length + ) { displayMoreEvents() } } - const sentinel = ref(null) useIntersectionObserver(sentinel, handleIntersection, { threshold: 0.66 }) From 37acb5654837f06b8aa56e4310eae51683a478a6 Mon Sep 17 00:00:00 2001 From: daiagi Date: Sat, 30 Sep 2023 22:12:33 +0700 Subject: [PATCH 2/8] fix- chain decimals and dynamically find bin size --- .../collection/activity/ActivityChart.vue | 21 +++++++-- components/collection/activity/utils.ts | 47 ++++++++++++++++++- 2 files changed, 62 insertions(+), 6 deletions(-) diff --git a/components/collection/activity/ActivityChart.vue b/components/collection/activity/ActivityChart.vue index 3513ccf427..40121a3875 100644 --- a/components/collection/activity/ActivityChart.vue +++ b/components/collection/activity/ActivityChart.vue @@ -12,11 +12,14 @@ import PriceChart from '@/components/chart/PriceChart.vue' import { bin, displayValue, + getBinSizeForRange, removeOutliers, sortAsc, toDataPoint, } from './utils' +const { decimals } = useChain() + const props = withDefaults( defineProps<{ events: ActivityInteraction[] @@ -43,16 +46,26 @@ const listEvents = computed(() => { }) const chartData = computed(() => { - const buyBins = bin(buyEvents.value, { days: 1 }) - const listBins = bin(listEvents.value, { days: 1 }) + const buyBinSize = getBinSizeForRange({ + firstTimestamp: buyEvents.value[0].timestamp, + lastTimestamp: buyEvents.value[buyEvents.value.length - 1].timestamp, + datasetLength: buyEvents.value.length, + }) + const listBinSize = getBinSizeForRange({ + firstTimestamp: listEvents.value[0].timestamp, + lastTimestamp: listEvents.value[listEvents.value.length - 1].timestamp, + datasetLength: listEvents.value.length, + }) + const buyBins = bin(buyEvents.value, buyBinSize) + const listBins = bin(listEvents.value, listBinSize) const binnedBuyEvents = buyBins.map(({ timestamp, value }) => [ new Date(timestamp), - displayValue(value), + displayValue(value, decimals.value), ]) const binnedListEvents = listBins.map(({ timestamp, value }) => [ new Date(timestamp), - displayValue(value), + displayValue(value, 10), ]) return [binnedBuyEvents, binnedListEvents] diff --git a/components/collection/activity/utils.ts b/components/collection/activity/utils.ts index ba6b4e73cd..70567c7a93 100644 --- a/components/collection/activity/utils.ts +++ b/components/collection/activity/utils.ts @@ -24,8 +24,8 @@ export const toDataPoint = (e: { export const sortAsc = (events: DataPoint[]) => events.sort((a, b) => a.timestamp - b.timestamp) -export const displayValue = (val: number) => - Number((val * Math.pow(10, -12)).toFixed(4)) +export const displayValue = (val: number, decimals: number) => + Number((val * Math.pow(10, -1 * decimals)).toFixed(4)) const binSizeToMillis = (binSize: BinSize): number => { const millisInMinute = 60 * 1000 @@ -42,6 +42,49 @@ const binSizeToMillis = (binSize: BinSize): number => { return millis || millisInDay // Default bin size is one day } +function millisToBinSize(millis: number): BinSize { + const minuteMillis = 60000 + const hourMillis = 60 * minuteMillis + const dayMillis = 24 * hourMillis + const weekMillis = 7 * dayMillis + + const weeks = Math.floor(millis / weekMillis) + millis -= weeks * weekMillis + + const days = Math.floor(millis / dayMillis) + millis -= days * dayMillis + + const hours = Math.floor(millis / hourMillis) + millis -= hours * hourMillis + + const minutes = Math.ceil(millis / minuteMillis) + + return { + weeks: weeks || undefined, + days: days || undefined, + hours: hours || undefined, + minutes: minutes || undefined, + } +} +interface BinSizeParams { + firstTimestamp: number + lastTimestamp: number + datasetLength: number + sampleRate?: number +} + +export const getBinSizeForRange = ({ + firstTimestamp, + lastTimestamp, + datasetLength, + sampleRate = 2, +}: BinSizeParams): BinSize => { + const totalMillis = lastTimestamp - firstTimestamp + const idealBinSizeMillis = totalMillis / (datasetLength * sampleRate) + + return millisToBinSize(idealBinSizeMillis) +} + const mean = (arr: DataPoint[]): number => { const sum = arr.reduce((total, { value }) => total + value, 0) return sum / arr.length From 62a794aeb8fe75e4298fec4b4b18aeef3c72595e Mon Sep 17 00:00:00 2001 From: daiagi Date: Sat, 30 Sep 2023 23:00:01 +0700 Subject: [PATCH 3/8] improve calculation of sampling rate --- .../collection/activity/ActivityChart.vue | 8 ++--- components/collection/activity/utils.ts | 36 ++++++++++++------- 2 files changed, 26 insertions(+), 18 deletions(-) diff --git a/components/collection/activity/ActivityChart.vue b/components/collection/activity/ActivityChart.vue index 40121a3875..61380bbd2e 100644 --- a/components/collection/activity/ActivityChart.vue +++ b/components/collection/activity/ActivityChart.vue @@ -47,14 +47,10 @@ const listEvents = computed(() => { const chartData = computed(() => { const buyBinSize = getBinSizeForRange({ - firstTimestamp: buyEvents.value[0].timestamp, - lastTimestamp: buyEvents.value[buyEvents.value.length - 1].timestamp, - datasetLength: buyEvents.value.length, + timestamps: buyEvents.value.map((e) => e.timestamp), }) const listBinSize = getBinSizeForRange({ - firstTimestamp: listEvents.value[0].timestamp, - lastTimestamp: listEvents.value[listEvents.value.length - 1].timestamp, - datasetLength: listEvents.value.length, + timestamps: listEvents.value.map((e) => e.timestamp), }) const buyBins = bin(buyEvents.value, buyBinSize) const listBins = bin(listEvents.value, listBinSize) diff --git a/components/collection/activity/utils.ts b/components/collection/activity/utils.ts index 70567c7a93..b4aaec4baf 100644 --- a/components/collection/activity/utils.ts +++ b/components/collection/activity/utils.ts @@ -66,21 +66,33 @@ function millisToBinSize(millis: number): BinSize { minutes: minutes || undefined, } } -interface BinSizeParams { - firstTimestamp: number - lastTimestamp: number - datasetLength: number - sampleRate?: number -} export const getBinSizeForRange = ({ - firstTimestamp, - lastTimestamp, - datasetLength, + timestamps, sampleRate = 2, -}: BinSizeParams): BinSize => { - const totalMillis = lastTimestamp - firstTimestamp - const idealBinSizeMillis = totalMillis / (datasetLength * sampleRate) + sort = false, +}: { + timestamps: number[] + sampleRate?: number + sort?: boolean +}): BinSize => { + if (timestamps.length < 2) { + return { minutes: 1 } + } + if (sort) { + timestamps = timestamps.sort((a, b) => a - b) + } + + const uniqueTimestamps = Array.from(new Set(timestamps)) + + // Calculate intervals between each timestamp. + const intervals = uniqueTimestamps + .slice(1) + .map((time, index) => time - timestamps[index]) + + const minInterval = Math.min(...intervals) + + const idealBinSizeMillis = minInterval / sampleRate return millisToBinSize(idealBinSizeMillis) } From 9db50947c318958afbc5df5d343cea8d5cd9a63d Mon Sep 17 00:00:00 2001 From: daiagi Date: Sat, 30 Sep 2023 23:01:33 +0700 Subject: [PATCH 4/8] fix hard coding --- components/collection/activity/ActivityChart.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/collection/activity/ActivityChart.vue b/components/collection/activity/ActivityChart.vue index 61380bbd2e..3ddd2096f3 100644 --- a/components/collection/activity/ActivityChart.vue +++ b/components/collection/activity/ActivityChart.vue @@ -61,7 +61,7 @@ const chartData = computed(() => { ]) const binnedListEvents = listBins.map(({ timestamp, value }) => [ new Date(timestamp), - displayValue(value, 10), + displayValue(value, decimals.value), ]) return [binnedBuyEvents, binnedListEvents] From 95db4c4540615c70cfb3d97309e92f4e3ff72aa2 Mon Sep 17 00:00:00 2001 From: daiagi Date: Sat, 30 Sep 2023 23:05:58 +0700 Subject: [PATCH 5/8] fix bug in interval calculation --- components/collection/activity/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/collection/activity/utils.ts b/components/collection/activity/utils.ts index b4aaec4baf..f6e8c02620 100644 --- a/components/collection/activity/utils.ts +++ b/components/collection/activity/utils.ts @@ -88,7 +88,7 @@ export const getBinSizeForRange = ({ // Calculate intervals between each timestamp. const intervals = uniqueTimestamps .slice(1) - .map((time, index) => time - timestamps[index]) + .map((time, index) => time - uniqueTimestamps[index]) const minInterval = Math.min(...intervals) From 31d55aa2ba43c9355335b2c61abd912f589f28f1 Mon Sep 17 00:00:00 2001 From: daiagi Date: Sat, 30 Sep 2023 23:17:30 +0700 Subject: [PATCH 6/8] revert to previous method - it gives nicer results --- components/collection/activity/utils.ts | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/components/collection/activity/utils.ts b/components/collection/activity/utils.ts index f6e8c02620..d67d6a0c44 100644 --- a/components/collection/activity/utils.ts +++ b/components/collection/activity/utils.ts @@ -79,20 +79,14 @@ export const getBinSizeForRange = ({ if (timestamps.length < 2) { return { minutes: 1 } } - if (sort) { - timestamps = timestamps.sort((a, b) => a - b) - } - - const uniqueTimestamps = Array.from(new Set(timestamps)) - - // Calculate intervals between each timestamp. - const intervals = uniqueTimestamps - .slice(1) - .map((time, index) => time - uniqueTimestamps[index]) - const minInterval = Math.min(...intervals) + const minTimestamp = sort ? Math.min(...timestamps) : timestamps[0] + const maxTimestamp = sort + ? Math.max(...timestamps) + : timestamps[timestamps.length - 1] - const idealBinSizeMillis = minInterval / sampleRate + const totalMillis = maxTimestamp - minTimestamp + const idealBinSizeMillis = totalMillis / (timestamps.length * sampleRate) return millisToBinSize(idealBinSizeMillis) } From 7cc065e7eedc82c4b1d1500120f65e14c9cf81a8 Mon Sep 17 00:00:00 2001 From: daiagi Date: Sun, 1 Oct 2023 12:13:00 +0700 Subject: [PATCH 7/8] fix slice --- components/collection/activity/events/Events.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/collection/activity/events/Events.vue b/components/collection/activity/events/Events.vue index 82c558ec25..6b37890033 100644 --- a/components/collection/activity/events/Events.vue +++ b/components/collection/activity/events/Events.vue @@ -27,7 +27,10 @@