mkdocs-charts-plugin.js

// Adapted from https://github.com/koaning/justcharts/blob/main/justcharts.js
async function fetchSchema(url){
    var resp = await fetch(url);
    var schema = await resp.json();
    return schema
}
 
function checkNested(obj /*, level1, level2, ... levelN*/) {
    var args = Array.prototype.slice.call(arguments, 1);
  
    for (var i = 0; i < args.length; i++) {
      if (!obj || !obj.hasOwnProperty(args[i])) {
        return false;
      }
      obj = obj[args[i]];
    }
    return true;
  }
  


function classnameInParents(el, classname) {
    // check if class name in any parents
    while (el.parentNode) {
        el = el.parentNode;
        if (el.classList === undefined) {
            continue;
        }
        if (el.classList.contains(classname) ){
            return true;
        }
    }
    return false;
}

function findElementInParents(el, classname) {
    while (el.parentNode) {
        el = el.parentNode;
        if (el.classList === undefined) {
            continue;
        }
        if (el.classList.contains(classname) ){
            return el;
        }
    }
    return null;
}

function findProperChartWidth(el) {

    // mkdocs-material theme uses 'md-content'
    var parent = findElementInParents(el, "md-content")
    
    // mkdocs theme uses 'col-md-9'
    if (parent === undefined || parent == null) {
        var parent = findElementInParents(el, "col-md-9")        
    }
    if (parent === undefined || parent == null) {
        // we can't find a suitable content parent
        // 800 width is a good default
        return '800'
    } else {
        // Use full width of parent
        // Should bparent.offsetWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight) e equilavent to width: 100%
        computedStyle = getComputedStyle(parent)
        return parent.offsetWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight) 
    }
}

function updateURL(url) {
    // detect if absolute UR:
    // credits https://stackoverflow.com/a/19709846
    var r = new RegExp('^(?:[a-z]+:)?//', 'i');
    if (r.test(url)) {
        return url;
    }

    // If 'use_data_path' is set to true
    // schema and data urls are relative to
    // 'data_path', not the to current page
    // We need to update the specified URL
    // to point to the actual location relative to current page
    // Example:
    // Actual location data file: docs/assets/data.csv
    // Page: docs/folder/page.md
    // data url in page's schema: assets/data.csv
    // data_path in plugin settings: ""
    // use_data_path in plugin settings: True
    // path_to_homepage: ".." (this was detected in plugin on_post_page() event)
    // output url: "../assets/data.csv"
    if (mkdocs_chart_plugin['use_data_path'] == "True")  {
        new_url = window.location.href
        new_url = new_url.endsWith('/') ? new_url.slice(0, -1) : new_url;
        
        if (mkdocs_chart_plugin['path_to_homepage'] != "") {
            new_url += "/" + mkdocs_chart_plugin['path_to_homepage']
        }

        new_url = new_url.endsWith('/') ? new_url.slice(0, -1) : new_url;
        new_url += "/" + url
        new_url = new_url.endsWith('/') ? new_url.slice(0, -1) : new_url;

        if (mkdocs_chart_plugin['data_path'] != "") {
            new_url += "/" + mkdocs_chart_plugin['data_path']
        }

        return new_url
    }
    return url;
}

var vegalite_charts = [];

function embedChart(block, schema) {

    // Make sure the schema is specified
    let baseSchema = {
        "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    }
    schema = Object.assign({}, baseSchema, schema);

    // If width is not set at all, 
    // default is set to 'container'
    // Note we inserted <vegachart style='width: 100%'>..
    // So 'container' will use 100% width
    if (!('width' in schema)) {
        schema.width = mkdocs_chart_plugin['vega_width']
    }

    // Set default height if not specified
    // if (!('height' in schema)) {
    //     schema.height = mkdocs_chart_plugin['default_height']
    // }

    // charts widths are screwed in content tabs (thinks its zero width)
    // https://squidfunk.github.io/mkdocs-material/reference/content-tabs/?h=
    // we need to set an explicit, absolute width in those cases
    // detect if chart is in tabbed-content:
    if (classnameInParents(block, "tabbed-content")) {
      var chart_width = schema.width || 'notset';
      if (isNaN(chart_width)) {
          schema.width = findProperChartWidth(block);
      }
    }

    // Update URL if 'use_data_path' is configured
    if (schema?.data?.url !== undefined) {
        schema.data.url = updateURL(schema.data.url)
    }
    if (schema?.spec?.data?.url !== undefined) {
        schema.spec.data.url = updateURL(schema.spec.data.url)
    }
    // see docs/assets/data/geo_choropleth.json for example
    if (schema.transform) {
        for (const t of schema.transform) { 
            if (t?.from?.data?.url !== undefined) {
                t.from.data.url = updateURL(t.from.data.url)
            }
        }
    }
    



    // Save the block and schema
    // This way we can re-render the block
    // in a different theme
    vegalite_charts.push({'block' : block, 'schema': schema});

    // mkdocs-material has a dark mode
    // detect which one is being used
    var theme = (document.querySelector('body').getAttribute('data-md-color-scheme') == 'slate') ? mkdocs_chart_plugin['vega_theme_dark'] : mkdocs_chart_plugin['vega_theme'];

    // Render the chart
    vegaEmbed(block, schema, {
        actions: false, 
        "theme": theme, 
        "renderer": mkdocs_chart_plugin['vega_renderer']
    });
}

// Adapted from 
// https://facelessuser.github.io/pymdown-extensions/extensions/superfences/#uml-diagram-example
// https://github.com/koaning/justcharts/blob/main/justcharts.js
const chartplugin = className => {

    // Find all of our vegalite sources and render them.
    const blocks = document.querySelectorAll('vegachart');

    for (let i = 0; i < blocks.length; i++) {

      const block = blocks[i]
      const block_json = JSON.parse(block.textContent);

      // get the vegalite JSON
      if ('schema-url' in block_json) {

        var url = updateURL(block_json['schema-url'])
        fetchSchema(url).then(
            schema => embedChart(block, schema)
        );
      } else {
        embedChart(block, block_json);
      }

    }
  }
  

// mkdocs-material has a dark mode including a toggle
// We should watch when dark mode changes and update charts accordingly

var bodyelement = document.querySelector('body');
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.type === "attributes") {
        
        if (mutation.attributeName == "data-md-color-scheme") {

            var theme = (bodyelement.getAttribute('data-md-color-scheme') == 'slate') ? mkdocs_chart_plugin['vega_theme_dark'] : mkdocs_chart_plugin['vega_theme'];
            for (let i = 0; i < vegalite_charts.length; i++) {
                vegaEmbed(vegalite_charts[i].block, vegalite_charts[i].schema, {
                    actions: false, 
                    "theme": theme, 
                    "renderer": mkdocs_chart_plugin['vega_renderer']
                });
            }
        }

      }
    });
  });
observer.observe(bodyelement, {
attributes: true //configure it to listen to attribute changes
});


// Load when DOM ready
if (typeof document$ !== "undefined") {
    // compatibility with mkdocs-material's instant loading feature 
    document$.subscribe(function() {
        chartplugin("vegalite")
    })
} else {
    document.addEventListener("DOMContentLoaded", () => {chartplugin("vegalite")})
}