I'm having an issue in my project which uses Angular 5, NgRx, materialDesignBootstrap and chartsjs.
Essentially, when the charts are created, I get a list of console messages like the following (the charts properly display anyway):
Attempting to configure '_chartjs' with descriptor '[object Object]' on object '17.94,17.47,17.14,17.17,18.21,17.91,18.34,20.25,21.39' and got error, giving up: TypeError: Cannot define property _chartjs, object is not extensible - zone.js:2228
Attempting to configure 'push' with descriptor '{"configurable":true,"enumerable":false}' on object '17.94,17.47,17.14,17.17,18.21,17.91,18.34,20.25,21.39' and got error, giving up: TypeError: Cannot define property push, object is not extensible - zone.js:2228
Attempting to configure 'pop' with descriptor '{"configurable":true,"enumerable":false}' on object '17.94,17.47,17.14,17.17,18.21,17.91,18.34,20.25,21.39' and got error, giving up: TypeError: Cannot define property pop, object is not extensible - zone.js:2228
After a short investigation I read the doc about frozen object and found the code throwing these messages inside the chartsJs node_module folder, but i really don't know how to solve the issue.
Here is the charts markup:
<canvas mdbChart *ngIf="chartsData.length >= 1"
[chartType]="chartType"
[datasets]="chartsData"
[labels]="xLabels"
[colors]="chartColors"
[options]="chartOptions"
[legend]="chartsData && chartsData.length >= 1"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
and here is a piece of the ts file:
#Input() chartData: Array<object>;
#Input() xLabel: Array<string>;
xLabels: Array<string>;
chartsData: Array<object>;
ngOnChanges(changes: SimpleChanges) {
if( changes.xLabel && changes.xLabel.currentValue.length > 0 && changes.chartData && changes.chartData.currentValue.length > 0 ){
this.chartsData = changes.chartData.currentValue.map(item => Object.assign({}, item));
/** this workaround solves a mdb library bug not updating xAxis label*/
setTimeout(function () {
this.xLabels = changes.xLabel.currentValue.slice(0);
}.bind(this), 0);
}
}
as you can see above, i tried to clone the input objects (they both come from the ngRx state), but it didn't solve the issue.
I'll be happy to provide any needed information. And I'm sorry if this is not quite a workable example, but you probably know it would require a tons of files to make an angular 5 working example xD
Related
On setting colors from configuration and using Gooddata UI Charts component it is throwing following error
TypeError: item.predicate is not a function
My config is as follows, On reseting default color it is working fine but as change color i get the colorMapping object in the api and after applying this config throwing the error.
How can i resolve it, Please help me out.
config={{
colorMapping: [{
color: { type: "guid", value: "17" },
id:"0d447449c2844b228923c37de7b6aaf9"
}]
}}
usage of ColorMapping is described in documentation
https://sdk.gooddata.com/gooddata-ui/docs/chart_config.html#Color-mapping
You need to define predicate function which when returning true, will apply corresponding color (https://sdk.gooddata.com/gooddata-ui/docs/ht_create_predicates.html).
In your case localId predicate seems to be right for you
https://github.com/gooddata/gooddata-ui-sdk/blob/master/libs/sdk-ui/src/base/headerMatching/HeaderPredicateFactory.ts#L264
In case you are using older version of Gooddata UI.SDK than v8, you need to implement predicate by your own. Something like this (or equivalent for measures).
predicate: headerItem =>
headerItem.attributeHeaderItem &&
headerItem.attributeHeaderItem.localIdentifier === "0d447449c2844b228923c37de7b6aaf9", // find attribute item by localIdentifier
You can switch the official documentation to whathever version of Gooddata UI.SDK lib you are using and read the same article about ColorMapping
https://sdk.gooddata.com/gooddata-ui/docs/7.9.0/chart_config.html#color-mapping
First of all I'm using Vue.js to access data of an API using axios and a proxy
I'm trying to access the property of an object nested in the last array of several other arrays but I'm kinda hitting a wall, here's the detail :
Global details
the property I'm trying to access
I've tried different ways but here's my latest try :
axios
.get(proxyurl + history_url, {
reqHeaders
})
.then((reponse) => {
console.log(reponse.data)
this.lastItem = reponse.data.data.history[history.length-1]
console.log(this.lastItem)
this.lastEvol = this.lastItem.price
console.log(this.lastEvol)
})
The issue here is that the answer to "console.log(this.lastItem)" is :
lastItem answer
The value of the properties are now different and incorrect.
Since it's showing "Proxy" as the root object name I thought that may be the issue but I'm not sure.
I've tried several other ways to access this property but only had errors.
Any help would be greatly appreciated.
history is undefined in the history.length expression. Try this:
.then((reponse) => {
const history = reponse.data.data.history;
console.log(reponse.data)
this.lastItem = history[history.length-1]
console.log(this.lastItem)
this.lastEvol = this.lastItem.price
console.log(this.lastEvol)
})
My ts code coding is,
this.api.getPay(this.donationId).subscribe(
data => {
this.paymentData = data;
this.paymentDetails = this.paymentData.donationDetails[0];
}
)
My html code is like
Project : <strong>{{paymentDetails.project_name}}</strong><br/>
Status: <strong>{{paymentDetails?.status}}</strong><br/>
Now project_name and Status details will be displayed. Console gets "ERROR TypeError: Cannot read property 'project_name' of undefined"
If I added "?" like
{{paymentDetails?.project_name}}
No Details displayed. But console not having any Error.
This same coding method works well in Angular 5/6.
Any special method for Angular 8 ???
MY console output in TS file is
{
project_name: "test",
status: "true"
}
Previous question is How to Display Values in Angular 8 Shows ERROR TypeError: Cannot read property 'project_name' of undefined
but solution not working
anyone know how to resolve ?
Everything seems good, check if your component doesn't have
changeDetection: ChangeDetectiongStrategy.OnPush
If so, remove it and put back the '?' in the html markup, and then add it back and do the change detection in the subscribe
"EXPORTED_SYMBOLS is not an array" Exception flagged when tried to use Components.utils.import("chrome://app/content/app1.js");.
I have a XUL application created and from one of the JS File(say app.js) I tried to include the other JS File as shown above.
Both app.js and app1.js are placed in content folder and also in chrome.manifest file following line is added
"content app content/"
In other JS File (app1.js), I have exported symbols like
var EXPORTED_SYMBOLS = ["Fooinstance"];
var Fooinstance = {
foo: function() {
...
}
}
In app.js,
Components.utils.import("chrome://app/content/app1.js");
// Error: chrome://app/content/app1.js - EXPORTED_SYMBOLS is not an array
...
Fooinstance.foo();
I am running this XUL app on XULRunner 17.0.1 win32 libraries.
I looked through the code in this link https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Using
It did not help and if I include it as resource it works however I do not want to include it as part of resource.
Could you someone point out what mistake would be ?
I had this same problem, and I solved it:
1) changing the file extension (.js) by .jsm
2) Adding a first line on your module exporting classes to share. EG:
var EXPORTED_SYMBOLS = ["Xobject"];
function Xobject(){
}
Xobject.prototype.stop = function() {
return 'stop';
}
Xobject.prototype.run = function() {
return 'running';
}
3) Calling this way
Components.utils.import('resource://gre/modules/Services.jsm' );
Components.utils.import("chrome://myFirstAddOn/content/Xobject.jsm");
var myXobject = new Xobject();
alert(myXobject.run());
Hope it help u
For anyone else getting this, another possible reason is a circular dependency. My case was a little different, but I had two JSM files each using Components.utils.import to import each other. Then I got this error in one of them.
I'm dynamically building a series of dojox.mobile.ListItem widgets under a statically defined dojox.mobile.RoundRectList widget via this function...
function displayOpps(items) {
// Create the list container that will hold application names
var rrlOppsContainer = dijit.byId("rrlOpps");
// Add a new item to the list container for each element in the server respond
for (var i in items){
// Create and populate the list container with applications' names
var name = items[i].CustName + " - " + items[i].OppNbr;
var liOpps = new dojox.mobile.ListItem({
label: name,
moveTo: "sv3OppDetail"
});
// Add the newly created item to the list container
rrlOppsContainer.addChild(liOpps);
}
}
When I run this code during onLoad() in my html file, I get the following error using Chrome's dev tools...
Uncaught TypeError: Object # has no method 'byId'
I've read numerous articles around this topic and it appears that lots of folks have this problem, but each that I have found are in relation to some other technology (e.g., Spring MVC, etc) and I'm attempting to use it w a dojox.mobile based app. That said, I attempted to mimic some of the solutions brought up by others by including this in my html file, and it still doesn't work...
<script type="text/javascript"
data-dojo-config="isDebug: true, async: true, parseOnLoad: true"
src="dojo/dojo.js">
dojo.require("dojox.mobile.RoundRectList")
</script>
What am I doing wrong?
Thank you in advance for your time and expertise.
If you are using Dojo 1.7+, you probably just forgot to require the "dijit/registry" module. This where the byId function is defined. When you use desktop widgets, this is loaded indirectly by other base modules, but with dojox/mobile you must load it explicitly (because dojox/mobile loads only a very minimal set of modules by default, to minimize code footprint).
Depending on how you wrote your application, do this:
dojo.require("dijit.registry"); // legacy (pre-1.7) loader syntax
...
var rrlOppsContainer = dijit.byId("rrlOpps");
...
or this:
require(["dijit/registry", ...], function(registry, ...){ // 1.7+ AMD loader syntax
...
var rrlOppsContainer = registry.byId("rrlOpps");
...
});
Note also that your second code sample tries to use asynchronous loading (async: true) while it uses the legacy loader syntax. This won't work, to get async loading you must use the AMD syntax.