Skip to content
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

Jump to bottom

🐛 Fix axis grid lines not updating on size change #138

Merged
merged 2 commits into from
Jan 18, 2023
Merged

🐛 Fix axis grid lines not updating on size change #138

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8765014
🐛 Fix axis grid lines not updating on size change
joao-m-santos Jan 17, 2023
03a5a4e
Merge branch 'main' into 137-axis-grid-lines-are-not-reactive-to-cont…
joao-m-santos Jan 18, 2023
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
27 changes: 18 additions & 9 deletions src/components/core/lume-axis/lume-axis.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ const emit = defineEmits<{
}>();

const { scale, containerSize, hoveredIndex, options, orientation } =
toRefs(props); // Needs to be cast as any to avoid it being cast to never by default
toRefs(props); // Needs to be cast as any to avoid it being cast to never by default

const mixins = reactive<Record<string, AxisMixinFunction>>({});
const tickRefs = ref<Array<SVGTextElement>>(null);
Expand All @@ -182,9 +182,9 @@ const computedType = computed(
const shouldHover = computed(
() =>
(computedType.value === 'x' &&
orientation.value === ORIENTATIONS.VERTICAL) ||
(computedType.value === 'y' &&
orientation.value === ORIENTATIONS.HORIZONTAL)
orientation.value === ORIENTATIONS.VERTICAL) ||
(computedType.value === 'y' &&
orientation.value === ORIENTATIONS.HORIZONTAL)
);

const { allOptions } = useOptions<AxisOptions>(
Expand Down Expand Up @@ -234,8 +234,8 @@ function onTickMouseover(index: number) {
function isHovering(index: number) {
return (
allOptions.value.withHover &&
shouldHover.value &&
hoveredIndex.value === index
shouldHover.value &&
hoveredIndex.value === index
);
}

Expand Down Expand Up @@ -268,7 +268,7 @@ function init() {

// Get mixin generator based on the scale type
const mixin: AxisMixin =
mixinTypes[`${computedType.value}-${SCALE_MIXIN_MAP[scaleType]}`];
mixinTypes[`${computedType.value}-${SCALE_MIXIN_MAP[scaleType]}`];

// Push all mixin functions into the `mixins` reactive object
Object.entries(mixin(scale, containerSize, allOptions) || []).forEach(
Expand All @@ -283,11 +283,20 @@ watch(scale, init, { flush: 'sync', immediate: true });

// Re-render after `tickRefs` is defined (to grab text width)
// and only when `ticks` change (if scale changes)
watch([ticks, tickRefs], setTicks, { immediate: true });
watch(
[
ticks,
tickRefs,
() => containerSize.value.width, // also re-render
() => containerSize.value.height, // when containerSize changes
],
setTicks,
{ immediate: true }
);

onMounted(() => svgCheck(root.value));
</script>

<style lang="scss" scoped>
@use './styles';
</style>
</style>