Updates

lovelace/pfsense/traffic.yaml

@@ -3,62 +3,90 @@
   name: Traffic
 
 
-- type: 'custom:button-card'
-  template: card_graph
-  entity: sensor.pfsense_interface_wan_inbytes_kilobytes_per_second
-  variables:
-    ulm_card_graph_color: "var(--google-blue)"
-    ulm_card_graph_name: WAN Incoming
-    ulm_card_graph_entity: sensor.pfsense_interface_wan_inbytes_kilobytes_per_second
-    ulm_card_graph_color2: "var(--google-green)"
-    ulm_card_graph_entity2: sensor.pfsense_interface_wan_outbytes_kilobytes_per_second
-    ulm_card_graph_type: fill
-    ulm_card_graph_hours: 1
-- type: "horizontal-stack"
-  cards:
-    - type: 'custom:button-card'
-      template: card_graph
-      entity: sensor.pfsense_interface_mullvad1_inbytes_kilobytes_per_second
-      variables:
-        ulm_card_graph_color: "var(--google-blue)"
-        ulm_card_graph_name: Mullvad1 Incoming
-        ulm_card_graph_entity: sensor.pfsense_interface_mullvad1_inbytes_kilobytes_per_second
-        ulm_card_graph_color2: "var(--google-green)"
-        ulm_card_graph_entity2: sensor.pfsense_interface_mullvad1_outbytes_kilobytes_per_second
-        ulm_card_graph_type: fill
-        ulm_card_graph_hours: 1
-    - type: 'custom:button-card'
-      template: card_graph
-      entity: sensor.pfsense_interface_mullvad2_inbytes_kilobytes_per_second
-      variables:
-        ulm_card_graph_color: "var(--google-blue)"
-        ulm_card_graph_name: Mullvad2 Incoming
-        ulm_card_graph_entity: sensor.pfsense_interface_mullvad2_inbytes_kilobytes_per_second
-        ulm_card_graph_color2: "var(--google-green)"
-        ulm_card_graph_entity2: sensor.pfsense_interface_mullvad2_outbytes_kilobytes_per_second
-        ulm_card_graph_type: fill
-        ulm_card_graph_hours: 1
-- type: "horizontal-stack"
-  cards:
-    - type: 'custom:button-card'
-      template: card_graph
-      entity: sensor.pfsense_interface_lan_inbytes_kilobytes_per_second
-      variables:
-        ulm_card_graph_color: "var(--google-blue)"
-        ulm_card_graph_name: LAN Incoming
-        ulm_card_graph_entity: sensor.pfsense_interface_lan_inbytes_kilobytes_per_second
-        ulm_card_graph_color2: "var(--google-green)"
-        ulm_card_graph_entity2: sensor.pfsense_interface_lan_outbytes_kilobytes_per_second
-        ulm_card_graph_type: fill
-        ulm_card_graph_hours: 1
-    - type: 'custom:button-card'
-      template: card_graph
-      entity: sensor.pfsense_interface_backend_inbytes_kilobytes_per_second
-      variables:
-        ulm_card_graph_color: "var(--google-blue)"
-        ulm_card_graph_name: Backend Incoming
-        ulm_card_graph_entity: sensor.pfsense_interface_backend_inbytes_kilobytes_per_second
-        ulm_card_graph_color2: "var(--google-green)"
-        ulm_card_graph_entity2: sensor.pfsense_interface_backend_outbytes_kilobytes_per_second
-        ulm_card_graph_type: fill
-        ulm_card_graph_hours: 1
+- type: custom:apexcharts-card
+  graph_span: 2h
+  apex_config:
+    chart:
+      height: 250px
+  series:
+    - entity: sensor.pfsense_interface_wan_inbytes_kilobytes_per_second
+      stroke_width: 2
+      type: area
+      transform: return x / 1024;
+      unit: Mb/s
+      name: WAN In
+    - entity: sensor.pfsense_interface_wan_outbytes_kilobytes_per_second
+      invert: true
+      stroke_width: 2
+      type: area
+      transform: return x / 1024;
+      unit: Mb/s
+      name: WAN Out
+
+
+- type: custom:apexcharts-card
+  graph_span: 2h
+  apex_config:
+    chart:
+      height: 250px
+  series:
+    - entity:  sensor.pfsense_interface_mullvad1_inbytes_kilobytes_per_second
+      stroke_width: 2
+      type: area
+      transform: return x / 1024;
+      unit: Mb/s
+      name: Mullvad1 In
+    - entity: sensor.pfsense_interface_mullvad1_outbytes_kilobytes_per_second
+      invert: true
+      stroke_width: 2
+      type: area
+      transform: return x / 1024;
+      unit: Mb/s
+      name: Mullvad1 Out
+    - entity:  sensor.pfsense_interface_mullvad2_inbytes_kilobytes_per_second
+      stroke_width: 2
+      type: area
+      transform: return x / 1024;
+      unit: Mb/s
+      name: Mullvad2 In
+    - entity: sensor.pfsense_interface_mullvad2_outbytes_kilobytes_per_second
+      invert: true
+      stroke_width: 2
+      type: area
+      transform: return x / 1024;
+      unit: Mb/s
+      name: Mullvad2 Out
+
+
+- type: custom:apexcharts-card
+  graph_span: 2h
+  apex_config:
+    chart:
+      height: 250px
+  series:
+    - entity: sensor.pfsense_interface_lan_inbytes_kilobytes_per_second
+      stroke_width: 2
+      type: area
+      transform: return x / 1024;
+      unit: Mb/s
+      name: LAN In
+    - entity: sensor.pfsense_interface_lan_outbytes_kilobytes_per_second
+      invert: true
+      stroke_width: 2
+      type: area
+      transform: return x / 1024;
+      unit: Mb/s
+      name: LAN Out
+    - entity:  sensor.pfsense_interface_backend_inbytes_kilobytes_per_second
+      stroke_width: 2
+      type: area
+      transform: return x / 1024;
+      unit: Mb/s
+      name: Backend In
+    - entity: sensor.pfsense_interface_backend_outbytes_kilobytes_per_second
+      invert: true
+      stroke_width: 2
+      type: area
+      transform: return x / 1024;
+      unit: Mb/s
+      name: Backend In