I have this chart http://jsfiddle.net/Cp73s/2169/, I want to add different icons in the legend but I dont know How can do it.
labelFormatter: function () {
$scope.data = this.total;
console.log($scope.data);
return '<img src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png" width="15" height="15"></span>' + this.y + ' (' + this.percentage.toFixed(2) + '%) - ' + this.name;
},
There's quite an extensive list, so you'll need to manually map out what images you'd like to use for each item. I've created a JSFiddle which illustrates how to do this using a switch statement.
To make it a bit quicker I've used Font Awesome which i'd recommend looking in to:
labelFormatter: function () {
$scope.data = this.total;
var labelName = this.name,
icon = '';
switch(labelName){
case 'APP Android':
icon = 'android';
break;
case 'APP Ios':
icon = 'apple';
break;
default: // If no match is found, revert to a check icon
icon = 'check'
}
return '<i class="fa fa-' + icon + '"></i> ' + this.y + ' ('+ this.percentage.toFixed(2) +'%) - ' +this.name;
},
Related
I'm trying to add an ng-click attribute in the return of my formatter object in highcharts:
formatter: function() {
var item = "";
if (this.series.name == fluidVsConsumerDaily.pondSelection.pondName) {
item = angular.element('<a> Pond Volume Level: <b>' + this.y + '(BBL)</b></a>');
} else {
item = angular.element('<button ng-click="vCtrl.section.dashboard.fluidVsConsumerDaily.openFluidSourceModal(' + this.series.options.fluidSourceFacilityId + ')"> Fluid Source: <b>' + this.series.options.fluidSourceName + '</b> - ' + this.y + '(BBL) </button>');
}
var element = $compile(item)(vm);
$scope.$digest();
return element.html();
},
Unfortunately the click still doesn't work. When i'm inspecting the DOM, ng-click is present.
Thanks in advance.
I am having an issue dynamically loading components with {{}} using Angular 1.6.x
I can load the components dynamically just fine using compile, but the issue I am facing is adding an ng-if={{}} to the html string.
If I go this route it will take what ever vm.page is set to at the time. i.e. 1:
for (var i = 0; i < vm.wizardPages.length; i++) {
var newScope = $scope.$new(true, $scope);
newScope = angular.merge(newScope, vm.wizardPages[i]);
var html = '<' + vm.wizardPages[i].componentName + ' ng-if="' +
vm.page + ' === ' + (i + 1) + '"></' + vm.wizardPages[i].componentName
+ '>';
var element = $('page');
element.append($compile(html)(newScope));
}
Above renders:
<service-center-branch-selection ng-if="1 === 1" class="ng-scope ng-isolate-scope">
...
</service-center-branch-selection>
How can I call compile with {{}} in the string so vm.page is using data binding and can change when vm.page changes value?:
// loop through the data and inject components
for (var i = 0; i < vm.wizardPages.length; i++) {
var newScope = $scope.$new(true, $scope);
newScope = angular.merge(newScope, vm.wizardPages[i]);
var html = '<' + vm.wizardPages[i].componentName + ' ng-if="{{vm.page}} === ' + (i + 1) + '"></' + vm.wizardPages[i].componentName + '>';
var element = $('page');
element.append($compile(html)(newScope));
console.log(newScope);
}
I want the above to work with:
<service-center-branch-selection ng-if="vm.page === 1" class="ng-scope ng-isolate-scope">
...
</service-center-branch-selection>
Changed to "currentPage":
// loop through the data and inject components
for (var i = 0; i < vm.wizardPages.length; i++) {
var newScope = $scope.$new(true, $scope);
newScope = angular.merge(newScope, vm.wizardPages[i]);
var html = '<' + vm.wizardPages[i].componentName + ' ng-if="currentPage === ' + (i + 1) + '"></' + vm.wizardPages[i].componentName + '>';
var element = $('page');
element.append($compile(html)(newScope));
console.log(newScope);
}
Add 'currentPage' binding to component so available for new scope:
app.component("wizard", {
template: require('./wizard.component.html'),
controllerAs: "vm",
controller: wizardController,
bindings: {
breadcrumbs: '<',
wizardPages: '<',
currentPage: '<'
}
});
Add variable input to markup
<wizard breadcrumbs="vm.breadcrumbs" wizard-pages="vm.wizardPages" current-page="vm.page">
...
</wizard>
This is untested, but hopefully gives you the idea. Also, if the isolate scope has the ability to change the current page then you will need to update it to a two-way binding of course.
I got a very large list of about 200 items with text and images. ng-repeat is way to slow to render this smoothly. It tried it with this solution. Works nice. But not with collection-repeat.
My web-service return this:
There are events with specific dates. The events should be grouped by date. So in order to use collection repeat, how is it possible to insert dividers, if you cant use angular.filter groupBy?
I can offer you a partial solution which would only work if the dataset is ordered by the displayed field in the divider.
First of all we need to create a fake element in the array so that we can discriminate the divider amongst the other element.
Let's say we have a collection of posts fetched from a webservice:
.controller('mainController', function($scope, dataService) {
$scope.posts = [];
var divider = '';
});
the private field divider will be in use when we load the posts.
And we will have the loadMore method to load extra data when we scroll the list:
$scope.loadMore = function(argument) {
page++;
dataService.GetPosts(page, pageSize)
.then(function(result) {
if (result.data.length > 0) {
angular.forEach(result.data, function(value, key) {
value.divider = false;
if (value.postId !== divider)
{
divider = value.postId;
$scope.posts.push({divider: true, dividerText: value.postId});
}
$scope.posts.push(value);
});
}
else {
$scope.theEnd = true;
}
})
.finally(function() {
$scope.$broadcast("scroll.infiniteScrollComplete");
});
};
When we fetch the data from the web api (and the promise is resolved) we loop through the collection and check if the field is different from the divider. If this is a new divider we store the info and add a new element to the collection:
angular.forEach(result.data, function(value, key) {
value.divider = false;
if (value.postId !== divider)
{
divider = value.postId;
$scope.posts.push({divider: true, dividerText: value.postId});
}
$scope.posts.push(value);
});
As you can see I've added an element:
$scope.posts.push({divider: true, dividerText: value.postId});
I've used a dividerText field which will be displayed later on.
Now we need to create our own directive divider-collection-repeat which should be attached to a collection repeat:
<ion-item collection-repeat="post in posts" item-height="75" divider-collection-repeat>
I guess you're using infinite-scroll, so here is the whole HTML:
<ion-content ng-controller="mainController">
<ion-list>
<ion-item collection-repeat="post in posts" item-height="75" divider-collection-repeat>
{{post.name}}
</ion-item>
</ion-list>
<ion-infinite-scroll ng-if="!theEnd" on-infinite="loadMore()" distance="50%"></ion-infinite-scroll>
</ion-content>
this is the directive:
.directive('dividerCollectionRepeat', function($parse) {
return {
priority: 1001,
compile: compile
};
function compile (element, attr) {
var height = attr.itemHeight || '75';
var itemExpr = attr.collectionRepeat.split(' ').shift();
attr.$set('itemHeight', itemExpr + '.divider ? 40 : (' + height + ')');
attr.$set('ng-class', itemExpr + '.divider ? "item-divider" : ""');
var children = element.children().attr('ng-hide', itemExpr + '.divider');
element.prepend(
'<div ng-show="' + itemExpr + '.divider" class="my-divider" ' +
'ng-bind="' + itemExpr + '.dividerText" style="height:100%;">' +
'</div>'
);
return function postLink(scope, element, attr) {
scope.$watch(itemExpr + '.divider', function(divider) {
element.toggleClass('item-divider', !!divider);
});
};
}
});
The directive prepends an element (html) to the list using the expression you've defined in your collection-repeat.
In my sample I've use collection-repeat="post in posts" so this line:
var itemExpr = attr.collectionRepeat.split(' ').shift();
fetches the item's name; in my case it is going to be post.
We use the height as well cause we might need to have a different height for the divider.
This bit here is the place where all the magic happens:
element.prepend(
'<div ng-show="' + itemExpr + '.divider" class="my-divider" ' +
'ng-bind="' + itemExpr + '.dividerText" style="height:100%;">' +
'</div>'
);
It uses an ng-show for the field 'post.divider' (ng-show="' + itemExpr + '.divider") and binds the our text field ng-bind="' + itemExpr + '.dividerText"
I've also added a custom class my-divider just in case we need to change the layout of our divider a bit.
The final result is here or in this plunker.
As you might have noticed I haven't used a date field as I already had a sample where, sadly, I didn't have any dates.
I guess it should be very easy to adapt to your situation.
The directive is based on a sample I have found on github.
You will find the code for the directive here.
I have an issue on showing icomoon glyph on grid action columns using sencha architect in extjs 5.0 application. I am using group grid here. Glyphs are showing nicely on any ext button btw.
I have made an overwrite class for Ext.grid.column.Action like shown in following link as
Ext.define('MyApp.override.grid.column.Action', {
override: 'Ext.grid.column.Action',
// overridden to implement
defaultRenderer: function(v, cellValues, record, rowIdx, colIdx, store, view) {
var me = this,
prefix = Ext.baseCSSPrefix,
scope = me.origScope || me,
items = me.items,
len = items.length,
i = 0,
item, ret, disabled, tooltip,glyph, glyphParts, glyphFontFamily;
// Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
// Assign a new variable here, since if we modify "v" it will also modify the arguments collection, meaning
// we will pass an incorrect value to getClass/getTip
ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
cellValues.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
for (; i < len; i++) {
item = items[i];
disabled = item.disabled || (item.isDisabled ? item.isDisabled.call(item.scope || scope, view, rowIdx, colIdx, item, record) : false);
tooltip = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null));
if(Ext.isFunction(item.getGlyph)){
glyph = item.getGlyph.apply(item.scope || scope, arguments);
}else{
glyph = item.glyph;
}
// Only process the item action setup once.
if (!item.hasActionConfiguration) {
// Apply our documented default to all items
item.stopSelection = me.stopSelection;
item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
item.hasActionConfiguration = true;
}
if (glyph ) {
if (typeof glyph === 'string') {
glyphParts = glyph.split('#');
glyph = glyphParts[0];
glyphFontFamily = glyphParts[1];
} else {
glyphFontFamily = Ext._glyphFontFamily;
}
ret += '<span role="button" title="' + (item.altText || me.altText) + '" class="' + prefix + 'action-col-icon ' + prefix + 'action-col-glyph ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') +
' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
' style="font-family:' + glyphFontFamily + '"' +
(tooltip ? ' data-qtip="' + tooltip + '"' : '') + '>&#' + glyph + ';</span>';
} else {
ret += '<img role="button" alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
'" class="' + me.actionIconCls + ' ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') +
(Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
(tooltip ? ' data-qtip="' + tooltip + '"' : '') + ' />';
}
}
return ret;
}
});
and also applied getGlyph function like:
getGlyph: function(v, meta, rec) {
return 'xe600#icomoon';
}
But still not showing any icon or glyp at the column.
I found the following output from the override class as
<span role="button" title="" class="x-action-col-icon x-action-col-glyph x-action-col-0 xe600#icomoon" style="font-family:icomoon"></span>
Which seems fine to me. Not sure what is wrong here, can any one help me?
Its my bad I could not check in the link i mentioned in my question:
I have to add the css line in my css file for showing the glyphs in action columns:
.x-action-col-glyph {font-size:16px; line-height:16px; color:#9BC8E9; width:20px}
After this glyphs are shown.
I'm using the code below, to set the css class for an action column.
But even if the result is null, some elements are inserted by extjs.
getClass: function(v, meta, data) {
if (data.myDate < new Date())
return null;
else
return 'insert';
}
Generated html for return null:
<img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-action-col-icon x-action-col-1 null">
The major problem is that cursor is changed to a hand pointer when moving this "blank" space.
There is a way to not generate elements when no icon is to be shown?
I don't see any way to do it without extending action column. IMO easiest way is to provide custom renderer function. Example:
Ext.define('Ext.grid.column.MyAction', {
extend: 'Ext.grid.column.Action',
constructor: function(config) {
var me = this,
cfg = Ext.apply({}, config),
items = cfg.items || [me],
l = items.length,
i,
item,
cls;
me.callParent(arguments);
me.renderer = function(v, meta) {
v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : '';
meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
for (i = 0; i < l; i++) {
item = items[i];
item.disable = Ext.Function.bind(me.disableAction, me, [i]);
item.enable = Ext.Function.bind(me.enableAction, me, [i]);
cls = (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||me.scope||me, arguments) : (me.iconCls || ''));
if (cls !== null) {
v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
'" class="' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' + (item.disabled ? Ext.baseCSSPrefix + 'item-disabled' : ' ') + (item.iconCls || '') +
' ' + cls + '"' +
((item.tooltip) ? ' data-qtip="' + item.tooltip + '"' : '') + ' />';
}
}
return v;
};
}
});