Using the new "Colors" section of the analytical designer, I can specify custom colors to use for my insight:
When I get my visualization object, this comes through with properties that look like this:
"colorMapping": [
{
"id": "fdda26a33ca048f28bc702f047c04d73",
"color": {
"type": "guid",
"value": "guid3"
}
},
{
"id": "893b13af5d064ec5ba57f82ea3241bbe",
"color": {
"type": "guid",
"value": "guid4"
}
}
]
Passing that into the config section of the react component props results in some console errors (item.predicate is not a function in color.js:219). It seems to me that the color map values aren't coming through correctly when I get the visualization object.
Is there any way to get the custom color values and set them in the react component props?
If you use Visualization component consuming URI of existing visualization, it will automatically use this color mapping from visualization object so no extra config is needed.
If you use explicit components like BarChart or so, you need to transform colorMapping into form of so called predicates. For more info please read Gooddata.UI documentation and provide also colorPallete config. Hope this helps
Related
I'm implementing my custom marker pin in MapView component. Are there a way to hide or remove third party markers, like hotels, restaurants, sales stores, etc...?
I have searched in component docs but found nothing.
As far as I know, there is one way to turn off the business texts and markers. It is when we are applying a style to <MapView>'s customMapStyle property.
From this site, https://mapstyle.withgoogle.com/
, skip to styling selecting "use the Legacy JSON styling wizard"
Then select "more options" for a more specific styling.
Select Points of Interest, then select Business, then select Text fill and Text Outline and make their visibility as hidden.
We'll click "Finish" button, then "copy JSON" button. Now we have JSON formatted data copied.
You may hold this info in a variable named, say mapStyle
mapStyle=
[
{
"featureType": "poi.business",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
}
]
The last thing to do is to use mapStyle and making it equal to customMapStyle property like this..
<MapView
customMapStyle={mapStyle}
{/*other properties*/}
/>
In Google Sheets API, when using a chart shape, how can I colour a given datapoint a custom RGB? In the image below I have changed the color of 3 random datapoints. Is this possible?
It is possible to change the color and use a custom RGB color. If you already have the chart created, all you need to do is to use the batchUpdate method, and when creating the request include updateChartSpecRequest, then you'll need to select the type of chart that you are updating. In your case, based on the screenshot it would be basicChart, then from the chart, you want to update the series since those are the ones that generate the columns, and you can modify the color parameter there according to the official documentation.
Depending on what you want to end up doing, the structure of the request may end up being similar to this:
Request:
'request' : [
{
"updateChartSpec": {
"chartId": integer,
"spec": {
"basicChart": {
"series": [
{
"color": {
{
"red": number,
"green": number,
"blue": number,
"alpha": number
}
},
}
]
},
}
},
}
]
Note:
If you want to do it upon creation, instead of using updateChartSpec you would want to use addChart.
References:
updateChartSpecRequest
Color
BasicChartSeries
BasicChartSpec
addChart
We have a json schema that includes a field, for which we want to control the value via the schema (rather than having the user specify the value).
We can set a default value - but this is simply overwritten by the formData that the user parses.
Is there a way to "lock" the field value to the default value provided in the schema, ensuring that the formData is updated with the schema-specified value?
{
"meta": {
"title": "SCHEMA REVISION",
"type": "object",
"properties": {
"rev": {
"title": "We want to lock the below default value via the schema",
"type": "string",
"default": "10.00"
}
}
}
}
Sorry, you cannot do this using the schema alone. It's not designed to be used for forms, so it doesn't have that functionality.
It sounds like you want a read-only field. The documentation for react JSON Schema form supports this: https://github.com/mozilla-services/react-jsonschema-form#read-only-fields
The ui:readonly uiSchema directive will mark all child widgets from a
given field as read-only.
Note: the uiSchema is in addition to your JSON Schema.
I'm creating a rates per hour form. I have all the categories in my database rates table. I'd like to be able to grow the categories and it will automatically grow the fields on my form.. loop through it all.
The user needs to select a begin to end rate. I start at this rate and end at this rate.
So right now I have these values in json being loaded onto my page:
rateCategories: [ { "name": "Local", "input1": "Local$0", "input2":
"Local$1" }, { "name": "International", "input1": "International$0",
"input2": "International$1" }, { "name": "Weekdays", "input1":
"Weekdays$0", "input2": "Weekdays$1" }, { "name": "Weekends",
"input1": "Weekends$0", "input2": "Weekends$1" } ]
userRates: { "Local$0": 10, "Local$1": 25, "International$0": 300,
"International$1": 400, "Weekdays$0": 100, "Weekdays$1": 200,
"Weekends$0": 200, "Weekends$1": 300 }
What I'm doing is looping through rateCategories array to create the form. I need to dynamically create the v-model name for all the input fields to match the keys in userRates...
This is where it stops working! It will create the v-model name for me if I write:
:v-model.number="'userRates.'+rateCategories.name+'$0'"
but it won't compute it with the value from the user array. I do get a value into an input field if I write out the v-model name without creating it dynamically like this:
v-model.number="userRates.Weekdays$0"
but then the form needs to be manually updated every time a new category is added.
Is it really impossible to have a dynamic v-model name?? Why??
Also if that's so, how do I go about this so the page can loop through the categories when added to the database and not need a manual update to the page when categories are added or taken away??
Note: I'm also using Vuex store, so I'd rather it not break anything with my getter and setter functions too
Vue.js has full javascript expression support in data bindings, so an object's property can be accessed like you would in plain javascript.
Have you tried using userRates[rateCategories.name$0] ?
Using Javascript Expressions in Vue.js
I've read a lot of documentation but I can't get the following use case to work:
I've got a component 'product-filter'. This component contains the child component 'product-filter-option' which renders a individual filter option (checkbox with label)
The json data for a product-filter instance looks like:
"name": "category",
"title": "Category",
"options": [
{
"value": "value",
"label": "Label 1",
"active": true,
"amount": 8
},
{
"value": "value2",
"label": "Label 2",
"amount": 15
},
etc.
]
I've got multiple instances of product-filter (and a lot of product-filter-option instances) on my page. So far so good.
Now I'd like to render one of my filters (eg. the given Category filter) multiple times on my page (sort of current 'highlighted' filter, which can change during user interaction).
So I've tried to fix this with the following template code:
<filter-component v-if="activefilter"
:name="activefilter.name"
:type="activefilter.type"
:title="activefilter.title"
:tooltip="activefilter.tooltip"
:configuration="activefilter.configuration"
:options="activefilter.options">
</filter-component>
So this filter now shows up 2 times on my page (only when the activefilter property in the vue app is set). But as you might guess when changing an option in this 'cloned' filter the original filter doesn't change, because the data is not synced between these 'clones'.
How can I fix this with Vue?
Thanks for your help!
#roy-j, thanks for your comment about sync. I already tried that by setting:
<filter-component v-if="activefilter"
:name="activefilter.name"
:type="activefilter.type"
:title="activefilter.title"
:tooltip="activefilter.tooltip"
:configuration="activefilter.configuration"
:options.sync="activefilter.options">
</filter-component>
This didn't work. But You got got me thinking, the options sync was not the issue, the sync of the 'checked' state was the issue.
It worked by changing :checked="option.active" to :checked.sync="option.acitve" to the child component: 'filter-option-component'!
Thanks!!