vuejs-json-dashboardify

Create a client-side VueJS component which reads JSON from a GET endpoint and renders into the GovUK Frontend template dynamically including containers, grid rows headers, content and tables. This is to be used to render dynamic content from a static S3-backed server.

Setup

You can run locally in docker as follows:

docker-compose build
docker-compose run --service-ports demo bash -c "npm run server"
# The demo page should be available on http://localhost:8000

Alternatively you can run locally without docker
npm install and then gulp to load the govuk-frontend and build the css.

Then you can run the code with an npm http server http-server . -a 127.0.0.1 -p 8000

End-to-end tests

I've made a start on some end-to-end tests using nightwatch.

You can run the tests as follows:

docker-compose run demo bash -c "npm run server & npm run e2e"

Invoke the component

Once you've got all the scripts loading correctly you can use the component by just including something like this in your page.

You can see the HTML elements supported in the example file example.json. The only restriction is that the top level component in the JSON has to be a div of some sort.

<json-dashboardify-url-element
    group="unique-within-page"
    source="/example.json">
</json-dashboardify-url-element>

TODO

This is all a bit clumsy at the moment.

I think the next steps are to turn the pe-charts table-chart into a proper VueJS component so it can be included inline.