zoomdata-chart-cli-demo.js

/* global controller, Chart */

const canvas = document.createElement('canvas');

controller.element.appendChild(canvas);

const chart = new Chart(canvas, {
    type: 'radar',
    data: getChartData([]),
    options: {
        layout: {
            padding: {
                bottom: 30
            }
        }
    }
});

controller.createAxisLabel({
    picks: 'Group By',
    orientation: 'horizontal',
    position: 'bottom',
    popoverTitle: 'Group'
});

controller.createAxisLabel({
    picks: 'Metric',
    orientation: 'horizontal',
    position: 'bottom'
});

controller.update = function(data, progress) {
    chart.data = getChartData(data);
    chart.update();
};

function getChartData(data) {
    const groupAccessor = controller.dataAccessors['Group By'];
    const metricAccessor = controller.dataAccessors['Metric'];

    return {
        labels: data.map(item => groupAccessor.raw(item)),
        datasets: [{
            data: data.map(item => metricAccessor.raw(item)),
            label: groupAccessor.getLabel(),
            backgroundColor: 'rgba(110, 174, 79, 0.7)',
            borderColor: 'rgb(110, 174, 79)'
        }]
    };
}