https://github.com/kanaries/vue-graphic-walker

vue componet for graphic walker (tableau alternative)
https://github.com/kanaries/vue-graphic-walker

data-visualization tableau visualization

Last synced: about 18 hours ago
JSON representation

vue componet for graphic walker (tableau alternative)

• Host: GitHub
• URL: https://github.com/kanaries/vue-graphic-walker
• Owner: Kanaries
• License: apache-2.0
• Created: 2023-07-06T03:50:42.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-24T14:24:56.000Z (9 months ago)
• Last Synced: 2024-11-09T21:35:17.356Z (about 2 months ago)
• Topics: data-visualization, tableau, visualization
• Language: TypeScript
• Homepage:
• Size: 55.7 KB
• Stars: 10
• Watchers: 1
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Graphic Walker

[English](https://github.com/Kanaries/vue-graphic-walker) | [简体中文](./docs/README.zh-CN.md)

![](https://img.shields.io/github/license/kanaries/vue-graphic-walker)

![](https://img.shields.io/npm/v/@kanaries/vue-graphic-walker)

`@kanaries/vue-graphic-walker` is a Vue component that allows you to create a [graphic walker](https://github.com/Kanaries/graphic-walker) (a lite opensource tableau alternative).

![graphic-walker-banner](https://user-images.githubusercontent.com/22167673/222895294-47ddd664-106e-45ff-a613-e7919522cb79.png)

## Usage

Step 1: install package

```bash

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

```

Step 2: use component in vue.

### Use as component

```vue

import { VueGraphicWalker } from '@kanaries/vue-graphic-walker';

  

```

### Use as hook

```vue

import { useGraphicWalker } from './useGraphicWalker';

import { onMounted, ref } from 'vue';

const gw = ref<HTMLElement | null>(null);

onMounted(() => {

  const { render } = useGraphicWalker(gw)

  render();

})

  


```

## Docs

props of  component is same as graphic-walker:

```ts

export interface IGWProps {

    dataSource?: IRow[];

    rawFields?: IMutField[];

    spec?: Specification;

    hideDataSourceConfig?: boolean;

    i18nLang?: string;

    i18nResources?: { [lang: string]: Record };

    keepAlive?: boolean;

    /**

     * auto parse field key into a safe string. default is true

     */

    fieldKeyGuard?: boolean;

    /** @default "vega" */

    themeKey?: IThemeKey;

    dark?: IDarkMode;

    storeRef?: React.MutableRefObject;

    toolbar?: {

        extra?: ToolbarItemProps[];

        exclude?: string[];

    };

}

```

+ [graphic-walker docs](https://docs.kanaries.net/graphic-walker)

+ [graphic-walker github](https://github.com/Kanaries/graphic-walker)