ag-studio-vue3

Vue Embedded Analytics

Overview

AG Studio is an embedded analytics component that lets analysts build interactive dashboards on top of your data. Add a single component to your application, configure your data source and get drag-and-drop report building with advanced cross-filtering, powered by a built-in data engine.

How it Works

Your application owns the surrounding shell: routing, authentication, data fetching, persistence, whilst AG Studio handles everything inside the component boundary: the canvas, widgets, drag-and-drop, and filtering, all powered by a built-in data engine that runs entirely in the browser.

Once configured, analysts can use the drag-and-drop UI to create self-serve reports, and end users can then interact with those reports to interrogate their data with cross-filters and page-level filters.

You can ship pre-built reports in code so users see a finished dashboard on first load, or let analysts create reports from scratch using the drag-and-drop editor. The entire dashboard state is a single JSON object, so you can save and restore it later.

Features

Quick Start

To configure AG Studio, simply provide your data and render the component.

Installation

npm install ag-studio-vue3

Setup

1. Define Your Data

Studio works with arrays of plain objects, where each array becomes a data source:

const data = {
    sources: [
        {
            id: 'products',
            data: [
                {
                    product_name: 'Printer',
                    category: 'Printing & Imaging',
                    brand: 'CleanSlate Office',
                    list_price: 109.09,
                    unit_cost: 92.26,
                },
                {
                    product_name: 'Notebook',
                    category: 'Paper & Notebooks',
                    brand: 'PaperLine',
                    list_price: 24.7,
                    unit_cost: 14.19,
                },
                {
                    product_name: 'Highlighters',
                    category: 'Writing Instruments',
                    brand: 'PaperLine',
                    list_price: 10.34,
                    unit_cost: 5.03,
                },
                // ... more rows
            ],
        },
    ],
};

2. Add the Component

Import AgStudio from ag-studio-vue3 and use it in your template. AG Studio fills the size of its parent, so ensure it has a height and width:

<template>
    <div style="height: 100%; width: 100%">
        <AgStudio :data="data" mode="edit" />
    </div>
</template>

<script setup>
import { AgStudio } from 'ag-studio-vue3';

const data = { /* ... */ };
</script>

That's it — users can now build reports using the drag-and-drop editor.

Note: For more information on building dashboards with AG Studio, refer to our Quick Start guide or step through the full Tutorial.

User Guides

Our User Guides contain comprehensive guides to help users understand how to use AG Studio.

Support

AG Studio customers have access to dedicated support via ZenDesk, which is monitored by our engineering teams.

License

ag-studio has a Commercial license. See the LICENSE file for more info.

Request a free 45-day enterprise trial to explore the full enterprise capabilities of AG Studio with no restrictions or watermarks.

AG Studio is built on top of AG Grid — the best JavaScript Data Grid in the world. If you need a standalone data grid with sorting, filtering, grouping, pivoting, and more, check out AG Grid Repo.

AG Studio is built on top of AG Charts — the best JavaScript Charting library in the world. If you need standalone charts with bar, line, pie, scatter, treemap, and more, check out AG Charts.

Follow us to keep up to date with all the latest news from AG Studio: