Serializers for Insights Data
Data located by a query will need to be represented in a format that can be consumed directly (or with little modification) by chart.js
We should write a serializer that all of the actions can use to ensure the data is uniform and as expected.
It will need to cope with the different formats required for the different charts:
Bar charts
Example:
{
"labels":[
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets":[
{
"label":"Dataset 1",
"backgroundColor":"red",
"borderColor":"red",
"borderWidth":1,
"data":[
1,
2,
3,
4,
5
]
},
{
"label":"Dataset 2",
"backgroundColor":"blue",
"borderColor":"blue",
"borderWidth":1,
"data":[
1,
2,
3,
4,
5
]
}
]
}
Stacked Bar
{
"labels":[
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets":[
{
"label":"Dataset 1",
"backgroundColor":"red",
"data":[
1,
1,
1,
1,
1,
1,
1
]
},
{
"label":"Dataset 2",
"backgroundColor":"blue",
"data":[
1,
1,
1,
1,
1,
1,
1
]
},
{
"label":"Dataset 3",
"backgroundColor":"green",
"data":[
1,
1,
1,
1,
1,
1,
1
]
}
]
}
Line charts
{
"labels":[
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets":[
{
"label":"My First dataset",
"backgroundColor":"red",
"borderColor":"red",
"data":[
1,
1,
1,
1,
1,
1,
1
],
"fill":false
},
{
"label":"My Second dataset",
"fill":false,
"backgroundColor":"blue",
"borderColor":"blue",
"data":[
1,
1,
1,
1,
1,
1,
1
]
}
]
}
Pie
{
"datasets":[
{
"data":[
1,
1,
1,
1,
1
],
"backgroundColor":[
"red",
"orange",
"yellow",
"green",
"blue"
],
"label":"Dataset 1"
}
],
"labels":[
"Red",
"Orange",
"Yellow",
"Green",
"Blue"
]
}
Combo Bar Line Chart
{
"labels":[
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets":[
{
"type":"line",
"label":"Dataset 1",
"borderColor":"blue",
"borderWidth":2,
"fill":false,
"data":[
1,
1,
1,
1,
1,
1,
1
]
},
{
"type":"bar",
"label":"Dataset 2",
"backgroundColor":"red",
"data":[
1,
1,
1,
1,
1,
1,
1
],
"borderColor":"white",
"borderWidth":2
},
{
"type":"bar",
"label":"Dataset 3",
"backgroundColor":"green",
"data":[
1,
1,
1,
1,
1,
1,
1
]
}
]
}