export Azure Data Explorer chart output as a PNG

adx-hc-export.js

'use strict';

(() => {
  let filename = 'adx-' + Date.now() + '.png';

  let lightModeBg = 'white';
  let darkModeBg = '#1b1a19';

  let dl = (url, name) => {
    let link = document.createElement('a');
    link.href = url;
    link.download = name;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  let mode = '';
  let bc = document.body.className.split(' ');
  if (bc.indexOf('kweThemeLight') >= 0) mode = 'light';
  if (bc.indexOf('kweThemeDark') >= 0) mode = 'dark';

  let el = document.getElementsByClassName('highcharts-root');
  if (el.length === 0) {
    alert("highcharts-root element not found");
    return;
  }

  let svgE = el[0];
  let blob = window.URL.createObjectURL(new Blob([svgE.outerHTML], {type: 'image/svg+xml;charset=utf-8'}));
  let {width, height} = svgE.getBBox();
  let image = new Image();
  let dpi = window.devicePixelRatio;
  image.onload = () => {
    let canvas = document.createElement('canvas');
    canvas.width = width * dpi; canvas.height = height * dpi;

    let ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(image, 0, 0, width * dpi, height * dpi);

    if (mode === 'light' || mode === 'dark') {
      ctx.globalCompositeOperation = 'destination-over'
      ctx.fillStyle = mode === 'light' ? lightModeBg : darkModeBg;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    dl(canvas.toDataURL(), filename);
  };
  image.src = blob;
})();