I am working with Nivo HeatMap and I notice that for the y value, it always accepts a number and even if I force pass the .00 digits, it will still truncate and display the value without the trailing zeros. The format of the data it expects is the following:
{
id: string
data: {
x: string | number
y: number | null
}[]
}[]
Has anyone been able to find a workaround to display 1.00 instead of just 1 (see screenshot below?
Nivo sample graph
You should format your data using fixed point notation.
In your component you should add the valueFormat prop with the following value:
<ResponsiveHeatMap
data={data}
// Indicates fix point notation (f) with a precision of 2 (.2),
// right aligning the field (>) and a minus sign if negative (-)
valueFormat="0>-.2f" />
Related
The bounty expires in 2 days. Answers to this question are eligible for a +200 reputation bounty.
slevin wants to draw more attention to this question.
I use mapbox 2.10 and react 18.2. I have a mapbox fill-extrusion that gets a filter after a button click
map.current.setFilter('my-extrude', ['==',["id"] , 0] )
to show some extruded polygons.
In that layer I try to set a value for each polygon based on a property of the feature.
This doesnt work, I get Error: The layer 'my-extrude' does not exist in the map's style and cannot be filtered. probably because of the error in setting the opacity. If I set the opacity to a static number like 0.6, all works well.
What am I missing?
Thanks
map.current.addLayer({'id': 'my-extrude',
'type': 'fill-extrusion',
'source': 'my-extrude',
'paint': {
'fill-extrusion-color':[
'case',
['boolean', ['feature-state', 'hover'], false],'rgb(253, 255, 0)',
['boolean', ['feature-state', 'click'], false],'rgb(253, 255, 0)',
'rgb(253, 255, 72)'
] ,
'fill-extrusion-opacity':['get', 'customTop'],
'fill-extrusion-height': ['+',['to-number', ['get', 'customTop']] , ['to-number', ['get', 'customHeight']]],
'fill-extrusion-base': ['+',['to-number', ['get', 'customTop']], ['to-number', ['get', 'customBase']]]
}
});
it seems to me that instead of using 'feature-state' you should create a variable which will get the state of the map element on the page, and if the state is hover then give a static number for that case, and if the state is clicked then give a different static number.
Here most probably because you forgot to convert customTop to number just like you did for fill-extrusion-height and fill-extrusion-base and the error occures because fill-extrusion-opacity only accepts numbers between 0 and 1.
'fill-extrusion-opacity' : ['to-number', ['get', 'customTop']]
Note also when you use a variable to define fill-extrusion-opacity it is recommanded to set it with an interpolate expressions to make fill-extrusion-opacity always between 0 and 1.
Interpolate :
Produces continuous, smooth results by interpolating between pairs of input and output values ("stops"). The input may be any numeric expression (e.g., ["get", "population"]). Stop inputs must be numeric literals in strictly ascending order. The output type must be number, array, or color.
There are multiple ways to interpolate and the one needed here is the "linear" type :
Interpolates linearly between the pair of stops just less than and just greater than the input.
Inspired by this example from docs that uses the interpolate operator to define a linear relationship between zoom level and circle size using a set of input-output pairs
{
"circle-radius": [
"interpolate", ["linear"], ["zoom"],
// zoom is 5 (or less) -> circle radius will be 1px
5, 1,
// zoom is 10 (or greater) -> circle radius will be 5px
10, 5
]
}
with the same logic :
{
"fill-extrusion-opacity": [
"interpolate", ["linear"], ['to-number', ['get', 'customTop']],
// customTop is 0 (or less) -> fill-extrusion-opacity will be 0
0, 0,
// customTop is 1 (or greater) -> fill-extrusion-opacity will be 1
1, 1
]
}
I want to have an input field of type="number". (So that on mobile phones the numeric keyboard will appear). The problem is, that all my values are in cents: 1EUR = 100 Cents and I want to display a comma as a decimal separator (German format), so onChange will multiply the value with 100, and when the value is rendered, it is devided by 100.
But when I type "5." after typing the next number the "." will get lost. The same happens with a ",".
I couldn't find any component already implemented that does this by using input type="number" instead of type="text".
So does anyone know such a library or a way to implement it, that does not include having two inputs, one for Cents and one for Euros?
I think the number input type can handle the German comma system. So there might not be a need to manually change a 2,5 input into a 2.5.
If you use this changeHandler on a number input
const changeHandler = e => {
const val = e.target.value
console.log(2 * val)
setNumber(val)
}
the val variable will be a usual float while you see a comma in the input.
I have a list of exclusion numbers.
for example
(400276|400615|402914|404625)
the pattern should not let me enter into the input any of these numbers as the first 6 digits
example
400276123 .BAD. because the value init with a number to exclude
400277123 .OK
I try something like that
"^[^] (400|405)"
but is not working
how can I use a pattern for exclude this first 6 digits
Your pattern - ^[^] (400|405) - matches the start of the string, then any char, a space, and either 400 or 405.
What you need is a negative lookahead:
/^(?!400276|400615|402914|404625)/
^^^ ^
It will fail the match of a string that starts with these values.
See the regex demo.
I'm having some trouble getting started with a lab of mine. The lab has the following instructions:
Given a value int input = 0b10010110 determine what sports an individual likes. Assume there will be no errors in this input. From left to right, each position represents the following: Football, Baseball, Volleyball, Swimming, Softball, Soccer, Hockey, Lacrosse.
If there is a 1 is in that position, then the person likes that sport. Based on the “binary” input given, output to the screen all of the sports that the user enjoys. For the given binary number, the user likes, football, swimming, soccer and hockey.
Do not make an array of characters.
Be sure to use an enumerated data type.
I'm not sure how I can compare each position of the string to tell whether it is a 1 or 0. One idea I have is to use an enumerated type where I set each sport to a ten digit number where only its appropriate position is 1
enum sport{
Football = 0010000000,
Baseball = 0001000000,
Volleyball = 0000100000,
... ,
Lacrosse = 0000000001
};
I would then shift left/ right on the given value "input" the appropriate amount of times to leave only the specified position with its original value and to set all other values to 0. For Football:
input << 2; input >> 9; input << 7;
So the new set value would be 0010000000. Then I'd be able to compare the number as a whole. I would have to that for each case, but I cannot think of a different way to do it.
Am I completely off? Is there a more functional way to check the value of each position using bit operations? Thanks for any assistance in advance.
Use bitwise AND operator &:
if (input & Football) {
// Football bit is set
} else {
// Football bit is not set
}
Also note that the 0b prefix is a compiler extension but is not standard C. And in your enum values, a number starting with the 0 prefix is in octal format (you have to fix this). I suggest you to use hexadecimal format for bit manipulation.
You could make things a bit more readable if you define you sport values by shifting a 1 to the left by the appropriate number of places; in fact, you could use a simple enumeration for the sport values, and use that to specify how many places to shift the bit.
I used decimalSeparator property of numberfield and set it to ',' (comma). Now I have problem reading value as number and doing math with it.
I first tried simple:
var v = form.getForm().getValues().myfield / 2
As soon s I type comma, v becomes NaN.
Then I tried:
var v = Ext.util.Format.number(form.getForm().getValues().myfield, "0.000,00") / 2
As soon a I type comma, v becomes 0.
I also tried combinations with /i in format string but id didn't help either.
What am I missing?
The problem is that getValues does not work as you expect. From the documentation of getValues (emphasis mine):
Note: The values are collected from all enabled HTML input elements within the form, not from the Ext Field objects. This means that all returned values are Strings (or Arrays of Strings) and that the value can potentially be the emptyText of a field.
If you want to ensure that you have a decimal value, you will have to do something like the following:
var v_string = form.getForm().getValues().myfield; //get the string
v_string = v_string.replace(",", "."); //replace ',' with '.'
var v = (+v_string) / 2; //convert the value to a decimal and divide by 2
EDIT
You could also try using the getFieldValues (i.e. form.getForm().getFieldValues()) method instead of the getValues method. This should act as though you had called getValues on every form field.
This should work.
var value = parseFloat("5000,5".replace(",", "."));