Cube Query Rendering Visualization - Column Chart
What does this MR do and why?
Users have visualization needs that go beyond the existing set of chart visualizations that we provide. For categorical and non-continuous sets of data, they need to be able to clearly visualize their data to communicate with audiences.
This MR adds a Column Chart visualization to be used within the Visulization Designer and within dashboards. It wraps the existing GlColumnChart
component and integrates with the Cubejs query.
Screenshots or screen recordings
More examples
Single dimension:
code
{
"version": 1,
"title": "",
"type": "ColumnChart",
"data": {
"type": "cube_analytics",
"query": {
"measures": [
"TrackedEvents.pageViewsCount"
],
"timeDimensions": [
{
"dimension": "TrackedEvents.utcTime",
"granularity": "month"
}
],
"limit": 100,
"timezone": "UTC",
"filters": [],
"dimensions": []
}
},
"options": {
"xAxis": {
"name": "Dimension",
"type": "category"
},
"yAxis": {
"name": "Counts"
}
}
}
Multiple dimensions
code
{
"version": 1,
"title": "",
"type": "ColumnChart",
"data": {
"type": "cube_analytics",
"query": {
"measures": [
"TrackedEvents.pageViewsCount"
],
"dimensions": [
"TrackedEvents.docPath"
],
"timeDimensions": [
{
"dimension": "TrackedEvents.utcTime",
"granularity": "month"
}
],
"limit": 100,
"timezone": "UTC",
"filters": []
}
},
"options": {
"xAxis": {
"name": "Dimension",
"type": "category"
},
"yAxis": {
"name": "Counts"
}
}
}
Responsive
Inside Visualization Designer
How to set up and validate locally
To test the product analytics dashboard items are shown, you will need to follow the instructions at https://gitlab.com/gitlab-org/gitlab/-/snippets/2474959 to enable Product Analytics on your GDK.
Visualization Designer
- Visit the projects shared dashboards listing e.g.
http://gdk.test:3000/gitlab-org/gitlab-test/-/analytics/dashboards
- Click The
Visualization Designer
button in the top right - Select some values in the left panel, e.g. Page View, All Pages, Group By Day
- Select Column Chart in the right panel and check the rendered chart
Dashboard
- Copy the generated code from the Visualization Designer steps ^^
- Create a dashboard as per the docs instructions
- Use the code from the visualization designer in the new dashboard, and ensure it renders as expected
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #383256 (closed)