ag-studio-angular 2.1.2 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.html +394 -7137
- package/README.md +21 -21
- package/fesm2022/ag-studio-angular.mjs +351 -49
- package/fesm2022/ag-studio-angular.mjs.map +1 -1
- package/index.d.ts +208 -31
- package/package.json +6 -4
package/README.md
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
<div align="center">
|
|
4
4
|
<picture>
|
|
5
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://ag-grid.com/studio/images/ag-studio-logo-dark.svg"/>
|
|
6
|
-
<source media="(prefers-color-scheme: light)" srcset="https://ag-grid.com/studio/images/ag-studio-logo.svg"/>
|
|
7
|
-
<img width="100%" alt="AG Studio Logo" src="https://ag-grid.com/studio/images/ag-studio-logo.svg"/>
|
|
5
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://www.ag-grid.com/studio/images/ag-studio-logo-dark.svg"/>
|
|
6
|
+
<source media="(prefers-color-scheme: light)" srcset="https://www.ag-grid.com/studio/images/ag-studio-logo.svg"/>
|
|
7
|
+
<img width="100%" alt="AG Studio Logo" src="https://www.ag-grid.com/studio/images/ag-studio-logo.svg"/>
|
|
8
8
|
</picture>
|
|
9
9
|
<div align="center">
|
|
10
|
-
<h4><a href="https://ag-grid.com/studio/">Website</a> · <a href="https://ag-grid.com/studio/angular/overview/">Documentation</a> · <a href="https://ag-grid.com/studio/example/">Live Demo</a></h4>
|
|
10
|
+
<h4><a href="https://www.ag-grid.com/studio/">Website</a> · <a href="https://www.ag-grid.com/studio/angular/overview/">Documentation</a> · <a href="https://www.ag-grid.com/studio/example/">Live Demo</a></h4>
|
|
11
11
|
</div>
|
|
12
12
|
<br>
|
|
13
13
|
<a href="https://www.npmjs.com/package/ag-studio-angular">
|
|
@@ -18,18 +18,18 @@
|
|
|
18
18
|
</a>
|
|
19
19
|
<br><br>
|
|
20
20
|
<!-- START MAIN DESCRIPTION -->
|
|
21
|
-
<p><strong><a href="https://ag-grid.com/studio/angular/overview/"><img src="https://ag-grid.com/images/fw-logos/angular.svg" height="16" width="16" alt="Angular Logo"> AG Studio</a></strong> is an <strong>Angular</strong> Embedded Analytics component for creating dashboards, built on top of <a href="https://ag-grid.com">AG Grid</a> and <a href="https://ag-grid.com/charts">AG Charts</a>.</p>
|
|
21
|
+
<p><strong><a href="https://www.ag-grid.com/studio/angular/overview/"><img src="https://www.ag-grid.com/images/fw-logos/angular.svg" height="16" width="16" alt="Angular Logo"> AG Studio</a></strong> is an <strong>Angular</strong> Embedded Analytics component for creating dashboards, built on top of <a href="https://www.ag-grid.com/">AG Grid</a> and <a href="https://www.ag-grid.com/charts/">AG Charts</a>.</p>
|
|
22
22
|
<!-- END MAIN DESCRIPTION -->
|
|
23
23
|
<br>
|
|
24
24
|
</div>
|
|
25
25
|
|
|
26
26
|
<picture>
|
|
27
|
-
<source srcset="https://ag-grid.com/studio/images/studio-footer.png" media="(prefers-color-scheme: light)">
|
|
28
|
-
<source srcset="https://ag-grid.com/studio/images/studio-footer-dark.png" media="(prefers-color-scheme: dark)">
|
|
29
|
-
<img src="https://ag-grid.com/studio/images/studio-footer.png" alt="AG Studio Preview">
|
|
27
|
+
<source srcset="https://www.ag-grid.com/studio/images/studio-footer.png" media="(prefers-color-scheme: light)">
|
|
28
|
+
<source srcset="https://www.ag-grid.com/studio/images/studio-footer-dark.png" media="(prefers-color-scheme: dark)">
|
|
29
|
+
<img src="https://www.ag-grid.com/studio/images/studio-footer.png" alt="AG Studio Preview">
|
|
30
30
|
</picture>
|
|
31
31
|
<div align="right">
|
|
32
|
-
<a href="https://ag-grid.com/studio/example/"><br><img alt="Live Demo" src="https://img.shields.io/badge/ag--grid.com%2Fstudio-Live%20Demo-blue?style=for-the-badge"></a>
|
|
32
|
+
<a href="https://www.ag-grid.com/studio/example/"><br><img alt="Live Demo" src="https://img.shields.io/badge/ag--grid.com%2Fstudio-Live%20Demo-blue?style=for-the-badge"></a>
|
|
33
33
|
</div>
|
|
34
34
|
|
|
35
35
|
## Overview
|
|
@@ -46,13 +46,13 @@ You can ship pre-built reports in code so users see a finished dashboard on firs
|
|
|
46
46
|
|
|
47
47
|
### Features
|
|
48
48
|
|
|
49
|
-
| Feature
|
|
50
|
-
|
|
|
51
|
-
| [Drag & Drop Report Builder](https://ag-grid.com/studio/angular/modes-layout/) | Bar charts, line charts, pie charts, grids, KPI tiles, text, and images on a drag-and-drop canvas. Design in **edit mode**, then switch to **view mode** to lock the layout while keeping the dashboard fully interactive. |
|
|
52
|
-
| [Data Engine](https://ag-grid.com/studio/angular/data/) | Provide one or more data sources and the data engine automatically manages joins across tables via relationships, aggregation, filtering, and calculated fields through an expression language. No query layer required. |
|
|
53
|
-
| [Advanced Filtering](https://ag-grid.com/studio/angular/filters/)
|
|
54
|
-
| [Theming](https://ag-grid.com/studio/angular/theming/) | Full customisation via the Theming API. Override colours, fonts, spacing, and borders across the Studio UI, grid widgets, and chart widgets independently. Light and dark modes are supported out of the box. |
|
|
55
|
-
| [State Management](https://ag-grid.com/studio/angular/state/) | The entire dashboard state (pages, widgets, layout, and filters) is captured in a single serialisable JSON object. Save and restore state to persist reports, and let users switch between saved reports. |
|
|
49
|
+
| Feature | Description |
|
|
50
|
+
| ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
51
|
+
| [Drag & Drop Report Builder](https://www.ag-grid.com/studio/angular/modes-layout/) | Bar charts, line charts, pie charts, grids, KPI tiles, text, and images on a drag-and-drop canvas. Design in **edit mode**, then switch to **view mode** to lock the layout while keeping the dashboard fully interactive. |
|
|
52
|
+
| [Data Engine](https://www.ag-grid.com/studio/angular/data/) | Provide one or more data sources and the data engine automatically manages joins across tables via relationships, aggregation, filtering, and calculated fields through an expression language. No query layer required. |
|
|
53
|
+
| [Advanced Filtering](https://www.ag-grid.com/studio/angular/filters-panel/) | Page-level filters, widget-level filters, and cross-filtering between widgets are all built in. Users can filter from the filters panel, from on-canvas filter widgets (list, button, and date), or by clicking data points in charts to cross-filter the rest of the page. |
|
|
54
|
+
| [Theming](https://www.ag-grid.com/studio/angular/theming/) | Full customisation via the Theming API. Override colours, fonts, spacing, and borders across the Studio UI, grid widgets, and chart widgets independently. Light and dark modes are supported out of the box. |
|
|
55
|
+
| [State Management](https://www.ag-grid.com/studio/angular/state/) | The entire dashboard state (pages, widgets, layout, and filters) is captured in a single serialisable JSON object. Save and restore state to persist reports, and let users switch between saved reports. |
|
|
56
56
|
|
|
57
57
|
## Quick Start
|
|
58
58
|
|
|
@@ -133,11 +133,11 @@ export class DashboardComponent {
|
|
|
133
133
|
|
|
134
134
|
That's it — users can now build reports using the drag-and-drop editor.
|
|
135
135
|
|
|
136
|
-
> **Note:** For more information on building dashboards with AG Studio, refer to our [Quick Start](https://ag-grid.com/studio/angular/quick-start/) guide or step through the full [Tutorial](https://ag-grid.com/studio/angular/tutorial/).
|
|
136
|
+
> **Note:** For more information on building dashboards with AG Studio, refer to our [Quick Start](https://www.ag-grid.com/studio/angular/quick-start/) guide or step through the full [Tutorial](https://www.ag-grid.com/studio/angular/tutorial/).
|
|
137
137
|
|
|
138
138
|
## User Guides
|
|
139
139
|
|
|
140
|
-
Our [User Guides](https://ag-grid.com/studio/angular/user-interface/) contain comprehensive guides to help users understand how to use AG Studio.
|
|
140
|
+
Our [User Guides](https://www.ag-grid.com/studio/angular/user-interface/) contain comprehensive guides to help users understand how to use AG Studio.
|
|
141
141
|
|
|
142
142
|
## Support
|
|
143
143
|
|
|
@@ -147,9 +147,9 @@ AG Studio customers have access to dedicated support via [ZenDesk](https://ag-gr
|
|
|
147
147
|
|
|
148
148
|
`ag-studio` has a **Commercial** license. See the [LICENSE file](./LICENSE.html) for more info.
|
|
149
149
|
|
|
150
|
-
[Request a free 45-day enterprise trial](https://ag-grid.com/studio/license-pricing/?tab=trial) to explore the full enterprise capabilities of AG Studio with no restrictions or watermarks.
|
|
150
|
+
[Request a free 45-day enterprise trial](https://www.ag-grid.com/studio/license-pricing/?tab=trial) to explore the full enterprise capabilities of AG Studio with no restrictions or watermarks.
|
|
151
151
|
|
|
152
|
-
<div><h2><img vertical-align="middle" width="32" height="32" src="https://ag-grid.com/images/ag-logos/svg-logos/AG-BrandMark_Light-Theme.svg" alt="AG Grid Logo"> AG Grid</h2></div>
|
|
152
|
+
<div><h2><img vertical-align="middle" width="32" height="32" src="https://www.ag-grid.com/images/ag-logos/svg-logos/AG-BrandMark_Light-Theme.svg" alt="AG Grid Logo"> AG Grid</h2></div>
|
|
153
153
|
|
|
154
154
|
AG Studio is built on top of [AG Grid](https://www.ag-grid.com/) — 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](https://github.com/ag-grid/ag-grid).
|
|
155
155
|
|
|
@@ -159,7 +159,7 @@ AG Studio is built on top of [AG Grid](https://www.ag-grid.com/) — the best Ja
|
|
|
159
159
|
<img src="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/kitchen-sink-demo-light.gif?raw=true" alt="High Performance Demo">
|
|
160
160
|
</picture>
|
|
161
161
|
|
|
162
|
-
<div><h2><img vertical-align="middle" width="32" height="32" src="https://ag-grid.com/images/ag-logos/svg-logos/AG-BrandMark_Light-Theme.svg" alt="AG Charts Logo"> AG Charts</h2></div>
|
|
162
|
+
<div><h2><img vertical-align="middle" width="32" height="32" src="https://www.ag-grid.com/images/ag-logos/svg-logos/AG-BrandMark_Light-Theme.svg" alt="AG Charts Logo"> AG Charts</h2></div>
|
|
163
163
|
|
|
164
164
|
AG Studio is built on top of [AG Charts](https://www.ag-grid.com/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](https://github.com/ag-grid/ag-charts).
|
|
165
165
|
|