Ibex dashboard template for Unity UI events

ibex-dashboard-unity-ui-application-insights

/// <reference path="../../../client/@types/types.d.ts"/>
import * as _ from 'lodash';

export const config: IDashboardConfig = /*return*/ {
  id: "unity_ui",
  name: "Unity dashboard",
  icon: "dashboard",
  url: "unity_ui",
  description: "Unity UI Analytics dashboard sample",
  preview: "/images/sample.png",
  category: "Unity Templates",
  html: `<div>
      Sample dashboard to display Application Insights for Unity UI events.
    </div>`,
  config: {
    connections: {},
    layout: {
      isDraggable: true,
      isResizable: true,
      rowHeight: 30,
      verticalCompact: false,
      cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
      breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
    }
  },
  dataSources: [
    {
      id: "timespan",
      type: "Constant",
      params: { values: ["24 hours", "1 week", "1 month"], selectedValue: "1 week" },
      format: "timespan"
    },
    {
      id: "customEvents",
      type: "ApplicationInsights/Query",
      dependencies: { timespan: "timespan", queryTimespan: "timespan:queryTimespan", granularity: "timespan:granularity" },
      params: {
        table: "customEvents",
        queries: {
          total: {
            query: () => {
              return `summarize total=count()`
            },
            format: {
              type: "scorecard",
              args: {
                countField: "total",
                thresholds: [{ value: 0, color: "#ff0000", icon: "pan_tool", heading: "Interactions" }]
              }
            }
          },
          totals: {
            query: () => {
              return `
              project name=tostring(customDimensions.target)
              | summarize total=count() by name 
              | order by total
              `
            },
            format: { type: "bars", args: { barsField: "name", seriesField: "name", valueField: "total" } }
          },
          tapTotals: {
            query: () => {
              return `
              where name=="Tap" or name=="Tap-Near" 
              | project name=tostring(customDimensions.target), event=name, value=toint(customMeasurements.Taps), timestamp 
              | summarize total=count() by name 
              | order by total
              `
            },
            format: { type: "pie", args: { barsField: "name", seriesField: "name", value: "total" } }
          },
          tapTimeline: {
            query: ({ granularity }) => {
              return `
              where name=="Tap" or name=="Tap-Near" 
              | project name=tostring(customDimensions.target), event=name, value=toint(customMeasurements.Taps), timestamp 
              | summarize total=round(sum(value),1) by bin(timestamp, ${granularity}), name 
              | order by timestamp asc
              `
            },
            format: { type: "timeline", args: { lineField: "name", valueField: "total", timeField: "timestamp" } }
          }
        }
      }
    }
  ],
  filters: [
    {
      type: "TextFilter",
      title: "Timespan",
      source: "timespan",
      actions: { onChange: "timespan:updateSelectedValue" },
      first: true
    }
  ],
  elements: [
    {
      id: "tapTotals",
      type: "PieData",
      title: "Tap interactions",
      subtitle: "How many times a button is tapped",
      size: { w: 5, h: 7 },
      source: "customEvents:tapTotals",
      props: { showLegend: true, entityType: "Taps", compact: false }
    },
    {
      id: "tapTimeline",
      type: "Timeline",
      title: "Tap timeline",
      subtitle: "The total number of taps over time",
      size: { w: 7, h: 7 },
      source: "customEvents:tapTimeline",
      props: { showLegend: false }
    },
    {
      id: "interactions",
      type: "BarData",
      title: "Total interactions",
      subtitle: "The objects with most interactions",
      size: { w: 5, h: 6 },
      source: "customEvents:totals",
      props: { showLegend: false }
    },
    {
      id: "totalEvents",
      type: "Scorecard",
      title: "Spatial",
      subtitle: "Total number of interactions",
      size: { w: 2, h: 2 },
      source: { 1: "customEvents:total" }
    }
  ],
  dialogs: []
}