Développer une visualisation personnalisée pour le Marketplace Looker

Cette page explique comment créer un type de visualisation personnalisé pouvant être ajouté à la place de marché Looker 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.

Veuillez noter que vous devez être membre du réseau de partenaires Looker ou client Looker pour envoyer du contenu à Marketplace Looker.

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

Lorsque la fonctionnalité Marketplace 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 rendre disponible pour tous les clients Looker via 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 ou en tant que visualisation Looker native.

Développez votre visualisation personnalisée en JavaScript à l'aide de l'API Looker Visualisation 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 LICENCE: liste 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 générer votre visualisation. Avec Marketplace, les fichiers JS sont inclus dans le projet, ce qui permet une gestion des versions et des packages appropriées.

  • Fichier manifeste (manifest.lkml): spécifie un id (un identifiant unique) et un label (affichés 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 de fiche (marketplace.json) : configure la fiche Marketplace pour la visualisation personnalisée et inclut un libellé qui indique comment la visualisation s'y affiche, l'emplacement du image_uri, un slogan décrivant le cas d'utilisation de la visualisation et définit également les constantes des champs 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 visualisation LookML sur 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 vers un nouveau dépôt:

  1. Créez un dépôt GitHub accessible publiquement.
  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 dans votre instance Looker:

  1. Accédez à la présentation ou à l'exploration.
  2. Si vous êtes sur une présentation, cliquez sur Modifier pour la 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 tous les tableaux de bord susceptibles d'être concernés par ce changement.

Looker a besoin des fonctions suivantes dans les visualisations disponibles dans le Marketplace Looker:

Fonction Requis
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é vis-à-vis du navigateur et de 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 des valeurs 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)
Mises à jour de la visualisation en fonction de l'interactivité des utilisateurs à 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 modifient la visualisation Oui
Utilisation par défaut de la mise en forme value du champ 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 à la Marketplace Looker pour créer des documents justificatifs pour votre visualisation, envoyez votre visualisation à l'équipe Looker pour examen et publiez votre visualisation sur Marketplace Looker.