Plotly chart with data collected in a command_line sensor

[evilalmus]

I brought this up in the HA forums, and mateine tried to help but suggested I come here if I needed more assistance. I'll try to be as complete as possible.

First, the sensor. This is a command_line sensor that's pulling data from the CDC public API (no auth is required, so, if you want to pull it yourself you can)

- sensor: 
    name: COVID WasteWater 1142
    scan_interval: 86400
    unique_id: 50e5dc17-7aaf-4ff0-8b11-2c15f46f65c1
    command: >
      echo "{ \"data\":" $(
      curl -s https://data.cdc.gov/resource/g653-rqe2.json?key_plot_id=CDC_BIOBOT_wa_1142_Treatment%20plant_post%20grit%20removal                   
      ) "}"
    value_template: >
      {{ value_json.data | length }}
    json_attributes:
      - data

The data is collected in attributes in the sensor, like so:

Here is the old apexcharts-card that does work, I'd just like to convert it over to Plootly:

type: custom:apexcharts-card
header:
  title: King County COVID Wastewater
  show: true
  colorize_states: true
chart_type: scatter
graph_span: 1.2y
span:
  end: day
  offset: '-2d'
series:
  - entity: sensor.covid_wastewater_1142
    name: shed 1142
    data_generator: |
      var filtered_data = entity.attributes.data.filter(function(record) {
        return 'pcr_conc_smoothed' in record;
      });

      var filtered_map = filtered_data.map(record => {
        return [new Date(record.date).getTime(), record.pcr_conc_smoothed/1000000];
      });

      return filtered_map;
    unit: vvp
    color: red
    show:
      legend_value: false
    group_by:
      fill: last
      duration: 5d

Lastly, this is what I have so far (using the 'fn' code suggested in the forums.
The error I am getting in the UI is Error: at [entities.0.filters.0]: Unexpected identifier 'state'

type: custom:plotly-graph
entities:
  - entity: sensor.covid_wastewater_1142
    attribute: pcr_conc_smoothed
    filters:
      - fn: |- 
          ({states}) => {
            var filtered_data state?.attributes?.data.filter(function(record) {
              return 'pcr_conc_smoothed' in record;
            });
            debugger;

            var filtered_map = filtered_data.map(record => {
              return [new Date(record.date).getTime(), record.pcr_conc_smoothed/1000000];
            });
            return {xs: filtered_map.map(([x]) => x), ys: filtered_map.map(([x, y])=>y) }
          }
hours_to_show: 200
refresh_interval: 10

Any help would be appreciated, I'm not much of a coder (I'm not a coder at all), so I'm not really understanding most of the custom fn stuff yet, but I am learning.

[dbuezas]

Rumor has it that dbuezas and mateine am the same person 😀
I wrote the previous answer in my phone so it has some mistakes.
Try this:

type: custom:plotly-graph
entities:
  - entity: sensor.covid_wastewater_1142
    filters:
      - fn: |- 
          ({meta}) => {
            var filtered_data = meta.data.filter(function(record) {
              return 'pcr_conc_smoothed' in record;
            });

            var filtered_map = filtered_data.map(record => {
              return [new Date(record.date).getTime(), record.pcr_conc_smoothed/1000000];
            });
            return {xs: filtered_map.map(([x]) => x), ys: filtered_map.map(([x, y])=>y) }
          }
hours_to_show: 200
refresh_interval: 10

[evilalmus]

Nice to meet you @dbuezas.
That worked perfectly. Putting it all together, this is what my chart looks like now:

the YAML, for anyone else trying to do something similar:

type: custom:plotly-graph
title: King County COVID Wastewater
color_scheme: dutch_field
entities:
  - entity: sensor.covid_wastewater_1142
    line:
      simplify: true
    name: Shed 1142
    filters:
      - fn: |-
          ({meta}) => {
            var filtered_data = meta.data.filter(function(record) {
              return 'pcr_conc_smoothed' in record;
            });

            var filtered_map = filtered_data.map(record => {
              return [new Date(record.date).getTime(), record.pcr_conc_smoothed/1000000];
            });
            return {xs: filtered_map.map(([x]) => x), ys: filtered_map.map(([x, y])=>y) }
          }
      - resample: 1d
      - sliding_window_moving_average:
          window_size: 5
  - entity: sensor.covid_wastewater_1139
    name: Shed 1139
    filters:
      - fn: |-
          ({meta}) => {
            var filtered_data = meta.data.filter(function(record) {
              return 'pcr_conc_smoothed' in record;
            });

            var filtered_map = filtered_data.map(record => {
              return [new Date(record.date).getTime(), record.pcr_conc_smoothed/1000000];
            });
            return {xs: filtered_map.map(([x]) => x), ys: filtered_map.map(([x, y])=>y) }
          }
      - resample: 1d
      - sliding_window_moving_average:
          window_size: 5
  - entity: sensor.covid_wastewater_676
    name: Shed 676
    filters:
      - fn: |-
          ({meta}) => {
            var filtered_data = meta.data.filter(function(record) {
              return 'pcr_conc_smoothed' in record;
            });

            var filtered_map = filtered_data.map(record => {
              return [new Date(record.date).getTime(), record.pcr_conc_smoothed/1000000];
            });
            return {xs: filtered_map.map(([x]) => x), ys: filtered_map.map(([x, y])=>y) }
          }
      - resample: 1d
      - sliding_window_moving_average:
          window_size: 5
hours_to_show: 10512
refresh_interval: 86400
autorange_after_scroll: true
layout:
  xaxis:
    rangeselector:
      'y': 1.125
      bgcolor: black
      buttons:
        - count: 1
          step: month
        - count: 3
          step: month
        - count: 6
          step: month
        - count: 1
          step: year
        - count: 2
          step: year

[dbuezas]

Happy to hear!