Skip to content

feat: replace quadrant with scatter with selectable axes #2472

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.

Sign up for GitHub

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
graphieros merged 22 commits into from
Apr 12, 2026
Merged

feat: replace quadrant with scatter with selectable axes #2472

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
7d41c44
chore: remove quadrant chart
graphieros Apr 11, 2026
ba3042e
chore: bump vue-data-ui from 3.17.11 to 3.17.12
graphieros Apr 11, 2026
c8d7026
feat: add compare scatter chart
graphieros Apr 11, 2026
6bba1b8
fix: improve legend in compare downloads chart
graphieros Apr 11, 2026
28fd394
chore: update translations
graphieros Apr 11, 2026
d36cdfa
Merge branch 'main' into compare-scatter-with-selectable-axes
graphieros Apr 11, 2026
c297522
[autofix.ci] apply automated fixes
autofix-ci[bot] Apr 11, 2026
fbaa807
fix: remove unused translations
graphieros Apr 11, 2026
86e9e4d
Merge branch 'compare-scatter-with-selectable-axes' of https://github…
graphieros Apr 11, 2026
eeb0efc
fix: remove unused import
graphieros Apr 11, 2026
c522660
fix: follow the rabbit
graphieros Apr 11, 2026
b041e9d
fix: typo
graphieros Apr 11, 2026
8aa7684
chore: bump vue-data-ui from 3.17.12 to 3.17.13
graphieros Apr 11, 2026
ecab11e
fix: remove empty translation key added by a robot
graphieros Apr 11, 2026
d611dc6
fix: add skeleton in chart fallback slot
graphieros Apr 11, 2026
07d374b
fix: use proper css var for focus-visible overrides
graphieros Apr 11, 2026
a0ed79d
fix: skeleton CLS for facet bars
graphieros Apr 11, 2026
e9c51e6
fix: do not use empty auto-closing div
graphieros Apr 12, 2026
bc140c5
fix: improve axis translations for facet inputs
graphieros Apr 12, 2026
92d3844
feat: highlight axes when hovering/focusing related facet inputs
graphieros Apr 12, 2026
b6d4a9c
Merge branch 'main' into compare-scatter-with-selectable-axes
graphieros Apr 12, 2026
d91a576
[autofix.ci] apply automated fixes
autofix-ci[bot] Apr 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 11 additions & 23 deletions app/components/Compare/FacetBarChart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,9 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
style: {
chart: {
backgroundColor: colors.value.bg,
legend: {
show: false,
},
},
},
},
Expand Down Expand Up @@ -278,7 +281,7 @@ const config = computed<VueUiHorizontalBarConfig>(() => {

<template>
<div class="font-mono facet-bar">
<ClientOnly v-if="dataset.length">
<ClientOnly v-if="packages.length">
<VueUiHorizontalBar :key="chartKey" :dataset :config class="[direction:ltr]">
<template #hint="{ isVisible }">
<p v-if="isVisible" class="text-accent text-xs pt-2" aria-hidden="true">
Expand Down Expand Up @@ -339,40 +342,25 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
aria-hidden="true"
/>
</template>
</VueUiHorizontalBar>

<template #fallback>
<div class="flex flex-col gap-2 justify-center items-center mb-2">
<SkeletonInline class="h-4 w-16" />
<SkeletonInline class="h-4 w-28" />
</div>
<div class="flex flex-col gap-1">
<SkeletonInline class="h-7 w-full" v-for="pkg in packages" :key="pkg" />
</div>
</template>
<template #skeleton>
<!-- This empty div overrides the default built-in scanning animation on load -->
<div />
Copy link
Copy Markdown
Contributor

@ghostdevv ghostdevv Apr 12, 2026

Choose a reason for hiding this comment

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

Suggested change
<div />
<div></div>

:p sveltejs/svelte#11052

</template>
</VueUiHorizontalBar>
</ClientOnly>

<template v-else>
<div class="flex flex-col gap-2 justify-center items-center mb-2">
<SkeletonInline class="h-4 w-16" />
<SkeletonInline class="h-4 w-28" />
</div>
<div class="flex flex-col gap-1">
<SkeletonInline class="h-7 w-full" v-for="pkg in packages" :key="pkg" />
</div>
</template>
</div>
</template>

<style scoped>
:deep(.vue-data-ui-component svg:focus-visible) {
outline: 1px solid var(--accent-color) !important;
outline: 1px solid var(--accent) !important;
border-radius: 0.1rem;
outline-offset: 3px !important;
}
:deep(.vue-ui-user-options-button:focus-visible),
:deep(.vue-ui-user-options :first-child:focus-visible) {
outline: 0.1rem solid var(--accent-color) !important;
outline: 0.1rem solid var(--accent) !important;
border-radius: 0.25rem;
}
</style>
Expand Down
Loading
Loading