组件非常好用，但是高度不能随父组件调整而调整 (topic: VueUiXy dynamic responsive chart sizing)

[lanwu114]

可否把图标的长和宽不设置为number呢？因为我想按照百分比进行调整。 我的父组件是一个可以拖拽、伸缩的，但是图表却不能随着父组件的高度变化而自适应调整高度。宽度可以，但是高度不行……很难受

[lanwu114]

sorry，my English is pool……

[graphieros]

你好，

由于我不会说中文，所以我必须依靠翻译工具。 为了了解您的问题，我需要更多详细信息：

。您需要调整高度的组件的名称是什么？ 。您指的是哪些图标？

您提供的有关预期结果的详细信息越多越好。

---

Translated from:

Hi,

Since I do not speak Chinese, I have to rely on a translation tool. To understand your issue, I need more details:

. What is the name of the component on which you need to adjust the height ? . What icons are you referring to ?

The more details you provide about expected results, the better.

[lanwu114]

Sorry, it's not an icon, it's a chart (I typed it incorrectly). Please watch the video: The first one is that I use echarts as a subcomponent in my card, and the second one is your chart. The first one can achieve responsive height and width. But the second one changes in height when the width changes, causing the height of the chart to exceed the range of the card. Sorry, my English is very poor. I use translation software. Your component is very easy to use, and I hate to meet it too late.

[graphieros]

Ok I understand now, thank you for providing videos.

Currently the height and width of the VueUiXy component are fixed from the configuration object (config.chart.height and config.chart.width).

The only solution to make dimensions dynamic would be for you to set these height and width configurations from a resizeObserver. For example:

// The wrapper div where the chart is placed
const resizeWrapper = ref(null);

const size = ref({
  width: 1000,
  height: 600
})

onMounted(() => {
  // Set dimensions based on wrapper on load
  const { height, width } = resizeWrapper.value.getBoundingClientRect();
  size.value.height = height;
  size.value.width = width;

  // If you need to tweak the dimensions with some padding (positive or negative)
  const padding = {
    x: 0,
    y: 0
  }

  const resizeObserver = new ResizeObserver((entries) => {
    for (const entry of entries) {
      // You might need to add or substract some padding here
      size.value.height = entry.contentBoxSize[0].blockSize + padding.y;
      size.value.width = entry.contentBoxSize[0].inlineSize + padding.x;
    }
  });
  resizeObserver.observe(resizeWrapper.value);
})

<template>
  <div ref="resizeWrapper" class="resizable">
     <VueUiXy
      :dataset="dataset"
      :config="{
        ...config,
        chart: {
          ...config.chart,
          height: size.height,
          width: size.width
        }
      }"
    />
  </div>
</template>

For now you have to do this yourself. I'm planning to include this later as a feature. This is a basic example, you could also improve it by also tweaking the fontSizes, plot radiuses based on a ratio that would also be derived from the observer.

https://github.com/user-attachments/assets/f134998d-633b-4f4f-a144-d3136de8bc0c

[lanwu114]

Oh, my god! Brother, you are really too dedicated and efficient! I love you so much! It's 1: 20 am Beijing time, and I'm still staying up late. I will use it tomorrow. Thank you again for your guidance and video. Thank you very much. This project will get better and better. God bless you.

[graphieros]

Than you for your kind message :) I'm currently working on another feature right now, but I intend to make dynamic sizing as a config option after that. I will keep you informed. Cheers

[graphieros]

You can upgrade to v2.2.52 with built-in responsive feature for VueUiXy component.

What you need to do:

1. Use a resizable parent container or a parent container with fixed dimensions.
2. Set config.responsive to true:

const config = ref({
  responsive: true,
  //...  rest of your config
})

It is not required for you to use the temporary solution proposed before this release which involved a resizeObserver.