Quarterly Business Review (PowerPoint template)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
    One region's three months, drawn on a canvas with no library.

    It is rendered once per copy of the repeated slide, and each copy is bound with its own region —
    so this page reads that region as the whole of its data.
-->
<style>
  html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #fff; }
  body { font: 13px "Segoe UI", Tahoma, sans-serif; color: #1b2430; }
  #chart { display: block; width: 100%; height: 100%; }
</style>
</head>
<body>

<script id="report-data" type="application/json">{{json}}</script>
<canvas id="chart"></canvas>

<script>
(function () {
  'use strict';

  var region = JSON.parse(document.getElementById('report-data').textContent);
  var canvas = document.getElementById('chart');

  var scale = 3;
  var width = canvas.clientWidth;
  var height = canvas.clientHeight;

  canvas.width = width * scale;
  canvas.height = height * scale;

  var g = canvas.getContext('2d');
  g.scale(scale, scale);

  var months = region.months || [];
  var colour = '#' + (region.colour || '0D6E76');
  var top = 40, bottom = 44, left = 16, right = 16;
  var plotHeight = height - top - bottom;
  var plotWidth = width - left - right;
  var biggest = Math.max.apply(null, months.map(function (m) { return m.value; })) || 1;

  g.fillStyle = '#6b7482';
  g.font = '600 12px "Segoe UI", Tahoma, sans-serif';
  g.textAlign = 'left';
  g.fillText('REVENUE BY MONTH', left, 22);

  g.strokeStyle = '#e2e8f0';
  g.lineWidth = 1;
  g.beginPath();
  g.moveTo(left, top + plotHeight + 0.5);
  g.lineTo(left + plotWidth, top + plotHeight + 0.5);
  g.stroke();

  var slot = plotWidth / Math.max(months.length, 1);
  var barWidth = Math.min(slot * 0.44, 64);

  months.forEach(function (month, i) {
    var barHeight = Math.round((plotHeight - 18) * (month.value / biggest));
    var x = left + i * slot + (slot - barWidth) / 2;
    var y = top + plotHeight - barHeight;

    g.fillStyle = colour;
    g.globalAlpha = 0.35 + 0.65 * (i + 1) / months.length;
    g.fillRect(x, y, barWidth, barHeight);
    g.globalAlpha = 1;

    g.fillStyle = '#1b2430';
    g.font = '700 14px "Segoe UI", Tahoma, sans-serif';
    g.textAlign = 'center';
    g.fillText(Math.round(month.value) + 'k', x + barWidth / 2, y - 7);

    g.fillStyle = '#6b7482';
    g.font = '12px "Segoe UI", Tahoma, sans-serif';
    g.fillText(month.month, x + barWidth / 2, top + plotHeight + 20);
  });

  window.paragonEngine.ready();
})();
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Revenue by region, drawn with amCharts for the summary slide. -->
<style>
  html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #fff; }
  #chart { width: 100%; height: 100%; }
</style>
<script src="assets/js/vendor/amcharts5-5.14.4.js"></script>
</head>
<body>

<script id="report-data" type="application/json">{{json}}</script>
<div id="chart"></div>

<script>
(function () {
  'use strict';

  var model = JSON.parse(document.getElementById('report-data').textContent);
  var FONT = '"Segoe UI", Tahoma, sans-serif';

  var data = (model.regions || []).map(function (region) {
    return {
      region: region.name,
      value: parseFloat(String(region.revenue).replace(/[k,]/g, '')) || 0,
      colour: region.colour,
      label: region.revenue
    };
  });

  var root = am5.Root.new('chart');

  var rules = am5.Theme.new(root);
  rules.rule('Label').setAll({ fontFamily: FONT, fontSize: 13, fill: am5.color(0x1b2430) });
  rules.rule('AxisLabel').setAll({ fontSize: 12 });
  rules.rule('Grid').setAll({ stroke: am5.color(0xe2e8f0), strokeOpacity: 1 });
  rules.rule('AxisLine').setAll({ stroke: am5.color(0xe2e8f0), strokeOpacity: 1 });
  root.setThemes([rules]);
  root._logo && root._logo.dispose();

  if (root._renderer && typeof root._renderer.resolution === 'number') {
    root._renderer.resolution = 3;
    root.resize();
  }

  var chart = root.container.children.push(am5xy.XYChart.new(root, {
    paddingLeft: 4, paddingRight: 10, paddingTop: 16, paddingBottom: 0
  }));

  var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 20 });
  xRenderer.grid.template.setAll({ visible: false });

  var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
    categoryField: 'region', renderer: xRenderer
  }));

  var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
    min: 0, renderer: am5xy.AxisRendererY.new(root, {})
  }));

  var series = chart.series.push(am5xy.ColumnSeries.new(root, {
    xAxis: xAxis, yAxis: yAxis, valueYField: 'value', categoryXField: 'region'
  }));

  series.columns.template.setAll({
    width: am5.percent(46), strokeOpacity: 0, cornerRadiusTL: 3, cornerRadiusTR: 3
  });

  series.columns.template.adapters.add('fill', function (fill, target) {
    var item = target.dataItem && target.dataItem.dataContext;
    return item && item.colour ? am5.color(parseInt(item.colour, 16)) : fill;
  });

  series.bullets.push(function () {
    return am5.Bullet.new(root, {
      locationY: 1,
      sprite: am5.Label.new(root, {
        text: '{label}', fontSize: 13, fontWeight: '700',
        centerX: am5.p50, centerY: am5.p100, dy: -6, populateText: true
      })
    });
  });

  xAxis.data.setAll(data);
  series.data.setAll(data);

  series.appear(0, 0);
  chart.appear(0, 0);

  var release = window.paragonEngine.pending();
  root.events.once('frameended', function () { release(); });
  window.paragonEngine.ready();
})();
</script>

</body>
</html>

/*
  The project's house style: what every report in it looks like before it looks like itself.

  It is in shared-assets rather than in a report because it is the project's, not one report's —
  the palette, the type, the sheet, the running header, and the handful of parts (card, chip, pill,
  meter, table) that every report here is assembled from. A report's own stylesheet composes these
  into its layout; it does not redecide what a card is.

  A template references it as assets/css/house.css, exactly as it references its own files. The
  shared folder is searched behind the report's own, so the path means the same thing in every
  report — and a report that needs its own version keeps a file at that path and wins.
*/

:root
{
  /* Named for the job, not the hue, so a rebrand is this block and nothing else. */
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #6b7a90;
  --ink-invert: #ffffff;

  --page: #ffffff;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --rule: #e2e8f0;
  --rule-soft: #eef2f7;

  --brand: #0b1f3a;
  --brand-2: #12325c;
  --accent: #1d4ed8;
  --accent-soft: #eef3ff;
  --cyan: #0ea5e9;

  --good: #047857;
  --good-soft: #e7f6f0;
  --warn: #b45309;
  --warn-soft: #fdf3e3;
  --bad: #b91c1c;
  --bad-soft: #fdeceb;
  --idle: #64748b;
  --idle-soft: #f1f5f9;

  --radius: 7px;
  --radius-sm: 4px;
}

body
{
  margin: 0;
  color: var(--ink);
  background: var(--page);

  /*
    No Arabic face here, and no Arabic font in shared-assets at all. Naming one for every report in
    the project meant seven reports asked for a typeface none of them loads, so what they actually
    printed in was the second name in the list. The one Arabic report carries the family and the
    files itself.
  */
  font-family: "Segoe UI", Tahoma, sans-serif;
  font-size: 11px;
  line-height: 1.55;

  /* Every figure in this project is read down a column, so digits are the same width. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/*
  The sheet.

  The engine prints with no page margin, so the edges are the report's own to leave. Cloned decoration
  keeps the padding on every sheet a long page runs onto rather than only the first, and the top
  padding is what the fixed running header sits in — it reserves no room of its own.
*/
.sheet
{
  box-sizing: border-box;
  width: 794px;
  min-height: 1123px;
  padding: 96px 40px 44px;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- the running header, on every sheet ---------- */

/*
  The engine fixes #report-page-header to the top of the sheet; everything below is this project's
  band inside it. A band rather than a line of text: it is the first thing on every page and the
  only thing carrying the mark, and at 76px it is still under a fifteenth of the sheet.
*/
#report-page-header
{
  height: 76px;
  background: linear-gradient(105deg, var(--brand) 0%, var(--brand-2) 62%, #17416f 100%);
  color: var(--ink-invert);
}

.masthead
{
  display: flex;
  align-items: center;
  gap: 14px;
  height: 73px;
  padding: 0 40px;
  box-sizing: border-box;
}

/* The accent edge, under the band. Three pixels is enough to read as deliberate. */
#report-page-header::after
{
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(to left, var(--accent), var(--cyan) 55%, rgba(14, 165, 233, 0));
}

.masthead .logo
{
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

.masthead .titles
{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.masthead .org
{
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.005em;
}

.masthead .subject
{
  font-size: 10.5px;
  color: #a9c2e0;
}

.masthead .meta
{
  margin-inline-start: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: end;
  white-space: nowrap;
}

.masthead .period
{
  font-size: 11px;
  font-weight: 600;
}

/* A quiet outline rather than a filled badge: it is a caveat, not a headline. */
.masthead .classification
{
  padding: 1px 7px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  font-size: 9px;
  color: #cddcee;
}

/* ---------- the page's own heading, under the band ---------- */

.pagehead
{
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule);
}

.pagehead h1
{
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.pagehead .lede
{
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 10.5px;
}

.pagehead .stamp
{
  margin-inline-start: auto;
  color: var(--ink-faint);
  font-size: 10px;
  white-space: nowrap;
}

/* ---------- parts ---------- */

.card
{
  box-sizing: border-box;
  padding: 12px 14px 10px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.card-head
{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.card h2
{
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
}

.card .note
{
  margin-inline-start: auto;
  color: var(--ink-faint);
  font-size: 9.5px;
  white-space: nowrap;
}

/* A chart draws itself left to right whatever the page does, and its own labels sit inside it. */
.chart
{
  width: 100%;
  direction: ltr;
}

.chip
{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}

.chip--good { background: var(--good-soft); color: var(--good); }
.chip--bad  { background: var(--bad-soft);  color: var(--bad); }
.chip--warn { background: var(--warn-soft); color: var(--warn); }
.chip--idle { background: var(--idle-soft); color: var(--idle); }

/*
  A status, as a word with a dot rather than as a filled block: eight of them down a table column
  would otherwise be eight blocks of colour competing with the figures beside them.
*/
.pill
{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.pill::before
{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.pill--good { color: var(--good); }
.pill--warn { color: var(--warn); }
.pill--bad  { color: var(--bad); }
.pill--idle { color: var(--idle); }
.pill--done { color: var(--accent); }

/*
  A proportion, drawn rather than written. Vector, so it stays sharp where a canvas would not — the
  small measures are the ones a reader leans in on.
*/
.meter
{
  height: 5px;
  border-radius: 3px;
  background: var(--rule-soft);
  overflow: hidden;
}

.meter > span
{
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}

.meter--good > span { background: var(--good); }
.meter--warn > span { background: var(--warn); }
.meter--bad  > span { background: var(--bad); }

/* ---------- tables ---------- */

/*
  Fixed layout and a header group, which is the pair that keeps a long table on the sheet: without
  the first, columns size to their content and the far one runs off the paper; without the second,
  a table that paginates leaves the next sheet as unlabelled columns of numbers.
*/
table.grid
{
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 10.5px;
}

table.grid thead { display: table-header-group; }

table.grid tr { break-inside: avoid; }

/*
  Border-box, because a fixed layout takes the width it is given as the whole column: with padding
  added on top instead, six columns quietly cost another 96px and the one column left on auto pays
  for all of it.
*/
table.grid th,
table.grid td { box-sizing: border-box; }

table.grid th
{
  padding: 6px 8px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 9.5px;
  font-weight: 700;
  text-align: start;
  white-space: nowrap;
}

table.grid td
{
  padding: 6px 8px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
  overflow-wrap: break-word;
}

table.grid tbody tr:last-child td { border-bottom: 0; }

.num
{
  text-align: end;
  font-weight: 600;
}

/* ---------- the foot of the page ---------- */

.footnote
{
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: 9.5px;
}

/*
  The running footer, which the browser draws rather than the page.

  It is a document of its own at print time: this stylesheet is read and sent along with it, so type
  and layout arrive, but nothing it would have to fetch does — no webfont, no image, no background.
  So it is set in whatever face the renderer has, and kept to figures and a code, which read the same
  in any of them.
*/
.pagefoot
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
  color: #8a97a8;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 8.5px;
  letter-spacing: .04em;
}