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 least daily, weekly, and monthly.
  • Axis labeling - allow users to specify custom values for the x-axis and y-axis

Implementation plan

  1. Add a new column_chart.vue component to components/visualizations/.
  2. 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.
  3. Inside column_chart.vue add the GlColumnChart component to render the data.
    • The options should be passed onto GlColumnChart 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 the GlColumnChart but keep this in mind.
  4. Make sure that on dashboards the visualization fills the entire panel (where sensible) and is responsive.
  5. 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.

Edited by Jiaan Louw