flair-visualizations
Version:
All the available Flair-BI charting modules are listed in this package.
108 lines (103 loc) • 628 kB
JavaScript
var flairVisualizations =
/******/ (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] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = 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;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./js/main.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./js/charts/boxplot.js":
/*!******************************!*\
!*** ./js/charts/boxplot.js ***!
\******************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("var COMMON = __webpack_require__(/*! ../extras/common.js */ \"./js/extras/common.js\")(),\n UTIL = __webpack_require__(/*! ../extras/util.js */ \"./js/extras/util.js\")();\n\nfunction boxplot() {\n\n var _NAME = 'boxplot';\n\n var _config,\n _dimension,\n _measure,\n _sort,\n _tooltip,\n showXaxis,\n showYaxis,\n axisColor,\n showLabels,\n labelColor,\n numberFormat = [],\n displayColor = [];\n\n var x, y;\n var margin = {\n top: 15,\n right: 15,\n bottom: 35,\n left: 35\n };\n var _local_svg, _Local_data, _originalData, horizontalLineConfigs, legendBreakCount = 1;\n var div;\n var width, gWidth, height, gHeight, container;\n\n var filter = false, filterData = [];\n var threshold = [];\n\n var _setConfigParams = function (config) {\n this.dimension(config.dimension);\n this.measure(config.measure);\n this.showXaxis(config.showXaxis);\n this.showYaxis(config.showYaxis);\n this.axisColor(config.axisColor);\n this.showLabels(config.showLabels);\n this.labelColor(config.labelColor);\n this.numberFormat(config.numberFormat);\n this.displayColor(config.displayColor);\n\n }\n\n var _buildTooltipData = function (datum, chart) {\n var output = \"\";\n output += \"<table>\"\n + \"<tr>\"\n + \"<th>\" + _dimension[0] + \": </th>\"\n + \"<td>\" + datum[_dimension[0]] + \"</td>\"\n + \"</tr>\"\n + \"<tr>\"\n + \"<th>\" + _measure[0] + \": </th>\"\n + \"<td>\" + datum[_measure[0]] + \"</td>\"\n + \"</tr>\"\n + \"<tr>\"\n + \"<th>\" + _measure[1] + \": </th>\"\n + \"<td>\" + datum[_measure[1]] + \"</td>\"\n + \"</tr>\"\n + \"<tr>\"\n + \"<th>\" + _measure[2] + \": </th>\"\n + \"<td>\" + datum[_measure[2]] + \"</td>\"\n + \"</tr>\"\n + \"<tr>\"\n + \"<th>\" + _measure[3] + \": </th>\"\n + \"<td>\" + datum[_measure[3]] + \"</td>\"\n + \"</tr>\"\n + \"<tr>\"\n + \"<th>\" + _measure[4] + \": </th>\"\n + \"<td>\" + datum[_measure[4]] + \"</td>\"\n + \"</tr>\"\n + \"</table>\";\n\n return output;\n }\n\n var onLassoStart = function (lasso, scope) {\n return function () {\n if (filter) {\n lasso.items().selectAll('rect')\n .classed('not_possible', true)\n .classed('selected', false);\n }\n }\n }\n\n var onLassoDraw = function (lasso, scope) {\n return function () {\n filter = true;\n lasso.items().selectAll('rect')\n .classed('selected', false);\n\n lasso.possibleItems().selectAll('rect').each(function (d, i) {\n var item = d3.select(this).node().className.baseVal.split(' ')[0];\n d3.selectAll('rect.' + item)\n .classed('not_possible', false)\n .classed('possible', true);\n\n });\n lasso.possibleItems().selectAll('rect')\n .classed('not_possible', false)\n .classed('possible', true);\n\n lasso.notPossibleItems().selectAll('rect')\n .classed('not_possible', true)\n .classed('possible', false);\n }\n }\n\n var onLassoEnd = function (lasso, scope) {\n return function () {\n var data = lasso.selectedItems().data();\n if (!filter) {\n return;\n }\n if (data.length > 0) {\n lasso.items().selectAll('rect')\n .classed('not_possible', false)\n .classed('possible', false);\n }\n\n lasso.selectedItems().selectAll('rect')\n .classed('selected', true)\n\n lasso.notSelectedItems().selectAll('rect');\n\n var confirm = $(scope).parent().find('div.confirm')\n .css('visibility', 'visible');\n\n if (data.length > 0) {\n filterData = data;\n }\n }\n }\n\n var applyFilter = function (chart) {\n return function () {\n if (filterData.length > 0) {\n chart.update(filterData);\n }\n }\n }\n\n var clearFilter = function () {\n return function () {\n chart.update(_originalData);\n }\n }\n\n var _handleMouseOverFn = function (tooltip, container) {\n var me = this;\n\n return function (d, i) {\n\n d3.select(this).style('cursor', 'pointer')\n .style('cursor', 'pointer')\n .style('fill', COMMON.HIGHLIGHTER);\n var border = d3.select(this).attr('fill')\n if (tooltip) {\n UTIL.showTooltip(tooltip);\n UTIL.updateTooltip.call(tooltip, _buildTooltipData(d, me), container, border);\n }\n }\n }\n\n var _handleMouseMoveFn = function (tooltip, container) {\n var me = this;\n\n return function (d, i) {\n if (tooltip) {\n var border = d3.select(this).attr('fill')\n UTIL.updateTooltip.call(tooltip, _buildTooltipData(d, me, border), container, border);\n }\n }\n }\n\n var _handleMouseOutFn = function (tooltip, container) {\n var me = this;\n\n return function (d, i) {\n d3.select(this).style('cursor', 'default')\n\n\n if (tooltip) {\n UTIL.hideTooltip(tooltip);\n }\n }\n }\n var getXLabels = function (data) {\n return data.map(function (d) { return d[_dimension[0]]; })\n }\n\n var getGlobalMinMax = function (data) {\n var me = this;\n\n var allValues = [],\n min,\n max;\n\n data.forEach(function (d) {\n _measure.forEach(function (m) {\n allValues.push(d[m] || 0);\n })\n });\n\n min = Math.min.apply(Math, allValues);\n max = Math.max.apply(Math, allValues);\n\n min = min > 0 ? 0 : min\n\n return [min, max];\n }\n\n function chart(selection) {\n _local_svg = selection;\n\n selection.each(function (data) {\n _Local_data = _originalData = data;\n div = d3.select(this).node().parentNode;\n\n var svg = _local_svg = d3.select(this);\n\n width = div.clientWidth,\n height = div.clientHeight;\n\n svg.attr(\"width\", width).\n attr(\"height\", height);\n\n var globalMin, globalMax, xLabels;\n\n var minMax = getGlobalMinMax(data);\n globalMin = minMax[0];\n globalMax = minMax[1];\n\n xLabels = getXLabels(data);\n\n gWidth = width - margin.left - margin.right,\n gHeight = height - margin.top - margin.bottom;\n\n var barWidth = Math.floor(gWidth / data.length / 2);\n var me = this;\n if (_tooltip) {\n tooltip = d3.select(this.parentNode).select('#tooltip');\n }\n\n var _filter = UTIL.createFilterElement()\n $(div).append(_filter);\n\n x = d3\n .scalePoint()\n .domain(xLabels)\n .rangeRound([0, gWidth])\n .padding([0.5]);\n\n y = d3\n .scaleLinear()\n .domain([globalMin, globalMax])\n .range([gHeight, 0]);\n\n var plot = svg\n .append(\"g\")\n .attr(\"class\", \"plot\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n\n d3.selectAll('text.tick')\n .attr(\"transform\", \"rotate(-20)\");\n\n var boxPlot = plot\n .append(\"g\")\n .attr(\"transform\", \"translate(0,0)\");\n\n var verticalLines = boxPlot\n .selectAll(\".verticalLines\")\n .data(data)\n .enter()\n .append(\"line\")\n .attr('class', 'verticalLines')\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-width\", 1)\n .style(\"stroke-dasharray\", 3)\n .attr(\"fill\", \"none\");\n\n var box = boxPlot\n .selectAll(\".box\")\n .data(data)\n .enter()\n .append(\"g\")\n .attr('class', 'box')\n .attr(\"id\", function (d, i) {\n return \"box\" + i;\n })\n .on('mouseover', _handleMouseOverFn.call(chart, tooltip, _local_svg))\n .on('mousemove', _handleMouseMoveFn.call(chart, tooltip, _local_svg))\n .on('mouseout', _handleMouseOutFn.call(chart, tooltip, _local_svg))\n .on('click', function (d) {\n var confirm = d3.select(div).select('.confirm')\n .style('visibility', 'visible');\n var _filter = _Local_data.filter(function (d1) {\n return d[_dimension[0]] === d1[_dimension[0]]\n })\n var rect = d3.select(this);\n if (rect.classed('selected')) {\n rect.classed('selected', false);\n filterData.map(function (val, i) {\n if (val[_dimension[0]] == d[_dimension[0]]) {\n filterData.splice(i, 1)\n }\n })\n } else {\n rect.classed('selected', true);\n var isExist = filterData.filter(function (val) {\n if (val[_dimension[0]] == d[_dimension[0]]) {\n return val\n }\n })\n if (isExist.length == 0) {\n filterData.push(_filter[0]);\n }\n }\n })\n\n var lowerBox = box\n .append(\"rect\")\n .attr(\"width\", barWidth)\n .attr('class', 'lowerBox')\n .attr(\"x\", function (d) {\n return (\n x(d[_dimension[0]]) -\n barWidth / 2\n );\n })\n .attr(\"y\", function (d) {\n return y(d[_measure[2]]);\n })\n .attr(\"fill\", displayColor[1])\n .attr(\"stroke\", function (d) {\n return d3\n .rgb(displayColor[1])\n .darker();\n })\n .attr(\"stroke-width\", 1)\n .attr(\"height\", 0)\n .transition()\n .duration(800)\n .ease(d3.easeQuadIn)\n .attr(\"height\", function (d) {\n return y(d[_measure[1]]) - y(d[_measure[2]]);\n });\n\n\n var upperBox = box\n .append(\"rect\")\n .attr(\"width\", barWidth)\n .attr('class', 'upperBox')\n .attr(\"x\", function (d) {\n return (\n x(d[_dimension[0]]) -\n barWidth / 2\n );\n })\n .attr(\"fill\", displayColor[3])\n .attr(\"stroke\", function (d) {\n return d3\n .rgb(displayColor[3])\n .darker();\n })\n .attr(\"stroke-width\", 1)\n .attr(\"y\", function (d) {\n return y(d[_measure[2]]);\n })\n .attr(\"height\", 0)\n .transition()\n .duration(800)\n .ease(d3.easeQuadIn)\n .attr(\"height\", function (d) {\n var height =\n y(d[_measure[2]]) -\n y(d[_measure[3]]);\n return height;\n })\n .attr(\"y\", function (d) {\n return y(d[_measure[3]]);\n })\n .on(\"end\", afterTransition);\n\n horizontalLineConfigs = [\n {\n label: _measure[4],\n x1: function (d) {\n return (\n x(d[_dimension[0]]) -\n barWidth / 2\n );\n },\n y1: function (d) {\n return y(d[_measure[4]]);\n },\n x2: function (d) {\n return (\n x(d[_dimension[0]]) +\n barWidth / 2\n );\n },\n y2: function (d) {\n return y(d[_measure[4]]);\n }\n },\n {\n label: _measure[2],\n x1: function (d) {\n return (\n x(d[_dimension[0]]) -\n barWidth / 2\n );\n },\n y1: function (d) {\n return y(d[_measure[2]]);\n },\n x2: function (d) {\n return (\n x(d[_dimension[0]]) +\n barWidth / 2\n );\n },\n y2: function (d) {\n return y(d[_measure[2]]);\n }\n },\n {\n label: _measure[0],\n x1: function (d) {\n return (\n x(d[_dimension[0]]) -\n barWidth / 2\n );\n },\n y1: function (d) {\n return y(d[_measure[0]]);\n },\n x2: function (d) {\n return (\n x(d[_dimension[0]]) +\n barWidth / 2\n );\n },\n y2: function (d) {\n return y(d[_measure[0]]);\n }\n }\n ];\n\n function afterTransition() {\n verticalLines\n .attr(\"x1\", function (d) {\n return x(d[_dimension[0]]);\n })\n .attr(\"y1\", function (d) {\n return y(d[_measure[0]]);\n })\n .attr(\"x2\", function (d) {\n return x(d[_dimension[0]]);\n })\n .attr(\"y2\", function (d) {\n return y(d[_measure[4]]);\n });\n\n horizontalLineConfigs.forEach(function (config) {\n plot\n .selectAll(\".horizontalLines\")\n .data(data)\n .enter()\n .append(\"line\")\n .attr('class', 'horizontalLines')\n .attr(\"x1\", config.x1)\n .attr(\"y1\", config.y1)\n .attr(\"x2\", config.x2)\n .attr(\"y2\", config.y2)\n .attr(\"stroke\", function (d) {\n return displayColor[_measure.indexOf(config.label)];\n })\n .attr(\"stroke-width\", 2)\n .attr(\"fill\", \"none\");\n });\n }\n\n plot.append(\"g\")\n .attr(\"class\", \"x_axis\")\n .attr(\"transform\", \"translate(0,\" + gHeight + \")\")\n .call(d3.axisBottom(x))\n\n plot.append(\"g\")\n .attr(\"class\", \"y_axis\")\n .call(d3.axisLeft(y).ticks(null, \"s\"))\n\n UTIL.setAxisColor(_local_svg, \"\", \"\", true, true, true, true);\n\n d3.select(div).select('.filterData')\n .on('click', applyFilter(chart));\n\n d3.select(div).select('.removeFilter')\n .on('click', clearFilter());\n\n var lasso = d3\n .lasso()\n .hoverSelect(true)\n .closePathSelect(true)\n .closePathDistance(100)\n .items(box)\n .targetArea(svg);\n\n lasso.on('start', onLassoStart(lasso, me))\n .on('draw', onLassoDraw(lasso, me))\n .on('end', onLassoEnd(lasso, me));\n\n boxPlot.call(lasso);\n });\n }\n\n chart._getName = function () {\n return _NAME;\n }\n\n chart.update = function (data) {\n\n _Local_data = data,\n filterData = [];\n\n var minMax = getGlobalMinMax(data);\n globalMin = minMax[0];\n globalMax = minMax[1];\n\n xLabels = getXLabels(data);\n var plot = _local_svg.select('.plot');\n gWidth = width - margin.left - margin.right,\n gHeight = height - margin.top - margin.bottom;\n\n var barWidth = Math.floor(gWidth / data.length / 2);\n\n if (_tooltip) {\n tooltip = d3.select(this.parentNode).select('#tooltip');\n }\n\n x = d3\n .scalePoint()\n .domain(xLabels)\n .rangeRound([0, gWidth])\n .padding([0.5]);\n\n y = d3\n .scaleLinear()\n .domain([globalMin, globalMax])\n .range([gHeight, 0]);\n\n var verticalLines = plot.selectAll('.verticalLines')\n .data(data);\n\n verticalLines.exit().remove();\n\n verticalLines\n .attr(\"x1\", function (d) {\n return x(d[_dimension[0]]);\n })\n .attr(\"y1\", function (d) {\n return y(d[_measure[0]]);\n })\n .attr(\"x2\", function (d) {\n return x(d[_dimension[0]]);\n })\n .attr(\"y2\", function (d) {\n return y(d[_measure[4]]);\n });\n\n\n var verticalLinesNew = verticalLines.enter().append('line')\n .attr('class', 'verticalLines');\n\n verticalLinesNew\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-width\", 1)\n .style(\"stroke-dasharray\", 3)\n .attr(\"fill\", \"none\")\n .attr(\"x1\", function (d) {\n return x(d[_dimension[0]]);\n })\n .attr(\"y1\", function (d) {\n return y(d[_measure[0]]);\n })\n .attr(\"x2\", function (d) {\n return x(d[_dimension[0]]);\n })\n .attr(\"y2\", function (d) {\n return y(d[_measure[4]]);\n });\n\n\n var horizontalLines = plot.selectAll('.horizontalLines')\n .data(data);\n\n horizontalLines.exit().remove();\n\n horizontalLines.enter().append('line')\n .attr('class', 'horizontalLines');\n\n var box = plot.selectAll('.box')\n .data(data);\n\n box.exit().remove();\n\n box.selectAll('.lowerBox')\n\n .attr(\"width\", barWidth)\n .classed('selected', false)\n .attr('class', 'lowerBox')\n .attr(\"x\", function (d) {\n return (\n x(d[_dimension[0]]) -\n barWidth / 2\n );\n })\n .attr(\"y\", function (d) {\n return y(d[_measure[2]]);\n })\n .attr(\"fill\", displayColor[1])\n .attr(\"stroke\", function (d) {\n return d3\n .rgb(displayColor[1])\n .darker();\n })\n .attr(\"stroke-width\", 1)\n .attr(\"height\", 0)\n .transition()\n .duration(800)\n .ease(d3.easeQuadIn)\n .attr(\"height\", function (d) {\n return y(d[_measure[1]]) - y(d[_measure[2]]);\n });\n\n\n\n box.selectAll('.upperBox')\n .attr(\"width\", barWidth)\n .classed('selected', false)\n .attr(\"x\", function (d) {\n return (\n x(d[_dimension[0]]) -\n barWidth / 2\n );\n })\n .attr(\"fill\", displayColor[3])\n .attr(\"stroke\", function (d) {\n return d3\n .rgb(displayColor[3])\n .darker();\n })\n .attr(\"stroke-width\", 1)\n .attr(\"y\", function (d) {\n return y(d[_measure[2]]);\n })\n .attr(\"height\", 0)\n .transition()\n .duration(800)\n .ease(d3.easeQuadIn)\n .attr(\"height\", function (d) {\n var height =\n y(d[_measure[2]]) -\n y(d[_measure[3]]);\n return height;\n })\n .attr(\"y\", function (d) {\n return y(d[_measure[3]]);\n })\n\n\n var newBox = box.enter().append('g')\n .attr('class', 'box')\n .attr(\"id\", function (d, i) {\n return \"box\" + i;\n })\n .on('mouseover', _handleMouseOverFn.call(chart, tooltip, _local_svg))\n .on('mousemove', _handleMouseMoveFn.call(chart, tooltip, _local_svg))\n .on('mouseout', _handleMouseOutFn.call(chart, tooltip, _local_svg))\n\n var lowerBox = newBox\n .append(\"rect\")\n .attr(\"width\", barWidth)\n .attr('class', 'lowerBox')\n .attr(\"x\", function (d) {\n return (\n x(d[_dimension[0]]) -\n barWidth / 2\n );\n })\n .attr(\"y\", function (d) {\n return y(d[_measure[2]]);\n })\n .attr(\"fill\", displayColor[1])\n .attr(\"stroke\", function (d) {\n return d3\n .rgb(displayColor[1])\n .darker();\n })\n .attr(\"stroke-width\", 1)\n .attr(\"height\", 0)\n .transition()\n .duration(800)\n .ease(d3.easeQuadIn)\n .attr(\"height\", function (d) {\n return y(d[_measure[1]]) - y(d[_measure[2]]);\n });\n\n var upperBox = newBox\n .append(\"rect\")\n .attr(\"width\", barWidth)\n .attr('class', 'upperBox')\n .attr(\"x\", function (d) {\n return (\n x(d[_dimension[0]]) -\n barWidth / 2\n );\n })\n .attr(\"fill\", displayColor[3])\n .attr(\"stroke\", function (d) {\n return d3\n .rgb(displayColor[3])\n .darker();\n })\n .attr(\"stroke-width\", 1)\n .attr(\"y\", function (d) {\n return y(d[_measure[2]]);\n })\n .attr(\"height\", 0)\n .transition()\n .duration(800)\n .ease(d3.easeQuadIn)\n .attr(\"height\", function (d) {\n var height =\n y(d[_measure[2]]) -\n y(d[_measure[3]]);\n return height;\n })\n .attr(\"y\", function (d) {\n return y(d[_measure[3]]);\n })\n\n plot.select('.x_axis')\n .transition()\n .duration(1000)\n .call(d3.axisBottom(x));\n\n plot.select('.y_axis')\n .transition()\n .duration(1000)\n .call(d3.axisLeft(y).ticks(null, \"s\"));\n\n horizontalLineConfigs.forEach(function (config) {\n horizontalLines\n .attr(\"x1\", config.x1)\n .attr(\"y1\", config.y1)\n .attr(\"x2\", config.x2)\n .attr(\"y2\", config.y2)\n });\n }\n\n\n chart.config = function (value) {\n if (!arguments.length) {\n return _config;\n }\n _config = value;\n _setConfigParams.call(chart, _config);\n return chart;\n }\n\n chart.dimension = function (value) {\n if (!arguments.length) {\n return _dimension;\n }\n _dimension = value;\n return chart;\n }\n\n chart.measure = function (value) {\n if (!arguments.length) {\n return _measure;\n }\n _measure = value;\n return chart;\n }\n chart.tooltip = function (value) {\n if (!arguments.length) {\n return _tooltip;\n }\n _tooltip = value;\n return chart;\n }\n chart.showXaxis = function (value) {\n if (!arguments.length) {\n return showXaxis;\n }\n showXaxis = value;\n return chart;\n }\n chart.showYaxis = function (value) {\n if (!arguments.length) {\n return showYaxis;\n }\n showYaxis = value;\n return chart;\n }\n chart.axisColor = function (value) {\n if (!arguments.length) {\n return axisColor;\n }\n axisColor = value;\n return chart;\n }\n chart.showLabels = function (value) {\n if (!arguments.length) {\n return showLabels;\n }\n showLabels = value;\n return chart;\n }\n chart.labelColor = function (value) {\n if (!arguments.length) {\n return labelColor;\n }\n labelColor = value;\n return chart;\n }\n\n chart.numberFormat = function (value, measure) {\n return UTIL.baseAccessor.call(numberFormat, value, measure, _measure);\n }\n\n chart.displayColor = function (value, measure) {\n return UTIL.baseAccessor.call(displayColor, value, measure, _measure);\n }\n\n return chart;\n}\nmodule.exports = boxplot;\n\n//# sourceURL=webpack://flairVisualizations/./js/charts/boxplot.js?");
/***/ }),
/***/ "./js/charts/bullet.js":
/*!*****************************!*\
!*** ./js/charts/bullet.js ***!
\*****************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("var COMMON = __webpack_require__(/*! ../extras/common.js */ \"./js/extras/common.js\")(),\n UTIL = __webpack_require__(/*! ../extras/util.js */ \"./js/extras/util.js\")()\nfunction bullet() {\n\n var _NAME = 'bullet';\n\n var _config,\n dimension,\n measures,\n fontStyle,\n fontWeight,\n fontSize,\n showLabel,\n showLabel,\n valueColor,\n targetColor,\n orientation,\n segments,\n segmentInfo,\n measureNumberFormat,\n targetNumberFormat,\n _tooltip,\n _sort;\n\n var _local_svg, _Local_data, _originalData;\n\n var height, width, gWidth, gHeight, bullet;\n var margin = {\n top: 15,\n right: 0,\n bottom: 15,\n left: 0\n };\n\n var offset = 6, div;\n\n var filter = false, filterData = [];\n\n var _setConfigParams = function (config) {\n this.dimension(config.dimension);\n this.measures(config.measures);\n this.fontStyle(config.fontStyle);\n this.fontWeight(config.fontWeight);\n this.fontSize(config.fontSize);\n this.showLabel(config.showLabel);\n this.valueColor(config.valueColor);\n this.targetColor(config.targetColor);\n this.orientation(config.orientation);\n this.segments(config.segments);\n this.segmentInfo(config.segmentInfo);\n this.measureNumberFormat(config.measureNumberFormat);\n this.targetNumberFormat(config.targetNumberFormat);\n\n }\n\n var _buildTooltipData = function (datum, chart) {\n var output = \"\";\n\n output += \"<table><tr>\"\n + \"<th>\" + chart.dimension() + \": </th>\"\n + \"<td>\" + datum.title + \"</td>\"\n + \"</tr><tr>\"\n + \"<th>\" + 'Value' + \": </th>\"\n + \"<td>\" + datum.measures.toString() + \"</td>\"\n + \"</tr><tr>\"\n + \"<th>\" + \"Target\" + \": </th>\"\n + \"<td>\" + datum.markers.toString() + \"</td>\"\n + \"</tr>\"\n + \"</table>\";\n\n return output;\n }\n\n var onLassoStart = function (lasso, scope) {\n return function () {\n if (filter) {\n lasso.items().selectAll('rect.measure')\n .classed('not_possible', true)\n .classed('selected', false);\n }\n }\n }\n\n var onLassoDraw = function (lasso, scope) {\n return function () {\n filter = true;\n lasso.items().selectAll('rect.measure')\n .classed('selected', false);\n\n lasso.possibleItems().selectAll('rect.measure')\n .classed('not_possible', false)\n .classed('possible', true);\n\n lasso.notPossibleItems().selectAll('rect.measure')\n .classed('not_possible', true)\n .classed('possible', false);\n }\n }\n\n var onLassoEnd = function (lasso, scope) {\n return function () {\n var data = lasso.selectedItems().data();\n if (!filter) {\n return;\n }\n if (data.length > 0) {\n lasso.items().selectAll('rect.measure')\n .classed('not_possible', false)\n .classed('possible', false);\n }\n\n lasso.selectedItems().selectAll('rect.measure')\n .classed('selected', true)\n\n lasso.notSelectedItems().selectAll('rect.measure');\n\n var confirm = $(scope).parent().find('div.confirm')\n .css('visibility', 'visible');\n\n var _filter = [];\n if (data.length > 0) {\n data.forEach(function (d) {\n var obj = new Object();\n obj[dimension] = d.title;\n obj[measures[0]] = d.measures.toString();\n obj[measures[1]] = d.markers.toString();\n\n _filter.push(obj)\n });\n }\n\n if (_filter.length > 0) {\n filterData = _filter;\n }\n }\n }\n\n var applyFilter = function (chart) {\n return function () {\n if (filterData.length > 0) {\n chart.update(filterData);\n }\n }\n }\n\n var clearFilter = function () {\n return function () {\n chart.update(_originalData);\n }\n }\n\n var _handleMouseOverFn = function (tooltip, container) {\n var me = this;\n return function (d, i) {\n\n d3.select(this).style('cursor', 'pointer')\n .style('cursor', 'pointer')\n .style('fill', COMMON.HIGHLIGHTER);\n\n if (tooltip) {\n UTIL.showTooltip(tooltip);\n UTIL.updateTooltip.call(tooltip, _buildTooltipData(d, me), container, valueColor);\n }\n }\n }\n\n var _handleMouseMoveFn = function (tooltip, container) {\n var me = this;\n\n return function (d, i) {\n if (tooltip) {\n UTIL.updateTooltip.call(tooltip, _buildTooltipData(d, me), container, valueColor);\n }\n }\n }\n\n var _handleMouseOutFn = function (tooltip, container) {\n var me = this;\n\n return function (d, i) {\n\n if (tooltip) {\n UTIL.hideTooltip(tooltip);\n }\n }\n }\n var getSegmentValues = function (endValue) {\n var me = this,\n _segments = [],\n d;\n\n d3.range(segments).forEach(function (i) {\n try {\n if (d = segmentInfo[i]['upto']) {\n _segments.push(d);\n }\n } catch (e) {\n // pass\n }\n });\n\n if (segments[segments.length - 1] > endValue) {\n _segments.push(segments[segments.length - 1]);\n } else {\n _segments.push(endValue);\n }\n\n return _segments;\n }\n\n var getSegmentColors = function (scope) {\n\n var _segments = {},\n j = segments - 1;\n\n d3.range(segments).forEach(function (i) {\n try {\n _segments['.s' + j] = segmentInfo[i]['color'];\n } catch (e) {\n _segments['.s' + j] = \"#efefef\";\n } finally {\n j--;\n }\n });\n\n return _segments;\n }\n\n var getMargin = function (containerWidth) {\n var margin = {\n top: 15,\n bottom: 15\n };\n\n if (orientation == 'Horizontal') {\n if (showLabel) {\n margin['left'] = Math.floor(containerWidth / 8);\n } else {\n margin['left'] = 20;\n }\n margin['right'] = 20;\n } else if (orientation == 'Vertical') {\n margin['left'] = 15;\n margin['right'] = 15;\n margin['top'] = 30;\n }\n\n return margin;\n }\n var formatUsingCss = function (scope) {\n var bullet = $(scope).find('.bullet'),\n range = bullet.find('.range');\n\n bullet.css('font', '9px sans-serif');\n bullet.find('.marker').css('stroke', targetColor)\n .css('stroke-width', '2px');\n bullet.find('.tick line').css('stroke', '#666')\n .css('stroke-width', '0.5px');\n bullet.find('.measure').css('fill', valueColor);\n bullet.find('.measure').removeClass('selected');\n bullet.find('.title').css('font-size', '1.1em');\n\n if (orientation == 'Vertical') {\n bullet.find('.tick text').each(function (i, d) {\n var text = $(d).text();\n // $(d).text(UTIL.getTruncatedLabel(d, UTIL.shortScale(2)(UTIL.convertToNumber(text)), 25));\n });\n } else {\n bullet.find('.tick text').each(function (i, d) {\n var text = $(d).text();\n // $(d).text(UTIL.getTruncatedLabel(d, UTIL.shortScale(2)(UTIL.convertToNumber(text)), 25));\n });\n }\n\n var obj;\n for (var property in obj = getSegmentColors(this)) {\n if (obj.hasOwnProperty(property)) {\n range.filter(property).css('fill', obj[property]);\n }\n }\n }\n function chart(selection) {\n _local_svg = selection;\n\n selection.each(function (data) {\n _originalData = _Local_data = data;\n div = d3.select(this).node().parentNode;\n width = div.clientWidth,\n height = div.clientHeight;\n chart.local_svg = d3.select(this);\n _local_svg.selectAll('g').remove();\n\n _local_svg.attr('width', width)\n .attr('height', height);\n\n container = _local_svg.append('g')\n .attr('class', 'plot')\n\n var _filter = UTIL.createFilterElement()\n $(div).append(_filter);\n\n if (_tooltip) {\n tooltip = d3.select(this.parentNode).select('#tooltip');\n }\n\n data = data.map(function (item) {\n var d = {};\n d.title = item[dimension[0]];\n d.ranges = getSegmentValues(\n Math.floor(1.2 * Math.max.apply(Math, [item[measures[0]], item[measures[1]]]))\n );\n d.measures = [item[measures[0]]];\n d.markers = [item[measures[1]]];\n\n return d;\n });\n\n bullet = d3.bullet()\n .duration(800);\n var margin = getMargin(width);\n gWidth = Math.floor((width - margin.left - margin.right) / data.length);\n gHeight = Math.floor((height - margin.top - margin.bottom) / data.length);\n offset = 6;\n if (orientation == 'Horizontal') {\n bullet.width(width - margin.left - margin.right);\n if (data.length == 1) {\n bullet.height(Math.floor(3 * gHeight / 4));\n } else {\n bullet.height(Math.floor(gHeight / 2));\n }\n } else if (orientation == 'Vertical') {\n bullet.width(height - margin.top - margin.bottom);\n if (data.length == 1) {\n bullet.height(Math.floor(3 * gWidth / 4));\n } else {\n bullet.height(Math.floor(gWidth / 2));\n }\n } else {\n throw \"Invalid orientation\";\n }\n\n var g = container.selectAll('g')\n .data(data)\n .enter().append('g')\n .attr('id', function (d, i) {\n return 'group_' + div.id + '_' + i;\n })\n .attr('class', 'bullet')\n .attr('transform', function (d, i) {\n if (orientation == 'Horizontal') {\n return 'translate(' + margin.left + ',' + (margin.top + i * gHeight) + ') rotate(0)';\n } else if (orientation == 'Vertical') {\n return 'translate(' + (margin.left + i * gWidth) + ',' + (height - margin.top + offset) + ') rotate(-90)';\n }\n\n })\n .on('mouseover', _handleMouseOverFn.call(chart, tooltip, _local_svg))\n .on('mousemove', _handleMouseMoveFn.call(chart, tooltip, _local_svg))\n .on('mouseout', _handleMouseOutFn.call(chart, tooltip, _local_svg))\n .on('click', function (d) {\n\n var confirm = d3.select(div).select('.confirm')\n .style('visibility', 'visible');\n\n var rect = d3.select(this).select('rect.measure');\n\n if (rect.classed('selected')) {\n rect.classed('selected', false);\n filterData = filterData.filter(function (val) {\n if (val[dimension[0]] != d.title) {\n return val;\n }\n })\n } else {\n rect.classed('selected', true);\n var obj = new Object();\n obj[dimension] = d.title;\n obj[measures[0]] = d.measures.toString();\n obj[measures[1]] = d.markers.toString();\n\n filterData.push(obj)\n }\n })\n .call(bullet);\n\n var title = g.append('g')\n .style('text-anchor', function (d) {\n if (orientation == 'Horizontal') {\n return 'end';\n } else if (orientation == 'Vertical') {\n return 'middle';\n }\n })\n .attr('display', showLabel ? \"inherit\" : \"none\")\n .attr('transform', function (d) {\n if (orientation == 'Horizontal') {\n return 'translate(' + -offset + ',' + Math.floor(gHeight / 3.25) + ')';\n } else if (orientation == 'Vertical') {\n return 'translate(' + -offset * 2 + ',' + Math.floor(gWidth / 3.25) + ')';\n }\n })\n\n title.append('text')\n .attr('class', 'title')\n .attr('font-style', fontStyle)\n .attr('font-weight', fontWeight)\n .attr('font-size', fontSize)\n .attr('transform', function (d) {\n if (orientation == 'Horizontal') {\n return 'rotate(0)';\n } else if (orientation == 'Vertical') {\n return 'rotate(90)';\n }\n })\n .text(function (d) { return d.title; })\n .text(function (d) {\n if (orientation == 'Horizontal') {\n return UTIL.getTruncatedLabel(this, d.title, margin.left, offset);\n } else if (orientation == 'Vertical') {\n return UTIL.getTruncatedLabel(this, d.title, Math.floor(gWidth / 2), offset);\n }\n });\n formatUsingCss(this);\n\n d3.select(div).select('.filterData')\n .on('click', applyFilter(chart));\n\n d3.select(div).select('.removeFilter')\n .on('click', clearFilter());\n\n var lasso = d3.lasso()\n .hoverSelect(true)\n .closePathSelect(true)\n .closePathDistance(100)\n .items(g)\n .targetArea(_local_svg);\n\n lasso.on('start', onLassoStart(lasso, me))\n .on('draw', onLassoDraw(lasso, me))\n .on('end', onLassoEnd(lasso, me));\n\n _local_svg.call(lasso);\n });\n\n }\n\n\n chart._getName = function () {\n return _NAME;\n }\n\n chart.update = function (data) {\n _Local_data = data;\n filterData = [];\n var svg = chart.local_svg;\n\n data = data.map(function (item) {\n var d = {};\n d.title = item[dimension[0]];\n d.ranges = getSegmentValues(\n Math.floor(1.2 * Math.max.apply(Math, [item[measures[0]], item[measures[1]]]))\n );\n d.measures = [item[measures[0]]];\n d.markers = [item[measures[1]]];\n\n return d;\n });\n var plot = svg.select('.plot')\n var _bullet = plot.selectAll('.bullet')\n .data(data);\n\n newBullet = _bullet.enter().append('g')\n .attr('class', 'bullet');\n\n var margin = getMargin(width);\n gWidth = Math.floor((width - margin.left - margin.right) / data.length);\n gHeight = Math.floor((height - margin.top - margin.bottom) / data.length);\n\n _bullet.exit().remove();\n\n _bullet = plot.selectAll('g.bullet');\n\n _bullet\n .classed('selected', false)\n .attr('transform', function (d, i) {\n if (orientation == 'Horizontal') {\n return 'translate(' + margin.left + ',' + (margin.top + i * gHeight) + ') rotate(0)';\n } else if (orientation == 'Vertical') {\n return 'translate(' + (margin.left + i * gWidth) + ',' + (height - margin.top + offset) + ') rotate(-90)';\n }\n\n })\n .call(bullet);\n\n newBullet\n .attr('id', function (d, i) {\n return 'group_' + div.id + '_' + i;\n })\n .attr('class', 'bullet')\n .attr('transform', function (d, i) {\n if (orientation == 'Horizontal') {\n return 'translate(' + margin.left + ',' + (margin.top + i * gHeight) + ') rotate(0)';\n } else if (orientation == 'Vertical') {\n return 'translate(' + (margin.left + i * gWidth) + ',' + (height - margin.top + offset) + ') rotate(-90)';\n }\n\n })\n .on('mouseover', _handleMouseOverFn.call(chart, tooltip, _local_svg))\n .on('mousemove', _handleMouseMoveFn.call(chart, tooltip, _local_svg))\n .on('mouseout', _handleMouseOutFn.call(chart, tooltip, _local_svg))\n .on('click', function (d) {\n\n var confirm = d3.select(div).select('.confirm')\n .style('visibility', 'visible');\n\n var rect = d3.select(this).select('rect.measure');\n\n if (rect.classed('selected')) {\n rect.classed('selected', false);\n filterData = filterData.filter(function (val) {\n if (val[dimension[0]] != d.title) {\n return val;\n }\n })\n } else {\n rect.classed('selected', true);\n var obj = new Object();\n obj[dimension] = d.title;\n obj[measures[0]] = d.measures.toString();\n obj[measures[1]] = d.markers.toString();\n\n filterData.push(obj)\n }\n })\n .call(bullet);\n\n