/**
* @ojcomponent oj.ojSparkChart
* @augments oj.dvtBaseComponent
* @since 0.7
*
* @classdesc
* <h3 id="sparkChartOverview-section">
* JET Spark Chart Component
* <a class="bookmarkable-link" title="Bookmarkable Link" href="#sparkChartOverview-section"></a>
* </h3>
*
* <p>Spark Chart component for JET with support for bar, line, area, and floating bar subtypes. Spark Charts are
* designed to visualize the trend of a data set in a compact form factor.</p>
*
* {@ojinclude "name":"warning"}
*
* <pre class="prettyprint">
* <code>
* <div data-bind="ojComponent: {
* component: 'ojSparkChart',
* type: 'line',
* items: [5, 8, 2, 7, 0, 9]
* }"/>
* </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 Spark Chart.
* @example <caption>Initialize the Chart with no options specified:</caption>
* $(".selector").ojSparkChart();
*
* @example <caption>Initialize the Spark Chart with some options:</caption>
* $(".selector").ojSparkChart({type: 'line', items: [5, 8, 2, 7, 0, 9]});
*
* @example <caption>Initialize the Spark Chart via the JET <code class="prettyprint">ojComponent</code> binding:</caption>
* <div data-bind="ojComponent: {component: 'ojSparkChart'}">
*/
oj.__registerWidget('oj.ojSparkChart', $['oj']['dvtBaseComponent'],
{
widgetEventPrefix : "oj",
options: {},
//** @inheritdoc */
_CreateDvtComponent : function(context, callback, callbackObj) {
return dvt.DvtSparkChart.newInstance(context, callback, callbackObj);
},
//** @inheritdoc */
_GetComponentStyleClasses : function() {
var styleClasses = this._super();
styleClasses.push('oj-sparkchart');
return styleClasses;
},
//** @inheritdoc */
_GetTranslationMap: function() {
// The translations are stored on the options object.
var translations = this.options['translations'];
// Safe to modify super's map because function guarentees a new map is returned
var ret = this._super();
ret['DvtUtilBundle.CHART'] = translations['componentName'];
return ret;
},
//** @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 a SparkChartDataItem object for automation testing verification.
* @param {String} itemIndex The dataItem index
* @return {Object} The spark chart data item with the given item index
* @expose
* @instance
* @memberof oj.ojSparkChart
*/
getDataItem: function(itemIndex) {
var auto = this._component.getAutomation();
return new oj.SparkChartDataItem(auto.getDataItem(itemIndex));
}
});
Source: src/main/javascript/oracle/oj/ojchart/ojsparkchart.js
Oracle® JavaScript Extension Toolkit (JET)
1.1.2
E65298-01