Slider component

src/components/slider/attributes.js

@@ -0,0 +1,221 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var fontAttrs = require('../../plots/font_attributes');
+var colorAttrs = require('../color/attributes');
+var extendFlat = require('../../lib/extend').extendFlat;
+var animationAttrs = require('../../plots/animation_attributes');
+
+var stepsAttrs = {
+    _isLinkedToArray: true,
+
+    method: {
+        valType: 'enumerated',
+        values: ['restyle', 'relayout', 'animate', 'update'],
+        dflt: 'restyle',
+        role: 'info',
+        description: [
+            'Sets the Plotly method to be called on click.'
+        ].join(' ')
+    },
+    args: {
+        valType: 'info_array',
+        role: 'info',
+        freeLength: true,
+        items: [
+            { valType: 'any' },
+            { valType: 'any' },
+            { valType: 'any' }
+        ],
+        description: [
+            'Sets the arguments values to be passed to the Plotly',
+            'method set in `method` on click.'
+        ].join(' ')
+    },
+    label: {
+        valType: 'string',
+        role: 'info',
+        dflt: '',
+        description: 'Sets the text label to appear on the slider'
+    }
+};
+
+module.exports = {
+    visible: {
+        valType: 'boolean',
+        role: 'info',
+        dflt: true,
+        description: [
+            'Determines whether or not the slider is visible.'
+        ].join(' ')
+    },
+
+    active: {
+        valType: 'number',
+        role: 'info',
+        min: -10,
+        dflt: 0,
+        description: [
+            'Determines which button (by index starting from 0) is',
+            'considered active.'
+        ].join(' ')
+    },
+
+    steps: stepsAttrs,
+
+    updateevent: {
+        valType: 'string',
+        arrayOk: true,
+        role: 'info',
+        description: [
+            'The name of the event to which this component subscribes',
+            'in order to trigger updates. When the event is received',
+            'the component will attempt to update the slider position',
+            'to reflect the value passed as the data property of the',
+            'event. The corresponding step\'s API method is assumed to',
+            'have been triggered externally and so is not triggered again',
+            'when the event is received. If an array is provided, multiple',
+            'events will be subscribed to for updates.'
+        ].join(' ')
+    },
+
+    updatevalue: {
+        valType: 'string',
+        arrayOk: true,
+        role: 'info',
+        description: [
+            'The property of the event data that is matched to a slider',
+            'value when an event of type `updateevent` is received. If',
+            'undefined, the data argument itself is used. If a string,',
+            'that property is used, and if a string with dots, e.g.',
+            '`item.0.label`, then `data[\'item\'][0][\'label\']` will',
+            'be used. If an array, it is matched to the respective',
+            'updateevent item or if there is no corresponding updatevalue',
+            'for a particular updateevent, it is interpreted as `undefined` and defaults to the data property itself.'
+        ].join(' ')
+    },
+
+    lenmode: {
+        valType: 'enumerated',
+        values: ['fraction', 'pixels'],
+        role: 'info',
+        dflt: 'fraction',
+        description: [
+            'Determines whether this color bar\'s length',
+            '(i.e. the measure in the color variation direction)',
+            'is set in units of plot *fraction* or in *pixels.',
+            'Use `len` to set the value.'
+        ].join(' ')
+    },
+    len: {
+        valType: 'number',
+        min: 0,
+        dflt: 1,
+        role: 'style',
+        description: [
+            'Sets the length of the color bar',
+            'This measure excludes the padding of both ends.',
+            'That is, the color bar length is this length minus the',
+            'padding on both ends.'
+        ].join(' ')
+    },
+    x: {
+        valType: 'number',
+        min: -2,
+        max: 3,
+        dflt: -0.05,
+        role: 'style',
+        description: 'Sets the x position (in normalized coordinates) of the slider.'
+    },
+    xpad: {
+        valType: 'number',
+        min: 0,
+        dflt: 10,
+        role: 'style',
+        description: 'Sets the amount of padding (in px) along the x direction'
+    },
+    ypad: {
+        valType: 'number',
+        min: 0,
+        dflt: 10,
+        role: 'style',
+        description: 'Sets the amount of padding (in px) along the x direction'
+    },
+    xanchor: {
+        valType: 'enumerated',
+        values: ['auto', 'left', 'center', 'right'],
+        dflt: 'left',
+        role: 'info',
+        description: [
+            'Sets the slider\'s horizontal position anchor.',
+            'This anchor binds the `x` position to the *left*, *center*',
+            'or *right* of the range selector.'
+        ].join(' ')
+    },
+    y: {
+        valType: 'number',
+        min: -2,
+        max: 3,
+        dflt: 1,
+        role: 'style',
+        description: 'Sets the y position (in normalized coordinates) of the slider.'
+    },
+    yanchor: {
+        valType: 'enumerated',
+        values: ['auto', 'top', 'middle', 'bottom'],
+        dflt: 'bottom',
+        role: 'info',
+        description: [
+            'Sets the slider\'s vertical position anchor',
+            'This anchor binds the `y` position to the *top*, *middle*',
+            'or *bottom* of the range selector.'
+        ].join(' ')
+    },
+
+    transition: {
+        duration: {
+            valType: 'number',
+            role: 'info',
+            min: 0,
+            dflt: 150,
+            description: 'Sets the duration of the slider transition'
+        },
+        easing: {
+            valType: 'enumerated',
+            values: animationAttrs.transition.easing.values,
+            role: 'info',
+            dflt: 'cubic-in-out',
+            description: 'Sets the easing function of the slider transition'
+        },
+    },
+
+    font: extendFlat({}, fontAttrs, {
+        description: 'Sets the font of the slider button text.'
+    }),
+
+    bgcolor: {
+        valType: 'color',
+        role: 'style',
+        description: 'Sets the background color of the slider buttons.'
+    },
+    bordercolor: {
+        valType: 'color',
+        dflt: colorAttrs.borderLine,
+        role: 'style',
+        description: 'Sets the color of the border enclosing the slider.'
+    },
+    borderwidth: {
+        valType: 'number',
+        min: 0,
+        dflt: 1,
+        role: 'style',
+        description: 'Sets the width (in px) of the border enclosing the slider.'
+    }
+};

src/components/slider/constants.js

@@ -0,0 +1,90 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+
+module.exports = {
+
+    // layout attribute names
+    name: 'sliders',
+    itemName: 'slider',
+
+    // class names
+    containerClassName: 'slider-container',
+    groupClassName: 'slider-group',
+    inputAreaClass: 'slider-input-area',
+    railRectClass: 'slider-rail-rect',
+    railTouchRectClass: 'slider-rail-touch-rect',
+    gripRectClass: 'slider-grip-rect',
+    tickRectClass: 'slider-tick-rect',
+    inputProxyClass: 'slider-input-proxy',
+    labelsClass: 'slider-labels',
+    labelGroupClass: 'slider-label-group',
+    labelClass: 'slider-label',
+
+    railHeight: 5,
+
+    // DOM attribute name in button group keeping track
+    // of active update menu
+    menuIndexAttrName: 'slider-active-index',
+
+    // id root pass to Plots.autoMargin
+    autoMarginIdRoot: 'slider-',
+
+    // min item width / height
+    minWidth: 30,
+    minHeight: 30,
+
+    // padding around item text
+    textPadX: 40,
+
+    // font size to height scale
+    fontSizeToHeight: 1.3,
+
+    // item rect radii
+    rx: 2,
+    ry: 2,
+
+    // item  text x offset off left edge
+    textOffsetX: 12,
+
+    // item  text y offset (w.r.t. middle)
+    textOffsetY: 3,
+
+    // arrow offset off right edge
+    arrowOffsetX: 4,
+
+    railRadius: 2,
+    railWidth: 5,
+    railBorder: 4,
+    railBorderColor: '#bec8d9',
+    railBgColor: '#ebedf0',
+
+    gripRadius: 10,
+    gripWidth: 20,
+    gripHeight: 20,
+    gripBorder: 20,
+    gripBorderWidth: 1,
+    gripBorderColor: '#bec8d9',
+    gripBgColor: '#ebedf0',
+    gripBgActiveColor: '#dbdde0',
+
+    // Padding in the direction perpendicular to the length of the rail:
+    // (which, at the moment is always vertical, but for the sake of the future...)
+    widthPadding: 10,
+
+    labelPadding: 4,
+    tickWidth: 1,
+    tickColor: '#333',
+    tickOffset: 25,
+    tickLength: 7,
+    minorTickColor: '#333',
+    minorTickLength: 4,
+};