multi-line time format

Author: mbostock

src/marks/axis.js

@@ -7,7 +7,7 @@ import {isIterable, isNoneish, isTemporal, orderof} from "../options.js";
 import {maybeColorChannel, maybeNumberChannel, maybeRangeInterval} from "../options.js";
 import {isTemporalScale} from "../scales.js";
 import {offset} from "../style.js";
-import {isTimeYear, isUtcYear} from "../time.js";
+import {formatTimeTicks, isTimeYear, isUtcYear} from "../time.js";
 import {initializer} from "../transforms/basic.js";
 import {ruleX, ruleY} from "./rule.js";
 import {text, textX, textY} from "./text.js";
@@ -368,7 +368,7 @@ function axisTextKy(
     },
     function (scale, ticks, channels) {
       if (fontVariant === undefined) this.fontVariant = inferFontVariant(scale);
-      if (text === undefined) channels.text = inferTextChannel(scale, ticks, tickFormat);
+      if (text === undefined) channels.text = inferTextChannel(scale, ticks, tickFormat, anchor);
     }
   );
 }
@@ -415,7 +415,7 @@ function axisTextKx(
     },
     function (scale, ticks, channels) {
       if (fontVariant === undefined) this.fontVariant = inferFontVariant(scale);
-      if (text === undefined) channels.text = inferTextChannel(scale, ticks, tickFormat);
+      if (text === undefined) channels.text = inferTextChannel(scale, ticks, tickFormat, anchor);
     }
   );
 }
@@ -565,15 +565,17 @@ function axisMark(mark, k, ariaLabel, data, options, initialize) {
   return m;
 }
 
-function inferTextChannel(scale, ticks, tickFormat) {
-  return {value: inferTickFormat(scale, ticks, tickFormat)};
+function inferTextChannel(scale, ticks, tickFormat, anchor) {
+  return {value: inferTickFormat(scale, ticks, tickFormat, anchor)};
 }
 
 // D3’s ordinal scales simply use toString by default, but if the ordinal scale
 // domain (or ticks) are numbers or dates (say because we’re applying a time
 // interval to the ordinal scale), we want Plot’s default formatter.
-export function inferTickFormat(scale, ticks, tickFormat) {
-  return scale.tickFormat
+export function inferTickFormat(scale, ticks, tickFormat, anchor) {
+  return tickFormat === undefined && isTemporalScale(scale)
+    ? formatTimeTicks(scale, ticks, anchor)
+    : scale.tickFormat
     ? scale.tickFormat(isIterable(ticks) ? null : ticks, tickFormat)
     : tickFormat === undefined
     ? isUtcYear(scale.interval)

src/time.js

@@ -1,7 +1,33 @@
+import {bisector, extent, timeFormat, utcFormat} from "d3";
 import {utcSecond, utcMinute, utcHour, unixDay, utcWeek, utcMonth, utcYear} from "d3";
 import {utcMonday, utcTuesday, utcWednesday, utcThursday, utcFriday, utcSaturday, utcSunday} from "d3";
 import {timeSecond, timeMinute, timeHour, timeDay, timeWeek, timeMonth, timeYear} from "d3";
 import {timeMonday, timeTuesday, timeWednesday, timeThursday, timeFriday, timeSaturday, timeSunday} from "d3";
+import {orderof} from "./options.js";
+
+const durationSecond = 1000;
+const durationMinute = durationSecond * 60;
+const durationHour = durationMinute * 60;
+const durationDay = durationHour * 24;
+const durationWeek = durationDay * 7;
+const durationMonth = durationDay * 30;
+const durationYear = durationDay * 365;
+
+const formats = [
+  ["millisecond", 0.5 * durationSecond],
+  ["second", durationSecond],
+  ["second", 30 * durationSecond],
+  ["minute", durationMinute],
+  ["minute", 30 * durationMinute],
+  ["hour", durationHour],
+  ["hour", 12 * durationHour],
+  ["day", durationDay],
+  ["day", 2 * durationDay],
+  ["week", durationWeek],
+  ["month", durationMonth],
+  ["month", 3 * durationMonth],
+  ["year", durationYear]
+];
 
 const timeIntervals = new Map([
   ["second", timeSecond],
@@ -82,3 +108,48 @@ export function isTimeYear(i) {
   const date = i.floor(new Date(2000, 11, 31));
   return timeYear(date) >= date; // coercing equality
 }
+
+export function formatTimeTicks(scale, ticks, anchor) {
+  const format = scale.type === "time" ? timeFormat : utcFormat;
+  const template =
+    anchor === "left" || anchor === "right"
+      ? (f1, f2) => `\n${f1}\n${f2}` // extra newline to keep f1 centered
+      : anchor === "top"
+      ? (f1, f2) => `${f2}\n${f1}`
+      : (f1, f2) => `${f1}\n${f2}`;
+  switch (getTimeTicksInterval(scale, ticks)) {
+    case "millisecond":
+      return formatConditional(format(".%L"), format(":%M:%S"), template);
+    case "second":
+      return formatConditional(format(":%S"), format("%-I:%M"), template);
+    case "minute":
+      return formatConditional(format("%-I:%M"), format("%p"), template);
+    case "hour":
+      return formatConditional(format("%-I %p"), format("%b %-d"), template);
+    case "day":
+      return formatConditional(format("%-d"), format("%b"), template);
+    case "week":
+      return formatConditional(format("%-d"), format("%b"), template);
+    case "month":
+      return formatConditional(format("%b"), format("%Y"), template);
+    case "year":
+      return format("%Y");
+  }
+  throw new Error("unable to format time ticks");
+}
+
+function getTimeTicksInterval(scale, ticks) {
+  const [start, stop] = extent(scale.domain());
+  const count = typeof ticks === "number" ? ticks : 10; // TODO detect ticks as time interval?
+  const step = Math.abs(stop - start) / count;
+  return formats[bisector(([, step]) => Math.log(step)).center(formats, Math.log(step))][0];
+}
+
+function formatConditional(format1, format2, template) {
+  return (x, i, X) => {
+    const f1 = format1(x, i); // always shown
+    const f2 = format2(x, i); // only shown if different
+    const j = i - orderof(X); // detect reversed domains
+    return i !== j && X[j] !== undefined && f2 === format2(X[j], j) ? f1 : template(f1, f2);
+  };
+}