lib/GenericOptions.js

/*!
 * @license
 * Minimalistic HTML5 Canvas Gauge implementation
 *
 * This code is subject to MIT license.
 *
 * Copyright (c) 2012 Mykhailo Stadnyk <[email protected]>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

/**
 * Describes rendering target element. Can be either string identifier of
 * the element or the element itself.
 *
 * @typedef {HTMLElement|string} RenderTarget
 */

/**
 * Highlight area definition.
 * It describes highlight area starting from value to value using
 * color. Color can be describes with hex, rgb or rgba value.
 *
 * @typedef {{ from: number, to: number, color: string}} Highlight
 */

/**
 * Shared generic gauges options
 *
 * @type {{renderTo: RenderTarget, width: number, height: number, minValue: number, maxValue: number, value: number, units: string|boolean, majorTicks: number[]|string[], minorTicks: number, strokeTicks: boolean, animatedValue: boolean, title: string|boolean, borders: boolean, valueInt: number, valueDec: number, majorTicksInt: number, majorTicksDec: number, animation: boolean, animationDuration: number, animationRule: string|AnimationRule, colorPlate: string, colorMajorTicks: string, colorMinorTicks: string, colorTitle: string, colorUnits: string, colorNumbers: string, colorNeedle: string, colorNeedleEnd: string, colorValueText: string, colorValueTextShadow: string, colorBorderShadow: string, colorBorderOuter: string, colorBorderOuterEnd: string, colorBorderMiddle: string, colorBorderMiddleEnd: string, colorBorderInner: string, colorBorderInnerEnd: string, colorValueBoxRect: string, colorValueBoxRectEnd: string, colorValueBoxBackground: string, colorValueBoxShadow: string, colorNeedleShadowUp: string, colorNeedleShadowDown: string, needle: boolean, needleShadow: boolean, needleType: string, needleStart: number, needleEnd: number, needleWidth: number, borderOuterWidth: number, borderMiddleWidth: number, borderInnerWidth: number, borderShadowWidth: number, valueBox: boolean, valueBoxStroke: number, valueText: string, valueTextShadow: boolean, valueBoxBorderRadius: number, highlights: Highlight[], fontNumbers: string, fontTitle: string, fontUnits: string, fontValue: string}} GenericOptions
 */
const GenericOptions = {
    // basic options
    renderTo: null,
    width: 0,
    height: 0,
    minValue: 0,
    maxValue: 100,
    value: 0,
    units: false,
    majorTicks: [0, 20, 40, 60, 80, 100],
    minorTicks: 10,
    strokeTicks: true,
    animatedValue: false,
    title: false,
    borders: true,

    // number formats
    valueInt: 3,
    valueDec: 2,
    majorTicksInt: 1,
    majorTicksDec: 0,

    // animations
    animation: true,
    animationDuration: 500,
    animationRule: 'cycle',

    // colors
    colorPlate: '#fff',
    colorMajorTicks: '#444',
    colorMinorTicks: '#666',
    colorTitle: '#888',
    colorUnits: '#888',
    colorNumbers: '#444',
    colorNeedle: 'rgba(240,128,128,1)',
    colorNeedleEnd: 'rgba(255,160,122,.9)',
    colorValueText: '#444',
    colorValueTextShadow: 'rgba(0,0,0,0.3)',
    colorBorderShadow: 'rgba(0,0,0,0.5)',
    colorBorderOuter: '#ddd',
    colorBorderOuterEnd: '#aaa',
    colorBorderMiddle: '#eee',
    colorBorderMiddleEnd: '#f0f0f0',
    colorBorderInner: '#fafafa',
    colorBorderInnerEnd: '#ccc',
    colorValueBoxRect: '#888',
    colorValueBoxRectEnd: '#666',
    colorValueBoxBackground: '#babab2',
    colorValueBoxShadow: 'rgba(0,0,0,1)',
    colorNeedleShadowUp: 'rgba(2,255,255,0.2)',
    colorNeedleShadowDown: 'rgba(188,143,143,0.45)',

    fontNumbers: 'Arial',
    fontTitle: 'Arial',
    fontUnits: 'Arial',
    fontValue: 'Arial',

    // needle
    needle: true,
    needleShadow: true,
    needleType: 'arrow',
    needleStart: 5,
    needleEnd: 85,
    needleWidth: 4,

    // borders
    borderOuterWidth: 3,
    borderMiddleWidth: 3,
    borderInnerWidth: 3,
    borderShadowWidth: 3,

    // value and highlights
    valueBox: true,
    valueBoxStroke: 5,
    valueText: '',
    valueTextShadow: true,
    valueBoxBorderRadius: 2.5,
    highlights: [
        { from: 20, to: 60, color: '#eee' },
        { from: 60, to: 80, color: '#ccc' },
        { from: 80, to: 100, color: '#999' }]
};

export default GenericOptions;

module.exports = GenericOptions;