Stand Alone Live Charts Example

The purpose of this sample is to demonstrate the ability to use the rhqm-chart tag outside of a full blown angular application. It's an Angular tag so it will still require Angular but eliminating many of the dependencies of the application and getting it down to Angular and a couple libs and css dependencies is the goal. Placing the tag in a normal html web page and have it retrieve and update data is the objective. We are not there yet but here is the first pass.

1. cd rhqm-charts (here)
2. Optionally, edit stand-alone-chart-sample.html, if desired (add new metrics, change time range or refresh interval)
3. Launch http web server of your choice (example: 'python -m SimpleHTTPServer 8000 .')
4. View page at: http://localhost:8000/stand-alone-chart-sample.html

Explanation: Examining the source code, there is an app and a controller required to render the angular directive. The StandAloneController is just a dummy controller required to render directives(tags). It doesn't really do anything just required for Angular directives. After that, the only thing that is needed for use is some rhqm-chart tags with relevant metric-id and metric-url attributes. So this will all be boiled down to several additional lines of code (< 5) to support angular tags in pages; with one angular tag for each chart.

TODO:

1. Currently, there are still too many dependencies to make it totally standalone. Next task is to thin this down and document use. Slimming down can be as simple as creating an optimized build that bundles all the *.js files into a single js file. This would be the crude way of doing and it needs to be done correctly by eliminating the unnecessary dependencies and creating a separate bower package with just the desired artifacts.
2. Create a standalone bower package for the rhqm-charts component and publish to bower directory.