Support href and cursor properties for marks

site/docs/encoding.md

@@ -211,7 +211,7 @@ In addition to the constant `value`, [value definitions](#value-def) of `text` a
 {:#href}
 ## Hyperlink Channel
 
-By setting the `href` channel, a mark becomes a hyperlink. The specified URL is loaded upon a muse click. The `cursor` mark property can be set to `pointer` to serve as affordance for hyperlinks.
+By setting the `href` channel, a mark becomes a hyperlink. The specified URL is loaded upon a muse click. The [`cursor` mark property](mark.html#hyperlink) can be set to `pointer` to serve as affordance for hyperlinks.
 
 {% include table.html props="href" source="Encoding" %}
 

site/docs/mark/mark.md

@@ -129,9 +129,10 @@ The rest of this section describe groups of properties supported by the `mark` c
 
 {% include table.html props="strokeWidth,strokeDash,strokeDashOffset" source="MarkConfig" %}
 
-### Link Properties
+{:#hyperlink}
+### Hyperlink Properties
 
-Marks can act as hyperlinks when the `href` property is defined. A `cursor` property can also be provided to serve as affordance for the links.
+Marks can act as hyperlinks when the `href` property or [channel](encoding.html#href) is defined. A `cursor` property can also be provided to serve as affordance for the links.
 
 {% include table.html props="href,cursor" source="MarkConfig" %}
 

src/channel.ts

@@ -128,7 +128,8 @@ export type PositionScaleChannel = typeof POSITION_SCALE_CHANNELS[0];
 // NON_POSITION_SCALE_CHANNEL = SCALE_CHANNELS without X, Y
 const {
   // x2 and y2 share the same scale as x and y
-  // text, tooltip, and href have format instead of scale
+  // text and tooltip have format instead of scale,
+  // href has neother format, nor scale
   text: _t, tooltip: _tt, href: _hr,
   // detail and order have no scale
   detail: _dd, order: _oo,

src/vega.schema.ts

@@ -193,7 +193,7 @@ export interface VgSignal {
   push?: string;
 }
 
-export type VgEncodeChannel = 'x'|'x2'|'xc'|'width'|'y'|'y2'|'yc'|'height'|'opacity'|'fill'|'fillOpacity'|'stroke'|'strokeWidth'|'strokeOpacity'|'strokeDash'|'strokeDashOffset'|'cursor'|'clip'|'size'|'shape'|'path'|'innerRadius'|'outerRadius'|'startAngle'|'endAngle'|'interpolate'|'tension'|'orient'|'url'|'align'|'baseline'|'text'|'dir'|'ellipsis'|'limit'|'dx'|'dy'|'radius'|'theta'|'angle'|'font'|'fontSize'|'fontWeight'|'fontStyle'|'href'|'cursor';
+export type VgEncodeChannel = 'x'|'x2'|'xc'|'width'|'y'|'y2'|'yc'|'height'|'opacity'|'fill'|'fillOpacity'|'stroke'|'strokeWidth'|'strokeOpacity'|'strokeDash'|'strokeDashOffset'|'cursor'|'clip'|'size'|'shape'|'path'|'innerRadius'|'outerRadius'|'startAngle'|'endAngle'|'interpolate'|'tension'|'orient'|'url'|'align'|'baseline'|'text'|'dir'|'ellipsis'|'limit'|'dx'|'dy'|'radius'|'theta'|'angle'|'font'|'fontSize'|'fontWeight'|'fontStyle'|'tooltip'|'href'|'cursor';
 export type VgEncodeEntry = {
   [k in VgEncodeChannel]?: VgValueRef | (VgValueRef & {test?: string})[];
 };

test/compile/mark/mark.test.ts

@@ -105,36 +105,6 @@ describe('Mark', function() {
         assert.equal(markGroup[0].from.data, 'main');
       });
     });
-
-    describe('Bar with tooltip', () => {
-      it('should pass tooltip value to encoding', () => {
-        const model = parseUnitModelWithScaleAndLayoutSize({
-          "mark": "bar",
-          "encoding": {
-            "x": {"type": "quantitative", "field": "Cost__Other", "aggregate": "sum"},
-            "y": {"bin": true, "type": "quantitative", "field": "Cost__Total_$"},
-            "tooltip": {"value": "foo"}
-          }
-        });
-        const markGroup = parseMarkGroup(model);
-        assert.equal(markGroup[0].encode.update.tooltip.value, 'foo');
-      });
-    });
-
-    describe('Bar with href', () => {
-      it('should pass href value to encoding', () => {
-        const model = parseUnitModelWithScaleAndLayoutSize({
-          "mark": "bar",
-          "encoding": {
-            "x": {"type": "quantitative", "field": "Cost__Other", "aggregate": "sum"},
-            "y": {"bin": true, "type": "quantitative", "field": "Cost__Total_$"},
-            "href": {"value": "https://idl.cs.washington.edu/"}
-          }
-        });
-        const markGroup = parseMarkGroup(model);
-        assert.equal(markGroup[0].encode.update.href.value, 'https://idl.cs.washington.edu/');
-      });
-    });
   });
 
   describe('getPathSort', () => {

test/compile/mark/point.test.ts

@@ -243,6 +243,34 @@ describe('Mark: Point', function() {
     });
 
   });
+
+  describe('with tooltip', () => {
+    const model = parseUnitModelWithScaleAndLayoutSize({
+      "mark": "point",
+      "encoding": {
+        "tooltip": {"value": "foo"}
+      }
+    });
+    const props = point.encodeEntry(model);
+
+    it('should pass tooltip value to encoding', () => {
+      assert.deepEqual(props.tooltip, {value: "foo"});
+    });
+  });
+
+  describe('with href', () => {
+    const model = parseUnitModelWithScaleAndLayoutSize({
+      "mark": "point",
+      "encoding": {
+        "href": {"value": "https://idl.cs.washington.edu/"}
+      }
+    });
+    const props = point.encodeEntry(model);
+
+    it('should pass href value to encoding', () => {
+      assert.deepEqual(props.href, {value: 'https://idl.cs.washington.edu/'});
+    });
+  });
 });
 
 describe('Mark: Square', function() {