google-analytics edits (#759)

* checkpoint google-analytics edits

* paired down version

* remove unused horizon chart component

* fix height, note

* more polish

* more polish

* more polish

* fix options

---------

Co-authored-by: Paul Buffa <[email protected]>

Author: mbostock

examples/google-analytics/docs/components/lineChart.js

@@ -0,0 +1,15 @@
+import * as Plot from "npm:@observablehq/plot";
+
+export function lineChart(data, {width, height = 94, x = "date", y, percent} = {}) {
+  return Plot.plot({
+    width,
+    height,
+    axis: null,
+    margin: 0,
+    insetTop: 10,
+    insetLeft: -17,
+    insetRight: -17,
+    y: {zero: true, percent, domain: percent ? [0, 100] : undefined},
+    marks: [Plot.areaY(data, {x, y, fillOpacity: 0.2}), Plot.lineY(data, {x, y, tip: true})]
+  });
+}

examples/google-analytics/docs/components/marimekko.js renamed to examples/google-analytics/docs/components/marimekkoChart.js

@@ -1,7 +1,41 @@
 import * as Plot from "npm:@observablehq/plot";
 import * as d3 from "npm:d3";
 
-export function Marimekko({x, y, z, value = z, anchor = "middle", inset = 0.5, ...options} = {}) {
+export function marimekkoChart(data, {x, y, value, color, ...options} = {}) {
+  const xy = (options) => Marimekko({...options, x, y, value});
+  return Plot.plot({
+    ...options,
+    label: null,
+    x: {percent: true, tickFormat: (d) => d + (d === 100 ? "%" : "")},
+    y: {percent: true, tickFormat: (d) => d + (d === 100 ? "%" : "")},
+    color,
+    marks: [
+      Plot.rect(data, xy({fill: y})),
+      Plot.text(data, xy({text: y, dy: -16, fill: "black"})),
+      Plot.text(data, xy({text: (d) => d[value].toLocaleString("en-US"), fontSize: 14, fontWeight: 600, fill: "black"})),
+      Plot.text(
+        data,
+        Plot.selectMaxY(
+          xy({
+            z: x,
+            text: (d) => capitalize(d[x]),
+            anchor: "top",
+            lineAnchor: "bottom",
+            fontSize: 12,
+            dy: -6
+          })
+        )
+      )
+    ]
+  });
+}
+
+function capitalize([t, ...text]) {
+  return t.toUpperCase() + text.join("");
+}
+
+// https://observablehq.com/@observablehq/plot-marimekko
+function Marimekko({x, y, z, value = z, anchor = "middle", inset = 0.5, ...options} = {}) {
   const stackX = /\bleft$/i.test(anchor) ? Plot.stackX1 : /\bright$/i.test(anchor) ? Plot.stackX2 : Plot.stackX;
   const stackY = /^top\b/i.test(anchor) ? Plot.stackY2 : /^bottom\b/i.test(anchor) ? Plot.stackY1 : Plot.stackY;
   const [X, setX] = Plot.column(x);

examples/google-analytics/docs/components/punchcardChart.js

@@ -0,0 +1,50 @@
+import * as Plot from "npm:@observablehq/plot";
+import * as d3 from "npm:d3";
+
+export function punchcardChart(data, {label, value, ...options} = {}) {
+  const aggregatedValues = d3
+    .rollups(
+      data,
+      (v) => d3.median(v, (d) => d[value]),
+      (d) => d.hour,
+      (d) => d.dayOfWeek
+    )
+    .flatMap((d) => d[1].map((d) => d[1]));
+  return Plot.plot({
+    ...options,
+    inset: 12,
+    padding: 0,
+    marginBottom: 10,
+    grid: true,
+    round: false,
+    label: null,
+    x: {
+      axis: "top",
+      domain: d3.range(24),
+      interval: 1,
+      tickFormat: (d) => (d % 12 || 12) + (d === 0 ? " AM" : d === 12 ? " PM" : "")
+    },
+    y: {
+      domain: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+      tickFormat: (d) => d.substr(0, 3)
+    },
+    r: {label, range: [1, 15], domain: d3.extent(aggregatedValues)},
+    marks: [
+      Plot.dot(
+        data,
+        Plot.group(
+          {r: "median"},
+          {
+            y: "dayOfWeek",
+            x: "hour",
+            r: value,
+            fill: "currentColor",
+            stroke: "var(--theme-background)",
+            sort: null,
+            tip: true
+          }
+        )
+      )
+    ]
+  });
+}

examples/google-analytics/docs/components/trend.js

@@ -0,0 +1,26 @@
+import {html} from "npm:htl";
+
+export function trendNumber(data, {focus, value, ...options} = {}) {
+  const focusIndex = data.findIndex((d) => d === focus);
+  return formatTrend(focus[value] - data[focusIndex - 1]?.[value], options);
+}
+
+export function formatTrend(
+  value,
+  {
+    locale,
+    format = {},
+    positive = "green",
+    negative = "red",
+    base = "muted",
+    positiveSuffix = " ↗︎",
+    negativeSuffix = " ↘︎",
+    baseSuffix = ""
+  } = {}
+) {
+  if (format.signDisplay === undefined) format = {...format, signDisplay: "always"};
+  return html`<span class="small ${value > 0 ? positive : value < 0 ? negative : base}">${value.toLocaleString(
+    locale,
+    format
+  )}${value > 0 ? positiveSuffix : value < 0 ? negativeSuffix : baseSuffix}`;
+}

examples/google-analytics/docs/components/trendNumber.js

@@ -4,15 +4,16 @@ import {runReport} from "./google-analytics.js";
 const response = await runReport({
   dateRanges: [{startDate: "2023-04-01", endDate: "2023-12-31"}],
   dimensions: [{name: "hour"}, {name: "dayOfWeekName"}],
-  metrics: [{name: "activeUsers"}]
+  metrics: [{name: "activeUsers"}, {name: "newUsers"}]
 });
 
 process.stdout.write(
   csvFormat(
     response.rows.map((d) => ({
       hour: d.dimensionValues[0].value,
       dayOfWeek: d.dimensionValues[1].value,
-      activeUsers: d.metricValues[0].value
+      activeUsers: d.metricValues[0].value,
+      newUsers: d.metricValues[1].value
     }))
   )
 );

examples/google-analytics/docs/data/countries-110m.json.ts

@@ -16,7 +16,9 @@ const defaultDimensionFilter = {
   filter: {
     fieldName: "fullPageUrl",
     stringFilter: {
-      value: "observablehq.com/plot/"
+      value: "observablehq.com/plot",
+      matchType: "BEGINS_WITH",
+      caseSensitive: false
     }
   }
 };