I defined editorStyleMap and use them
const editorStyleMap = { Choose: { color: '#4880f0' }, Black: { color: '#000000' } }
then I get the array of inlineStyleRanges
const messageBlocks=convertToRaw(editorState.getCurrentContent()).blocks[0].inlineStyleRanges;
i console every item of the array and the result is below,
item's style can be 'Choose' or 'Black'
{offset: 3, length: 3, style: 'Choose'} {offset: 6, length: 5, style:
'Black'} {offset: 11, length: 3, style: 'Choose'} {offset: 14, length:
1, style: 'Black'}
but when i want to use if to judge the type of style
if(item.style==='Choose')
terminal reports an error
'This condition will always return 'false' since the types
'DraftInlineStyleType' and '"Choose"' have no overlap.'
it seems that styleType only can be default type like 'BOLD' and 'ITALIC'.
i don't know why??? if you could help me, i would be grateful:)
i use a strange way to solve the problem.
just use String() method to convert item.style to string type, and the string can be anything you define
if(String(item.style)==='Choose')
The terminal does not report an error
Related
i am using import { makeStyles } from '#mui/styles'
This is my theme typography config
enter image description here
This is file, i want to combine these 3 attributes into 1 line of code.enter image description here
Sorry that my English is not good, so it may cause misunderstandings for everyone. Looking forward to support
i want to combine these 3 attributes into 1 line of code
const a =
{
fontSize: theme.typography.text12Medium16.fontSize;
lineHeight: theme.typography.text12Medium16.lineHeight;
fontWeight: theme.typography.text12Medium16.fontWeight;
}
this is what you are passing to MuiDataGrid-main
and this is your text12Mediul16 object :
const text12Mediul16 =
{
fontSize: '12px',
lineHeight: '16px',
fontWeight: FONT_MEDIUM
}
and since :
theme.typography.text12Medium16.fontSize = '12px'
theme.typography.text12Medium16.lineHeight = '16px'
theme.typography.text12Medium16.fontWeight = FONT_MEDIUM
then a = text12Mediul16 so you can replace it like this :
'& .MuiDataGrid-main: theme.typography.text12Medium16'
and if your object contains other properties apart from fontSize, fontWeight and lineHeight that are not shown in your code example, then you can't do better than you did
How do I color each boxes individually in an echarts box-plot based on a function?
The following function works on a simple bar chart and colors the bars appropriately:
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
itemStyle: {
color: function(seriesIndex) {
return ProfessionColor[seriesIndex.name.split("_", 1).toString()]
},
},
}]
However, it does not work on a box-plot:
series: [{
name: 'boxplot',
type: 'boxplot',
datasetIndex: 1,
itemStyle: {
color: function(seriesIndex) {
return ProfessionColor[seriesIndex.name.split('_', 1)];
}
},
encode: {
tooltip: [1, 2, 3, 4, 5]
}
},
{
name: 'outlier',
type: 'scatter',
encode: {
x: 1,
y: 0
},
datasetIndex: 2
}
]
If I provide color: "red" rather than a function all boxes are colored red. This leads me to believe that it needs to happen in the transform.config which I can't find in the documents or tutorial.
Echarts Box-Plot currently
The link is the complete charts in its current form.
Apparently, echarts only allows scripting (i.e., using a function for) either the line color -- option itemStyle.borderColor or the fill color -- option itemStyle.color.
The difference between the two appears to be made by the value of the internal property BoxplotSeriesModel#visualDrawType. It is now set to "stroke", which means that borderColor can be set via a function.
Since you wanted to set the fill color, its value should be set to "fill". I searched a way to change that property - it was rather difficult for echarts don't document an API for extensions. Still, navigating the source code I came up with this hacky solution:
const BoxplotSeriesModel = echarts.ComponentModel.getClassesByMainType('series').find(cls=>cls.type==='series.boxplot');
const BoxplotSeriesModelFill = function(...args){
const _this = new BoxplotSeriesModel(...args);
_this.visualDrawType = 'fill';
return _this;
}
BoxplotSeriesModelFill.type = BoxplotSeriesModel.type;
echarts.ComponentModel.registerClass(BoxplotSeriesModelFill);
That's a "patch" to be applied at the beginning of your script, immediately after you have the echarts global defined.
Here's a forked version of your code that uses that patch. The only other change I made was to set a borderColor (can now only be a fixed value) to black.
This will not get you all the way, but if you add colorBy: "data" to your options and remove the itemStyle, it will look like this:
Hi guys I'm trying to remove or hide the last letter from List
Any possible ways?
Text(list[i].name,
style: GoogleFonts.poppins(
fontWeight: FontWeight.w400,
color:
list[i].isBook == "0"
? selectedTimingSlot[i] ? WHITE : BLACK
: Colors.grey.withOpacity(0.5),
fontSize: 15,
),
),
**Above code shows= "12:00 AM" I need to hide or remove "AM"**
Use substring method:
main() {
print("12:00 AM".substring(0,5));
}
Or with replaceAll method:
main() {
print("12:00 AM".replaceAll("AM","").replaceAll("PM",""));
}
with regular expression:
main() {
var regex = new RegExp(r'[a-zA-Z]');
print("02:00 AM".replaceAll(regex,""));
}
Ketan’s substring method is a terrible way of doing this, what about “9:00 PM”?
Edit: looks like his method worked perfectly!
Use regex and/or the following package:
https://pub.dev/packages/string_validator
The way I do it is with this extension
extension StringExtension on String {
String deleteLastChar({int toDelete = 1}) => substring(0, length - toDelete);
}
And you can use like
"12:00 AM".deleteLastChar(toDelete: 3) // Prints 12:00
Why toDelete: 3? Because you also want to remove the space between 12:00 and AM
I'm trying to style a map layer for a leafletJS map and have the following code but it doesn't seem to colour at all:
var vectorTileOptions = {
rendererFactory: L.canvas.tile,
vectorTileLayerStyles: {
weight: 2,
color: 'yellow',
},
};
var mapLayer = L.vectorGrid.protobuf("/tiles/admin_countries/{z}/{x}/{y}", vectorTileOptions)
It's just comes renders the standard blue, i'm not sure what i'm doing wrong, any suggestions would be great.
This would do it:
.setStyle({fillColor: '#dd0000', color: '#dd0000', weight: 1, opacity: 0.8, fillOpacity: 0.8});
actually, no I think you need to just adjust what you have there:
vectorTileLayerStyles: {
weight: 2,
fillColor: '#9bc2c4'
},
there is a lot about it here: https://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html#styling-vectorgrids
The answer can be found here, by having a click log e.layer to console you can get the property which is used as the key for the vectorTileOptions and then style as appropriate.
I use Chart.js to create a radar chart. I would like change the size of label but i don't find the option.ind my code here :
var data = {
labels: ajax_label,
pointLabelFontSize : 16,
scaleFontSize: 16,
datasets: [
{
label: "My First dataset",
fillColor: "rgba(91, 192, 222,0.2)",
strokeColor: "rgba(91, 192, 222,1)",
pointColor: "rgba(91, 192, 222,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(91, 192, 222,1)",
data: ajax_data,
scaleShowLabels : false,
scaleOverride: true,
// ** Required if scaleOverride is true **
// Number - The number of steps in a hard coded scale
scaleSteps: 10,
// Number - The value jump in the hard coded scale
scaleStepWidth: 10,
// Number - The scale starting value
scaleStartValue: 0
}
]
};
var ctx = $("#myChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx);
new Chart(ctx).Radar(data, {
pointDot: false
});
Can you help me please ?
The Radar chart has some chart-specific options that can be rolled in the the global chart options. One of these options is pointLabelFontSize which takes a number value. This option needs to be set in the same place you're currently setting the pointDot value in order to take effect:
new Chart(ctx).Radar(data, {
pointDot: false,
pointLabelFontSize: 20
});
Note: the value for pointLabelFontSize is in pixels