Photovoltaik show monthly production with estimated values

[citoki]

With that configuration you'll see the production for the last 12 months at once. In addition a blue-ish line with the estimated production values are visible to see if the target is being reached.

type: custom:plotly-graph
hours_to_show: 1y
refresh_interval: 0
layout:
  yaxis:
    range:
      - 0
      - 3000
entities:
  - entity: sensor.grid_util_meter_reading_production_monthly
    name: PV Production
    legendgroup: 1
    statistic: state
    period: month
    extend_to_present: true
    yaxis: y0
    fill: tonexty
    filters:
      - store_var: prod
    line:
      width: 2
      color: gold
    mode: markers+text+lines
    textposition: top
    texttemplate: <b>%{y:.0f}</b>
    textfont:
      size: 12
      color: null
  - entity: ''
    name: PV Estimation
    legendgroup: 2
    yaxis: y1
    line:
      width: 2
      color: rgba(70, 130, 180, 0.5)
    filters:
      - load_var: vars.prod
    fn: |
      $fn ({ vars }) => {

        const pvEst = [
          {month: 1, estValue: "408"},
          {month: 2, estValue: "705"},
          {month: 3, estValue: "1324"},
          {month: 4, estValue: "1970"},
          {month: 5, estValue: "2300"},
          {month: 6, estValue: "2470"},
          {month: 7, estValue: "2380"},
          {month: 8, estValue: "2080"},
          {month: 9, estValue: "1550"},
          {month: 10, estValue: "932"},
          {month: 11, estValue: "444"},
          {month: 12, estValue: "300"},
        ]
        vars["xs"] = [];
        vars["ys"] = [];
        
        const parsedDate = (date) => {
            let oDate = {
                iY : parseInt(date.getFullYear()),
                iM : parseInt(date.getMonth() + 1),
                sM : parseInt(date.getMonth() + 1),
                iD : parseInt(date.getDate()),
                sD : parseInt(date.getDate()),
                iT : parseInt(date.getHours()),
                iMin : parseInt(date.getMinutes()),
            }
            // if month is single digit, add a 0 in front and convert to string
            oDate.sM = (oDate.sM.toString().length === 1) ? `0${oDate.iM}`: `${oDate.iM}`;
            oDate.sD = (oDate.iD.toString().length === 1) ? `0${oDate.iD}`: `${oDate.iD}`;
        
            oDateString = `${oDate.iY}-${oDate.sM}-${oDate.sD}T00:00`;
            return {...oDate, oDateString};
        };

        const getEstValue = (arr, month) => {
          return arr.find((obj) => obj.month === month).estValue
        };

        vars.prod.xs.forEach((oDateTime, i) => {
            const oD = parsedDate(oDateTime);

            vars["xs"].push(oD.oDateString);
            vars["ys"].push(getEstValue(pvEst, parseInt(oD.iM )));
        });

      };
    x: $fn ({vars}) => vars.xs;
    'y': $fn ({ vars }) => vars.ys

• I got the calculated estimated values per month, by my solar vendor upfront. If the est. values aren't available for you, try PVGIS tool

Open points for me:

• monthly production is set to the start of each month, could be printed in the middle
• overlap of production doesn't look nice
• for the current month, I set extend_to_present: true that the graph is 'build' further on the x-axis as the days went by. But then I see the current production on the start and on the current day in the month. this is usually super overlapped in a 12 month view and basically not readable ¯_(ツ)_/¯ , it needs to zoom in to read something:

[dbuezas]

Really cool!

monthly production is set to the start of each month, could be printed in the middle

Maybe you could use time_offset to move the plot 15 days

overlap of production doesn't look nice

Maybe you could use a wider line with opacity: 0.5 or an rgba(x,x,x,.5) color

for the current month, I set extend_to_present: true that the graph is 'build' further on the x-axis

You could Instead add an extra datapoint 30 days beyond the last reading with a filter to avoid that

[citoki]

Thanks for the hints @dbuezas ! I played around a bit and saw that text-position can take a string with multiple properties, like textposition: "top right". That made the values look like they're on top of each month.

With an additional datapoint for the estimated values with end of month, the chart is expanded in the way, that I can see the last month current value better. Also time_offset helps to provide some space here.

Click to expand config

type: custom:plotly-graph
refresh_interval: 0
hours_to_show: 420d
time_offset: 20d
layout:
  yaxis:
    range:
      - 0
      - 3000
entities:
  - entity: sensor.grid_util_meter_reading_production_monthly
    name: PV Production
    legendgroup: 1
    statistic: state
    period: month
    extend_to_present: false
    yaxis: y0
    fill: tonexty
    filters:
      - store_var: prod
      - fn: |-
          ({xs, ys}) => {
            //const nextMonthEndDay = new Date();
            //nextMonthEndDay.setMonth(nextMonthEndDay.getMonth() + 1);
            //nextMonthEndDay.setDate(0);
             
              //debugger;
            //xs.push(nextMonthEndDay);
            //ys.push(ys[(ys.length - 1)]);
          }
    line:
      width: 2
      color: gold
    mode: markers+text+lines
    textposition: "top right"
    texttemplate: <b>%{y:.0f}</b>
    textfont:
      size: 12
      color: null
  - entity: ''
    name: PV Estimation
    legendgroup: 2
    yaxis: y1
    line:
      width: 2
      color: rgba(70, 130, 180, 0.5)
    filters:
      - load_var: vars.prod
    fn: |
      $fn ({ vars }) => {

        const pvEst = [
          {month: 1, estValue: "408"},
          {month: 2, estValue: "705"},
          {month: 3, estValue: "1324"},
          {month: 4, estValue: "1970"},
          {month: 5, estValue: "2300"},
          {month: 6, estValue: "2470"},
          {month: 7, estValue: "2380"},
          {month: 8, estValue: "2080"},
          {month: 9, estValue: "1550"},
          {month: 10, estValue: "932"},
          {month: 11, estValue: "444"},
          {month: 12, estValue: "300"},
        ]
        vars["xs"] = [];
        vars["ys"] = [];
        
        const parsedDate = (date) => {
            let oDate = {
                iY : parseInt(date.getFullYear()),
                iM : parseInt(date.getMonth() + 1),
                sM : parseInt(date.getMonth() + 1),
                iD : parseInt(date.getDate()),
                sD : parseInt(date.getDate()),
                iT : parseInt(date.getHours()),
                iMin : parseInt(date.getMinutes()),
            }
            // if month is single digit, add a 0 in front and convert to string
            oDate.sM = (oDate.sM.toString().length === 1) ? `0${oDate.iM}`: `${oDate.iM}`;
            oDate.sD = (oDate.iD.toString().length === 1) ? `0${oDate.iD}`: `${oDate.iD}`;
        
            oDateString = `${oDate.iY}-${oDate.sM}-${oDate.sD}T00:00`;
            return {...oDate, oDateString};
        };

        const getEstValue = (arr, month) => {
          return arr.find((obj) => obj.month === month).estValue
        };
        //debugger
        vars.prod.xs.forEach((oDateTime, i) => {
            const oD = parsedDate(oDateTime);

            vars["xs"].push(oD.oDateString);
            vars["ys"].push(getEstValue(pvEst, parseInt(oD.iM )));
        });

        // add datapoint of end of month, that view is expanded
        const nextMonthEndDay = new Date();
        nextMonthEndDay.setMonth(nextMonthEndDay.getMonth() + 1);
        nextMonthEndDay.setDate(0);
        const oD = parsedDate(nextMonthEndDay);
        vars["xs"].push(oD.oDateString);
        vars["ys"].push(getEstValue(pvEst, parseInt(oD.iM )));
      };
    x: $fn ({vars}) => vars.xs;
    'y': $fn ({ vars }) => vars.ys