8000 Merge pull request #770 from plotly/layout-updatemenus · plotly/plotly.js@94be168 · GitHub
[go: up one dir, main page]
Skip to content

Commit 94be168

Browse files
etpinardetpinard
authored
Merge pull request #770 from plotly/layout-updatemenus
Introducing layout update menus (aka dropdowns)
2 parents 95c8353 + 42d40ee commit 94be168

File tree

13 files changed

+1423
-3
lines changed
  • plot_api
  • plotly.js
  • plots
  • test

    • 13 files changed

    +1423
    -3
    lines changed

    ‎src/components/color/attributes.js

    Lines changed: 2 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -29,6 +29,8 @@ exports.lightLine = '#eee';
    2929

    3030
    exports.background = '#fff';
    3131

    32+
    exports.borderLine = '#BEC8D9';
    33+
    3234
    // with axis.color and Color.interp we aren't using lightLine
    3335
    // itself anymore, instead interpolating between axis.color
    3436
    // and the background color using tinycolor.mix. lightFraction

    ‎src/components/updatemenus/attributes.js

    Lines changed: 133 additions & 0 deletions
    < F438 tr class="diff-line-row">
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,133 @@
    1+
    /**
    2+
    * Copyright 2012-2016, Plotly, Inc.
    3+
    * All rights reserved.
    4+
    *
    5+
    * This source code is licensed under the MIT license found in the
    6+
    * LICENSE file in the root directory of this source tree.
    7+
    */
    8+
    9+
    'use strict';
    10+
    11+
    var fontAttrs = require('../../plots/font_attributes');
    12+
    var colorAttrs = require('../color/attributes');
    13+
    var extendFlat = require('../../lib/extend').extendFlat;
    14+
    15+
    var buttonsAttrs = {
    16+
    _isLinkedToArray: true,
    17+
    18+
    method: {
    19+
    valType: 'enumerated',
    20+
    values: ['restyle', 'relayout'],
    21+
    dflt: 'restyle',
    22+
    role: 'info',
    23+
    description: [
    24+
    'Sets the Plotly method to be called on click.'
    25+
    ].join(' ')
    26+
    },
    27+
    args: {
    28+
    valType: 'info_array',
    29+
    role: 'info',
    30+
    items: [
    31+
    { valType: 'any' },
    32+
    { valType: 'any' },
    33+
    { valType: 'any' }
    34+
    ],
    35+
    description: [
    36+
    'Sets the arguments values to be passed to the Plotly',
    37+
    'method set in `method` on click.'
    38+
    ].join(' ')
    39+
    },
    40+
    label: {
    41+
    valType: 'string',
    42+
    role: 'info',
    43+
    dflt: '',
    44+
    description: 'Sets the text label to appear on the button.'
    45+
    }
    46+
    };
    47+
    48+
    module.exports = {
    49+
    _isLinkedToArray: true,
    50+
    51+
    visible: {
    52+
    valType: 'boolean',
    53+
    role: 'info',
    54+
    description: [
    55+
    'Determines whether or not the update menu is visible.'
    56+
    ].join(' ')
    57+
    },
    58+
    59+
    active: {
    60+
    valType: 'integer',
    61+
    role: 'info',
    62+
    min: -1,
    63+
    dflt: 0,
    64+
    description: [
    65+
    'Determines which button (by index starting from 0) is',
    66+
    'considered active.'
    67+
    ].join(' ')
    68+
    },
    69+
    70+
    buttons: buttonsAttrs,
    71+
    72+
    x: {
    73+
    valType: 'number',
    74+
    min: -2,
    75+
    max: 3,
    76+
    dflt: -0.05,
    77+
    role: 'style',
    78+
    description: 'Sets the x position (in normalized coordinates) of the update menu.'
    79+
    },
    80+
    xanchor: {
    81+
    valType: 'enumerated',
    82+
    values: ['auto', 'left', 'center', 'right'],
    83+
    dflt: 'right',
    84+
    role: 'info',
    85+
    description: [
    86+
    'Sets the update menu\'s horizontal position anchor.',
    87+
    'This anchor binds the `x` position to the *left*, *center*',
    88+
    'or *right* of the range selector.'
    89+
    ].join(' ')
    90+
    },
    91+
    y: {
    92+
    valType: 'number',
    93+
    min: -2,
    94+
    max: 3,
    95+
    dflt: 1,
    96+
    role: 'style',
    97+
    description: 'Sets the y position (in normalized coordinates) of the update menu.'
    98+
    },
    99+
    yanchor: {
    100+
    valType: 'enumerated',
    101+
    values: ['auto', 'top', 'middle', 'bottom'],
    102+
    dflt: 'bottom',
    103+
    role: 'info',
    104+
    description: [
    105+
    'Sets the update menu\'s vertical position anchor',
    106+
    'This anchor binds the `y` position to the *top*, *middle*',
    107+
    'or *bottom* of the range selector.'
    108+
    ].join(' ')
    109+
    },
    110+
    111+
    font: extendFlat({}, fontAttrs, {
    112+
    description: 'Sets the font of the update menu button text.'
    113+
    }),
    114+
    115+
    bgcolor: {
    116+
    valType: 'color',
    117+
    role: 'style',
    118+
    description: 'Sets the background color of the update menu buttons.'
    119+
    },
    120+
    bordercolor: {
    121+
    valType: 'color',
    122+
    dflt: colorAttrs.borderLine,
    123+
    role: 'style',
    124+
    description: 'Sets the color of the border enclosing the update menu.'
    125+
    },
    126+
    borderwidth: {
    127+
    valType: 'number',
    128+
    min: 0,
    129+
    dflt: 1,
    130+
    role: 'style',
    131+
    description: 'Sets the width (in px) of the border enclosing the update menu.'
    132+
    }
    133+
    };

    ‎src/components/updatemenus/constants.js

    Lines changed: 73 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,73 @@
    1+
    /**
    2+
    * Copyright 2012-2016, Plotly, Inc.
    3+
    * All rights reserved.
    4+
    *
    5+
    * This source code is licensed under the MIT license found in the
    6+
    * LICENSE file in the root directory of this source tree.
    7+
    */
    8+
    9+
    10+
    'use strict';
    11+
    12+
    13+
    module.exports = {
    14+
    15+
    // layout attribute names
    16+
    name: 'updatemenus',
    17+
    itemName: 'updatemenu',
    18+
    19+
    // class names
    20+
    containerClassName: 'updatemenu-container',
    21+
    headerGroupClassName: 'updatemenu-header-group',
    22+
    headerClassName: 'updatemenu-header',
    23+
    headerArrowClassName: 'updatemenu-header-arrow',
    24+
    buttonGroupClassName: 'updatemenu-button-group',
    25+
    buttonClassName: 'updatemenu-button',
    26+
    itemRectClassName: 'updatemenu-item-rect',
    27+
    itemTextClassName: 'updatemenu-item-text',
    28+
    29+
    // DOM attribute name in button group keeping track
    30+
    // of active update menu
    31+
    menuIndexAttrName: 'updatemenu-active-index',
    32+
    33+
    // id root pass to Plots.autoMargin
    34+
    autoMarginIdRoot: 'updatemenu-',
    35+
    36+
    // options when 'active: -1'
    37+
    blankHeaderOpts: { label: ' ' },
    38+
    39+
    // min item width / height
    40+
    minWidth: 30,
    41+
    minHeight: 30,
    42+
    43+
    // padding around item text
    44+
    textPadX: 40,
    45+
    46+
    // font size to height scale
    47+
    fontSizeToHeight: 1.3,
    48+
    49+
    // item rect radii
    50+
    rx: 2,
    51+
    ry: 2,
    52+
    53+
    // item text x offset off left edge
    54+
    textOffsetX: 12,
    55+
    56+
    // item text y offset (w.r.t. middle)
    57+
    textOffsetY: 3,
    58+
    59+
    // arrow offset off right edge
    60+
    arrowOffsetX: 4,
    61+
    62+
    // gap between header and buttons
    63+
    gapButtonHeader: 5,
    64+
    65+
    // gap between between buttons
    66+
    gapButton: 2,
    67+
    68+
    // color given to active buttons
    69+
    activeColor: '#F4FAFF',
    70+
    71+
    // color given to hovered buttons
    72+
    hoverColor: '#F4FAFF'
    73+
    };

    ‎src/components/updatemenus/defaults.js

    Lines changed: 93 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,93 @@
    1+
    /**
    2+
    * Copyright 2012-2016, Plotly, Inc.
    3+
    * All rights reserved.
    4+
    *
    5+
    * This source code is licensed under the MIT license found in the
    6+
    * LICENSE file in the root directory of this source tree.
    7+
    */
    8+
    9+
    'use strict';
    10+
    11+
    var Lib = require('../../lib');
    12+
    13+
    var attributes = require('./attributes');
    14+
    var contants = require('./constants');
    15+
    16+
    var name = contants.name;
    17+
    var buttonAttrs = attributes.buttons;
    18+
    19+
    20+
    module.exports = function updateMenusDefaults(layoutIn, layoutOut) {
    21+
    var contIn = Array.isArray(layoutIn[name]) ? layoutIn[name] : [],
    22+
    contOut = layoutOut[name] = [];
    23+
    24+
    for(var i = 0; i < contIn.length; i++) {
    25+
    var menuIn = contIn[i] || {},
    26+
    menuOut = {};
    27+
    28+
    menuDefaults(menuIn, menuOut, layoutOut);
    29+
    30+
    // used on button click to update the 'active' field
    31+
    menuOut._input = menuIn;
    32+
    33+
    // used to determine object constancy
    34+
    menuOut._index = i;
    35+
    36+
    contOut.push(menuOut);
    37+
    }
    38+
    };
    39+
    40+
    function menuDefaults(menuIn, menuOut, layoutOut) {
    41+
    42+
    function coerce(attr, dflt) {
    43+
    return Lib.coerce(menuIn, menuOut, attributes, attr, dflt);
    44+
    }
    45+
    46+
    var buttons = buttonsDefaults(menuIn, menuOut);
    47+
    48+
    var visible = coerce('visible', buttons.length > 0);
    49+
    if(!visible) return;
    50+
    51+
    coerce('active');
    52+
    53+
    coerce('x');
    54+
    coerce('y');
    55+
    Lib.noneOrAll(menuIn, menuOut, ['x', 'y']);
    56+
    57+
    coerce('xanchor');
    58+
    coerce('yanchor');
    59+
    60+
    Lib.coerceFont(coerce, 'font', layoutOut.font);
    61+
    62+
    coerce('bgcolor', layoutOut.paper_bgcolor);
    63+
    coerce('bordercolor');
    64+
    coerce('borderwidth');
    65+
    }
    66+
    67+
    function buttonsDefaults(menuIn, menuOut) {
    68+
    var buttonsIn = menuIn.buttons || [],
    69+
    buttonsOut = menuOut.buttons = [];
    70+
    71+
    var buttonIn, buttonOut;
    72+
    73+
    function coerce(attr, dflt) {
    74+
    < A41E span class=pl-k>return Lib.coerce(buttonIn, buttonOut, buttonAttrs, attr, dflt);
    75+
    }
    76+
    77+
    for(var i = 0; i < buttonsIn.length; i++) {
    78+
    buttonIn = buttonsIn[i];
    79+
    buttonOut = {};
    80+
    81+
    if(!Lib.isPlainObject(buttonIn) || !Array.isArray(buttonIn.args)) {
    82+
    continue;
    83+
    }
    84+
    85+
    coerce('method');
    86+
    coerce('args');
    87+
    coerce('label');
    88+
    89+
    buttonsOut.push(buttonOut);
    90+
    }
    91+
    92+
    return buttonsOut;
    93+
    }

    0 commit comments

    Comments
     (0)
    0