reserve space for title and color legend

Author: Fil

src/legend.js

@@ -2,17 +2,59 @@ import {axisBottom, create, format, interpolate, interpolateRound, range, scaleB
 
 export function Legend(
   {color: colorScale},
-  {color} = {}
+  {color, title} = {}
 ) {
+  
   return {
-    ...(color && color.legend && {color: new ColorLegend(colorScale, color)})
+    ...(color && color.legend && {color: new ColorLegend(colorScale, color.legend)}),
+    ...(title && {title: new TitleLegend(title)})
   };
 }
 
+export class TitleLegend {
+  constructor(title) {
+    this.title = typeof title === "string" ? { text: title } : title;
+    if (this.title.fontSize === undefined) this.title.fontSize = 22;
+    if (this.title.top === undefined) this.title.top = this.title.fontSize - 2;
+  }
+  render(
+    index,
+    scales,
+    channels,
+    {
+      width: canvasWidth,
+      height: canvasHeight
+    }
+  ) {
+    const {
+      text,
+      bottom,
+      fontSize,
+      top,
+      right,
+      left = 0
+    } = this.title;
+    const tx = right !== undefined ? canvasWidth - right : left;
+    const ty = bottom !== undefined ? canvasHeight - bottom - fontSize / 3 : top;
+    return create("svg:g")
+        .attr("transform", `translate(${tx},${ty})`)
+        .call(g => g.append("text")
+          .text(text)
+          .attr("fill", "currentColor")
+          .attr("text-anchor", right !== undefined ? "end" : "start")
+          .style("font-size", fontSize)
+        )
+      .node();
+  }
+}
+
 export class ColorLegend {
-  constructor({name}, color) {
+  constructor({name, scale}, legend) {
+    this.color = scale,
     this.name = name || "color";
-    this.color = color;
+    this.legend = typeof legend === "object" ? legend : {};
+    if (this.legend.tickSize === undefined) this.legend.tickSize = 6;
+    if (this.legend.height === undefined) this.legend.height = 44 + this.legend.tickSize;
   }
   render(
     index,
@@ -24,22 +66,20 @@ export class ColorLegend {
       height: canvasHeight
     }
   ) {
-    const { color: {
-      legend: {
-        title,
-        tickSize = 6,
-        width = 320,
-        height = 44 + tickSize,
-        top = title === undefined ? -20 : -3,
-        right = 0,
-        bottom,
-        left,
-        ticks = width / 64,
-        tickFormat,
-        tickValues
-      } = {}
+    const { legend: {
+      title,
+      tickSize = 6,
+      width = 320,
+      height = 44 + tickSize,
+      top = title === undefined ? -20 : -3,
+      right = 0,
+      bottom,
+      left,
+      ticks = width / 64,
+      tickFormat,
+      tickValues
     } = {} } = this;
-    const tx = left !== undefined ? left : canvasWidth - width + right;
+    const tx = left !== undefined ? left : canvasWidth - width - right;
     const ty = bottom !== undefined ? canvasHeight - bottom - height : top;
     return create("svg:g")
         .attr("transform", `translate(${tx},${ty})`)

src/plot.js

@@ -73,6 +73,7 @@ export function plot(options = {}) {
   if (axes[y]) marks.unshift(axes[y]);
 
   if (legend.color) marks.push(legend.color);
+  if (legend.title) marks.push(legend.title);
 
   const {width, height} = dimensions;
 
@@ -107,7 +108,8 @@ function Dimensions(
     fy: {axis: fyAxis} = {}
   },
   {
-    color
+    color,
+    title
   },
   {
     width = 640,
@@ -124,7 +126,14 @@ function Dimensions(
     marginLeft = Math.max((yAxis === "left" ? 40 : 0) + facetMarginLeft, xAxis || fxAxis ? 20 : 0)
   } = {}
 ) {
-  color; // TDB: reserve space for the color legend?
+  const reserve = { top: [], bottom: [] };
+  if (title && (title.title.bottom === undefined)) reserve.top.push(title.title.fontSize * 2);
+  if (title && (title.title.bottom !== undefined)) reserve.bottom.push(title.title.fontSize * 1.6);
+  if (color && (color.legend.bottom === undefined)) reserve.top.push(color.legend.height);
+  if (color && (color.legend.bottom !== undefined)) reserve.bottom.push(color.legend.height);
+  if (reserve.top.length) marginTop += Math.max(...reserve.top);
+  if (reserve.bottom.length) marginBottom += Math.max(...reserve.bottom);
+
   return {
     width,
     height,