I have some HEX colour values in Stylus similar to the following
$my-background ?= #123456
$my-foreground ?= #ABCDEF
and would like to use them in rgba values for opacity, so that
.my-class
background rgba($my-background, .5)
foreground rgba($my-foreground, .5)
or an alternative syntax is compiled into CSS as
.my-class {
background rgba(18, 52, 86, .5);
foreground rgba(171, 205, 239, .5);
}
Is there a quick and easy way to use HEX colour values in rgba using Stylus or a plugin for Stylus (such as nib)?
Actually, the rgba in Stylus works just like that, have you tried what you wrote? In Stylus
$my-background ?= #123456
$my-foreground ?= #ABCDEF
.my-class
background rgba($my-background, .5)
foreground rgba($my-foreground, .5)
Would actually compile to
.my-class {
background: rgba(18,52,86,0.5);
foreground: rgba(171,205,239,0.5);
}
This means you can just go and do things like rgba(black, 0.5), rgba(#FFF, 0.5) and use variables inside of it, just like in your case.
In the end I made my own function to do this:
hextorgba(color, alpha = 1)
'rgba(' + red(color) + ', ' + green(color) + ', ' + blue(color) + ', ' + alpha + ')'
Related
I have an object obj with the field Notes that stores a value like this:
const obj = {
Notes: "Dial Size 100 mm\r\nBOTTOM CONN. 1/2'' NPT (M)\r\nIP 65, Dry but fillable, glycerine\r\nNR. 33 PCS RANGE 0/4 KG/CM2\r\nNR. 72 PCS RANGE 0/10 KG/CM2\r\nNR.100 PCS RANGE 0/16 KG/CM2\r\nNR. 75 PCS RANGE 0/60 KG/CM2\r\n*"
}
I'm trying to put this text into a PDF using #react-pdf/rendered:
<Text style={{ padding: 2, fontSize: 10, paddingTop: 10, wordWrap: 'break-word' }}>
{
el.Notes.replace('*', '')
.replace(/Goods of [a-zA-Z]+ [a-zA-Z]+/, '')
.replace('with calibration certificate', '')
.replace(/KG\/CM2/g, 'Kg/cm²')
.replace(/\s+/g, ' ')
.replace('-', '\n')
.replace(',', '\n')
}
</Text>
I don't understand why the \r\n contained into the Notes field are ignored. When the pdf is generated the line is not broken. Another issues is with the ², it's print the text as plain insted of rendering Kg/cm2. It seems that all the superscipts are rendered as plain text.
I created a Base_Rent_Variance Calculated field that works like it should:
=IIF(Fields!CurrNrmRent.Value = 0 and Fields!PriorNrmRent.Value > 0, "Review", IIF(Fields!PriorNrmRent.Value = 0 and Fields!CurrNrmRent.Value > 0, "Review", IIF(Fields!CurrNrmRent.Value > 0 and Fields!PriorNrmRent.Value > 0, (Fields!CurrNrmRent.Value-Fields!PriorNrmRent.Value)/IIF(Fields!PriorNrmRent.Value = 0, 1, Fields!PriorNrmRent.Value), nothing)))
I am trying to create a BackgroundColor expression so that if Base_Rent_Variance >= 15% or <= -15%, the background color is red, and if it equals Review the color is red. The expression I created is filling the background red correctly for the 15% variances but not the Review. My expression is below. What am I doing wrong?
=IIF(Fields!Base_Rent_Variance.Value >= .15 or Fields!Base_Rent_Variance.Value <= -.15, "Red",iif(RTRIM(Fields!Base_Rent_Variance.Value) = "Review","Red","White"))
This is likely an issue with your datatypes. You're attempting to store both numeric and string types in the same field. I would use a conversion to be sure you have the correct datatypes. This expression should handle the mismatched datatypes.
=IIF(CDbl(Fields!Base_Rent_Variance.Value) >= .15 or CDbl(Fields!Base_Rent_Variance.Value) <= -.15,
"Red",
IIF(TRIM(CStr(Fields!Base_Rent_Variance.Value)) = "Review","Red","White"))
Another option to try is using the InStr function like the following.
=IIF(CDbl(Fields!Base_Rent_Variance.Value) >= .15 or CDbl(Fields!Base_Rent_Variance.Value) <= -.15,
"Red",
IIF(InStr(CStr(Fields!Base_Rent_Variance.Value), "Review"),"Red","White"))
Based on the comment below, let's try this one with a switch statement. The following switch statement will evaluate the first expression, set the cell red if true, check the second expression, set the cell red if true, and finally set anything left to white.
=SWITCH(CDbl(Fields!Base_Rent_Variance.Value) >= .15 or CDbl(Fields!Base_Rent_Variance.Value) <= -.15, "Red",
InStr(CStr(Fields!Base_Rent_Variance.Value), "Review"),"Red",
true, "White")
You can also use me.Value in colour expressions.
For example:
=iif(me.Value = "Review" OrElse me.Value >= 0.15 OrElse me.Value <= -0.15, "Red", "NoColor")
This means you don't have to recalculate your values each time, or keep track of changes in several locations if the calculations change.
I manage to create a map and even include a north arrow, but can't get the map.scale to work and getting this kind of error:
Error in map.scale(x = -83, y = 12, ratio = FALSE, relwidth = 0.2, cex
= 0.6) : unused arguments (ratio = FALSE, relwidth = 0.2, cex = 0.6)
Here is the code:
library(maps)
library(mapdata)
library(ggmap)
library(mapproj)
library(maptools) #for shapefiles
library(scales) #for transparency
library(GISTools)
range <- readShapePoly("isthmanianpacificmoistforestecoregion") #layer of data for species range
map("worldHires", c('Cost', 'pan', 'Nic', 'Colombia'), xlim=c(-89,-75),ylim=c(5,13), col="lightgray", fill=TRUE) #plot the region I want
map.scale(-81,8,relwidth = 0.15, metric = TRUE, ratio = TRUE)
plot(range, add=TRUE, xlim=c(-89,-75),ylim=c(5,13), col=alpha("green", 0.6), border=TRUE)
map.scale(x=-80, y=10) #, relwidth=0.3, cex=0.5, ratio=FALSE)
north.arrow(xb=-77, yb=12, len=0.2, lab="N", col="black", fill=TRUE) #
The problem is that map.scale() is a function for both maps and GISTools packages. You are trying to use the function from the maps package. Since you are loading first maps and then GISTools, the map.scale() from maps is being masked (probably R throws a warning when loading the last package).
The solution is to specify the package in the function call:
maps::map.scale(-81,8,relwidth = 0.15, metric = TRUE, ratio = TRUE)
Also why two calls to map.scale? You should probably exclude one of them.
Suppose I have color variable:
golden: rgb(212, 196, 112)
Is there a way I could generate variables
golden-01 = golden + 1%
golden-02 = golden + 2%
golden-03 = golden + 3%
golden-04 = golden + 4%
golden-05 = golden + 5%
// etc....
using one of the stylus iterations?
You can use for loop and define built-in function:
golden = rgb(212, 196, 112)
for i in 1..5
define('golden-0' + i, golden + (i)%)
body
color: golden-01 // #d4c571
I want to make a label in Line Chart on X axis, that shows summary for selected category. I want to format this, so under category name I have values. It works if I do:
return Ext.Date.format(v, 'M Y') + '\r' +
(val.data.Budgeted==null?'':('$ '+Ext.util.Format.number(val.data.Budgeted, '0,000') + '\r')) +
(val.data.Actual==null?'':('$ '+Ext.util.Format.number(val.data.Actual, '0,000') + '\r'));
still, label is going down, as I found, with each \r char. So if I have no \r it shows like it should, but if there is N '\r'-s then label itself will go down as there is N lines of text over it.
Also will be nice to find a way to format text (align)
EDIT:
I found a way to do this, by changing "drawVerticalLabels" function in axis config. Still, it's a bad way in my opinion.
I had to do something pretty similar I think. There's a screenshot of it on SO here.
I ended up doing it like an HTML template. I wasn't as familiar with the ExtJS framework as I am now so if I had to redo it I would probably use an xtemplate, but this worked out for me:
series: [{
type: 'line',
title: 'This Year',
axis: 'left',
smooth: false,
xField: 'date_value',
yField: 'the_count',
// custom tips
tips: {
trackMouse: true,
width: 127,
height: 70,
hideDelay: 0,
dismissDelay: 0,
renderer: function(record) {
this.setTitle('<table width=115><tr><th><b>' +
record.get('date_value') +
':</b></th><td align=right>' +
record.get('the_count') +
'</td></tr><tr><th><b>Quota:</b></th><td align=right>' +
record.get('the_quota') +
'</td></tr><tr><th><b>Diff:</b></th><td align=right>' +
(record.get('the_quota') > record.get('the_count') ?
'-' + (record.get('the_quota') - record.get('the_count')) :
'+' + (record.get('the_count') - record.get('the_quota'))
) + '</td></tr></table>'
);
}
}
}]
Multiline can be done with inserting '\n' for line break in the axis renderer, and by default it is centered.