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";
@@ -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,39 @@
+import {bisector, extent, tickStep, 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;
+
+// TODO prune because we don’t need steps?
+const formats = [
+  ["second", 1, durationSecond],
+  ["second", 5, 5 * durationSecond],
+  ["second", 15, 15 * durationSecond],
+  ["second", 30, 30 * durationSecond],
+  ["minute", 1, durationMinute],
+  ["minute", 5, 5 * durationMinute],
+  ["minute", 15, 15 * durationMinute],
+  ["minute", 30, 30 * durationMinute],
+  ["hour", 1, durationHour],
+  ["hour", 3, 3 * durationHour],
+  ["hour", 6, 6 * durationHour],
+  ["hour", 12, 12 * durationHour],
+  ["day", 1, durationDay],
+  ["day", 2, 2 * durationDay],
+  ["week", 1, durationWeek],
+  ["month", 1, durationMonth],
+  ["month", 3, 3 * durationMonth],
+  ["year", 1, durationYear]
+];
 
 const timeIntervals = new Map([
   ["second", timeSecond],
@@ -82,3 +114,53 @@ 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 target = Math.abs(stop - start) / count;
+  const i = bisector(([, , step]) => step).right(formats, target);
+  if (i >= formats.length) return "year";
+  if (i > 0) return formats[target / formats[i - 1][2] < formats[i][2] / target ? i - 1 : i][0];
+  const step = Math.max(tickStep(start, stop, count), 1);
+  if (step === 1000) return "second";
+  return "millisecond";
+}
+
+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);
+  };
+}