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.
Related
We have an online editor made by monaco-editor, here is the link: https://v3.10studio.tech/#/formula-editor-addin?app=formula-editor-addin. Users could enter an Excel formula like =1+2+3+4+5, then click on the Format button to see the formatted formula.
What is odd is that, after clicking on Format button, a random part of the formula is often highlighted in gray:
Does anyone know what may be the cause?
PS: The current options setting are as follows:
const monacoOptions: monacoEditor.editor.IEditorConstructionOptions = {
lineNumbers: 'off',
selectionHighlight: false,
glyphMargin: false, //left side,
lineDecorationsWidth: 0, // width between line number and content,
renderIndentGuides: false, // no indent guide lines
minimap: { enabled: false },
};
When you set the value of the model ie editor.getModel().setValue('FORMATTED-CODE') you should have to set the position of the cursor manually.
The selection is actually not random. Monaco will select all the extra texts you have added. For example -
Before : 1+2+3+4+5 - here last position is line 1 column 10
Format: 1 + 2 + 3 + 4 + 5 - here last position is line 1 column 18
So the extra text + 4 + 5 is selected, it means column 11 to 18 is selected
To set the position of the cursor at where it was before
const pos = editor.getPosition()
editor.getModel().setValue('FORMATTED-CODE')
editor.setPosition(pos)
To set the position of the cursor at Line 1 Column 1
editor.getModel().setValue('FORMATTED-CODE')
editor.setPosition({ lineNumber: 1, column: 1 })
To set the position of the cursor at last (using offset)
const formatted = 'FORMATTED-CODE'
const offset = formatted.length
const pos = editor.getModel().getPositionAt(offset)
editor.getModel().setValue(formatted)
editor.setPosition(pos)
You can also set selection
editor.setSelection({
startLineNumber: 1,
startColumn: 1,
endLineNumber: 1,
endColumn: 5,
})
For more informations you can follow these APIs -
setPosition - To set cursor position
setSelection - To set selection
setSelections - To set multiple positions & selections
I am trying to loop through plots. Each "station" is a pandas dataframe has a single water year of data (oct 1 to Spet 29). The data is being read in with this code:
sh_784_2020 = pd.read_csv("sh_784_WY2020.csv", parse_dates=['Date'])
sh_784_2020.columns = ["Index", "Date", "Temp_C","Precip_mm","SnowDepth_cm","SWE_mm","SM2","SM8","SM20"]
My plots loop through but the x-axis always starts at the year 2000 through the current date displayed but my data is from 2006-2020. Is there a way to have the xlim adjust automatically for the date range in the data frame? Or is there a way to create this plot in matyplotlib and not seaborn?
for station in stations:
station['Density'] = station['SWE_mm']/(station['SnowDepth_cm']*10)*100
station['Density range'] = pd.cut( station['Density'], [-np.inf, 25, 30, 35, 40, np.inf])
Date = station.loc[:, 'Date'].values
SWE_mm = station.loc[:, 'SWE_mm'].values
Density = station.loc[:, 'Density'].values
sns.scatterplot(station['Date'], station['SWE_mm'], hue='Density range', data= station, edgecolor = 'none', palette=['grey', 'green', 'gold', 'orange', 'crimson'], alpha= 1)
plt.xlim ()
plt.show()
Plot example 1
Plot example 2
If you upgrade to seaborn 0.11 you should find that the default autoscaling works better, but you can get a good result without upgrading by creating the Axes object before plotting and setting the units, e.g. something like
ax = plt.figure().subplots()
ax.xaxis.update_units(station["Date"])
The mask is needed: 90.99%, where:
9 - optional digit
0 - required
%,. - relevant characters '%' and '.'
For example:
Input / Result
1 ---> 1%
12 ---> 12%
12.1 ---> 12.1%
12.12 ---> 12.12%
I'm using redux-form
I've tried react-native-text-input-mask and react-native-masked-text already, however, there is no similar functionality in these packages (in the first one there is something similar, but '%' is correctly displayed only if it is used before the number but this char should be after)
The best way here is to provide masking next to the input itself.
It highly depends on how do you use the Field component (do you even use it?).
You can try to use the format prop on the Field.
Or you can provide your own component to render a field and provide own format functionality:
const renderPercentagedInput = (field) => {
function onChange(evt) {
const value = evt.target.value;
const numbers = value.replace(/[^0-9.,]/g, '')
field.input.onChange(numbers + '%')
}
return (
<TextInput
{...field.input}
onChangeText={onChange}
/>
);
}
I'm using cal-heatmap for displaying a user activity for a month. My issue is that the colour change is not showing properly. My "init" function is given below.
When I provide data with integer values which have difference of 2 or 3 (eg: 8, 12, 3, 7 etc [pls note that I'm giving data as JSON]), I can't see any significant difference in colour for the blocks (screenshot is added in http://i.stack.imgur.com/xspWR.jpg - numbers given in top indicates the data corresponding to that cell).
init({
start: new Date(newDate.getFullYear(), month, 1),
cellRadius: 35,
cellSize: 58,
itemSelector: "#heatmap_busiestDays",
domain: "month", //hour|day|week|month|year
subDomain: "x_day",
subDomainTextFormat: "%b %d",
range: 1,
domainGutter: 10,
previousSelector: "#cal-heatmap-previous",
nextSelector: "#cal-heatmap-next",
displayLegend: false,
data: busiestDayHeatMap,
legendColors: {
min: "#A2F37B",
max: "#26911F",
empty: "white"
}
});
Am I missing anything in settings? Any help will be greatly appreciated. Thanks in advance.
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.