Cube Query Rendering Widget - Line Chart

A widget for rendering a pre-defined Cube Query against a analytics cube endpoint defined for a project.

Object Format

Structure in Dashboard File

{
  "gridAttributes": {
    "size": {
      "width": 9,
      "height": 11,
      "minWidth": 4,
      "minHeight": 6,
    },
    "position": {
      "xPos": 0,
      "yPos": 1,
    }
  },
  "widgetType": "monthly_users",
  "customizations": {},
  "title": "LCP",
}

Structure in Widget File

Seperately is the actual widget defined, see more details in issue XYZ.

{
  "component": "CubeLineChart",
  "data": {
    "query": {
      "users": {
        "measures": ["Jitsu.count"],
        "dimensions": ["Jitsu.eventType"],
      },
    },
  },
  "chartOptions": {
    "xAxis": { "name": "Time", "type": "time" },
    "yAxis": { "name": "Counts" },
  },
}

What the Vue component would receive

{
  "gridAttributes": {
    "size": {
      "width": 9,
      "height": 11,
      "minWidth": 4,
      "minHeight": 6,
    },
    "position": {
      "xPos": 0,
      "yPos": 1,
    }
  },
  "widgetType": "monthly_users",
  "component": "CubeLineChart",
  "data": {
    "query": {
      "users": {
        "measures": ["Jitsu.count"],
        "dimensions": ["Jitsu.eventType"],
      },
    },
  },
  "chartOptions": {
    "xAxis": { "name": "Time", "type": "time" },
    "yAxis": { "name": "Counts" },
  },
  "customizations": {},
  "title": "LCP",
}

Supported rendering formats

Using the gitlab-ui Charts we would have a sub component switching between different Rendering types:

My suggestion would be to start with:

• Line Chart