Use of rest api and custom layout

[Pascal66]

Everything in my code below is working fine until the returning traces.
Layout, is showing nothing

type: custom:plotly-graph
entities: []
raw_plotly_config: true
fn: |-
  $fn(async ({ hass, vars, states }) => {

    // Récupération de la liste d'entités
    const sensor = hass.states['sensor.panneaux_dynamiques'];
    if (!sensor || !sensor.attributes.entities) return;

    const liste_inverters = sensor.attributes.entities;
    if (!liste_inverters || liste_inverters.length === 0) return;

    const fetchHistory = async (entity_id, start, end, hass) => {
      const url = `history/period/${start}?filter_entity_id=${entity_id}&end_time=${end}`;
      const response = await hass.callApi('GET', url);
      //console.log("Historical data:", response);
      if (!response || response.length === 0) return { timestamps: [], values: [] };
     
      const history = response[0];
      //console.log("Historical data:", history);
      return {
          timestamps: history.map(entry => new Date(entry.last_updated)),
          values: history.map(entry => {
            const value = parseFloat(entry.state);
            return isNaN(value) ? null : value; // Remplace les NaN par null
          }),      
      };
    };
    const now = new Date();
    const past = new Date(now.getTime() - 24*60*60*1000); //vars.hours_to_show * 60 * 60 * 1000);
    //console.log("start history:", past.toISOString());
    //console.log("end history:", now.toISOString());

    // Récupération des données historiques pour chaque entité
    const traces = await Promise.all(
    
      liste_inverters.map(async entity_id => {
        const entity = hass.states[entity_id];
    
        if (!entity) return null;
        console.log("Fetching history for:", entity_id);

        const history = await fetchHistory(entity_id, past.toISOString(), now.toISOString(), hass);
        //console.log("Historical data:", history);

        const filteredValues = history.values.filter(value => value !== null);
        const filteredTimestamps = history.timestamps.filter((_, index) => history.values[index] !== null);
        const formattedTimestamps = filteredTimestamps.map(timestamp => timestamp.toISOString());
        // Vérifiez les résultats après filtrage
        //console.log("formattedTimestamps:", formattedTimestamps);
        
        return {
          x: formattedTimestamps,
          y: filteredValues,
          type: 'scatter',
          mode: 'lines',
          name: entity.attributes.friendly_name || entity_id,
        };
      })
    );
    // Définir le layout si vars.layout est undefined
    const layout_1 = {
      title: 'Production des panneaux solaires 2',
      xaxis: {
        title: 'Temps_2',
        showgrid: true,
        rangeselector: {
          buttons: [
            { count: 1, label: '1h', step: 'hour', stepmode: 'backward' },
            { count: 6, label: '6h', step: 'hour', stepmode: 'backward' },
            { step: 'all', label: 'Tout' },
          ],
        },
      },
      yaxis: {
        title: 'Puissance (W)',
        showgrid: true,
        rangemode: 'tozero',
      },
      autosize: true,
      margin: { t: 30, r: 20, b: 30, l: 40 },
      plot_bgcolor: '#ffffff',
    };

    console.log("Final data for Plotly:", { data: traces.filter(trace => trace !== null), layout: layout_1 });    
    
    return {
      data: traces.filter(trace => trace !== null), // Filtrer les entités invalides
      layout: layout_1,
    };
  });

[dbuezas]

Promises are not supported in the card.
You could make the promise store to window.myData and then return that. This way the card will se whatever was fetched before.

[Pascal66]

Even if I succesfully get all datas in traces with the promises, with no errors at all in the console ?

[dbuezas]

Yes, because the promise is resolved after the plot is constructed.

[Pascal66]

I've simplified, Still nothing ...

type: custom:plotly-graph
entities: []
raw_plotly_config: true
fn: |-
  $fn(async ({ hass, vars, states }) => {

    // Récupération de la liste d'entités
    const sensor = hass.states['sensor.panneaux_dynamiques'];
    if (!sensor || !sensor.attributes.entities) return;

    const liste_inverters = sensor.attributes.entities;
    if (!liste_inverters || liste_inverters.length === 0) return;

    const fetchHistory = async (entity_id, start, end, hass) => {
      const url = `history/period/${start}?filter_entity_id=${entity_id}&end_time=${end}`;
      const response = await hass.callApi('GET', url);
      //console.log("Historical data:", response);
      if (!response || response.length === 0) return { timestamps: [], values: [] };
     
      const history = response[0];
      //console.log("Historical data:", history);
      return {
          timestamps: history.map(entry => new Date(entry.last_updated)),
          values: history.map(entry => {
            const value = parseFloat(entry.state);
            return isNaN(value) ? null : value; // Remplace les NaN par null
          }),      
      };
    };
    const now = new Date();
    const past = new Date(now.getTime() - 24*60*60*1000); //vars.hours_to_show * 60 * 60 * 1000);
    //console.log("start history:", past.toISOString());
    //console.log("end history:", now.toISOString());

    // Récupération des données historiques pour chaque entité
        // Stocker les données dans une variable globale pour persistance
    window.myData =  await Promise.all(
    
      liste_inverters.map(async entity_id => {
        const entity = hass.states[entity_id];
    
        if (!entity) return null;
        console.log("Fetching history for:", entity_id);

        const history = await fetchHistory(entity_id, past.toISOString(), now.toISOString(), hass);
        //console.log("Historical data:", history);

        const filteredValues = history.values.filter(value => value !== null);
        const filteredTimestamps = history.timestamps.filter((_, index) => history.values[index] !== null);
        const formattedTimestamps = filteredTimestamps.map(timestamp => timestamp.toISOString());
        // Vérifiez les résultats après filtrage
        //console.log("formattedTimestamps:", formattedTimestamps);
        
        return {
          x: formattedTimestamps,
          y: filteredValues,
          type: 'scatter',
          mode: 'lines',
          name: entity.attributes.friendly_name || entity_id,
        };
      })
    );

    console.log("Data stored in window.myData:", window.myData);

    return {
      data: window.myData, //.filter(trace => trace !== null), // Filtrer les entités invalides
      layout: vars.layout || {
        title: 'Production des panneaux solaires',
        xaxis: { title: 'Temps', showgrid: true },
        yaxis: { title: 'Puissance (W)', showgrid: true, rangemode: 'tozero' },
        autosize: true,
        margin: { t: 30, r: 20, b: 30, l: 40 },
        plot_bgcolor: '#ffffff',
      },
    };
  });

[dbuezas]

The problem is that you are still awaiting before returning the old value.
You need to remove the async keyword and use .then(()=> {....}) for the fetch command