Source: src/main/javascript/oracle/oj/ojgauge/ojledgauge.js

Oracle® JavaScript Extension Toolkit (JET)
1.1.2

E65298-01

/**
 * @ojcomponent oj.ojLedGauge
 * @augments oj.dvtBaseGauge
 * @since 0.7
 * 
 * @classdesc
 * <h3 id="ledGaugeOverview-section">
 *   JET LED Gauge Component
 *   <a class="bookmarkable-link" title="Bookmarkable Link" href="#ledGaugeOverview-section"></a>
 * </h3>
 * 
 * <p>LED gauge component for JET.  LED gauges are used to highlight a specific metric value in relation to its 
 * thresholds.<p>
 * 
 * {@ojinclude "name":"warning"}
 * 
 * <pre class="prettyprint">
 * <code>
 * <div data-bind="ojComponent: {
 *   component: 'ojLedGauge',
 *   value: 63, min: 0, max: 100, 
 *   thresholds: [{max: 33}, {max: 67}, {}]
 * }"/>
 * </code>
 * </pre>
 * 
 * <h3 id="touch-section">
 *   Touch End User Information
 *   <a class="bookmarkable-link" title="Bookmarkable Link" href="#touch-section"></a>
 * </h3>
 *
 * {@ojinclude "name":"touchDoc"}
 *
 * <h3 id="keyboard-section">
 *   Keyboard End User Information
 *   <a class="bookmarkable-link" title="Bookmarkable Link" href="#keyboard-section"></a>
 * </h3>
 *
 * {@ojinclude "name":"keyboardDoc"}
 *
 * {@ojinclude "name":"a11y"}
 * 
 * {@ojinclude "name":"rtl"}
 * 
 * @desc Creates a JET LED Gauge.
 * @example <caption>Initialize the LED Gauge with no options specified:</caption>
 * $(".selector").ojLedGauge();
 * 
 * @example <caption>Initialize the LED Gauge with some options:</caption>
 * $(".selector").ojLedGauge({value: 63, min: 0, max: 100, thresholds: [{max: 33}, {max: 67}, {}]});
 * 
 * @example <caption>Initialize the LED Gauge via the JET <code class="prettyprint">ojComponent</code> binding:</caption>
 * <div data-bind="ojComponent: {component: 'ojLedGauge'}">
 */
oj.__registerWidget('oj.ojLedGauge', $['oj']['dvtBaseGauge'], 
{
  widgetEventPrefix : "oj", 
  options: {},
  
  //** @inheritdoc */
  _CreateDvtComponent : function(context, callback, callbackObj) {
    return dvt.DvtLedGauge.newInstance(context, callback, callbackObj);
  },
  
  //** @inheritdoc */
  _ConvertSubIdToLocator : function(subId) {
    var locator = {};
    
    if(subId == 'tooltip') {
      locator['subId'] = 'oj-ledgauge-tooltip';
    }
    return locator;
  },
  
  //** @inheritdoc */
  _GetComponentStyleClasses : function() {
    var styleClasses = this._super();
    styleClasses.push('oj-ledgauge');
    return styleClasses;
  },
  
  //** @inheritdoc */
  _Render : function() {
    // Display the title of the surrounding div as the tooltip. Remove title from div to avoid browser default tooltip.
    if(this.element.attr('title'))
    {
      this.options['shortDesc'] =  this.element.attr('title');
      this.element.data( this.element,'title', this.element.attr('title'));
      this.element.removeAttr('title');
    }
    else if (this.element.data('title'))
      this.options['shortDesc'] =  this.element.data('title');
  
    // Call the super to render
    this._super();
  },
  
  /**
   * Returns the gauge's metric label. 
   * @return {Object} The metric label object
   * @expose
   * @instance
   * @memberof oj.ojLedGauge
   */
  getMetricLabel: function() {
    var auto = this._component.getAutomation();
    return auto.getMetricLabel();
  }
});