Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

feat (analytics): better sparkline management [MA-4441] #2561

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Chalks merged 3 commits into main from feat/better-sparklines
Oct 16, 2025

Conversation

Copy link
Contributor

@Chalks Chalks commented Oct 14, 2025
edited
Loading

Satisfies MA-4441

Related PR in konnect: https://github.com/Kong/konnect-ui-apps/pull/8846

Description

  • Update sparklines to manage a synced state without requiring their parent to manage scaling parameters (i.e. min/max on x/y axes)
  • Added quite a few tests

Previously I exposed a @max event which was supposed to communicate the local manipulation of the passed in data. With that event the parent was supposed to feed that value back in given a maximum 'max' value across all sparklines rendered. This required the developer to understand and think about how sparklines work far more than was useful. This change allows users to render sparklines at any scale and by simply providing a groupKey and a chartKey the sparkline itself can manage keeping scales in sync. Simpler development and more consistent usage should be the result.

@Chalks Chalks changed the title (削除) Feat/better sparklines (削除ここまで) (追記) feat (analytics): better sparkline management + link brushing (追記ここまで) Oct 14, 2025
@Chalks Chalks force-pushed the feat/better-sparklines branch 2 times, most recently from 87583a5 to fcf7757 Compare October 16, 2025 16:04
@Chalks Chalks force-pushed the feat/better-sparklines branch from fcf7757 to c1c66db Compare October 16, 2025 16:10
@Chalks Chalks changed the title (削除) feat (analytics): better sparkline management + link brushing (削除ここまで) (追記) feat (analytics): better sparkline management (追記ここまで) Oct 16, 2025
@Chalks Chalks changed the title (削除) feat (analytics): better sparkline management (削除ここまで) (追記) feat (analytics): better sparkline management [MA-4441] (追記ここまで) Oct 16, 2025
@Chalks Chalks marked this pull request as ready for review October 16, 2025 16:15
@Chalks Chalks requested a review from a team as a code owner October 16, 2025 16:15
renderPoints: {},
})

const globalSparkStates = ref<Record<string, SparkState>>({})
Copy link
Contributor

@filipgutica filipgutica Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything looks good. The only thing I recommend, which I think is a blocker is to at least have a cleanup function to unregister the chart from the global state onUnMount or onBeforeUnmount

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, yeah that's probably fair. That also would help with the state getting polluted in long running sessions.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed. 3d8f6e6

Copy link
Contributor

@filipgutica filipgutica left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just one comment/concern

Comment on lines +71 to +82
const allTimestamps = computed(() => datasets
.reduce((acc: number[], { timestamps }): number[] => {
return [...acc, ...timestamps]
}, []))

const actualMinStamp = computed(() => {
if (minStamp) return minStamp

return allTimestamps.value.reduce((acc, timestamp): number => {
return acc === 0 ? timestamp : Math.min(acc, timestamp)
}, 0)
})
Copy link
Contributor

@filipgutica filipgutica Oct 16, 2025
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could datasets be empty?

Should guard against allTimestamps reducing to [] -> actualMinStamp = 0 -> actualMaxStamp = 0

I'm having trouble tracing in the code if that might cause any trouble down stream may be have a test around empty datasets?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, it could return 0 in that case. But if your dataset is empty then it won't be rendering anything anyways. I'm not sure I can prove that without a test though, so I'll add one.

Copy link
Contributor Author

@Chalks Chalks Oct 16, 2025
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, this one is a little tricky and I had handled this already, but it's not at all obvious. I added a test 3d8f6e6.

The trick is that syncedMinStamp is doing this logic:

 const syncedMinStamp = computed<number>(() => {
 return Object.values(state.minStamps)
 .reduce((min, stamp): number => {
 return min === 0 ? stamp : Math.min(min, stamp)
 }, 0)
 })

To be clear, return min === 0 ? stamp : Math.min(min, stamp) means if we ever encounter a 0 we ignore it in favor of the first actual timestamp we find. Granted, this means I'm disqualifying Wed Dec 31 1969 19:00:00 GMT-0500 as a start time, but... I think that's okay.

filipgutica reacted with thumbs up emoji
@Chalks Chalks merged commit 26c1a93 into main Oct 16, 2025
10 checks passed
@Chalks Chalks deleted the feat/better-sparklines branch October 16, 2025 18:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@filipgutica filipgutica filipgutica approved these changes

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /