[Styling Module, JS+Editor Module] CNX Graph Pro

[Cedynamix]

CNX Graph Pro

Version: v3.0
Creator: Cedynamix (https://cedynamix.com)

Important

Supported cards:

• Button

FR: Extension avancée pour Bubble Card. Son but, transformer vos boutons Bubble Card statiques en moniteurs de données dynamiques et élégants, sans sacrifier la fluidité de l'interface.

EN: Advanced Bubble Card extension. Its goal is to transform your static Bubble Card buttons into dynamic and elegant data monitors, without sacrificing the interface's fluidity.

---

🧩 Get this Module

If you like this module and would like to support it, you can find it on my Patreon. I have many module ideas in mind and others currently in development. Clooos's work on his magnificent Bubble Card is inspiring.

A huge thank you to everyone who already supports me. (Yes, there are already some...)

---

How to install

1. Download the module
   Download the YAML file for this module from the bottom of the Patreon post.

   

2. Open your Bubble Card editor
   Go to the card where you want to use the module.

3. Import the module
   In the Modules section of the editor, click on Import from YAML, paste the contents of the downloaded YAML file, then click Import Module.

4. Toggle "This card"

5. Configure as needed

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[Clooos]

Hi! I don't mind that you sell your modules as I do, but could you please at least don't copy my texts? This looks like you're working on Bubble Card directly, which is not the case.

Thank you in advance.

[Clooos]

The problem isn't really the presentation but the fact that you haven't changed anything, even the name of your module starts with Bubble, and I don't want that someone could think this module is from me or from an active contributor of the project.

I'm also planning to release a graph module myself and I've already teased about it in my previous release notes. You probably have seen it as well and I'm already a bit sad that someone made one before me, so please at least don't make it looks like it is from me, this is too much misleading.

Please be a bit more creative 😅

Sorry if this message looks a bit salty and I hope you understand.

[Cedynamix]

I sincerely apologize; I truly hadn't seen in your previous release notes that you were planning to release your own graph module. I moved forward with this because I wasn't satisfied with the workaround I mentioned on the HA forum, and I certainly didn't intend to use a name that causes confusion.
It was never my intention to claim your work as my own or to create any ambiguity regarding the project's origin. I completely understand your disappointment, and I will do what’s necessary to ensure this module has its own identity, totally distinct from yours, in both name and design.
Sorry again for this oversight on my part, and thank you for being frank with me about it.

[Clooos]

My main problem is this part that you still haven't changed:

"If you like this module and want to support my work, you can find it on my Patreon. Bubble Card keeps growing, and your support helps me spend more time adding new features and fixing bugs ❤️

By joining my Patreon, you also get access to all my other exclusive modules!

A big thank you to everyone who already supports me. Your messages and feedback mean a lot and really push me to continue improving my creations."

You are not working on Bubble Card so this doesn't makes any sense.

[Cedynamix]

I quickly changed the title this morning to show you I was acting in good faith. I didn't have time to do more.

I just changed it. I'll say it again, as I said earlier: there was absolutely no intention to harm or exploit your work, your image, etc. I respect it far too much for that. As stated in the revised text, your work is inspiring, that's all. And thank you again so much for everything you do (I wouldn't have done it myself). And I should mention that I'm subscribed to your Patreon.

[Clooos]

Voilà c'est mieux 👌

Et pas de soucis, je préférerais éviter toute confusion, puis bon là c'était vraiment trop un copié/collé de mes textes. Et merci pour l'abonnement sur Patreon !

Bon je me remets au boulot !

[bobwithanx]

This is still showing up incorrectly and is misleading.

and .

Especially just seeing it in the Module Store, it looks official like it has been created by @Clooos. Will this be changed any further?

[Potier51]

Bonjour,

Je viens de prendre la version 2.4.

Serait il possible d'ajouter plus de personnalisation:

• Sélection d'une entité de mon choix
• Ajout d'un deuxième graphique (permettant d'avoir température et humidité pour ma part).

Je rencontre les problème suivant:

• Je souhaite changer la hauteur du graphique dans la carte mais peut importe les valeurs cela ne change pas.

Pouvez vous m'indiquer si je ne m'y prends pas bien?

Merci d'avance.

[Cedynamix]

Bonjour @Potier51

Merci à toi pour ta confiance.
Pour répondre concernant les futures évolutions du module.

• L'option d'avoir plusieurs entités pour dessiner les graphs est en cours de développement. elle arrivera très bientôt.
• Sélection d'une entité de mon choix : si tu parles du fait d'être Independent de l'état de l'entité principale de ta carte Bubble c'est aussi en cours. Si ce n'est pas de cela dont tu parles n'hésites pas être plus précis dans ta demande.

Pour le bug d'affichage : Je viens d'essayer tes réglages et je ne rencontre pas de problème.

Peux-tu stp m'envoyer le configuration complète de ta carte en fichier txt afin que j'essaie de faire exactement la même carte que toi .

[Potier51]

Nous sommes raccord sur nos questions réponse.
J'attendrais donc que le développement se fasse.
Voici ma configuration de carte actuelle :

type: custom:bubble-card
card_type: button
button_type: state
modules:
  - room-card-plus
  - Bubble_graph_pro-module
rows: 2.625
room-card-plus:
  state_entities:
    - name: T⁰
      entity: sensor.temp_rh_chp_temperature
      show_unit: true
      order_priority: 1
    - name: "Fenêtre "
      entity: binary_sensor.capteur_fenetre_chp_contact
      show_icon: true
      show_text: false
      order_priority: 3
      icon_rules:
        - name: Ouvert
          icon: mdi:window-open-variant
          condition:
            - condition: state
              entity_id: binary_sensor.capteur_fenetre_chp_contact
              state:
                - "on"
    - name: "Humidité "
      order_priority: 2
      entity: sensor.temp_rh_chp_humidity
      show_unit: true
  title_em_mobile: 1
  ts_pad_top: 20
  ts_block_height: 30
  state_multi_gap: 10
  state_icon_gap: 6
  icon_corner_style: diagonal
  icon_width: 80
  icon_height: 40
  icon_size: 30
  sub_button_size: 30
  main_sb_off_color: transparent
  main_sb_on_color: transparent
sub_button:
  main:
    - entity: cover.chambre_rue
    - entity: climate.rad_chp_3
      icon: mdi:radiator-disabled
  bottom: []
name: Chambre Parentale
show_state: false
Bubble_graph_pro-module:
  preset_threshold: custom
  upper_bound: 25
  bottom_padding: 0
  top_padding: 0
  color_type: threshold
  hours: 48
  is_square: false
  line_width: 6
  invert_colors: false
  fill_opacity: 0
  color_low:
    - 0
    - 174
    - 255
  color_mid:
    - 255
    - 174
    - 0
  color_high:
    - 255
    - 0
    - 0
entity: sensor.temp_rh_chp_temperature
grid_options:
  columns: 6
  rows: 2
icon: hue:room-bedroom
tap_action:
  action: none
double_tap_action:
  action: none
hold_action:
  action: none
button_action:
  tap_action:
    action: none
  double_tap_action:
    action: none
  hold_action:
    action: none
scrolling_effect: true

[Cedynamix]

@Potier51. Merci pour ton retour.
Je viens de regarder. Dans le fichier que tu as téléchargé sur mon patreon, il y avait un faute de frappe (suite au discussion sur le nom du module) ce qui fait que la configuration n'etait pas prise en compte peu importe ce que tu modifiais. Je viens de corriger le fichier. Tu peux donc le retélécharger.

Supprime l'ancien module et réinstalle le nouveau. Pour ne pas a refaire toute ta configuration après installation renomme :
Bubble_graph_pro-module:
par :
cnx_graph_pro:

[Potier51]

Merci beaucoup cela fonctionne bien.

[Cedynamix]

CNX Graph Pro v2.4→ v3.0 Changes

Bug Fixes

• Bugfix: Implemented strict numeric type conversion (Number()) on Z-Index values ​​to prevent format conflicts (String vs. Number) sent by Home Assistant.
• Bugfix: Fixed a visual overwriting issue where all lines were consistently drawn over all fills, ignoring the Z-Index.

Editor

• Improvement: The Z-index range in the visual interface has been extended from -5 to 10 to easily place a slot behind the primary entity (set to 1 by default).
• Improvement: Any additional slot can now be assigned to an independent secondary calculation axis (use_secondary_axis).
• Improvement: Dedicated minimum/maximum limit settings have been added to the new secondary axis, allowing dissimilar values ​​(e.g., Temperature 15-25°C and Binary Sensor 0-1) to coexist on the same graph.

New Features

• Added 3 additional Slots configurable independently of the map entity (Colors, Fill, Thresholds).
• Introduced the Secondary Axis.
• Added the ignore_main_entity option to use the graph only for third-party sensors.
• Added Z-Index management, allowing precise definition of the visual overlay order of each curve.
• Architectural independence of drawing parameters. Line width and line smoothing are no longer global but can be configured individually for each Slot.
• Moved the Z-Index sorting algorithm inside the dynamic rendering loop (updateGraph). This ensures that the layer order is maintained even if the API data arrives with a delay. New Features

Backward Compatibility

Following the complete overhaul of the module options, delete your old configuration.

Screenshots

Read the full article : https://cedynamix.com/cnx-graph-pro-fait-sa-revolution-passage-a-la-v3-0/

[jujules27]

Bonjour, je viens de prendre la version 3.0 et je n'arrive pas à y intégrer un binary-sensor.
de plus, comment aligner correctement les textes en haut car ils sont obligatoirement centré et à part faire :

styles: |
  .bubble-name-container {
    align-self: flex-start !important;
  }
  .bubble-icon-container {
    align-self: flex-start !important;
  }

je n'ai pas trouver d'autre solution...

Mon objectif et de convertir mon graphique en version bubble.

je pensais pourvoir le réaliser avec CNX graph pro mais j'en suis la :

type: custom:bubble-card
card_type: button
button_type: state
sub_button:
  main: []
  bottom: []
entity: sensor.temperaturesejour
modules:
  - cnx_graph_pro
cnx_graph_pro:
  bottom_padding: -130
  top_padding: 60
  is_square: false
  points_limit: 100
  hours: 48
  use_secondary_axis_2: true
  entity_2: binary_sensor.night
  line_smoothing_2: false
  show_fill_2: false
  color_type_2: fixed
  fixed_color_2:
    - 0
    - 0
    - 0
  entity_1: sensor.home_temperature
  color_type: threshold
  preset_threshold: temp_cedynamix
  show_fill: true
  color_type_1: fixed
  preset_threshold_1: temp_cedynamix
  show_fill_1: false
  fixed_color_1:
    - 12
    - 54
    - 223
  invert_colors_1: false
  fill_opacity_2: 0
  line_width_2: 6
card_layout: large
rows: '4'
styles: |
  .bubble-name-container {
    align-self: flex-start !important;
  }
  .bubble-icon-container {
    align-self: flex-start !important;
  }
name: Température
icon: mdi:thermometer

[jujules27]

je pense qu'il faudrait revoir t'as correction chirurgicale

                // Conversion des états Home Assistant
                // on  -> 1
                // off -> 0
                // valeurs numériques -> valeur numérique
                const parseState = (value) => {
                    if (value === undefined || value === null) return 0;

                    const str = String(value).toLowerCase();

                    if (str === 'on') return 1;
                    if (str === 'off') return 0;

                    const num = parseFloat(str);
                    return Number.isFinite(num) ? num : 0;
                };

                let lastValidState = 0;

                if (raw.length > 0) {
                    lastValidState = parseState(
                        raw[0].state !== undefined
                            ? raw[0].state
                            : raw[0].s
                    );
                }

                for (let i = 0; i < globalCfg.points; i++) {
                    const tS = startTime.getTime() + (i * bkt);
                    const tE = tS + bkt;

                    const pts = raw.filter(s =>
                        (s.lu * 1000) >= tS &&
                        (s.lu * 1000) < tE
                    );

                    if (pts.length > 0) {
                        const lastPoint = pts[pts.length - 1];

                        lastValidState = parseState(
                            lastPoint.state !== undefined
                                ? lastPoint.state
                                : lastPoint.s
                        );
                    }

                    stats.push({
                        s: lastValidState
                    });
                }

                curve.stats = stats;

[Cedynamix]

Merci beaucoup pour ton retour ! L'idée d'ajouter un parseur pour convertir nativement les états 'on/off' des binary_sensor en 1/0 est excellente, ça évite aux utilisateurs de devoir créer des capteurs templates. (Ce que j'ai personnellement fait pour mon capteur jour/nuit)
En revanche, je ne vais pas intégrer ta boucle for telle quelle car elle écrase le calcul des moyennes (average) par une simple sélection du dernier point, et forcer le return 0 sur des états unavailable ferait chuter les courbes de températures à zéro lors des pertes de connexion par exemple.
Je vais intégrer ta logique parseState dans le moteur de la prochaine mise à jour en l'adaptant à l'algorithme de moyenne et au Garbage Collector. Merci pour l'inspiration !

[jujules27]

De rien, c'est avec plaisir. Je pensais que c'était natif car dans le descriptif tu parle bien de binary-sensor on/off.

Sinon une astuce pour le titre ?

Et comme autre amélioration, si le lissage pouvait avoir smoothing_strength dans la configuration afin de lisser les courbes indépendamment les unes des autres.

[Cedynamix]

Ce plugin te permet d'avoir un graphique dans une bubble Card.
Il faudra que tu joues avec les sous boutons et la personnalisation de ceux-ci pour avoir visuellement les températures comme sur ton premier Screenshot.

dans 🛠️ PARAMÈTRES GLOBAUX & STRUCTURE
tu mets l'option Résolution (Points) à 10 pour avoir une courbe plus lissée.

Voilà a quoi pourrais ressembler ta configuration yaml :

cnx_graph_pro:
  is_square: true
  upper_bound: 32
  hours: 18
  line_smoothing: true
  line_width: 2
  points_limit: 10
  color_type: fixed
  fill_opacity: 0.1
  show_fill: true
  invert_colors: false
  top_padding: 0
  entity_1: sensor.indoor_manon_temperature
  invert_colors_1: false
  show_fill_1: true
  fill_opacity_1: 0.1
  lower_bound: 15
  ignore_main_entity: false
  show_fill_2: true
  color_type_2: fixed
  use_secondary_axis_2: true
  upper_bound_sec: 2
  lower_bound_sec: 0
  fixed_color_2:
    - 161
    - 161
    - 161
  fill_opacity_2: 0.1
  bottom_padding: 0
  z_index_2: 0
  z_index_1: -1
  z_index: 0
  line_smoothing_2: true
  line_width_2: 2
  line_smoothing_1: true
  use_secondary_axis_1: false
  line_width_1: 2
  entity_2: sensor.nightstate

est une capture du résultat chez moi :

[jujules27]

OK, il faut ajouter un sub button bottom dans la config de la carte bubble pour que le titre ne soit plus centré mais aligné en haut (quitte à retirer les affichages du sub-button)

type: custom:bubble-card
card_type: button
button_type: state
sub_button:
  main: []
  bottom:
    - show_icon: false
      state_background: false
      show_background: false
      scrolling_effect: false

j'en est profité pour pouvoir mettre une épaisseur de trait à 0px, comme tu gère indépendamment le trait et le remplissage, cela permet d'avoir uniquement le remplissage et je trouve que, pour le cas jour/nuit, est plus harmonieux.

merci de ton aide.