¿Cómo crear una aplicación de informes con Vue 3 y la API de composición?

Vue es un marco front-end de JavaScript de código abierto para crear la interfaz de usuario para sitios web y aplicaciones. Las características principales son una arquitectura progresivamente adaptable que se centra en la representación declarativa y la composición de componentes. No hace mucho tiempo, Vue lanzó una nueva versión: Vue 3. El marco actualizado tiene algunas características nuevas, en particular la API de composición.

Enfoque: en este artículo, crearemos una aplicación de informes con Vue 3 y la API de composición. Para un proyecto, usaremos las bibliotecas Flexmonster Pivot Table & Charts y Highcharts, ya que tienen una integración con Vue 3. El equipo de Flexmonster ha creado un proyecto de muestra especial en GitHub donde puede verificar el uso de su componente con las versiones 2 y 3 de Vue.js, así como la integración de Highcharts. Este proyecto también contiene ejemplos del uso de la API de opciones y composición.

En primer lugar, crearemos el proyecto Vue ingresando el comando CLI. Luego agregaremos una instancia de Flexmonster a la página web, la conectaremos a la biblioteca de gráficos y luego agregaremos los gráficos. 

Ahora veamos la implementación paso a paso sobre cómo crear una aplicación en Vue 3.

Requisito previo: para trabajar con Vue, necesitará Node.js y npm. Para verificar su presencia en su máquina, ejecute el siguiente comando en la línea de comandos:

node -v
npm -v

Si están ausentes, instálelos.

Use este comando para instalar Vue CLI:

npm install -g @vue/cli

Otra herramienta requerida es Flexmonster CLI. Puedes instalarlo usando npm:

npm install -g flexmonster-cli

Luego instale Highcharts a través de npm:

​​npm i --save vue3-highcharts

Paso 1: Cree una aplicación Vue simple.

vue create first-project
cd first-project

Después de esto, podrá elegir un ajuste preestablecido para su proyecto. Elegiremos el predeterminado.

La estructura del proyecto debería verse así:

Paso 3: instale el módulo Flexmonster Vue ejecutando este comando CLI desde la carpeta con package.json.

flexmonster add vue-flexmonster

Ahora registrará localmente vue-flexmonster . Para hacerlo, agrego el siguiente código en la sección <script> del componente donde necesitas la tabla dinámica:

import Pivot from "vue-flexmonster/vue3";
import 'flexmonster/flexmonster.css';
import { defineComponent, ref } from 'vue';
export default defineComponent({
    setup() {
        let pivot = ref(null);
        return {
            pivot,
        }
    }
});

Agregue la instancia de la tabla dinámica a un componente de Vue al incluir el módulo Pivot en la sección <template> del componente elegido:

<template>
    <div id="app">
        <Pivot
             ref="pivot"
             toolbar
             v-bind:height="600"
             v-bind:report=
"https://cdn.flexmonster.com/github/demo-report.json"
             v-bind:reportcomplete="reportComplete"
             // license key parameter for charts integration
             v-bind:licenseFilePath=
"https://cdn.flexmonster.com/jsfiddle.charts.key">
      </Pivot>
    </div>
</template>

Paso 4: importe gráficos a la aplicación Vue 3 y agregue un conector especial y varios métodos al script que ayudarán con la comunicación entre los gráficos y la cuadrícula dinámica.

import Highcharts from "highcharts";
import "flexmonster/lib/flexmonster.highcharts";
methods: {
  drawChart: function () {
   this.$refs.pivot.flexmonster.highcharts.getData(
     {
       
     // here we define the type of the chart
       type: "bar",
     },
     function (data) {
       Highcharts.chart("highcharts-container", data);
     },
     function (data) {
       Highcharts.chart("highcharts-container", data);
     }
   );
 },
 reportComplete: function () {
   this.$refs.pivot.flexmonster.off("reportcomplete");
   this.drawChart();
 },
}

Para mostrar los gráficos en la página, colocaremos un contenedor con Highcharts debajo de la tabla dinámica en la etiqueta de la plantilla para que se vea así:

<template>
  <div>
    <Pivot
      ref="pivot"
      toolbar
      v-bind:height="600"
      v-bind:report="
https://cdn.flexmonster.com/github/demo-report.json"
      v-bind:reportcomplete="reportComplete"
      v-bind:shareReportConnection="{
        url: 'https://olap.flexmonster.com:9500',
      }"
      v-bind:beforetoolbarcreated="customizeToolbar"
      v-bind:licenseFilePath="
https://cdn.flexmonster.com/jsfiddle.charts.key">
    </Pivot>
      
      
    <div class="chart-container">
      <div id="highcharts-container"></div>
    </div>
      
      
  </div>
</template>

Paso para ejecutar la aplicación:  Abra la terminal y ejecute el proyecto usando el comando.

npm run serve

Salida: El resultado se verá en http://localhost:8080/ en su navegador.

Ejemplo de una aplicación de informes con Vue 3