bubbles.css

/* MEDIAPLAYER */
.bubble-background {
  background-color: ${state === 'playing' ? 'green' : 'transparent'} !important;
  opacity: ${state === 'playing' ? '0.8' : '0.5'} !important;
  filter: ${state === 'playing' ? 'blur(50px)' : 'blur(50px)'};
}


/* MEDIAPLAYER RO */
ha-card .bubble-button-card-container {
  background-color: ${state === 'playing' ? 'green' : 'transparent'} !important;
}

ha-card .bubble-name {
  color: white !important;
}

ha-card .bubble-state {
  color: white !important;
}

buienradar.yml

type: custom:apexcharts-card
header:
  show: true
  title: Regenradar (komende 2 uur)
  show_states: false
graph_span: 2h
span:
  start: minute
now:
  show: true
  label: Nu
apex_config:
  chart:
    height: 250px
  xaxis:
    labels:
      format: HH:mm
  yaxis:
    - min: 0
      max: 255
      tickAmount: 4
      labels:
        formatter: |
          EVAL:function(value) {
            if (value === 0) return 'Droog';
            if (value < 77) return 'Licht';
            if (value < 128) return 'Matig';
            return 'Zwaar';
          }
  plotOptions:
    bar:
      columnWidth: 90%
  dataLabels:
    enabled: false
  tooltip:
    y:
      formatter: |
        EVAL:function(value) {
          if (value === 0) return 'Geen regen';
          if (value < 77) return 'Lichte regen';
          if (value < 128) return 'Matige regen';
          return 'Zware regen';
        }
series:
  - entity: sensor.buienradar_raw_data
    type: column
    name: Regenintensiteit
    color: '#3498db'
    data_generator: |
      const state = entity.state;
      const dataPoints = state.split(' ');
      const now = new Date();
      
      return dataPoints.map(point => {
        const [intensity, time] = point.split('|');
        const [hours, minutes] = time.split(':');
        const pointDate = new Date(now);
        pointDate.setHours(parseInt(hours));
        pointDate.setMinutes(parseInt(minutes));
        pointDate.setSeconds(0);
        
        return [pointDate.getTime(), parseInt(intensity)];
      });