Advanced usage of VueDataUI

[tjones-ieee]

Hello everyone,

I wanted to create a discussion thread for some advanced usage of VueDataUI. My company has committed to using this amazing project, and like any third-party library, it comes with some challenges. I won't go into the specifics of why the content of this discussion is being created, but you may surmise the reason(s).

Note: my company is not IEEE.

Everything I provide will at a minimum require Vuetify and TypeScript. It's the core component library we use, so some refactoring may be required.

Binding to VueDataUI Configurations

The first challenge we faced was creating the ability to bind to any property within a default configuration. Alec's brilliant foresight of this is demonstrated by the existence of the getVueDataUiConfig function. With this, most (if not all - we haven't got that far yet) component configurations have a default configuration object - importantly, it's not just an interface or a type, it's a real object.

This enables you to have a full object by default and make it reactive.

const defaultConfig = ref<VueUiXyConfig>(getVueDataUiConfig('vue_ui_xy') as VueUiXyConfig);

However, as amazing as it is to have a default object, in TypeScript it will respect the type definition - meaning every property is optional. This creates an impossibility to maintaining a typed object while being able to use Vue binding to components or even setting the value of a deeply nested property within TypeScript. In other words, the below is not possible without either having lots of error messages or Vue component binding warnings (or potentially even breaking your App):

defaultConfig.value.chart.title.text = 'Title';

<v-btn @click="defaultConfig.chart.title.show = !defaultConfig.chart.title.show"></v-btn>
<v-switch v-model="defaultConfig.chart.title.show"></v-switch>
{{ defaultConfig.chart?.title?.show }}
<!-- below will obliterate your app -->
<v-switch v-model="defaultConfig.chart?.title?.show"></v-switch>

Fix: Binding to VueDataUI Configurations

At first, we figured a good approach would be to wrap all properties within a separate ComputedRef getter/setter, that way we could safely mutate any property within the VueDataUI Configuration. However, this presents two issues: first is manually creating every single property (e.g., there are over 100 in vue-ui-xy), and second is the flattening of the object model. Neither are ideal. Instead, we've come up with a way (with a little assistance to ChatGPT, full disclosure) to use a generic binding composable.

This does two things: first is it maintains the object structure of the VueDataUI configuration, and secondly it maintains the "depth" when setting property values. For example:

bindings['chart.title.show'].value = false;
// instead of
showChartTitle.value = false;

Solution

import { type Ref, computed, isRef } from 'vue';

function getValue(obj: any, path: string[]): any {
  return path.reduce((o, k) => o?.[k], obj);
}
function setValue(obj: any, path: string[], value: any) {
  let target = isRef(obj) ? obj.value : obj;
  for (let i = 0; i < path.length - 1; i++) {
    if (!target[path[i]] || typeof target[path[i]] !== 'object') {
      // ensure intermediate object exists
      target[path[i]] = {};
    }
    target = target[path[i]];
  }
  target[path[path.length - 1]] = value;
}
function extractAllPaths(obj: any, currentPath: string[] = []): string[][] {
  const paths: string[][] = [];
  for (const key in obj) {
    const value = obj[key];
    const newPath = [...currentPath, key];
    if (value && typeof value === 'object' && !Array.isArray(value)) {
      paths.push(...extractAllPaths(value, newPath));
    } else {
      paths.push(newPath);
    }
  }
  return paths;
}

export function useAllBindings(configRef: Ref<Record<string, any>>): Record<string, Ref<unknown>> {
  const bindings: Record<string, Ref<unknown>> = {};
  const paths = extractAllPaths(configRef.value);
  for (const path of paths) {
    const key = path.join('.');
    bindings[key] = computed({
      get: () => getValue(configRef.value, path),
      set: (val) => setValue(configRef.value, path, val)
    });
  }

  return bindings;
}

Usage

import { VueUiXy, type VueUiXyDatasetItem, type VueUiXyConfig } from 'vue-data-ui';
import { getVueDataUiConfig } from 'vue-data-ui';
const config = ref<VueUiXyConfig>(getVueDataUiConfig('vue_ui_xy') as VueUiXyConfig);
const bindings = useAllBindings(config);

const dataset = ref<VueUiXyDatasetItem[]>([
  {
    name: 'example',
    series: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    type: 'line'
  }
]);

Mutation within TypeScript

function toggleTitle() {
  bindings['chart.title.text'].value = 'Test title';
  setTimeout(() => {
    bindings['chart.title.show'].value = !bindings['chart.title.show'].value;
    toggleTitle();
  }, 5000);
}
toggleTitle();

Mutation by components

<v-btn @click="bindings['chart.title.show'].value = !bindings['chart.title.show'].value"></v-btn>
<VueUiXy v-if="dataset.length > 0" :dataset="dataset" :config="config" />

Cheers!

[graphieros]

useObjectBindings composable was shipped in v2.16.0 🎉