Exportar PNG/JPG Saiku

Exportar PNG/JPG Saiku

  abril 14, 2017    Reynaldo Claros

---

En las ultimas versiones de saiku analytics, en la versión community, al exportar el gráfico generado por las matrices olap, este genera una marca de agua que muchas veces es incomodo.

Otro aspecto es que ese proceso demora demasiado en el servidor.



Aveces hay errores en la exportación, y nos muestra el típico mensaje de que debes contactar con el administrador.





Para solucionar estos problemas, y ahorrarles a saiku a tener que generar la imagen desde el servidor, lo vamos a generar directamente desde la vista.



Para lograr este propósito debemos hacer uso de la librería.



filesaverj.js



Tiene la facilidad de guardar en varios formatos y desde varios formatos. visitar el link para ver mas opciones.



https://github.com/eligrey/FileSaver.js/



Lo que debemos de hacer es modificar 2 archivos.



 - index.html (biserver-ce/pentaho-solutions/system/saiku/ui)

 - plugin.js (biserver-ce/pentaho-solutions/system/saiku/ui/js/saiku/plugins/CCC_Chart)



El concepto es bien simple.



Saiku cada vez que quieres ver un gráfico distinto y clickeas en el gráfico correspondiente, este carga el gráfico y le pasa los datos, y un div donde va mostrar el svg generado por la librería.



Lo que debemos de hacer es tomar el svg y generar el png o jpg según el tipo seleccionado por el usuario.



Ahora vamos a agregar la librería filesaver.js al index.html

<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>

Ahora  agregamos el siguiente método a la clase, justo después en el método exportChart (aunque puede estar en cualquier parte)

download_chart: function (data, x, y, type) {
        /** custom **/
        var width = x;
        var height = y;
        var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
        var url = URL.createObjectURL(svg);
        var img = $('<img />')
                .width(width)
                .height(height)
                .on('load', function () {
                    var canvas = document.createElement('canvas');
                    canvas.width = width;
                    canvas.height = height;
                    var ctx = canvas.getContext('2d');
                    ctx.drawImage(img.get(0), 0, 0);
                    canvas.toBlob(function (blob) {
                        saveAs(blob, "Grafico de datos." + type);
                    });
                });
        img.attr('src', url);
    },

Ahora debemos hacer una interrupción a la ejecución del método y enviar al método que acabamos de definir los parámetros necesarios para la conversión debida.

exportChart: function (type) {
        var svgContent = new XMLSerializer().serializeToString($('svg')[0]);
        var rep = '<svg xmlns="http://www.w3.org/2000/svg" ';
        if (svgContent.substr(0, rep.length) != rep) {
            svgContent = svgContent.replace('<svg ', rep);
        }
  this.download_chart(svgContent, $('svg').width(), $('svg').width(), type);
  /*
        svgContent = '<!DOCTYPE svg [<!ENTITY nbsp "&#160;">]>' + svgContent;
         var form = $('#svgChartPseudoForm');
         form.find('.type').val(type);
         form.find('.svg').val(svgContent);
         if (this.workspace.query.name != undefined) {
         var f = this.workspace.query.name.substring(this.workspace.query.name.lastIndexOf('/') + 1)

.slice(0, -6);
         form.find('.name').val(f);
         }
         form.attr('action', Settings.REST_URL + this.workspace.query.url() + 

escape("/../../export/saiku/chart"));
         form.submit();*/
        return false;
    },

Con esto ya podemos actualizar y al momento de exportar nuestros gráficos, este debe generarse sin problemas.



Adjunto el vídeo donde se realiza de manera dinámica.

Saludos.