@domoinc/multiline-chart
Version:
MultiLineChart - Domo Widget
1,380 lines (1,299 loc) • 51.6 kB
JavaScript
/*! Copyright 2016 Domo Inc. */
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("lodash"));
else if(typeof define === 'function' && define.amd)
define(["lodash"], factory);
else if(typeof exports === 'object')
exports["theme2"] = factory(require("lodash"));
else
root["da"] = root["da"] || {}, root["da"]["theme2"] = factory(root["_"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/dist/";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
var _ = __webpack_require__(1);
/*----------------------------------------------------------------------------------
----------------------------------------------------------------------------------*/
// DA THEME
//
// Organization:
// * Private Functions and Definitions
// * Public Functions and Definitions
// * Config Theme Elements Constructors
/*----------------------------------------------------------------------------------
----------------------------------------------------------------------------------*/
var daTheme2 = (function () {
var theme = {};
/*----------------------------------------------------------------------------------
----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------
// PRIVATE FUNCTION and DEFINITIONS
----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------
----------------------------------------------------------------------------------*/
var largeIndexMap = {
0: [],
1: [[0, 3]],
2: [[0, 3], [1, 1]],
3: [[0, 3], [1, 1], [2, 3]],
4: [[0, 3], [1, 1], [2, 2], [2, 4]],
5: [[0, 3], [1, 2], [1, 4], [2, 2], [2, 4]],
6: [[0, 2], [0, 4], [1, 2], [1, 4], [2, 2], [2, 4]],
7: [[0, 2], [0, 4], [1, 2], [1, 4], [2, 1], [2, 4], [2, 3]],
8: [[0, 2], [0, 4], [1, 1], [1, 4], [1, 3], [2, 1], [2, 4], [2, 3]],
9: [[0, 1], [0, 4], [0, 3], [1, 1], [1, 4], [1, 3], [2, 1], [2, 4], [2, 3]],
10: [[0, 1], [0, 4], [0, 3], [1, 1], [1, 4], [1, 3], [2, 0], [2, 3], [2, 1], [2, 4]],
11: [[0, 1], [0, 4], [0, 3], [1, 0], [1, 3], [1, 1], [1, 4], [2, 0], [2, 3], [2, 1], [2, 4]],
12: [[0, 0], [0, 3], [0, 1], [0, 4], [1, 0], [1, 3], [1, 1], [1, 4], [2, 0], [2, 3], [2, 1], [2, 4]],
13: [[0, 0], [0, 3], [0, 1], [0, 4], [1, 0], [1, 3], [1, 1], [1, 4], [2, 0], [2, 3], [2, 1], [2, 4], [2, 2]],
14: [[0, 0], [0, 3], [0, 1], [0, 4], [1, 0], [1, 3], [1, 1], [1, 4], [1, 2], [2, 0], [2, 3], [2, 1], [2, 4], [2, 2]],
15: [[0, 0], [0, 3], [0, 1], [0, 4], [0, 2], [1, 0], [1, 3], [1, 1], [1, 4], [1, 2], [2, 0], [2, 3], [2, 1], [2, 4], [2, 2]],
16: [[0, 0], [0, 3], [0, 1], [0, 4], [0, 2], [1, 0], [1, 3], [1, 1], [1, 4], [1, 2], [2, 0], [2, 3], [2, 1], [2, 4], [2, 2], [2, 5]],
17: [[0, 0], [0, 3], [0, 1], [0, 4], [0, 2], [1, 0], [1, 3], [1, 1], [1, 4], [1, 2], [1, 5], [2, 0], [2, 3], [2, 1], [2, 4], [2, 2], [2, 5]],
18: [[0, 0], [0, 3], [0, 1], [0, 4], [0, 2], [0, 5], [1, 0], [1, 3], [1, 1], [1, 4], [1, 2], [1, 5], [2, 0], [2, 3], [2, 1], [2, 4], [2, 2], [2, 5]]
};
//**********************************************************************************
//**********************************************************************************
function getPrimaryColorForSeriesCountFrom2DThemeColors(seriesCount, primaryColors) {
var seriesColors = primaryColors;
if (seriesColors === null || seriesColors === undefined || seriesColors.length < 1) return null;
var colors = [];
if (seriesCount <= 18) {
var colorIndexes = largeIndexMap[seriesCount];
var i = 0;
for (; i < colorIndexes.length; i++) {
colors.push(seriesColors[colorIndexes[i][0]][colorIndexes[i][1]])
}
}
else //More than 18
{
var hueIndex;
var tmpShadeIndex = 0;
var shadeOffset = 3;
for (hueIndex = 0; hueIndex < seriesColors.length && colors.length < seriesCount; hueIndex++) {
tmpShadeIndex = 0;
for (; tmpShadeIndex + shadeOffset < seriesColors[hueIndex].length && colors.length < seriesCount; tmpShadeIndex++) {
colors.push(seriesColors[hueIndex][tmpShadeIndex]);
if (colors.length < seriesCount) {
colors.push(seriesColors[hueIndex][tmpShadeIndex + shadeOffset]);
}
}
}
}
return colors;
}
//**********************************************************************************
//**********************************************************************************
function getSecondaryColorForSeriesCountFrom2DThemeColors(seriesCount, primaryColors) {
var seriesColors = primaryColors;
if (seriesColors === null || seriesColors === undefined || seriesColors.length < 1) return null;
var colors = [];
var maxShadeIndex;
var secondShadeOffset;
if (seriesCount <= 18) {
var i = 0;
var colorIndexes = largeIndexMap[seriesCount];
maxShadeIndex = seriesColors[0].length - 1;
secondShadeOffset = maxShadeIndex - 1;
for (; i < colorIndexes.length; i++) {
colors.push(seriesColors[colorIndexes[i][0]][(colorIndexes[i][1] + secondShadeOffset > maxShadeIndex ? 0 : colorIndexes[i][1] + secondShadeOffset)])
}
}
else //More than 18
{
var tmpShadeIndex = 0;
var shadeOffset = 3;
maxShadeIndex = seriesColors[0].length - 1; // ASSUMING that there are an equal # of shades in each Hue.
secondShadeOffset = maxShadeIndex - 1;
for (var hueIndex = 0; hueIndex < seriesColors.length && colors.length < seriesCount; hueIndex++) {
tmpShadeIndex = 0;
for (; tmpShadeIndex + shadeOffset < seriesColors[hueIndex].length && colors.length < seriesCount; tmpShadeIndex++) {
colors.push(seriesColors[hueIndex][(tmpShadeIndex + secondShadeOffset > maxShadeIndex ? 0 : tmpShadeIndex + secondShadeOffset)]);
if (colors.length < seriesCount) {
colors.push(seriesColors[hueIndex][(tmpShadeIndex + shadeOffset + secondShadeOffset > maxShadeIndex ? 0 : tmpShadeIndex + shadeOffset + secondShadeOffset)]);
}
}
}
}
return colors;
}
//**********************************************************************************
//**********************************************************************************
function primarySeriesColorsIs2D(primaryColors) {
return primaryColors !== undefined && primaryColors.length > 0 && typeof primaryColors[0] === 'object';
}
/*----------------------------------------------------------------------------------
----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------
// PUBLIC FUNCTIONS and DEFINITIONS
----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------
----------------------------------------------------------------------------------*/
theme.domoColorsKey = {
blues: 0, greens: 1, oranges: 2,
purples: 3, pinks: 4, teals: 5, reds: 6
};
theme.domoColors = [
//Shade 1, Shade 2, Shade 3, Shade 4, Shade 5, Shade 6
['#D9EBFD', '#B7DAF5', '#90c4e4', '#73B0D7', '#4E8CBA', '#31689B'],//Blues
['#DDF4BA', '#BBE491', '#A0D771', '#80C25D', '#559E38', '#387B26'],//Greens
['#FDECAD', '#FCCF84', '#FBAD56', '#FB8D34', '#E45621', '#A43724'],//Oranges
['#F3E4FE', '#DDC8EF', '#C5ACDE', '#B391CA', '#8F6DC0', '#7940A1'],//Purples
['#FCD7E6', '#FBB6DD', '#F395CD', '#EE76BF', '#CF51AC', '#A62A92'],//Pink
['#D8F4DE', '#ABE4CA', '#8DD5BE', '#68BEA8', '#46998A', '#227872'],//Teals
['#FDDDDD', '#FCBCB7', '#FD9A93', '#FD7F76', '#e45850', '#c92e25'] //Reds
];
/*----------------------------------------------------------------------------------
// getPrimaryColorsForNumberOfSeries
----------------------------------------------------------------------------------*/
theme.getPrimaryColorsForNumberOfSeries = function (number, primaryColors) {
if (primarySeriesColorsIs2D(primaryColors)) {
return getPrimaryColorForSeriesCountFrom2DThemeColors(number, primaryColors);
}
else {
return primaryColors.slice(0, number);
}
};
/*----------------------------------------------------------------------------------
//getSecondaryColorsForNumberOfSeries
----------------------------------------------------------------------------------*/
theme.getSecondaryColorsForNumberOfSeries = function (number, primaryColors, secondaryColors) {
if (primarySeriesColorsIs2D(primaryColors)) {
return getSecondaryColorForSeriesCountFrom2DThemeColors(number, primaryColors);
}
else {
return secondaryColors.slice(0, number);
}
};
/*----------------------------------------------------------------------------------
// Gets a set of colors
// These colors are pulled from the given colorSet in a staggared repeating pattern.
// (1) 2 3 (4) 5 6
// 1 (2) 3 4 (5) 6
// 1 2 (3) 4 5 (6)
//(1) 2 3 (4) 5 6
----------------------------------------------------------------------------------*/
theme.getNumStaggeredColors = function (num, colorSet) {
var colors = [];
var i = 0;
var half = Math.floor(colorSet.length / 2.0);
while (colors.length < num) {
colors.push(colorSet[i%colorSet.length]);
colors.push(colorSet[(i+half)%colorSet.length]);
i++;
}
return colors;
};
/*----------------------------------------------------------------------------------
// Update an ordinal scale while preserving the previous domain and range
// e.g. When updating a color scale, this can add new items to the domain, while
// ensuring that previous color mappings are not changed
----------------------------------------------------------------------------------*/
function updateOrdinalScale(scale, newDomain, newRange) {
var domain;
var range;
var primaryColors;
domain = _.uniq(scale.domain().concat(newDomain));
primaryColors = theme.getPrimaryColorsForNumberOfSeries(domain.length, newRange);
range = _.uniq(scale.range().concat(primaryColors)).slice(0, domain.length);
return scale.domain(domain)
.range(range);
}
/*----------------------------------------------------------------------------------
// Given a primary color scale with domain and range set, set the domain and range
// of the secondary color scale with appropriate complementary colors
----------------------------------------------------------------------------------*/
function syncSecondaryColorScale(primaryScale, secondaryScale, primaryColors, secondaryColors) {
var primaryRange = primaryScale.range();
var primaryDomain = primaryScale.domain();
var range = primaryRange.map(function(color){
return secondaryColors[primaryColors.indexOf(color)];
});
secondaryScale.domain(primaryDomain)
.range(range);
}
/*----------------------------------------------------------------------------------
// Update a color scale with the given domain and range of colors. Ensures that
// previously defined color mappings are preserved
// @param primaryScale - A D3 ordinal scale for primary colors
// @param domain - An array of values to be merged into the current scale's domain
// @param colors1 - An array of primary colors. Can be a simple array of hex values, or a 2D array of colors using Domo's color sequence rules
----------------------------------------------------------------------------------*/
theme.updatePrimaryColorScale = function(primaryScale, domain, colors1) {
updateOrdinalScale(primaryScale, domain, colors1);
}
/*----------------------------------------------------------------------------------
// Update both the primary and secondary color scales simultaneously
// @param primaryScale - A D3 ordinal scale for primary colors
// @param secondaryScale - A D3 ordinal scale for secondary colors
// @param domain - An array of values to be merged into the current scale domain
// @param colors1 - An array of primary colors. Can be a simple array of hex values,
// or a 2D array of colors using domo's color sequence rules
// @param colors2 - An array of secondary, complementary colors. Can be a simple array
// of hex values, or a 2D array of colors using domo's color
// sequence rules
----------------------------------------------------------------------------------*/
theme.updateBothColorScales = function(primaryScale, secondaryScale, domain, colors1, colors2) {
var primaryColors = theme.getPrimaryColorsForNumberOfSeries(domain.length, colors1);
var length = _.flatten(colors1).length;
var allPrimaryColors = theme.getPrimaryColorsForNumberOfSeries(length, colors1);
var allSecondaryColors = theme.getSecondaryColorsForNumberOfSeries(length, colors1, colors2);
updateOrdinalScale(primaryScale, domain, colors1);
syncSecondaryColorScale(primaryScale, secondaryScale, allPrimaryColors, allSecondaryColors);
}
/*----------------------------------------------------------------------------------
// Reset the domain and range of any scale
// Use this when you do not need a scale to keep constancy
----------------------------------------------------------------------------------*/
theme.resetScale = function(scale) {
return scale.domain([]).range([]);
}
/*----------------------------------------------------------------------------------
----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------
// THEME COMPONENTS
----------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------
----------------------------------------------------------------------------------*/
theme.tempComponents = {
colorTheme: function (options) {
return _.assign({
theme: 'dontUse',
name: 'Color Theme',
description: '',
category: 'General',
value: {name:'Blue', value:theme.domoColors[theme.domoColorsKey.blues]},
type: 'select',
options: [
{name:'Blue', value:theme.domoColors[theme.domoColorsKey.blues]},
{name:'Green', value:theme.domoColors[theme.domoColorsKey.greens]},
{name:'Orange', value:theme.domoColors[theme.domoColorsKey.oranges]},
{name:'Purple', value:theme.domoColors[theme.domoColorsKey.purples]},
{name:'Pink', value:theme.domoColors[theme.domoColorsKey.pinks]},
{name:'Teal', value:theme.domoColors[theme.domoColorsKey.teals]},
{name:'Red', value:theme.domoColors[theme.domoColorsKey.reds]}
]
}, options);
}
};
/*--------------------------------------------------------------------------------------
// THEME CONFIG ELEMENT CONSTRUCTOR FUNCTIONS
//
// Functions that will return the value of each theme config element.
//
// Example:
// _Chart.config = {barColor: da.theme2.themeElements.fillOne()}
---------------------------------------------------------------------------------------*/
theme.themeElements = {
//----------------------------------------------------------------------------------
// General
//----------------------------------------------------------------------------------
background: function (options) {
return _.assign({
theme: 'background',
name: 'Background Color',
description: 'Color for the background',
category: 'General',
value: '#FFFFFF', //white
type: 'color'
}, options);
},
//----------------------------------------------------------------------------------
// Fills
//----------------------------------------------------------------------------------
// Note: if two of the same type of theme elements are used in one widget, change the names to '{{Element}} + {{Theme Name}}'
// i.g. primaryFill & secondaryFill: 'Fill Color' & 'Fill Color' -> 'Bar Fill Color' & 'Circle Fill Color'
// i.g. goodFill & goodFill2: 'Good Fill Color' & 'Good Fill Color' -> 'Bar Good Fill Color' & 'Circle Good Fill Color'
// i.g. badFill & badFill2: 'Bad Fill Color' & 'Bad Fill Color' -> 'Bar Bad Fill Color' & 'Circle Bad Fill Color'
// The description should generally stay unchanged
primaryFill: function (options) {
return _.assign({
theme: 'primaryFill',
name: 'Fill Color',
description: 'Fill color for each element',
category: 'General',
value: '#73B0D7', //blue
type: 'color'
}, options);
},
secondaryFill: function (options) {
return _.assign({
theme: 'secondaryFill',
name: 'Fill Color',
description: 'Fill color for each element',
category: 'General',
value: '#DAEAF8', //light blue
type: 'color'
}, options);
},
goodFill: function (options) {
return _.assign({
theme: 'goodFill',
name: 'Good Fill Color',
description: 'Fill color that indicates something is good', //use for small elements
category: 'General',
value: '#80C25D', //green
type: 'color'
}, options);
},
goodFill2: function (options) {
return _.assign({
theme: 'goodFill2',
name: 'Good Fill Color',
description: 'Fill color that indicates something is good', //use for large elements
category: 'General',
value: '#91D0BC', //teal
type: 'color'
}, options);
},
badFill: function (options) {
return _.assign({
theme: 'badFill',
name: 'Bad Fill Color',
description: 'Fill color that indicates something is bad', //use for small elements
category: 'General',
value: '#E4584F', //red
type: 'color'
}, options);
},
badFill2: function (options) {
return _.assign({
theme: 'badFill2',
name: 'Bad Fill Color',
description: 'Fill color that indicates something is bad', //use for large elements
category: 'General',
value: '#F27E79', //pinkish red
type: 'color'
}, options);
},
neutralFill: function (options) {
return _.assign({
theme: 'neutralFill',
name: 'Neutral Fill Color',
description: 'Fill color that indicates something is neutral',
category: 'General',
value: '#E5E5E5', //light gray
type: 'color'
}, options);
},
notFilledColor: function (options) {
return _.assign({
theme: 'notFilledColor',
name: 'Empty Fill Color',
description: 'Fill color that indicates something is empty', // i.g. gauges
category: 'General',
value: '#E4E5E5', //light gray
type: 'color'
}, options);
},
noDataColor: function (options) {
return _.assign({
theme: 'noDataColor',
name: 'No Data Fill Color',
description: 'Fill color that indicates something has no data',
category: 'General',
value: '#D9D9D9',
type: 'color'
}, options);
},
washoutColor: function (options) {
return _.assign({
theme: 'washoutColor',
name: 'Washout Fill Color',
description: 'Fill color that indicates something is not highlighted',
category: 'General',
value: '#E4E5E5',
type: 'color'
}, options);
},
//----------------------------------------------------------------------------------
// Strokes
//----------------------------------------------------------------------------------
// Note: if two of the same type of theme elements are used in one widget, change the names to '{{Element}} + {{Theme Name}}'
// i.g. primaryStroke + secondaryStroke: 'Border Color' & 'Border Color' -> 'Bar Border Color' & 'Circle Border Color'
// i.g. primaryStrokeWidth + secondaryStrokeWidth: 'Border Width' & 'Border Width' -> 'Bar Border Width' & 'Circle Border Width'
// The description should generally stay unchanged
primaryStroke: function (options) {
return _.assign({
theme: 'primaryStroke',
name: 'Border Color',
description: 'Border color for each element',
category: 'General',
value: '#73B0D7', //blue
type: 'color'
}, options);
},
secondaryStroke: function (options) {
return _.assign({
theme: 'secondaryStroke',
name: 'Border Color',
description: 'Border color for each element',
category: 'General',
value: '#DAEAF8', //light blue
type: 'color'
}, options);
},
goodStroke: function (options) {
return _.assign({
theme: 'goodStroke',
name: 'Good Border Color',
description: 'Border color that indicates something is good',
category: 'General',
value: '#559E38', //dark green
type: 'color'
}, options);
},
badStroke: function (options) {
return _.assign({
theme: 'badStroke',
name: 'Bad Border Color',
description: 'Border color that indicates something is bad',
category: 'General',
value: '#C92E25', //dark red
type: 'color'
}, options);
},
neutralStroke: function (options) {
return _.assign({
theme: 'neutralStroke',
name: 'Neutral Border Color',
description: 'Border color that indicates something is neutral',
category: 'General',
value: '#D7D9DA', //gray
type: 'color'
}, options);
},
primaryStrokeWidth: function (options) {
return _.assign({
theme: 'primaryStrokeWidth',
name: 'Border Width',
description: 'Width of the element\'s border',
category: 'General',
value: 1,
type: 'number',
units: 'px'
}, options);
},
secondaryStrokeWidth: function (options) {
return _.assign({
theme: 'secondaryStrokeWidth',
name: 'Border Width',
description: 'Width of the element\'s border',
category: 'General',
value: 2,
type: 'number',
units: 'px'
}, options);
},
separatorColor: function (options) {
return _.assign({
theme: 'separatorColor',
name: 'Separator Color',
description: 'Border color for separating elements', //i.g. pie, donut, grouped bar chart
category: 'General',
value: '#FFFFFF',
type: 'color'
}, options);
},
separatorStrokeWidth: function (options) {
return _.assign({
theme: 'separatorStrokeWidth',
name: 'Separator Width',
description: 'Border width for separating elements',
category: 'General',
value: 1,
type: 'number',
units: 'px'
}, options);
},
/*----------------------------------------------------------------------------------
// ChartSeriesColors
----------------------------------------------------------------------------------*/
primaryColorSeries: function (options) {
return _.assign({
theme: 'primaryColorSeries',
name: 'Primary Color Series ',
description: 'Primary colors used to represent series data',
category: 'Series Colors',
value: theme.domoColors,
type: 'colorArray'
}, options);
},
secondaryColorSeries: function (options) {
return _.assign({
theme: 'secondaryColorSeries',
name: 'Secondary Color Series',
description: 'Secondary colors used to represent series data',
category: 'Series Colors',
value: ['#4E8CBA', '#D9EBFD', '#31689B', '#D9EBFD', '#D9EBFD', '#559E38', '#DDF4BA', '#387B26', '#DDF4BA', '#DDF4BA', '#E45621', '#FDECAD', '#A43724', '#FDECAD', '#FDECAD', '#FDECAD'],
type: 'colorArray'
}, options);
},
divergentColorSeries: function (options) {
return _.assign({
theme: 'divergentColorSeries',
name: 'Divergent Color Series',
description: '',
category: 'Series Colors',
value: ['#336088', '#71A7C7', '#B7D7E6', '#D8EBF3', '#FFFFFF', '#F7DAD7', '#EFB7B1', '#E37872', '#B53230'],
type: 'colorArray'
}, options);
},
valueColorSeries: function (options) {
return _.assign({
theme: 'valueColorSeries',
name: 'Value Color Series',
description: '',
category: 'Series Colors',
value: ["#FDECAD", "#FCCF84", "#FBAD56", "#FB8D34", "#E45621", "#A43724"],
type: 'colorArray'
}, options);
},
/*----------------------------------------------------------------------------------
// Tooltip
----------------------------------------------------------------------------------*/
tooltipBackground: function (options) {
return _.assign({
theme: 'tooltipBackground',
name: 'Tooltip Color',
description: 'Background color for the tooltip',
category: 'Tooltip',
value: '#555555', //dark gray
type: 'color'
}, options);
},
tooltipFontFamily: function (options) {
return _.assign({
theme: 'tooltipFontFamily',
name: 'Tooltip Font',
description: 'Font type for the tooltip text',
category: 'Text',
value: 'Open Sans',
type: 'string'
}, options);
},
tooltipFontColor: function (options) {
return _.assign({
theme: 'tooltipFontColor',
name: 'Tooltip Font Color',
description: 'Font color for the tooltip text',
category: 'Tooltip',
value: '#FFFFFF', //white
type: 'color'
}, options);
},
tooltipFontSize: function (options) {
return _.assign({
theme: 'tooltipFontSize',
name: 'Tooltip Font Size',
description: 'Font size for the tooltip text',
category: 'Text',
value: 12,
type: 'number',
units: 'px'
}, options);
},
tooltipFontWeight: function (options) {
return _.assign({
theme: 'tooltipFontWeight',
name: 'Tooltip Font Weight',
description: 'Greater values correspond to increased font boldness (some fonts do not support every value)',
category: 'Text',
value: {name:'300 - Light' , value:300},
type: 'select',
options: [
{name: '100', value:100},
{name: '200', value:200},
{name: '300 - Light' , value:300},
{name: '400 - Regular', value:400},
{name: '500', value:500},
{name: '600', value:600},
{name: '700 - Bold' , value:700},
{name: '800', value:800},
{name: '900', value:900}
]
}, options);
},
tooltipLetterSpacing: function (options) {
return _.assign({
theme: 'tooltipLetterSpacing',
name: 'Tooltip Letter Spacing',
description: 'Space between characters in the text',
category: 'Text',
value: 0,
type: 'number',
units: 'px'
}, options);
},
/*----------------------------------------------------------------------------------
// Axes
----------------------------------------------------------------------------------*/
axesLineColor: function (options) {
return _.assign({
theme: 'axesLineColor',
name: 'Axes Line Color',
description: 'Line color for the axes',
category: 'General',
value: '#E3E3E3',
type: 'color',
});
},
axesFontFamily: function (options) {
return _.assign({
theme: 'axesFontFamily',
name: 'Axes Font',
description: 'Font type for the axes labels',
category: 'Text',
value: 'Open Sans',
type: 'string'
}, options);
},
axesFontColor: function (options) {
return _.assign({
theme: 'axesFontColor',
name: 'Axes Font Color',
description: 'Font color for the axes labels',
category: 'Text',
value: '#8A8D8E', //gray
type: 'color'
}, options);
},
axesFontSize: function (options) {
return _.assign({
theme: 'axesFontSize',
name: 'Axes Font Size',
description: 'Font size for the axes labels',
category: 'Text',
value: 11,
type: 'number',
units: 'px'
}, options);
},
axesFontWeight: function (options) {
return _.assign({
theme: 'axesFontWeight',
name: 'Axes Font Weight',
description: 'Greater values correspond to increased font boldness (some fonts do not support every value)',
category: 'Text',
value: {name:'300 - Light' , value:300},
type: 'select',
options: [
{name: '100', value:100},
{name: '200', value:200},
{name: '300 - Light' , value:300},
{name: '400 - Regular', value:400},
{name: '500', value:500},
{name: '600', value:600},
{name: '700 - Bold' , value:700},
{name: '800', value:800},
{name: '900', value:900}
]
}, options);
},
axesLetterSpacing: function (options) {
return _.assign({
theme: 'axesLetterSpacing',
name: 'Axes Letter Spacing',
description: 'Space between characters in the text',
category: 'Text',
value: 0,
type: 'number',
units: 'px'
}, options);
},
/*----------------------------------------------------------------------------------
// Legend
----------------------------------------------------------------------------------*/
legendLineColor: function (options) {
return _.assign({
theme: 'legendLineColor',
name: 'Legend Line Color',
description: 'Dividing line color for the legend',
category: 'General',
value: '#E3E3E3',
type: 'color',
}, options);
},
legendWashoutColor: function (options) {
return _.assign({
theme: 'legendWashoutColor',
name: 'Legend Washout Fill Color',
description: 'Fill color that indicates something is not highlighted',
category: 'General',
value: '#E4E5E5',
type: 'color',
}, options);
},
legendFontFamily: function (options) {
return _.assign({
theme: 'legendFontFamily',
name: 'Legend Font',
description: 'Font type for the legend labels',
category: 'Text',
value: 'Open Sans',
type: 'string'
}, options);
},
legendFontColor: function (options) {
return _.assign({
theme: 'legendFontColor',
name: 'Legend Font Color',
description: 'Font color for the legend labels',
category: 'Text',
value: '#8A8D8E', //gray
type: 'color'
}, options);
},
legendFontSize: function (options) {
return _.assign({
theme: 'legendFontSize',
name: 'Legend Font Size',
description: 'Font size for the legend labels',
category: 'Text',
value: 11,
type: 'number',
units: 'px'
}, options);
},
legendFontWeight: function (options) {
return _.assign({
theme: 'legendFontWeight',
name: 'Legend Font Weight',
description: 'Greater values correspond to increased font boldness (some fonts do not support every value)',
category: 'Text',
value: {name:'300 - Light' , value:300},
type: 'select',
options: [
{name: '100', value:100},
{name: '200', value:200},
{name: '300 - Light' , value:300},
{name: '400 - Regular', value:400},
{name: '500', value:500},
{name: '600', value:600},
{name: '700 - Bold' , value:700},
{name: '800', value:800},
{name: '900', value:900}
]
}, options);
},
legendLetterSpacing: function (options) {
return _.assign({
theme: 'legendLetterSpacing',
name: 'Legend Letter Spacing',
description: 'Space between characters in the text',
category: 'Text',
value: 0,
type: 'number',
units: 'px'
}, options);
},
/*----------------------------------------------------------------------------------
// Text
---------------------------------------------------------------------------------*/
// DEPRECATED
fontAccentColor: function (options) {
return _.assign({
theme: 'fontAccentColor',
name: 'Font Accent Color',
description: '',
category: 'Text',
value: '#f68c35',
type: 'color'
}, options);
},
// ------- h1 Text -------
h1FontFamily: function (options) {
return _.assign({
theme: 'h1FontFamily',
name: 'Font',
description: 'Font type for the text',
category: 'Text',
value: 'Open Sans',
type: 'string'
}, options);
},
h1FontColor: function (options) {
return _.assign({
theme: 'h1FontColor',
name: 'Font Color',
description: 'Font color for the text',
category: 'Text',
value: '#333333', //grayish black
type: 'color'
}, options);
},
h1FontSize: function (options) {
return _.assign({
theme: 'h1FontSize',
name: 'Font Size',
description: 'Font size for the text',
category: 'Text',
value: 36,
type: 'number',
units: 'px'
}, options);
},
h1FontWeight: function (options) {
return _.assign({
theme: 'h1FontWeight',
name: 'Font Weight',
description: 'Greater values correspond to increased font boldness (some fonts do not support every value)',
category: 'Text',
value: {name: '300 - Light', value: 300},
type: 'select',
options: [
{name: '100', value: 100},
{name: '200', value: 200},
{name: '300 - Light', value: 300},
{name: '400 - Regular', value: 400},
{name: '500', value: 500},
{name: '600', value: 600},
{name: '700 - Bold', value: 700},
{name: '800', value: 800},
{name: '900', value: 900}
]
}, options);
},
h1LetterSpacing: function (options) {
return _.assign({
theme: 'h1LetterSpacing',
name: 'Letter Spacing',
description: 'Space between characters in the text',
category: 'Text',
value: 0,
type: 'number',
units: 'px'
}, options);
},
h1LineHeight: function (options) {
return _.assign({
theme: 'h1LineHeight',
name: 'Line Spacing',
description: 'Space between lines in a paragraph of text',
category: 'Text',
value: 48,
type: 'number',
units: 'px'
}, options);
},
// ------- h2 Text -------
h2FontFamily: function (options) {
return _.assign({
theme: 'h2FontFamily',
name: 'Font',
description: 'Font type for the text',
category: 'Text',
value: 'Open Sans',
type: 'string'
}, options);
},
h2FontColor: function (options) {
return _.assign({
theme: 'h2FontColor',
name: 'Font Color',
description: 'Font color for the text',
category: 'Text',
value: '#333333', //grayish black
type: 'color'
}, options);
},
h2FontSize: function (options) {
return _.assign({
theme: 'h2FontSize',
name: 'Font Size',
description: 'Font size for the text',
category: 'Text',
value: 30,
type: 'number',
units: 'px'
}, options);
},
h2FontWeight: function (options) {
return _.assign({
theme: 'h2FontWeight',
name: 'Font Weight',
description: 'Greater values correspond to increased font boldness (some fonts do not support every value)',
category: 'Text',
value: {name: '300 - Light', value: 300},
type: 'select',
options: [
{name: '100', value: 100},
{name: '200', value: 200},
{name: '300 - Light', value: 300},
{name: '400 - Regular', value: 400},
{name: '500', value: 500},
{name: '600', value: 600},
{name: '700 - Bold', value: 700},
{name: '800', value: 800},
{name: '900', value: 900}
]
}, options);
},
h2LetterSpacing: function (options) {
return _.assign({
theme: 'h2LetterSpacing',
name: 'Letter Spacing',
description: 'Space between characters in the text',
category: 'Text',
value: 0,
type: 'number',
units: 'px'
}, options);
},
h2LineHeight: function (options) {
return _.assign({
theme: 'h2LineHeight',
name: 'Line Spacing',
description: 'Space between lines in a paragraph of text',
category: 'Text',
value: 42,
type: 'number',
units: 'px'
}, options);
},
// ------- h3 Text -------
h3FontFamily: function (options) {
return _.assign({
theme: 'h3FontFamily',
name: 'Font',
description: 'Font type for the text',
category: 'Text',
value: 'Open Sans',
type: 'string'
}, options);
},
h3FontColor: function (options) {
return _.assign({
theme: 'h3FontColor',
name: 'Font Color',
description: 'Font color for the text',
category: 'Text',
value: '#333333', //grayish black
type: 'color'
}, options);
},
h3FontSize: function (options) {
return _.assign({
theme: 'h3FontSize',
name: 'Font Size',
description: 'Font size for the text',
category: 'Text',
value: 24,
type: 'number',
units: 'px'
}, options);
},
h3FontWeight: function (options) {
return _.assign({
theme: 'h3FontWeight',
name: 'Font Weight',
description: 'Greater values correspond to increased font boldness (some fonts do not support every value)',
category: 'Text',
value: {name:'300 - Light', value: 300},
type: 'select',
options: [
{name: '100', value: 100},
{name: '200', value: 200},
{name: '300 - Light', value: 300},
{name: '400 - Regular', value: 400},
{name: '500', value: 500},
{name: '600', value: 600},
{name: '700 - Bold', value: 700},
{name: '800', value: 800},
{name: '900', value: 900}
]
}, options);
},
h3LetterSpacing: function (options) {
return _.assign({
theme: 'h3LetterSpacing',
name: 'Letter Spacing',
description: 'Space between characters in the text',
category: 'Text',
value: 0,
type: 'number',
units: 'px'
}, options);
},
h3LineHeight: function (options) {
return _.assign({
theme: 'h3LineHeight',
name: 'Line Spacing',
description: 'Space between lines in a paragraph of text',
category: 'Text',
value: 32,
type: 'number',
units: 'px'
}, options);
},
// ------- h4 Text -------
h4FontFamily: function (options) {
return _.assign({
theme: 'h4FontFamily',
name: 'Font',
description: 'Font type for the text',
category: 'Text',
value: 'Open Sans',
type: 'string'
}, options);
},
h4FontColor: function (options) {
return _.assign({
theme: 'h4FontColor',
name: 'Font Color',
description: 'Font color for the text',
category: 'Text',
value: '#888888', //gray
type: 'color'
}, options);
},
h4FontSize: function (options) {
return _.assign({
theme: 'h4FontSize',
name: 'Font Size',
description: 'Font size for the text',
category: 'Text',
value: 18,
type: 'number',
units: 'px'
}, options);
},
h4FontWeight: function (options) {
return _.assign({
theme: 'h4FontWeight',
name: 'Font Weight',
description: 'Greater values correspond to increased font boldness (some fonts do not support every value)',
category: 'Text',
value: {name:'400 - Regular', value:400},
type: 'select',
options: [
{name: '100', value: 100},
{name: '200', value: 200},
{name: '300 - Light', value: 300},
{name: '400 - Regular', value: 400},
{name: '500', value: 500},
{name: '600', value: 600},
{name: '700 - Bold', value: 700},
{name: '800', value: 800},
{name: '900', value: 900}
]
}, options);
},
h4LetterSpacing: function (options) {
return _.assign({
theme: 'h4LetterSpacing',
name: 'Letter Spacing',
description: 'Space between characters in the text',
category: 'Text',
value: 0,
type: 'number',
units: 'px'
}, options);
},
// ------- h5 Text -------
h5FontFamily: function (options) {
return _.assign({
theme: 'h5FontFamily',
name: 'Font',
description: 'Font type for the text',
category: 'Text',
value: 'Open Sans',
type: 'string'
}, options);
},
h5FontColor: function (options) {
return _.assign({
theme: 'h5FontColor',
name: 'Font Color',
description: 'Font color for the text',
category: 'Text',
value: '#888888', //gray
type: 'color'
}, options);
},
h5FontSize: function (options) {
return _.assign({
theme: 'h5FontSize',
name: 'Font Size',
description: 'Font size for the text',
category: 'Text',
value: 12,
type: 'number',
units: 'px'
}, options);
},
h5FontWeight: function (options) {
return _.assign({
theme: 'h5FontWeight',
name: 'Font Weight',
description: 'Greater values correspond to increased font boldness (some fonts do not support every value)',
category: 'Text',
value: {name:'400 - Regular', value:400},
type: 'select',
options: [
{name:'100', value:100},
{name:'200', value:200},
{name:'300 - Light' , value:300},
{name:'400 - Regular', value:400},
{name:'500', value:500},
{name:'600', value:600},
{name:'700 - Bold' , value:700},
{name:'800', value:800},
{name:'900', value:900}
]
}, options);
},
h5LetterSpacing: function (options) {
return _.assign({
theme: 'h5LetterSpacing',
name: 'Letter Spacing',
description: 'Space between characters in the text',
category: 'Text',
value: 0,
type: 'number',
units: 'px'
}, options);
},
// ------- Body Text -------
bodyFontFamily: function (options) {
return _.assign({
theme: 'bodyFontFamily',
name: 'Body Text Font',
description: 'Font type for the body text',
category: 'Text',
value: 'Open Sans',
type: 'string'
}, options);
},
bodyFontColor: function (options) {
return _.assign({
theme: 'bodyFontColor',
name: 'Body Text Font Color',
description: 'Font color for the body text',
category: 'Text',
value: '#333333', //grayish black
type: 'color'
}, options);
},
bodyFontSize: function (options) {
return _.assign({
theme: 'bodyFontSize',
name: 'Body Text Font Size',
description: 'Font size for the body text',
category: 'Text',
value: 14,
type: 'number',
units: 'px'
}, options);
},
bodyFontWeight: function (options) {
return _.assign({
theme: 'bodyFontWeight',
name: 'Body Text Font Weight',
description: 'Greater values correspond to increased font boldness (some fonts do not support every value)',
category: 'Text',
value: {name: '400 - Regular', value: 400},
type: 'select',
options: [
{name: '100', value: 100},
{name: '200', value: 200},
{name: '300 - Light', value: 300},
{name: '400 - Regular', value: 400},
{name: '500', value: 500},
{name: '600', value: 600},
{name: '700 - Bold', value: 700},
{name: '800', value: 800},
{name: '900', value: 900}
]
}, options);
},
bodyLetterSpacing: function (options) {
return _.assign({
theme: 'bodyLetterSpacing',
name: 'Body Text Letter Spacing',
description: 'Space between characters in the text',
category: 'Text',
value: 0,
type: 'number',
units: 'px'
}, options);
},
bodyLineHeight: function (options) {
return _.assign({
theme: 'bodyLineHeight',
name: 'Body Text Line Spacing',
description: 'Space between lines in a paragraph of text',
category: 'Text',
value: 20,
type: 'number',
units: 'px'
}, options);
},
// ------- Descriptive Text -------
// Text that describes an element or another body of text
descriptiveFontFamily: function (options) {
return _.assign({
theme: 'descriptiveFontFamily',
name: 'Descriptive Text Font',
description: 'Font type for the descriptive text',
category: 'Text',
value: 'Open Sans',
type: 'string'
}, options);
},
descriptiveFontColor: function (options) {
return _.assign({
theme: 'descriptiveFontColor',
name: 'Descriptive Text Font Color',
description: 'Font color for the descriptive text',
category: 'Text',
value: '#333333', //grayish black
type: 'color'
}, options);
},
descriptiveFontSize: function (options) {
return _.assign({
theme: 'descriptiveFontSize',
name: 'Descriptive Text Font Size',
description: 'Font size for the descriptive text',
category: 'Text',
value: 12,
type: 'number',
units: 'px'
}, options);
},
descriptiveFontWeight: function (options) {
return _.assign({
theme: 'descript