v2.5.9

VueUiCirclePack

• Add @selectDatapoint emit

<VueUiCirclePack
  :dataset="dataset"
  :config="config"
  @selectDatapoint="logMe"
/>

• Add #data-label slot

<VueUiCirclePack>
  <template #data-label="{ x, y, name, value, color, fontSize }">
    <text
      :x="x"
      :y="y"
      :fill="color"
      :font-size="fontSize.name"
      text-anchor="middle"
    >
      {{ name }} : {{ value }}
    </text>
  </template>
</VueUiCirclePack>

Utility functions

• Add createTSpans utility function, to create TSpan elements from a string to break text into multiple lines. The output should be placed with v-html inside an SVG <text> element.

import { createTSpans } from "vue-data-ui";

const textContent = createTSpans({
    content: "This is an example of multiline text",
    fontSize: 16,
    fill: "#333",
    maxWords: 2,
    x: 10,
    y: 20
});

<text
    :x="10"
    :y="20"
    :font-size="16"
    fill="#1A1A1A"
    text-anchor="middle"
    v-html="textContent"
 />