Develop Reference

Apex Charts: how do I change tooltip position to be always on top?

By default Apex Charts tooltip positioning is calculated automatically: https://codepen.io/apexcharts/pen/xYqyYm. According to their docs, you can only change it to fixed and put in one of the corners:
Apex.tooltip = {
fixed: {
enabled: true
}
};
How do I change it to be always centered on top of the marker?

In case anyone wants to change the position of tooltips without creating a custom one (cause it poses new difficulties). I am 100% sure there is a better way to do this, but here is my solution:
Apex.chart = {
events: {
mouseMove: function(event, chartContext, config) {
var tooltip = chartContext.el.querySelector('.apexcharts-tooltip');
var pointsArray = config.globals.pointsArray;
var seriesIndex = config.seriesIndex;
var dataPointIndex = config.dataPointIndex === -1 ? 0 : config.dataPointIndex;
if (seriesIndex !== -1) {
var position = pointsArray[seriesIndex][dataPointIndex];
tooltip.style.top = position[1] + 'px';
tooltip.style.left = position[0] + 'px';
}
}
}
};
codepen - https://codepen.io/Pratik__007/pen/oNgJajw
Source - Form GitHub post.

Javascript scrolling on XY axis

I have a jsfiddle here using jquery 1.8.3 and scrollTo to scoll to an element #en on an XY axis
https://jsfiddle.net/80kxdsxe/
var $scrollTo = $.scrollTo = function(target, duration, settings) {
return $(window).scrollTo(target, duration, settings);
};
$scrollTo.defaults = {
axis:'xy',
duration: 0,
limit:true
};
The jsfiddle that i need to work is using pure js but it only scrolls to the element #en on either the X or Y axis and i need it to scroll using XY
https://jsfiddle.net/43s8wpd7/
/* Note: In order to be subjected to chaining and animation options, scroll's tweening is routed through Velocity as if it were a standard CSS property animation. */
if (action === "scroll") {
/* The scroll action uniquely takes an optional "offset" option -- specified in pixels -- that offsets the targeted scroll position. */
var scrollDirection = (/^x$/i.test(opts.axis) ? "Left" : "Top"),
scrollOffset = parseFloat(opts.offset) || 0,
scrollPositionCurrent,
scrollPositionCurrentAlternate,
scrollPositionEnd;
if (opts.container) {
if (Type.isWrapped(opts.container) || Type.isNode(opts.container)) {
opts.container = opts.container[0] || opts.container;
scrollPositionCurrent = opts.container["scroll" + scrollDirection];
scrollPositionEnd = (scrollPositionCurrent + $(element).position()[scrollDirection.toLowerCase()]) + scrollOffset; /* GET */
} else {
opts.container = null;
}
} else {
scrollPositionCurrent = Velocity.State.scrollAnchor[Velocity.State["scrollProperty" + scrollDirection]];
scrollPositionCurrentAlternate = Velocity.State.scrollAnchor[Velocity.State["scrollProperty" + (scrollDirection === "Left" ? "Top" : "Left")]]; /* GET */
scrollPositionEnd = $(element).offset()[scrollDirection.toLowerCase()] + scrollOffset; /* GET */
}
/* Since there's only one format that scroll's associated tweensContainer can take, we create it manually. */
tweensContainer = {
scroll: {
rootPropertyValue: false,
startValue: scrollPositionCurrent,
currentValue: scrollPositionCurrent,
endValue: scrollPositionEnd,
unitType: "",
easing: opts.easing,
scrollData: {
container: opts.container,
direction: scrollDirection,
alternateValue: scrollPositionCurrentAlternate
}
},
element: element
};
if (Velocity.debug) console.log("tweensContainer (scroll): ", tweensContainer.scroll, element);
Can anyone help me fix the second NON-jquery fiddle to allow the scroll to be on the XY axis?
Thanks.

ui-grid, error when scrolling

I am getting the following error when I scroll in ui-grid:
Uncaught TypeError: Cannot read property 'percentage' of undefined
Interestingly I get the same error on the ui-grid tutorial site so it is possible it is just simply a bug.
Here is a plunker that shows the issue.
Here are the grid options I am using:
mc.gridOptions = {
data: mc.people,
enableSorting: true,
onRegisterApi: function( gridApi ) {
mc.gridApi = gridApi;
},
columnDefs: [
{field: 'name'},
{field: 'age'},
{field: 'state', enableSorting: false}
]
};
Any ideas as to what I am doing wrong here? As far as I can tell there is nothing wrong with this.

I would mention this in the comment box, but I need the space and the formatting to explain that you probably need to bring this up to their attention:
First you are using an unstable version, your best bet is to use a stable version that is being used and tested.
The unstable version is throwing a bug in the code below.. please review all my comments in asterisk (******) :
// Scroll the render container viewport when the mousewheel is used
$elm.bind('wheel mousewheel DomMouseScroll MozMousePixelScroll', function(evt) {
// use wheelDeltaY
var newEvent = GridUtil.normalizeWheelEvent(evt);
var args = { target: $elm };
*****THIS STATEMENT IS TRUE BECAUSE YOU SCROLLED VERTICALLY, ARGS.Y IS SET*****
if (newEvent.deltaY !== 0) {
var scrollYAmount = newEvent.deltaY * -120;
// Get the scroll percentage
var scrollYPercentage = (containerCtrl.viewport[0].scrollTop + scrollYAmount) / rowContainer.getVerticalScrollLength();
// Keep scrollPercentage within the range 0-1.
if (scrollYPercentage < 0) { scrollYPercentage = 0; }
else if (scrollYPercentage > 1) { scrollYPercentage = 1; }
***THIS IS SET***
args.y = { percentage: scrollYPercentage, pixels: scrollYAmount };
}
*****THIS STATEMENT IS FALSE BECAUSE YOU NEVER SCROLLED HORIZONTALLY, ARGS.X IS NOT SET*****
if (newEvent.deltaX !== 0) {
var scrollXAmount = newEvent.deltaX * -120;
// Get the scroll percentage
var scrollLeft = GridUtil.normalizeScrollLeft(containerCtrl.viewport);
var scrollXPercentage = (scrollLeft + scrollXAmount) / (colContainer.getCanvasWidth() - colContainer.getViewportWidth());
// Keep scrollPercentage within the range 0-1.
if (scrollXPercentage < 0) { scrollXPercentage = 0; }
else if (scrollXPercentage > 1) { scrollXPercentage = 1; }
***THIS DOESNT GET SET SINCE IT WILL NOT REACH THIS POINT***
args.x = { percentage: scrollXPercentage, pixels: scrollXAmount };
}
*****THROWS AN ERROR BECAUSE ARGS.X IS NULL & DOESNT EXIST*****
// Let the parent container scroll if the grid is already at the top/bottom
if ((args.y.percentage !== 0 && args.y.percentage !== 1) || (args.x.percentage !== 0 && args.x.percentage !== 1)) {
evt.preventDefault();
}
uiGridCtrl.fireScrollingEvent(args);
});

Ext.js DataGrid tab navigation not working correctly in RTL mode

I am using DataGrid component of Ext.js 4.2.2 in RTL mode
In official example of that component I am using CellEditing plugin.
When I press the tab key for tab navigation in cell editor.
But when the cell editor gets out of grid region the scroll bar doesn't adapt itself to new position.
You can see the problem in following image.
I am using Chrome as browser.
Any idea?

After debugging Ext.js code for about 2 days I found the problem.
The problem was in one of Dom.Element_Scroll's methods.
With overriding that method the problem solved.
Originally the problem cause was, not normalizing scrollLeft value for setting to container element in RTL mode.
you should change methods like this.
me.scrollChildFly.attach(container).ScrollTo('left', newPos, animate);
To
me.scrollChildFly.attach(container).rtlScrollTo('left', newPos, animate);
and the same for scroll top.
The full code to use is as follows.
NOTE: I am using Ext.JS 4.2.2
*/
Ext.define('Ext.rtl.dom.Element_scroll', {
override: 'Ext.dom.Element',
/**
* Scrolls this element into view within the passed container.
* #param {String/HTMLElement/Ext.Element} [container=document.body] The container element
* to scroll. Should be a string (id), dom node, or Ext.Element.
* #param {Boolean} [hscroll=true] False to disable horizontal scroll.
* #param {Boolean/Object} [animate] true for the default animation or a standard Element
* #param {Boolean} [highlight=false] true to {#link #highlight} the element when it is in view.
* animation config object
* #return {Ext.dom.Element} this
*/
scrollIntoView: function (container, hscroll, animate, highlight) {
var me = this,
dom = me.dom,
offsets = me.getOffsetsTo(container = Ext.getDom(container) || Ext.getBody().dom),
// el's box
left = offsets[0] + container.scrollLeft,
top = offsets[1] + container.scrollTop,
bottom = top + dom.offsetHeight,
right = left + dom.offsetWidth,
// ct's box
ctClientHeight = container.clientHeight,
ctScrollTop = parseInt(container.scrollTop, 10),
ctScrollLeft = parseInt(container.scrollLeft, 10),
ctBottom = ctScrollTop + ctClientHeight,
ctRight = ctScrollLeft + container.clientWidth,
newPos;
// Highlight upon end of scroll
if (highlight) {
if (animate) {
animate = Ext.apply({
listeners: {
afteranimate: function () {
me.scrollChildFly.attach(dom).highlight();
}
}
}, animate);
} else {
me.scrollChildFly.attach(dom).highlight();
}
}
if (dom.offsetHeight > ctClientHeight || top < ctScrollTop) {
newPos = top;
} else if (bottom > ctBottom) {
newPos = bottom - ctClientHeight;
}
if (newPos != null) {
//previous : me.scrollChildFly.attach(container).ScrollTo('top', newPos, animate);
me.scrollChildFly.attach(container).rtlScrollTo('top', newPos, animate);
}
if (hscroll !== false) {
newPos = null;
if (dom.offsetWidth > container.clientWidth || left < ctScrollLeft) {
newPos = left;
} else if (right > ctRight) {
newPos = right - container.clientWidth;
}
if (newPos != null) {
// previous : me.scrollChildFly.attach(container).rtlScrollTo('left', newPos, animate);
me.scrollChildFly.attach(container).rtlScrollTo('left', newPos, animate);
}
}
return me;
},
});

Adding dgrids with variable widths to TabContainer

I'm populating a TabContainer with grids (Dojo 1.8, dgrid) that are showing the results of a query for different datasets. Each tab is the result of a single dataset. The different datasets will have a varying number of fields, so I'm dynamically building each grid and adding it to a ContentPane, which gets added to the TabContainer.
My current problem is seting the width of the grids when they are built. The datasets could have from two fields to upwards of 100 fields to be shown in the grid. I've set a default width in CSS for the grid of 600px, but the grid will only show the first six fields of the dataset. If I set the width to "auto", it is only as wide as the TabContainer, removing the scroll bar and cutting off the data. Is it possible to set a width for each grid separately?
This is what the result looks like
This is the code for populating the TabContainer
function buildColumns(feature) {
var attributes = feature.attributes;
var columns = [];
for (attribute in attributes) {
if (attribute != "Shape") {
var objects = {};
objects.label = attribute;
objects.field = attribute;
columns.push(objects);
}
}
return columns;
}
function populateTC(results, evt) {
try {
if (dijit.byId('tabs').hasChildren) {
dijit.byId('tabs').destroyDescendants();
}
if (results.length == 0) {
console.log('Nothing found.');
return;
}
var combineResults = {};
for (var i = 0, len = results.length; i < len; i++) {
var result = results[i];
var feature = result.feature;
var lyrName = result.layerName.replace(' ', '');
if (combineResults.hasOwnProperty(lyrName)) {
combineResults[lyrName].push(result);
}
else {
combineResults[lyrName] = [result];
}
}
for (result in combineResults) {
var columns = buildColumns(combineResults[result][0].feature);
var features = [];
for (i = 0, len = combineResults[result].length; i < len; i++) {
features.push(combineResults[result][i].feature);
}
var data = array.map(features, function (feature) {
return lang.clone(feature.attributes);
});
var dataGrid = new (declare([Grid, Selection]))({
id: "dgrid_" + combineResults[result][0].layerId,
bufferRows: Infinity,
columns: columns,
"class": "resultsGrid"
});
dataGrid.renderArray(data);
dataGrid.resize();
dataGrid.on(".dgrid-row:click", gridSelect);
var cp = new ContentPane({
id: result,
content: "<b>" + combineResults[result][0].layerName + "\b",
//content: dataGrid,
title: combineResults[result][0].layerId
}).placeAt(dijit.byId('tabs'));
cp.addChild(dataGrid);
cp.startup();
cp.resize();
}
tc.startup();
tc.resize();
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
}
catch (e) { console.log(e.message); }
}

The problem is not with the grid width, it's the column widths. They fit the container.
If you give a column a fixed width, you will get the desired effect.
You should be able to style .dgrid-cell or .dgrid-column-[index]
I've also had a need for more control depending on the column data. You can control the style by providing a column with its own renderHeaderCell and renderCell method as well. (style refers to dom-style)
renderHeaderCell: function(node) {
style.set(node, 'width', '50px');
}
renderCell: function(object, value, node) {
style.set(node, 'width', '50px');
}

I was able to use the AddCssRule to dynamically change the size of the grids
var dataGrid = new (declare([Grid, Selection]))({
id: "dgrid_" + combineResults[result][0].layerId,
bufferRows: Infinity,
columns: columns,
"class": "resultsGrid"
});
dataGrid.renderArray(data);
var gridWidth = "width: " + String(columns.length * 100) + "px";
dataGrid.addCssRule("#" + dataGrid.id, gridWidth);
dataGrid.resize();
dataGrid.refresh();
Here is a Fiddle that shows the result. Click on a colored polygon to show the different grids (although the content is sometimes being shoved into the header of the grid). Also, the tabs aren't being rendered correctly, but there should be 0, 224, and 227 (if you also clicked on a point).