Basics
The W20 Material addon provides the Angular Material framework. Installation bower install w20-material Configuration To include the addon, declare it in the application manifest: "bower_components/w20-material/w20-material.w20.json": {}
Basics
W20 Components The W20 Components addon provides various UI components. Installation bower install w20-components Configuration To include the addon, declare it in the application manifest: "bower_components/w20-components/w20-components.w20.json": {}
Basics
The W20 Dataviz addon provides supports for charts and graphical representation. It proposes an integration of the NVD3 charting library (which itself uses D3) along with an integration of the Dygraphs chart library for large data sets. Live demo Dataviz addon Installation bower install w20-dataviz Configuration To include the addon, declare it in the application manifest: "bower_components/w20-dataviz/w20-dataviz.w20.json": {} If using the w20 bridge you can simply refer to the fragment by its id without specifying the path:
Basics
The W20 Extras addon provides various functionality such as website analytics. Installation bower install w20-extras Configuration To include the addon, declare it in the application manifest: "bower_components/w20-extras/w20-extra.w20.json": {} Analytics Analytical tools allow statistical reporting and data analysis for your web applications: Counting and tracking visitor’s actions Statistics on page viewed Keyword searched E-commerce specific report Setting cookies for tracking visit Displaying comprehensive and detailed reports Analytics providers generally requires a script inclusion in all web pages to track user actions based on the URL.
Dygraphs
Dygraphs
Dygraphs is a fast charting library that allows users to explore large data sets. It plots data series as lines. The W20 integration provides an AngularJS directive augmented with an option to load down-sampled data while zooming. Live demo Dygraphs Installation See the installation of the Dataviz addon in the basics section Configuration Declare the dygraphs module in the modules section of the dataviz fragment "w20-dataviz": { "modules": { "dygraphs": {} } } Directive Below you can find an example of a dygrah declaration with all its attributes:
Forms
Forms
Forms are one of the most common element in a web application. The web framework provides support for forms building through programmatic configuration. Internally it relies on Angular Formly, an advanced library for managing forms with AngularJS. This approach reduces the amount of HTML in favor of JavaScript to provide flexibility, reusability, maintainability and simplicity. Forms Overview To display a form, we declare a form element with a unique child.
Nvd3
Nvd3
Nvd3 Nvd3 is a data visualization library build on top of the popular d3 library. It offers several chart types for common visualization needs. The web framework add an AngularJS integration in the form of directives, along with sensible defaults for these different charts. Live demo Multibar The multibar chart is used to compare different series in a bar representation following the X axis. Configuration "multibar":{}, The w20MultibarChart directive allows you to declare the chart on your html markup and specify the configuration object to be used in your controller.
