Support href and cursor properties for marks #3229

domoritz · 2017-12-09T11:31:02Z

No description provided.

kanitw · 2017-12-14T04:28:38Z

src/vega.schema.ts

+  /**
+   * The mouse cursor used over the mark. Any valid [CSS cursor type](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Values) can be used.
+   */
+  cursor?: string;


Okay. I don't know whether browser vendors will add more in the future, though.

kanitw · 2017-12-14T04:30:21Z

src/vega.schema.ts

-  fontStyle: 1
+  fontStyle: 1,
+  href: 1,
+  cursor: 1,


I'm not sure why previously list cursor as "vg channel that do not have mark config". Can you test if cursor works below for sure?

Btw, does it really make sense to have href as a mark config too?

Working on it

{ "$schema": "https://vega.github.io/schema/vega-lite/v2.json", "description": "A simple bar chart with embedded data.", "data": { "values": [ {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43}, {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53}, {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52} ] }, "mark": "bar", "encoding": { "x": {"field": "a", "type": "ordinal"}, "y": {"field": "b", "type": "quantitative"} }, "config": { "bar": { "cursor": "pointer" } } }

works

kanitw · 2017-12-14T04:32:15Z

site/docs/mark/mark.md

 ### Stroke Style

 {% include table.html props="strokeWidth,strokeDash,strokeDashOffset" source="MarkConfig" %}

+### Link Properties
+
+Marks can act as hyperlinks when the `href` property is defined.


href property -> href channel

Maybe also add:

A cursor channel can also be provided to serve as affordance for the links.

domoritz · 2017-12-26T12:43:55Z

I will finish this in a few days. Thanks for the review.

domoritz · 2017-12-30T15:21:29Z

Ready. Note that this PR does not add href or cursor as a channel.

kanitw · 2017-12-31T16:35:31Z

site/docs/mark/mark.md

 ### Stroke Style

 {% include table.html props="strokeWidth,strokeDash,strokeDashOffset" source="MarkConfig" %}

+### Link Properties
+
+Marks can act as hyperlinks when the `href` channel is defined. A `cursor` channel can also be provided to serve as affordance for the links.


If you don't add them as channels, why the docs say that they are channels here?

Ups. Fixed.

kanitw

I still feel like this is quite weird to merge.
We better support them as encoding channels.

kanitw · 2018-01-12T05:56:14Z

site/docs/encoding.md

@@ -180,27 +180,27 @@ In addition to the constant `value`, [value definitions](#value-def) of mark pro
 See [the `condition`](condition.html) page for examples how to specify condition logic.

 {:#text}
-## Text and Tooltip Channels
+## Text, Tooltip, and HREF Channels


href should be on its own category -- it should not have format property

Hmm, I was thinking that one might want to format a number to be a URL like www.site.com?page=${id}.

Yeah but having format wouldn't help you do that anyway?

https://github.com/d3/d3-format#locale_format

oh I see -- you can use "fill"

Actually you can't .. fill is for a slightly different purpose

You're right. I was thinking of dates where you can do something like foo %H bar. However, I think that's a rare case and can be addressed with a formula.

kanitw · 2018-01-12T05:57:12Z

src/encoding.ts

+  /**
+   * A URL to load upon mouse click.
+   */
+  href?: FieldDefWithCondition<TextFieldDef<F>> | ValueDefWithCondition<TextFieldDef<F>>;


It shouldn't be TextFieldDef?

What if you want a conditional url?

Well, TextFieldDef and conditional are orthogonal. TextFieldDef has format that href shouldn't

Fixed and rebased.

kanitw · 2018-01-12T16:32:24Z

site/docs/encoding.md

+{:#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.


add a link for "The cursor mark property"?

kanitw · 2018-01-12T17:17:08Z

site/docs/mark/mark.md

 ### Stroke Style

 {% include table.html props="strokeWidth,strokeDash,strokeDashOffset" source="MarkConfig" %}

+### Link 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.


href property or channel

(add link for "channel" part)

kanitw · 2018-01-12T17:17:28Z

src/channel.ts

-  // text and tooltip has format instead of scale
-  text: _t, tooltip: _tt,
+  // x2 and y2 share the same scale as x and y
+  // text, tooltip, and href have format instead of scale


href does not have format

kanitw · 2018-01-12T17:19:17Z

test/compile/mark/mark.test.ts

@@ -120,6 +120,21 @@ describe('Mark', function() {
        assert.equal(markGroup[0].encode.update.tooltip.value, 'foo');
      });
    });
+
+    describe('Bar with href', () => {


So far, I have created test for these types of basic test in point.

Also, going forward, let's try to use describe for function and namespace rather than cases (which it is more appropriate).

Okay. I'm moving the tooltip and href tests.

domoritz · 2018-01-15T05:15:24Z

Done with revisions

kanitw · 2018-01-15T05:23:46Z

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


domoritz · 2018-01-15T05:33:38Z

cc @rdeline

domoritz requested a review from kanitw December 9, 2017 11:31

domoritz force-pushed the dom/href branch 2 times, most recently from 99410fd to 091d051 Compare December 9, 2017 11:43

kanitw requested changes Dec 14, 2017

View reviewed changes

domoritz force-pushed the dom/href branch from 091d051 to 4e5ad1a Compare December 30, 2017 15:21

kanitw reviewed Dec 31, 2017

View reviewed changes

domoritz force-pushed the dom/href branch from 4e5ad1a to e1ec0d6 Compare January 1, 2018 12:12

kanitw requested changes Jan 4, 2018

View reviewed changes

domoritz force-pushed the dom/href branch from 7b26df9 to 0e6271c Compare January 11, 2018 15:54

Support href and cursor properties for marks

779d318

domoritz force-pushed the dom/href branch 2 times, most recently from afb4d0c to a832c36 Compare January 11, 2018 17:03

kanitw reviewed Jan 12, 2018

View reviewed changes

HREF channel. Ref #1855

e927dad

domoritz force-pushed the dom/href branch from a832c36 to e927dad Compare January 12, 2018 12:07

kanitw reviewed Jan 12, 2018

View reviewed changes

kanitw requested changes Jan 12, 2018

View reviewed changes

kanitw mentioned this pull request Jan 15, 2018

Geo #2734

Merged

5 tasks

Update docs and move tests.

a3f1fbd

kanitw reviewed Jan 15, 2018

View reviewed changes

typo

4969b57

kanitw approved these changes Jan 15, 2018

View reviewed changes

kanitw merged commit b4dfb96 into master Jan 15, 2018

kanitw deleted the dom/href branch January 15, 2018 05:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support href and cursor properties for marks #3229

Support href and cursor properties for marks #3229

domoritz commented Dec 9, 2017

kanitw Dec 14, 2017

domoritz Dec 26, 2017 •

edited

Loading

kanitw Dec 14, 2017

domoritz Dec 26, 2017

domoritz Dec 30, 2017

kanitw Dec 14, 2017

domoritz Dec 26, 2017

domoritz commented Dec 26, 2017

domoritz commented Dec 30, 2017 •

edited

Loading

kanitw Dec 31, 2017

domoritz Jan 1, 2018 •

edited

Loading

kanitw left a comment

kanitw Jan 12, 2018 •

edited

Loading

domoritz Jan 12, 2018

kanitw Jan 12, 2018

kanitw Jan 12, 2018

kanitw Jan 12, 2018

domoritz Jan 12, 2018 •

edited

Loading

kanitw Jan 12, 2018

domoritz Jan 12, 2018

kanitw Jan 12, 2018

domoritz Jan 12, 2018

kanitw Jan 12, 2018

kanitw Jan 12, 2018

kanitw Jan 12, 2018

kanitw Jan 12, 2018

domoritz Jan 15, 2018

domoritz commented Jan 15, 2018

kanitw Jan 15, 2018

domoritz commented Jan 15, 2018

Support href and cursor properties for marks #3229

Support href and cursor properties for marks #3229

Conversation

domoritz commented Dec 9, 2017

Choose a reason for hiding this comment

domoritz Dec 26, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

domoritz commented Dec 26, 2017

domoritz commented Dec 30, 2017 • edited Loading

Choose a reason for hiding this comment

domoritz Jan 1, 2018 • edited Loading

Choose a reason for hiding this comment

kanitw left a comment

Choose a reason for hiding this comment

kanitw Jan 12, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

domoritz Jan 12, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

domoritz commented Jan 15, 2018

Choose a reason for hiding this comment

domoritz commented Jan 15, 2018

domoritz Dec 26, 2017 •

edited

Loading

domoritz commented Dec 30, 2017 •

edited

Loading

domoritz Jan 1, 2018 •

edited

Loading

kanitw Jan 12, 2018 •

edited

Loading

domoritz Jan 12, 2018 •

edited

Loading