Data is provided to Studio using the data property.
Data is retrieved from data sources. A data source represents one or more tables of data.
When multiple tables are provided, Relationships describe how the tables are linked.
See Loading Data for how to provide data directly or have Studio fetch it on demand, and Sharing & Caching Data to reuse data sources across multiple instances of Studio.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
AgDataEngine,
AgDataSourcesDefinition,
AgReportState,
AgStudioApi,
AgStudioApiReadyEvent,
AgStudioMode,
AgStudioProperties,
enableStudioDevValidations,
} from "ag-studio";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableStudioDevValidations();
}
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"
:initialState="initialState"
:mode="mode"
:data="data"></ag-studio>
</div>
</div>
`,
components: {
"ag-studio": AgStudio,
},
setup(props) {
const studioApi = shallowRef<AgStudioApi | null>(null);
const initialState = ref<AgReportState>({
pages: [
{
id: "page1",
widgets: {
"1": {
type: "grid",
dataMapping: {
cols: [
{ id: "medals.country" },
{ id: "medals.sport" },
{ id: "medals.gold", aggregation: "sum" },
{ id: "medals.silver", aggregation: "sum" },
{ id: "medals.bronze", aggregation: "sum" },
{ id: "medals.total", aggregation: "sum" },
],
},
},
"2": {
type: "column-chart-grouped",
dataMapping: {
categoryKey: [{ id: "medals.country" }],
valueKey: [
{ id: "medals.gold", aggregation: "sum" },
{ id: "medals.silver", aggregation: "sum" },
{ id: "medals.bronze", aggregation: "sum" },
],
tooltipKey: [],
},
},
},
widgetLayout: {
"1": {
xTrack: 0,
yTrack: 0,
xSpan: 24,
ySpan: 16,
},
"2": {
xTrack: 0,
yTrack: 16,
xSpan: 24,
ySpan: 16,
},
},
},
],
selectedPageId: "page1",
panels: {
filters: {
collapsed: true,
},
edit: {
collapsed: true,
},
},
});
const mode = ref<AgStudioMode>("edit");
const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);
const onApiReady = (params: AgStudioApiReadyEvent) => {
studioApi.value = params.api;
const toStudioData = (data) => ({ sources: [{ id: "medals", data }] });
fetch("https://www.ag-grid.com/studio/archive/3.0.0/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((respData) => (data.value = toStudioData(respData)));
};
return {
studioApi,
initialState,
mode,
data,
onApiReady,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
The example above demonstrates Loading Data from a single data source.
<ag-studio
:data="data"
/* other studio properties ... */>
</ag-studio>
this.data = {
sources: [{
id: 'medals',
data: [
{
year: 2000,
sport: 'Swimming',
country: 'United States',
// ... other fields
},
// ... other rows
],
}],
};See Data Modelling for relationships, joining dates, schema design, and fan-out detection.
If your data can't be shipped to the browser at all - it's too large, or you want your own backend executing queries directly - see the separate Server-Side Data section.
Data API Copy Link
Properties available on the AgDataSourcesDefinition<TRegistry extends AgBaseRegistry = AgDefaultRegistry> interface.
One or more data sources.
|
When using multiple related tables, this describes the fields that link the tables together.
|
Expression field definitions for calculated columns.
|
Overrides to existing formats, or additional custom formats.
|
AI-facing overview of the entire dataset: what it contains, what it's for, domain quirks.
|
Named time dimensions (calendars) that supply date fragments and a continuous date spine.
|
Additional date-fragment bucket definitions to register alongside the built-in set (year, quarter, month, week, day, monthOfYear, dayOfWeek, …). Use this to add project-specific groupings such as weekend, dayOfMonth, or hour that the built-in registry does not include. Provide via createBuckets so type-level registry inference works correctly.
|
Engine-wide behavioural options, such as fan-out detection policy.
|