Cube Query Rendering Visualization - Column Chart
Problem to solve
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.
Proposal
Allow users to define a column chart as part of their dashboards. Column charts are an important visualization mechanism for categorical data and non-continuous data series. Column charts are also preferable to pie charts, since they clearly illustrate difference in scale for categories compared to another.
Leverage the design approach that Pajamas provides for column charts to ensure we have a consistent look-and-feel as the rest of the product.
Update the Visualization Designer to also allow this as a choice
Visualization parameters definitions
Allow the user to define the following parameters for the column chart:
-
measures
- the value used to determine the height of the columns- Note: The number of unique data series to display can be limited to one for the initial iteration (i.e. stacked bar chart not needed for this iteration)
-
dimensions
- the categories used for the graph -
filter
- for filtering which data is included in the chart- Question: Can we use what cube.dev already provides here or is this complex?
-
grouping
- to determine what granularity values on the x-axis should be grouped. For time series, this should support at leastdaily
,weekly
, andmonthly
. - Axis labeling - allow users to specify custom values for the x-axis and y-axis
Implementation plan
- Add a new
column_chart.vue
component tocomponents/visualizations/
. - Add a new parser & function to
data_sources/cube_analytics.js
.- It should take in the cube query result.
- It should output the data in column chart format:
- The cube query measures should map to the column heights.
- The cube query dimensions should map to the graph length.
- Note: All data processing should be in the parser and none in the Vue component.
- Inside
column_chart.vue
add theGlColumnChart
component to render the data.- The
options
should be passed ontoGlColumnChart
so that users can specify chart options such as labels. - Note: the groupfoundations team is in the process of deprecating the individual chart component in favor of using
GlChart
for everything. For now keep using theGlColumnChart
but keep this in mind.
- The
- Make sure that on dashboards the visualization fills the entire panel (where sensible) and is responsive.
- Add specs for the
column_chart.vue
component and data parser.
Additional notes:
- For an example on how to do this look at any of the existing visualizations in
components/visualizations/
.
Intended users
Feature Usage Metrics
This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.