how to remove null item count in GridView? [Group wise GridView Issue] - dart

Need to create group wise grid view. I am almost done. My json looks like this,
[ { "d": "Gym", "p": 0 }, { "d": "Lifts", "p": 0 }, { "d": "Office",
"p": 0 }, { "d": "Guest Rooms", "p": 1.1 }, { "d": "Front of House",
"p": 1.2 }, { "d": "Restaurants", "p": 1.3 }, { "d": "Function Rooms",
"p": 1.4 }, { "d": "Exterior", "p": 1.5 }, { "d": "Recreation", "p":
1.6 }, { "d": "Laundry", "p": 3.1 }, { "d": "A/V Equipment", "p": 3.2 }, { "d": "F&B Equipment", "p": 3.3 }, { "d": "Other Equipment", "p":
4.1 }, { "d": "Back of House", "p": 4.2 }, { "d": "Central Plant", "p": 4.3 }, { "d": "Headings", "p": 5 }, { "d": "Plumbing", "p": 5.1
}, { "d": "Essential Services", "p": 5.2 }, { "d": "Workshop
Equipment", "p": 5.3 }, { "d": "HSK Equipment", "p": 5.4 }, { "d":
"Electrical Equipment", "p": 5.5 }, { "d": "Business Centre", "p": 100
} ]
Widget createListView(BuildContext context, AsyncSnapshot snapshot) {
List<Data> values = snapshot.data;
final listCount = getItemCounter(values);
// final listCount =
// values.map<double>((m) => m.p).reduce((a, b) => max(a, b)).floor();
return CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate((context, i) {
final items = values
.where((m) => i + 1 <= m.p && m.p < i + 2)
.toList(growable: false)
..sort((a, b) => a.p.compareTo(b.p));
return GridView.builder(
itemCount: items.length,
shrinkWrap: true,
primary: false,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemBuilder: (context, i) {
final item = items[i];
return _builderItem(item);
},
);
}, childCount: listCount),
)
],
);
}
getItemCounter(List<Data> values){
List iPoint = [];
List distictI = [];
for(int i = 0; i < values.length; i++){
iPoint.add(values[i].p.toInt());
}
//remove duplicate
distictI = iPoint.toSet().toList();
return distictI.length;
}
this is my output look like,
I found a problem why it is happening, in my json P passing 1.1,1.2,1.3 after that passing 3.1,3.2..like wise. space because of missing number 02

Here you go:
Widget createListView(BuildContext context, AsyncSnapshot snapshot) {
List<Data> values = snapshot.data;
final pIntValues = values.map<int>((m) => m.p.toInt()).toSet().toList(growable: false)..sort();
return CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate((context, i) {
final p = pIntValues[i];
final items = values
.where((m) => p <= m.p && m.p < p + 1)
.toList(growable: false)
..sort((a, b) => a.p.compareTo(b.p));
//check if not items, return Container if true
if(items.length == 0)
return Container();
return GridView.builder(
itemCount: items.length,
shrinkWrap: true,
primary: false,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemBuilder: (context, i) {
final item = items[i];
return _builderItem(item);
},
);
}, childCount: pIntValues.length),
)
],
);
}
Returning Container instead of GridView if there are no items for that group.

Related

Antd table select not working, always selecting all the rows

I am trying to implement row selection in my antd table but when I am selecting any rows all the rows gets selected
<PhcTable
pagination={false}
dataSource={configurationOptions?.ConfigDeposits[index].creditTiers}
columns={columnsPaymentPlans}
rowSelection={{onselect:(record)=>{console.log(record)}}}
scroll={{ x: 500 }}
/>
const columnsPaymentPlans = [
{
title: "Credit Tiers",
dataIndex: 'creditTier',
key: 'creditTier',
width: 80
},
{
title: "Credit Risk",
dataIndex: "CreditRisk",
key: "CreditRisk",
width: 60,
},
{
title: "Notes",
dataIndex: "notes",
key: "notes",
width: 100,
},
{
title: "Deposit",
dataIndex: "deposit",
key: "deposit",
width: 60,
fixed: "right",
render: (text, record, index) => (
<PhcForm.Item
initialValue={text}
name={`deposit${record.providerSpecialtyId.toString()+index.toString()}`}
rules={[
{ required: true, message: "Field is required" },
{
validator: (rule, value, callback) =>
validateDeposit(rule, value, callback, record,"%"),
},
]}
>
<PhcInputNumber
maxLength={4}
style={{
height: "40px",
width: isBrowser ? "75%" : "100%",
padding: "4px 11px",
}}
value={text}
//onChange={onInputChange("minDepositType", index)}
/>
</PhcForm.Item>
),
},
{
title: "Max Loan Amount",
dataIndex: "maxLoanAmount",
key: "maxLoanAmount",
width: 70,
fixed: "right",
render: (text, record, index) => (
<PhcForm.Item
initialValue={text}
name={`maxLoanAmount${record.providerSpecialtyId.toString()+index.toString()}`}
rules={[
{ required: true, message: "Field is required" },
{
validator: (rule, value, callback) =>
validateMaxLoanAmount(rule, value, callback, record),
},
]}
>
<PhcInputDecimal
keyboard={true}
controls={true}
onKeyPress={onNumberPress}
formatter={(value) =>
`${value}`.replace(/(\..*)\./g, '$($1)')
}
maxLength={5}
style={{
height: "40px",
//width: isBrowser && "75%",
width: isBrowser ? "75%" : "100%",
padding: "4px 11px",
//minWidth: "218px",
}}
value={text}
//onChange={onInputChange("maxLoanAmount", index)}
/>
</PhcForm.Item>
),
},
{
title: "Terms",
dataIndex: "Terms",
key: "configDepositsTermsIds",
width: 150,
render: (text, record, index) => (
<PhcForm.Item
initialValue={record.Terms.filter(x=>x.selected == true).map(x=>x.id)}
name={`ConfigDepositsTermsIds${record.providerSpecialtyId.toString()+index.toString()}`}
rules={[
{ required: true, message: "Field is required" },
{
validator: (rule, value, callback) =>
validateDeposit(rule, value, callback, record),
},
]}
>
<PhcSelect
mode="multiple"
optionFilterProp="label"
allowClear
showSearch
showArrow
style={{ width: isBrowser && "75%" }}
>
{record.Terms &&
record.Terms.map((item) => (
<PhcSelect.Option value={item.id} label={item.term}>
{item.term}
</PhcSelect.Option>
))}
</PhcSelect>
</PhcForm.Item>
),
}
];
"creditTiers": [
{
"providerSpecialtyId": 1735,
"creditTierId": 1,
"creditTier": "Tier 1 Credit - Prime",
"CreditRisk": "Low",
"notes": "This credit tier serves near-prime, prime, and super-prime.",
"deposit": 0,
"maxLoanAmount": 20000,
"selected": false,
"Terms": [
{
"id": 1,
"term": "6",
"selected": false
},
{
"id": 2,
"term": "12",
"selected": false
},
{
"id": 3,
"term": "18",
"selected": false
},
{
"id": 4,
"term": "24",
"selected": false
},
{
"id": 5,
"term": "36",
"selected": false
},
{
"id": 6,
"term": "48",
"selected": false
},
{
"id": 7,
"term": "60",
"selected": false
}
]
},
{
"providerSpecialtyId": 1735,
"creditTierId": 2,
"creditTier": "Tier 2 Credit - Sub-Prime",
"CreditRisk": "Low/Moderate",
"notes": "This credit tier also serves low-income applicants.",
"deposit": 10,
"maxLoanAmount": 20000,
"selected": false,
"Terms": [
{
"id": 1,
"term": "6",
"selected": false
},
{
"id": 2,
"term": "12",
"selected": false
},
{
"id": 3,
"term": "18",
"selected": false
},
{
"id": 4,
"term": "24",
"selected": false
},
{
"id": 5,
"term": "36",
"selected": false
},
{
"id": 6,
"term": "48",
"selected": false
},
{
"id": 7,
"term": "60",
"selected": false
}
]
},
{
"providerSpecialtyId": 1735,
"creditTierId": 3,
"creditTier": "Tier 3 Credit - Deep Sub-Prime",
"CreditRisk": "Moderate/High",
"notes": "This credit tier is best used with orthodontics.",
"deposit": 15,
"maxLoanAmount": 15000,
"selected": false,
"Terms": [
{
"id": 1,
"term": "6",
"selected": false
},
{
"id": 2,
"term": "12",
"selected": false
},
{
"id": 3,
"term": "18",
"selected": false
},
{
"id": 4,
"term": "24",
"selected": false
},
{
"id": 5,
"term": "36",
"selected": false
},
{
"id": 6,
"term": "48",
"selected": false
},
{
"id": 7,
"term": "60",
"selected": false
}
]
},
{
"providerSpecialtyId": 1735,
"creditTierId": 4,
"creditTier": "Tier 4 Credit - Underbanked",
"CreditRisk": "Moderate/High",
"notes": "Applicants may use a SS# or an ITIN# to apply.",
"deposit": 15,
"maxLoanAmount": 7500,
"selected": false,
"Terms": [
{
"id": 1,
"term": "6",
"selected": false
},
{
"id": 2,
"term": "12",
"selected": false
},
{
"id": 3,
"term": "18",
"selected": false
},
{
"id": 4,
"term": "24",
"selected": false
},
{
"id": 5,
"term": "36",
"selected": false
},
{
"id": 6,
"term": "48",
"selected": false
},
{
"id": 7,
"term": "60",
"selected": false
}
]
},
{
"providerSpecialtyId": 1735,
"creditTierId": 5,
"creditTier": "Tier 5 Credit - Last Resort",
"CreditRisk": "High",
"notes": "Limits dental repayment options to 2, 3, and 4 months.",
"deposit": 20,
"maxLoanAmount": 7500,
"selected": false,
"Terms": [
{
"id": 1,
"term": "6",
"selected": false
},
{
"id": 2,
"term": "12",
"selected": false
},
{
"id": 3,
"term": "18",
"selected": false
},
{
"id": 4,
"term": "24",
"selected": false
},
{
"id": 5,
"term": "36",
"selected": false
},
{
"id": 6,
"term": "48",
"selected": false
},
{
"id": 7,
"term": "60",
"selected": false
}
]
}
]
The problem is that you didn't specify key for each row. By default, antd find key in each row. Since you don't have it and according to the data you added above, the key is creditTierId. So you can specify row key in table by:
rowKey={(record) => record.creditTierId}
If you just enable rowSelection, you can select any row. But in order to know the rows you have selected, you can create a state and control the rowSelection. Please check the code. I use onChange function in rowSelection and it provides two arguments. The first one array of selected Row keys & second one selected rows.
function App() {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const columnsPaymentPlans = [
{
title: 'Credit Tiers',
dataIndex: 'creditTier',
key: 'creditTier',
width: 80
},
{
title: 'Credit Risk',
dataIndex: 'CreditRisk',
key: 'CreditRisk',
width: 60
},
{
title: 'Notes',
dataIndex: 'notes',
key: 'notes',
width: 100
},
// ...Other Columns
];
return (
<Table
pagination={false}
dataSource={configurationOptions?.creditTiers}
columns={columnsPaymentPlans}
rowKey={(record) => record.creditTierId}
rowSelection={{
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
}
}}
scroll={{ x: 500 }}
/>
);
}
export default App;

With GetJSON, I lose the properties

With this file "segment.geojson", I draw a red segment of thickness 20 :
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"stroke": "#ff0000",
"stroke-width": 20,
"stroke-opacity": 1
},
"geometry": {
"type": "LineString",
"coordinates": [[-3,48],[7,45]]
}
}
]
}
and with getJSON I display it on my map:
<body>
<div id="viewerDiv"></div>
<script>
window.onload= function() {
var map = L.map("viewerDiv").setView([50,50],5) ;
L.tileLayer(...blabla...).addTo(map);
var segment = '';
$.getJSON("segment.geojson", {dataType: "json"}, function (data) {
segment = new L.GeoJSON(data);
map.fitBounds(segment.getBounds());
})
.done(function () {
segment.addTo(map);
});
}
</script>
</body>
but it is blue and thick 1 !!! Can anyone help me? thank you in advance, JLC
The source is here: https://cavaliers23.fr/iti/ign/test_couleur.html
You are using the wrong definition. You should pass the style as a second argument.
$.getJSON("segment.geojson", { dataType: "json" }, function (data) {
segment = new L.GeoJSON(data, {
style: {
color: "#ff0000",
weight: 20,
opacity: 0.65,
},
});
You can also pass individual styles to features using the properties field
"features": [
{
"type": "Feature",
"properties": {
"color": "blue"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-3, 48],
[7, 45]
]
}
},
{
"type": "Feature",
"properties": {
"color": "red"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-33, 48],
[7, 45]
]
}
}
$.getJSON("segment.geojson", { dataType: "json" }, function (data) {
segment = new L.GeoJSON(data, {
style: (f) => {
switch (f.properties.color) {
case "red":
return {
color: "#ff0000",
weight: 20,
opacity: 0.65,
};
case "blue":
return {
color: "#0000ff",
weight: 20,
opacity: 0.65,
};
}
},
});

vs code 1.47.1 automatically reformatting dart code files

Unfortunately I replied yes
to a vs code prompt for a settings change and now,
when I edit a .dart file, it is automatically reformatted.
In some cases git shows the entire file has been modified.
In some places 2 spaces are replaced with 4 spaces.
In another place code was added.
The time stamp on the settings.json file is today (July 14, 2020) at 11:20AM PST.
Is there a way to find out the latest changes to the settings.json file?
before:
icon: FaIcon(FontAwesomeIcons.solidBuilding), /*Icon(Icons.format_list_bulleted ),*/
after:
icon: FaIcon(FontAwesomeIcons.solidBuilding),
/*Icon(Icons.format_list_bulleted ),*/
before:
MyClass({
this.field1,
this.field2,
this.field3
});
after:
MyClass({this.field1,this.field2,this.field3});
before:
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
AvatarUpload(
after:
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
AvatarUpload(
AvatarUpload(
AvatarUpload(
What is the setting that I need to revert?
settings.json
{
"editor.tabSize": 2,
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/*.js": { "when": "$(basename).ts"}
},
"files.autoSave": "afterDelay",
"workbench.iconTheme": "vscode-simpler-icons",
"editor.insertSpaces": true,
"editor.detectIndentation": false,
"solidity.linter": "solhint",
"solidity.solhintRules": {
"avoid-sha3": "warn"
},
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"java.configuration.checkProjectSettingsExclusions": false,
"peacock.favoriteColors": [
{
"name": "Angular Red",
"value": "#b52e31"
},
{
"name": "Auth0 Orange",
"value": "#eb5424"
},
{
"name": "Azure Blue",
"value": "#007fff"
},
{
"name": "C# Purple",
"value": "#68217A"
},
{
"name": "Gatsby Purple",
"value": "#639"
},
{
"name": "Go Cyan",
"value": "#5dc9e2"
},
{
"name": "Java Blue-Gray",
"value": "#557c9b"
},
{
"name": "JavaScript Yellow",
"value": "#f9e64f"
},
{
"name": "Mandalorian Blue",
"value": "#1857a4"
},
{
"name": "Node Green",
"value": "#215732"
},
{
"name": "React Blue",
"value": "#00b3e6"
},
{
"name": "Something Different",
"value": "#832561"
},
{
"name": "Vue Green",
"value": "#42b883"
}
],
"dart.debugExternalLibraries": true,
"dart.debugSdkLibraries": false,
"[yaml]": {
"editor.defaultFormatter": "redhat.vscode-yaml"
},
"dart.openDevTools": "flutter",
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"diffEditor.ignoreTrimWhitespace": false,
"terminal.integrated.fontSize": 10,
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.rulers": [
80
],
"editor.selectionHighlight": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": false
}
}
This one:
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
...
}
Change it to "editor.formatOnSave": false, and "editor.formatOnType": false, depends on your taste.

Display series labels at the end of each line in Highcharts Editor

I am a beginner in Highcharts and I am trying to achieve what has been explained in the following case using the Highcharts Editor:
Highcharts Line Chart, display series name at the end of line series
I don't know if the same can be achieved by just using the Editor's interface but if custom code needs to be used, I can do that in the Custom Code tab of the Editor.
I tried inputting in the Custom Code section of the Highcharts Editor the code written by jlbriggs but nothing happens.
Is it possible to get a basic explanation on how to achieve what I want?
Below is the HTML code I took from the graph I created in Highcharts Editor.
<div id="highcharts-825789cd-edd9-4d9e-aba4-e3a80fa42369"></div>
<script>
(function() {
var files = ["https://code.highcharts.com/stock/highstock.js", "https://code.highcharts.com/highcharts-more.js", "https://code.highcharts.com/highcharts-3d.js", "https://code.highcharts.com/modules/data.js", "https://code.highcharts.com/modules/exporting.js", "https://code.highcharts.com/modules/funnel.js", "https://code.highcharts.com/modules/annotations.js", "https://code.highcharts.com/modules/solid-gauge.js"],
loaded = 0;
if (typeof window["HighchartsEditor"] === "undefined") {
window.HighchartsEditor = {
ondone: [cl],
hasWrapped: false,
hasLoaded: false
};
include(files[0]);
} else {
if (window.HighchartsEditor.hasLoaded) {
cl();
} else {
window.HighchartsEditor.ondone.push(cl);
}
}
function isScriptAlreadyIncluded(src) {
var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
if (scripts[i].hasAttribute("src")) {
if ((scripts[i].getAttribute("src") || "").indexOf(src) >= 0 || (scripts[i].getAttribute("src") === "http://code.highcharts.com/highcharts.js" && src === "https://code.highcharts.com/stock/highstock.js")) {
return true;
}
}
}
return false;
}
function check() {
if (loaded === files.length) {
for (var i = 0; i < window.HighchartsEditor.ondone.length; i++) {
try {
window.HighchartsEditor.ondone[i]();
} catch (e) {
console.error(e);
}
}
window.HighchartsEditor.hasLoaded = true;
}
}
function include(script) {
function next() {
++loaded;
if (loaded < files.length) {
include(files[loaded]);
}
check();
}
if (isScriptAlreadyIncluded(script)) {
return next();
}
var sc = document.createElement("script");
sc.src = script;
sc.type = "text/javascript";
sc.onload = function() {
next();
};
document.head.appendChild(sc);
}
function each(a, fn) {
if (typeof a.forEach !== "undefined") {
a.forEach(fn);
} else {
for (var i = 0; i < a.length; i++) {
if (fn) {
fn(a[i]);
}
}
}
}
var inc = {},
incl = [];
each(document.querySelectorAll("script"), function(t) {
inc[t.src.substr(0, t.src.indexOf("?"))] = 1;
});
function cl() {
if (typeof window["Highcharts"] !== "undefined") {
var options = {
"title": {
"text": "One year, five year and 10 year survival estimates for the 21 most common cancers in England, 1971"
},
"subtitle": {
"text": "Survival estimates in 1971 (%)"
},
"exporting": {},
"chart": {
"type": "line",
"parallelAxes": {
"labels": {
"enabled": true
},
"alignTicks": true,
"endOnTick": true,
"max": 4,
"maxRange": 4,
"minorGridLineWidth": 0,
"gridLineWidth": -1
},
"inverted": false,
"height": 872,
"alignTicks": true,
"showAxes": false,
"ignoreHiddenSeries": true
},
"series": [{
"name": "Oesophagus",
"turboThreshold": 0,
"marker": {
"enabled": true
},
"type": "line",
"colorByPoint": false,
"selected": true,
"showInNavigator": true,
"dataLabels": {
"enabled": false
},
"label": {
"onArea": true,
"enabled": true
},
"allowPointSelect": true,
"xAxis": 0,
"yAxis": 0
}, {
"name": "Stomach",
"turboThreshold": 0
}, {
"name": "Colon",
"turboThreshold": 0
}, {
"name": "Rectum",
"turboThreshold": 0
}, {
"name": "Pancreas",
"turboThreshold": 0,
"marker": {
"enabled": true
},
"type": "line"
}, {
"name": "Larynx",
"turboThreshold": 0
}, {
"name": "Lung",
"turboThreshold": 0
}, {
"name": "Melanoma of skin",
"turboThreshold": 0
}, {
"name": "Breast",
"turboThreshold": 0
}, {
"name": "Cervix",
"turboThreshold": 0
}, {
"name": "Uterus",
"turboThreshold": 0
}, {
"name": "Ovary",
"turboThreshold": 0
}, {
"name": "Prostate",
"turboThreshold": 0,
"marker": {
"enabled": true
},
"colorByPoint": false
}, {
"name": "Testis",
"turboThreshold": 0
}, {
"name": "Kidney",
"turboThreshold": 0
}, {
"name": "Bladder",
"turboThreshold": 0
}, {
"name": "Brain",
"turboThreshold": 0
}, {
"name": "Hodgkin's disease",
"turboThreshold": 0
}, {
"name": "Non-Hodgkin lymphoma",
"turboThreshold": 0
}, {
"name": "Multiple myeloma",
"turboThreshold": 0
}, {
"name": "Leukaemia",
"turboThreshold": 0
}, {
"name": "Other cancers",
"turboThreshold": 0,
"label": {
"connectorAllowed": true
}
}],
"plotOptions": {
"series": {
"dataLabels": {
"enabled": false
}
}
},
"data": {
"csv": "\"Year\";\"Oesophagus\";\"Stomach\";\"Colon\";\"Rectum\";\"Pancreas\";\"Larynx\";\"Lung\";\"Melanoma of skin\";\"Breast\";\"Cervix\";\"Uterus\";\"Ovary\";\"Prostate\";\"Testis\";\"Kidney\";\"Bladder\";\"Brain\";\"Hodgkin's disease\";\"Non-Hodgkin lymphoma\";\"Multiple myeloma\";\"Leukaemia\";\"Other cancers\"\n\"1-year\";14.7;15.3;42.6;54.1;10.2;16;16.3;74.5;74;75.6;43.7;66.1;83.3;44.9;45.4;62.8;17.6;73.9;49.4;36.8;35.4;57.3\n\"5-year\";4;5.2;25.3;23.6;2.4;4.6;4.8;40.5;51.3;59;20.5;36.9;70.5;28.5;28.9;40.9;6.6;54.2;29.3;12.1;13.1;40.4\n\"10-year\";3.3;4;23;19.1;1.3;3.1;3.2;34.9;46;55.5;17.9;25.1;69.2;23;23;33.7;5;45.2;21.7;6.8;6.6;36.9",
"googleSpreadsheetKey": false,
"googleSpreadsheetWorksheet": false
},
"legend": {
"floating": false,
"enabled": false,
"verticalAlign": "bottom",
"align": "center",
"layout": "horizontal"
},
"pane": {
"background": []
},
"responsive": {
"rules": []
},
"colorAxis": {
"plotLines": [{
"label": {
"useHTML": false,
"text": "'series'",
"x": 5,
"y": 5,
"verticalAlign": "'middle'",
"textAlign": "'left'"
}
}],
"plotBands": [{}],
"labels": {
"x": 3,
"y": 2
}
},
"tooltip": {
"shared": true,
"enabled": true
},
"rangeSelector": {
"enabled": false,
"floating": false
},
"credits": {
"enabled": false
},
"xAxis": [{
"type": "category",
"labels": {
"x": 0,
"zIndex": 7
},
"opposite": true
}],
"yAxis": [{
"title": {
"text": ""
},
"labels": {
"format": "{hide}"
},
"type": "linear"
}],
"accessibility": {
"describeSingleSeries": false,
"enabled": true
}
};
new Highcharts.Chart("highcharts-825789cd-edd9-4d9e-aba4-e3a80fa42369", options);
}
}
})();
</script>
I just need the names of each series to be displayed at the end of each line rather than in the legend.
In the "Custom code" section you need to merge your custom options with the options from the editor. There should be an example of how to do that. In essense:
Highcharts.merge(true, options, {
// custom code
});
For example, you could use Highcharts.merge in the following way to achieve this:
Highcharts.merge(true, options, {
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function () {
// if last point
if(this.point === this.series.data[this.series.data.length-1]) {
return this.series.name;
}
}
}
}
}
});
See this Highcharts Cloud example of it in use.

How to get a selected Node with Sigma JS (NEO4J)?

I am trying to retrieve the selected node.
I have done:
s.graph.nodes()
but this command returns all the graph node?
Do you know how to do this?
You can create some lookup functions to find the node by its ID.
function lookupNodesByKeyValue(sigmaInstance, key, value) {
return sigmaInstance.graph.nodes().filter(node => node[key] === value);
}
function lookupNodeByKeyValue(sigmaInstance, key, value) {
return lookupNodesByKeyValue(sigmaInstance, key, value).pop();
}
function lookupNodeById(sigmaInstance, value) {
return lookupNodeByKeyValue(sigmaInstance, 'id', value);
}
var graphData = {
"nodes": [
{ "id": "n0", "label": "A node", "x": 0, "y": 0, "size": 3 },
{ "id": "n1", "label": "Another node", "x": 3, "y": 1, "size": 2 },
{ "id": "n2", "label": "And a last one", "x": 1, "y": 3, "size": 1 },
],
"edges": [
{ "id": "e0", "source": "n0", "target": "n1" },
{ "id": "e1", "source": "n1", "target": "n2" },
{ "id": "e2", "source": "n2", "target": "n0" },
]
};
// Initialize Sigma object
var s = new sigma({
graph: graphData,
container: 'sigma-container',
settings: { defaultNodeColor: '#ec5148' }
});
// Set initial zoom
s.cameras[0].goTo({ x: 1, y: 1, angle: 0, ratio: 2.0 });
console.log("Node 'n2' => " + lookupNodeById(s, "n2").label);
body {
background: #ddd;
}
.sigma-wrapper {
max-width: 240px;
background: #fff;
border: 2px solid #AAA;
margin: auto;
}
#sigma-container {
max-width: 240px;
height: 240px;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/sigma.min.js"></script>
<div class="sigma-wrapper">
<div id="sigma-container"></div>
</div>

Resources