I am trying to target all h elements of typography mui class. Writing them one by one is annoying:
typography: {
"& h1": {
fontWeight: "400",
},
"& h2": {
fontWeight: "400",
},
"& h3": {
fontWeight: "400",
},
"& h4": {
fontWeight: "400",
},
"& h5": {
fontWeight: "400",
},
"& h6": {
fontWeight: "400",
},
}
There should be a shorter syntax for this?
tyopgraphy: {
'& h1, & h2, & h3, & h4, & h5, & h6': {
fontWeight: '400',
},
},
Related
I have this response from an API
{
"error": "",
"success": {
"data": [
{
"id": "00005432",
"channel": "B22",
"case_status_id": "1",
"case_type_id": "0",
"provider_group_id": "1",
"user_id": "78",
"contact_id": null,
"client_id": "23982",
"subject": "parallala",
"description": "",
"latest_development": "",
"priority": "medium",
"caseArrivalDate": "2022-08-29",
"arrivalDate": "2022-08-29",
"dueDate": null,
"closedOn": null,
"statusComments": "dsdde 663171471 (ndnendn ))////#-#-&#+#+#+#+#(",
"category": "edefrfr",
"caseValue": "0.00",
"internalReference": null,
"externalizeLawyers": "no",
"createdOn": "2022-08-29 10:59:46",
"createdBy": "14",
"modifiedOn": "2022-09-27 18:35:43",
"requestedByName": null,
"legal_case_stage_id": null,
"caseClientPosition": null,
"clientForeignName": null
}
],
"totalRows": "1122",
"dbDriver": "MYSQL"
}
}
I think its a Map(keys, values) and inside the key(success) we have another Map
How I can get access to a specific element?
I will assume that this value is assigned to a map type variable, I will name it response
so to access the id :
response["success"]["data"][0]["id"]
first you should know how to access to Map
here Ex show you how can get access to a specific element
myset is Custom Map you provided it
((myset['success'] as Map<String, dynamic>)['data'] as List)
.where((e) => e["id"] == "00005432");
you will get list of Map And Filter List By specific Id Or Any attributes you need
after You understand it you can parse Map To Object And Access easyly To All attributes
hope this help you to get Started
JSON and serialization
for ex. that is my data
const String _SexData = """[
{
"sex": "Seçiniz / Choice",
"x": 1000
},
{
"sex": "Male",
"x": 1001
},
{
"sex": "Female",
"x": 1002
}
]""";
and I calling it;
DropdownButton<int>(
iconEnabledColor: Colors.blue,
dropdownColor: const Color.fromARGB(255, 28, 185, 242),
style: const TextStyle(color: Colors.black),
value: sex?.x ?? 1000,
items: model1.sexs.map((a) {
return DropdownMenuItem(
child: Text(a.sex,
style: const TextStyle(color: Colors.white)),
value: a.x,
onTap: () {
setState(() {
sex = a;
});
},
);
}).toList(),
onChanged: (s) {},
),
I am learning drop down in Flutter and was wondering if you could help me with dependant drop downs.
One drop will have one value but when i change that it should change the Second drop down value, below is an example of JSON -
List _nameList = [{
"id": 1270,
"name": "CHARLES",
"option": [{
"id": "72426",
"number": "1085659"
}]
},
{
"id": 1353,
"name": "HARRIS",
"option": [{
"id": "72605",
"number": "1072236"
},
{
"id": "72705",
"number": "1082236"
}
]
}
]
Above, CHARLES and HARRIS should be in one drop down but if i change/select like CHARLES/HARRIS respected number should be auto selected into another drop down.
I am able to create one with value as CHARLES and HARRIS, below code -
DropdownButton(
icon: Icon(
CupertinoIcons.chevron_down,
color: !roles.driver2
? Colors.grey[50]
: AppColors.appColor,
),
isExpanded: true,
onChanged: onNameDropdownItem,
items: _nameList,
value: _selectedName,
underline: SizedBox(),
style: TextStyle(
fontSize: 18,
color: Colors.black87,
),
)
onNameDropdownItem(Name selectedName) {
int ind;
_nameList.forEach((element) {
if (selectedName.name == element.value.name)
ind = _nameList.indexOf(element);
});
setState(() {
_selectedName = _nameList[ind].value;
});
}
Please help stuck here :(
I am trying to create a graph plot in Echarts 4, where each node belongs to one of two categories: https://codepen.io/autarkie/pen/LqqZjM:
var nodes = [{
"id": 1,
"category": 1
}, {
"id": 2,
"category": 0
}, {
"id": 3,
"category": 1
}, {
"id": 4,
"category": 0
}];
var links = [{
"source": "3",
"target": "1"
}, {
"source": "3",
"target": "2"
}, {
"source": "1",
"target": "2"
}, {
"source": "2",
"target": "4"
}];
var myChart = echarts.init(document.getElementById('chart'));
var option = {
backgroundColor: new echarts.graphic.RadialGradient(0.4, 0.4, 0.7, [{
offset: 0,
color: '#162436'
}, {
offset: 1,
color: '#000'
}]),
legend: {
data: ["Type 1", "Type 2"],
textStyle: {
color: '#fff'
},
icon: 'circle',
type: 'scroll',
orient: 'vertical',
left: 10,
top: 20,
bottom: 20,
itemWidth: 10,
itemHeight: 10
},
animationDurationUpdate: 300,
animationEasingUpdate: 'quinticInOut',
series: [{
type: 'graph',
layout: 'force',
// symbol: 'rect',
//symbolSize: 10,
lineStyle: {
normal: {
curveness: 0.1
}
},
roam: true,
focusNodeAdjacency: true,
legendHoverLink: true,
draggable: true,
force: {
repulsion: 30,
gravity: 0.03,
edgeLength: 50,
layoutAnimation: true
},
data: nodes,
links: links,
categories: [{
name: 'Type 1',
symbol: 'diamond', // !!! DOES NOT WORK !!!
symbolSize: 30, // !!! DOES NOT WORK !!!
itemStyle: {
color: '#79d2a6'
}
},
{
name: 'Type 2',
symbol: "rect", // DOES NOT WORK
symbolSize: 20, // DOES NOT WORK
itemStyle: {
color: '#ff9900'
}
}
],
}]
};
myChart.setOption(option);
Each category should have its own symbol. I know it is possible to specify the symbol for each node separately, like so:
var node_shaped = [{
"id": 1,
"symbol": "rect",
"category": 1
}]
but it this is quite inelegant. Echarts documentation (https://ecomfe.github.io/echarts-doc/public/en/option.html#series-graph.categories.symbol) specifies the option to include a symbol per category, like in the code above. However, that option has no effect whatsoever on the node shapes. Instead, the default circle shape is used. It is possible to change category color using a similar category-wide option, so I am at loss as to why the shape specification doesn't work. Thanks for taking a look.
Data Table structure is as follows
{
"cols": [
{
"id": "",
"label": "Date",
"pattern": "",
"type": "date"
},
{
"id": "Col1",
"label": "Col1 Label",
"pattern": "",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": "Date(2017, 5, 27)"
},
{
"v": 213
}
]
}
]
}
H Axis options
hAxis: {
slantedText: true, slantedTextAngle: 35,
titleTextStyle: {bold: false, fontSize: 11, color: '#610B38'},
textStyle: {
bold: true, fontSize: 8, color: '#4d4d4d'
},
maxAlternation: 1,
showTextEvery: 1,
viewWindowMode : 'maximized',
gridlines:
{
count: 31
},
bar: { groupWidth: 40 }
}
But in the column graph it is displaying multiple adjacent bars looks like time instead of a single date
This issue happening only for single date.
I want to display the column chart as single bar instead of big rectangle.
Any feedback appreciated
recommend setting the min / max values on the viewWindow explicitly
keeping within a day should prevent "column overflow"
viewWindow: {
min: new Date(dateRange.min.getTime() - oneDay),
max: new Date(dateRange.max.getTime() + oneDay)
}
see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart();
$(window).on('resize', drawChart);
},
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable({
"cols": [
{
"id": "",
"label": "Date",
"pattern": "",
"type": "date"
},
{
"id": "Col1",
"label": "Col1 Label",
"pattern": "",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": "Date(2017, 5, 27)"
},
{
"v": 213
}
]
}
]
});
var oneDay = (1000 * 60 * 60 * 24);
var dateRange = data.getColumnRange(0);
var chart = new google.visualization.ColumnChart($('.chart')[0]);
chart.draw(data, {
hAxis: {
slantedText: true,
slantedTextAngle: 35,
textStyle: {
bold: true,
fontSize: 8,
color: '#4d4d4d'
},
viewWindow: {
min: new Date(dateRange.min.getTime() - oneDay),
max: new Date(dateRange.max.getTime() + oneDay)
}
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart"></div>
not much you can do for the actual size of the column
the release notes from February, 23 2016 mention...
Added options to specify bar.width, bar.gap, bar.group.width (was bar.groupWidth) and bar.group.gap.
but none have ever worked for me when only one row of data...
Here is a jsfiddle example where I cannot get data label values or percentages to display when initializing the chart by passing it options when creating the chart object. Only the point.name is displayed in the label. Seems like you can only get these options to work when you create the entire object at run time using the plotOptions structure.
http://jsfiddle.net/nstvx7wc/7/
$(document).ready(function(){
var options = {
chart: {
renderTo: 'chartdiv',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name} {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
},
title: {
text: ''
},
};
options.series = [{"colorByPoint": "true", "data": [{"y": 0.36, "name": "series1"}, {"y": 0, "name": "series2"}, {"y": 0, "name": "series3"}, {"y": 0.03, "name": "series4"}, {"y": 0.04, "name": "series5"}, {"y": 0.07, "name": "series6"}]}];
options.title.text = "test pie";
options.pie.dataLabels.enabled = 'true';
chartObject = new Highcharts.Chart(options);
});
You 'pie' option was misconfigured. options.pie doesn't exist. It should be placed under series or the plotoptions property;
See this example; http://jsfiddle.net/nstvx7wc/21/
$(document).ready(function() {
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'test pie'
}
};
options.series = [{
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name} {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
"colorByPoint": "true",
"data": [{
"y": 0.36,
"name": "series1"
}, {
"y": 0,
"name": "series2"
}, {
"y": 0,
"name": "series3"
}, {
"y": 0.03,
"name": "series4"
}, {
"y": 0.04,
"name": "series5"
}, {
"y": 0.07,
"name": "series6"
}]
}];
Highcharts.chart('chartdiv', options);
});