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

1. Visit the projects shared dashboards listing e.g. http://gdk.test:3000/gitlab-org/gitlab-test/-/analytics/dashboards
2. Click The Visualization Designer button in the top right
3. Select some values in the left panel, e.g. Page View, All Pages, Group By Day
4. Select Column Chart in the right panel and check the rendered chart

Dashboard

1. Copy the generated code from the Visualization Designer steps ^^
2. Create a dashboard as per the docs instructions
3. 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)