Développement d'une visualisation personnalisée pour le Marketplace Looker

Cette page explique comment créer un type de visualisation personnalisé qui peut être ajouté à la Place de marché Looker et auquel d'autres utilisateurs Looker peuvent accéder. Vous pouvez également créer une visualisation personnalisée directement dans votre projet sans la mettre à la disposition d'autres clients Looker.

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

Le Marketplace Looker est un emplacement centralisé pour la recherche, le déploiement et la gestion de nombreux types de contenus Looker, tels que les Looker BlocksTM, les applications, les visualisations et d'autres plug-ins.

Lorsque la fonctionnalité Marketplace 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.

Pour développer une visualisation personnalisée et la mettre à la disposition de tous les clients Looker via le Marketplace Looker, 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. (Vérifiez que cette visualisation n'est pas déjà listée dans Marketplace ni en tant que visualisation Looker native.)

Développez votre visualisation personnalisée en JavaScript à l'aide de l'API Looker Visualization 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 la ou les licences avec lesquelles la visualisation est distribuée, avec le texte suivant:

    This Looker visualization is distributed with the following license:...

  • Fichier README.md: fournit une description de votre visualisation, son fonctionnement et toute information supplémentaire.

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

  • Fichier manifeste (manifest.lkml): spécifie un id (identifiant unique) et un label (affichés dans l'UI de 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 de fiche (marketplace.json) : configure la fiche Marketplace de la visualisation personnalisée et inclut un libellé indiquant comment la visualisation s'affichera sur la place de marché, l'emplacement du image_uri, un slogan qui décrit le cas d'utilisation de la visualisation et les constantes des champs Marketplace que les utilisateurs saisissent 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 sur un dépôt GitHub accessible au public. Si vous avez créé la visualisation dans un projet Looker, procédez comme suit pour la transférer vers un nouveau dépôt :

  1. Créez un dépôt GitHub accessible au public.
  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 la fonctionnalité de la visualisation

Testez la nouvelle visualisation en l'appliquant à une exploration ou à une présentation appropriée de votre instance Looker:

  1. Accédez à la présentation ou à l'exploration.
  2. Si vous êtes sur un look, cliquez sur Modifier pour le modifier.
  3. Cliquez sur le menu à trois points dans le menu du type de visualisation pour ouvrir la liste déroulante des visualisations.
  4. Sélectionnez votre visualisation personnalisée.
  5. Cliquez sur Enregistrer pour enregistrer les modifications apportées à la présentation. Notez les tableaux de bord susceptibles d'être concernés par ce changement.

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

Fonction Obligatoire
Prise en charge de l'analyse détaillée de la visualisation Oui
Possibilité d'hériter des palettes de couleurs de Looker Oui
Réactivité face au navigateur et à la taille de l'écran Oui
Famille de polices cohérente: font-family: Helvetica, Arial, sans-serif Oui
Dimensionnement de la police Oui
Possibilité d'activer ou de désactiver Étiquettes de valeur et Étiquettes d'axe dans le panneau de configuration de la visualisation Oui
Visualisation de données croisées Oui (le cas échéant)
Mises à jour de la visualisation en fonction de l'interactivité de l'utilisateur à l'aide de la fonction updateAsync ou de is update function Oui
Messages d'erreur clairs (par exemple, Cette visualisation nécessite une dimension et deux mesures) Oui
Toutes les options du panneau de configuration de la visualisation entraînent une modification apparente de la visualisation Oui
Utilisation de la mise en forme 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 au Marketplace Looker pour créer la documentation de référence de votre visualisation, l'envoyer à l'équipe Looker pour examen et la publier sur le Marketplace Looker.