Add legend direction, discrete gradient, and redesigned symbol legend…

… support.

packages/vega-parser/src/parsers/guides/guide-util.js

@@ -0,0 +1,44 @@
+import {Vertical} from './constants';
+import {value} from '../../util';
+
+export function lookup(name, spec, config) {
+  return value(spec[name], config[name]);
+}
+
+export function isVertical(spec, configVal) {
+  return value(spec.direction, configVal) === Vertical;
+}
+
+export function gradientLength(spec, config) {
+  return value(
+    spec.gradientLength,
+    config.gradientLength || config.gradientWidth
+  );
+}
+
+export function gradientThickness(spec, config) {
+  return value(
+    spec.gradientThickness,
+    config.gradientThickness || config.gradientHeight
+  );
+}
+
+export function entryColumns(spec, config) {
+  return value(
+    spec.columns,
+    value(config.columns, +isVertical(spec, config.entryDirection))
+  );
+}
+
+export function getEncoding(name, encode) {
+  var v = encode && (
+    (encode.update && encode.update[name]) ||
+    (encode.enter && encode.enter[name])
+  );
+  return v && v.signal ? v : v ? v.value : null;
+}
+
+export function getStyle(name, scope, style) {
+  var s = scope.config.style[style];
+  return s && s[name];
+}

packages/vega-parser/src/parsers/guides/legend-gradient-discrete.js

@@ -0,0 +1,35 @@
+import {Value, Perc, Perc2} from './constants';
+import guideMark from './guide-mark';
+import {gradientLength, gradientThickness, isVertical, lookup} from './guide-util';
+import {RectMark} from '../marks/marktypes';
+import {LegendBandRole} from '../marks/roles';
+import {addEncode, encoder} from '../encode/encode-util';
+
+export default function(spec, scale, config, userEncode, dataRef) {
+  var zero = {value: 0},
+      vertical = isVertical(spec, config.gradientDirection),
+      thickness = gradientThickness(spec, config),
+      length = gradientLength(spec, config),
+      encode = {}, enter, update, u, v, uu, vv, adjust = '';
+
+  vertical
+    ? (u = 'y', uu = 'y2', v = 'x', vv = 'width', adjust = '1-')
+    : (u = 'x', uu = 'x2', v = 'y', vv = 'height');
+
+  encode.enter = enter = {opacity: zero};
+  addEncode(enter, 'stroke',      lookup('gradientStrokeColor', spec, config));
+  addEncode(enter, 'strokeWidth', lookup('gradientStrokeWidth', spec, config));
+
+  encode.exit = {opacity: zero};
+  encode.update = update = {opacity: {value: 1}};
+
+  enter.fill = update.fill = {scale: scale, field: Value};
+
+  enter[u] = update[u] = {signal: adjust + 'datum.' + Perc, mult: length};
+  enter[v] = update[v] = {value: 0};
+
+  enter[uu] = update[uu] = {signal: adjust + 'datum.' + Perc2, mult: length};
+  enter[vv] = update[vv] = encoder(thickness);
+
+  return guideMark(RectMark, LegendBandRole, null, Value, dataRef, encode, userEncode);
+}

packages/vega-parser/src/parsers/guides/legend-gradient-labels.js

@@ -1,25 +1,33 @@
-import {Perc, Label, GuideLabelStyle} from './constants';
+import {Index, Label, Perc, Value, GuideLabelStyle} from './constants';
 import guideMark from './guide-mark';
+import {gradientLength, gradientThickness, isVertical, lookup} from './guide-util';
 import {TextMark} from '../marks/marktypes';
 import {LegendLabelRole} from '../marks/roles';
-import {addEncode} from '../encode/encode-util';
+import {addEncode, encoder} from '../encode/encode-util';
+import {value} from '../../util';
 
 var alignExpr = 'datum.' + Perc + '<=0?"left"'
   + ':datum.' + Perc + '>=1?"right":"center"';
 
+var baselineExpr = 'datum.' + Perc + '<=0?"bottom"'
+  + ':datum.' + Perc + '>=1?"top":"middle"';
+
 export default function(spec, config, userEncode, dataRef) {
   var zero = {value: 0},
-      encode = {}, enter, update;
+      vertical = isVertical(spec, config.gradientDirection),
+      thickness = encoder(gradientThickness(spec, config)),
+      length = gradientLength(spec, config),
+      overlap = lookup('labelOverlap', spec, config),
+      encode = {}, enter, update, u, v, adjust = '';
 
   encode.enter = enter = {
     opacity: zero
   };
-  addEncode(enter, 'fill', config.labelColor);
-  addEncode(enter, 'font', config.labelFont);
-  addEncode(enter, 'fontSize', config.labelFontSize);
-  addEncode(enter, 'fontWeight', config.labelFontWeight);
-  addEncode(enter, 'baseline', config.gradientLabelBaseline);
-  addEncode(enter, 'limit', config.gradientLabelLimit);
+  addEncode(enter, 'fill',       lookup('labelColor', spec, config));
+  addEncode(enter, 'font',       lookup('labelFont', spec, config));
+  addEncode(enter, 'fontSize',   lookup('labelFontSize', spec, config));
+  addEncode(enter, 'fontWeight', lookup('labelFontWeight', spec, config));
+  addEncode(enter, 'limit',      value(spec.labelLimit, config.gradientLabelLimit));
 
   encode.exit = {
     opacity: zero
@@ -30,17 +38,22 @@ export default function(spec, config, userEncode, dataRef) {
     text: {field: Label}
   };
 
-  enter.x = update.x = {
-    field: Perc,
-    mult: config.gradientWidth
-  };
+  if (vertical) {
+    enter.align = {value: 'left'};
+    enter.baseline = update.baseline = {signal: baselineExpr};
+    u = 'y'; v = 'x'; adjust = '1-';
+  } else {
+    enter.align = update.align = {signal: alignExpr};
+    enter.baseline = {value: 'top'};
+    u = 'x'; v = 'y';
+  }
 
-  enter.y = update.y = {
-    value: config.gradientHeight,
-    offset: config.gradientLabelOffset
-  };
+  enter[u] = update[u] = {signal: adjust + 'datum.' + Perc, mult: length};
 
-  enter.align = update.align = {signal: alignExpr};
+  enter[v] = update[v] = thickness;
+  thickness.offset = value(spec.labelOffset, config.gradientLabelOffset) || 0;
 
-  return guideMark(TextMark, LegendLabelRole, GuideLabelStyle, Perc, dataRef, encode, userEncode);
+  spec = guideMark(TextMark, LegendLabelRole, GuideLabelStyle, Value, dataRef, encode, userEncode);
+  if (overlap) spec.overlap = {method: overlap, order:  'datum.' + Index};
+  return spec;
 }

packages/vega-parser/src/parsers/guides/legend-gradient.js

@@ -1,21 +1,35 @@
 import guideMark from './guide-mark';
+import {gradientLength, gradientThickness, isVertical, lookup} from './guide-util';
 import {RectMark} from '../marks/marktypes';
 import {LegendGradientRole} from '../marks/roles';
-import {addEncode} from '../encode/encode-util';
+import {addEncode, encoder} from '../encode/encode-util';
 
 export default function(spec, scale, config, userEncode) {
   var zero = {value: 0},
-      encode = {}, enter, update;
+      vertical = isVertical(spec, config.gradientDirection),
+      thickness = gradientThickness(spec, config),
+      length = gradientLength(spec, config),
+      encode = {}, enter, update, start, stop, width, height;
+
+  if (vertical) {
+    start = [0, 1];
+    stop = [0, 0];
+    width = thickness;
+    height = length;
+  } else {
+    start = [0, 0];
+    stop = [1, 0];
+    width = length;
+    height = thickness;
+  }
 
   encode.enter = enter = {
     opacity: zero,
     x: zero,
     y: zero
   };
-  addEncode(enter, 'width', config.gradientWidth);
-  addEncode(enter, 'height', config.gradientHeight);
-  addEncode(enter, 'stroke', config.gradientStrokeColor);
-  addEncode(enter, 'strokeWidth', config.gradientStrokeWidth);
+  addEncode(enter, 'stroke',      lookup('gradientStrokeColor', spec, config));
+  addEncode(enter, 'strokeWidth', lookup('gradientStrokeWidth', spec, config));
 
   encode.exit = {
     opacity: zero
@@ -24,11 +38,12 @@ export default function(spec, scale, config, userEncode) {
   encode.update = update = {
     x: zero,
     y: zero,
-    fill: {gradient: scale, start: [0,0], stop: [1,0]},
+    fill: {gradient: scale, start: start, stop: stop},
     opacity: {value: 1}
   };
-  addEncode(update, 'width', config.gradientWidth);
-  addEncode(update, 'height', config.gradientHeight);
+
+  enter.width = update.width = encoder(width);
+  enter.height = update.height = encoder(height);
 
   return guideMark(RectMark, LegendGradientRole, null, undefined, undefined, encode, userEncode);
 }