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",