Building Custom Dashboards
Before building your own custom dashboards please make sure you fulfill the requirements in the Customize Your App with Nuxeo Elements page.
The quickest way to start building a dashboard is to use the Polymer Generator to scaffold our custom elements.
Generate a
nuxeo-sample
dashboard element:mkdir -p nuxeo-sample-dashboard && cd $_ yo polymer:seed nuxeo-sample-dashboard
Note: It is a good practice to build dashboards as custom elements since you can then use them anywhere you see fit. But you can also build dashboards as full applications in which case the Yeoman polymer application generator should be used instead.
Once the
nuxeo-sample
element is generated you can install further client side dependencies. In this case you need the Nuxeo Data Visualization Elements and a charting library to produce charts for your dashboard:bower install --save nuxeo/nuxeo-dataviz-elements bower install --save GoogleWebComponents/google-chart
Yeoman scaffolded a sample custom element so you now need to replace this sample content with your own. In this example build a simple chart with the total number of Serial Review workflows started by each user:
nuxeo-dataviz-sample.html<dom-module id="nuxeo-dataviz-sample"> <template> <!-- Retrieve our data and store it in 'initiators' --> <nuxeo-workflow-data workflow="SerialDocumentReview" event="afterWorkflowStarted" grouped-by="workflowInitiator" start-date="[[startDate]]" end-date="[[endDate]]" data="{{initiators}}"> </nuxeo-workflow-data> <!-- Display a Pie Chart with out data --> <google-chart type="pie" cols='[{"label": "User", "type": "string"},{"label": "Value", "type": "number"}]' rows="[[_rows(initiators)]]"> </google-chart> </template> </dom-module> <script> Polymer({ is: 'nuxeo-dataviz-sample', // Expose startDate and endDate as properties properties: { startDate: String, endDate: String }, // Transform our data for usage with Google Charts _rows: function(data) { return data.map(function(e) { return [e.key, e.value]; }); } }); </script>
Each Polymer element usually includes a usage demo which you can edit to see and showcase your custom element in action:
demo/index.html<html> <head> ... <link rel="import" href="../../nuxeo-elements/nuxeo-connection.html"> <link rel="import" href="../nuxeo-dataviz-sample.html"> </head> <body unresolved> <!-- Define a connection to our Nuxeo server --> <nuxeo-connection url="http://localhost:8080/nuxeo" username="Administrator" password="Administrator"></nuxeo-connection> <!-- Include our element and specify a start and end date --> <nuxeo-dataviz-sample start-date="2015-09-01" end-date="2015-10-30"></nuxeo-dataviz-sample> </body> </html>
To checkout your element we recommend using Polyserve, a simple web server for using bower components locally, which you can install with:
npm install -g polyserve polyserve -p 3000
Once Polyserve is up and running we can finally see our custom element's demo at: http://localhost:3000/components/nuxeo-dataviz-sample/demo/