Feature: Range selectors #373

etpinard · 2016-03-31T15:11:19Z

resolves #207.

@mdtusz @chriddyp @cldougl @alexcjohnson @jackparmer

Strongly inspired by http://api.highcharts.com/highstock#rangeSelector

Example

Given a time series, the following layout:

var layout = {
  xaxis: {
    rangeselector: {
      buttons: [{
        step: 'month',
        stepmode: 'backward',
        count: 6,
        label: '6m'
      }, {
        step: 'year',
        stepmode: 'to date',
        count: 1,
        label: 'year<br>to date'
    }, {
        step: 'year',
        stepmode: 'backward',
        count: 1,
        label: '1y'
    }, {
        step: 'all'
    }]
  }
};

gives

Limitations

Only works on x axes with type 'date' (can be auto-typed)
No MathJax characters in label
active and hovered fill colors are not configurable.
the width of the buttons isn't configurable (the width is determined by the text label width)
the gap between the buttons is constant and not configurable

- so that it can be separatly tested.

- change directory name to rangeselector (instead of range_selector) - rename default func supplyLayoutDefaults (instead of supplyDefaults) - require full module into cartesian defaults

- so that it can be separatly tested.

- change directory name to rangeselector (instead of range_selector) - rename default func supplyLayoutDefaults (instead of supplyDefaults) - require full module into cartesian defaults

…into range-selector

- so that it works in all time zones - and to make things more readable

- based off corresponding xaxis and yaxis domain

- use isLinkedToArray to describe 'buttons' - crawl through layout attribute to convert all isLinkedToArray attributes to items object that plotly.py can parse - fill in missing descriptions - link range selector attributes in axis attributes

cldougl · 2016-04-01T18:27:03Z

src/components/rangeselector/attributes.js

+        dflt: 'left',
+        role: 'info',
+        description: [
+            'Sets the range selector \'s horizontal position anchor.',


rm space between selector and \

- so that running auto-margin on multiple selectors does not result in an infinite loop

- use update object and current axis range to determine whether a given button is active - fill button with Color.ligthLine on mouse over and when active.

etpinard · 2016-04-01T21:20:21Z

test/jasmine/tests/plotschema_test.js

+            expect(itemObj.role).toBe('object');
+
+            var role = np.get().role;
+            expect(role).toEqual('object');


@cldougl @theengineear ⏫ needs to be satisfied for plotly.py to build to correct graph object.

@delekru https://github.com/delekru @etpinard @chriddyp
Can we please use Highchart's button styling? I think they did a good job
and its what users are familiar with:
http://www.highcharts.com/stock/demo/basic-line

On Fri, Apr 1, 2016 at 4:20 PM, Étienne Tétreault-Pinard <
[email protected]> wrote:

In test/jasmine/tests/plotschema_test.js
#373 (comment):

);

var name = np.parts[np.parts.length - 1],

itemName = name.substr(0, name.length - 1);

var itemsObj = np.get().items,

itemObj = itemsObj[itemName];

expect(isPlainObject(itemsObj)).toBe(true);

expect(itemsObj.role).toBeUndefined();

expect(Object.keys(itemsObj).length).toEqual(1);

expect(isPlainObject(itemObj)).toBe(true);

expect(itemObj.role).toBe('object');

var role = np.get().role;

expect(role).toEqual('object');

@cldougl https://github.com/cldougl @theengineear
https://github.com/theengineear [image: ⏫] needs to be
satisfied for plotly.py to build to correct graph object.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/plotly/plotly.js/pull/373/files/a671683931ac3856674bce3af7b5d988c0857cb5..1042f4f656c3e1ac14a365477a93c6d66d44b855#r58269266

- default style has fill with Color.lightLine - active and hovered over buttons are shown in a darker grey (#d3d3d3)

mdtusz · 2016-04-04T19:30:18Z

src/components/rangeselector/button_attributes.js

+    stepmode: {
+        valType: 'enumerated',
+        role: 'info',
+        values: ['backward', 'todate'],


Should there be a forwards mode?

maybe. HighCharts doesn't support it, so I didn't put it in the first iteration.

etpinard and others added 30 commits March 30, 2016 12:10

first pass range selector attributes

36968ad

first pass range selector defaults

ab6c109

first pass range selector draw method

19d81d4

add 'buttons' to list of non-data array in the plot-schema

aa84cf0

ensure that range selector attributes are only coerced for date axes

b5e8301

pull off update object logic into seperate file:

80c75c7

- so that it can be separatly tested.

put range selector on-par with legend's

f25213d

move RangeSelector.draw to just after Legend.draw

ef64e20

make range selector border width dflt 1

26494cf

tmp commit (range selector draw)

da47cd4

make range selector module more like range slider:

da71911

- change directory name to rangeselector (instead of range_selector) - rename default func supplyLayoutDefaults (instead of supplyDefaults) - require full module into cartesian defaults

first pass range selector attributes

ab27021

first pass range selector defaults

de5e6b3

first pass range selector draw method

e976877

add 'buttons' to list of non-data array in the plot-schema

3fde2f8

ensure that range selector attributes are only coerced for date axes

121231b

pull off update object logic into seperate file:

8c839a1

- so that it can be separatly tested.

put range selector on-par with legend's

48b5c50

move RangeSelector.draw to just after Legend.draw

4c7c99d

make range selector border width dflt 1

b198529

tmp commit (range selector draw)

17c8377

make range selector module more like range slider:

0d20931

- change directory name to rangeselector (instead of range_selector) - rename default func supplyLayoutDefaults (instead of supplyDefaults) - require full module into cartesian defaults

better text positioning in range-select buttons

b9e388f

Merge branch 'range-selector' of https://github.com/plotly/plotly.js …

a5e6aaa

…into range-selector

lint in Plots.autoMargin

86331c7

add positionning logic to range selector draw step

c9f76ab

change default yanchor to 'bottom'

574a6b3

fixup test description

beb239b

use new Date() to def specs instead of ms:

ec0771a

- so that it works in all time zones - and to make things more readable

make y position 1.02 by default

dd4880b

etpinard added 6 commits March 31, 2016 16:12

add range selector image mock

fb056b1

add a few range selector interaction tests

b2988b4

make getUpdateObject use ax._name to build update object

3a812c9

fixup test (to accomodate new defaults)

1ca424a

add smart default for range selector 'x' and 'y':

a671683

- based off corresponding xaxis and yaxis domain

cldougl reviewed Apr 1, 2016
View reviewed changes

etpinard added 8 commits April 1, 2016 16:53

add comment about plotly.py in isLinkedToArray plot schema test

46f4a20

add 'rx' and 'ry' button rect radii

616d77d

pass axis name to Plots.autoMargin,

86a3167

- so that running auto-margin on multiple selectors does not result in an infinite loop

fix default label text generator

4318f45

add is-active and is-hovered dynamic props to buttons:

f025dc6

- use update object and current axis range to determine whether a given button is active - fill button with Color.ligthLine on mouse over and when active.

fixup attribute descriptions

ade535e

change range selector and slider 'borderwidth' dflt to 0.

49507be

update range selector image test + add one more

c95b45a

etpinard reviewed Apr 1, 2016
View reviewed changes

etpinard added status: reviewable and removed status: in progress labels Apr 1, 2016

add is-active button update test

6a68155

alexcjohnson mentioned this pull request Apr 1, 2016

Range selectors + streaming and/or markers #387

Closed

etpinard added 3 commits April 4, 2016 10:08

rename 'to date' stepmode 'todate'

1275935

update image mock 'to date' -> 'todate'

6c3a9d7

update default button style:

6da24e4

- default style has fill with Color.lightLine - active and hovered over buttons are shown in a darker grey (#d3d3d3)

mdtusz reviewed Apr 4, 2016
View reviewed changes

etpinard merged commit 4d5262f into master Apr 4, 2016

etpinard deleted the range-selector branch April 4, 2016 20:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: Range selectors #373

Feature: Range selectors #373

etpinard commented Mar 31, 2016

cldougl Apr 1, 2016

etpinard Apr 1, 2016

jackparmer Apr 3, 2016

mdtusz Apr 4, 2016

etpinard Apr 4, 2016

Feature: Range selectors #373

Feature: Range selectors #373

Conversation

etpinard commented Mar 31, 2016

Example

Limitations

cldougl Apr 1, 2016

Choose a reason for hiding this comment

etpinard Apr 1, 2016

Choose a reason for hiding this comment

jackparmer Apr 3, 2016

Choose a reason for hiding this comment

mdtusz Apr 4, 2016

Choose a reason for hiding this comment

etpinard Apr 4, 2016

Choose a reason for hiding this comment