mikemenaker / charts-dashboard

Vue Data Driven Charts Dashboard

charts-dashboard

Data driven charts dashboard

Relies on https://github.com/mikemenaker/mock-data-service for mock data

The webapp processes input JSON (from a URL) and builds a dashboard around it. Example JSON (mock data service JSON can be found here: https://github.com/mikemenaker/mock-data-service/blob/master/data.json):

{    
    "tabs": [
        {
            "name": "Data Tab 1",
            "data": [
                {
                    "title": "Pie 1",
                    "type": "pie",
                    "dataSource": "http://localhost:3030/data/stats/5",
                    "updateInterval": 30,
                    "labels": [
                        "Pie Label 1",
                        "Pie Label 2",
                        "Pie Label 3",
                        "Pie Label 4",
                        "Pie Label 5"
                    ]
                },
                {
                    "title": "Doughnut 1",
                    "type": "doughnut",
                    "dataSource": "http://localhost:3030/data/stats/3",
                    "updateInterval": 30,
                    "labels": [
                        "Doughnut Label 1",
                        "Doughnut Label 2",
                        "Doughnut Label 3"
                    ]
                }
        },
        {
            "name": "Data Tab 2",
            "description": "I'm a description",
            "data": [
                {
                    "title": "Doughnut 2",
                    "description": "I'm a description",
                    "type": "doughnut",
                    "dataSource": "http://localhost:3030/data/stats/4",
                    "updateInterval": 30,
                    "labels": [
                        "Doughnut Label 1",
                        "Doughnut Label 2",
                        "Doughnut Label 3",
                        "Doughnut Label 4"
                    ]
                }
        }
    ]
}

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.