AG Studio is an embedded analytics component for building interactive dashboards. The minimum setup is a single data source and a blank canvas.
1. Install Copy Link
Install the ag-studio-vue3 package from npm:
npm install ag-studio-vue3 2. Create Studio Copy Link
Studio works with arrays of plain objects, where each array becomes a data source.
Render the AgStudio component inside a sized parent (it automatically fills the available space) and set mode to "edit" so users can build and modify reports:
<template>
<div style="height: 100%; width: 100%">
<AgStudio :data="data" mode="edit" />
</div>
</template>
<script setup>
import { AgStudio } from 'ag-studio-vue3';
// Data to display in Studio (can also be loaded asynchronously)
const productData = [
{
productName: 'Printer',
category: 'Printing & Imaging',
brand: 'CleanSlate Office',
listPrice: 109.09,
unitCost: 92.26,
},
{
productName: 'Notebook',
category: 'Paper & Notebooks',
brand: 'PaperLine',
listPrice: 24.70,
unitCost: 14.19,
},
{
productName: 'Highlighters',
category: 'Writing Instruments',
brand: 'PaperLine',
listPrice: 10.34,
unitCost: 5.03,
},
// ... more rows
];
const data = {
sources: [{
id: 'products',
data: productData,
}],
};
</script> 3. Run your app Copy Link
The result is an empty AG Studio component that users can begin building reports with:
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
AgDataEngine,
AgDataSourcesDefinition,
AgStudioApi,
AgStudioApiReadyEvent,
AgStudioMode,
AgStudioProperties,
enableStudioDevValidations,
} from "ag-studio";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableStudioDevValidations();
}
const productData = [
{
productName: "Printer",
category: "Printing & Imaging",
brand: "CleanSlate Office",
listPrice: 109.09,
unitCost: 92.26,
},
{
productName: "Notebook",
category: "Paper & Notebooks",
brand: "PaperLine",
listPrice: 24.7,
unitCost: 14.19,
},
{
productName: "Highlighters",
category: "Writing Instruments",
brand: "PaperLine",
listPrice: 10.34,
unitCost: 5.03,
},
// ... more rows
];
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div style="display: flex; flex-direction: column; height: 100%">
<ag-studio
style="width: 100%; height: 100%;"
class="my-studio-container"
@api-ready="onApiReady"
:data="data"
:mode="mode"></ag-studio>
</div>
</div>
`,
components: {
"ag-studio": AgStudio,
},
setup(props) {
const studioApi = shallowRef<AgStudioApi | null>(null);
const data = ref<AgDataSourcesDefinition | AgDataEngine>({
sources: [
{
id: "products",
data: productData,
},
],
});
const mode = ref<AgStudioMode>("edit");
const onApiReady = (params: AgStudioApiReadyEvent) => {
studioApi.value = params.api;
};
return {
studioApi,
data,
mode,
onApiReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");