Forums
3. Carte Plotly graphique - Version imprimable

+- Forums (https://smartphoton.ch/forum)
+-- Forum : Smartphoton-HA Add-on (https://smartphoton.ch/forum/forum-37.html)
+--- Forum : Partage de configurations YAML (https://smartphoton.ch/forum/forum-50.html)
+--- Sujet : 3. Carte Plotly graphique (/thread-719.html)

3. Carte Plotly graphique - NOLAK - 07-03-2024

Aujourd'hui on va mettre la carte potly pour des graphique ha un peut plus poussés

   

Pour commencer il faudra Hacs (voir mon tuto carte sumsynk)
https://smartphoton.ch/forum/thread-715.html

Une fois que vous avez installé hacs, aller dans le menu à gauche et hacs => interface => le + en bas à droite
Et vous recherchez Plotly Graph Card
Vous pouvez l'installer


Maintenant rdv dans notre beau tableau de bord

3 petits points en haut à droite => Modifier le tableau de bord => Ajouter une carte et recherché Plotly 

Afficher le code et on colle les petits capteurs de Smartphoton ci dessous 

Code :
type: custom:plotly-graph
defaults:
  entity:
    show_value: true
entities:
  - entity: sensor.voltronic_1_conso_maison_watt
    name: Conso
    fill: tozeroy
    extend_to_present: false
    line:
      width: 0.5
      color: '#e74c3c'
      shape: spline
    filters:
      - resample: 2m
  - entity: sensor.voltronic_1_pv_watt
    name: Prod
    fill: tozeroy
    line:
      width: 1
      color: orange
      shape: spline
    filters:
      - resample: 1m
  - entity: sensor.voltronic_1_batt_charge_watt
    name: Charge
    fill: tozeroy
    line:
      width: 0.5
      color: dodgerblue
      shape: spline
    filters:
      - resample: 1m
  - entity: sensor.voltronic_1_batt_decharge_watt
    name: Decharge
    fill: tozeroy
    line:
      width: 0.5
      color: '#9b59b6'
      shape: spline
    filters:
      - resample: 1m
hours_to_show: 2
refresh_interval: auto
layout:
  xaxis:
    rangeselector:
      'y': 1.2
      buttons:
        - count: 1
          step: minute
        - count: 1
          step: hour
        - count: 2
          step: hour
        - count: 6
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day


Ou en négatif pour la décharge
   

Code :
type: custom:plotly-graph
defaults:
  entity:
    show_value: true
entities:
  - entity: sensor.voltronic_1_conso_maison_watt
    name: Conso
    fill: tozeroy
    extend_to_present: false
    line:
      width: 0.5
      color: '#e74c3c'
      shape: spline
    filters:
      - resample: 2m
  - entity: sensor.voltronic_1_pv_watt
    name: Prod
    fill: tozeroy
    line:
      width: 1
      color: orange
      shape: spline
    filters:
      - resample: 1m
  - entity: sensor.voltronic_1_batt_charge_decharge_watt
    name: Charge Decharge
    fill: tozeroy
    line:
      width: 0.5
      color: dodgerblue
      shape: spline
    filters:
      - resample: 1m
hours_to_show: 2
refresh_interval: auto
layout:
  xaxis:
    rangeselector:
      'y': 1.2
      buttons:
        - count: 1
          step: minute
        - count: 1
          step: hour
        - count: 2
          step: hour
        - count: 6
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day

   

Voila un petit graphique bien sympas, qui peux etres encore améliorer. ;)

RE: 3. Carte Plotly graphique - NOLAK - 07-03-2024

1 Dashboard
https://smartphoton.ch/forum/thread-714.html

1.1 Onduleur Parallèles
https://smartphoton.ch/forum/thread-795-post-6357.html#pid6357

2 Carte sumsynk
https://smartphoton.ch/forum/thread-715.html

3. Suite carte graphique
https://smartphoton.ch/forum/thread-719.html

4. Thème
https://smartphoton.ch/forum/thread-720.html

RE: 3. Carte Plotly graphique - jlm - 07-03-2024

oui là ça a de l'allure. Merci pour le tuto

RE: 3. Carte Plotly graphique - NOLAK - 07-03-2024

Bon je rajoute pour ceux qui veulent du négatif
   

Code :
type: custom:plotly-graph
defaults:
  entity:
    show_value: true
entities:
  - entity: sensor.voltronic_1_conso_maison_watt
    name: Conso
    fill: tozeroy
    extend_to_present: false
    line:
      width: 0.5
      color: '#e74c3c'
      shape: spline
    filters:
      - resample: 2m
  - entity: sensor.voltronic_1_pv_watt
    name: Prod
    fill: tozeroy
    line:
      width: 1
      color: orange
      shape: spline
    filters:
      - resample: 1m
  - entity: sensor.voltronic_1_batt_charge_decharge_watt
    name: Charge Decharge
    fill: tozeroy
    line:
      width: 0.5
      color: dodgerblue
      shape: spline
    filters:
      - resample: 1m
hours_to_show: 2
refresh_interval: auto
layout:
  xaxis:
    rangeselector:
      'y': 1.2
      buttons:
        - count: 1
          step: minute
        - count: 1
          step: hour
        - count: 2
          step: hour
        - count: 6
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day


RE: 3. Carte Plotly graphique - NOLAK - 07-03-2024

Ajout petit carte production journalière

   

Code :
type: custom:plotly-graph
entities:
  - entity: sensor.production_pv_wh_heure
    name: Production Jour
    type: bar
    statistic: state
    texttemplate: '%{y:.2f}'
    period: hour
    number:
      suffix: ' kWh'
      valueformat: '0.11'
    textfont:
      color: white
      size: 10
    marker:
      color: '#f39c12'
      opacity: 0.6
hours_to_show: current_day
time_offset: 1h
refresh_interval: auto
layout:
  paper_bgcolor: rgba(0,0,0,0)
  plot_bgcolor: rgba(0,0,0,0)
  barmode: relative
  bargap: 0.1
  uniformtext:
    minsize: 12
    mode: show
  modebar:
    orientation: h
    remove: pan
  margin:
    t: 10
    l: 1
    r: 1
  height: 300
  legend:
    'y': -0.25
    x: 0.02
  xaxis:
    gridcolor: rgba(238,235,235,0.3)
    showgrid: false
    linewidth: 0
    linecolor: null
    nticks: 8
  yaxis:
    visible: false


RE: 3. Carte Plotly graphique - jlm - 07-03-2024

inarrêtable, là ça devient du lourd. Perso ça me plait !  Thumbsup

RE: 3. Carte Plotly graphique - bishnoi - 11-03-2024

merci ! 
super

comment inverser le sens des ions entre onduleur et batterie ?
et comment agrandir le tout ?
   
trouvé dans General Options !

RE: 3. Carte Plotly graphique - NOLAK - 11-03-2024

Pour inverser le sens de la carte sumsynk :
- modifier la carte
- Batterie options
- invert power

Pour mettre en plus gros tout dépend de la taille de ton écran
Mais tu as la solution de faire une nouvelle vue et en type tu met panneau (1 carte)

RE: 3. Carte Plotly graphique - NOLAK - 12-03-2024

Petite amélioration du graph production jour :


   

Code :
type: custom:plotly-graph
entities:
  - entity: sensor.production_pv_wh_jour
    name: production Jour
    offset: 1
    type: bar
    statistic: state
    texttemplate: '%{y:.2f}'
    period: hour
    number:
      suffix: ' kWh'
      valueformat: '0.11'
    textfont:
      color: white
      size: 10
    opacity: 0.9
    marker:
      color: '#2980b9'
      opacity: 0.6
  - entity: sensor.production_pv_wh_heure
    name: Production heure
    type: bar
    offset: 1
    statistic: state
    texttemplate: '%{y:.2f}'
    period: hour
    number:
      suffix: ' kWh'
      valueformat: '0.11'
    textfont:
      color: white
      size: 10
    opacity: 1
    marker:
      color: '#f39c12'
      opacity: 0.6
  - entity: sensor.production_pv_wh_jour
    name: Hier Jour
    offset: 2
    type: bar
    visible: legendonly
    statistic: state
    time_offset: +1.0d
    texttemplate: '%{y:.2f}'
    period: hour
    number:
      suffix: ' kWh'
      valueformat: '0.11'
    textfont:
      color: white
      size: 10
    opacity: 0.5
    marker:
      color: '#95a5a6'
      opacity: 0.6
  - entity: sensor.production_pv_wh_heure
    name: Hier Heure
    offset: 1
    type: bar
    time_offset: +1.0d
    visible: legendonly
    statistic: state
    texttemplate: '%{y:.2f}'
    period: hour
    number:
      suffix: ' kWh'
      valueformat: '0.11'
    textfont:
      color: white
      size: 10
    opacity: 1
    marker:
      color: grey
      opacity: 0.6
hours_to_show: current_day
refresh_interval: auto
layout:
  paper_bgcolor: rgba(0,0,0,0)
  plot_bgcolor: rgba(0,0,0,0)
  bargap: 0.1
  uniformtext:
    minsize: 12
    mode: show
  modebar:
    orientation: h
    remove: pan
  margin:
    t: 10
    l: 1
    r: 1
  height: 300
  legend:
    'y': -0.25
    x: 0.02
  xaxis:
    gridcolor: rgba(238,235,235,0.3)
    showgrid: false
    linewidth: 0
    linecolor: null
    nticks: 8
  yaxis:
    visible: false


RE: 3. Carte Plotly graphique - NOLAK - 12-03-2024

Amélioration graphique avec filtre journée d'hier

   

charge et décharge  en positif
Code :
type: custom:plotly-graph
defaults:
  entity:
    show_value: true
entities:
  - entity: sensor.voltronic_1_conso_maison_watt
    time_offset: +1.0d
    name: Conso hier
    visible: legendonly
    fill: tozeroy
    extend_to_present: false
    line:
      width: 0.5
      color: '#bdc3c7'
      shape: spline
    filters:
      - resample: 2m
  - entity: sensor.voltronic_1_conso_maison_watt
    name: Conso
    fill: tozeroy
    extend_to_present: false
    line:
      width: 0.5
      color: '#e74c3c'
      shape: spline
    filters:
      - resample: 2m
  - entity: sensor.voltronic_1_pv_watt
    name: Prod hier
    visible: legendonly
    time_offset: +1.0d
    fill: tozeroy
    line:
      width: 1
      color: '#2ecc71'
      shape: spline
    filters:
      - resample: 1m
  - entity: sensor.voltronic_1_pv_watt
    name: Prod
    fill: tozeroy
    line:
      width: 1
      color: orange
      shape: spline
    filters:
      - resample: 1m
  - entity: sensor.voltronic_1_batt_charge_watt
    name: Charge
    fill: tozeroy
    line:
      width: 0.5
      color: dodgerblue
      shape: spline
    filters:
      - resample: 1m
  - entity: sensor.voltronic_1_batt_decharge_watt
    name: Decharge
    fill: tozeroy
    line:
      width: 0.5
      color: '#9b59b6'
      shape: spline
    filters:
      - resample: 1m
hours_to_show: 2
refresh_interval: auto
layout:
  margin:
    autoexpand: true
    b: 80
  xaxis:
    showgrid: false
    rangeselector:
      'y': -0.4
      x: 0.2
      bordercolor: '#eeeeee50'
      borderwidth: 1
      bgcolor: '#eeeeee00'
      activecolor: '#0000ff30'
      buttons:
        - count: 1
          step: minute
        - count: 1
          step: hour
        - count: 2
          step: hour
        - count: 6
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day

Charge positif et décharge négatif
Code :
type: custom:plotly-graph
defaults:
  entity:
    show_value: true
entities:
  - entity: sensor.voltronic_1_conso_maison_watt
    time_offset: +1.0d
    name: Conso hier
    visible: legendonly
    fill: tozeroy
    extend_to_present: false
    line:
      width: 0.5
      color: '#bdc3c7'
      shape: spline
    filters:
      - resample: 2m
  - entity: sensor.voltronic_1_conso_maison_watt
    name: Conso
    fill: tozeroy
    extend_to_present: false
    line:
      width: 0.5
      color: '#e74c3c'
      shape: spline
    filters:
      - resample: 2m
  - entity: sensor.voltronic_1_pv_watt
    name: Prod hier
    visible: legendonly
    time_offset: +1.0d
    fill: tozeroy
    line:
      width: 1
      color: '#2ecc71'
      shape: spline
    filters:
      - resample: 1m
  - entity: sensor.voltronic_1_pv_watt
    name: Prod
    fill: tozeroy
    line:
      width: 1
      color: orange
      shape: spline
    filters:
      - resample: 1m
  - entity: sensor.voltronic_1_batt_charge_decharge_watt
    name: Charge
    fill: tozeroy
    line:
      width: 0.5
      color: dodgerblue
      shape: spline
    filters:
      - resample: 1m
hours_to_show: 2
refresh_interval: auto
layout:
  margin:
    autoexpand: true
    b: 80
  xaxis:
    showgrid: false
    rangeselector:
      'y': -0.4
      x: 0.2
      bordercolor: '#eeeeee50'
      borderwidth: 1
      bgcolor: '#eeeeee00'
      activecolor: '#0000ff30'
      buttons:
        - count: 1
          step: minute
        - count: 1
          step: hour
        - count: 2
          step: hour
        - count: 6
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day