I am trying to create a custom component for React-Select, where I want to show more than just label in the select box. Kind of similar to Custom Placeholder, Option, Value, and Arrow Components part here. The problem is that the link to the source code is not accessible anymore, and I found the documentation for styling pretty awful.
Assume I have my data like this:
[
{
'id': 1,
'label': 'Alpha',
'gender': 'Male'
'country': 'USA'
},
{
'id': 2,
'label': 'Beta',
'gender': 'Male'
'country': 'ENG'
},
{
'id': 3,
'label': 'Charlie',
'gender': 'Female'
'country': 'GER'
}
]
What I want to show in select box is something like:
Alpha - Male - USA
Beta - Male - ENG
Charlie - Female - GER
But it should still filter only for labels, which are Alpha, Beta, and Charlie.
Right now I can only show Alpha, Beta, and Charlie. I am trying to understand how to do this from the documentation here but for example there are no definitions for style keys and what they do. I could use some guidance here.
Use the getOptionLabel prop on your Select:
const label = (option) => `${option.label} - ${option.gender} - ${option.country}`;
<Select getOptionLabel={label} />
Related
is there any way to create shape or create marks on chart in custom indicator using tradingview charting library. I am using this way to create custom indicators. Thanks in advance.
Yes you can. Here is the guide.
For the callouts/Markers on chart you can follow this guide in the JS API.
https://github.com/tradingview/charting_library/wiki/JS-Api#gettimescalemarkssymbolinfo-from-to-ondatacallback-resolution
For getmarks you can do this
getMarks: (symbolInfo, startDate, endDate, onDataCallback, resolution) => {
var Arr = [
{
id: 1,
time: 1551448800000 / 1000,
color: 'blue',
text: 'Hello world',
label: 'B',
labelFontColor: 'yellow',
minSize: 20
},
]
onDataCallback(Arr);
console.log("=====getMarks running");
},
It will plot the marks above the bars as shown in the below image.
For Timescalemarks.
getTimescaleMarks: (symbolInfo,startDate,endDate,onDataCallback,resolution) => {
onDataCallback([
{
id: 1,
time: / 1000,
color: 'Turquoise',
label: 'The test you want to show on marker',
minSize: 20,
tooltip:[
"Information you want to print",
]
},
]);
})
The Time scale marks will look like this. And they will be plotted below the bars.
And for the shapes like circles and arrows you can follow this documentation. And use the createMultipointShape(points, options) methos to plot your shapes.
https://github.com/tradingview/charting_library/wiki/Chart-Methods#createmultipointshapepoints-options
Let's say I have an array of users:
usersData = [
{ id: 21, name: 'John Dean' },
{ id: 3, name: 'Mike Brine' },
{ id: 6, name: 'Tom Kalvi' }
]
names in userData are generated from another array with full user information: user.first_name + user.last_name
When I build Vue-Chart Bar, labels array store this data with indexes:
labels = { 0: "John Dean", 1: "Mike Brine", 2: "Tom Kalvi" }
And when I want to get original ID from Bar event onClick, I receive only index.
I need to load additional information for each user based on Bar click, but I need to have original ID.
What is the easiest way to get it?
Thank you in advance
Well if you have an index clicked just do like this:
usersData[clickedIndex].id
Is is possible to set the fill-color stops, based on a text property rather than a numeric value
e.g fill based on province name
My input dataset has a property/Column called PROV_ID and contains a 2 letter ID for each state/Province
So I am aiming toward something in the lines of: 'stops': [['GP', 'YELLOW']]
The code however does not render any fill-colors when when implemented as shown below, I have replaced my PROV_ID in the code below with the Primary key property [numeric] to test, and that works fine
I guess the question is really then if fill-color stops is limited to numeric properties only?
map.addLayer({
'id': 'countiesLayer',
'type': 'fill', /*define the type of layer fill, line, point, fill-extrusion, background, raster, circle*/
'source': 'mySrcName',
'source-layer': '3_Fields-83vr21',
'layout': {
'visibility': 'visible'
},
/*there are many options for styling - this is a simple style*/
'paint': {
'fill-color': {
'property': 'PROV_ID',
'stops': [['GP', 'YELLOW']]
},
'fill-outline-color': 'white'
}
});
I think you need an expression with the function match.
The code would be (not tested):
map.addLayer({
'id': 'countiesLayer',
'type': 'fill', /*define the type of layer fill, line, point, fill-extrusion, background, raster, circle*/
'source': 'mySrcName',
'source-layer': '3_Fields-83vr21',
'layout': {
'visibility': 'visible'
},
/*there are many options for styling - this is a simple style*/
'paint': {
'fill-color': ['match', ['get', 'PROV_ID'], // get the property
'GP', 'yellow', // if 'GP' then yellow
'XX', 'black', // if 'XX' then black
'white'] // white otherwise
},
'fill-outline-color': 'white'
}
});
From the docs:
match
Selects the output whose label value matches the input value, or
the fallback value if no match is found. The input can be any string
or number expression (e.g. ["get", "building_type"]). Each label can
either be a single literal value or an array of values.
["match",
input: InputType (number or string),
label_1: InputType | [InputType, InputType, ...], output_1: OutputType,
label_n: InputType | [InputType, InputType, ...], output_n: OutputType, ...,
default: OutputType ]: OutputType
I am using morris.js (which has a dependency on raphael) for creating stacked bar graphs. For each stacked bar I want to show the split for the various levels in the bar as a tooltip. I tried using the hoverCallback: but it doesn't seem to give me control over the particular element I am hovering over. I only get the content for that particular bar.
I have setup a JSBIN example for the same here:
When you hover over the bar it shows the index of the bar at the bottom. I want to show the content as a tool tip instead.JSBIN example
Piece of cake. Demo and code:
<script type="text/javascript">
Morris.Bar({
element: 'bar-example',
data: [
{y: '2006',a: 100,b: 90},
{y: '2007',a: 75,b: 65},
{y: '2008',a: 50,b: 40},
{y: '2009',a: 75,b: 65},
{y: '2010',a: 50,b: 40},
{y: '2011',a: 75,b: 65},
{y: '2012',a: 100,b: 90}
],
hoverCallback: function(index, options, content, row) {
return(content);
},
xkey: 'y',
ykeys: ['a', 'b'],
stacked: true,
labels: ['Series A', 'Series B'] // rename it for the 'onhover' caption change
});
</script>
ARGUMENTS:
1: index: it represents record number i.e. from 0 to n records.
2: content: this is default hover div.
3: option : you data is inside this, before return(content);. do console.log(options) to view details.
4: row : to see the use of row below is an example.
hoverCallback: function (index, options, content, row) {
console.log(row);
var hover = "<div class='morris-hover-row-label'>"+row.period+"</div><div class='morris-hover-point' style='color: #A4ADD3'><p color:black>"+row.park1+"</p></div>";
return hover;
},
UPD:
For flying label, you need to add Morris CSS stylesheet to the code - demo
IMPORTANT NOTE
Flying labels works since version 0.4.3
http://jsbin.com/finuqazofe/1/edit?html,js,output
{ y: ..., x: ..., label: "my own label"},'
...
Morris.Line({
hoverCallback: function(index, options, content) {
var data = options.data[index];
$(".morris-hover").html('<div>Custom label: ' + data.label + '</div>');
},
...
other params
});
lodash provides a method _.uniq() to find unique elements from an array, but the comparison function used is strict equality ===, while I want to use _.isEqual(), which satisfies:
_.isEqual([1, 2], [1, 2])
// true
Is there a way to perform _.uniq() with _.isEqual(), without writing my own method?
As of lodash v4 there's _.uniqWith(array, _.isEqual).
from the docs:
var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
_.uniqWith(objects, _.isEqual);
// → [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]
more info: https://lodash.com/docs#uniqWith
While you can't use isEqual() with uniq(), what you're asking for seems perfectly reasonable and deserves a solution. Here's the best (clean/performant) I could come up with:
_.reduce(coll, function(results, item) {
return _.any(results, function(result) {
return _.isEqual(result, item);
}) ? results : results.concat([ item ]);
}, []);
You can use reduce() to build an array of unique values. The any() function uses isEqual() to check if the current item is already in the results. If not, it adds it.