Chart

A universal chart component. Inspired by chartJS etc. But is'nt as bloated.

Basic

Chart... bla la la

Axis

There are two types of y-axises. category and time

There is a slot for a tooltip with some usable slot props

Streaming

Streaming with prefetch

Samples in buffer: 0

vue

<script setup lang="ts">
import { ref } from 'vue'
import { useRafFn } from '@vueuse/core'
import type { ChartData } from 'bragi-vue'

const data = ref<ChartData>({
  labels: new Array<string>(),
  datasets: [
    {
      data: [],
      stroke: {
        'stroke': 'red',
        'stroke-width': 1,
        'fill': 'none',
      },
    },
    {
      data: [],
      stroke: {
        'stroke': 'blue',
        'opacity': 0.5,
        'stroke-width': 3,
        'fill': 'none',
      },
    },
    {
      data: [],
      stroke: {
        'stroke': 'magenta',
        'opacity': 0.5,
        'stroke-width': 1,
        'fill': 'none',
      },
    },
  ],
})

const leadTime = 500
const windowSize = ref('10000')

const from = ref()
const to = ref()

// reactive request animation frame
// slides the "window" and prefetches data when needed
let timeout = 300
let flip = 0
const { pause, resume } = useRafFn(({ delta, timestamp }) => {
  const end = new Date()
  end.setMilliseconds(end.getMilliseconds() - leadTime)
  to.value = end
  const start = new Date(end)
  start.setMilliseconds(end.getMilliseconds() - Number(windowSize.value))
  from.value = start

  // check if we need to fetch more data
  timeout = timeout - delta
  if (timeout < 0) {
    timeout = 300

    // add sample points to streams
    data.value.labels.push(new Date().toISOString())
    const sample0 = (Math.cos(timestamp / 800) + 3) * 2
    data.value.datasets[0].data.push(sample0)
    const sample1 = (Math.sin(timestamp / 1000) + 1) * 3
    data.value.datasets[1].data.push(sample1)
    const sample2 = (flip++ % 2) * 14
    data.value.datasets[2].data.push(sample2)

    // prune to max 100 samples
    if (data.value.datasets[0].data.length > 100) {
      data.value.labels.shift()
      data.value.datasets[0].data.shift()
      data.value.datasets[1].data.shift()
      data.value.datasets[2].data.shift()
    }
  }
})

const running = ref(true)
function toggle() {
  running.value ? pause() : resume()
  running.value = !running.value
}
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex justify-between mb-4">
      <BBtn @click="toggle">
        {{ running ? 'Stop' : 'Resume' }}
      </BBtn>
      <BSegmentGroup v-model="windowSize">
        <BSegmentButton value="10000">
          10 s
        </BSegmentButton>
        <BSegmentButton value="30000">
          30 s
        </BSegmentButton>
        <BSegmentButton value="60000">
          60 s
        </BSegmentButton>
      </BSegmentGroup>
    </div>
    <BChart
      :from="from"
      :to="to"
      :data="data"
      :max="14"
      hoverable
      color="tertiary"
      class="h-42 w-full"
    >
      <template
        #tooltip="{ epoch, hoverIndex }"
      >
        <p class="text-xs flex justify-between gap-4">
          <span>@{{ new Date(epoch).toLocaleTimeString('sv-SE') }}</span>
        </p>
        <ul class="max-w-md list-inside">
          <li
            v-for="(dataset, index) in data.datasets"
            :key="index"
            class="flex items-center"
          >
            <i
              class="i-mdi:bell-ring mr-2"
              :style="{ color: dataset.stroke.stroke }"
            />
            {{ dataset.data[hoverIndex] }}
          </li>
        </ul>
      </template>
    </BChart>
    Samples in buffer: {{ data.datasets[0].data?.length }}
  </div>
</template>

Auto range

Auto range is a feature that will automatically adjust the x-axis range to fit the data. This is useful when you have a lot variance in the data and don't want to manually set the range. Enable it by setting the auto-range prop. This will also generate a y-axis with values for now TODO.

Samples in buffer: 0

vue

<script setup lang="ts">
import { ref } from 'vue'
import { useRafFn } from '@vueuse/core'
import type { ChartData } from 'bragi-vue'

const data = ref<ChartData>({
  labels: new Array<string>(),
  datasets: [
    {
      data: [],
      stroke: {
        'stroke': 'red',
        'stroke-width': 1,
        'fill': 'none',
      },
    },
    {
      data: [],
      stroke: {
        'stroke': 'blue',
        'opacity': 0.5,
        'stroke-width': 3,
        'fill': 'none',
      },
    },
  ],
})

const leadTime = 500
const windowSize = ref('5000')

const from = ref()
const to = ref()

// reactive request animation frame
// slides the "window" and prefetches data when needed
let timeout = 300
let flip = 0
const { pause, resume } = useRafFn(({ delta, timestamp }) => {
  const end = new Date()
  end.setMilliseconds(end.getMilliseconds() - leadTime)
  to.value = end
  const start = new Date(end)
  start.setMilliseconds(end.getMilliseconds() - Number(windowSize.value))
  from.value = start

  // check if we need to fetch more data
  timeout = timeout - delta
  if (timeout < 0) {
    timeout = 300

    // add sample points to streams
    data.value.labels.push(new Date().toISOString())
    const sample0 = (flip++ % 2) * 80000
    data.value.datasets[0].data.push(sample0)
    const sample1 = (Math.sin(timestamp / 9000) + 1) * 3000000
    data.value.datasets[1].data.push(sample1)

    // prune to max 100 samples
    if (data.value.datasets[0].data.length > 20) {
      data.value.labels.shift()
      data.value.datasets[0].data.shift()
      data.value.datasets[1].data.shift()
    }
  }
})

const running = ref(true)
function toggle() {
  running.value ? pause() : resume()
  running.value = !running.value
}
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex justify-between mb-4">
      <BBtn @click="toggle">
        {{ running ? 'Stop' : 'Resume' }}
      </BBtn>
      <BSegmentGroup v-model="windowSize">
        <BSegmentButton value="5000">
          5 s
        </BSegmentButton>
        <BSegmentButton value="30000">
          30 s
        </BSegmentButton>
        <BSegmentButton value="60000">
          60 s
        </BSegmentButton>
      </BSegmentGroup>
    </div>
    <BChart
      :from="from"
      :to="to"
      :data="data"
      auto-range
      hoverable
      color="tertiary"
      class="h-42 w-full"
    >
      <template
        #tooltip="{ epoch, hoverIndex }"
      >
        <p class="text-xs flex justify-between gap-4">
          <span>@{{ new Date(epoch).toLocaleTimeString('sv-SE') }}</span>
        </p>
        <ul class="max-w-md list-inside">
          <li
            v-for="(dataset, index) in data.datasets"
            :key="index"
            class="flex items-center"
          >
            <i
              class="i-mdi:bell-ring mr-2"
              :style="{ color: dataset.stroke.stroke }"
            />
            {{ dataset.data[hoverIndex] }}
          </li>
        </ul>
      </template>
    </BChart>
    Samples in buffer: {{ data.datasets[0].data?.length }}
  </div>
</template>

Stacked

Stacked charts are useful when you want to show the total of multiple series. For example when you want to show the total of a series of data and the total of a subset of that data. For example the total of all sales and the total of sales for a specific product.

Chart ​

Basic ​

Axis ​

Tooltip slot ​

Streaming ​

Auto range ​