Ibex dashboard template to make App Insights dashboard for Mixed Reality / HoloLens. (Usage: Import this template into Ibex Dashboard and config using your App Insights key)

ibex-dashboard-mixed-reality-template-sample.ts

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

export const config: IDashboardConfig = /*return*/ {
	id: "mr_sample",
	name: "Mixed Reality dashboard",
	icon: "dashboard",
	url: "mr_sample",
	description: "Mixed Reality dashboard sample",
	preview: "/images/sample.png",
	category: "Custom Templates",
	html: `<div>
      Sample dashboard to display Mixed Reality Application Insights.
    </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 `
              summarize total=count() by name 
              | order by total
              `
            },
						format: { type: "bars",args: { barsField: "name",seriesField: "name",valueField: "total" } }
					}
				}
			}
		},
		{
			id: "customMetrics",
			type: "ApplicationInsights/Query",
			dependencies: { timespan: "timespan",queryTimespan: "timespan:queryTimespan",granularity: "timespan:granularity" },
			params: {
				table: "customMetrics",
				queries: {
					gazeTotal: {
						query: () => {
              return `summarize total=round(sum(value),1)`
            },
						format: {
							type: "scorecard",
							args: {
								countField: "total",
								thresholds: [{ value: 0,color: "#0066ff",icon: "visibility",heading: "Gaze" }]
							}
						}
					},
					gazeTotals: {
						query: () => {
              return `summarize total=round(sum(value),1) by name`
            },
						format: { type: "pie",args: { barsField: "name",seriesField: "name",value: "total" } }
					},
					gazeTime: {
						query: ({ granularity }) => {
              return `
              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: "gazingTotals",
			type: "PieData",
			title: "Gaze duration",
			subtitle: "How many seconds an object is gazed at",
			size: { w: 5,h: 7 },
			source: "customMetrics:gazeTotals",
			props: { showLegend: true,entityType: "Seconds",compact: false }
		},
		{
			id: "gaze",
			type: "Timeline",
			title: "Gaze durations",
			subtitle: "The gazed duration over time",
			size: { w: 7,h: 7 },
			source: "customMetrics:gazeTime",
			props: { showLegend: false }
		},
		{
			id: "spatial",
			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 spatial interactions",
			size: { w: 2,h: 2 },
			source: { 1: "customEvents:total" }
		},
		{
			id: "totalMetrics",
			type: "Scorecard",
			title: "Gaze",
			subtitle: "Total seconds gazed",
			size: { w: 2,h: 2 },
			source: { 1: "customMetrics:gazeTotal" }
		}
	],
	dialogs: []
}