mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
style changes to the zigbee graph, without touching the physics (#24697)
This commit is contained in:
parent
386b8ba747
commit
ff6b318fc9
@ -235,23 +235,27 @@ export class ZHANetworkVisualizationPage extends LitElement {
|
|||||||
label: this._buildLabel(device),
|
label: this._buildLabel(device),
|
||||||
shape: this._getShape(device),
|
shape: this._getShape(device),
|
||||||
mass: this._getMass(device),
|
mass: this._getMass(device),
|
||||||
|
fixed: device.device_type === "Coordinator",
|
||||||
color: {
|
color: {
|
||||||
background: device.available ? "#66FF99" : "#FF9999",
|
background: device.available ? "#66FF99" : "#FF9999",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
if (device.neighbors && device.neighbors.length > 0) {
|
if (device.neighbors && device.neighbors.length > 0) {
|
||||||
device.neighbors.forEach((neighbor) => {
|
device.neighbors.forEach((neighbor) => {
|
||||||
const idx = edges.findIndex(
|
const idx = edges.findIndex(
|
||||||
(e) => device.ieee === e.to && neighbor.ieee === e.from
|
(e) => device.ieee === e.to && neighbor.ieee === e.from
|
||||||
);
|
);
|
||||||
if (idx === -1) {
|
if (idx === -1) {
|
||||||
|
const edge_options = this._getEdgeOptions(parseInt(neighbor.lqi));
|
||||||
edges.push({
|
edges.push({
|
||||||
from: device.ieee,
|
from: device.ieee,
|
||||||
to: neighbor.ieee,
|
to: neighbor.ieee,
|
||||||
label: neighbor.lqi + "",
|
label: neighbor.lqi + "",
|
||||||
color: this._getLQI(parseInt(neighbor.lqi)).color,
|
color: edge_options.color,
|
||||||
width: this._getLQI(parseInt(neighbor.lqi)).width,
|
width: edge_options.width,
|
||||||
length: 2000 - 4 * parseInt(neighbor.lqi),
|
length: edge_options.length,
|
||||||
|
physics: edge_options.physics,
|
||||||
arrows: {
|
arrows: {
|
||||||
from: {
|
from: {
|
||||||
enabled: neighbor.relationship !== "Child",
|
enabled: neighbor.relationship !== "Child",
|
||||||
@ -260,16 +264,14 @@ export class ZHANetworkVisualizationPage extends LitElement {
|
|||||||
dashes: neighbor.relationship !== "Child",
|
dashes: neighbor.relationship !== "Child",
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
edges[idx].color = this._getLQI(
|
const edge_options = this._getEdgeOptions(
|
||||||
(parseInt(edges[idx].label!) + parseInt(neighbor.lqi)) / 2
|
Math.min(parseInt(edges[idx].label!), parseInt(neighbor.lqi))
|
||||||
).color;
|
);
|
||||||
edges[idx].width = this._getLQI(
|
edges[idx].label += " & " + neighbor.lqi;
|
||||||
(parseInt(edges[idx].label!) + parseInt(neighbor.lqi)) / 2
|
edges[idx].color = edge_options.color;
|
||||||
).width;
|
edges[idx].width = edge_options.width;
|
||||||
edges[idx].length =
|
edges[idx].length = edge_options.length;
|
||||||
2000 -
|
edges[idx].physics = edge_options.physics;
|
||||||
6 * ((parseInt(edges[idx].label!) + parseInt(neighbor.lqi)) / 2);
|
|
||||||
edges[idx].label += "/" + neighbor.lqi;
|
|
||||||
delete edges[idx].arrows;
|
delete edges[idx].arrows;
|
||||||
delete edges[idx].dashes;
|
delete edges[idx].dashes;
|
||||||
}
|
}
|
||||||
@ -280,17 +282,30 @@ export class ZHANetworkVisualizationPage extends LitElement {
|
|||||||
this._network?.setData({ nodes: this._nodes, edges: edges });
|
this._network?.setData({ nodes: this._nodes, edges: edges });
|
||||||
}
|
}
|
||||||
|
|
||||||
private _getLQI(lqi: number): EdgeOptions {
|
private _getEdgeOptions(lqi: number): EdgeOptions {
|
||||||
|
const length = 2000 - 4 * lqi;
|
||||||
if (lqi > 192) {
|
if (lqi > 192) {
|
||||||
return { color: { color: "#17ab00", highlight: "#17ab00" }, width: 4 };
|
return {
|
||||||
|
color: { color: "#17ab00", highlight: "#17ab00" },
|
||||||
|
width: lqi / 20,
|
||||||
|
length: length,
|
||||||
|
physics: false,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
if (lqi > 128) {
|
if (lqi > 128) {
|
||||||
return { color: { color: "#e6b402", highlight: "#e6b402" }, width: 3 };
|
return {
|
||||||
|
color: { color: "#e6b402", highlight: "#e6b402" },
|
||||||
|
width: 9,
|
||||||
|
length: length,
|
||||||
|
physics: false,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
if (lqi > 80) {
|
return {
|
||||||
return { color: { color: "#fc4c4c", highlight: "#fc4c4c" }, width: 2 };
|
color: { color: "#bfbfbf", highlight: "#bfbfbf" },
|
||||||
}
|
width: 1,
|
||||||
return { color: { color: "#bfbfbf", highlight: "#bfbfbf" }, width: 1 };
|
length: length,
|
||||||
|
physics: false,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
private _getMass(device: ZHADevice): number {
|
private _getMass(device: ZHADevice): number {
|
||||||
@ -418,16 +433,8 @@ export class ZHANetworkVisualizationPage extends LitElement {
|
|||||||
|
|
||||||
this._network!.setOptions(
|
this._network!.setOptions(
|
||||||
this._enablePhysics
|
this._enablePhysics
|
||||||
? {
|
? { physics: { enabled: true } }
|
||||||
physics: {
|
: { physics: { enabled: false } }
|
||||||
barnesHut: {
|
|
||||||
springConstant: 0,
|
|
||||||
avoidOverlap: 10,
|
|
||||||
damping: 0.09,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
: { physics: false }
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user