[Vue]: Possible bug on VIsXYLabels when displaying ordinal values

[sergio9929]

Hello,

I'm trying to display the duration with a label at the top of each bar. When I was returning d.date on the x function it worked fine, but when I return i, I have to change the x attribute of <VisXYContainer> to xFix to show the labels.

I followed this guide: https://unovis.dev/docs/guides/tips-and-tricks#displaying-ordinal-values.

Here is the component

<script setup lang="ts">
type Session = {
    date: Date
    time_unit: TimeUnit
    duration: number
}
const data = ref<Session[] | undefined>([...])

const x = (d: Session, i: number) => i
const xFix = (d: Session, i: number) => {
    console.log(d.duration.toFixed(), i)
    if (i) {
        // it looks like the function doesn't care what happens when `i` exists
        return i
    } else {
        return data.value?.findIndex(s => s.date === d.date)
    }
};
const y = (d: Session) => d.duration
const xTicks = (i: number) => data.value?.[i] ? formatDate(data.value[i].date) : ''
const getLabel = (d: Session) => formatDuration(d.duration)
const yAxisLabelY = (d: Session) => Math.max(d.duration - .5, d.duration / 2)
</script>

<VisXYContainer height="100vh" width="100%" :data="data"
    :margin="{ top: 100, right: 50, bottom: 50, left: 50 }">
    <VisStackedBar :x="x" :y="y" />
    <VisAxis type="x" :tickFormat="xTicks" label="Date" />
    <VisAxis type="y" :tickFormat="formatDuration" label="Duration" />
    <VisXYLabels :label="getLabel" :y="yAxisLabelY" :x="xFix" />
</VisXYContainer>

this is the log after refreshing the page:

info <Suspense> is an experimental feature and its API will likely change.
app.vue:41 5 0
app.vue:41 6 1
app.vue:41 0 2
app.vue:41 0 3
app.vue:41 4 4
app.vue:41 0 5
app.vue:41 0 6
app.vue:41 1 7
app.vue:41 0 8
app.vue:41 5 9
app.vue:41 2 10
app.vue:41 0 11
app.vue:41 2 12
app.vue:41 7 13
app.vue:41 0 14
app.vue:41 0 15
app.vue:41 5 0
app.vue:41 6 1
app.vue:41 0 2
app.vue:41 0 3
app.vue:41 4 4
app.vue:41 0 5
app.vue:41 0 6
app.vue:41 1 7
app.vue:41 0 8
app.vue:41 5 9
app.vue:41 2 10
app.vue:41 0 11
app.vue:41 2 12
app.vue:41 7 13
app.vue:41 0 14
app.vue:41 0 15
app.vue:41 5 0
app.vue:41 6 1
app.vue:41 0 2
app.vue:41 0 3
app.vue:41 4 4
app.vue:41 0 5
app.vue:41 0 6
app.vue:41 1 7
app.vue:41 0 8
app.vue:41 5 9
app.vue:41 2 10
app.vue:41 0 11
app.vue:41 2 12
app.vue:41 7 13
app.vue:41 0 14
app.vue:41 0 15
app.vue:41 5 0
app.vue:41 6 1
app.vue:41 0 2
app.vue:41 0 3
app.vue:41 4 4
app.vue:41 0 5
app.vue:41 0 6
app.vue:41 1 7
app.vue:41 0 8
app.vue:41 5 9
app.vue:41 2 10
app.vue:41 0 11
app.vue:41 2 12
app.vue:41 7 13
app.vue:41 0 14
app.vue:41 0 15
app.vue:41 5 undefined
app.vue:41 6 undefined
2app.vue:41 0 undefined
app.vue:41 4 undefined
2app.vue:41 0 undefined
app.vue:41 1 undefined
app.vue:41 0 undefined
app.vue:41 5 undefined
app.vue:41 2 undefined
app.vue:41 0 undefined
app.vue:41 2 undefined
app.vue:41 7 undefined
2app.vue:41 0 undefined
devtools.client.mjs:49 ✨ Nuxt DevTools  Press Shift + Alt + D to open DevTools 

[slow-groovin]

similar :

     <VisXYContainer :data="data">
          <VisLine :x="" :y="Y" :curveType="'basis'" />
<!--          VisLine works right-->
          <!--   <VisScatter :x="X" :y="Y"/>-->
          <!--          VisScatter  will not show, and have no error in console-->
          <VisScatter :x="timeX" :y="Y"/>
        <!-- return getTime will work -->
    </VisXYContainer>

//typeof data
interface {
  x: Date,
  y: number
}

export const X = (d: any) => d.x
export const Y = (d: any) => d.y
export const timeX = (d: any) => d.x.getTime()