[Styling Module, JS Module, JS+Editor Module] Amber Energy Price Forecast

[lukegackle]

Module post template

Amber Energy Price Forecast

Version: v1.0
Creator: lukegackle

Important

Unsupported cards:

• Cover
• Climate
• Horizontal buttons stack
• Media player
• Pop-up
• Select
• Separator

Amber Energy price forecast card just like it looks in the Amber Energy app, you will need the official Amber Electric integration for Homeassistant setup before you can use this card.

Important

Pre-requisite
You must have the official Amber Electric integration for home assistant to use this custom module.
https://www.home-assistant.io/integrations/amberelectric/

Configure this module via the editor or in YAML, for example:

type: custom:bubble-card
card_type: button
sub_button:
  main: []
  bottom: []
button_type: name
modules:
  - amber_forecast
amber_forecast:
  forecast_entity: sensor.amber_general_forecast
  price_entity: sensor.amber_general_price
  show_renewables: true
  show_confidence: false
  bar_width: 17
  max_bars: 24
  chart_height: 180
show_icon: false
show_name: false
scrolling_effect: false

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

amber_forecast:
  name: Amber Forecast Chart
  version: v1.3.0
  creator: Luke
  supported:
    - button
  description: |
    Reads sensor.amber_general_forecast (or configured entity) and renders
    a scrollable row of colored tiles matching the Amber app style.
  code: |
    ${(() => {
        const cfg            = this.config.amber_forecast || {};
        const forecastEnt    = cfg.forecast_entity  || 'sensor.amber_general_forecast';
        const priceEnt       = cfg.price_entity     || 'sensor.amber_general_price';
        const chartTitle     = cfg.title            || 'Electricity Price Forecast';
        const showRenewables = cfg.show_renewables  !== false;
        const maxBars        = parseInt(cfg.max_bars)     || 48;

        const DCOL = {
            negative:'#22c55e', extremelyLow:'#4ade80', veryLow:'#86efac',
            low:'#a3e635', neutral:'#facc15', high:'#fb923c',
            veryHigh:'#f87171', spike:'#c084fc',
        };
        const dc = d => DCOL[d] || '#94a3b8';
        const dl = d => d ? d.replace(/([A-Z])/g,' $1').trim() : '';

        const fState  = hass.states[forecastEnt];
        const pState  = hass.states[priceEnt];
        
        // Cache & Performance: Skip re-render if data & config are unchanged
        const stateKey = fState?.last_updated || 'none';
        const cacheKey = stateKey + '|' + JSON.stringify(cfg);
        if (card._ambHash === cacheKey && card.querySelector('.ambc-wrap')) return '';
        card._ambHash = cacheKey;

        const allIvls = fState?.attributes?.forecasts || fState?.attributes?.intervals || [];
        const pUnit = pState?.attributes?.unit_of_measurement || 'c/kWh';
        const isDollars = pUnit.includes('$');
        
        const curPx = pState ? parseFloat(pState.state) : null;
        const curPxCents = curPx !== null ? (isDollars ? curPx * 100 : curPx) : null;
        
        let curDesc = pState?.attributes?.descriptor || '';
        if (curDesc && curDesc.includes('_')) {
            curDesc = curDesc.replace(/_([a-z])/g, (g) => g[1].toUpperCase());
        }
        const curCol  = dc(curDesc);
        const renew   = pState?.attributes?.renewables ?? null;

        const ivls = allIvls.slice(0, maxBars).map((item, idx) => {
            const isOfficial = item.nem_date !== undefined;
            const rawTime = isOfficial ? item.nem_date : item.t;
            const rawVal = isOfficial ? (item.per_kwh * 100) : item.v;
            
            let rawDesc = isOfficial ? item.descriptor : item.d;
            if (rawDesc && rawDesc.includes('_')) {
                rawDesc = rawDesc.replace(/_([a-z])/g, (g) => g[1].toUpperCase());
            }

            const rawRenew = isOfficial ? item.renewables : item.r;
            const type = isOfficial ? (idx === 0 ? 'current' : 'forecast') : (item.type || 'forecast');

            return {
                t: rawTime,
                v: rawVal,
                d: rawDesc || 'unknown',
                r: rawRenew,
                type: type
            };
        });

        // Theme compatibility and typography styles
        const STYLE_ID = 'amber-forecast-style';
        if (!card.querySelector('#' + STYLE_ID)) {
            const s = document.createElement('style');
            s.id = STYLE_ID;
            s.textContent = `
                .ambc-wrap{display:flex;flex-direction:column;padding:12px 14px 10px;box-sizing:border-box;width:100%}
                .ambc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
                .ambc-title{font-size:11px;font-weight:600;opacity:0.8;letter-spacing:0.5px;text-transform:uppercase}
                .ambc-price{font-size:22px;font-weight:800;line-height:1}
                .ambc-unit{font-size:11px;opacity:0.65}
                .ambc-renew{font-size:11px;opacity:0.6;margin-left:6px}
                .ambc-badge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:var(--bubble-border-radius, 12px);white-space:nowrap}
                .ambc-scroll{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;user-select:none;position:relative;flex-shrink:0}
                .ambc-scroll::-webkit-scrollbar{display:none}
                .ambc-scroll.grabbing{cursor:grabbing}
                .ambc-grid{display:flex;gap:8px;padding:4px 4px 12px 4px}
                .ambc-tile{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:72px;min-width:72px;height:124px;padding:12px 8px;box-sizing:border-box;border-radius:calc(var(--bubble-border-radius, 12px) / 1.1);transition:all 0.2s ease;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
                .ambc-tile-time{font-size:12px;font-weight:700;opacity:0.9}
                .ambc-tile-circle{width:22px;height:22px;border-radius:var(--bubble-icon-border-radius, 50%);margin:6px 0;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)}
                .ambc-tile-price{font-size:16px;font-weight:800}
                .ambc-tile-renew{font-size:11px;font-weight:600;opacity:0.7}
                .ambc-nodata{padding:16px;opacity:0.5;font-size:13px}
            `;
            card.appendChild(s);
        }

        const container = card.querySelector('.bubble-container') || card;
        let wrap = card.querySelector('.ambc-wrap');
        if (!wrap) {
            wrap = document.createElement('div');
            wrap.className = 'ambc-wrap';
            container.appendChild(wrap);
        }
        wrap.innerHTML = '';

        if (!ivls.length) {
            const nd = document.createElement('div');
            nd.className = 'ambc-nodata';
            nd.textContent = 'No forecast data — check ' + forecastEnt + ' in Developer Tools > States';
            wrap.appendChild(nd);
            return '';
        }

        const hdr = document.createElement('div');
        hdr.className = 'ambc-header';
        const left = document.createElement('div');

        const titleEl = document.createElement('div');
        titleEl.className = 'ambc-title';
        titleEl.textContent = chartTitle;
        left.appendChild(titleEl);

        const priceRow = document.createElement('div');
        priceRow.style.cssText = 'display:flex;align-items:baseline;gap:4px;margin-top:2px;';
        const priceEl = document.createElement('span');
        priceEl.className = 'ambc-price';
        priceEl.style.color = curCol;
        if (curPxCents !== null) {
            const unitEl = document.createElement('span');
            unitEl.className = 'ambc-unit';
            unitEl.textContent = ' c/kWh';
            priceEl.textContent = (curPxCents >= 0 ? '' : '\u2212') + Math.abs(curPxCents).toFixed(1);
            priceEl.appendChild(unitEl);
        } else { priceEl.textContent = '\u2014'; }
        priceRow.appendChild(priceEl);

        if (showRenewables && renew !== null) {
            const rEl = document.createElement('span');
            rEl.className = 'ambc-renew';
            rEl.textContent = '\uD83C\uDF3F ' + renew + '%';
            priceRow.appendChild(rEl);
        }
        left.appendChild(priceRow);
        hdr.appendChild(left);

        if (curDesc) {
            const badge = document.createElement('div');
            badge.className = 'ambc-badge';
            badge.textContent = dl(curDesc);
            badge.style.cssText = 'background:' + curCol + '28;color:' + curCol + ';border:1px solid ' + curCol + '55;';
            hdr.appendChild(badge);
        }
        wrap.appendChild(hdr);

        const gridEl = document.createElement('div');
        gridEl.className = 'ambc-grid';

        ivls.forEach((iv) => {
            const col = dc(iv.d);
            const tile = document.createElement('div');
            tile.className = 'ambc-tile';
            
            // Dynamic theme background and borders
            if (iv.type === 'current') {
                tile.style.background = col + '22';
                tile.style.border = '2px solid ' + col;
                tile.style.padding = '11px 7px';
            } else {
                tile.style.background = col + '12';
                tile.style.border = '1px solid ' + col + '2b';
            }

            const timeEl = document.createElement('div');
            timeEl.className = 'ambc-tile-time';
            if (iv.t) {
                timeEl.textContent = new Date(iv.t).toLocaleTimeString([], { hour:'2-digit', minute:'2-digit', hour12:false });
            } else {
                timeEl.textContent = '—';
            }

            const circle = document.createElement('div');
            circle.className = 'ambc-tile-circle';
            circle.style.backgroundColor = col;

            const pEl = document.createElement('div');
            pEl.className = 'ambc-tile-price';
            pEl.textContent = (iv.v >= 0 ? '' : '\u2212') + Math.abs(Math.round(iv.v)) + '\u00A2';

            const rEl = document.createElement('div');
            rEl.className = 'ambc-tile-renew';
            rEl.textContent = iv.r != null ? Math.round(iv.r) + '%' : '—';

            tile.appendChild(timeEl);
            tile.appendChild(circle);
            tile.appendChild(pEl);
            tile.appendChild(rEl);
            gridEl.appendChild(tile);
        });

        const scrollEl = document.createElement('div');
        scrollEl.className = 'ambc-scroll';
        scrollEl.appendChild(gridEl);
        wrap.appendChild(scrollEl);

        const force = el => {
            if (!el) return;
            el.style.setProperty('height', 'auto', 'important');
            el.style.setProperty('max-height', 'none', 'important');
            el.style.setProperty('overflow', 'visible', 'important');
        };
        force(card.querySelector('.bubble-button-card-container'));
        force(card.querySelector('.bubble-button'));
        force(card.querySelector('.bubble-container'));
        force(card.querySelector('ha-card'));
        force(card);

        // Safe DOM manipulation & cleanup:
        // Bind scroll event listeners and auto-scroll exactly once per element.
        requestAnimationFrame(() => {
            const curIdx = ivls.findIndex(i => i.type === 'current');
            if (curIdx > 0) {
                const tileWidth = 80;
                scrollEl.scrollLeft = Math.max(0, curIdx * tileWidth - scrollEl.clientWidth * 0.3);
            }

            let dragging = false, startX2 = 0, startScroll = 0;
            scrollEl.addEventListener('pointerdown', e => {
                if (e.pointerType !== 'mouse') return;
                dragging = true; startX2 = e.clientX; startScroll = scrollEl.scrollLeft;
                scrollEl.classList.add('grabbing');
                scrollEl.setPointerCapture(e.pointerId);
            });
            scrollEl.addEventListener('pointermove', e => {
                if (!dragging || e.pointerType !== 'mouse') return;
                scrollEl.scrollLeft = startScroll - (e.clientX - startX2);
            });
            const endDrag = () => { dragging = false; scrollEl.classList.remove('grabbing'); };
            scrollEl.addEventListener('pointerup', endDrag);
            scrollEl.addEventListener('pointerleave', endDrag);
        });

        return '';
    })()}
  editor:
    - name: forecast_entity
      label: "Forecast Sensor Entity (e.g. sensor.amber_general_forecast)"
      selector:
        entity:
          domain: sensor
    - name: price_entity
      label: "Current Price Sensor Entity (e.g. sensor.amber_general_price)"
      selector:
        entity:
          domain: sensor
    - name: title
      label: "Chart Title"
      selector:
        text: {}
    - name: show_renewables
      label: "Show Renewables % next to price"
      selector:
        boolean: {}
    - name: max_bars
      label: "Max Intervals to Show (default 48 = ~4 hrs)"
      selector:
        number:
          min: 12
          max: 288
          step: 6


    editor:
       <img width="448" height="541" alt="image" src="https://github.com/user-attachments/assets/c8b37be9-0420-4b8b-92a0-ab973457c4d8" />

---

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 ❤️