function encodeChartSpec(series) {
  try {
    const raw = JSON.stringify(series || []);
    return btoa(raw).replace(/\+/g,'-').replace(/\//g,'_').replace(/=+$/,'');
  } catch (_) { return ''; }
}

function decodeChartSpec(encoded) {
  try {
    const padded = String(encoded || '').replace(/-/g,'+').replace(/_/g,'/').padEnd(Math.ceil(String(encoded || '').length / 4) * 4, '=');
    const value = JSON.parse(atob(padded));
    return Array.isArray(value) ? value.filter(item => typeof item === 'string').slice(0, 16) : [];
  } catch (_) { return []; }
}

function historyEntityOptions() {
  const zones = app.zones.map(zone => `<option value="${esc(zone.id)}">${esc(zone.name)}</option>`).join('');
  const devices = app.devices.map(device => `<option value="${esc(device.id)}">${esc(device.name)}</option>`).join('');
  const entities = [...new Set([
    ...app.historyData.sensors.map(row => row.entity_id),
    ...app.zones.map(zone => zone.ha_entity_id).filter(Boolean),
    app.settings?.home_assistant?.outdoor_entity_id,
  ].filter(Boolean))].sort();
  const sensors = entities.map(entity => `<option value="${esc(entity)}">${esc(haSensorLabel(entity))}</option>`).join('');
  return {zones, devices, sensors, entities};
}

function renderHistoryNavigation() {
  $$('#historyTabs [data-history-tab]').forEach(button => button.classList.toggle('active', button.dataset.historyTab === app.historyTab));
  const host = $('#historyContextControls'); if (!host) return;
  const options = historyEntityOptions();
  if (app.historyTab === 'zones') {
    host.innerHTML = `<label><span>${esc(tr('common.zone'))}</span><select id="historyZoneSelect"><option value="all">${esc(tr('history.allZones'))}</option>${options.zones}</select></label>`;
    const select=$('#historyZoneSelect'); if ([...select.options].some(option=>option.value===app.historyZone)) select.value=app.historyZone;
  } else if (app.historyTab === 'devices') {
    host.innerHTML = `<label><span>${esc(tr('common.device'))}</span><select id="historyDeviceSelect"><option value="all">${esc(tr('history.allDevices'))}</option>${options.devices}</select></label>`;
    const select=$('#historyDeviceSelect'); if ([...select.options].some(option=>option.value===app.historyDevice)) select.value=app.historyDevice;
  } else if (app.historyTab === 'sensors') {
    host.innerHTML = `<label><span>${esc(tr('history.haSensor'))}</span><select id="historySensorSelect"><option value="all">${esc(tr('history.allSensors'))}</option>${options.sensors}</select></label>`;
    const select=$('#historySensorSelect'); if ([...select.options].some(option=>option.value===app.historySensor)) select.value=app.historySensor;
  } else if (app.historyTab === 'custom') {
    host.innerHTML = `<span class="history-context-hint">${esc(tr('history.customHint'))}</span>`;
  } else {
    host.innerHTML = `<span class="history-context-hint">${esc(tr('history.overviewHint'))}</span>`;
  }
}

async function loadHistory() {
  if (app.historyLoading) return;
  app.historyLoading = true;
  const hours = $('#historyHours')?.value || '24';
  try {
    const data = await api(`/api/history?scope=overview&hours=${encodeURIComponent(hours)}&limit=20000`);
    app.historyData = {zones:data.zones || [], devices:data.devices || [], sensors:data.sensors || []};
    app.historyCounts = data.counts || {};
    renderHistoryNavigation();
    renderHistoryPage();
    if (app.currentView === 'history') updateBrowserUrl(currentHistoryPath(), true);
  } catch (error) {
    toast(error.message, true);
    renderHistoryPage();
  } finally { app.historyLoading = false; }
}

const HISTORY_COLORS = ['--accent','--info','--warning','--purple','--danger','--teal','--orange','--blue'];
const MAX_CHART_ZOOM = 16;
const chartRuntime = new Map();

function chartSeriesKey(item, index) {
  return item.key || `${index}:${item.label}`;
}

function isChartSeriesHidden(chartId, item, index) {
  return !!app.chartHiddenSeries[chartId]?.[chartSeriesKey(item,index)];
}

function setChartSeriesHidden(chartId, item, index, hidden) {
  if (!app.chartHiddenSeries[chartId]) app.chartHiddenSeries[chartId] = {};
  const key = chartSeriesKey(item,index);
  if (hidden) app.chartHiddenSeries[chartId][key] = true;
  else delete app.chartHiddenSeries[chartId][key];
}

function updateChartZoomControls(id) {
  const canvas=document.getElementById(id);
  const card=canvas?.closest('.history-chart-card');
  if(!card) return;
  const zoom=clamp(Number(app.chartZooms[id] || 1),1,MAX_CHART_ZOOM);
  const reset=card.querySelector('[data-chart-zoom="reset"]');
  const out=card.querySelector('[data-chart-zoom="out"]');
  const zoomIn=card.querySelector('[data-chart-zoom="in"]');
  if(reset) reset.textContent=`${Math.round(zoom*100)}%`;
  if(out) out.disabled=zoom<=1;
  if(zoomIn) zoomIn.disabled=zoom>=MAX_CHART_ZOOM;
}

function redrawHistoryChart(id) {
  const runtime=chartRuntime.get(id);
  const canvas=document.getElementById(id);
  if(!runtime || !canvas) return;
  canvas.dataset.chartZoom=String(clamp(Number(app.chartZooms[id] || 1),1,MAX_CHART_ZOOM));
  drawLineChart(canvas,runtime.series,runtime.rows,runtime.options);
  renderLegend(document.getElementById(`${id}Legend`),runtime.series);
  updateChartZoomControls(id);
}

function setChartZoom(id, value, anchorRatio=null, anchorViewportX=null) {
  const canvas=document.getElementById(id);
  const wrap=canvas?.parentElement;
  if(!canvas || !wrap) return;
  const oldWidth=canvas.getBoundingClientRect().width || 1;
  const ratio=Number.isFinite(anchorRatio) ? clamp(anchorRatio,0,1) : clamp((wrap.scrollLeft+wrap.clientWidth/2)/oldWidth,0,1);
  const viewportX=Number.isFinite(anchorViewportX) ? anchorViewportX : wrap.clientWidth/2;
  const next=clamp(Number(value) || 1,1,MAX_CHART_ZOOM);
  app.chartZooms[id]=next;
  redrawHistoryChart(id);
  const nextCanvas=document.getElementById(id);
  const nextWrap=nextCanvas?.parentElement;
  if(!nextCanvas || !nextWrap) return;
  const nextWidth=nextCanvas.getBoundingClientRect().width || 1;
  const previousBehavior=nextWrap.style.scrollBehavior;
  nextWrap.style.scrollBehavior='auto';
  nextWrap.scrollLeft=Math.max(0,ratio*nextWidth-viewportX);
  nextWrap.style.scrollBehavior=previousBehavior;
}

function cssColor(name, fallback) {
  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
  return value || fallback;
}

function timeLabel(ts, hours) {
  const options = Number(hours) > 48 ? {day:'2-digit', month:'2-digit', hour:'2-digit'} : {hour:'2-digit', minute:'2-digit'};
  return new Date(ts).toLocaleString(locale(), options);
}

function prepareCanvas(canvas, height) {
  const rect = canvas.getBoundingClientRect();
  const wrapWidth = Math.floor(canvas.parentElement?.clientWidth || rect.width || 720);
  const zoom = clamp(Number(canvas.dataset.chartZoom || 1), 1, 4);
  const width = Math.max(720, Math.floor(Math.max(720, wrapWidth) * zoom));
  const dpr = window.devicePixelRatio || 1;
  canvas.width = width * dpr; canvas.height = height * dpr;
  canvas.style.width = `${width}px`; canvas.style.height = `${height}px`;
  const ctx = canvas.getContext('2d'); ctx.setTransform(dpr,0,0,dpr,0,0);
  ctx.clearRect(0,0,width,height);
  return {ctx,width,height};
}

function drawEmptyChart(canvas, height=340) {
  if (!canvas) return;
  const {ctx,width} = prepareCanvas(canvas,height);
  ctx.fillStyle = cssColor('--muted','#888'); ctx.font = '13px system-ui'; ctx.textAlign='center';
  ctx.fillText(tr('history.noData'), width/2, height/2);
  const wrap=canvas.parentElement;
  const tooltip=wrap?.querySelector('.chart-tooltip');
  const line=wrap?.querySelector('.chart-hover-line');
  if(tooltip) tooltip.hidden=true;
  if(line) line.hidden=true;
  canvas.onpointermove=null; canvas.onpointerleave=null; canvas.onpointerdown=null; canvas.onpointerup=null; canvas.onpointercancel=null; canvas.onkeydown=null;
}

function chartPreciseTime(timestamp) {
  return new Intl.DateTimeFormat(locale(), {
    year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit', second:'2-digit'
  }).format(new Date(timestamp));
}

function nearestPoint(points, targetTs) {
  if (!points.length) return null;
  let lo=0, hi=points.length-1;
  while(lo<hi){
    const mid=Math.floor((lo+hi)/2);
    if(points[mid].ts < targetTs) lo=mid+1; else hi=mid;
  }
  const after=points[lo];
  const before=lo>0?points[lo-1]:null;
  if(!before) return after;
  return Math.abs(before.ts-targetTs) <= Math.abs(after.ts-targetTs) ? before : after;
}

function formatChartTooltipValue(item, point, binaryLabels) {
  if (!point || !Number.isFinite(point.value)) return '—';
  if (typeof item.tooltipValue === 'function') return String(item.tooltipValue(point.value, point.row));
  const formatted = Number(point.value).toLocaleString(locale(), {minimumFractionDigits:1, maximumFractionDigits:2});
  return binaryLabels ? formatted : `${formatted} °C`;
}

function bindChartTooltip(canvas, series, sortedRows, geometry) {
  const wrap=canvas?.parentElement;
  const tooltip=wrap?.querySelector('.chart-tooltip');
  const line=wrap?.querySelector('.chart-hover-line');
  const selection=wrap?.querySelector('.chart-selection');
  if(!canvas || !wrap || !tooltip || !line) return;

  const {pad,width,height,firstTs,lastTs,binaryLabels}=geometry;
  const plotWidth=width-pad.left-pad.right;
  const timestamps=[...new Set(sortedRows.map(row=>new Date(row.timestamp).getTime()).filter(Number.isFinite))].sort((a,b)=>a-b);
  const timestampPoints=timestamps.map(ts=>({ts,value:ts}));
  const pointsBySeries=series.map(item=>({
    item,
    points:sortedRows.map(row=>({row,ts:new Date(row.timestamp).getTime(),value:item.value(row)}))
      .filter(point=>Number.isFinite(point.ts)&&Number.isFinite(point.value))
      .sort((a,b)=>a.ts-b.ts)
  }));
  const touches=new Map();
  let drag=null;
  let pinch=null;
  let touchPan=null;

  const hide=()=>{ tooltip.hidden=true; line.hidden=true; };
  const hideSelection=()=>{ if(selection) selection.hidden=true; };
  const canvasX=clientX=>{
    const rect=canvas.getBoundingClientRect();
    return clamp(clientX-rect.left,pad.left,width-pad.right);
  };
  const showAtTimestamp=(targetTs)=>{
    if(!timestamps.length) return hide();
    const snapped=nearestPoint(timestampPoints,targetTs)?.ts;
    if(!Number.isFinite(snapped)) return hide();
    const px=pad.left + (snapped-firstTs)/Math.max(1,lastTs-firstTs)*plotWidth;
    const values=pointsBySeries.map(({item,points})=>({item,point:nearestPoint(points,snapped)})).filter(entry=>entry.point);
    if(!values.length) return hide();

    $$('.chart-tooltip').forEach(node=>{ if(node!==tooltip) node.hidden=true; });
    $$('.chart-hover-line').forEach(node=>{ if(node!==line) node.hidden=true; });
    tooltip.innerHTML=`<strong class="chart-tooltip-time">${esc(chartPreciseTime(snapped))}</strong><div class="chart-tooltip-values">${values.map(({item,point})=>{
      const sampleTime=Math.abs(point.ts-snapped)>1000?`<small class="chart-tooltip-sample-time">${esc(chartPreciseTime(point.ts))}</small>`:'';
      return `<div class="chart-tooltip-row"><span class="chart-tooltip-label"><i style="--tooltip-color:${esc(item.color)}"></i><span>${esc(item.label)}</span></span><span class="chart-tooltip-value">${esc(formatChartTooltipValue(item,point,binaryLabels))}${sampleTime}</span></div>`;
    }).join('')}</div>`;
    tooltip.hidden=false;
    line.hidden=false;
    line.style.left=`${px}px`;
    line.style.top=`${pad.top}px`;
    line.style.height=`${Math.max(0,height-pad.top-pad.bottom)}px`;

    const minLeft=wrap.scrollLeft+8;
    const maxLeft=wrap.scrollLeft+wrap.clientWidth-tooltip.offsetWidth-8;
    let tooltipLeft=px+12;
    if(tooltipLeft+tooltip.offsetWidth>wrap.scrollLeft+wrap.clientWidth-8) tooltipLeft=px-tooltip.offsetWidth-12;
    tooltip.style.left=`${Math.max(minLeft,Math.min(tooltipLeft,Math.max(minLeft,maxLeft)))}px`;
    tooltip.style.top=`${pad.top+8}px`;
    canvas.dataset.chartHoverTs=String(snapped);
  };

  const showFromClientX=(clientX)=>{
    const localX=canvasX(clientX);
    const targetTs=firstTs + ((localX-pad.left)/Math.max(1,plotWidth))*(lastTs-firstTs);
    showAtTimestamp(targetTs);
  };

  const updateSelection=(currentX)=>{
    if(!drag || !selection) return;
    const left=Math.min(drag.startX,currentX);
    const right=Math.max(drag.startX,currentX);
    drag.lastX=currentX;
    drag.moved=Math.abs(right-left)>=7;
    if(!drag.moved) return hideSelection();
    selection.hidden=false;
    selection.style.left=`${left}px`;
    selection.style.width=`${Math.max(1,right-left)}px`;
    selection.style.top=`${pad.top}px`;
    selection.style.height=`${Math.max(0,height-pad.top-pad.bottom)}px`;
  };

  canvas.onpointerdown=event=>{
    if(event.pointerType==='mouse'){
      if(event.button!==0) return;
      const startX=canvasX(event.clientX);
      drag={pointerId:event.pointerId,startX,lastX:startX,moved:false};
      hide(); hideSelection();
      canvas.setPointerCapture?.(event.pointerId);
      event.preventDefault();
      return;
    }
    if(event.pointerType==='touch'){
      touches.set(event.pointerId,{x:event.clientX,y:event.clientY});
      if(touches.size===1){
        touchPan={pointerId:event.pointerId,startX:event.clientX,startY:event.clientY,scrollLeft:wrap.scrollLeft,moved:false};
        showFromClientX(event.clientX);
      }
      if(touches.size===2){
        touchPan=null;
        const points=[...touches.values()];
        const distance=Math.hypot(points[0].x-points[1].x,points[0].y-points[1].y);
        const midX=(points[0].x+points[1].x)/2;
        const rect=canvas.getBoundingClientRect();
        const wrapRect=wrap.getBoundingClientRect();
        pinch={
          startDistance:Math.max(1,distance),
          startZoom:clamp(Number(app.chartZooms[canvas.id] || 1),1,MAX_CHART_ZOOM),
          baseWidth:(rect.width||width)/clamp(Number(app.chartZooms[canvas.id] || 1),1,MAX_CHART_ZOOM),
          anchorRatio:clamp((midX-rect.left)/Math.max(1,rect.width),0,1),
          viewportX:clamp(midX-wrapRect.left,0,wrap.clientWidth),
          previewZoom:clamp(Number(app.chartZooms[canvas.id] || 1),1,MAX_CHART_ZOOM),
        };
        hide();
        event.preventDefault();
      }
    }
  };

  canvas.onpointermove=event=>{
    if(event.pointerType==='mouse' && drag?.pointerId===event.pointerId){
      updateSelection(canvasX(event.clientX));
      event.preventDefault();
      return;
    }
    if(event.pointerType==='touch' && touches.has(event.pointerId)){
      touches.set(event.pointerId,{x:event.clientX,y:event.clientY});
      if(pinch && touches.size>=2){
        const points=[...touches.values()].slice(0,2);
        const distance=Math.hypot(points[0].x-points[1].x,points[0].y-points[1].y);
        pinch.previewZoom=clamp(pinch.startZoom*(distance/pinch.startDistance),1,MAX_CHART_ZOOM);
        const previewWidth=pinch.baseWidth*pinch.previewZoom;
        canvas.style.width=`${previewWidth}px`;
        wrap.scrollLeft=Math.max(0,pinch.anchorRatio*previewWidth-pinch.viewportX);
        const reset=canvas.closest('.history-chart-card')?.querySelector('[data-chart-zoom="reset"]');
        if(reset) reset.textContent=`${Math.round(pinch.previewZoom*100)}%`;
        event.preventDefault();
      } else if(touchPan?.pointerId===event.pointerId && touches.size===1){
        const dx=event.clientX-touchPan.startX;
        const dy=event.clientY-touchPan.startY;
        if(Math.abs(dx)>6 && Math.abs(dx)>Math.abs(dy)){
          touchPan.moved=true;
          hide();
          wrap.scrollLeft=Math.max(0,touchPan.scrollLeft-dx);
          event.preventDefault();
        }
      }
      return;
    }
    showFromClientX(event.clientX);
  };

  const finishPointer=event=>{
    if(event.pointerType==='mouse' && drag?.pointerId===event.pointerId){
      const currentX=canvasX(event.clientX);
      const selectedWidth=Math.abs(currentX-drag.startX);
      const center=(currentX+drag.startX)/2;
      const moved=drag.moved && selectedWidth>=12;
      drag=null; hideSelection();
      try{ canvas.releasePointerCapture?.(event.pointerId); }catch(_){}
      if(moved){
        const currentZoom=clamp(Number(app.chartZooms[canvas.id] || 1),1,MAX_CHART_ZOOM);
        const factor=Math.max(1,wrap.clientWidth/Math.max(1,selectedWidth));
        setChartZoom(canvas.id,currentZoom*factor,center/Math.max(1,width),wrap.clientWidth/2);
      }else showFromClientX(event.clientX);
      return;
    }
    if(event.pointerType==='touch'){
      const wasPan=touchPan?.pointerId===event.pointerId ? touchPan : null;
      touches.delete(event.pointerId);
      if(pinch && touches.size<2){
        const completed=pinch;
        pinch=null;
        setChartZoom(canvas.id,completed.previewZoom,completed.anchorRatio,completed.viewportX);
      } else if(wasPan && !wasPan.moved) showFromClientX(event.clientX);
      if(touches.size===0) touchPan=null;
    }
  };

  canvas.onpointerup=finishPointer;
  canvas.onpointercancel=event=>{
    if(event.pointerType==='mouse' && drag?.pointerId===event.pointerId){ drag=null; hideSelection(); }
    if(event.pointerType==='touch'){
      touches.delete(event.pointerId);
      if(touchPan?.pointerId===event.pointerId) touchPan=null;
      if(pinch && touches.size<2){
        const completed=pinch;
        pinch=null;
        setChartZoom(canvas.id,completed.previewZoom,completed.anchorRatio,completed.viewportX);
      } else hide();
    }
  };
  canvas.onpointerleave=event=>{ if(event.pointerType!=='touch' && !drag) hide(); };
  canvas.onkeydown=event=>{
    if(!['ArrowLeft','ArrowRight'].includes(event.key) || !timestamps.length) return;
    event.preventDefault();
    const current=Number(canvas.dataset.chartHoverTs);
    let index=Number.isFinite(current)?timestamps.findIndex(ts=>ts===current):-1;
    if(index<0) index=event.key==='ArrowRight'?0:timestamps.length-1;
    else index=clamp(index+(event.key==='ArrowRight'?1:-1),0,timestamps.length-1);
    showAtTimestamp(timestamps[index]);
  };
}

function drawLineChart(canvas, series, rows, {height=340, minValue=null, maxValue=null, binaryLabels=false}={}) {
  if (!canvas) return;
  const options={height,minValue,maxValue,binaryLabels};
  if(canvas.id) chartRuntime.set(canvas.id,{series,rows,options});
  const visibleSeries=series.filter((item,index)=>!isChartSeriesHidden(canvas.id,item,index));
  if (!rows.length || !visibleSeries.length) return drawEmptyChart(canvas, height);
  const sortedRows = [...rows].sort((a,b)=>new Date(a.timestamp)-new Date(b.timestamp));
  const {ctx,width} = prepareCanvas(canvas,height);
  const text=cssColor('--muted','#888'), grid=cssColor('--grid','#333');
  const pad={left:54,right:20,top:20,bottom:42};
  const allValues=[];
  visibleSeries.forEach(item => sortedRows.forEach(row => { const value=item.value(row); if(Number.isFinite(value)) allValues.push(value); }));
  if (!allValues.length) return drawEmptyChart(canvas,height);
  let min = minValue == null ? Math.floor(Math.min(...allValues)-1) : minValue;
  let max = maxValue == null ? Math.ceil(Math.max(...allValues)+1) : maxValue;
  if (max-min < 2) { min-=1; max+=1; }
  const firstTs = new Date(sortedRows[0].timestamp).getTime();
  const lastTs = new Date(sortedRows[sortedRows.length-1].timestamp).getTime();
  const span = Math.max(1,lastTs-firstTs);
  const x = row => pad.left + (new Date(row.timestamp).getTime()-firstTs)/span*(width-pad.left-pad.right);
  const y = value => pad.top + (max-value)/(max-min)*(height-pad.top-pad.bottom);
  ctx.font='10px system-ui'; ctx.fillStyle=text; ctx.strokeStyle=grid; ctx.lineWidth=1;
  for(let i=0;i<=5;i++){
    const value=min+(max-min)*i/5, py=y(value);
    ctx.beginPath();ctx.moveTo(pad.left,py);ctx.lineTo(width-pad.right,py);ctx.stroke();
    ctx.textAlign='right'; ctx.fillText(binaryLabels ? value.toFixed(0) : `${value.toFixed(1)}°`,pad.left-8,py+3);
  }
  const ticks=5;
  for(let i=0;i<=ticks;i++){
    const idx=Math.min(sortedRows.length-1,Math.round(i*(sortedRows.length-1)/ticks)); const px=x(sortedRows[idx]);
    ctx.textAlign='center'; ctx.fillText(timeLabel(sortedRows[idx].timestamp,$('#historyHours')?.value),px,height-14);
  }
  visibleSeries.forEach(item => {
    ctx.beginPath(); ctx.strokeStyle=item.color; ctx.lineWidth=item.width||2; ctx.setLineDash(item.dash||[]);
    let started=false, prev=null;
    sortedRows.forEach(row => {
      const value=item.value(row); if(!Number.isFinite(value)) return;
      const px=x(row),py=y(value);
      if(!started||prev===null){ctx.moveTo(px,py);started=true;}
      else if(item.step){ctx.lineTo(px,y(prev));ctx.lineTo(px,py);} else ctx.lineTo(px,py);
      prev=value;
    });
    ctx.stroke(); ctx.setLineDash([]);
  });
  bindChartTooltip(canvas,visibleSeries,sortedRows,{pad,width,height,firstTs,lastTs,binaryLabels});
}

function renderLegend(host, series) {
  if (!host) return;
  const chartId=host.id.replace(/Legend$/,'');
  host.innerHTML=series.map((item,index)=>{
    const hidden=isChartSeriesHidden(chartId,item,index);
    const title=tr(hidden?'history.legendShow':'history.legendHide',{name:item.label});
    return `<button type="button" class="legend-item${hidden?' is-hidden':''}" data-chart-id="${esc(chartId)}" data-chart-legend="${index}" aria-pressed="${hidden?'false':'true'}" title="${esc(title)}"><i class="legend-line" style="--legend-color:${esc(item.color)}"></i><span>${esc(item.label)}</span></button>`;
  }).join('');
}

function historyChartMarkup(id, title, hint, compact=false) {
  const zoom = clamp(Number(app.chartZooms[id] || 1), 1, MAX_CHART_ZOOM);
  const percent = Math.round(zoom * 100);
  return `<div class="panel chart-panel history-chart-card"><div class="chart-title-row"><div><h3>${esc(title)}</h3><p>${esc(hint || '')}</p><small class="chart-hover-hint">${esc(tr('history.hoverHint'))}</small></div><div class="chart-zoom-controls" aria-label="${esc(tr('history.zoomControls'))}"><button type="button" data-chart-zoom="out" data-chart-id="${esc(id)}" title="${esc(tr('history.zoomOut'))}" ${zoom<=1?'disabled':''}>−</button><button type="button" class="chart-zoom-reset" data-chart-zoom="reset" data-chart-id="${esc(id)}" title="${esc(tr('history.zoomReset'))}">${percent}%</button><button type="button" data-chart-zoom="in" data-chart-id="${esc(id)}" title="${esc(tr('history.zoomIn'))}" ${zoom>=MAX_CHART_ZOOM?'disabled':''}>+</button></div></div><div class="chart-wrap ${compact?'compact-chart':''}"><canvas id="${esc(id)}" data-chart-zoom="${zoom}" width="1000" height="${compact?300:420}" tabindex="0" aria-label="${esc(title)}"></canvas><div class="chart-hover-line" hidden></div><div class="chart-selection" hidden></div><div class="chart-tooltip" hidden></div></div><div class="legend" id="${esc(id)}Legend"></div></div>`;
}

function historySeriesColor(index) {
  return cssColor(HISTORY_COLORS[index % HISTORY_COLORS.length], `hsl(${(index*67)%360} 68% 55%)`);
}