Todays Newbie Walkthrough - Using Statistics To Show Difference ('DIFF')

[wormuths]

UPDATE: Be sure to look at the finalized code in the responses.

My next challenge is to make a chart which calculates the difference of a value between periods of time. The Home Assistant statistics card supports choosing to show the difference using the 'diff' option, but that option doesn't seem to work in a Plotly graph. I have created a basic Plotly card which now shows the total usage of my internet data, which it is calculating as ever increasing...

This is a fairly basic card which is relatively easy to create. My YAML for this is as follows...

type: custom:plotly-graph
title: Cellular Data Consumption
hours_to_show: 1y
autorange_after_scroll: true
refresh_interval: auto
ha_theme: false
entities:
  - entity: sensor.freebsd_router_b_received
    name: Total Received
    type: bar
    texttemplate: '%{y:.0f} '
    marker:
      color: rgb(10, 55, 58)
    statistic: sum
    period: month
  - entity: sensor.freebsd_router_b_sent
    name: Total Transmitted
    type: bar
    texttemplate: '%{y:.0f} '
    marker:
      color: rgb(255, 152, 0)
    statistic: sum
    period: month
layout:
  height: 250
  dragmode: pan
  showlegend: true
  paper_bgcolor: '#EFDECD'
  plot_bgcolor: '#EFDECD'
  xaxis:
    tickfont:
      color: '#000000'
  yaxis:
    tickfont:
      color: '#000000'

For me, the data consumption is a "fun fact", but for those with metered connections, this could be incredibly useful information. In order for this to be useful, I need to modify it two ways in which I need direction.

First, Home Assistant supports long term statistics being displayed as a difference from period to period. So, for example, I would want each monthly bar to represent the difference from the previous month. It doesn't seem as though ' diff ' directly translates to a Plotly card, although I'm sure there is a pretty straightforward means to do it. Would this be a function?

Second, I would like the values on the axis to be converted to GB. The PFSense integration's sensor reports the total in bytes, but the value just displays a ridiculously long and uninformative number.

In a perfect world I'd define periods, something like...

layout:
  xaxis:
    rangeselector:
      'y': 1.2
      buttons:
        - count: 1
          step: hour
          label: Hour
        - count: 1
          step: day
          label: Day
        - count: 7
          step: day
          label: Week
        - count: 28
          step: day
          label: Month
        - count: 365
          step: day
          label: Year

But in this case, I'm happy with monthly as a start.

What is the proper way to implement a 'difference' in this situation? Thanks!

[dbuezas]

Welcome to Filters. Look specifically at the delta filter.

I suggest you take a look at all of them to get new ideas for processing your data

[wormuths]

Welcome to Filters. Look specifically at the delta filter.

I found from examples that if I add the following to each entity, the conversion part seems to work. If this looks rational to convert bytes to GB?

    unit_of_measurement: GB
    filters:
      - map_y_numbers: y / 1073741824

After two hours of trying, I'm copping out for the night. LOL

The delta thing is baffling me. Any nudge in the right direction on that would be appreciated. I understand it specifies the difference somehow, but not much else at the moment.

[dbuezas]

The delta computes the delta between each two consecutive numeric y values
So if your sensor has 10 in December and 15 in Jan, the delta filter will give you 5 in Jan (the difference between Jan and Dec)

[dbuezas]

The conversion looks fine to me.
I' would use this though:

map_y_numbers: y / (1024*1024*1024)

[wormuths]

Ugh... When I tried adding delta: under filters, I didn't put the dash - delta: so it didn't work. I gave up on that and looked for conversions first. Once I put the dash though, wuala... So it was really that simple.

Here's the latest version...

type: custom:plotly-graph
title: Cellular Data Consumption
hours_to_show: 1y
autorange_after_scroll: true
refresh_interval: auto
ha_theme: false
entities:
  - entity: sensor.freebsd_router_b_received
    name: Total Received
    unit_of_measurement: GB
    filters:
      - delta: null
      - map_y_numbers: y / (1024*1024*1024)
    type: bar
    texttemplate: '%{y:.0f} '
    marker:
      color: rgb(10, 55, 58)
    statistic: sum
    period: month
  - entity: sensor.freebsd_router_b_sent
    name: Total Transmitted
    unit_of_measurement: GB
    filters:
      - delta: null
      - map_y_numbers: y / (1024*1024*1024)
    type: bar
    texttemplate: '%{y:.0f} '
    marker:
      color: rgb(255, 152, 0)
    statistic: sum
    period: month
layout:
  height: 250
  dragmode: pan
  showlegend: true
  paper_bgcolor: '#EFDECD'
  plot_bgcolor: '#EFDECD'
  xaxis:
    tickfont:
      color: '#000000'
      xaxis: null
    rangeselector:
      'y': 1.2
      buttons:
        - count: 1
          step: hour
          label: Hour
        - count: 1
          step: day
          label: Day
        - count: 7
          step: day
          label: Week
        - count: 28
          step: day
          label: Month
        - count: 365
          step: day
          label: Year
  yaxis:
    tickfont:
      color: '#000000'

Now I need to get the range selector working properly and I'll figure out doing a pull request to add the example to the readme for showing a difference in statistics.

[wormuths]

Current results...

[wormuths]

Actually, I think I'm leaving the code here... Monthly totals are all that seem relevant in this context.

title: Cellular Data Consumption
hours_to_show: 1y
autorange_after_scroll: true
refresh_interval: auto
ha_theme: false
entities:
  - entity: sensor.freebsd_router_b_received
    name: Total Received
    unit_of_measurement: GB
    filters:
      - delta: null
      - map_y_numbers: y / (1024*1024*1024)
    type: bar
    texttemplate: '%{y:.0f} '
    marker:
      color: rgb(10, 55, 58)
    statistic: sum
    period: month
  - entity: sensor.freebsd_router_b_sent
    name: Total Transmitted
    unit_of_measurement: GB
    filters:
      - delta: null
      - map_y_numbers: y / (1024*1024*1024)
    type: bar
    texttemplate: '%{y:.0f} '
    marker:
      color: rgb(255, 152, 0)
    statistic: sum
    period: month
layout:
  height: 250
  dragmode: pan
  showlegend: true
  paper_bgcolor: '#EFDECD'
  plot_bgcolor: '#EFDECD'
  xaxis:
    tickfont:
      color: '#000000'
  yaxis:
    tickfont:
      color: '#000000'