--- product: "AG Studio" title: "Overview" description: "Learn how to build and explore interactive reports in AG Studio: add charts, tables and KPIs, connect your data, and filter it to answer questions." framework: react version: "3.1.0" related: - title: "User Interface" url: "https://www.ag-grid.com/studio/analysts/user-interface/" llms: "https://www.ag-grid.com/studio/llms.txt" --- # Overview AG Studio lets you build and explore reports inside your application. A report is made up of pages. Each page holds Widgets, such as charts, tables and KPIs, that show your data. You add Widgets to a page, choose the data they show, and filter it to answer your questions. > **Note** > > Your application decides some of what you see, such as which Widgets are available, which mode a report opens in, the defaults of many settings, how reports are saved, and how you move between pages. If something described here is missing or starts differently, speak to your developer or administrator. ## Try It The report below opens in Edit Mode. Click a Widget to see its Setup and Format tabs in the Compose Panel. Click the Data Panel's title to expand it, then drag a field onto an empty part of the page. #### Sales Report ```ts import { AgReportState, AgStudioApi, AgStudioProperties, createStudio, enableStudioDevValidations, } from "ag-studio"; import { getData } from "./data.ts"; if (process.env.NODE_ENV !== "production") { // Enable extended validations only for development enableStudioDevValidations(); } const initialState: AgReportState = { pages: [ { id: "page1", widgets: { "total-revenue": { type: "value", dataMapping: { value: [{ id: "orders.revenue", aggregation: "sum" }], }, format: { style: { label: { enabled: true, }, }, }, }, "total-orders": { type: "value", dataMapping: { value: [{ id: "orders.orders", aggregation: "sum" }], }, format: { style: { label: { enabled: true, }, }, }, }, "revenue-by-channel": { type: "donut-chart", dataMapping: { categoryKey: [{ id: "orders.channel" }], valueKey: [{ id: "orders.revenue", aggregation: "sum" }], tooltipKey: [], }, format: { title: { enabled: true, text: "Revenue by Channel", }, }, }, "revenue-by-region": { type: "column-chart-grouped", dataMapping: { categoryKey: [{ id: "orders.region" }], valueKey: [{ id: "orders.revenue", aggregation: "sum" }], tooltipKey: [], }, format: { title: { enabled: true, text: "Revenue by Region", }, }, }, "revenue-by-month": { type: "line-chart", dataMapping: { categoryKey: [{ id: "orders.month" }], valueKey: [{ id: "orders.revenue", aggregation: "sum" }], tooltipKey: [], }, format: { title: { enabled: true, text: "Revenue by Month", }, }, }, }, widgetLayout: { "total-revenue": { xTrack: 0, yTrack: 0, xSpan: 8, ySpan: 8 }, "total-orders": { xTrack: 8, yTrack: 0, xSpan: 8, ySpan: 8 }, "revenue-by-channel": { xTrack: 16, yTrack: 0, xSpan: 8, ySpan: 24 }, "revenue-by-region": { xTrack: 0, yTrack: 8, xSpan: 16, ySpan: 16 }, "revenue-by-month": { xTrack: 0, yTrack: 24, xSpan: 24, ySpan: 18 }, }, }, ], selectedPageId: "page1", panels: { filters: { collapsed: true, }, data: { collapsed: true, }, }, }; const studioProperties: AgStudioProperties = { mode: "edit", initialState, data: getData(), }; let studioApi: AgStudioApi; // setup Studio after the page has finished loading const studioDiv = document.querySelector("#myStudio")!; studioApi = createStudio(studioDiv, studioProperties); ``` [Live example: Sales Report](https://www.ag-grid.com/studio/examples/analyst-overview/report-tour/typescript/) ## Modes AG Studio has two modes. Unless your application chooses otherwise, a report opens in View Mode. See [Modes](https://www.ag-grid.com/studio/analysts/user-interface/#modes) for how to switch. #### Edit Mode Edit Mode is for building a report: - Add Widgets from the Compose Panel, or by dragging fields from the Data Panel. - Move and resize Widgets, and change the page layout. - Choose each Widget's data on its Setup tab, and how it looks on its Format tab. #### View Mode View Mode is for exploring a report. The layout is locked, but you can still: - Filter the page from the Filters Panel or from Filter Widgets. - Click a chart or Table to cross-filter the other Widgets. - Hover over Widgets to see tooltips. - Export a Widget's data, or a chart as an image. ## Panels The panels beside the report hold the tools for working with it. By default, View Mode shows only the Filters Panel. Your developer can change which panels appear and where. **[Filters](https://www.ag-grid.com/studio/analysts/filters-panel/)** Narrow the data shown on the page or in one Widget. **[Compose](https://www.ag-grid.com/studio/analysts/user-interface/#compose-panel)** Add Widgets, and set up the selected Widget. **[Data](https://www.ag-grid.com/studio/analysts/data-panel/)** Browse the fields you can drag into Widgets. **[AI Assistant](https://www.ag-grid.com/studio/analysts/ai-assistant/)** Describe what you want to an AI service your team connects. ## Where to Start 1. [User Interface](https://www.ag-grid.com/studio/analysts/user-interface/) - find your way around the panels and modes. 2. [Widget Basics](https://www.ag-grid.com/studio/analysts/widget-basics/) - add, move and resize Widgets. 3. [Building Widgets](https://www.ag-grid.com/studio/analysts/building-widgets/) - choose a Widget's data and change how it looks. 4. [Using the Catalogue](https://www.ag-grid.com/studio/analysts/widget-catalogue/) - pick the right Widget, and see which data each one needs. 5. [Filters Panel](https://www.ag-grid.com/studio/analysts/filters-panel/) - narrow the data a report shows. > **Tip** > > The quickest way to start exploring is to drag a field from the Data Panel onto an empty part of the page. AG Studio creates a Table with that field in it. ## Explore the Guide **[Building Reports](https://www.ag-grid.com/studio/analysts/widget-basics/)** Add, set up and lay out Widgets, use the AI Assistant, and export. **[Using Data](https://www.ag-grid.com/studio/analysts/data-panel/)** Fields, calculations, number formats and blank values. **[Filtering Data](https://www.ag-grid.com/studio/analysts/filters-panel/)** Page and Widget Filters, filter types and cross-filtering. **[Widget Catalogue](https://www.ag-grid.com/studio/analysts/widget-catalogue/)** Every Widget, the data it needs and its Format settings. **[User Interface](https://www.ag-grid.com/studio/analysts/user-interface/)** The modes and panels, and how to arrange them. **[Reference](https://www.ag-grid.com/studio/analysts/keyboard-shortcuts/)** Keyboard shortcuts and accessibility.