Vue Graphic Walker

@kanaries/vue-graphic-walker is a Vue component that allows you to create a graphic walker (a lite opensource tableau alternative).

Usage

Step 1: install package

npm i --save @kanaries/vue-graphic-walker

Step 2: use component in vue.

Use as component

<script setup lang="ts">
import { VueGraphicWalker } from '@kanaries/vue-graphic-walker';
</script>

<template>
  <VueGraphicWalker />
</template>

use as hook

<script setup lang="ts">
import { useGraphicWalker } from './useGraphicWalker';
import { onMounted, ref } from 'vue';
const gw = ref<HTMLElement | null>(null);
onMounted(() => {
  const { render } = useGraphicWalker(gw)
  render();
})
</script>

<template>
  <div ref="gw"></div>
</template>

Docs

props of component is same as graphic-walker:

export interface IGWProps {
    dataSource?: IRow[];
    rawFields?: IMutField[];
    spec?: Specification;
    hideDataSourceConfig?: boolean;
    i18nLang?: string;
    i18nResources?: { [lang: string]: Record<string, string | any> };
    keepAlive?: boolean;
    /**
     * auto parse field key into a safe string. default is true
     */
    fieldKeyGuard?: boolean;
    /** @default "vega" */
    themeKey?: IThemeKey;
    dark?: IDarkMode;
    storeRef?: React.MutableRefObject<IGlobalStore | null>;
    toolbar?: {
        extra?: ToolbarItemProps[];
        exclude?: string[];
    };
}

• graphic-walker docs
• graphic-walker github