abergie/config.ini

## config.ini
cache=2 days
formats=png,jpg,pdf,html
screenWidth=580
[params]
start=true
end=true
path=true
token=true

## index.html
<?DOCTYPE html>
<html>
<head>
<title>SnapEngage Stats</title>

<link rel="stylesheet" type="text/css" href="https://api.reportgrid.com/css/rg-charts.css" />
<link rel="stylesheet" type="text/css" href="https://snapabug.appspot.com/css/rg-style.css" />
<link rel="stylesheet" type="text/css" href="https://snapabug.appspot.com/css/rg-snapengage.css" />

<style type="text/css">
html,body {
  width: 580px;
}
h1 {
  height: 20px;
  margin-top: 20px;
  margin-bottom: 5px;
  font: 14pt Arial, Helvetica, sans-serif;
}
</style>

<script src="https://api.reportgrid.com/js/reportgrid-core.js?tokenId=$token" type="text/javascript"></script>
<script src="https://api.reportgrid.com/js/reportgrid-charts.js" type="text/javascript"></script>
<script src="https://api.reportgrid.com/js/reportgrid-query.js" type="text/javascript"></script>
<script type="text/javascript">
function render()
{
  var start = ReportGrid.date.parse("$start");
  var end   = ReportGrid.date.parse("$end");
  var path  = "$path";
  var sourceTypes = {
      "1": "Offline Request",
      "2": "Live Chat"
  };
  var tzOffset = "0";

  ReportGrid.leaderBoard("#caseslegend", {
      axes: ["sourceType", "count"],
      load: ReportGrid.query.histogram({
          path: path,
          event: "case",
          start: start,
          end: end,
          //timezone: tzOffset,
          property: "sourceType"
      }),
      options: {
          label: {
              datapoint: function (dp, stats) {
                  return sourceTypes[dp["sourceType"]]
                          + " (" + ReportGrid.format(Math.round(1000 * dp.count / stats.tot) / 10, "P:1") + ") ";
              }
          },
          colorscale: true
      }
  });

  ReportGrid.barChart("#casestime", {
      axes: [{
          type: "time:day",
          scalemode: "fit"
      }, "count"],
      load: ReportGrid.query
        .data([{ value: 2  }, { value: 1 }])
        .series({
          path: path,
          event: "case",
          start: start,
          end: end,
          //timezone: tzOffset,
          property: "sourceType",
          periodicity: "day"
      }).console(),
      options: {
          barpadding: 3,
          segmenton: "sourceType"
      }
  });

  ReportGrid.leaderBoard("#agentlegend", {
      axes: ["agentName", "count"],
      load: ReportGrid.query.histogram({
          path: path,
          event: "case",
          start: start,
          end: end,
          //timezone: tzOffset,
          property: "agentName",
          where: {
              sourceType: 2
          },
          top: 10
        })
        .sortValue("count", false)
        .filter(function(dp) {
          return dp["agentName"] != "all_agents_busy" && dp["agentName"] != "";
        }),
      options: {
          colorscale: true,
          label: {
              datapoint: function (dp, stats) {
                  return dp["agentName"]
                          + " (" + ReportGrid.format(Math.round(1000 * dp.count / stats.tot) / 10, "P:1") + ") ";
              }
          }
      }
  });

  ReportGrid.leaderBoard("#chatlegend", {
      axes: ["fullUrl", "count"],
      load: ReportGrid.query
        .data({
          path: path,
          event: "case",
          start: start,
          end: end,
          //timezone: tzOffset
        })
        .histogram({
          property: "fullUrl",
          top: 10
        })
        .sortValue("count", false),
      options: {
          label: {
              datapoint: function (dp, stats) {
                  var url = dp["fullUrl"];
                  if (url.length > 50) {
                      url = url.substring(0, 60) + '...';
                  }
                  return url
                          + " (" + ReportGrid.format(Math.round(1000 * dp.count / stats.tot) / 10, "P:1") + ") ";
              }
          }
      }
  });

}
</script>
</head>
<body onload="render()">
  <h1>Visitor requests</h1>
  <div class="fullline">
    <div id="casestime"></div>
  </div>
  <div class="square">
    <div id="caseslegend"></div>
  </div>

  <h1>Activity by agent</h1>
  <div class="square">
    <div id="agentlegend"></div>
  </div>

  <h1>Top pages</h1>
  <div class="square">
    <div id="chatlegend" class="url-leaderboard"></div>
  </div>
</body>
</html>
	cache=2 days
	formats=png,jpg,pdf,html
	screenWidth=580
	[params]
	start=true
	end=true
	path=true
	token=true
	<?DOCTYPE html>
	<html>
	<head>
	<title>SnapEngage Stats</title>

	<link rel="stylesheet" type="text/css" href="https://api.reportgrid.com/css/rg-charts.css" />
	<link rel="stylesheet" type="text/css" href="https://snapabug.appspot.com/css/rg-style.css" />
	<link rel="stylesheet" type="text/css" href="https://snapabug.appspot.com/css/rg-snapengage.css" />

	<style type="text/css">
	html,body {
	width: 580px;
	}
	h1 {
	height: 20px;
	margin-top: 20px;
	margin-bottom: 5px;
	font: 14pt Arial, Helvetica, sans-serif;
	}
	</style>

	<script src="https://api.reportgrid.com/js/reportgrid-core.js?tokenId=$token" type="text/javascript"></script>
	<script src="https://api.reportgrid.com/js/reportgrid-charts.js" type="text/javascript"></script>
	<script src="https://api.reportgrid.com/js/reportgrid-query.js" type="text/javascript"></script>
	<script type="text/javascript">
	function render()
	{
	var start = ReportGrid.date.parse("$start");
	var end = ReportGrid.date.parse("$end");
	var path = "$path";
	var sourceTypes = {
	"1": "Offline Request",
	"2": "Live Chat"
	};
	var tzOffset = "0";

	ReportGrid.leaderBoard("#caseslegend", {
	axes: ["sourceType", "count"],
	load: ReportGrid.query.histogram({
	path: path,
	event: "case",
	start: start,
	end: end,
	//timezone: tzOffset,
	property: "sourceType"
	}),
	options: {
	label: {
	datapoint: function (dp, stats) {
	return sourceTypes[dp["sourceType"]]
	+ " (" + ReportGrid.format(Math.round(1000 * dp.count / stats.tot) / 10, "P:1") + ") ";
	}
	},
	colorscale: true
	}
	});

	ReportGrid.barChart("#casestime", {
	axes: [{
	type: "time:day",
	scalemode: "fit"
	}, "count"],
	load: ReportGrid.query
	.data([{ value: 2 }, { value: 1 }])
	.series({
	path: path,
	event: "case",
	start: start,
	end: end,
	//timezone: tzOffset,
	property: "sourceType",
	periodicity: "day"
	}).console(),
	options: {
	barpadding: 3,
	segmenton: "sourceType"
	}
	});

	ReportGrid.leaderBoard("#agentlegend", {
	axes: ["agentName", "count"],
	load: ReportGrid.query.histogram({
	path: path,
	event: "case",
	start: start,
	end: end,
	//timezone: tzOffset,
	property: "agentName",
	where: {
	sourceType: 2
	},
	top: 10
	})
	.sortValue("count", false)
	.filter(function(dp) {
	return dp["agentName"] != "all_agents_busy" && dp["agentName"] != "";
	}),
	options: {
	colorscale: true,
	label: {
	datapoint: function (dp, stats) {
	return dp["agentName"]
	+ " (" + ReportGrid.format(Math.round(1000 * dp.count / stats.tot) / 10, "P:1") + ") ";
	}
	}
	}
	});

	ReportGrid.leaderBoard("#chatlegend", {
	axes: ["fullUrl", "count"],
	load: ReportGrid.query
	.data({
	path: path,
	event: "case",
	start: start,
	end: end,
	//timezone: tzOffset
	})
	.histogram({
	property: "fullUrl",
	top: 10
	})
	.sortValue("count", false),
	options: {
	label: {
	datapoint: function (dp, stats) {
	var url = dp["fullUrl"];
	if (url.length > 50) {
	url = url.substring(0, 60) + '...';
	}
	return url
	+ " (" + ReportGrid.format(Math.round(1000 * dp.count / stats.tot) / 10, "P:1") + ") ";
	}
	}
	}
	});

	}
	</script>
	</head>
	<body onload="render()">
	<h1>Visitor requests</h1>
	<div class="fullline">
	<div id="casestime"></div>
	</div>
	<div class="square">
	<div id="caseslegend"></div>
	</div>

	<h1>Activity by agent</h1>
	<div class="square">
	<div id="agentlegend"></div>
	</div>

	<h1>Top pages</h1>
	<div class="square">
	<div id="chatlegend" class="url-leaderboard"></div>
	</div>
	</body>
	</html>