diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
index b480d24d97..d6eefa08b9 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
@@ -33,7 +33,11 @@ export class ZHANetworkVisualizationPage extends LitElement {
@property({ attribute: "is-wide", type: Boolean }) public isWide = false;
@state()
- private _networkData?: NetworkData;
+ private _networkData: NetworkData = {
+ nodes: [],
+ links: [],
+ categories: [],
+ };
@state()
private _devices: ZHADevice[] = [];
@@ -85,15 +89,15 @@ export class ZHANetworkVisualizationPage extends LitElement {
const { dataType, data, name } = params as CallbackDataParams;
if (dataType === "edge") {
const { source, target, value } = data as any;
- const targetName = this._networkData!.nodes.find(
+ const targetName = this._networkData.nodes.find(
(node) => node.id === target
)!.name;
- const sourceName = this._networkData!.nodes.find(
+ const sourceName = this._networkData.nodes.find(
(node) => node.id === source
)!.name;
const tooltipText = `${sourceName} → ${targetName}${value ? ` LQI: ${value}` : ""}`;
- const reverseValue = this._networkData!.links.find(
+ const reverseValue = this._networkData.links.find(
(link) => link.source === source && link.target === target
)?.reverseValue;
if (reverseValue) {
@@ -106,19 +110,19 @@ export class ZHANetworkVisualizationPage extends LitElement {
return name;
}
let label = `IEEE: ${device.ieee}`;
- label += `
Device Type: ${device.device_type.replace("_", " ")}`;
+ label += `
${this.hass.localize("ui.panel.config.zha.visualization.device_type")}: ${device.device_type.replace("_", " ")}`;
if (device.nwk != null) {
label += `
NWK: ${formatAsPaddedHex(device.nwk)}`;
}
if (device.manufacturer != null && device.model != null) {
- label += `
Device: ${device.manufacturer} ${device.model}`;
+ label += `
${this.hass.localize("ui.panel.config.zha.visualization.device")}: ${device.manufacturer} ${device.model}`;
} else {
- label += "
Device is not in 'zigbee.db'";
+ label += `
${this.hass.localize("ui.panel.config.zha.visualization.device_not_in_db")}`;
}
if (device.area_id) {
const area = this.hass.areas[device.area_id];
if (area) {
- label += `
Area: ${area.name}`;
+ label += `
${this.hass.localize("ui.panel.config.zha.visualization.area")}: ${area.name}`;
}
}
return label;
@@ -161,17 +165,29 @@ export class ZHANetworkVisualizationPage extends LitElement {
const links: NetworkLink[] = [];
const categories = [
{
- name: "Coordinator",
+ name: this.hass.localize(
+ "ui.panel.config.zha.visualization.coordinator"
+ ),
symbol: "roundRect",
itemStyle: { color: primaryColor },
},
- { name: "Router", symbol: "circle", itemStyle: { color: routerColor } },
{
- name: "End Device",
+ name: this.hass.localize("ui.panel.config.zha.visualization.router"),
+ symbol: "circle",
+ itemStyle: { color: routerColor },
+ },
+ {
+ name: this.hass.localize(
+ "ui.panel.config.zha.visualization.end_device"
+ ),
symbol: "circle",
itemStyle: { color: endDeviceColor },
},
- { name: "Offline", symbol: "circle", itemStyle: { color: offlineColor } },
+ {
+ name: this.hass.localize("ui.panel.config.zha.visualization.offline"),
+ symbol: "circle",
+ itemStyle: { color: offlineColor },
+ },
];
// Create all the nodes and links
diff --git a/src/translations/en.json b/src/translations/en.json
index e5cc0d8f62..488c2f82a9 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -5705,7 +5705,15 @@
"visualization": {
"header": "Network visualization",
"caption": "Visualization",
- "refresh_topology": "Refresh topology"
+ "refresh_topology": "Refresh topology",
+ "device": "Device",
+ "device_type": "Device type",
+ "device_not_in_db": "Device is not in 'zigbee.db'",
+ "area": "Area",
+ "coordinator": "Coordinator",
+ "router": "Router",
+ "end_device": "End device",
+ "offline": "Offline"
},
"device_binding": {
"bind": "Bind",