Développer une visualisation personnalisée pour Looker Marketplace

Cette page explique comment créer un type de visualisation personnalisé pouvant être ajouté à Looker Marketplace et accessible par d'autres utilisateurs de Looker. Vous pouvez également créer une visualisation personnalisée directement dans votre projet sans la mettre à la disposition des autres clients Looker.

Notez que vous devez être membre du réseau de partenaires Looker ou client Looker pour envoyer du contenu à la place de marché Looker.

Looker Marketplace est un emplacement centralisé qui permet de rechercher, de déployer et de gérer de nombreux types de contenus Looker, tels que Looker BlocksTM, des applications, des visualisations et d'autres plug-ins.

Lorsque la fonctionnalité Place de marché de Looker est activée, les clients Looker peuvent installer des plug-ins Looker Marketplace, qui incluent des types de visualisation à ajouter à la bibliothèque de visualisation native de Looker. Les visualisations installées via Marketplace sont compatibles avec l'équipe Looker.

Pour développer une visualisation personnalisée et la rendre disponible pour tous les clients Looker via Marketplace, procédez comme suit:

  1. Développer une visualisation
  2. Créez un projet Looker pour la visualisation.
  3. Transférez le projet Looker vers un dépôt Git.
  4. Testez le fonctionnement de la visualisation.
  5. Envoyez votre visualisation à Looker.

Développer un type de visualisation

Identifiez le type de visualisation que vous souhaitez développer. (Confirmez que cette visualisation n'est pas déjà listée sur Marketplace ou en tant que visualisation Looker native.)

Développez votre visualisation personnalisée en JavaScript à l'aide de l'API Looker Visualizer avec votre environnement JavaScript.

Créer un projet Looker pour la visualisation

Créez un projet Looker pour représenter votre visualisation personnalisée. Le projet doit contenir les fichiers suivants:

  • Fichier LICENSE: répertorie les licences avec lesquelles la visualisation est distribuée, avec le texte
    "Cette visualisation Looker est distribuée avec la licence suivante:...".

  • Fichier README.md: fournit une description de votre visualisation, de son fonctionnement et d'autres informations.

  • Fichier JavaScript (.js) : contient une version condensée du code JavaScript que vous avez utilisé pour créer votre visualisation. Avec Marketplace, des fichiers JavaScript sont inclus dans le projet, ce qui permet une gestion des versions et des packages appropriée.

  • Fichier manifeste (manifest.lkml): spécifie un id (identifiant unique) et un label (indiqué dans l'UI Looker pour cette visualisation). Exemple :

    constant: vis_id {
        value: "default_id"
        export: override_optional
    }
    constant: vis_label {
        value: "default_label"
        export: override_optional
    }
    visualization: {
        id: "@{vis_id}"
        label: "@{vis_label}"
        file: "my_local.js"
        sri_hash: "my_sri_hash"
        dependencies: []
    }
  • Fichier List (marketplace.json) : configure la fiche Marketplace pour la visualisation personnalisée et inclut un libellé indiquant comment la visualisation s'affichera dans Marketplace, l'emplacement de image_uri, un slogan décrivant le cas d'utilisation de la visualisation et les constantes de champ Marketplace saisies par les utilisateurs lors de l'installation. Exemple :
{
  "label": "Gauge Visualization",
  "category_label": "plug-ins",
  "branding": {
    "image_uri": "https://marketplace-api.looker.com/visualization-screenshots/gauge_icon.png",
    "tagline": "Use the Gauge visualization to display a measure and progress to a goal."
  },
   "constants": {
        "vis_label": {
            "label": "Visualization Label",
            "description": "This label will appear in the visualization selector in the Looker Explore UI."
        },
        "vis_id": {
            "label": "Visualization Id",
            "description": "This must be a unique ID across all visualizations.",
            "value_constraint": "visualization"
        }
    }
}

Transférer le projet vers Git

Hébergez votre LookML de visualisation dans un dépôt GitHub accessible publiquement. Si vous avez créé la visualisation dans un projet Looker, procédez comme suit pour la transférer dans un nouveau dépôt:

  1. Créez un dépôt GitHub publiquement accessible.
  2. Définissez l'URL du dépôt de votre projet Looker sur l'URL de votre dépôt GitHub.
  3. Suivez les invites Git dans Looker pour valider, valider et déployer votre code en production.

Tester le fonctionnement de la visualisation

Testez la nouvelle visualisation en l'appliquant à l'instance Explorer ou Look de votre instance Looker:

  1. Accédez à l'onglet "Explorer" ou "Explorer".
  2. Si vous utilisez un style, cliquez sur Modifier pour le modifier.
  3. Cliquez sur le menu à trois points dans le menu "Type de visualisation" pour ouvrir la liste déroulante des visualisations.
  4. Sélectionnez votre visualisation personnalisée.
  5. Cliquez sur Enregistrer pour enregistrer la modification apportée au style. Notez tous les tableaux de bord susceptibles d'être concernés par ce changement.

Looker requiert les fonctions suivantes dans les visualisations disponibles depuis Looker Marketplace:

Fonction Requis
Compatibilité avec l'affichage détaillé dans la visualisation Oui
Possibilité d'hériter les palettes de couleurs de Looker Oui
Réactivité au navigateur et à la taille de l'écran Oui
Famille de polices cohérente: font-family: Helvetica, Arial, sans-serif Oui
Taille de la police Oui
Possibilité d'activer et de désactiver les libellés de valeur et les libellés d'axe dans le panneau de configuration de la visualisation Oui
Visualisation de données croisées Oui (le cas échéant)
Mise à jour de la visualisation en fonction de l'interactivité de l'utilisateur avec la fonction updateAsync ou is update function Oui
Supprimer les messages d'erreur (par exemple, Cette visualisation requiert une dimension et deux mesures) Oui
Toutes les options du panneau de configuration de la visualisation apportent une modification apparente à la visualisation Oui
Utilisation du format value du champ par défaut Oui (le cas échéant)
Une erreur est générée lorsqu'une requête ne renvoie aucun résultat. Oui

Envoyer la visualisation pour examen

Une fois que votre visualisation est prête à être envoyée, suivez les instructions de la section Envoyer du contenu à Looker Marketplace pour créer des documents justificatifs, envoyez votre visualisation à l'équipe Looker pour examen, puis publiez-la sur Looker Marketplace.