Report archive

Drop-in client-side implementation using JavaScript

The general purpose of the report archive widget is a to provide a overview of a companys published reports

This widget is implemented as a Datablocks widget and uses the Datablocks JS-Loader to load the widget. Where <TOKEN> is a unique Datablocks widget token.

<div id="archive-module"></div>

<script>
    (function(widgets) {
        var url = "https://widget.datablocks.se/api/rose";
        if (!window._MF) {
            var b = document.createElement("script");
            b.type = "text/javascript";
            b.async = true;
            b.src = url + "/assets/js/loader-v5.js";
            document.getElementsByTagName("body")[0].appendChild(b);
		    }
		    window._MF = window._MF || {
            data: [],
            url: url,
            ready: !!0,
            render: function() { window._MF.ready = !0 },
            push: function(w) { window._MF.data.push(w) }
		    };	
		    window._MF.push(widgets);
    })([{
        query:"#archive-module"
        ,widget: "archive"
        ,locale: "sv"
        ,token: "<TOKEN>"
    }]);
</script>

Example

Here are two customer examples of how to implement the report archive.

Nolato

Vestum

Example styling

Bellow is an example of a styled report archive with the used CSS

CSS

/* Change font */
.mfn-archive{
font-family: "EuclidCircularB", sans-serif;
}

/*change width on table */
.mfn-archive table{
    width: 80%
}

/* Font-weight on titles*/
.mfn-archive-header{
font-weight: 700;
}

/* Change height of events */
.mfn-archive-event-heading{
height: 95px;
}

/*Change color of title-background*/
.mfn-archive-year tr:first-of-type td{
background: #001965;
}

/* Change color on icons, find filter here: https://isotropic.co/tool/hex-color-to-css-filter/ */
.mfn-archive img{
    filter: invert(16%) sepia(16%) saturate(6555%) hue-rotate(206deg) brightness(94%) contrast(124%);
}