Comment intégrer un tableau de bord dans une application ?

Prérequis

Afin de pouvoir suivre ce guide, il faut préalablement avoir créé un tableau de bord.

Ce chapitre détaille l'intégration du composant dans une application Nuxt en Vue2 et en Vue3.

Vue2

Informations

Si vous avez déjà configuré une application Nuxt pour intégrer les composants AP4, vous pouvez passer à la section 'Importer et intégrer le composant'.

Créer une application Nuxt

Dans un premier temps créons un projet Nuxt vierge.

npm -g install nuxi

Initialisons un nouveau projet :

npx nuxi init dashboard-vue2 -t v2
cd dashboard-vue2
npm install

Installons ensuite @nuxtjs/proxy pour accéder à l'API d'AP4 :

npm install @nuxtjs/proxy@2.1.0

Configurons le fichier nuxt.config.js de la manière suivante :

export default {
  ssr: false,
  target: "server",

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: ["@nuxtjs/proxy"],

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: ["@nuxtjs/proxy"],

  proxy: {
    "/api/v2/**": {
      target: "http://localhost:8080",
    },
  },
};

Importer et intégrer le composant

Ajoutons la librairie des composants graphiques du module Dashboard à nos dépendances :

npm install @anakeen/dashboard

Créons maintenant une nouvelle page Dashboard :

touch pages/Dashboard.vue

Et importons le composant DashboardViewer :

<template>
  <div class="dashboard-container">
    <dashboard-viewer dashboard="dashboard_direction" />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import DashboardViewer from "@anakeen/dashboard/components/libVue2/DashboardViewer.esm";

export default Vue.extend({
  components: {
    "dashboard-viewer": DashboardViewer,
  },
});
</script>

<style>
.dashboard-container {
  width: 100%;
  height: 100%;
}
</style>

La propriété dashboard doit contenir la référence du tableau de bord que l'on souhaite afficher, ici dashboard_direction.

Informations

Pour voir la liste des propriétés du composant, veuillez consulter le manuel de référence.

Démarrons le serveur de développement pour voir le résultat :

npm run dev

Le tableau de bord peut maintenant être visualisé à l'adresse suivante : http://localhost:3000/dashboard.

Attention

L'authentification est déléguée à AP4, il est nécessaire d'être connecté à AP4 en tant que membre de la direction pour visualiser le tableau de bord.

Informations

Pour importer les types du composant DashboardViewer :

import type { DashboardViewerType } from "@anakeen/dashboard/components/libVue2/DashboardViewer.esm";

Vue3

Informations

Si vous avez suivi la partie Vue2 vous pouvez passer à la section 'Et ensuite ?'.

Créer une application Nuxt

Dans un premier temps créons un projet Nuxt vierge.

npm -g install nuxi

Initialisons un nouveau projet :

npx nuxi init dashboard-vue3 -t v3
cd dashboard-vue3
npm install
mkdir pages

Configurons le fichier nuxt.config.ts de la manière suivante :

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  ssr: false,
  vite: {
    server: {
      proxy: {
        "/api/v2": {
          target: "http://localhost:8080",
          changeOrigin: true,
        },
      },
    },
  },
  components: true,
});

Importer et intégrer le composant

Modifions app.vue pour avoir le rendu de nos pages :

<template>
  <div>
    <NuxtPage />
  </div>
</template>

Ajoutons la librairie des composants graphiques du module Dashboard à nos dépendances :

npm install @anakeen/dashboard

Créons maintenant une nouvelle page Dashboard :

touch pages/Dashboard.vue

Et importons le composant DashboardViewer :

<template>
  <div class="dashboard-container">
    <dashboard-viewer dashboard="dashboard_direction" />
  </div>
</template>
<script lang="ts">
import DashboardViewer from "@anakeen/dashboard/components/libVue3/DashboardViewer.esm";

export default {
  components: {
    "dashboard-viewer": DashboardViewer,
  },
};
</script>
<style>
.dashboard-container {
  width: 100%;
  height: 100vh;
}
</style>

La propriété dashboard doit contenir la référence du tableau de bord que l'on souhaite afficher, ici dashboard_direction.

Informations

Pour voir la liste des propriétés du composant, veuillez consulter le manuel de référence.

Démarrons le serveur de développement pour voir le résultat :

npm run dev

Le tableau de bord peut maintenant être visualisé à l'adresse suivante : http://localhost:3000/dashboard.

Attention

L'authentification est déléguée à AP4, il est nécessaire d'être connecté à AP4 en tant que membre de la direction pour visualiser le tableau de bord.

Informations

Pour importer les types du composant DashboardViewer :

import type { DashboardViewerType } from "@anakeen/dashboard/components/libVue3/DashboardViewer.esm";

Et ensuite ?

Bravo vous avez terminé le How To du module Dashboard ! 🎉