Développer 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 de 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.

Looker Marketplace est un emplacement centralisé qui permet de rechercher, de déployer et de gérer de nombreux types de contenu Looker, comme des blocs Looker™, des applications, des 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 les fonctionnalités 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 la 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: liste la ou les licences avec lesquelles la visualisation est distribuée, à l'aide du 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 créer votre visualisation. Avec la place de marché, les fichiers JS sont inclus dans le projet, ce qui permet une gestion et une gestion de version appropriées.

  • Fichier manifeste (manifest.lkml): spécifie un id (identifiant unique) et un label (affiché dans l'interface utilisateur 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 pour la visualisation personnalisée et inclut un libellé indiquant comment la visualisation s'affichera dans la place de marché, l'emplacement de image_uri, un slogan décrivant le cas d'utilisation de la visualisation, et définit également les constantes de champ 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 à un look appropriés dans 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 "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 look. Notez les tableaux de bord susceptibles d'être concernés par ce changement.

Looker nécessite ces fonctions dans les visualisations disponibles sur Marketplace Looker:

Fonction Obligatoire
Possibilité d'explorer en détail une visualisation Oui
Possibilité d'hériter des 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
Dimensionnement de la police Oui
Possibilité d'activer/de désactiver les libellés de valeurs et les libellés des axes dans le panneau de configuration de la visualisation Oui
Visualisation des données pivoté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 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 votre visualisation prête à être envoyée, suivez les instructions de la section Envoyer du contenu sur Looker Marketplace pour créer la documentation associée à votre visualisation, l'envoyer à l'équipe Looker pour examen et la publier sur Looker Marketplace.