;(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(['rave', 'rave-library', 'rave-utilities', 'rave-layouts', 'rave-legends'], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('rave'), require('rave-library'), require('rave-utilities'), require('rave-layouts'), require('rave-legends'));
} else {
root.raveLibraryBoxplot = factory(root.rave, root.raveLibrary, root.raveUtilities, root.raveLayouts, root.raveLegends);
}
}(this, function(rave, raveLibrary, raveUtilities, raveLayouts, raveLegends) {
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o A component that renders the background to the chart. The {@link #this.type()} method returns "BackgroundComponent". A component that does the layout for a bundle chart. The {@link #this.type()} method returned "ChartLayoutComponent". Chart layout is controlled by the following properties: Manages one or more legend components for a bundle. The number of legends N is fixed and declared in the constructor, and legends are identified by an array index number between 0 and N-1. (For now we don't need a dynamic collection, especially since we're generating the chart structure statically and each legend gets its own <g&;gt; node. If a chart sometimes needs one legend and sometimes two, it will create two nodes and construct the manager for two legends.) The manager has the following properties: Each legend has the following properties: The general pattern of use is to create the LegendsManager in the view's constructor or setup method, allocating the maximum number of legends that will ever be needed. The chart structure will have corresponding <g> nodes, and in the view's draw method all the legend selectors are set to the corresponding group. The legend palettes, titles, and formatters will usually be set next, making sure to set the palettes of any unused legends to null, and {@link #this.anyVisible()} used to find if any rectangles need to be drawn so the overall chart may be laid out. The rectangle, orientation, and transition information can then be set and {@link #this.draw()} called. The visible legends (those with palettes) divide the rectangle equally along the orientation. For example if there are three legends in horizontal orientation and two are visible, they will split the rectangle vertically in half. Legends are drawn left-to-right for horizontal orientation, and top-to-bottom for vertical orientation, in index order. If a transition is requested and the duration is non-negative, a transition is created from the legend's selector; otherwise the selector is used. However, in order to give a somewhat better appearance, a transition is not used if the legend was not visible (no shapes rendered) the last time it was drawn. Managers the axes and gridlines for a bundle. The manager handles rectangular axes, where the axes are drawn to the top, bottom, left, and/or right of a central chart. The manager does not do the layout of axes or the setup of scales. Bundle views will normally create an instance in the setup method, then set properties in their draw method and call {@link #this.draw()} to render all the axes and gridlines (including setting the transforms and clip paths on the groups). The manager has four axes and four gridlines, identified by the logical roles X1, X2, Y1, Y2. These corresponding to the constants in the {@link (com.ibm.rave.bundles.component.AxisComponent) AxisComponent} API. The X roles are the independent axes and the Y roles are the dependent axes. The manager will create an instance of the {@link (com.ibm.rave.bundles.components.AxisComponentImpl) AxisComponentImpl} or {@link (com.ibm.rave.bundles.components.GridComponentImpl) GridComponentImpl} for each role as it is required. The manager has four group (<g>) selectors for axes and four for gridlines, identified by their geometric positions top, bottom, left, and right. In bundles the group structure is created when the bundle first runs, so these selectors can in theory be set just once. Note that the axes and grids are identified logically, while the groups are identified geometrically. By default X1 is the bottom group, X2 the top, Y1 the left, and Y2 the right. This association is controlled by properties which transpose and/or flip the assignments. This is in part a RAVE/D3 requirement, since the core Axis examines the shapes in the group to generate transitions. The group selectors should be ordinary selectors. If a transition is requested and the transition duration is non-negative, the manager creates transitions from the selectors. However in order to give a somewhat better appearance, the manager keeps track of whether shapes were drawn into the group on the previous execution, and a transition is not used if the group was not used. The manager has the following overall properties: The manager has the following per-role (X1, X2, Y1, Y2) properties: The manager has the following per-position (bottom, top, left, right) properties: An {@link (com.ibm.rave.bundles.components.AxisComponentImpl) AxisComponentImpl} and {@link (com.ibm.rave.bundles.components.GridComponentImpl) GridComponentImpl} can be obtained for each role. These instances are created on demand, usually when a view requests the instance, but also if the manager is drawing and detects that the instance is needed. Once created the instance will be used by the manager thereafter. Views should use these instances to configure the appearance properties of the axes and grids. All other properties (such as scale, bounds, orient, role, and pre-execution callback) are set by the AxesManager. Views can set these properties but the manager's {@link #this.draw()} method will change the settings. Values for some of these properties (e.g. scale and bounds) are set in the manager by the view, and the others are found automatically by the manager. Layout Properties
*/
var com_ibm_rave_bundles_component_ChartLayoutComponent = rave['internal']['Declare'].implement(
//padding : function() {},
//topPadding : function() {},
//leftPadding : function() {},
//bottomPadding : function() {},
//rightPadding : function() {},
//legendChartAlign : function() {},
//legendPosition : function() {},
//legendChartGap : function() {},
//legendPosition : function(position) {},
//topPadding : function(value) {},
//leftPadding : function(value) {},
//bottomPadding : function(value) {},
//rightPadding : function(value) {},
/**
* Sets the padding around the outside of the chart/legend.
* @param (Object) value a string containing up to 4 CSS sizes for left, top, right, bottom padding (eg. "padding-left:10px;padding-top:10%"). Null is treated as 0.
* @return (com.ibm.rave.bundles.component.ChartLayoutComponent) This object
*/
//padding : function(value) {},
/**
* Sets all chart paddings. Null values are treated as 0.
* @param (Object) top New top padding
* @param (Object) left New left padding
* @param (Object) bottom New bottom padding
* @param (Object) right New right padding
* @return (com.ibm.rave.bundles.component.ChartLayoutComponent) This object
* @deprecated Please use {@link #this.padding(Object)} and {@link #this.legendChartGap(Object)}
*/
//chartPadding : function(top, left, bottom, right) {},
/**
* Sets whether the legend should align with the chart "body".
* @param (boolean) legendChartAlign the boolean state
* @return (com.ibm.rave.bundles.component.ChartLayoutComponent) This object
*/
//legendChartAlign : function(legendChartAlign) {},
/**
* Set the space for the gap between chart and legend
* @param (Object) value the gap distance (css length)
* @return (com.ibm.rave.bundles.component.ChartLayoutComponent) This object
*/
//legendChartGap : function(value) {},
/**
* Set the size information for the legend. Null value is treated as no visible legend.
* @param (com.ibm.rave.bundles.component.ChartLayoutSizable) sizable An object that implements the ChartLayoutSizable interface
* @return (com.ibm.rave.bundles.component.ChartLayoutComponent) This object
*/
//legendSize : function(sizable) {},
/**
* Reset list of axis sizables to 0
* @return (com.ibm.rave.bundles.component.ChartLayoutComponent) This object
*/
//removeAxisSizables : function() {},
/**
* Add an axis to be considered in layout operation.
* @param (com.ibm.rave.bundles.component.ChartLayoutSizable) sizable An object that implements the ChartLayoutSizable interface
* @return (com.ibm.rave.bundles.component.ChartLayoutComponent) This object
*/
//addAxisSizable : function(sizable) {}
);
/**
* The string returned by {@link #this.type()} is "ChartLayoutComponent".
*/
/** @expose */
com_ibm_rave_bundles_component_ChartLayoutComponent.COMPONENT_TYPE = "ChartLayoutComponent";
// $source: com/ibm/rave/bundles/components/LegendsManager
/************************************************************************
** IBM Confidential
**
** IBM Business Analytics: Rapidly Adaptive Visualization Engine
**
** (C) Copyright IBM Corp. 2017
**
** The source code for this program is not published or otherwise divested of its trade secrets,
** irrespective of what has been deposited with the U.S. Copyright Office.
************************************************************************/
// GENERATED
//@import com/ibm/rave/bundles/components/LegendComponentImpl (runtime) // new, orientationOf
/**
*
Properties
Components
To associate multiple data slots with an axis role, see {@link #this.setDataSlot(, Array)} .
* @param (int) role An axis role, one of {@link this.AxesManager#0} , {@link this.AxesManager#1} , {@link this.AxesManager#2} , {@link this.AxesManager#3} .
* @param (rave['library']['internal']['DataSlotEntry']) slot DataSlotEntry to be associated with the axis role.
*/
setDataSlot$0 : function(role, slot) {
this.setDataSlot$1(role, [slot]);
return this;
},
/**
* Set a list of data slot entries that will be associated with the specified axis role.
* @param (int) role An axis role, one of {@link this.AxesManager#0} , {@link this.AxesManager#1} , {@link this.AxesManager#2} , {@link this.AxesManager#3} .
* @param (Array) slots List of DataSlotEntry to be associated with the axis role.
*/
setDataSlot$1 : function(role, slots) {
if (role < 4 && role >= 0) {
this._dataSlotEntries[role].length = 0;
if (slots) {
for (var __i_enFor0 = 0, __exp_enFor0 = slots, __len_enFor0 = __exp_enFor0.length;
__i_enFor0 < __len_enFor0; ++__i_enFor0) {
var slot = __exp_enFor0[__i_enFor0];
this._dataSlotEntries[role].push(slot);
}
}
}
return this;
},
/**
*
A component that renders an axis (RAVE core Axis) with an optional title in an XY axis chart. The {@link #this.type()} method returns "AxisComponent".
The {@link #this.role()} method is used to identify the axis. Most charts with axes will use only the {@link #"ROLE_X1"} and {@link #"ROLE_Y1"} roles. The composite bundle also uses {@link #"ROLE_Y2"} . {@link #"ROLE_X2"} is not currently used by any chart.
The axis component uses a RAVE capability axis, available with {@link #this.axis()} . When used with a pre-execution callback, the axis is only valid for the duration of the callback (do not use the reference outside the callback). Properties of the capability axis may be set by the pre-execution callback, but note that many properties are set by the AxisComponent after the callback. To change those properties, use the methods of this class to change the AxisComponent, which will then set the capability axis properties.
*/ var com_ibm_rave_bundles_component_AxisComponent = rave['internal']['Declare'].implement( /** * @return (String) The role of the axis in the chart */ //role : function() {}, /** * @return (rave['internal']['Axis']) The capability Axis used by this AxisComponent */ //axis : function() {}, /** * The tickFormat is applied to the values of the ticks to create the string that is displayed. * @param (rave['internal']['ValueFunction']) tickFormat The new tickFormat * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //tickFormat : function(tickFormat) {}, /** * Get the tickFormat function used by this component. May be null. * @return (rave['internal']['ValueFunction']) Format function, or null */ //tickFormat : function() {}, /** * Set the indicator to be used for truncated text ex: indicator set to "..." , results in helloworld - > hello... * @param (String) indicator the string to be placed to indicated truncated text * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //textTruncateIndicator : function(indicator) {}, /** * Whether to display the axis title. * @param (boolean) displayAxisTitle true to display the axis title, false otherwise * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //displayAxisTitle : function(displayAxisTitle) {}, /** * Whether to display the axis line. * @param (boolean) displayAxisLine true to display the axis line, false otherwise * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //displayAxisLine : function(displayAxisLine) {}, /** * Whether to display the axis tick marks. * @param (boolean) displayTicks true to display the axis ticks, false otherwise * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //displayTicks : function(displayTicks) {}, /** * Whether to display the axis labels, as set by the show axis labels property * @param (boolean) displayTickLabels true to display the axis tick labels, false otherwise * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //displayTickLabels : function(displayTickLabels) {}, /** * Whether to display the axis labels, as set by the hide pan-zoom labels property * @param (boolean) showPanZoomTickLabels true to display the axis tick labels, false otherwise * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //showPanZoomTickLabels : function(showPanZoomTickLabels) {}, /** * @param (String) axisTitle The new axisTitle * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //axisTitle : function(axisTitle) {}, /** * The color used to draw the axis line and ticks. This is equivalent to calling both {@link #this.lineColor(String)} and {@link #this.tickColor(String)} . * @param (String) axisColor The new line and tick color * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //axisColor : function(axisColor) {}, /** * The color used to draw the axis line. * @param (String) lineColor The new lineColor * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //lineColor : function(lineColor) {}, /** * The color used to draw the axis ticks. * @param (String) tickColor The new tickColor * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //tickColor : function(tickColor) {}, /** * The color used to draw the axis labels. * @param (String) labelColor The new labelColor * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //labelColor : function(labelColor) {}, /** * The style for the axis labels. * @param (String) fontStyle CSS string of font properties * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //labelStyle : function(fontStyle) {}, /** * The style for the axis labels. * @param (String) fill The color used to draw the labels * @param (String) fontSize CSS font size * @param (String) fontFamily CSS font-families list * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //labelStyle : function(fill, fontSize, fontFamily) {}, /** * The color used to draw the axis title. * @param (String) titleColor The new titleColor * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //titleColor : function(titleColor) {}, /** * The style for the axis title. * @param (String) fontStyle CSS string of font properties * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //titleStyle : function(fontStyle) {}, /** * The style for the axis title. * @param (String) fill The color used to draw the title * @param (String) fontSize CSS font size * @param (String) fontFamily CSS font-families list * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ //titleStyle : function(fill, fontSize, fontFamily) {} ); /** * The string returned by {@link #this.type()} is "AxisComponent". */ /** @expose */ com_ibm_rave_bundles_component_AxisComponent.COMPONENT_TYPE = "AxisComponent"; /** * Returned by {@link #this.role()} for the first independent axis. */ /** @expose */ com_ibm_rave_bundles_component_AxisComponent.ROLE_X1 = "ROLE_X1"; /** * Returned by {@link #this.role()} for the first dependent axis. */ /** @expose */ com_ibm_rave_bundles_component_AxisComponent.ROLE_Y1 = "ROLE_Y1"; /** * Returned by {@link #this.role()} for the second independent axis. */ /** @expose */ com_ibm_rave_bundles_component_AxisComponent.ROLE_X2 = "ROLE_X2"; /** * Returned by {@link #this.role()} for the second dependent axis. */ /** @expose */ com_ibm_rave_bundles_component_AxisComponent.ROLE_Y2 = "ROLE_Y2"; // $source: com/ibm/rave/bundles/utilities/TextCrossfader /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED /** *Utility class for setting up a cross-fade of a single text node. This could be extended to a multiple-node selection (e.g. using value functions to return the text strings for each node in the selection), but that is not yet needed in the bundles. However use this with care, since if the transition does select multiple texts, they will all change to the new text string.
Any other text properties that are changing, for example the color or position, can be set up in the transition either before or after calling the utility method.
*/ var com_ibm_rave_bundles_utilities_TextCrossfader = rave['internal']['Declare']({ }); /** *Perform a text cross fade for a single text node. The selection holds that node. If it is not a transition, the new text is set; otherwise the cross-fade transition is done using tweeners on the "text" and "fill-opacity" attributes.
The "text" attribute tweener uses the oldText before transition time 0.5, and the new text thereafter. (Note this assumes that the old text is in fact the node's text; if not, the displayed text will change to the "old" text when the transition begins, then to the new text halfway through the transition.)
The text is optionally faded out and back in, disappearing completely at time 0.5, by setting the "fill-opacity" style attribute. The fading is controlled by the delay argument, which is clamped to the range [0.0, 0.5]. If the clamped delay is 0.5, or if the text does not actually change, no crossfade is used. Otherwise the opacity is full for transition times less than the delay or greater than 1-delay, fading to 0.0 at time 0.5. For example if the delay is 0.2, the opacity will be full from transition time 0.0 to 0.2, fade out linearly to 0 at time 0.5, fade in linearly to full at time 0.8, and be full from time 0.8 to 1.0.
The old and new texts and the full opacity are all passed as arguments, because it is generally not safe to try to find the values when the method runs. In particular, if we run this method while a transition (such as a previous cross-fade) is already in progress, we may pick up an intermediate fill-opacity value, perhaps even 0.0, and set the text opacity to that value! * @param (rave['internal']['Selection']) selection Selection containing the single text node, may be a transition * @param (String) oldText Old value of the text string, may be null * @param (String) newText New value of the text string, may be null * @param (Object) fillOpacity Fill opacity, may be null (in which case 1.0 is assumed) * @param (double) delay Number between 0 and 0.5 controlling the timing of the fade * @return (rave['internal']['Selection']) The selection, modified by the new text and fill-opacity */ /** @expose */ com_ibm_rave_bundles_utilities_TextCrossfader.textCrossFade = function(selection, oldText, newText, fillOpacity, delay) { if (!(selection.isTransition())) { return selection.text(newText); } var _t = (selection).tween("text", function(data, index, groupIndex) { return function(t) { this.rave_setText(t < 0.5 ? oldText : newText); }; }); var t0 = Math.max(0.0, Math.min(0.5, delay)); if (t0 == 0.5 || (oldText == null && newText == null) || (oldText != null && oldText == newText)) { return selection; } var opacity = fillOpacity == null ? 1.0 : + (fillOpacity); var tf = 1.0 / (0.5 - t0); return _t.tween("fill-opacity", function(data, index, groupIndex) { return function(t) { if (t <= t0 || t >= (1.0 - t0)) { this.rave_setStyle("fill-opacity", fillOpacity); } else { this.rave_setStyle("fill-opacity", opacity * Math.abs(t - 0.5) * tf); } }; }); }; // $source: com/ibm/rave/bundles/utilities/BundleLabelDropper /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED var com_ibm_rave_bundles_utilities_BundleLabelDropper = rave['internal']['Declare']({ //_dropOverlap : null, labelCount : 0, _$functionClassMethod : function() { var _$self = function(args) { if (args !== null || arguments.length > 1){ args = Array.prototype.slice.call(arguments, 0); } { _$self.drop(args[0], ((args[1]))); return null; } }; return _$self; }, /** @expose */ constructor : function() { this._dropOverlap = (rave.capabilities.extension("position")).drop().remove(false); this._dropOverlap.setOverlapGap(4.0); }, /** * Drop the overlapping labels or reset the overlap. * @param (rave['internal']['Selection']) labels The selector for the labels * @param (boolean) removeOverlap true to remove the overlapping labels, false to reset */ /** @expose */ drop : function(labels, removeOverlap) { if (!(labels.isTransition())) { this.applyLabelDrop(labels, removeOverlap); } else { var steps = [0, 25, 75]; var self = this; (labels).tween("__pointLabelDrop__", function(data, index, groupIndex) { if (index == 0) { return function(t) { var currentStep = Math.floor(t * 100); if (steps.length > 0 && currentStep < 100 && currentStep >= steps[0]) { steps.splice(0, 1); self.applyLabelDrop(labels, removeOverlap); } }; } return null; }); this.labelCount = 0; (labels).each(function(data, index, groupIndex) { ++self.labelCount; }).each("end", function(args) { if (args !== null || arguments.length > 1){ args = Array.prototype.slice.call(arguments, 0); } { if (--self.labelCount == 0) { self.applyLabelDrop(labels, removeOverlap); } return null; } }); } }, applyLabelDrop : function(labels, removeOverlap) { if (removeOverlap) { labels.call(this._dropOverlap); } else { this._dropOverlap.reset(labels); } }, /** @expose */ configureForDataLabels : function(rect) { if (rect) { var ex = [[rect.x, rect.y], [rect.x + rect.width, rect.y + rect.height]]; this._dropOverlap.extent(ex); } this._dropOverlap.noClipping(); } }); /** * Drop overlap extension */ //com_ibm_rave_bundles_utilities_BundleLabelDropper.POSITION_EXTENSION = "position"; /** * space between labels during overlap testing */ com_ibm_rave_bundles_utilities_BundleLabelDropper.OVERLAP_GAP = 4; // $source: com/ibm/rave/bundles/components/StyleStructs /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED /** * Struct classes to hold style properties. */ var com_ibm_rave_bundles_components_StyleStructs = rave['internal']['Declare']({ }); /** * Filled shape style properties. */ com_ibm_rave_bundles_components_StyleStructs.ShapeStyle = function() { this._fill = null; this._stroke = null; this._strokeWidth = null; }; /** * Line style properties. */ com_ibm_rave_bundles_components_StyleStructs.LineStyle = function() { this._stroke = null; this._strokeWidth = null; this._dashArray = null; }; // $source: com/ibm/rave/bundles/component/GridComponent /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED /** *
A component that renders gridlines in an XY axis chart. The {@link #this.type()} method returns "GridComponent".
The {@link #this.role()} method is used to identify the grid. The return values are defined in {@link (com.ibm.rave.bundles.component.AxisComponent) AxisComponent} : {@link this.AxisComponent#"ROLE_X1"} , {@link this.AxisComponent#"ROLE_Y1"} , and so on.
*/ var com_ibm_rave_bundles_component_GridComponent = rave['internal']['Declare'].implement( /** * @return (String) The role of the grid in the chart */ //role : function() {}, /** * Whether to display the gridlines. * @param (boolean) displayGridlines The new displayGridlines * @return (com.ibm.rave.bundles.component.GridComponent) This component */ //displayGridlines : function(displayGridlines) {}, /** * Set the line styling. Equivalent to calling {@link #this.gridlineColor(String)} and {@link #this.dashArray(String)} . * @param (String) stroke The stroke color * @param (String) dashArray The stroke-dasharray * @return (com.ibm.rave.bundles.component.GridComponent) This component */ //gridlineStyle : function(stroke, dashArray) {}, /** * The color used to draw the gridlines. * @param (String) gridlineColor The new stroke color * @return (com.ibm.rave.bundles.component.GridComponent) This component */ //gridlineColor : function(gridlineColor) {}, /** * The dashing used to draw the gridlines. The argument is a string, giving a comma-separated list of numbers as used with the SVG "stroke-dasharray" style. * @param (String) dashArray The new dash array * @return (com.ibm.rave.bundles.component.GridComponent) This component */ //dashArray : function(dashArray) {} ); /** * The string returned by {@link #this.type()} is "GridComponent". */ /** @expose */ com_ibm_rave_bundles_component_GridComponent.COMPONENT_TYPE = "GridComponent"; // $source: com/ibm/rave/bundles/components/IntervalDataUtilities /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED /** * A structure for holding interval data (IntervalData}, and utilities for building an array of the data from the tabular data and accessors objects. The array has one entry per entry in the tabular data, and the array entries are in the same order as the datum rows for joining by selectors. */ var com_ibm_rave_bundles_components_IntervalDataUtilities = rave['internal']['Declare']({ }); /** *Create intervals for a simple bar chart. The intervals come directly from the data, with the independent interval the independent value (for both ends) and the dependent interval 0.0 to the dependent value. The group and label are copied from the datum. The callout independent is the independent value, and the callout dependent is the dependent value (the bar extent).
If the xScale is non-null and returns null for an independent (X) value, the data is skipped.
* @param (Array) data Data array * @param (rave['internal']['SingleValueFunction']) x X accessor, should not be null * @param (rave['internal']['SingleValueFunction']) xScale Function to check if the X value is valid * @param (rave['internal']['SingleValueFunction']) y Y accessor, should not be null * @param (rave['internal']['SingleValueFunction']) color Color accessor, may be null * @param (rave['internal']['SingleValueFunction']) label Label accessor, may be null * @return (Array) Array of intervals for the data */ /** @expose */ com_ibm_rave_bundles_components_IntervalDataUtilities.simpleBars = function(data, x, xScale, y, yStart, color, label) { var result = []; if (!data || data.length == 0 || !x || !y) { return result; } data.forEach(function(d, ix, list) { var xv = x(d); if (xv != null && (!xScale || xScale(xv) != null)) { var yv = y(d); var yvStart = !yStart ? 0 : yStart(d); if (yv != null && yvStart != null) { var r = new com_ibm_rave_bundles_components_IntervalDataUtilities.IntervalData(); r.key = ix; r.ind1 = xv; r.ind2 = r.ind1; r.cind = r.ind1; r.dep1 = yvStart; r.dep2 = yv; r.cdep = r.dep2; r.color = color ? color(d) : null; r.label = label ? label(d) : null; r.value = r.dep2; r._originalData = d; r.valueAsPercentOfCategory = 100; result.push(r); } } return null; }); var sum = 0; for (var i = 0; i < result.length; ++i) { var iData = result[i]; var value = + (iData.value); sum += Math.abs(value); } if (sum != 0) { for (var i = 0; i < result.length; ++i) { var iData = result[i]; var value = + (iData.value); iData.valueAsPercentOfColor = value / sum * 100; } } return result; }; /** * Create intervals for bars in a clustered chart. This is similar to the simple bars, except the independent values are an array of accessors. * @param (Array) data Data array * @param (Array) x Independent accessor array, should not be null and no entries should be null * @param (Array) xScale Array of possibly-null functions to check if X values are in domain; array should not be null, and should be same length as x * @param (rave['internal']['SingleValueFunction']) y Dependent accessor, should not be null * @param (rave['internal']['SingleValueFunction']) color Color accessor, may be null * @param (rave['internal']['SingleValueFunction']) label Label accessor, may be null * @return (Array) Array of intervals for the data */ /** @expose */ com_ibm_rave_bundles_components_IntervalDataUtilities.clusteredBars = function(data, x, xScale, y, yStart, color, label) { var result = []; if (!data || data.length == 0 || !x || x.length == 0 || !y) { return result; } var len = x.length; var categories = {}; var colors = {}; data.forEach(function(d, ix, list) { var OK = true; var ind = []; for (var i = 0; i < len; ++i) { var xv = x[i](d); if (xv == null || (xScale[i] && xScale[i](xv) == null)) { OK = false; break; } ind.push(xv); if (i == 0) { if (!(categories.hasOwnProperty(xv))) { categories[""+(xv)] = 1; } } else if (!(colors.hasOwnProperty(xv))) { colors[""+(xv)] = 1; } } var dep = y(d); var depStart = !yStart ? 0 : yStart(d); if (OK && dep != null && depStart != null) { var r = new com_ibm_rave_bundles_components_IntervalDataUtilities.IntervalData(); r.key = ix; r.ind1 = ind; r.ind2 = ind; r.cind = ind; r.dep1 = depStart; r.dep2 = dep; r.cdep = r.dep2; r.color = color ? color(d) : null; r.label = label ? label(d) : null; r.value = r.dep2; r._originalData = d; result.push(r); } return null; }); for (var __i_enFor0 = 0, __exp_enFor0 = Object.keys(categories), __len_enFor0 = __exp_enFor0.length; __i_enFor0 < __len_enFor0; ++__i_enFor0) { var o = __exp_enFor0[__i_enFor0]; var s = ""+(o); var sum = 0; for (var i = 0; i < result.length; ++i) { var iData = result[i]; if (s == (iData.ind1)[0]) { var value = + (iData.value); sum += Math.abs(value); } } if (sum == 0) { continue; } for (var i = 0; i < result.length; ++i) { var iData = result[i]; if (s == (iData.ind1)[0]) { var value = + (iData.value); iData.valueAsPercentOfCategory = value / sum * 100; } } } for (var __i_enFor1 = 0, __exp_enFor1 = Object.keys(colors), __len_enFor1 = __exp_enFor1.length; __i_enFor1 < __len_enFor1; ++__i_enFor1) { var o = __exp_enFor1[__i_enFor1]; var s = ""+(o); var sum = 0; for (var i = 0; i < result.length; ++i) { var iData = result[i]; if (s == iData.color) { var value = + (iData.value); sum += Math.abs(value); } } if (sum == 0) { continue; } for (var i = 0; i < result.length; ++i) { var iData = result[i]; if (s == iData.color) { var value = + (iData.value); iData.valueAsPercentOfColor = value / sum * 100; } } } return result; }; /** * Create intervals for an stacked bar chart. The data is formed into stacks by the unique values of the independent data. The independent interval is the independent value (for both ends), and the dependent interval is from the stacking with the extent equal to the dependent value. The callout independent is the independent value, and the callout dependent is the dependent value (the bar extent). If percent is true, the bars are rescaled so the total height of each stack is 1.0. If xScale is non-null and returns null for an x value, that bar is skipped. * @param (Array) data Data array * @param (rave['internal']['SingleValueFunction']) x Independent accessor, should not be null * @param (rave['internal']['SingleValueFunction']) xScale Possibly-null function to check if X values are in domain * @param (rave['internal']['SingleValueFunction']) y Dependent accessor, should not be null * @param (rave['internal']['SingleValueFunction']) color Color accessor, may be null * @param (rave['internal']['SingleValueFunction']) label Label accessor, may be null * @param (boolean) percent If true, create percent bars * @return (Array) Array of intervals for the data */ /** @expose */ com_ibm_rave_bundles_components_IntervalDataUtilities.stackedBars = function(data, x, xScale, y, color, label, percent) { var result = []; if (!data || data.length == 0 || !x || !y) { return result; } var stacks = {}; var categories = {}; var colors = {}; data.forEach(function(d, ix, list) { var xv = x(d); if (xv != null && (!xScale || xScale(xv) != null)) { var yv = y(d); if (yv != null) { var stack = stacks[xv]; if (!stack) { stack = new com_ibm_rave_bundles_components_IntervalDataUtilities.Stack(); stacks[xv] = stack; } var dVal = + (yv); if (!percent) { var r = new com_ibm_rave_bundles_components_IntervalDataUtilities.IntervalData(); r.key = ix; r.ind1 = xv; r.ind2 = xv; r.cind = xv; var sum = dVal < 0.0 ? stack.negativeSum : stack.positiveSum; r.dep1 = sum; r.dep2 = sum + dVal; r.cdep = r.dep2; r.color = color ? color(d) : null; r.label = label ? label(d) : null; r.value = dVal; r._originalData = d; result.push(r); } if (dVal < 0.0) { stack.negativeSum += dVal; } else { stack.positiveCount++; stack.positiveSum += dVal; } if (!(categories.hasOwnProperty(xv))) { categories[""+(xv)] = 1; } if (color) { var o = color(d); if ((o != null) && !(colors.hasOwnProperty(o))) { colors[""+(o)] = 1; } } } } return null; }); if (percent) { data.forEach(function(d, ix, list) { var xv = x(d); if (xv != null && (!xScale || xScale(xv) != null)) { var yv = y(d); if (yv != null) { var stack = stacks[xv]; var dVal = + (yv); var percent; if (dVal < 0.0) { percent = -100.0 * dVal / stack.negativeSum; } else if (stack.positiveSum > 0) { percent = 100.0 * dVal / stack.positiveSum; } else { percent = 100.0 / stack.positiveCount; } var r = new com_ibm_rave_bundles_components_IntervalDataUtilities.IntervalData(); r.key = ix; r.ind1 = xv; r.ind2 = xv; r.cind = xv; var sum = dVal < 0.0 ? stack.negativePercent : stack.positivePercent; r.dep1 = sum; r.dep2 = sum + percent; r.cdep = r.dep2; r.color = color ? color(d) : null; r.label = label ? label(d) : null; r.value = dVal; r.valueAsPercentOfCategory = percent; r._originalData = d; result.push(r); if (dVal < 0.0) { stack.negativePercent += percent; } else { stack.positivePercent += percent; } } } return null; }); } else { for (var __i_enFor0 = 0, __exp_enFor0 = Object.keys(categories), __len_enFor0 = __exp_enFor0.length; __i_enFor0 < __len_enFor0; ++__i_enFor0) { var o = __exp_enFor0[__i_enFor0]; var s = ""+(o); var sum = 0; for (var i = 0; i < result.length; ++i) { var iData = result[i]; if (s == iData.ind1) { var value = + (iData.value); sum += Math.abs(value); } } if (sum == 0) { continue; } for (var i = 0; i < result.length; ++i) { var iData = result[i]; if (s == iData.ind1) { var value = + (iData.value); iData.valueAsPercentOfCategory = value / sum * 100; } } } } for (var __i_enFor1 = 0, __exp_enFor1 = Object.keys(colors), __len_enFor1 = __exp_enFor1.length; __i_enFor1 < __len_enFor1; ++__i_enFor1) { var o = __exp_enFor1[__i_enFor1]; var s = ""+(o); var sum = 0; for (var i = 0; i < result.length; ++i) { var iData = result[i]; if (s == iData.color) { var value = + (iData.value); sum += Math.abs(value); } } if (sum == 0) { continue; } for (var i = 0; i < result.length; ++i) { var iData = result[i]; if (s == iData.color) { var value = + (iData.value); iData.valueAsPercentOfColor = value / sum * 100; } } } return result; }; /** * Structure class holding interval information. */ com_ibm_rave_bundles_components_IntervalDataUtilities.IntervalData = rave['internal']['Declare']({ /** * Key value; for now this is the data index */ /** @expose */ key : null, /** * First independent value */ /** @expose */ ind1 : null, /** * Second independent value (in all current uses, same as ind1) */ /** @expose */ ind2 : null, /** * First dependent value */ /** @expose */ dep1 : null, /** * Second dependent value */ /** @expose */ dep2 : null, /** * The data value that the interval represents. Not the pixel value. Used in stacked chart */ /** @expose */ value : null, /** * Color value */ /** @expose */ color : null, /** * Label value */ /** @expose */ label : null, /** * Callout independent value (in all current uses, same as ind1) */ /** @expose */ cind : null, /** * Callout dependent value (dependent extent) */ /** @expose */ cdep : null, /** @expose */ _originalData : null, /** * The data value (in percentage) for specific category */ /** @expose */ valueAsPercentOfCategory : NaN, /** * The data value (in percentage) across all categories */ /** @expose */ valueAsPercentOfColor : NaN, /** @expose */ originalData : function() { return this._originalData; }, /** @expose */ originalDataList : function() { var list = []; list.push(this._originalData); return list; } }); com_ibm_rave_bundles_components_IntervalDataUtilities.Stack = function() { this.positiveCount = 0; this.positiveSum = 0; this.negativeSum = 0; this.positivePercent = 0; this.negativePercent = 0; }; /** * Accessor for the callout dependent value */ /** @expose */ com_ibm_rave_bundles_components_IntervalDataUtilities.CALLOUT_DEPENDENT_ACCESSOR = function(data) { return (data).cdep; }; /** * Accessor for the callout independent value */ /** @expose */ com_ibm_rave_bundles_components_IntervalDataUtilities.CALLOUT_INDEPENDENT_ACCESSOR = function(data) { return (data).cind; }; /** * Accessor for the data value */ /** @expose */ com_ibm_rave_bundles_components_IntervalDataUtilities.VALUE_ACCESSOR = function(data) { return (data).value; }; /** * Accessor for data value as percent of category */ /** @expose */ com_ibm_rave_bundles_components_IntervalDataUtilities.PERCENT_OF_CATEGORY_ACCESSOR = function(data) { var percent = (data).valueAsPercentOfCategory; return isNaN(percent) ? "" : percent.toFixed(1) + "%"; }; /** * Accessor for data value as percent of color (series) */ /** @expose */ com_ibm_rave_bundles_components_IntervalDataUtilities.PERCENT_OF_COLOR_ACCESSOR = function(data) { var percent = (data).valueAsPercentOfColor; return isNaN(percent) ? "" : percent.toFixed(1) + "%"; }; // $source: com/ibm/rave/bundles/data/PointDataUtilities /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED /** * Utility class for building arrays of point datum objects from tabular data. */ var com_ibm_rave_bundles_data_PointDataUtilities = rave['internal']['Declare']({ }); /** *Filter the input data list-array and return a list-array of PointData objects in the same order. If the data is null, an empty list is returned. Any null object in the data is skipped.
If an accessor is null, the X or Y value in the returned PointData objects is always null. If the accessor is non-null, points for which the accessor returns null are not included in the result; if the scale is also non-null, points for which the scale applied to the value returns null are not included in the result.
The returned PointDatum objects have the X accessor and Y accessor values (so may be null), and the original datum set to the object from the data.
* @param (Array) data Input data, list of arbitrary objects * @param (rave['internal']['SingleValueFunction']) xAccessor X accessor function, may be null * @param (rave['internal']['SingleValueFunction']) xScale Scale to test if the X value should be included, may be null * @param (rave['internal']['SingleValueFunction']) yAccessor Y accessor function, may be null * @param (rave['internal']['SingleValueFunction']) yScale Scale to test if the Y value should be included, may be null * @return (Array) List of PointData objects */ /** @expose */ com_ibm_rave_bundles_data_PointDataUtilities.buildPoints = function(data, xAccessor, xScale, yAccessor, yScale) { var result = []; if (data) { for (var __i_enFor0 = 0, __exp_enFor0 = data, __len_enFor0 = __exp_enFor0.length; __i_enFor0 < __len_enFor0; ++__i_enFor0) { var o = __exp_enFor0[__i_enFor0]; if (o != null) { var xv = null; if (xAccessor) { xv = xAccessor(o); if (xv == null || (xScale && xScale(xv) == null)) { continue; } } var yv = null; if (yAccessor) { yv = yAccessor(o); if (yv == null || (yScale && yScale(yv) == null)) { continue; } } var datum = new com_ibm_rave_bundles_data_PointDataUtilities.PointDatum(); datum._x = xv; datum._y = yv; datum._originalData = o; result.push(datum); } } } return result; }; /** * Datum object representing a point with X and Y values. Either X or Y may be null, depending on how the point is used, for example in a scatterplot. */ com_ibm_rave_bundles_data_PointDataUtilities.PointDatum = rave['internal']['Declare']({ /** * The X value */ /** @expose */ _x : null, /** * The Y value */ /** @expose */ _y : null, /** * The data value (in percentage) that the point represents */ /** @expose */ _yAsPercentOfCategory : null, /** * The data value (in percentage) that the point represents */ /** @expose */ _yAsPercentOfColor : null, /** * The original data */ /** @expose */ _originalData : null, /** @expose */ originalData : function() { return this._originalData; }, /** @expose */ originalDataList : function() { var list = []; list.push(this._originalData); return list; } }); /** * Accessor returning the _x property of a PointDatum. */ /** @expose */ com_ibm_rave_bundles_data_PointDataUtilities.X_ACCESSOR = function(d) { return (d)._x; }; /** * Accessor returning the _y property of a PointDatum. */ /** @expose */ com_ibm_rave_bundles_data_PointDataUtilities.Y_ACCESSOR = function(d) { return (d)._y; }; /** * Accessor returning the _yAsPercentOfCategory property of a PointDatum. */ /** @expose */ com_ibm_rave_bundles_data_PointDataUtilities.PERCENT_OF_CATEGORY_ACCESSOR = function(d) { var percent = + ((d)._yAsPercentOfCategory); return isNaN(percent) ? "" : percent.toFixed(1) + "%"; }; /** * Accessor returning the _yAsPercentOfColor property of a PointDatum. */ /** @expose */ com_ibm_rave_bundles_data_PointDataUtilities.PERCENT_OF_COLOR_ACCESSOR = function(d) { var percent = + ((d)._yAsPercentOfColor); return isNaN(percent) ? "" : percent.toFixed(1) + "%"; }; // $source: com/ibm/rave/bundles/utilities/ColorUtil /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED var com_ibm_rave_bundles_utilities_ColorUtil = rave['internal']['Declare']({ }); /** * It is used to get a foreground color which has atleast a 4.5 contrast ratio with the background color. * @param (Object) bg bakground color * @param (Object) fg foreground color * @return (Object) a color ( darker/ligher/same fg color ) which contrast with background. */ com_ibm_rave_bundles_utilities_ColorUtil.getContrastColor$0 = function(bg, fg) { var contrastRatio = com_ibm_rave_bundles_utilities_ColorUtil.getContrastRatio(bg, fg); if (contrastRatio < 4.5) { var bgHSL = rave.hsl(bg); var fgHSL = rave.hsl(fg); var brightness = 0.33 * (rave.rgb(bg).getR() / 255.0) + 0.5 * (rave.rgb(bg).getG() / 255.0) + 0.16 * (rave.rgb(bg).getB() / 255.0); if (brightness > 0.5) { if (bgHSL.getL() > 0.5) { return rave.hsl(fgHSL.getH(), fgHSL.getS(), Math.min(fgHSL.getL(), bgHSL.getL() - 0.4)); } else { return rave.hsl(fgHSL.getH(), fgHSL.getS(), Math.min(fgHSL.getL(), 0.1)); } } else { if (bgHSL.getL() < 0.5) { return rave.hsl(fgHSL.getH(), fgHSL.getS(), Math.max(fgHSL.getL(), bgHSL.getL() + 0.4)); } else { return rave.hsl(fgHSL.getH(), fgHSL.getS(), Math.max(fgHSL.getL(), 0.9)); } } } return fg; }; com_ibm_rave_bundles_utilities_ColorUtil.getContrastColor$1 = function(labelColor) { var labelRGB = rave.rgb(labelColor); return labelRGB.contrastShift(21); }; /** @expose */ com_ibm_rave_bundles_utilities_ColorUtil.getContrastRatio = function(colorA, colorB) { var foregroundLuminance = rave.rgb(colorA).getLuminance(); var backgroundLuminance = rave.rgb(colorB).getLuminance(); var contrastRatio = (foregroundLuminance >= backgroundLuminance) ? (foregroundLuminance + 0.05) / (backgroundLuminance + 0.05) : (backgroundLuminance + 0.05) / (foregroundLuminance + 0.05); return contrastRatio; }; /** @expose */ com_ibm_rave_bundles_utilities_ColorUtil.getContrastColor = function(a0, a1) { var args = arguments; if (args.length == 1) { return com_ibm_rave_bundles_utilities_ColorUtil.getContrastColor$1(a0); } return com_ibm_rave_bundles_utilities_ColorUtil.getContrastColor$0(a0, a1); }; // $source: com/ibm/rave/bundles/component/BoxplotComponent /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED /** *A component that renders boxplot elements. The {@link #this.type()} method returns "BoxplotComponent".
*/ var com_ibm_rave_bundles_component_BoxplotComponent = rave['internal']['Declare'].implement( ); /** * The string returned by {@link #this.type()} is "BoxplotComponent". */ /** @expose */ com_ibm_rave_bundles_component_BoxplotComponent.COMPONENT_TYPE = "BoxplotComponent"; // $source: com/ibm/rave/bundles/data/BoxplotDatum /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED /** *Bundle datum for boxplots. The boxplot shapes in the chart have an instance as their datum. It is not from integrator (original) data, but has a list of the original data points from which it is calculated.
The X value is the data for used for the boxplot view's X-scale. It may be a single value, or a pair when clustering. The key value uniquely identifies each boxplot in a view.
The hinge values are the 25% and 75% quartiles, and are calculated values (may not be in the original data). These are used to draw the boxplot box.
The fence values are at (lowerHinge-1.5*(upperHinge-lowerHinge)) and (upperHinge+1.5*(upperHinge-lowerHinge)), and are calculated values (may not be in the original data). They peg at the min and max values. These are used to draw the boxplot whiskers.
The extreme values are at (lowerHinge-3.0*(upperHinge-lowerHinge)) and (upperHinge+3.0*(upperHinge-lowerHinge)), and are calculated values (may not be in the original data). They peg at the min and max values. These are used to determine if an outlier is a normal or extreme outlier.
The outliers list has the original data objects where the Y value is outside the fences. These are in the order of the original data. They are used to draw the outlier points.
*/ var com_ibm_rave_bundles_data_BoxplotDatum = rave['internal']['Declare']({ //_x : null, //_key : null, //_outliers : null, //_data : null, _mean : 0, _min : 0, _lowerHinge : 0, _median : 0, _upperHinge : 0, _max : 0, /** * Package-protected constructor with values for all properties. * @param (Object) x The X value * @param (Object) key The key value * @param (double) mean The mean * @param (double) min The minimum value * @param (double) lowerHinge The 25% quartile * @param (double) median The median * @param (double) upperHinge The 50% quartile * @param (double) max The maximum value * @param (Array) outliers The original data objects with Y value outside the fences * @param (Array) data The original data objects */ constructor : function(x, key, mean, min, lowerHinge, median, upperHinge, max, outliers, data) { this._x = x; this._key = key; this._mean = mean; this._min = min; this._lowerHinge = lowerHinge; this._median = median; this._upperHinge = upperHinge; this._max = max; this._outliers = outliers; this._data = data; }, /** * @return (Object) The X value */ /** @expose */ x : function() { return this._x; }, /** * @return (Object) The key value */ /** @expose */ key : function() { return this._key; }, /** * @return (double) The mean of the Y values */ /** @expose */ mean : function() { return this._mean; }, /** * @return (double) The smallest Y value in the data */ /** @expose */ min : function() { return this._min; }, /** * @return (double) lowerHinge - 3.0(upperHinge-lowerHinge) but not less than min */ /** @expose */ lowerExtreme : function() { return Math.max(this._min, this._lowerHinge - 3.0 * (this._upperHinge - this._lowerHinge)); }, /** * @return (double) lowerHinge - 1.5(upperHinge-lowerHinge) but not less than min */ /** @expose */ lowerFence : function() { return Math.max(this._min, this._lowerHinge - 1.5 * (this._upperHinge - this._lowerHinge)); }, /** * @return (double) The 25th percentile of the Y values */ /** @expose */ lowerHinge : function() { return this._lowerHinge; }, /** * @return (double) The median of the Y values */ /** @expose */ median : function() { return this._median; }, /** * @return (double) The 75th percentile of the Y values */ /** @expose */ upperHinge : function() { return this._upperHinge; }, /** * @return (double) upperHinge + 1.5(upperHinge-lowerHinge) but not more than max */ /** @expose */ upperFence : function() { return Math.min(this._max, this._upperHinge + 1.5 * (this._upperHinge - this._lowerHinge)); }, /** * @return (double) upperHinge + 3.0(upperHinge-lowerHinge) but not more than max */ /** @expose */ upperExtremum : function() { return Math.min(this._max, this._upperHinge + 3.0 * (this._upperHinge - this._lowerHinge)); }, /** * @return (double) The largest Y value in the data */ /** @expose */ max : function() { return this._max; }, /** * @return (Array) The original data objects that are outliers, with Y values outside the fences. */ /** @expose */ outliers : function() { return this._outliers; }, /** * @return (Object) A list of the original data objects */ /** @expose */ originalData : function() { return this._data; }, /** * @return (Array) A list of the original data objects */ /** @expose */ originalDataList : function() { return this._data; } }); // $source: com/ibm/rave/bundles/components/ComponentConfiguration /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED /** * Utility class that does configuration for components, optionally drawing them into selections. Some of the configuration information is taken from a bundle context, and uses standard property IDs as defined in the shared property files and {@link (rave['library']['internal']['CommonPropertyIDs']) CommonPropertyIDs} . If a bundle does not use define the expected properties, an error will occur. In this documentation the property ID is referred to by the CommonPropertyIDs constant, for example property LEGEND_DISPLAY means the property with the ID {@link this.CommonPropertyIDs#"legend.display"} . */ var com_ibm_rave_bundles_components_ComponentConfiguration = rave['internal']['Declare']({ //constructor : function() {} }); /** *Do "standard" configuration of a Zoom and optionally run it on a selection. If the provided Zoom is null a new one is created. Component properties are set as follows:
Note that it is not possible to remove a scale from an existing zoom, since the core Zoom does not allow null scales in the x() and y() methods. To do that, first disable any existing zoom (with Selector#on("zoom",null)) then call this method with a null Zoom.
The scales are ordered x, y, x2, y2 in the parameters and in the p and s arrays, since most charts will only have the x and y scales.
* @param (rave['internal']['Selection']) chart Selection on which to run the zoom, may be null * @param (rave['internal']['Zoom']) zoom The Zoom; if null one is created and returned * @param (rave['library']['internal']['CoordinateScaleImpl']) xScale X dimension scale, may be null * @param (rave['library']['internal']['CoordinateScaleImpl']) yScale Y dimension scale, may be null * @param (rave['library']['internal']['CoordinateScaleImpl']) x2Scale X2 dimension scale, may be null * @param (rave['library']['internal']['CoordinateScaleImpl']) y2Scale Y2 dimension scale, may be null * @param (Array) scaleExtent Scale extent, may be null; if null the range 0.2 to 5.0 is used * @param (rave['internal']['RectStruct']) chartRect The rectangle of the chart * @param (double[]) p the zoom translate position (x, y, x2, y2) * @param (double[]) s the zoom scale (x, y, x2, y2) * @param (String) zoomOps The zoom operation (x|y|x2|y2|all) * @param (rave['internal']['RunFunction']) callback Callback on each zoom event, must not be null * @return (rave['internal']['Zoom']) The zoom */ /** @expose */ com_ibm_rave_bundles_components_ComponentConfiguration.configureZoom = function(chart, zoom, xScale, yScale, x2Scale, y2Scale, scaleExtent, chartRect, p, s, zoomOps, callback) { var z = zoom ? zoom : rave.behavior.zoom(); var z1 = (x2Scale || y2Scale) && zoomOps == "all" ? rave.behavior.zoom() : null; var dummyScale = (rave.scale.linear()); z.x(dummyScale); z.y(dummyScale); if (xScale && zoomOps == "x") { z.x(xScale.scale()); z.scale(s[0]); z.translate([p[0], 0]); } if (yScale && zoomOps == "y") { z.y(yScale.scale()); z.scale(s[1]); z.translate([0, p[1]]); } if (x2Scale && zoomOps == "x2") { z.x(x2Scale.scale()); z.scale(s[2]); z.translate([p[2], 0]); } if (y2Scale && zoomOps == "y2") { z.y(y2Scale.scale()); z.scale(s[3]); z.translate([0, p[3]]); } if (zoomOps == "all") { if (xScale) { z.x(xScale.scale()); } if (yScale) { z.y(yScale.scale()); } z.scale(1); z.translate([0, 0]); if (z1) { if (x2Scale) { z1.x(x2Scale.scale()); } if (y2Scale) { z1.y(y2Scale.scale()); } z1.scale(1); z1.translate([0, 0]); } } z.scaleExtent(scaleExtent ? scaleExtent : [1, Infinity]).on("zoom.default", function(args) { if (args !== null || arguments.length > 1){ args = Array.prototype.slice.call(arguments, 0); } { var event = args[3]; var scale = event.scale; var translate = event.translate; var scaledX = chartRect.x * (scale - 1); var scaledXExtent = (chartRect.width * (1 - scale)) - scaledX; translate[0] = Math.min(-scaledX, Math.max(scaledXExtent, translate[0])); var scaledY = chartRect.y * (scale - 1); var scaledYExtent = (chartRect.height * (1 - scale)) - scaledY; translate[1] = Math.min(-scaledY, Math.max(scaledYExtent, translate[1])); z.translate([translate[0], translate[1]]); if (z1) { z1.translate([translate[0], translate[1]]); z1.scale(scale); } if (zoomOps == "x") { p[0] = translate[0]; s[0] = scale; } else if (zoomOps == "y") { p[1] = translate[1]; s[1] = scale; } else if (zoomOps == "x2") { p[2] = translate[0]; s[2] = scale; } else if (zoomOps == "y2") { p[3] = translate[1]; s[3] = scale; } else if (zoomOps == "all") { p[0] = translate[0]; p[1] = translate[1]; p[2] = translate[0]; p[3] = translate[1]; s[0] = scale; s[1] = scale; s[2] = scale; s[3] = scale; } return callback.apply(this, args); } }); return z; }; // $source: com/ibm/rave/bundles/internal/nativeImpl/BundleModule /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2015 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // Must be the first import // @import ./BundleModuleHeader // expose DataFormatter to the global variable rave //rave["library"]["CustomFormatter"]=com_ibm_rave_library_framework_CustomFormatter; // $source: com/ibm/rave/bundles/boxplotBundle/BoxplotBundle /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED //@import com/ibm/rave/library/Library (static) // Library //@import com/ibm/rave/bundles/RaveBundle (loadtime) // superclass //@import com/ibm/rave/bundles/boxplotBundle/BoxplotView (runtime) // new var com_ibm_rave_bundles_boxplotBundle_BoxplotBundle = rave['internal']['Declare'](com_ibm_rave_bundles_RaveBundle, { /** @expose */ getName : function() { return com_ibm_rave_bundles_boxplotBundle_BoxplotBundle.BUNDLE_NAME; }, /** @expose */ createView : function(ctx) { return new com_ibm_rave_bundles_boxplotBundle_BoxplotView(ctx); } //constructor : function() {} }); /** * Register the bundle factory with the library. The bundle will not be made available if this method is not called. */ /** @expose */ com_ibm_rave_bundles_boxplotBundle_BoxplotBundle.init = function() { if (!(com_ibm_rave_library_Library.bundle.isRegistered(com_ibm_rave_bundles_boxplotBundle_BoxplotBundle.BUNDLE_NAME))) { var bundle; com_ibm_rave_library_Library.bundle.extension(com_ibm_rave_bundles_boxplotBundle_BoxplotBundle.BUNDLE_NAME, function() { if (!bundle) { bundle = new com_ibm_rave_bundles_boxplotBundle_BoxplotBundle(); bundle.loadResources(); require("./vizlibrary-boxplot.css"); } return bundle; }); } return com_ibm_rave_bundles_boxplotBundle_BoxplotBundle.BUNDLE_NAME; }; com_ibm_rave_bundles_boxplotBundle_BoxplotBundle.BUNDLE_NAME = "boxplotBundle"; // Auto initialization com_ibm_rave_bundles_boxplotBundle_BoxplotBundle.init(); if (!com_ibm_rave_library_Library.bundle[com_ibm_rave_bundles_boxplotBundle_BoxplotBundle.BUNDLE_NAME]) { com_ibm_rave_library_Library.bundle[com_ibm_rave_bundles_boxplotBundle_BoxplotBundle.BUNDLE_NAME] = function() { if (!bundle) { bundle = new com_ibm_rave_bundles_boxplotBundle_BoxplotBundle(); bundle.loadResources(); require("./vizlibrary-boxplot.css"); } return bundle; }; } else { console.log("Could not register extension: BoxplotBundle"); } // $source: com/ibm/rave/bundles/boxplotBundle/BoxplotView /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED //@import com/ibm/rave/bundles/views/BundleView (loadtime) // superclass //@import com/ibm/rave/bundles/components/BoxplotComponentImpl (runtime) // new //@import com/ibm/rave/bundles/data/BoxplotDataUtilities (runtime) // makeData //@import com/ibm/rave/bundles/components/ComponentConfiguration (runtime) // configureZoom var com_ibm_rave_bundles_boxplotBundle_BoxplotView = rave['internal']['Declare'](com_ibm_rave_bundles_views_BundleView, { /** * The calculated data, from the last time it was recalculated */ //_boxplotData : null, /** * The X scale, from the last time it was recalculated */ //_xScale : null, /** * The X scale domain, from the last time it was recalculated */ //_xDomain : null, /** * The Y scale, from the last time it was recalculated */ //_yScale : null, /** * The Y scale domain, from the last time it was recalculated */ //_yDomain : null, /** * Component for drawing the boxplot */ //_boxplotComponent : null, /** @expose */ constructor : function(context) { }, /** @expose */ setup : function() { com_ibm_rave_bundles_views_BundleView.prototype.setup.call(this); this._boxplotData = []; this._xScale = null; this._yScale = null; this._boxplotComponent = new com_ibm_rave_bundles_components_BoxplotComponentImpl(this.context); var component = this._boxplotComponent; rave['library']['internal']['BundleUtils'].setupZoomAction(this.context); var action = this.context.actions.action("highlight"); action.setBindFn(rave['library']['internal']['BundleUtils'].bindAction(this.context, ".chart .element-shape", action, ["mouseenter.default"])); action.setOperation(new (rave['internal']['Declare']([rave['library']['internal']['ActionOperation']], { _$functionClassMethod : function() { var _$self = function(args) { if (args !== null || arguments.length > 1){ args = Array.prototype.slice.call(arguments); } { component.highlight(args[0]); } }; return _$self; } }))()); action = this.context.actions.action("unhighlight"); action.setBindFn(rave['library']['internal']['BundleUtils'].bindAction(this.context, ".chart .element-shape", action, ["mouseout.default"])); action.setOperation(new (rave['internal']['Declare']([rave['library']['internal']['ActionOperation']], { _$functionClassMethod : function() { var _$self = function(args) { if (args !== null || arguments.length > 1){ args = Array.prototype.slice.call(arguments); } { component.unhighlight(args[0]); } }; return _$self; } }))()); action = this.context.actions.action("toggleSelect"); action.setBindFn(rave['library']['internal']['BundleUtils'].bindAction(this.context, ".chart .element-shape", action, ["click.default", "touchstart.default"])); action.setOperation(new (rave['internal']['Declare']([rave['library']['internal']['ActionOperation']], { _$functionClassMethod : function() { var _$self = function(args) { if (args !== null || arguments.length > 1){ args = Array.prototype.slice.call(arguments); } { component.toggleSelect(args[0]); } }; return _$self; } }))()); action = this.context.actions.action("deselectAll"); action.setBindFn(rave['library']['internal']['BundleUtils'].bindAction(this.context, ".background", action, ["click.default", "touchstart.default"])); action.setOperation(new (rave['internal']['Declare']([rave['library']['internal']['ActionOperation']], { _$functionClassMethod : function() { var _$self = function(args) { if (args !== null || arguments.length > 1){ args = Array.prototype.slice.call(arguments); } { component.deselectAll(args[0]); } }; return _$self; } }))()); }, /** @expose */ isAxesManagerRequired : function() { return true; }, /** @expose */ draw : function() { if (this.isUpdateNothing()) { return; } this.preDraw("g.vizlibrary-boxplot"); if (!(this.validateDataModel("g.element-group", "g.grid", "g.axis"))) { return; } var self = this; var effect = this.getStringProperty("effect.name"); var duration = this.getEffectDuration(effect); var dataSet = this.dataModel.dataset("data"); var data = (dataSet.data()); var xEntry = dataSet.slot("x").entry(); var yEntry = dataSet.slot("y").entry(); var colorEntry = dataSet.slot("color").entry(); var keyEntry = dataSet.slot("key").entry(); if (!colorEntry && yEntry) { dataSet.slot("color").overrideLabel(yEntry.label()); } if (this.updateType == 0) { var dataScale = colorEntry ? rave['library']['internal']['ScaleManager'].makeClusteredScale(data, [xEntry, colorEntry]) : rave['library']['internal']['ScaleManager'].makeCoordinateScale(data, xEntry); var isClustered = colorEntry && "Clustered" == this.getStringProperty("data.handling"); if (dataScale) { dataScale.range(0.0, 1.0, null, null); } this._boxplotData = com_ibm_rave_bundles_data_BoxplotDataUtilities.makeData(dataSet.data(), dataScale, isClustered, rave['library']['internal']['AbstractView'].accessorOf(xEntry), rave['library']['internal']['AbstractView'].accessorOf(yEntry), rave['library']['internal']['AbstractView'].accessorOf(colorEntry)); this._boxplotComponent.data(this._boxplotData); } var colorPalette = this.getPalette(); colorPalette.setData(dataSet, "color"); colorPalette.setNullColor(this.getStringProperty("color.null")); var showLegend = this.isShowLegend(); var legendPosition = this.getLegendPosition(); this._legends.visible(showLegend).position(legendPosition).transition(!("none" == effect), duration).setPreExecute(this.context.getPreExecute()).selector(0, this.context.node.selectAll("g.legend")).palette(0, colorPalette).title(0, this.context.getDataSlotLabel("legend.title", colorEntry)).titleFill(0, (this.context.getPropertyValue("legend.titlestyle.fill"))).titleFontSize(0, (this.context.getPropertyValue("legend.titlestyle.fontsize"))).titleFontFamily(0, (this.context.getPropertyValue("legend.titlestyle.fontfamily"))).setDataSlot(0, colorEntry); if (this.updateType <= 1) { var isClustered = colorEntry && "Clustered" == this.getStringProperty("data.handling"); if (isClustered) { this._xScale = rave['library']['internal']['ScaleManager'].makeClusteredScale(data, [xEntry, colorEntry]); } else { this._xScale = rave['library']['internal']['ScaleManager'].makeCoordinateScale(data, xEntry); } this._yScale = rave['library']['internal']['ScaleManager'].makeCoordinateScale(data, yEntry); this._axes.visible(true).duration(duration).transpose(false).scale(0, this._xScale).scale(2, this._yScale).setDataSlot(0, xEntry).setDataSlot(2, yEntry).useDefaultSelectors().useDefaultX1Properties(true).useDefaultY1Properties(true).setTickFormatter(0, xEntry).setTickFormatter(2, yEntry); this.prepareLayoutComponent(); this.prepareLayoutSizables(this._layoutComponent, false, true, true, false, showLegend); var isLegendLeftOrRight = "left" == legendPosition || "right" == legendPosition; if (isLegendLeftOrRight) { this._legends.preLayout(this._layoutComponent, false); this._axes.preLayout(this._layoutComponent, false, 0.1, 0.0, 0, 0.1, 0.05, 0); } else { this._axes.preLayout(this._layoutComponent, true, 0.1, 0.0, 0, 0.1, 0.05, 0); this._legends.preLayout(this._layoutComponent, true); } this._layoutComponent.layout(); this._axes.useBoundsFromLayout(this._layoutComponent).setScaleRanges(0.1, 0.0, 0); this._legends.rectangle(this._layoutComponent.legendRect()); if (this._xScale) { this._xScale.expandZeroExtent(false); this._xScale.expandPixels(this.getBoxplotSize() / 2.0, false); if (this.getBooleanProperty("axis.x.scale.includeZero")) { this._xScale.includeZero(); } if (this.getBooleanProperty("axis.x.scale.nice")) { this._xScale.nice(); } this._xDomain = this._xScale.scale().copy().domain(); } if (this._yScale) { this._yScale.expandZeroExtent(false); this._yScale.expandPixels(4.0 + 3, true); if (this.getBooleanProperty("axis.y.scale.includeZero")) { this._yScale.includeZero(); } if (this.getBooleanProperty("axis.y.scale.nice")) { this._yScale.nice(); } this._yDomain = this._yScale.scale().copy().domain(); } this.resetZoom(); } this.setBackgroundProperties(this._layoutComponent.elementRect(), duration); this._clip.clipRect(this._layoutComponent.elementRect()).applyTo(this.context.node.select(".content")).call(this.context.node.select("defs")); this._axes.visible(true).duration(duration).useDefaultSelectors().useDefaultX1Properties(true).useDefaultY1Properties(true).setTickFormatter(0, xEntry).setTickFormatter(2, yEntry); this._axes.draw(); this._legends.draw(); this._boxplotComponent.xScale(this._xScale).yScale(this._yScale).key(rave['library']['internal']['AbstractView'].originalDatumAccessor(rave['library']['internal']['AbstractView'].accessorOf(keyEntry))).yAccessor(rave['library']['internal']['AbstractView'].originalDatumAccessor(rave['library']['internal']['AbstractView'].accessorOf(yEntry))).colorPalette(colorPalette).colorAccessor(rave['library']['internal']['AbstractView'].accessorOf(colorEntry)).effect(effect).duration(duration).boxplotSize(this.getBoxplotSize()).boxStyle(this.getStringPropertyEmptyAsNull("boxplot.style.fill"), this.getStringPropertyEmptyAsNull("boxplot.style.stroke"), this.context.convertCSSSizeToPixels(this.getStringProperty("boxplot.style.stroke-width"))).whiskerStyle(this.getStringPropertyEmptyAsNull("boxplot.whisker.style.stroke"), this.context.convertCSSSizeToPixels(this.getStringProperty("boxplot.whisker.style.stroke-width"))).meanStyle(this.getStringPropertyEmptyAsNull("boxplot.mean.style.stroke"), this.context.convertCSSSizeToPixels(this.getStringProperty("boxplot.mean.style.stroke-width"))).medianStyle(this.getStringPropertyEmptyAsNull("boxplot.median.style.stroke"), this.context.convertCSSSizeToPixels(this.getStringProperty("boxplot.median.style.stroke-width"))).outlierStyle(this.getStringPropertyEmptyAsNull("boxplot.outlier.style.fill"), this.getStringPropertyEmptyAsNull("boxplot.outlier.style.stroke"), this.context.convertCSSSizeToPixels(this.getStringProperty("boxplot.outlier.style.stroke-width"))).extremeStyle(this.getStringPropertyEmptyAsNull("boxplot.extremum.style.fill"), this.getStringPropertyEmptyAsNull("boxplot.extremum.style.stroke"), this.context.convertCSSSizeToPixels(this.getStringProperty("boxplot.extremum.style.stroke-width"))); this.context.node.selectAll("g.elements").call(this._boxplotComponent); if (this.updateType <= 2) { var zoomOp = this.getStringProperty("zoom"); if (this._xScale && ("all" == zoomOp || "x" == zoomOp)) { (this._xScale.scale()).domain(this._xDomain); } if (this._yScale && ("all" == zoomOp || "y" == zoomOp)) { (this._yScale.scale()).domain(this._yDomain); } var zoom = this.context.actions.action("zoom").get("zoom"); com_ibm_rave_bundles_components_ComponentConfiguration.configureZoom(this._chart, zoom, this._xScale, this._yScale, null, null, null, this._layoutComponent.elementRect(), this._zoomP, this._zoomS, zoomOp, function(args) { if (args !== null || arguments.length > 1){ args = Array.prototype.slice.call(arguments, 0); } { self._boxplotComponent.boxplotSize(self.getBoxplotSize()); self.context.node.selectAll("g.elements").call(self._boxplotComponent); self._axes.redraw(false); return self._chart; } }); } this.resetUpdate(); }, /** @expose */ getCoordinateScale : function(role) { if ("ROLE_X1" == role) { return this._xScale; } if ("ROLE_Y1" == role) { return this._yScale; } return null; }, /** * If the X scale is ordinal/clustered and the "boxplot.applysize" property is false, returns the X scale width (minus 8 pixels - TODO: UX). Otherwise returns the "boxplot.size" property. The size property is CSS, and percentages are relative to the chart elements width. * @return (double) Size in pixels */ getBoxplotSize : function() { if (this._xScale && !(this._xScale.isContinuous()) && !(this.getBooleanProperty("boxplot.applysize"))) { return this._xScale.width() - 8; } var v = rave['library']['internal']['CSSConverter'].convertCSSSizeToPixelNumber(this.getStringProperty("boxplot.size"), this._layoutComponent.elementRect().width, 10.0); return v != null ? v : 10.0; }, /** @expose */ getGroupStructure : function() { return ["defs", "g.vizlibrary vizlibrary-boxplot", "(", "rect.background chart", "g.chart", "(", "g.content", "(", "rect.background elements", "g.gridlines", "(", "g.grid left", "g.grid bottom", ")", "g.elements", ")", "g.axes", "(", "g.axes-layout", "g.axisTransform left", "g.axisTransform bottom", ")", ")", "g.legends", "(", "g.legends-layout", "g.legend", ")", ")"]; } }); //com_ibm_rave_bundles_boxplotBundle_BoxplotView.DATASET_DATA = "data"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.DATASLOT_X = "x"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.DATASLOT_Y = "y"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.DATASLOT_COLOR = "color"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.DATASLOT_KEY = "key"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_SIZE_PROPERTY = "boxplot.size"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_APPLYSIZE_PROPERTY = "boxplot.applysize"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_STYLE_FILL = "boxplot.style.fill"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_STYLE_STROKE = "boxplot.style.stroke"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_STYLE_STROKEWIDTH = "boxplot.style.stroke-width"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_WHISKER_STYLE_STROKE = "boxplot.whisker.style.stroke"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_WHISKER_STYLE_STROKEWIDTH = "boxplot.whisker.style.stroke-width"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_MEDIAN_STYLE_STROKE = "boxplot.median.style.stroke"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_MEDIAN_STYLE_STROKEWIDTH = "boxplot.median.style.stroke-width"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_MEAN_STYLE_STROKE = "boxplot.mean.style.stroke"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_MEAN_STYLE_STROKEWIDTH = "boxplot.mean.style.stroke-width"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_OUTLIER_STYLE_FILL = "boxplot.outlier.style.fill"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_OUTLIER_STYLE_STROKE = "boxplot.outlier.style.stroke"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_OUTLIER_STYLE_STROKEWIDTH = "boxplot.outlier.style.stroke-width"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_EXTREMUM_STYLE_FILL = "boxplot.extremum.style.fill"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_EXTREMUM_STYLE_STROKE = "boxplot.extremum.style.stroke"; //com_ibm_rave_bundles_boxplotBundle_BoxplotView.BOXPLOT_EXTREMUM_STYLE_STROKEWIDTH = "boxplot.extremum.style.stroke-width"; // $source: com/ibm/rave/bundles/components/BackgroundComponentImpl /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED //@import com/ibm/rave/bundles/components/BundleComponentImpl (loadtime) // superclass //@import com/ibm/rave/bundles/component/BackgroundComponent (runtime) // BackgroundComponent /** *Component to set the background color of a bundle. The component properties are:
The component assumes that the selector on which it is executed is a "rect" shape which lies below the chart. If the size property is non-null, it sets the geometry of this rectangle to be the given size, with upper-left corner at 0,0. If the size is null, the rectangle is not resized.
The rectangle fill is set to the backgroundColor property. If the property is null, white (#FFFFFF) is used. TODO. Should we set it to null, so the CSS style can also be used to set the background?
*/ var com_ibm_rave_bundles_components_BackgroundComponentImpl = rave['internal']['Declare'](com_ibm_rave_bundles_components_BundleComponentImpl, { //_backgroundColor : null, //_rect : null, /** @expose */ constructor : function() { this._rect = new rave['internal']['RectStruct'](0, 0, 0, 0); }, /** @expose */ execute : function(g) { this.preExecute(); g.style("fill", this._backgroundColor != null ? this._backgroundColor : "#FFFFFF").style("fill-opacity", 1.0); g.attr("x", this._rect.x).attr("y", this._rect.y).attr("width", this._rect.width).attr("height", this._rect.height); }, /** @expose */ type : function() { return com_ibm_rave_bundles_component_BackgroundComponent.COMPONENT_TYPE; }, backgroundColor$0 : function() { return this._backgroundColor; }, backgroundColor$1 : function(backgroundColor) { this._backgroundColor = backgroundColor; return this; }, /** * @param (rave['library']['internal']['ContextSize']) size New value of size property * @return (com.ibm.rave.bundles.components.BackgroundComponentImpl) This component */ /** @expose */ size : function(size) { this._rect.x = 0; this._rect.y = 0; this._rect.width = size.w; this._rect.height = size.h; return this; }, /** @expose */ rect : function(rect) { var r = new rave['internal']['RectStruct'](rect.x, rect.y, rect.width, rect.height); this._rect = r; return this; }, /** @expose */ backgroundColor : function(a0) { var args = arguments; if (args.length == 0) { return this.backgroundColor$0(); } return this.backgroundColor$1(a0); } }); // $source: com/ibm/rave/bundles/components/ChartLayoutComponentImpl /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED //@import com/ibm/rave/bundles/components/BundleComponentImpl (loadtime) // superclass //@import com/ibm/rave/bundles/component/ChartLayoutComponent (runtime) // ChartLayoutComponent /** *Implementation of the chart layout component API. General sequence in a bundle view:
_clip.clipRect(new RectStruct(50, 50, 200, 200)) // Set the clipping rectangle .applyTo(chart.select(".content")) // Apply the clip-path attribute to a graphical element. This can be called repeatedly on different selections. .applyTo(chart.select(".otherContent")) .run(context.node.select("defs")); // ClipPathComponent creates a clipPath element within the provided node. This component should be executed on a single "defs" node, however there is no restriction.*/ var com_ibm_rave_bundles_components_ClipPathComponentImpl = rave['internal']['Declare'](com_ibm_rave_bundles_components_BundleComponentImpl, { //_id : null, //_clipRect : null, constructor : function(id) { this._clipRect = new rave['internal']['RectStruct'](0, 0, 100, 100); /** * Initializes the component. The provided id will be used as the "id" attribute for the clipPath element created by this component. Recall that an "id" in an SVG/HTML document must be unique across the entire document. If you create multiple clipPath elements with the same id, then all elements referencing one of these clip paths will not be resolved as you expected. * @param (String) id String ID that is unique across the document. */ { this._id = id; } }, /** @expose */ type : function() { return "ClipPathComponent"; }, /** * Set the rectangular clipping area. Make the _clipRect one pixel larger than requested to avoid the cut-off at bounds. TODO: why?!? * @param (rave['internal']['RectStruct']) rect The rectangular bounds of the clipping area. * @return (com.ibm.rave.bundles.components.ClipPathComponentImpl) This ClipPathComponent. */ /** @expose */ clipRect : function(rect) { this._clipRect = new rave['internal']['RectStruct'](rect.x - 1, rect.y - 1, rect.width + 2, rect.height + 2); return this; }, /** * Set the clip-path attribute on the provided selection. * @return (com.ibm.rave.bundles.components.ClipPathComponentImpl) This ClipPathComponent. */ /** @expose */ applyTo : function(s) { s.attr("clip-path", "url(" + this.url() + ")"); return this; }, /** * Retrieve the id assigned to this clip path. */ /** @expose */ id : function() { return this._id; }, /** * Retrieve the URL that can be used to reference this clip path. */ /** @expose */ url : function() { return "#" + this._id; }, /** @expose */ execute : function(g) { var clipPath = g.selectAll("#" + this._id).data([0]); clipPath.enter().append("clipPath").attr("id", this._id).append("rect"); rave.transition(clipPath.select("rect")).attr("x", this._clipRect.x).attr("y", this._clipRect.y).attr("width", this._clipRect.width).attr("height", this._clipRect.height); } }); // $source: com/ibm/rave/bundles/components/LegendComponentImpl /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED //@import com/ibm/rave/bundles/components/BundleComponentImpl (loadtime) // superclass //@import com/ibm/rave/bundles/utilities/FontPropertyParser (runtime) // parseCSSFont /** *
A component to draw a legend, using a RAVE capability swatch legend. In JavaScript the RAVE legend and layout extensions must be loaded. The legend puts its shapes into the selector passed to its execute method, so that selector should choose a group node.
Most of the component properties are passed directly to the RAVE legend. The properties are:
visible: If true, the legend is drawn; otherwise it is cleared (all shapes are removed from the legend). The default is true.
size: A Dim with the size of the legend in the chart coordinate system. If null or zero-sized, the legend is cleared. This is passed to the swatch legend.
colorScale: A scale (OrdinalScale) used as the RAVE legend scale. If null, the legend is cleared. The legend currently only supports a single ordinal color scale.
orient: The RAVE legend orient, either "horizontal" or "vertical". The default is "vertical".
swatchSize: The RAVE legend size. Note that this is in square pixels. The default is 20*20.
shape: The RAVE legend shape. The default is "square".
title: The RAVE legend title. The default is null.
titleFill: The legend title color. The default is null.
titleFontSize: The legend title font size. The default is null.
titleFontFamily: The legend title font family. The default is null.
borderColor: The RAVE legend borderColor. The default is "black".
labelFormat: The RAVE legend labelFormat. The default is null.
*/ var com_ibm_rave_bundles_components_LegendComponentImpl = rave['internal']['Declare'](com_ibm_rave_bundles_components_BundleComponentImpl, { /** * Legend size property */ //_size : null, /** * Color scale */ //_colorPalette : null, /** * Orient, "horizontal" or "vertical" */ //_orient : null, /** * Swatch size function */ //_swatchSizeFunc : null, /** * Scale */ //_scale : null, /** * Swatch symbol */ //_shape : null, /** * Legend title */ //_title : null, /** * Legend title styling */ //_titleStyle : null, /** * Legend entry styling */ //_entryStyle : null, /** * Custom formatter */ //_labelFormat : null, /** * The swatch legend, created on demand */ //_swatchLegend : null, /** * The continuous legend, created on demand */ //_continuousLegend : null, /** * The legend type, either "SwatchLegend" or "ContinuousLegend" */ //_legendType : null, /** * Is the legend visible */ _visible : false, /** * Swatch size in square pixels */ _swatchSize : 0, /** * Constructor; sets bound and, colorScale to null, all other properties to their default values. */ /** @expose */ constructor : function() { this._visible = true; this._size = null; this._colorPalette = null; this._orient = "horizontal"; this._swatchSize = 16.0 * 16.0; this._swatchSizeFunc = null; this._scale = null; this._shape = "square"; this._title = null; this._titleStyle = {}; this._entryStyle = {}; this._labelFormat = null; this._swatchLegend = null; this._continuousLegend = null; this._legendType = null; }, /** @expose */ type : function() { return "LegendComponent"; }, /** @expose */ execute : function(g) { if (this._colorPalette) { if ("continuous" == this._colorPalette.getType()) { if (!this._continuousLegend) { this._continuousLegend = (rave.capabilities.extension("legend")).continuous(); } this._legendType = "ContinuousLegend"; } else { if (!this._swatchLegend) { this._swatchLegend = (rave.capabilities.extension("legend")).swatch(); } this._legendType = "SwatchLegend"; } } else if (this._swatchSizeFunc) { if (!this._swatchLegend) { this._swatchLegend = (rave.capabilities.extension("legend")).swatch(); } this._legendType = "SwatchLegend"; } else { this._legendType = null; } this.preExecute(); if (!this._visible || (!this._colorPalette && !this._swatchSizeFunc) || !this._size || this._size[0] <= 0 || this._size[1] <= 0) { g.selectAll("*").remove(); return; } var fontChecker = rave.capabilities.extension("fontchecker"); if (this._colorPalette && "continuous" == this._colorPalette.getType()) { this._continuousLegend.shapeRectSize("horizontal" == this._orient ? [-1.0, 16.0] : [16.0, -1.0]).size(this._size).scale(this._colorPalette.getScale()).orient(this._orient).title(this._title).titleFill(this._titleStyle["fill"]).titleFontSize(this._titleStyle["font-size"]).titleFontFamily(this._titleStyle["font-Family"]).titleAlignment("start").labelFormat(this._labelFormat); var legend = g.call(this._continuousLegend); if (this._entryStyle) { legend.selectAll(".legendLabel").style(this._entryStyle); } if (this._titleStyle) { legend.selectAll(".legendTitle").style(this._titleStyle); } if (fontChecker) { legend.selectAll(".legendLabel").call(fontChecker); legend.selectAll(".legendTitle").call(fontChecker); } } else { var insets = {}; insets["bottom"] = 5; var swatchSize = this._swatchSize; var scale = null; var labelFormatter = this._labelFormat; if (this._swatchSizeFunc && this._scale) { swatchSize = this._swatchSizeFunc; scale = this._scale; } if (this._colorPalette) { scale = this._colorPalette.getScale(); var originalDomain = this._colorPalette.originalDomain(); if (originalDomain) { scale.domain(originalDomain); var f = this._colorPalette.originalDomainLabelAccessor(); if (this._labelFormat) { var self = this; labelFormatter = function(data, index, groupIndex) { return self._labelFormat.call(this, f.call(this, data, index, groupIndex), index, groupIndex); }; } else { labelFormatter = f; } } } this._swatchLegend.labelPadding(8).size(this._size).scale(scale).orient(this._orient).swatchSize(swatchSize).shape(this._shape).title(this._title).titleFill(this._titleStyle["fill"]).titleFontSize(this._titleStyle["font-size"]).titleFontFamily(this._titleStyle["font-family"]).titleAlignment("start").labelFormat(labelFormatter).titleInsets(insets); var legend = g.call(this._swatchLegend); if (this._entryStyle) { legend.selectAll(".legendLabel").style(this._entryStyle); } if (this._titleStyle) { legend.selectAll(".legendTitle").style(this._titleStyle); } if (fontChecker) { legend.selectAll(".legendLabel").call(fontChecker); legend.selectAll(".legendTitle").call(fontChecker); } } }, /** @expose */ legend : function() { if ("ContinuousLegend" == this._legendType) { return this._continuousLegend; } if ("SwatchLegend" == this._legendType) { return this._swatchLegend; } return null; }, /** @expose */ legendType : function() { return this._legendType; }, /** * Set the visible property. * @param (boolean) visible New visible * @return (com.ibm.rave.bundles.components.LegendComponentImpl) This object */ /** @expose */ visible : function(visible) { this._visible = visible; return this; }, /** * see if the legend is visible * @return (boolean) if its visible */ /** @expose */ isVisible : function() { return this._visible; }, /** * Set the size property. * @param (Array) size New size * @return (com.ibm.rave.bundles.components.LegendComponentImpl) This object */ /** @expose */ size : function(size) { this._size = size; return this; }, /** * Set the color scale property. * @param (rave['library']['internal']['Palette']) colorPalette New color scale * @return (com.ibm.rave.bundles.components.LegendComponentImpl) This object */ /** @expose */ colorPalette : function(colorPalette) { this._colorPalette = colorPalette; return this; }, /** * Set the orient property. If the argument is not "horizontal" or "vertical", it is ignored and the orient property is not changed. * @param (String) orient New orient * @return (com.ibm.rave.bundles.components.LegendComponentImpl) This object */ /** @expose */ orient : function(orient) { if ("horizontal" == orient || "vertical" == orient) { this._orient = orient; } return this; }, /** * Set the orient property from a legend position. If the argument is "top" or "bottom", the orient is set to "horizontal". Otherwise it is set to "vertical". * @param (String) position Legend position * @return (com.ibm.rave.bundles.components.LegendComponentImpl) This object */ /** @expose */ position : function(position) { return this.orient(com_ibm_rave_bundles_components_LegendComponentImpl.orientationOf(position)); }, swatchSize$0 : function(swatchSize) { if (swatchSize >= 0.0 && swatchSize != null) { this._swatchSize = swatchSize; } return this; }, /** @expose */ scale : function(scale) { this._scale = scale; return this; }, swatchSize$1 : function(swatchSize) { if (swatchSize) { this._swatchSizeFunc = swatchSize; } return this; }, /** @expose */ shape : function(shape) { this._shape = shape; return this; }, /** @expose */ title : function(title) { this._title = (title != null && title.length > 0) ? title : null; return this; }, /** @expose */ titleFill : function(titleFill) { this._titleStyle["fill"] = titleFill; return this; }, /** @expose */ titleFontSize : function(titleFontSize) { this._titleStyle["font-size"] = titleFontSize; return this; }, /** @expose */ titleFontFamily : function(titleFontFamily) { this._titleStyle["font-family"] = titleFontFamily; return this; }, /** @expose */ labelFormat : function(labelFormat) { this._labelFormat = labelFormat; return this; }, /** @expose */ titleFont : function(titleFontStyle) { this._titleStyle = com_ibm_rave_bundles_utilities_FontPropertyParser.parseCSSFont(titleFontStyle); return this; }, /** @expose */ entryFont : function(entryFontStyle) { this._entryStyle = com_ibm_rave_bundles_utilities_FontPropertyParser.parseCSSFont(entryFontStyle); return this; }, /** @expose */ getSpaceUsed : function() { if (this._colorPalette && "continuous" == this._colorPalette.getType()) { return this._continuousLegend.getUsedSize() + 2; } else { return this._swatchLegend.getUsedSize() + 2; } }, /** @expose */ swatchSize : function(a0) { var args = arguments; if (args.length == 1 && typeof a0 === "function") { return this.swatchSize$1(a0); } return this.swatchSize$0(a0); } }); /** * Get the orient for a position. "top" and "bottom" return "horizontal", anything else ("left", "right", or unknown/null) is "vertical". * @param (String) position A position * @return (String) "horizontal" or "vertical" */ /** @expose */ com_ibm_rave_bundles_components_LegendComponentImpl.orientationOf = function(position) { if ("top" == position || "bottom" == position) { return "horizontal"; } return "vertical"; }; //com_ibm_rave_bundles_components_LegendComponentImpl.HORIZONTAL = "horizontal"; //com_ibm_rave_bundles_components_LegendComponentImpl.VERTICAL = "vertical"; com_ibm_rave_bundles_components_LegendComponentImpl.BAR_THINKNESS = 16; com_ibm_rave_bundles_components_LegendComponentImpl.SWATCH_SIZE = 16; /** @expose */ com_ibm_rave_bundles_components_LegendComponentImpl.TOP = "top"; /** @expose */ com_ibm_rave_bundles_components_LegendComponentImpl.BOTTOM = "bottom"; /** @expose */ com_ibm_rave_bundles_components_LegendComponentImpl.LEFT = "left"; /** @expose */ com_ibm_rave_bundles_components_LegendComponentImpl.RIGHT = "right"; /** @expose */ com_ibm_rave_bundles_components_LegendComponentImpl.ADJUSTABLE = -1; // $source: com/ibm/rave/bundles/components/AxisComponentImpl /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2018 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED //@import com/ibm/rave/bundles/components/BundleComponentImpl (loadtime) // superclass //@import com/ibm/rave/bundles/component/AxisComponent (runtime) // AxisComponent //@import com/ibm/rave/bundles/utilities/TextCrossfader (runtime) // textCrossFade //@import com/ibm/rave/bundles/utilities/FontPropertyParser (runtime) // parseCSSFont //@import com/ibm/rave/bundles/utilities/BundleLabelDropper (runtime) // new /** *Component to draw an axis and title. The component is drawn into a Selector group, and the user of the component must translate the group to the axis position and set up the axis scale for the correct number of pixels.
The component uses a RAVE core Axis for drawing the axis. Most component properties are passed to the axis. The component properties are:
scale: The axis scale. This must be set up with the domain and range (pixels) of the axis. If null the axis does not render, and removes all axis shapes from the selector. Default null.
orient: The axis orient, "top", "bottom", "left", or "right". Default "bottom".
bounds: The bounding box for the axis, used to position the title and to wrap/truncate axis labels. If null the title is placed 50 pixels from the axis line and text is not wrapped.
tickFormat: A value function passed to the axis to format tick labels. Default null, meaning the RAVE default formatting is used.
displayAxisTitle: Whether to display the axis title. Default true.
axisTitle: The title to display on the axis. It is centered on the axis range, and the size property is used to find the distance from the axis. Default null.
axisColor: A color-string for the axis line. If null, no color is applied and the CSS defaults are used. Default null.
tickColor: A color-string for the axis ticks. If null, no color is applied and the CSS defaults are used. Default null.
labelColor: A color-string for the axis tick labels. If null, no color is applied and the CSS defaults are used. Default null.
titleColor: A color-string for the axis title. If null, no color is applied and the CSS defaults are used. Default null.
displayAxisLine: Whether to display the axis line. Default true.
displayAxisTicks: Whether to display the axis ticks. Default true.
displayAxisTickLabels: Whether to display the axis tick labels. Default true.
*/ var com_ibm_rave_bundles_components_AxisComponentImpl = rave['internal']['Declare'](com_ibm_rave_bundles_components_BundleComponentImpl, { /** * Axis - created on demand */ //_axis : null, /** * Role, from the AxisComponent API */ //_role : null, /** * CoordinateScale */ //_scale : null, /** * Orient, always one of the four legal values */ //_orient : null, /** * Size */ //_bounds : null, //_elementRect : null, /** * The title text; default null (nothing visible) */ /** @expose */ _axisTitle : null, /** * The title style; defaults null (use the CSS styling) */ /** @expose */ _titleStyle : null, /** * Axis line color; default null (use the CSS styling) */ /** @expose */ _lineColor : null, /** * Axis tick color; default null (use the CSS styling) */ /** @expose */ _tickColor : null, /** * Axis tick label style; defaults null (use the CSS styling) */ /** @expose */ _labelStyle : null, //_staggerRotate45Nodes : null, //_staggerFirstNode : null, //_staggerLastNode : null, /** * Axis tick label formatting */ //_tickFormat : null, //_dropOverlap : null, /** * Used to get the extension to enable axis label wrapping */ //_textFlow : null, /** * Used to check the fonts on each label to make sure all characters are covered */ //_fontChecker : null, /** * Run function that applies the properties to the axis line */ //_axisLineProperties : null, /** * Run function that applies the properties to the axis ticks */ //_axisTickProperties : null, /** * Run function that applies the properties to the axis tick labels */ //_axisTickLabelProperties : null, /** * Run function that hides or displays the axis tick labels */ //_displayHideLabels : null, /** * Run function that hides or displays the axis tick labels */ //_panZoomLabels : null, /** * The tick handler registered with the axis; will get called during axis transition */ //_tickHandler : null, //_textTruncationIndicator : null, /** * Used when dealing with numeric scale on the vertical axis and the numbers don't fit */ //_simplifiedTickFormat : null, //_tickMagnitude : null, /** * Whether to display the axis title; default true */ /** @expose */ _displayAxisTitle : false, /** * Whether to display the axis line; default true */ /** @expose */ _displayAxisLine : false, /** * Whether to display the axis ticks; default true */ /** @expose */ _displayTicks : false, /** * Whether to display the axis tick labels (conditional on show labels property); default true */ /** @expose */ _displayTickLabels : false, /** * Whether to display the axis tick labels (conditional on pan-zoom hide property); default true */ /** @expose */ _showPanZoomTickLabels : false, /** * Whether to rotate the axis tick labels; default false */ _rotateLabels : false, _staggerCellWidth : 0, _staggerAlignFirstAtStart : false, _staggerAlignLastAtEnd : false, _layoutTimerId : 0, _layoutTitleSize : 0, _layoutLabelSize : 0, _layoutLabelHeight : 0, _layoutAverageDigitWidth : 0, _layoutSpillOver : 0, /** * Whether to hide overlapping labels; default true */ /** @expose */ _hideOverlappingLabels : false, /** * When true, don't start a new timer */ _pendingLabelTimer : false, /** * The padding in px between tick axis line and tick label, and also between tick label and title. Default 16px. */ _padding : 0, /** * After calling the component, this is true if shapes were rendered, false if they were cleared. */ _renderedShapes : false, _layoutMode : -1, _allowAutoAxisLayoutToChangeOrientaiton : true, _lastAutomaticAxisLayoutOrientation : -1, _allowStagger : false, _allowRotate45 : false, _allowRotate90 : false, constructor : function() { { var self = this; this._axisLineProperties = function(args) { if (args !== null || arguments.length > 1){ args = Array.prototype.slice.call(arguments, 0); } { var line = this.selectAll("path.domain"); if (self._lineColor != null) { line.style("stroke", self._lineColor); } if (self._displayAxisLine) { line.attr("visibility", null); } else { line.attr("visibility", "hidden"); } return null; } }; this._axisTickProperties = function(args) { if (args !== null || arguments.length > 1){ args = Array.prototype.slice.call(arguments, 0); } { var tickLines = this.selectAll("line"); if (self._displayTicks) { tickLines.attr("visibility", null); } else { tickLines.attr("visibility", "hidden"); } if (self._lineColor != null) { tickLines.style("stroke", self._tickColor); } return null; } }; this._axisTickLabelProperties = function(args) { if (args !== null || arguments.length > 1){ args = Array.prototype.slice.call(arguments, 0); } { var labels = this.selectAll("text"); labels.each(self._displayHideLabels); labels.each(self._panZoomLabels); labels.style(self._labelStyle); self._axis.ticksHandler(null); return null; } }; this._displayHideLabels = function(obj, group, index) { if (self._displayTickLabels) { if (this.rave_hasProperty("__tickLabelHidden__")) { this.rave_removeProperty("__tickLabelHidden__"); var count = ~~ (this.rave_getProperty("__hiddenCount__")); if (count <= 1) { this.rave_removeProperty("__hiddenCount__"); this.removeAttribute("visibility"); } else { this.rave_setProperty("__hiddenCount__", count - 1); } } } else { if (!(this.rave_hasProperty("__tickLabelHidden__"))) { this.setAttribute("visibility", "hidden"); this.rave_setProperty("__tickLabelHidden__", "hidden"); var count = ~~ (this.rave_getProperty("__hiddenCount__")); this.rave_setProperty("__hiddenCount__", count + 1); } } }; this._panZoomLabels = function(obj, group, index) { if (self._showPanZoomTickLabels) { if (this.rave_hasProperty("__panZoomHidden__")) { this.rave_removeProperty("__panZoomHidden__"); var count = ~~ (this.rave_getProperty("__hiddenCount__")); if (count <= 1) { this.rave_removeProperty("__hiddenCount__"); this.removeAttribute("visibility"); } else { this.rave_setProperty("__hiddenCount__", count - 1); } } } else { if (!(this.rave_hasProperty("__panZoomHidden__"))) { this.setAttribute("visibility", "hidden"); this.rave_setProperty("__panZoomHidden__", "hidden"); var count = ~~ (this.rave_getProperty("__hiddenCount__")); this.rave_setProperty("__hiddenCount__", count + 1); } } }; } this._tickHandler = new com_ibm_rave_bundles_components_AxisComponentImpl.AxisTickHandler(this._axisTickLabelProperties, this._axisTickProperties); /** * Initialize properties to defaults */ { this._axis = null; this._role = null; this._scale = null; this._orient = "bottom"; this._bounds = null; this._displayAxisTitle = true; this._axisTitle = null; this._titleStyle = {}; this._displayAxisLine = true; this._lineColor = null; this._displayTicks = true; this._tickColor = null; this._displayTickLabels = true; this._labelStyle = {}; this._rotateLabels = false; this._hideOverlappingLabels = true; this._dropOverlap = new com_ibm_rave_bundles_utilities_BundleLabelDropper(); this._tickFormat = null; this._showPanZoomTickLabels = true; this._pendingLabelTimer = false; this._padding = 16; this._textFlow = rave.capabilities.extension("textflow"); this._fontChecker = rave.capabilities.extension("fontchecker"); this._renderedShapes = false; } }, /** @expose */ type : function() { return com_ibm_rave_bundles_component_AxisComponent.COMPONENT_TYPE; }, /** @expose */ role : function() { return this._role; }, /** @expose */ execute : function(g) { this.preExecute(); if (!this._scale) { g.selectAll("*").remove(); this._renderedShapes = false; return; } this._renderedShapes = true; if (this._scale.isOrdinal() || this._scale.isClustered()) { this._hideOverlappingLabels = false; this._rotateLabels = true; } else { this._hideOverlappingLabels = true; this._rotateLabels = true; } this.drawTitle(g); this.drawAxis(g); this.handleAxisText(g); this.drawTitle(g); }, /** * This is one place where all the calls that affect the axis text happen in case of allowAutomaticAxisLayout the new behavior applies here * @param (rave['internal']['Selector']) g */ handleAxisText : function(g) { this.stopLabelDroppingUpdate(); var duration = 0, delay = 0; var g2 = rave.transition(g); if (g2.isTransition()) { var t2 = (g2); duration = t2.duration(); delay = t2.delay(); } var axisSelector = g.selectAll("g.axis"); var labels = axisSelector.selectAll("g.tick").filter(rave['library']['internal']['BundleUtils'].notExit).selectAll("text"); var fontChecker = rave.capabilities.extension("fontchecker"); labels.style(this._labelStyle); if (fontChecker) { labels.call(fontChecker); } var mode = this._allowAutoAxisLayoutToChangeOrientaiton ? this.determineWhichAutoMode(g) : this._lastAutomaticAxisLayoutOrientation; this.configureStaggerData(g, mode); this.handleLabelsRotationAndPosition(g, labels, mode); this.hashingNumericScales(labels, this.labelExtent(g), mode); if (duration == 0) { this.doLabelWrapping(g, mode); this.handleLabelsRotationAndPosition(g, labels, mode); } this._lastAutomaticAxisLayoutOrientation = mode; if (!(this._scale.isOrdinal()) && !(this._scale.isClustered())) { var isHorizontal = this._orient == "bottom" || this._orient == "top"; var tick = axisSelector.append("g").classed("tick", true); var tickText = tick.append("text"); if (labels.size() == 0) { var singleValue = this._scale.scale().domain()[0]; var formatter = this._tickFormat; if (!formatter) { var tickFunc = this._scale.scale().tickFormat; if (tickFunc) { formatter = tickFunc.apply(tickFunc, [singleValue]); } } var node = tickText[0][0]; var stringValue = formatter ? formatter.call(node, singleValue, 0, 0) : ""+(singleValue); tickText.text(stringValue); var dim = node.getBBox(); this._layoutLabelSize = isHorizontal ? dim.height : dim.width; if (!isHorizontal || mode != 0) { tickText.text(".0"); this._layoutLabelSize += node.getBBox().width; } } if (!isHorizontal || mode != 0) { tickText.text(".0"); var node = tickText[0][0]; var dim = node.getBBox(); this._layoutAverageDigitWidth = dim.width; } tick.remove(); } if (this._hideOverlappingLabels && duration > 0) { this.updateLabelDropping(labels, duration, delay); } if (duration > 0) { this.doLabelWrappingAfterAnimation(g, labels, mode, duration, delay); } if (!this._displayTickLabels) { this._layoutLabelSize = 0; this._layoutAverageDigitWidth = 0; } }, /** * Rotates the text and shifts it to compensate for the rotation Needs to be called twice once before wrapping in order to have text in correct position for wrap then after to know the correct height of wrapped text in order to shift it correct TODO: find a better way to do this * @param (rave['internal']['Selector']) g selector * @param (rave['internal']['Selector']) labels labels selector * @param (int) mode one of HORIZONTAL, STAGGER, ROTATE90 */ handleLabelsRotationAndPosition : function(g, labels, mode) { if (mode == 2 || mode == 1) { if (this._orient == "bottom") { this.rotateLabels(g, labels, "end", mode); } else if (this._orient == "top") { this.rotateLabels(g, labels, "start", mode); } else { this.rotateLabels(g, labels, "middle", mode); } } else { if (this._orient == "bottom" || this._orient == "top") { this.rotateLabels(g, labels, "middle", mode); } else if (this._orient == "right") { this.rotateLabels(g, labels, "start", mode); } else { this.rotateLabels(g, labels, "end", mode); } } }, /** *Numeric scales cannot be truncated or wrapped, if a number doesn't fit the allowed space the number should be hashed
ex: 12345 -> #####
This method should be called before {@link #this.doLabelWrapping(rave['internal']['Selector'])} , truncation must be set to off in case of numeric scale
* @param (rave['internal']['Selector']) labels */ hashingNumericScales : function(labels, extent, mode) { if (!labels || !extent) { return; } if (!(this._scale.isOrdinal()) && !(this._scale.isClustered())) { var isHorizontal = this._orient == "bottom" || this._orient == "top"; var tickSpace = mode == 1 ? extent[1] : extent[0]; this._textTruncationIndicator = ""; this._layoutLabelSize = 0; for (var i = 0; i < labels.size(); ++i) { var node = labels[i][0]; var dim = node.getBBox(); var width = dim.width; var height = dim.height; var size = !isHorizontal || mode == 1 ? width : height; if (size > this._layoutLabelSize) { this._layoutLabelSize = size; } if (width >= tickSpace) { if (this._simplifiedTickFormat) { var newText = this._simplifiedTickFormat.call(null, node.rave_getData(), 0, 0); if (newText != null) { node.rave_setText(newText); } if (node.getBBox().width >= tickSpace) { node.rave_setText(this.stringOfSize(node.rave_getText().length, "#")); } } else { node.rave_setText(this.stringOfSize(node.rave_getText().length, "#")); } } } } }, /** * @param (int) size The desired size of the string * @param (String) ch The character to be repeated in the string * @return (String) A string of the specified size containing repetition of the specified character */ stringOfSize : function(size, ch) { var returnString = ""; for (var i = 0; i < size; ++i) { returnString += ch; } return returnString; }, configureStaggerData : function(g, mode) { if (mode == 3 || mode == 2) { var horizontalDimensions = this.labelExtent(g); var cellWidth = horizontalDimensions[0]; var axisSelector = g.selectAll("g.axis"); var labels = axisSelector.selectAll("text"); var domain = this._scale.scale().domain(); var originalDataLabelAccessor = (this._scale).originalDomainLabelAccessor(); this._staggerRotate45Nodes = []; this._staggerFirstNode = null; this._staggerLastNode = null; for (var i = 0; i < labels.size(); ++i) { var node = labels[0][i]; if (this.isValid(node.rave_getData())) { var domainIndex = -1; if (mode == 3) { var domainLabel = !this._tickFormat ? node.rave_getText() : originalDataLabelAccessor.call(node, node.rave_getData(), 0, 0); for (var index = 0; index < domain.length; ++index) { if (domain[index].toString() == domainLabel) { domainIndex = index; break; } } } this._staggerRotate45Nodes.push(new com_ibm_rave_bundles_components_AxisComponentImpl.NodeIndex(node, domainIndex)); if (domainIndex == 0) { this._staggerFirstNode = node; } if (domainIndex == domain.length - 1) { this._staggerLastNode = node; } } } this._staggerCellWidth = cellWidth * 2; this._staggerAlignFirstAtStart = this._staggerFirstNode ? this._staggerFirstNode.getBBox().width > cellWidth : false; this._staggerAlignLastAtEnd = this._staggerLastNode ? this._staggerLastNode.getBBox().width > cellWidth : false; } }, getStaggerIndex : function(node) { for (var index = 0; index < this._staggerRotate45Nodes.length; ++index) { if (this._staggerRotate45Nodes[index].contains(node)) { var domainIndex = this._staggerRotate45Nodes[index].getIndex(); return domainIndex == -1 ? 0 : domainIndex; } } return -1; }, getStaggerCount : function() { var domain = this._scale.scale().domain(); return domain.length; }, /** *The method is responsible for determining which mode to be used with the label positioning if {@link com_ibm_rave_bundles_components_AxisComponentImpl._allowAutomaticLayout} flag is enabled
* @param (rave['internal']['Selector']) g */ determineWhichAutoMode : function(g) { var isHorizontal = this._orient == "bottom" || this._orient == "top"; var axisSelector = g.selectAll("g.axis"); var labels = axisSelector.selectAll("text"); var dim = this.labelExtent(g); var cellWidth = dim[0]; var cellWidth90 = dim[1]; var layoutLabelHeight = 0; var layoutLabelWidth = 0; var horizontalScore = 0; var staggerScore = 0; var rotate45Score = 0; var rotate90Score = 0; var validNodes = []; for (var i = 0; i < labels.size(); ++i) { var node = labels[0][i]; if (this.isValid(node.rave_getData())) { validNodes.push(node); } } var labelCount = validNodes.length; if (!(this._scale.isOrdinal()) && !(this._scale.isClustered())) { var mode = 0; if (isHorizontal) { mode = this._layoutMode == 1 ? 1 : 0; var tick = axisSelector.append("g").classed("tick", true); var tickText = tick.append("text"); tickText.style(this._labelStyle); tickText.text(",0"); var node = tickText[0][0]; var zeroWidth = node.getBBox().width; tick.remove(); var widestLabel = 0; for (var i = 0; i < labelCount; ++i) { node = validNodes[i]; var nodeRect = node.getBBox(); if (nodeRect.width > widestLabel) { widestLabel = nodeRect.width; } if (nodeRect.height > this._layoutLabelHeight) { this._layoutLabelHeight = nodeRect.height; } } widestLabel += zeroWidth; this._layoutSpillOver = mode == 1 ? this._layoutLabelHeight / 2 : widestLabel / 2 + 2; } else { for (var i = 0; i < labelCount; ++i) { var node = validNodes[i]; var nodeRect = node.getBBox(); if (nodeRect.height > this._layoutLabelHeight) { this._layoutLabelHeight = nodeRect.height; } } this._layoutSpillOver = this._layoutLabelHeight / 2; } return mode; } var originalDataLabelAccessor = (this._scale).originalDomainLabelAccessor(); var staggerStringsWontMatch = this._tickFormat && !originalDataLabelAccessor; var calcStagger = ((this._allowStagger && this._layoutMode == -1) || this._layoutMode == 3) && !staggerStringsWontMatch; var calcRotate45 = (this._allowRotate45 && this._layoutMode == -1) || this._layoutMode == 2; var calcRotate90 = (this._allowRotate90 && this._layoutMode == -1) || this._layoutMode == 1; var spaceFor45Label = 0; for (var i = 0; i < labelCount; ++i) { var node = validNodes[i]; var nodeRect = node.getBBox(); layoutLabelHeight = nodeRect.height; var labelWidth = nodeRect.width; if (labelWidth > layoutLabelWidth) { layoutLabelWidth = labelWidth; } horizontalScore += (labelWidth <= cellWidth ? 1 : cellWidth / labelWidth); if (isHorizontal) { if (calcStagger) { var spaceForLabel = cellWidth * 2; if (i == 0 && i == labelCount - 1) { spaceForLabel *= 0.5; } else if (i == 0 || i == labelCount - 1) { spaceForLabel *= 0.75; } staggerScore += (labelWidth <= spaceForLabel ? 1 : spaceForLabel / labelWidth); } if (calcRotate45) { if (spaceFor45Label == 0) { spaceFor45Label = cellWidth90 / 0.7071 - layoutLabelHeight; } var space = this.calculate45DegreeSpace(node, spaceFor45Label); rotate45Score += (labelWidth <= space ? 1 : space / labelWidth); } if (calcRotate90) { rotate90Score += (labelWidth <= cellWidth90 ? 1 : cellWidth90 / labelWidth); } } } var mode = 0; if (this._layoutMode == -1) { if (isHorizontal && this._allowStagger) { horizontalScore *= 1.1; staggerScore *= 1.1; } if ((staggerScore > horizontalScore) && (staggerScore >= rotate45Score) && (staggerScore >= rotate90Score)) { mode = 3; } else if ((rotate45Score > horizontalScore) && (rotate45Score >= rotate90Score)) { mode = 2; } else if (rotate90Score > horizontalScore) { mode = 1; } } else { if ((this._layoutMode == 3 && staggerStringsWontMatch) || !isHorizontal) { mode = 0; } else { mode = this._layoutMode; } } if (isHorizontal) { switch (mode) { case 3: this._layoutLabelSize = layoutLabelHeight * 2; break; case 2: this._layoutLabelSize = (layoutLabelWidth + layoutLabelHeight) * 0.7071; break; case 1: this._layoutLabelSize = layoutLabelWidth; break; case 0: default: this._layoutLabelSize = layoutLabelHeight; break; } } else { this._layoutLabelSize = layoutLabelWidth; } this._layoutLabelHeight = layoutLabelHeight; return mode; }, calculate45DegreeSpace : function(node, maxWidth) { var width = maxWidth; var tfm = node.rave_getParentNode().getAttribute("transform"); if (tfm != null) { var tfmString = tfm.toString(); var indexOfTrans = tfmString.indexOf("translate("); if (indexOfTrans != -1) { indexOfTrans += 10; var indexOfComma = tfmString.indexOf(",", indexOfTrans); if (indexOfComma != -1) { var xAmount = tfmString.substring(indexOfTrans, indexOfComma); var xLabelPos = + (xAmount); var width45Degrees = node.getBBox().width; var xLabelWidth = width45Degrees * 0.7071; var isBottom = this._orient == "bottom"; if (isBottom) { xLabelPos -= node.getBBox().height / 4; if (xLabelPos - xLabelWidth < this._bounds.x) { xLabelWidth = xLabelPos - this._bounds.x; width = xLabelWidth / 0.7071; } } else { if (xLabelPos + xLabelWidth > this._bounds.x + this._bounds.width) { xLabelWidth = (this._bounds.x + this._bounds.width) - xLabelPos; width = xLabelWidth / 0.7071; } } if (width > maxWidth) { width = maxWidth; } } } } return width; }, /** * @param (rave['internal']['Selector']) labels selector with all labels to be rotated * @param (rave['internal']['Selector']) g The parent selector of labels * @param (String) textAnchor The position of the anchor * @param alignmentMode One of HORIZONTAL, STAGGER, ROTATE45, ROTATE90 */ rotateLabels : function(g, labels, textAnchor, mode) { if (this._rotateLabels) { var self = this; var positioning = function(data, index, groupIndex) { var x = 0; var y = 0; var rotation_cy = 0; var isBottom = self._orient == "bottom"; if (mode == 3) { var cellIndex = self.getStaggerIndex(this); if (cellIndex != -1) { if (cellIndex % 2 == 1) { var staggerDirection = isBottom ? 1 : -1; y += (self._layoutLabelHeight * staggerDirection); } if (cellIndex == 0 && self._staggerAlignFirstAtStart) { x -= self._staggerCellWidth / 4; } else if (cellIndex == self.getStaggerCount() - 1 && self._staggerAlignLastAtEnd) { x += self._staggerCellWidth / 4; } } } else if (mode == 2) { if (isBottom) { x -= self._layoutLabelHeight; } else { x += self._layoutLabelHeight / 2; } } else if (mode == 1) { if (isBottom) { x -= (this.getBBox().height / 2 + self._layoutLabelHeight / 4); rotation_cy = ~~(self._padding / 4 + self._axis.tickSize()); } else { x -= (this.getBBox().height / 2 - self._layoutLabelHeight); rotation_cy = ~~-(self._padding / 4 + self._axis.tickSize()); } } var rotationDegrees = mode == 1 ? -90 : mode == 2 ? -45 : 0; return "translate(" + x + "," + y + ") rotate(" + rotationDegrees + ",0," + rotation_cy + ")"; }; labels.attr("transform", positioning).style("text-anchor", textAnchor); if (mode == 3) { if (this._staggerAlignFirstAtStart) { this._staggerFirstNode.rave_setStyle("text-anchor", "start"); } if (this._staggerAlignLastAtEnd) { this._staggerLastNode.rave_setStyle("text-anchor", "end"); } } } }, /** @expose */ axis : function() { return this._axis; }, /** * Draw the axis. The scale is non-null. * @param (rave['internal']['Selector']) g Selector group into which the axis is drawn. */ drawAxis : function(g) { var axisSelector = g.selectAll("g.axis").data([0]); axisSelector.enter().append("g").classed("axis", true).classed(this._orient, true); if (!this._axis) { this._axis = new rave['internal']['Axis'](); } if (this._hideOverlappingLabels) { this._textFlow.valignment("top").dropTextOnFail(false); } this._axis.ticksHandler(this._tickHandler); this._axis.orient(this._orient); this._axis.tickFormat(this._tickFormat); this._axis.tickPadding(10.0); if (this._scale.isOrdinal() || this._scale.isClustered()) { var labelHeight = 20.0; var isHorizontal = this._orient == "bottom" || this._orient == "top"; if (isHorizontal) { labelHeight /= 0.7071; } var range = this._scale.scale().rangeExtent(); var extent = + (range[1]) - + (range[0]); this._axis.ticks(extent / labelHeight); } else { if (this._tickMagnitude == null) { this._axis.ticks(10.0); } else { this._axis.ticks.apply(this._axis, [10.0, this._scale.scale().getTickFormat(), this._tickMagnitude]); } } var s = this._scale.scale(); if (this._scale.originalDomain()) { var sOrdinal = s.copy(); sOrdinal.domain(this._scale.originalDomain()); s = sOrdinal; var self = this; var originalDataLabelAccessor = (self._scale).originalDomainLabelAccessor(); var tickFormatter; if (originalDataLabelAccessor) { if (this._tickFormat) { tickFormatter = function(data, index, groupIndex) { return self._tickFormat.call(this, originalDataLabelAccessor.call(this, data, index, groupIndex), index, groupIndex); }; } else { tickFormatter = originalDataLabelAccessor; } } else { tickFormatter = this._tickFormat; } this._axis.tickFormat(tickFormatter); } this._axis.scale(s); axisSelector.call(this._axis); var g2 = rave.transition(axisSelector); if (!(g2.isTransition())) { axisSelector.selectAll("text").call(this._dropOverlap, this._hideOverlappingLabels); } axisSelector.selectAll("path.domain").classed("axis-line", true); axisSelector.selectAll("g.tick line").classed("axis-tick", true); if (this._fontChecker) { axisSelector.selectAll("g.tick text").classed("axis-label", true).call(this._fontChecker); } else { axisSelector.selectAll("g.tick text").classed("axis-label", true); } axisSelector.call(this._axisLineProperties); }, /** * Draw the axis title. * @param (rave['internal']['Selector']) g Selector group into which the title is drawn. */ drawTitle : function(g) { if (!this._displayAxisTitle || this._axisTitle == null || this._axisTitle.trim().length == 0 || !this._bounds) { g.selectAll("text.axis-title." + this._orient).remove(); return; } var x = 0; var y = 0; var dy = ""; var transform; if ("top" == this._orient) { x = this._elementRect.x + this._elementRect.width / 2; y = -this._bounds.height + this._padding / 4; dy = "0.75em"; } else if ("bottom" == this._orient) { x = this._elementRect.x + this._elementRect.width / 2; y = this._bounds.height - this._padding / 4; dy = "-0.25em"; } else if ("left" == this._orient) { x = -this._elementRect.y - this._elementRect.height / 2; y = -this._bounds.width + this._padding / 4; dy = "0.75em"; transform = "rotate(-90)"; } else { x = this._elementRect.y + this._elementRect.height / 2; y = -this._bounds.width + this._padding / 4; dy = "0.75em"; transform = "rotate(90)"; } var fillOpacity; { var tmp = g.append("text").attr("class", "axis-title " + this._orient); fillOpacity = tmp.style("fill-opacity"); tmp.remove(); } var label = g.selectAll("text.axis-title." + this._orient); if (label.size() == 0) { label.data([0]).enter().append("text").attr("class", "axis-title " + this._orient).style("text-anchor", "middle").attr("x", x).attr("y", y).attr("transform", transform).attr("dy", dy).style(this._titleStyle).text(this._axisTitle); if (this._fontChecker) { g.selectAll("text.axis-title." + this._orient).call(this._fontChecker); } } com_ibm_rave_bundles_utilities_TextCrossfader.textCrossFade(rave.transition(label), label.text(), this._axisTitle, fillOpacity, 0.25).style("text-anchor", "middle").attr("x", x).attr("y", y).attr("transform", transform).attr("dy", dy).style(this._titleStyle); }, getUnZoomedScale : function(scale) { var s = scale.copy(); if (s.getZoomTransform()) { s.getZoomTransform()(1, 0); } return s; }, isValid : function(data) { var s = this.getUnZoomedScale(this._axis.scale()); var v = + (s.call(null, data, 0, 0)); var range = this._axis.scale().range(); if (this._axis.scale().range().indexOf(v)> -1) { return true; } if (range[0] < v && v < range[1]) { return true; } if (range[0] > v && v > range[1]) { return true; } return false; }, /** * Apply label wrapping if requested. * @param (rave['internal']['Selector']) g * @param (int) mode One of HORIZONTAL, STAGGER, ROTATE45, ROTATE90 */ doLabelWrapping : function(g, mode) { if (this._displayTickLabels) { this._textFlow.valignment("top"); if (!this._hideOverlappingLabels) { this._textFlow.dropTextOnFail(true); } var d = this.labelExtent(g); if (!d || d[0] < 0 || d[1] < 0) { return; } var w = ~~ (d[0]); var h = ~~ (d[1]); if (mode == 2) { w = ~~(d[1] / 0.7071 - this._layoutLabelHeight); h = ~~(this._layoutLabelHeight / 0.7071); } else if (mode == 1) { var tmp = w; w = h; h = tmp; } var allowWrap = mode == 1; if (this._scale.isOrdinal() || this._scale.isClustered()) { var hActual = ~~ (this._layoutLabelHeight * 1.2); if (hActual > h) { h = hActual; } var isHorizontal = this._orient == "bottom" || this._orient == "top"; if (mode == 0 && !isHorizontal) { allowWrap = true; } } var self = this; var cellWidth = w; var cellHeight = h; this._textFlow.wrap(allowWrap).truncate(true).textTruncateIndicator(this._textTruncationIndicator != null ? this._textTruncationIndicator : "...").spacing(1.2).extent(function(data, index, groupIndex) { var width = cellWidth; var height = cellHeight; if (mode == 2) { var cellIndex = self.getStaggerIndex(this); if (cellIndex != -1) { width = ~~self.calculate45DegreeSpace(this, cellWidth); } } else if (mode == 3) { var cellIndex = self.getStaggerIndex(this); if (cellIndex != -1) { if (cellIndex == 0 && cellIndex == self.getStaggerCount() - 1) { width = cellWidth; } else if (cellIndex == 0 || cellIndex == self.getStaggerCount() - 1) { width = cellWidth * 3 / 2; } else { width = cellWidth * 2; } height = cellHeight / 2; } } return [width, height]; }); g.selectAll("g.tick > text").call(this._textFlow); } }, /** *Get the extent of the axis label bounds. If the axis bounds are non-null they are used as the axis bounds; otherwise the scale range and AXIS_LABEL_EXTENT_CONSTANT are used as the bounds.
If the axis scale has range bands, the label bounds are the size of the range bands in the dimension parallel to the axis and the size of the axis bounds in the other dimension. Otherwise the label bounds are the axis bounds.
If a title with non-empty text was created, the label bounds are reduced by the title font height in the dimension perpendicular to the axis (since the title is always placed at the edge of the bounds).
* @param (rave['internal']['Selector']) g Selector group for axis * @return (Array) The extent of the axis label bounds */ /** @expose */ labelExtent : function(g) { var isHorizontal = this._orient == "bottom" || this._orient == "top"; var w = this._bounds.width; var h = this._bounds.height; if (this._scale.scale().rangeBand) { var rangeBandValue = + (this._scale.scale().rangeBand()); if (isHorizontal) { w = rangeBandValue; } else { h = rangeBandValue; } } this.calcTitleExtent(g); if (isHorizontal) { h -= this._axis.tickSize(); h -= this._padding / 2; if (this._layoutTitleSize != 0) { h -= this._layoutTitleSize; h -= this._padding / 2; } } else { w -= this._axis.tickSize(); w -= this._padding / 2; if (this._layoutTitleSize != 0) { w -= this._layoutTitleSize; w -= this._padding / 2; } } return [w, h]; }, calcTitleExtent : function(g) { this._layoutTitleSize = 0; var title = g.selectAll("text.axis-title"); if (title.size() > 0) { var textHeight = title[0][0].getBBox().height; this._layoutTitleSize = textHeight; } }, /** * Set the role to one of the constants ROLE_X1 etc. defined in AxisComponent. * @param (String) role The new role * @return (com.ibm.rave.bundles.components.AxisComponentImpl) This object */ /** @expose */ setRole : function(role) { this._role = role; return this; }, /** * Set the ticks interval on the scale based on the magnitude. tickMagnitude represents power of 10. null value gives the default scale ticks. * @param (Number) tickMagnitude * @return (com.ibm.rave.bundles.component.AxisComponent) this */ /** @expose */ scaleTickMagnitude : function(tickMagnitude) { this._tickMagnitude = tickMagnitude; return this; }, /** * @param (rave['library']['internal']['CoordinateScaleImpl']) scale The new scale */ /** @expose */ scale : function(scale) { this._scale = scale ? scale : null; return this; }, /** * Only legal values are accepted, otherwise the orient is unchanged. * @param (String) orient The new orient */ orient$0 : function(orient) { if ("left" == orient || "bottom" == orient || "right" == orient || "top" == orient) { this._orient = orient; if (this._role == null) { if ("left" == orient) { this._role = "ROLE_Y1"; } else if ("bottom" == orient) { this._role = "ROLE_X1"; } else if ("right" == orient) { this._role = "ROLE_Y2"; } else { this._role = "ROLE_X2"; } } } return this; }, /** * Returns the current orientation string return The current orient */ orient$1 : function() { return this._orient; }, /** * @param (rave['internal']['RectStruct']) bounds The new bounds */ /** @expose */ bounds : function(bounds) { this._bounds = bounds; return this; }, /** @expose */ elementRect : function(elementRect) { this._elementRect = elementRect; return this; }, tickFormat$0 : function(tickFormat) { this._tickFormat = tickFormat; return this; }, tickFormat$1 : function() { return this._tickFormat; }, simplifiedTickFormat$0 : function(tickFormat) { this._simplifiedTickFormat = tickFormat; return this; }, simplifiedTickFormat$1 : function() { return this._simplifiedTickFormat; }, /** @expose */ displayAxisTitle : function(displayAxisTitle) { this._displayAxisTitle = displayAxisTitle; return this; }, /** @expose */ displayAxisLine : function(displayAxisLine) { this._displayAxisLine = displayAxisLine; return this; }, /** @expose */ displayTicks : function(displayTicks) { this._displayTicks = displayTicks; return this; }, /** @expose */ displayTickLabels : function(displayTickLabels) { this._displayTickLabels = displayTickLabels; return this; }, /** @expose */ allowAutomaticAxisLayoutToChangeOrientation : function(state) { this._allowAutoAxisLayoutToChangeOrientaiton = state; return this; }, /** @expose */ isAllowAutomaticAxisLayoutToChangeOrientation : function() { return this._allowAutoAxisLayoutToChangeOrientaiton; }, /** @expose */ showPanZoomTickLabels : function(showPanZoomTickLabels) { this._showPanZoomTickLabels = showPanZoomTickLabels; return this; }, /** @expose */ axisTitle : function(axisTitle) { this._axisTitle = axisTitle; return this; }, /** @expose */ axisColor : function(axisColor) { this._lineColor = axisColor; this._tickColor = axisColor; return this; }, /** @expose */ lineColor : function(lineColor) { this._lineColor = lineColor; return this; }, /** @expose */ tickColor : function(tickColor) { this._tickColor = tickColor; return this; }, /** @expose */ labelColor : function(labelColor) { this._labelStyle["fill"] = labelColor; return this; }, labelStyle$0 : function(fill, fontSize, fontFamily) { this._labelStyle["fill"] = fill; this._labelStyle["font-size"] = fontSize; this._labelStyle["font-family"] = fontFamily; return this; }, /** @expose */ titleColor : function(titleColor) { this._titleStyle["fill"] = titleColor; return this; }, titleStyle$0 : function(fill, fontSize, fontFamily) { this._titleStyle["fill"] = fill; this._titleStyle["font-size"] = fontSize; this._titleStyle["font-family"] = fontFamily; return this; }, /** * @param (int) padding The new padding */ /** @expose */ padding : function(padding) { this._padding = padding; return this; }, /** * @param mode LayoutMode for axis, one of: null (numeric axis), automatic, horizontal, stagger, rotate45, rotate90 */ /** @expose */ layoutMode : function(layoutMode) { this._layoutMode = -1; if (layoutMode != null) { if (layoutMode == "horizontal") { this._layoutMode = 0; } else if (layoutMode == "stagger") { this._layoutMode = 3; } else if (layoutMode == "rotate45") { this._layoutMode = 2; } else if (layoutMode == "rotate90") { this._layoutMode = 1; } } return this; }, /** * @param (boolean) allow Enable Stagger to be considered in the automatic layout algorithm */ /** @expose */ allowStagger : function(allow) { this._allowStagger = allow; return this; }, /** * @param (boolean) allow Enable Rotate 45 to be considered in the automatic layout algorithm */ /** @expose */ allowRotate45 : function(allow) { this._allowRotate45 = allow; return this; }, /** * @param (boolean) allow Enable Rotate 90 to be considered in the automatic layout algorithm */ /** @expose */ allowRotate90 : function(allow) { this._allowRotate90 = allow; return this; }, /** * @return (boolean) True if on the last call the axis rendered shapes, false otherwise */ renderedShapes : function() { return this._renderedShapes; }, labelStyle$1 : function(fontStyle) { this._labelStyle = com_ibm_rave_bundles_utilities_FontPropertyParser.parseCSSFont(fontStyle); return this; }, titleStyle$1 : function(fontStyle) { this._titleStyle = com_ibm_rave_bundles_utilities_FontPropertyParser.parseCSSFont(fontStyle); return this; }, /** * Determines whether the axis is swapped. * @return (boolean) True if axis is swapped */ isAxisSwapped : function() { return (((this._role == "ROLE_Y1" || this._role == "ROLE_Y2") && (this._orient == "top" || this._orient == "bottom")) || ((this._role == "ROLE_X1" || this._role == "ROLE_X2") && (this._orient == "right" || this._orient == "left"))); }, /** *Set the indicator to be used for truncated text
ex: indicator set to "..." , results in helloworld - > hello...
If the indicator is not set the default indicator "..." is used
* @param (String) indicator the string to be placed to indicated truncated text * @return (com.ibm.rave.bundles.component.AxisComponent) This component */ /** @expose */ textTruncateIndicator : function(indicator) { this._textTruncationIndicator = indicator; return this; }, /** * If at least one label collision request is pending we stop the label collision component, and shut down the label collision timer event. */ stopLabelDroppingUpdate : function() { this._pendingLabelTimer = false; }, /** * Start Rave timers with a delay of half the transition duration and the full transition duration. This will fire the label dropping at the halfway mark and at the end. * @param (rave['internal']['Selector']) labels the selection of valid labels for the end of the transition * @param (double) duration of the transition. If 0, we don't do anything. * @param (double) delay of the transition. Added to the duration to delay the updates. */ updateLabelDropping : function(labels, duration, delay) { var self = this; var start = delay + duration; var labelCollideCallback = function(elapsed) { if (!self._pendingLabelTimer) { return true; } labels.call(self._dropOverlap, self._hideOverlappingLabels); if (elapsed >= start) { self._pendingLabelTimer = false; return true; } return false; }; if (duration > 0) { this._pendingLabelTimer = true; rave.timer(labelCollideCallback, start); } }, doLabelWrappingAfterAnimation : function(g, labels, mode, duration, delay) { this._layoutTimerId++; var timerId = this._layoutTimerId; var self = this; var wrapCallback = function(elapsed) { if (self._layoutTimerId == timerId) { self.doLabelWrapping(g, mode); self.handleLabelsRotationAndPosition(g, labels, mode); } return true; }; rave.timer(wrapCallback, delay + duration); }, /** @expose */ preLayout : function() { this._layoutTitleSize = 0; this._layoutLabelSize = 0; this._layoutLabelHeight = 0; this._layoutAverageDigitWidth = 0; this._layoutSpillOver = 0; }, /** @expose */ getSizableType : function() { return this._scale.isOrdinal() || this._scale.isClustered() ? 1 : 0; }, /** @expose */ getSizableOrientation : function() { return this._orient; }, /** @expose */ getPreferredSize : function() { var layoutPaddingSize = 0; if (this._axis) { layoutPaddingSize = this._axis.tickSize(); if (this._layoutLabelSize != 0) { layoutPaddingSize += this._padding / 2; } if (this._layoutTitleSize != 0) { layoutPaddingSize += this._padding / 2; } } return this._layoutLabelSize + this._layoutAverageDigitWidth + this._layoutTitleSize + layoutPaddingSize + 2; }, /** @expose */ getSpillOverSize : function() { return this._layoutSpillOver; }, /** @expose */ orient : function(a0) { var args = arguments; if (args.length == 0) { return this.orient$1(); } return this.orient$0(a0); }, /** @expose */ tickFormat : function(a0) { var args = arguments; if (args.length == 0) { return this.tickFormat$1(); } return this.tickFormat$0(a0); }, /** @expose */ simplifiedTickFormat : function(a0) { var args = arguments; if (args.length == 0) { return this.simplifiedTickFormat$1(); } return this.simplifiedTickFormat$0(a0); }, /** @expose */ labelStyle : function(a0, a1, a2) { var args = arguments; if (args.length == 1) { return this.labelStyle$1(a0); } return this.labelStyle$0(a0, a1, a2); }, /** @expose */ titleStyle : function(a0, a1, a2) { var args = arguments; if (args.length == 1) { return this.titleStyle$1(a0); } return this.titleStyle$0(a0, a1, a2); } }); /** * Given the bounds for the axis and the orientation, return the [x,y] translation for the group containing the axis. These are the usual settings for d3 (RAVE core) axes, where the axis range (pixels) is in the global coordinates, then the axis is moved perpendicular to that to place it next to the chart. * @param (rave['internal']['RectStruct']) bounds Rectangle of the axis bounds * @param (String) orient Orient, "top", "bottom", "left", "right"; if not valid, "bottom" used * @return (double[]) Translation [x,y] */ /** @expose */ com_ibm_rave_bundles_components_AxisComponentImpl.getTranslation = function(bounds, orient) { if ("left" == orient) { return [bounds.x + bounds.width, 0.0]; } if ("right" == orient) { return [bounds.x, 0.0]; } if ("top" == orient) { return [0.0, bounds.y + bounds.height]; } return [0.0, bounds.y]; }; com_ibm_rave_bundles_components_AxisComponentImpl.NodeIndex = rave['internal']['Declare']({ //_node : null, _domainIndex : 0, /** @expose */ constructor : function(node, domainIndex) { this._node = node; this._domainIndex = domainIndex; }, /** @expose */ contains : function(node) { return node == this._node; }, /** @expose */ getIndex : function() { return this._domainIndex; } }); /** * Tick Handler for the axis. This will get called as the core axis is transitioned. */ com_ibm_rave_bundles_components_AxisComponentImpl.AxisTickHandler = rave['internal']['Declare'](rave['internal']['AbstractTickHandler'], { //_label : null, //_tick : null, _$functionClassMethod : function() { var _$self = function(args) { if (args !== null || arguments.length > 1){ args = Array.prototype.slice.call(arguments, 0); } { _$self.handle(args[0]); return null; } }; return _$self; }, constructor : function(label, tick) { this._label = label; this._tick = tick; }, /** @expose */ handle : function(ticks) { ticks.call(this._tick); ticks.call(this._label); } }); //com_ibm_rave_bundles_components_AxisComponentImpl.VISIBILITY = "visibility"; //com_ibm_rave_bundles_components_AxisComponentImpl.HIDDEN = "hidden"; /** @expose */ com_ibm_rave_bundles_components_AxisComponentImpl.LABEL_HIDDEN_FLAG = "__tickLabelHidden__"; /** @expose */ com_ibm_rave_bundles_components_AxisComponentImpl.PANZOOM_HIDDEN_FLAG = "__panZoomHidden__"; /** @expose */ com_ibm_rave_bundles_components_AxisComponentImpl.HIDDEN_COUNT = "__hiddenCount__"; /** @expose */ com_ibm_rave_bundles_components_AxisComponentImpl.PREFERRED_SPACE_PER_TICK = 20; /** @expose */ com_ibm_rave_bundles_components_AxisComponentImpl.PREFERRED_TICK_COUNT = 10; /** @expose */ com_ibm_rave_bundles_components_AxisComponentImpl.TICK_PADDING = 10; //com_ibm_rave_bundles_components_AxisComponentImpl.HORIZONTAL_WEIGHT = 1.1; com_ibm_rave_bundles_components_AxisComponentImpl.HORIZONTAL = 0; com_ibm_rave_bundles_components_AxisComponentImpl.ROTATE90 = 1; com_ibm_rave_bundles_components_AxisComponentImpl.ROTATE45 = 2; com_ibm_rave_bundles_components_AxisComponentImpl.STAGGER = 3; /** * Constant used for text flow spacing */ com_ibm_rave_bundles_components_AxisComponentImpl.TEXTFLOW_SPACING = 1.2; /** * Bottom axis orientation string. */ /** @expose */ com_ibm_rave_bundles_components_AxisComponentImpl.BOTTOM_ORIENTATION = "bottom"; /** * Top axis orientation string. */ /** @expose */ com_ibm_rave_bundles_components_AxisComponentImpl.TOP_ORIENTATION = "top"; /** * Left axis orientation string. */ /** @expose */ com_ibm_rave_bundles_components_AxisComponentImpl.LEFT_ORIENTATION = "left"; /** * Right axis orientation string. */ /** @expose */ com_ibm_rave_bundles_components_AxisComponentImpl.RIGHT_ORIENTATION = "right"; com_ibm_rave_bundles_components_AxisComponentImpl.AUTOMODE = -1; // $source: com/ibm/rave/bundles/components/GridComponentImpl /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED //@import com/ibm/rave/bundles/components/BundleComponentImpl (loadtime) // superclass //@import com/ibm/rave/bundles/components/StyleStructs (runtime) // new //@import com/ibm/rave/bundles/component/GridComponent (runtime) // GridComponent /** *Component to draw gridlines for an axis. The component is drawn into a Selector group, and the user of the component must translate the group to the axis position. Gridlines are created using the axis, setting the tick size to the dimension of the gridline space. For correct behavior the gridline component should be called after the axis has been called.
The properties are:
axis: The axis to use. If null, no gridlines are drawn. Default null.
orient: The axis orientation, one of "top", "bottom", "left", "right". Default "bottom".
bounds: A rectangle bounding the gridline area, used to find the line length. If null, no gridlines are drawn. Default null.
displayGridlines: Whether to draw the gridlines. Default false.
gridlineColor: A color-string for the grid lines. If null, no color is applied and the CSS defaults are used. Default null.
*/ var com_ibm_rave_bundles_components_GridComponentImpl = rave['internal']['Declare'](com_ibm_rave_bundles_components_BundleComponentImpl, { /** * The axis property */ //_axis : null, /** * Role, from the AxisComponent API */ //_role : null, /** * The orientation */ //_orient : null, /** * The bounds */ //_bounds : null, /** * Style of gridlines */ //_gridlineStyle : null, /** * Whether to display gridlines */ _displayGridlines : false, /** * After calling the component, this is true if shapes were rendered, false if they were cleared. */ _renderedShapes : false, /** * Construct, with all properties the defaults. */ /** @expose */ constructor : function() { this._axis = null; this._role = null; this._orient = "bottom"; this._bounds = null; this._displayGridlines = true; this._gridlineStyle = new com_ibm_rave_bundles_components_StyleStructs.LineStyle(); this._renderedShapes = false; }, /** @expose */ type : function() { return com_ibm_rave_bundles_component_GridComponent.COMPONENT_TYPE; }, /** @expose */ role : function() { return this._role; }, /** @expose */ execute : function(g) { this.preExecute(); if (!this._displayGridlines || !this._axis || !this._bounds) { g.selectAll("*").remove(); this._renderedShapes = false; return; } this._renderedShapes = true; var size = ("bottom" == this._orient || "top" == this._orient) ? this._bounds.height : this._bounds.width; var ticksHandler = this._axis.ticksHandler(); var tickSize = this._axis.tickSize(); var outerTickSize = this._axis.outerTickSize(); var tickFormat = this._axis.tickFormat(); var ax = this._axis.tickSize(-size, 0).tickFormat("").ticksHandler(null); g.call(ax); this._axis.tickSize(tickSize, outerTickSize).tickFormat(tickFormat).ticksHandler(ticksHandler); g.selectAll("g.tick line").classed("grid-tick", true); g.selectAll(".grid-tick").style("stroke", this._gridlineStyle._stroke).style("stroke-dasharray", (this._gridlineStyle._dashArray)); g.selectAll("path.domain").remove(); }, /** * @param (rave['internal']['Axis']) axis The new axis */ /** @expose */ axis : function(axis) { this._axis = axis; return this; }, /** * Set the role to one of the constants ROLE_X1 etc. defined in AxisComponent. * @param (String) role The new role * @return (com.ibm.rave.bundles.components.GridComponentImpl) This object */ /** @expose */ setRole : function(role) { this._role = role; return this; }, /** * Only legal values are accepted, otherwise the orient is unchanged. * @param (String) orient The new orient */ orient$0 : function(orient) { if ("left" == orient || "right" == orient || "bottom" == orient || "top" == orient) { this._orient = orient; } return this; }, /** * @param (rave['internal']['RectStruct']) bounds The new bounds */ /** @expose */ bounds : function(bounds) { this._bounds = bounds; return this; }, displayGridlines$0 : function(displayGridlines) { this._displayGridlines = displayGridlines; return this; }, /** @expose */ gridlineStyle : function(gridlineColor, dashArray) { this.gridlineColor(gridlineColor); this.dashArray(dashArray); return this; }, gridlineColor$0 : function(gridlineColor) { this._gridlineStyle._stroke = (gridlineColor != null && gridlineColor.length > 0) ? gridlineColor : null; return this; }, dashArray$0 : function(dashArray) { this._gridlineStyle._dashArray = (dashArray != null && dashArray.length > 0) ? dashArray : null; return this; }, /** * @return (String) The orientation of the gridline. */ orient$1 : function() { return this._orient; }, displayGridlines$1 : function() { return this._displayGridlines; }, gridlineColor$1 : function() { return this._gridlineStyle._stroke; }, dashArray$1 : function() { return this._gridlineStyle._dashArray; }, /** * @return (boolean) True if on the last call the axis rendered shapes, false otherwise */ renderedShapes : function() { return this._renderedShapes; }, /** @expose */ orient : function(a0) { var args = arguments; if (args.length == 0) { return this.orient$1(); } return this.orient$0(a0); }, /** @expose */ displayGridlines : function(a0) { var args = arguments; if (args.length == 0) { return this.displayGridlines$1(); } return this.displayGridlines$0(a0); }, /** @expose */ gridlineColor : function(a0) { var args = arguments; if (args.length == 0) { return this.gridlineColor$1(); } return this.gridlineColor$0(a0); }, /** @expose */ dashArray : function(a0) { var args = arguments; if (args.length == 0) { return this.dashArray$1(); } return this.dashArray$0(a0); } }); // $source: com/ibm/rave/bundles/components/KeyedBundleComponentImpl /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED //@import com/ibm/rave/bundles/components/BundleComponentImpl (loadtime) // superclass /** * This type of component generates scene nodes based on a provided data set. Accordingly, any component deriving from this class can (and should) make use of this class's key function. Typically this key function will be passed to the second argument of {@link this.Selector#this.data(, rave['internal']['ValueFunction'])} method in Rave Core, when joining data to scene nodes. For more information on how key functions are used, see the documentation for {@link this.Selector#this.data(, rave['internal']['ValueFunction'])} in Rave Core. * @param < (com.ibm.rave.bundles.components.KeyedBundleComponentImpl) T > Any class that extends this component type must have a self reference in order to support method chaining of the {@link this.KeyedBundleComponentImpl#this.key(rave['internal']['SingleValueFunction'])} method. For example:public class MyComponent extends DataBasedBundleComponent*/ var com_ibm_rave_bundles_components_KeyedBundleComponentImpl = rave['internal']['Declare'](com_ibm_rave_bundles_components_BundleComponentImpl, { //keyFunction : null, /** * Set the key function this component should use when joining data to scene nodes. * @param (rave['internal']['SingleValueFunction']) keyFunction This function will be passed each datum individually and must return a unique value (a key). * @return (com.ibm.rave.bundles.components.KeyedBundleComponentImpl) This. */ /** @expose */ key : function(keyFunction) { this.keyFunction = keyFunction; return this; }, /** * Returns a {@link (rave['internal']['ValueFunction']) ValueFunction} that wraps the provided key function. */ /** @expose */ getKey : function() { if (!this.keyFunction) { return null; } var self = this; return function(datum, index, groupIndex) { return self.keyFunction(datum); }; } }); // $source: com/ibm/rave/bundles/components/BoxplotComponentImpl /************************************************************************ ** IBM Confidential ** ** IBM Business Analytics: Rapidly Adaptive Visualization Engine ** ** (C) Copyright IBM Corp. 2017 ** ** The source code for this program is not published or otherwise divested of its trade secrets, ** irrespective of what has been deposited with the U.S. Copyright Office. ************************************************************************/ // GENERATED //@import com/ibm/rave/bundles/components/KeyedBundleComponentImpl (loadtime) // superclass //@import com/ibm/rave/bundles/components/StyleStructs (runtime) // new //@import com/ibm/rave/bundles/component/BoxplotComponent (runtime) // COMPONENT_TYPE /** *{ ... ... MyComponent c = new MyComponent(); c.someSetter(arg) .key(keyFunction) // returns the MyComponent instance, rather than a DataBasedBundleComponent instance. .otherSetter(arg2);
Component to draw boxplot elements. The data is an array of BoxplotDatum. One boxplot small multiple is drawn per BoxplotDatum. The boxplot X data value is used as a key for the small multiples (this is not the key of the keyed bundle component).
Each small multiple draws the boxplot as a group node. The group node has the boxplot shapes (box, median plus, mean line, fence whiskers) and the outliers. The group node and box shapes have the BoxplotDatum as datum. The outliers have the original data for the point as datum.
The overall structure is:
<g class="elements"> <g class="boxplot-element"> <g class="boxplot-boxcontainer"> <rect class="element-shape boxplot-box" /> ... lines for the median, mean, whiskers </g> <circle class="element-shape boxplot-point boxplot-outlierpoint" /> ... more circles for outlier and extreme points </g> ... one group per boxplot </g>
The component data properties include the data, the X and Y coordinate scales, and the original data Y accessor (used for the outliers, where the datum is the original data). The component key is the original data key accessor and is only used on the outliers; the boxplot groups are matched by the X values when the data is created.
The component creates its own transitions for the small multiples. The effect type and duration control this.
The boxplot size is the width in pixels of the boxplot rectangle. The whiskers are 80% of this. The median plus is the smaller of 12 pixels or the size. The outlier radius is the smaller of BOXPLOT_OUTLIER_MAX_RADIUS pixels or half the size.
The styling is set with properties.
This component is somewhat experimental, though I think the results are good and we should see about moving other components to this model. The approach was prompted by the boxplot UX for interactivity.
On selecting or highlighting any of the parts of a boxplot (the box, whiskers, or mean and median symbols), all the parts are to change styles. The points are all treated independently. That meant custom action operations, since the default operations only affect the event target node. The operations get the target node, and find the logical shape for that node. This is the shape itself for a point, and the <g> containing the shape for boxplot parts. The action operation is then applied to that logical shape; for boxplots, this adjusts all the children of the shape.
Some of the custom highlight and selection operations used in other charts use properties to record the original styling of the shape, so that styling can be restored when the selection and highlighting changes. That approach is used here, except that the properties are set during the components enter/update/exit pattern. The properties are then used both to style the shape in the update, and to chagne the styling as the selection and highlighting state changes.
Some of the custom highlight and selection operations used in other charts use properties to set selection and highlighting state information. That approach is used here. The {@link #"__rave_selection"} indicates the selection state, and can be null, {@link #"1"} , or {@link #"0"} . The operations change the values of these properties, then restyle the shape. The style values are calculated from the styling properties and the selection and highlighting state properties.
*/ var com_ibm_rave_bundles_components_BoxplotComponentImpl = rave['internal']['Declare'](com_ibm_rave_bundles_components_KeyedBundleComponentImpl, { /** * Context for the bundle using the component */ //_context : null, /** * Data to be drawn. */ //_data : null, /** * X-axis scale. Always ordinal. */ //_xScale : null, /** * Y-axis scale. Always linear. */ //_yScale : null, /** * Accessor which when applied to the original data, returns the Y-value */ //_originalDataYAccessor : null, /** * Color palette */ //_colorPalette : null, /** * Accessor which when applied to the original data, returns the color value */ //_originalDataColorAccessor : null, /** * Entrance effect */ //_effect : null, /** * Styling of the boxplot box; currently all null (using CSS), but if non-null will override CSS. */ //_boxStyle : null, /** * Styling of the boxplot whiskers; currently all null (using CSS), but if non-null will override CSS. */ //_whiskerStyle : null, /** * Styling of the boxplot median plus; currently all null (using CSS), but if non-null will override CSS. */ //_medianStyle : null, /** * Styling of the boxplot mean plus; currently all null (using CSS), but if non-null will override CSS. */ //_meanStyle : null, /** * Styling of the boxplot outlier circles; currently all null (using CSS), but if non-null will override CSS. */ //_outlierStyle : null, /** * Styling of the boxplot extremum circles; currently all null (using CSS), but if non-null will override CSS. */ //_extremeStyle : null, /** * Value function applied to a BoxplotDatum that returns the X value */ //_boxplotDatumKeyAccessor : null, /** * Effect duration */ _duration : 0, /** * Size (width in pixels) of boxplot. */ _boxplotSize : 0, /** * Whether the data has changed */ _dataChanged : false, /** * Construct */ /** @expose */ constructor : function(context) { this._context = context; this._data = null; this._xScale = null; this._yScale = null; this._originalDataYAccessor = null; this._colorPalette = null; this._originalDataColorAccessor = null; this._effect = "none"; this._duration = 0; this._dataChanged = false; this._boxStyle = new com_ibm_rave_bundles_components_StyleStructs.ShapeStyle(); this._whiskerStyle = new com_ibm_rave_bundles_components_StyleStructs.LineStyle(); this._medianStyle = new com_ibm_rave_bundles_components_StyleStructs.LineStyle(); this._meanStyle = new com_ibm_rave_bundles_components_StyleStructs.LineStyle(); this._outlierStyle = new com_ibm_rave_bundles_components_StyleStructs.ShapeStyle(); this._extremeStyle = new com_ibm_rave_bundles_components_StyleStructs.ShapeStyle(); this._boxplotDatumKeyAccessor = function(data, index, groupIndex) { return (data)._key; }; }, /** @expose */ type : function() { return com_ibm_rave_bundles_component_BoxplotComponent.COMPONENT_TYPE; }, /** @expose */ data : function(data) { this._data = data; this._dataChanged = true; return this; }, /** @expose */ xScale : function(xScale) { this._xScale = xScale; return this; }, /** @expose */ yScale : function(yScale) { this._yScale = yScale; return this; }, /** @expose */ yAccessor : function(yAccessor) { this._originalDataYAccessor = yAccessor; return this; }, /** @expose */ colorAccessor : function(colorAccessor) { this._originalDataColorAccessor = colorAccessor; return this; }, /** @expose */ colorPalette : function(colorPalette) { this._colorPalette = colorPalette; return this; }, /** @expose */ effect : function(effect) { this._effect = effect; return this; }, /** @expose */ duration : function(duration) { this._duration = (duration > 0) ? duration : 0; return this; }, /** @expose */ boxplotSize : function(boxplotSize) { this._boxplotSize = Math.max(2.0, boxplotSize); return this; }, /** @expose */ boxStyle : function(fill, stroke, strokeWidth) { this._boxStyle._fill = fill; this._boxStyle._stroke = stroke; this._boxStyle._strokeWidth = strokeWidth; return this; }, /** @expose */ whiskerStyle : function(stroke, strokeWidth) { this._whiskerStyle._stroke = stroke; this._whiskerStyle._strokeWidth = strokeWidth; return this; }, /** @expose */ medianStyle : function(stroke, strokeWidth) { this._medianStyle._stroke = stroke; this._medianStyle._strokeWidth = strokeWidth; return this; }, /** @expose */ meanStyle : function(stroke, strokeWidth) { this._meanStyle._stroke = stroke; this._meanStyle._strokeWidth = strokeWidth; return this; }, /** @expose */ outlierStyle : function(fill, stroke, strokeWidth) { this._outlierStyle._fill = fill; this._outlierStyle._stroke = stroke; this._outlierStyle._strokeWidth = strokeWidth; return this; }, /** @expose */ extremeStyle : function(fill, stroke, strokeWidth) { this._extremeStyle._fill = fill; this._extremeStyle._stroke = stroke; this._extremeStyle._strokeWidth = strokeWidth; return this; }, /** @expose */ execute : function(g) { this.preExecute(); if (!this._data || !this._xScale || !this._yScale || !this._originalDataYAccessor) { g.selectAll("g." + "boxplot-element").remove(); return; } var boxplotGroups = g.selectAll("g." + "boxplot-element").data(this._data, this._boxplotDatumKeyAccessor); boxplotGroups.exit().remove(); this.enterBoxplotGroups(boxplotGroups.enter()); this.updateBoxplotGroups(boxplotGroups); this._dataChanged = false; this._duration = 0; }, /** * Add new g.boxplot-element groups to the chart for an enter selector. The new shape styles and geometry are initialized, based on the entrance effect. * @param (rave['internal']['Selector']) groups The enter selector */ enterBoxplotGroups : function(groups) { var self = this; var grow = "grow" == this._effect && this._duration > 0; groups.append("g").attr("class", "boxplot-element").each(function(data, index, groupIndex) { var g = rave.select(this); var d = data; var c = g.append("g").classed("boxplot-boxcontainer", true); c.append("rect").classed("element-shape", true).classed("boxplot-box", true); c.append("line").classed("element-shape", true).classed("boxplot-whisker", true).classed("boxplot-upperwhiskerbar", true); c.append("line").classed("element-shape", true).classed("boxplot-whisker", true).classed("boxplot-upperwhiskerline", true); c.append("line").classed("element-shape", true).classed("boxplot-whisker", true).classed("boxplot-lowerwhiskerline", true); c.append("line").classed("element-shape", true).classed("boxplot-whisker", true).classed("boxplot-lowerwhiskerbar", true); c.append("line").classed("element-shape", true).classed("boxplot-median", true); c.append("path").classed("element-shape", true).classed("boxplot-mean", true); self.updateOutliers(g, d); self.setStyleProperties(g, d); self.updateBoxplot(g, d, grow); }); }, /** * Update all the g.boxplot-element groups in a selection with their final geometry and styling. If an effect is required, creates a transition for the update. * @param (rave['internal']['Selector']) groups The selection of g.boxplot-element groups */ updateBoxplotGroups : function(groups) { var self = this; var grow = this._duration > 0 && "grow" == this._effect; var doTransition = this._duration > 0 && !("none" == this._effect); groups.each(function(data, index, groupIndex) { var g = rave.select(this); var d = data; self.updateOutliers(g, d); self.setStyleProperties(g, d); if (grow) { self.updateBoxplot(g, d, grow); } self.updateBoxplot(doTransition ? g.transition().duration(self._duration) : g, d, false); }); }, /** * Match the outlier shapes in a boxplot group to the data. Does a data join with enter/exit. Does not update shape geometry. * @param (rave['internal']['Selector']) g Selector for the boxplot group * @param (com.ibm.rave.bundles.data.BoxplotDatum) d Datum for the boxplot */ updateOutliers : function(g, d) { var self = this; var outliers = g.selectAll("circle." + "boxplot-point").data(d._outliers, this.getKey()); outliers.enter().append("circle").classed("element-shape", true).classed("boxplot-point", true); outliers.exit().remove(); var lowerExtreme = d.lowerExtreme(); var upperExtreme = d.upperExtremum(); g.selectAll("circle." + "boxplot-point").classed("boxplot-outlier-point", function(data, index, groupIndex) { var yv = + (self._originalDataYAccessor(data)); return !(yv < lowerExtreme || yv > upperExtreme); }).classed("boxplot-extreme-point", function(data, index, groupIndex) { var yv = + (self._originalDataYAccessor(data)); return (yv < lowerExtreme || yv > upperExtreme); }); }, /** * Set the geometry and styling of the boxplot group and boxplot shapes in a small multiple. Sets the geometry of all outlier shapes. The shapes must already exist, and the style properties must be set. * @param (rave['internal']['Selection']) g Selector for the g.boxplot-element * @param (com.ibm.rave.bundles.data.BoxplotDatum) d Boxplot datum * @param (boolean) grow If true, the geometry is set for the "grow" enter effect * @param paletteColor Color to use for the boxplot shapes */ updateBoxplot : function(g, d, grow) { var self = this; g.attr("transform", "translate(" + this._xScale.center(d._x) + ",0)"); var median = this._yScale.center(d._median); var lowerFence = grow ? median : this._yScale.center(d.lowerFence()); var lowerHinge = grow ? median : this._yScale.center(d._lowerHinge); var mean = grow ? median : this._yScale.center(d._mean); var upperHinge = grow ? median : this._yScale.center(d._upperHinge); var upperFence = grow ? median : this._yScale.center(d.upperFence()); var rectHalfWidth = this._boxplotSize / 2.0; var whiskerHalfWidth = 0.8 * rectHalfWidth; var medianHalfWidth = rectHalfWidth - 1; var meanHalfWidth = Math.min(6.0, rectHalfWidth); var outlierRadius = Math.min(4.0, rectHalfWidth); var s; s = g.select("rect." + "boxplot-box"); s.attr("x", -rectHalfWidth).attr("y", Math.min(lowerHinge, upperHinge)).attr("width", 2.0 * rectHalfWidth).attr("height", Math.abs(upperHinge - lowerHinge)); s = g.select("line." + "boxplot-upperwhiskerbar"); s.attr("x1", -whiskerHalfWidth).attr("x2", whiskerHalfWidth).attr("y1", upperFence).attr("y2", upperFence); s = g.select("line." + "boxplot-upperwhiskerline"); s.attr("x1", 0).attr("x2", 0).attr("y1", upperHinge).attr("y2", upperFence); s = g.select("line." + "boxplot-lowerwhiskerbar"); s.attr("x1", -whiskerHalfWidth).attr("x2", whiskerHalfWidth).attr("y1", lowerFence).attr("y2", lowerFence); s = g.select("line." + "boxplot-lowerwhiskerline"); s.attr("x1", 0).attr("x2", 0).attr("y1", lowerHinge).attr("y2", lowerFence); s = g.selectAll("line." + "boxplot-whisker"); s = g.select("line." + "boxplot-median"); s.attr("x1", -medianHalfWidth).attr("x2", medianHalfWidth).attr("y1", median).attr("y2", median); s = g.select("path." + "boxplot-mean"); s.attr("d", "M" + (-meanHalfWidth) + "," + mean + "L" + meanHalfWidth + "," + mean + "M0," + (mean - meanHalfWidth) + "L0," + (mean + meanHalfWidth)); s = g.selectAll("circle." + "boxplot-point"); s.attr("cx", 0).attr("cy", 0).attr("r", outlierRadius); if (grow) { s.attr("transform", "translate(0," + median + ")"); } else { s.attr("transform", function(data, index, groupIndex) { return "translate(0," + + (self._yScale.center(self._originalDataYAccessor(data))) + ")"; }); } this.applyShapeStyles(g.selectAll("." + "element-shape")); }, /** * Set the styling properties of the boxplot shapes in a small multiple. If the data changed, also clear the selection state properties. * @param (rave['internal']['Selector']) g Selector for the g.boxplot-element * @param (com.ibm.rave.bundles.data.BoxplotDatum) d Boxplot datum */ setStyleProperties : function(g, d) { if (this._dataChanged) { g.selectAll("*").property("__rave_highlight", null).property("__rave_selection", null); } var color = "#4b8400"; if (this._colorPalette) { if (this._originalDataColorAccessor) { this._colorPalette.setAccessor(this._originalDataColorAccessor); color = this._colorPalette.call(null, d._data[0], 0, 0); } else { color = this._colorPalette.call(null, null, 0, 0); } } this.setShapeStyleProperties(g.select("rect." + "boxplot-box"), this._boxStyle, color, color); this.setLineStyleProperties(g.selectAll("line." + "boxplot-whisker"), this._whiskerStyle, color); this.setLineStyleProperties(g.select("line." + "boxplot-median"), this._medianStyle, null); this.setLineStyleProperties(g.select("path." + "boxplot-mean"), this._meanStyle, null); this.setShapeStyleProperties(g.selectAll("circle." + "boxplot-outlier-point"), this._outlierStyle, null, color); this.setShapeStyleProperties(g.selectAll("circle." + "boxplot-extreme-point"), this._extremeStyle, color, color); }, /** * Set the original-style properties for a filled shape. Only called when not redrawing.Convert boxplot data model into array of BoxplotDatum. The x, y, and optional c accessors are applied to the data objects to get the X, Y, and color values.
Points are grouped by a key. When the c accessor is null, the key is the X value value. When the c accessor is non-null, the key is the pair of (X,color). Points for which the key or the Y value are null, or for which the data scale returns null when applied to the key, are ignored.
The boxplot datum X is the X value when isClustered is false, or the key when it is true.
* @param (Array) data Non-null, possibly-empty list of data objects * @param (rave['library']['internal']['CoordinateScaleImpl']) dataScale Scale used to test if the values are in the domain * @param (boolean) isClustered Whether the data is clustered * @param (rave['internal']['SingleValueFunction']) x Non-null accessor returning the "x" value * @param (rave['internal']['SingleValueFunction']) y Non-null accessor returning the "y" value * @param (rave['internal']['SingleValueFunction']) c Possibly-null accessor returning the "color" value * @return (Array) List of BoxplotDatum */ /** @expose */ com_ibm_rave_bundles_data_BoxplotDataUtilities.makeData = function(data, dataScale, isClustered, x, y, c) { var result = []; if (!dataScale) { return result; } var clustered = isClustered && c; var keyFunc = (!c) ? x : function(d) { var xv = x(d); var cv = c(d); return (xv != null && cv != null) ? [xv, cv] : null; }; var dataMap = {}; var xMap = {}; for (var __i_enFor0 = 0, __exp_enFor0 = data, __len_enFor0 = __exp_enFor0.length; __i_enFor0 < __len_enFor0; ++__i_enFor0) { var d = __exp_enFor0[__i_enFor0]; var key = keyFunc(d); var yv = y(d); if (key != null && yv != null) { var xc = dataScale.center(key); if (xc != null) { var v = dataMap[xc]; if (!v) { v = []; dataMap[xc] = v; xMap[xc] = clustered ? key : x(d); } v.push(d); } } } for (var __i_enFor1 = 0, __exp_enFor1 = Object.keys(dataMap), __len_enFor1 = __exp_enFor1.length; __i_enFor1 < __len_enFor1; ++__i_enFor1) { var xv = __exp_enFor1[__i_enFor1]; result.push(com_ibm_rave_bundles_data_BoxplotDataUtilities.create(xMap[xv], xv, dataMap[xv], y)); } return result; }; /** * Create a boxplot datum from a list of original integrator data. The data does not have to be sorted by the y-values. The list and accessor must be non-null, and the accessor must return a non-null Number for every object in the list. * @param (Object) xValue The x-value * @param (Array) data The list of data * @param (rave['internal']['SingleValueFunction']) y Accessor that returns the "y" value when applied to a data object * @return (com.ibm.rave.bundles.data.BoxplotDatum) Boxplot datum */ com_ibm_rave_bundles_data_BoxplotDataUtilities.create = function(xValue, keyValue, data, y) { var len = data.length; if (len == 1) { var m = + (y(data[0])); return new com_ibm_rave_bundles_data_BoxplotDatum(xValue, keyValue, m, m, m, m, m, m, [], data); } var sorted = []; var mean = 0.0; for (var i = 0; i < len; ++i) { var v = (y(data[i])); sorted.push(v); mean += v; } mean /= len; sorted.sort(function(obj1, obj2) { var v = obj1 - obj2; return (v < 0) ? -1 : (v > 0) ? 1 : 0; }); var values = []; for (var i = 0; i < len; ++i) { values[i] = sorted[i]; } var median = com_ibm_rave_bundles_data_BoxplotDataUtilities.quantile(values, 0.5); var upperHinge = com_ibm_rave_bundles_data_BoxplotDataUtilities.quantile(values, 0.75); var lowerHinge = com_ibm_rave_bundles_data_BoxplotDataUtilities.quantile(values, 0.25); var del = 1.5 * (upperHinge - lowerHinge); var lowerFence = lowerHinge - del; var upperFence = upperHinge + del; var outliers = []; for (var i = 0; i < len; ++i) { var datum = data[i]; var yv = y(datum); var v = + (yv); if (v < lowerFence || v > upperFence) { var d = new com_ibm_rave_bundles_data_PointDataUtilities.PointDatum(); d._x = xValue; d._y = yv; d._originalData = datum; outliers.push(d); } } return new com_ibm_rave_bundles_data_BoxplotDatum(xValue, keyValue, mean, values[0], lowerHinge, median, upperHinge, values[len - 1], outliers, data); }; /** * From the Rave.Quantile, but using double[] and without the gets and ObjectConverter * @param (double[]) values Sorted array of values * @param (double) q Quantile value between 0.0 and 1.0 * @return (double) Value of the */ com_ibm_rave_bundles_data_BoxplotDataUtilities.quantile = function(values, q) { var f = (values.length - 1) * q + 1; var i = Math.floor(f); var v = values[i - 1]; var r = f - i; return (r != 0) ? v + r * (values[i] - v) : v; }; })(); },{"./configuration/configuration.json":1,"./i18n/messages_en.json":2,"./vizlibrary-boxplot.css":4,"./vizlibrary.css":5}],4:[function(require,module,exports){ var css = ".vizlibrary-boxplot .bundle-shape {\n fill: #ccc;\n fill-opacity: 1.0;\n}\n.vizlibrary-boxplot .boxplot-box {\n fill: #4b8400;\n}\n.vizlibrary-boxplot .boxplot-whisker {\n stroke: #4b8400;\n stroke-width: 1px;\n}\n.vizlibrary-boxplot .boxplot-mean {\n stroke: white;\n stroke-width: 1.5px;\n pointer-events: none;\n}\n.vizlibrary-boxplot .boxplot-median {\n stroke: white;\n stroke-width: 1.5px;\n pointer-events: none;\n}\n.vizlibrary-boxplot .boxplot-outlier-point {\n fill: white;\n stroke: #4b8400;\n stroke-width: 1px;\n}\n.vizlibrary-boxplot .boxplot-extreme-point {\n fill: #4b8400;\n stroke: #4b8400;\n stroke-width: 1px;\n}\n"; (require("browserify-css").createStyle(css, { "href": "dist/bundles/rave-library-boxplot/node/rave-library-boxplot/vizlibrary-boxplot.css"})); module.exports = css; },{"browserify-css":6}],5:[function(require,module,exports){ var css = ".vizlibrary {\n font-family: Arial, Tahoma, 'Arial Unicode MS', 'Andale WT', 'MS UI Gothic', Gulim, SimSun, PMingLiU, Raghu8, sans-serif;\n font-style: normal;\n}\n/*\n * Chart background rectangle, transparent\n */\n.vizlibrary rect.background.elements {\n fill-opacity: 0.0;\n}\n/*\n * Axes.\n */\n.vizlibrary .axis .tick text {\n font-weight: 300;\n font-size: 14px;\n fill: #3c4646;\n}\n.vizlibrary .axis .tick line {\n fill: none;\n stroke: #eee;\n}\n.vizlibrary .axis path {\n fill: none;\n stroke: #eee;\n}\n/*Axis title\n*/\n.vizlibrary .axis .axislabel {\n font-weight: 500;\n font-size: 14px;\n fill: #323c3c;\n}\n/*\n * Axis callout.\n */\n.vizlibrary .axis-callout {\n pointer-events: none;\n /* Prevent the callout lines from intercepting mouseover events on the element shapes */\n}\n.vizlibrary .callout line {\n stroke: #3c4646;\n stroke-dasharray: 5,5;\n}\n.vizlibrary .callout .label path {\n fill: #3c4646;\n stroke-width: 0px;\n}\n.vizlibrary .callout .label text {\n font-weight: 300;\n font-size: 14px;\n fill: white;\n}\n/*Grid lines*/\n.vizlibrary g.grid g.tick {\n stroke: #dfe9e9;\n stroke-width: 1px;\n}\n/*Legend title*/\n.vizlibrary .legendTitle {\n font-weight: 500;\n font-size: 18px;\n fill: #323c3c;\n}\n/*Legend label*/\n.vizlibrary .legendLabel {\n font-weight: 300;\n font-size: 14px;\n fill: #3c4646;\n}\n.vizlibrary .legendBBox {\n pointer-events: none;\n}\n"; (require("browserify-css").createStyle(css, { "href": "dist/bundles/rave-library-boxplot/node/rave-library-boxplot/vizlibrary.css"})); module.exports = css; },{"browserify-css":6}],6:[function(require,module,exports){ 'use strict'; // For more information about browser field, check out the browser field at https://github.com/substack/browserify-handbook#browser-field. module.exports = { // Create a tag with optional data attributes createLink: function(href, attributes) { var head = document.head || document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = href; link.rel = 'stylesheet'; for (var key in attributes) { if ( ! attributes.hasOwnProperty(key)) { continue; } var value = attributes[key]; link.setAttribute('data-' + key, value); } head.appendChild(link); }, // Create a