Realtime line charts

[ISOR3X]

Hi, I recently discovered Unovis and was wondering if it does support realtime charts?
Something similar to what apexcharts has.
When I dynamically update a ref value (I'm using Vue for my project), the chart itself does not update.

If anyone can let me know if Unovis has support for this I would greatly appreciate it.

Here is what my component currently looks like. Note that I am still new to web development so there might be a better way of doing this.

<script lang="ts" setup>
import {VisArea, VisAxis, VisBulletLegend, VisLine, VisXYContainer} from '@unovis/vue'
import {type BulletLegendItemInterface, BulletShape} from "@unovis/ts";
import type {DataRecord} from "~/utils/types";
import type {Ref} from "@vue/reactivity";

interface DataInterface {
  metadata: BulletLegendItemInterface
  data: DataRecord[]
}

// Placeholder data
const data: Ref<DataInterface[]> = ref([
  {
    metadata: {name: "A", shape: BulletShape.Circle, inactive: false, hidden: false, pointer: false},
    data: [
      {x: 0, y: Math.floor(Math.random() * 10)},
      {x: 1, y: Math.floor(Math.random() * 10)},
      {x: 2, y: Math.floor(Math.random() * 10)},
      {x: 3, y: Math.floor(Math.random() * 10)},
      {x: 4, y: Math.floor(Math.random() * 10)},
      {x: 5, y: Math.floor(Math.random() * 10)},
      {x: 6, y: Math.floor(Math.random() * 10)},
      {x: 7, y: Math.floor(Math.random() * 10)},
      {x: 8, y: Math.floor(Math.random() * 10)},
      {x: 9, y: Math.floor(Math.random() * 10)},
    ]
  },
  {
    metadata: {name: "B", shape: BulletShape.Circle, inactive: false, hidden: false, pointer: false},
    data: [
      {x: 0, y: Math.floor(Math.random() * 10)},
      {x: 1, y: Math.floor(Math.random() * 10)},
      {x: 2, y: Math.floor(Math.random() * 10)},
      {x: 3, y: Math.floor(Math.random() * 10)},
      {x: 4, y: Math.floor(Math.random() * 10)},
      {x: 5, y: Math.floor(Math.random() * 10)},
      {x: 6, y: Math.floor(Math.random() * 10)},
      {x: 7, y: Math.floor(Math.random() * 10)},
      {x: 8, y: Math.floor(Math.random() * 10)},
      {x: 9, y: Math.floor(Math.random() * 10)},
    ]
  },
])


function updateData() {
  data.value[0].data.splice(0, 1)
  console.log(data.value[0].data)
  // const lastX = data.value[0].data[data.value[0].data.length - 1].x
  // data.value[0].data.push({x: lastX + 1, y: Math.floor(Math.random() * 10)})
}

// setInterval(updateData, 100)

</script>

<template>
  <UButton @click="updateData">Update</UButton>
  <div class="!w-[32rem] !h-[32rem] flex flex-col">
    <VisXYContainer :margin="{top: 10, bottom: 0}" :xDomain="[0,9]" :yDomain="[0,9]" class="grow">
      <template v-for="(item, index) in data" :key="'area-' + index">
        <VisLine :color="`var(--vis-color${index})`" :data="item.data" :x="(i: any) => i.x" :y="(i: any) => i.y"/>
        <VisArea :color="`var(--vis-color${index})`" :data="item.data" :x="(i: any) => i.x" :y="(i: any) => i.y"
                 :opacity="0.2"/>
      </template>
      <VisAxis :tickLine="false" type="x"/>
      <VisAxis :gridLine="false" :tickLine="false" type="y"/>
    </VisXYContainer>
    <VisBulletLegend :items="data.map(item => item.metadata)"/>
  </div>
</template>

<style scoped>
div {
  --vis-color0: theme('colors.red.400');
  --vis-color1: theme('colors.blue.400');
  --vis-color2: theme('colors.yellow.400');
  --vis-color3: theme('colors.green.400');
  --vis-color4: theme('colors.purple.400');
  --vis-color5: theme('colors.pink.400');
  --vis-axis-tick-label-color: theme('colors.gray.700');
  --vis-axis-grid-color: theme('colors.gray.700');
  --vis-axis-tick-color: theme('colors.gray.700');
  --vis-axis-label-color: theme('colors.gray.700');
}
</style>

[ISOR3X]

After looking around the source code I noticed the VisXYContainer has a watch() function and since I wasn't supplying my data to the container it indeed wasn't updating. So it seems to be possible.

Closing this already 😄

[ISOR3X]

Reopening this to see if anyone can help improve this. Right now the animating of the lines messes the realtime part up (points are animated to their new point instead of moving sideways). I don't see any documentation on changing the animation for charts.
My current code is below.

<script lang="ts" setup>
import {VisArea, VisAxis, VisLine, VisXYContainer} from '@unovis/vue'
import type {DataRecord} from "~/utils/types";
import type {Ref} from "@vue/reactivity";

const data: Ref<DataRecord[]> = ref([
  {x: 0, y: 0},
  {x: 1, y: 2},
  {x: 2, y: 1},
  {x: 3, y: 1},
  {x: 4, y: 3},
  {x: 5, y: 1},
  {x: 6, y: 5},
  {x: 7, y: 1},
])

function updateData() {
  data.value.splice(0, 1)
  const lastX = data.value[data.value.length - 1].x
  data.value.push({x: lastX + 1, y: Math.floor(Math.random() * 10)})
}

function calcXD() {
  return [data.value.map(i => i.x)[0], data.value.map(i => i.x)[data.value.length - 1]]
}

function calcYD() {
  // return [Math.min(...data.value.map(i => i.y)), Math.max(...data.value.map(i => i.y))]
  return [0, 10]
}

</script>

<template>
  <UButton class="absolute left-2 top-2" @click="updateData">Update</UButton>
  <div class="!w-[32rem] !h-[32rem] flex flex-col">
    <VisXYContainer :data="data" :margin="{top: 10, bottom: 0}"
                    :xDomain="calcXD()"
                    :yDomain="calcYD()"
                    class="grow">
      <VisLine :color="`var(--vis-color${0})`" :x="(i: any) => i.x" :y="(i: any) => i.y"/>
      <VisArea :color="`var(--vis-color${0})`" :opacity="0.2" :x="(i: any) => i.x"
               :y="(i: any) => i.y"/>
      <VisAxis :tickLine="false" type="x"/>
      <VisAxis :gridLine="false" :tickLine="false" type="y"/>
    </VisXYContainer>
    <!--    <VisBulletLegend :items=""/>-->
  </div>
</template>

<style scoped>
div {
  --vis-color0: theme('colors.red.400');
  --vis-color1: theme('colors.blue.400');
  --vis-color2: theme('colors.yellow.400');
  --vis-color3: theme('colors.green.400');
  --vis-color4: theme('colors.purple.400');
  --vis-color5: theme('colors.pink.400');
  --vis-axis-tick-label-color: theme('colors.gray.700');
  --vis-axis-grid-color: theme('colors.gray.700');
  --vis-axis-tick-color: theme('colors.gray.700');
  --vis-axis-label-color: theme('colors.gray.700');
}
</style>

Suggestions on how to make this more like the chart I linked to in my initial message would be very welcome!

[ISOR3X]

Thanks for the feedback @ISOR3X! The current version of Unovis doesn't support "streaming" (moving the graph sideways) animation. But it's something we're considering adding in the future.

I for one would definitely appreciate it a lot if it would be added. I'd even offer helping but then again I'm still new to all this. Guess I will have to do with an alternative for now but I will be keeping a close eye on the updates for Unovis.
Thank you for the great work.

[jerodfritz]

@ISOR3X If you set a :duration="0" on your VisXYContainer it will disable the animation and the graph will appear to slide.

eg.

<VisXYContainer :duration="0" :data="data" :margin="{top: 10, bottom: 0}"
                    :xDomain="calcXD()"
                    :yDomain="calcYD()"
                    class="grow">

[ISOR3X]

@jerodfritz Thank you for your reply! I've still been looking for a proper solution but this motivated to give Unovis another shot.
While with the duration set to 0 it does come very close to what I want, ideally I also want to have the horizontal movement transitioned.
This is because for my use case I can get data with speeds from 1 to a 100 Hz, although depending on performance of both the chart and the websocket connection I may have to settle for a lower upper limit.

Last week I stumbled upon this blog post by Mike Bostock from D3. I have been trying to get something similar to work both using Unovis and D3 to no success.

My current Unovis implementation looks like this;

<script lang="ts" setup>
import { VisLine, VisXYContainer } from "@unovis/vue";
import type { Ref } from "@vue/reactivity";
import { computed, ref } from "vue";
import { createData, Vector2D, dataPoint } from "../assets/data.ts";
import { timeout } from "d3";

const data: Ref<Vector2D[]> = ref(createData(100));

const duration = ref(1000);
const durationFormatted = computed(() => {
  return `${duration.value}ms`;
});

const offset = ref(0);
const offsetFormatted = computed(() => {
  return `translateX(${offset.value}px)`;
});

function calcXD() {
  return [data.value.map(i => i.x)[0], data.value.map(i => i.x)[90]];
}

const interval = 1000;

function translate() {
  duration.value = interval;
  offset.value = -9; // Width of container is 914px, with 100 data points, each point is about 9px wide.
  timeout(() => {
    duration.value = 0;
    data.value.shift();
    offset.value = 0;
  }, interval);
}

// Simulate data update / websocket message
setInterval(() => {
  const lastX = data.value[data.value.length - 1].x;
  data.value.push(dataPoint(lastX + 1));

  translate();
}, interval * 2);

</script>

<template>
  <div class="flex flex-wrap items-center justify-center h-screen">
    <div class="!w-[64rem] !h-[32rem] flex flex-col bg-white/10 rounded-2xl p-2">
      <VisXYContainer :data="data" :key="data[0].y" :margin="{top: 10, bottom: 0}"
                      :xDomain="calcXD()"
                      :yDomain="[-1,1]"
                      :duration="0"
                      class="grow xy-container">
        <VisLine :x="(i: any) => i.x" :y="(i: any) => i.y" curveType="linear" />
      </VisXYContainer>

    </div>
  </div>
</template>

<style lang="postcss">
.xy-container > svg > g > g {
  transition-property: transform;
  transition-duration: v-bind("durationFormatted");
  transition-timing-function: linear;
  transform: v-bind("offsetFormatted");
}
</style>

While it does transition properly, there's a delay between each transition and I'm not sure how to handle this.
I'm not sure how relevant this still is to my feature request but hopefully anyone can point me in the right direction (though maybe keeping this discussion alive can convince the Unovis Team of adding official support for it 😄)

Thanks a lot either way!

[jerodfritz]

The horizontal slide transition would be ideal for my use case too. I'm plotting Processor, Memory and Network traffic. I like the idea of a viewable mask on top of the graph underneath, but in my case the width is responsive, so not sure how to approach.

[ISOR3X]

@jerodfritz I've been able to spend some more time on this and got a working example. It definitely needs some optimization but currently it is able to handle 600 points moving sideways with new data added every 10ms.
Perhaps you may have some use for the code;

<script setup lang="ts">
import * as d3 from "d3";
import { nextDataPoint, Vector2D } from "../assets/data.ts";
import { computed, onMounted, ref } from "vue";
import { onKeyStroke } from "@vueuse/core";

const container = ref();
const pathEl = ref();
const svgEl = ref();

const width = ref(896);
const height = ref(448);
const margin = { top: 20, right: 40, bottom: 20, left: 200 };
const n = 600;
const interval = 10;

const data = ref<Vector2D[]>([]);

const offset = ref(0);
const offsetFormatted = computed(() => {
  return `translateX(${offset.value}px)`;
});
let path: any;

const x = d3.scaleLinear([0, n], [margin.left, width.value - margin.right]);
const y = d3.scaleLinear([-2, 2], [height.value - margin.bottom, margin.top]);

const line = d3.line<Vector2D>()
  .x(d => x(data.value.indexOf(d)))
  .y(d => y(d.y));

onMounted(() => {
  const svg = d3.select(svgEl.value)
    .attr("width", width.value)
    .attr("height", height.value);


  svg.append("g")
    .attr("transform", `translate(0, ${height.value / 2})`)
    .call(d3.axisBottom(x).tickSizeOuter(0))
    .call(g => g.selectAll(".tick line").clone()
      .attr("y2", height.value / 2 - margin.bottom)
      .attr("y1", -height.value / 2 + margin.top)
      .attr("stroke-opacity", 0.1)
    )
    .selectAll(".tick text")   // Remove the tick labels since they're invalid anyway.
    .each(function() {
      d3.select(this).remove();
    });

  svg.append("g")
    .attr("transform", `translate(${margin.left}, 0)`)
    .call(d3.axisLeft(y))
    .call(g => g.selectAll(".tick line").clone()
      .attr("x2", width.value - margin.right - margin.left)
      .attr("stroke-opacity", 0.1)
    );


  path = d3.select(".path")
    .attr("stroke", "red")
    .attr("stroke-width", 2)
    .attr("d", line(data.value));

});

onKeyStroke(" ", () => {
  onNewData();
});

function onNewData() {
  if (pathEl.value === null) return;


  if (data.value.length > x.domain()[1] * 1.1) {
    pathEl.value.style.transitionDuration = `${interval}ms`;
    offset.value -= Math.floor(margin.left - x(-1));
  }

  setTimeout(() => {
    transitioned();
  }, interval);
}

function transitioned() {
  if (pathEl.value === null) return;

  pathEl.value.style.transitionDuration = "0ms";
  offset.value = 0;
  data.value.push(nextDataPoint());

  // * 1.1 to allow for some overdraw which we clip off eventually but prevents the jumping path end from showing.
  if (data.value.length > x.domain()[1] * 1.1) data.value.shift();
  pathEl.value.setAttribute("d", line(data.value));

  setTimeout(() => {
    onNewData();
  }, 1);
}

</script>

<template>
  <div class="flex flex-wrap items-center justify-center w-screen h-screen">
    <div class="w-full h-[32rem] bg-white/50 flex justify-center" ref="container">
      <svg ref="svgEl" class="bg-black/10">
        <clipPath id="clip">
          <rect :x="margin.left" :y="margin.top"
                :width="width - margin.right - margin.left"
                :height="height - margin.top - margin.bottom" />
        </clipPath>
        <g clip-path="url(#clip)">
          <path ref="pathEl" d="" fill="none" class="path" @transitionend=""></path>
        </g>
        <rect :x="margin.left" y="0" height="100%" :width="width - margin.right - margin.left" fill="white"
              clip-path="url(#clip)" opacity="10%" />
      </svg>
    </div>
  </div>
</template>

<style scoped>
.path {
  transition-property: transform;
  transition-timing-function: linear;
  transform: v-bind("offsetFormatted");

}
</style>

Data generation

import * as d3 from "d3";

export interface Vector2D {
  x: number;
  y: number;
}

export function createData(samples: number) {
  const data: Vector2D[] = [];
  for (let i = 0; i < samples; i++) {
    data.push({
      x: i,
      y: d3.randomNormal(0, 0.2)()
    });
  }
  return data;
}

export function dataPoint(x: number) {
  x += 0.1;
  return {
    x: x,
    y: d3.randomNormal(0, 0.2)()
  };
}

let i = 0;

export function nextDataPoint() {
  const dp = {
    x: i,
    y: Math.sin(i * (2 * Math.PI * 0.05)) + d3.randomNormal(0, 0.1)()
  };
  i += 0.2;
  return dp;
}

Additionally I also found the following package which may be of interest to you.. I personally haven't used it yet but it seems to be one of the few if not only packages that does realtime charts with smooth transitioning.