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
Related
Some of the react-dnd examples use a getHandlerId() method.
For example in the simple example of a sortable list, the Card.tsx function:
Collects a handlerId from the monitor object within the useDrop method
collect(monitor) {
return {
handlerId: monitor.getHandlerId(),
}
},
Returns that as an element of the "collected props"
const [{ handlerId }, drop] = useDrop<
Uses it to initialize an HTML attribute named data-handler-id
<div ref={ref} style={{ ...style, opacity }} data-handler-id={handlerId}>
What is this Id and why is it used?
What uses the data-handler-id attribute?
I'd expect to see getHandlerId() described in the API documentation as a method of the DropTargetMonitor (but it isn't).
I didn't dive deep into it but for me this information was enough to continue using it:
If you remove this data-handler-id, everything continue working but with some issues (item sometimes flickers, it doesn't go to another place as smoothly as it does with data-handler-id)
Here is an open issue https://github.com/react-dnd/react-dnd/issues/2621 about low performance, and this comment suggests to use handler id: https://github.com/react-dnd/react-dnd/issues/2621#issuecomment-847316022
As you can see in code https://github.com/react-dnd/react-dnd/search?q=handlerId&type=code, handler id is using for proper definition of drop item so it seems better to use it even if you don't have a lot of elements.
currently working on an issue and cant figure out why my page throws me an error.
Having this component:
<JobDetailSectionText
:variant="tmpl({ red: 1, blue: 4, yellow: 7 })"
:image-src="
jobProfile.attributes.imagePractice
? $strapi.options.url +
jobProfile.attributes.imagePractice.data.attributes.url
: '/static/img/praxisteil.jpg'
"
:image-alt="
jobProfile.attributes.imagePractice.data.attributes.alternativeText
"
>
In my content manager in Strapi I changed the „attribute.imagePractice" from required = true to false and now want to, if no file is added to the database show a default image in '/static/img/praxis.jpg‘.
But the console of the page gives me an error
"TypeError: Cannot read properties of null (reading 'attributes')
I tried to figure out the source of the problem but the page only works if I add and imagePractice in the backend, it won’t take the default img I tried to declare with the static path.
Any thoughts?
Thanks!
You can use optional chaining to check if property is exist
<JobDetailSectionText
...
jobProfile.attributes?.imagePractice
? $strapi.options.url +
jobProfile.attributes.imagePractice.data.attributes.url
: '/static/img/praxisteil.jpg'
"
...
>
#DinhTX solution is good, but note, that you cannot use optional chaining unless it's Vue 3. Read more here.
If you're using Vue version less then 3 you would need to write a computed property for that src attribute value where you'd check if attributes exist. Actually, I'd recommend you to use computed property anyway cause Vue's templates should be more HTML and less JS (not like React).
Example of computed property would be:
computed: {
jobSrc() {
const strapiUrl = `${$strapi.options.url}${jobProfile.attributes.imagePractice.data.attributes.url}`
return jobProfile.attributes?.imagePractice ? strapiUrl :'/static/img/praxisteil.jpg'
}
}
In our project, we realised we cannot use <cx-icon> in our templates if strictTemplates is set to true without using $any(...), from Angular, as a workaround.
We have our own list of CUSTOM_ICON_TYPE's, so after we set strictTemplates to true, Angular complained about our own icon types. This code:
<cx-icon [type]="customIconTypes.CHEVRON_RIGHT"></cx-icon>
gives this error:
Type 'CUSTOM_ICON_TYPE.CHEVRON_RIGHT' is not assignable to type 'ICON_TYPE'. ngtsc(2322)
Here is an example of our current workaround:
<cx-icon [type]="$any(customIconTypes.CHEVRON_RIGHT)"></cx-icon>
Is there any other known workaround for that? Or is an update on cx-icon already planned in the future?
According to the docs the configuration of the icons was designed to be provided for in a different way.
Please try this:
ConfigModule.withConfig(<IconConfig>{
icon: {
symbols: {
CHEVRON_RIGHT: "<value of customIconTypes.CHEVRON_RIGHT>",
},
},
});
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
Within Sencha Touch, is it possible to define a default UI , like "light" or "dark", that applies to all components (unless overwritten explicitly)?
The aim is to avoid having to declare ui: "dark", or any custom UI that is made, for every element.
Cheers!
You can try this:
Ext.apply(Ext.Component.prototype, {
getUi: function() {
var defaultUi = 'light';
// value of [this.config.ui] is ignored here
// we can use something like forcedUi
return (this.forcedUi) ? this.forcedUi : defaultUi;
}
})
The disadvantage of this code is that we need to specify another variable for applying ui different from 'light' (because variable 'ui' via getUi() will always return 'light'):
...
items: [{
xtype: 'button',
forcedUi: 'dark'
}]
...
I am stuck on Touch 1.1 so sunsay's solution didn't work for me, but this did:
Ext.CustomToolbar = Ext.extend(Ext.Toolbar,
{
ui:'app'
});
Ext.reg('toolbar', Ext.CustomToolbar);
So, it's still component-by-component-type, but not component-by-component-instance. And since you can overwrite the "reg", no need for custom x-types all over the place, either.
I assume that you know about sencha touch styles and themes. Otherwise you can download a pdf file from this link which clearly describes about how to do it...
http://f.cl.ly/items/d9df79f57b67e6e876c6/SenchaTouchThemes.pdf
In it they are mentioning about scss file where you can specify the base-color, ie
$base-color: #4bb8f0 ;
$base-gradient: 'glossy';
Then run it ... you can see the toolbars and buttons created with the color and gradient you have mentioned.