Skip to content

v2.4.68
Compare
Choose a tag to compare
@graphieros graphieros released this 05 Jan 08:33
· 208 commits to master since this release
v2.4.68
cc0dfb1

new #pattern scoped slot

The #pattern slot is available for the following components:

  • VueUiDonut
  • VueUiGauge
  • VueUiRings
  • VueUiStackbar
  • VueUiVerticalBar
  • VueUiWaffle
  • VueUiXy

This slot allows you to include a pattern element to customize the looks of your datapoints, which will be injected inside a defs element of the component.

The slot exposes the following data:

  • seriesIndex to target a specific datapoint
  • patternId to apply on the pattern element for it to be recognized by the component

Here is an example of implementation on VueUiDonut, where a pattern will be applied on the first datapoint only:

<VueUiDonut :dataset="dataset" :config="config">
  <template #pattern="{ seriesIndex, patternId }">
    <pattern v-if="seriesIndex === 0" :id="patternId" width="50.222" height="29.003" patternTransform="scale(1)" patternUnits="userSpaceOnUse"><rect width="100%" height="100%" fill="#2b2b3100"/><path fill="none" stroke="#1A1A1A" stroke-linecap="square" d="M58.592-14.503h-16.74m6.277 3.627H56.5l4.188 7.25h-8.373zM60.686 3.623l-4.187 7.25h-8.372l4.187-7.25zM41.852-7.252l4.185 7.25-4.185 7.252L37.666 0zm25.11 7.25L58.593 14.5h-16.74L33.481-.001l8.371-14.501m16.74-.001 8.37 14.502m0 0h-16.74v0m-8.37-14.501L50.222 0l-8.37 14.503M8.371-14.502H-8.37m6.276 3.627h8.371l4.188 7.25H2.093zM10.464 3.624l-4.186 7.25h-8.373l4.187-7.25zM-8.37-7.251-4.185 0-8.37 7.252-12.556 0zM16.74 0 8.37 14.502H-8.37L-16.742 0l8.371-14.501m16.74-.001L16.741-.001m0 0H.001v0m-8.37-14.501L0 0l-8.37 14.503m6.275 3.625h8.372l4.187 7.25H2.093zm12.558 14.499-4.187 7.25h-8.372l4.187-7.25zM-8.371 21.752l4.185 7.25-4.185 7.252-4.185-7.251zm25.112 7.25L8.37 43.504H-8.37l-8.371-14.502 8.37-14.501M8.37 14.5l8.372 14.502m0 0H0v0m-8.37-14.5L0 29.003l-8.37 14.503m56.5-25.379 8.371.001 4.188 7.25h-8.373zm12.557 14.5L56.5 39.876l-8.372.001 4.187-7.25zM41.852 21.751l4.185 7.25-4.185 7.252-4.186-7.252zm25.11 7.25-8.37 14.502h-16.74l-8.372-14.5M58.59 14.5l8.372 14.503m0 0h-16.74v0m-8.371-14.501 8.37 14.501-8.37 14.503M33.482 0h-16.74m6.276 3.627 8.371.001 4.188 7.25h-8.373zm12.557 14.5-4.187 7.249-8.372.001 4.187-7.25zM16.741 7.25l4.185 7.25-4.185 7.252-4.186-7.252zm25.11 7.25-8.37 14.502h-16.74M41.851 14.5h-16.74v0M16.742 0l8.37 14.502-8.37 14.503"/></pattern>
  </template>
</VueUiDonut>

A few screenshots taken from the examples page:

Component Screenshot
VueUiXy
VueUiDonut
VueUiGauge

The patterns used in these examples are adapted from the cool patterns available for free on pattern.monster

new VueUiPattern utility component

A set of 12 readymade patterns are available through this utility component (list of names on the README)
Check out the documentation website for more details on how to use VueUiPattern

import { VueUiPattern } from "vue-data-ui";
<VueUiDonut :dataset="dataset" :config="config">
  <template #pattern="{ seriesIndex, patternId }">
    <Suspense>
      <VueUiPattern
        :id="patternId"
        name="maze"
        v-if="seriesIndex === 0"
      />
    </Suspense>
  </template>
</VueUiDonut>
Assets 2
Loading