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.

Veuillez noter 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é où vous pouvez rechercher, déployer et gérer de nombreux types de contenus Looker, tels que Looker BlocksTM, des applications, des visualisations et d'autres plug-ins.

Lorsque la fonctionnalité Marketplace de Looker est activée, les clients de Looker peuvent installer les plug-ins de Looker Marketplace, qui incluent des types de visualisations à 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 mettre à la disposition de tous les clients Looker via Looker Marketplace, procédez comme suit:

  1. Développez 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à répertoriée sur Marketplace ou en tant que visualisation native de Looker.)

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, à l'aide du texte
    "Cette visualisation Looker est distribuée avec la licence suivante:...".

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

  • Fichier JavaScript (.js) : il contient une version condensée du code JavaScript que vous avez utilisé pour créer votre visualisation. Avec Marketplace, les fichiers JS 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 (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 Marketplace, l'emplacement de image_uri, un slogan décrivant le cas d'utilisation de la visualisation, et qui définit également les constantes de champ Marketplace saisies par l'utilisateur 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 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 le fonctionnement de la visualisation

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

  1. Accédez à l'onglet "Explorer" ou "Explorer".
  2. Si vous consultez 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 Save (Enregistrer) pour enregistrer la modification dans le style. Notez tous les tableaux de bord susceptibles d'être concernés par ce changement.

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

Function Requis
Compatibilité avec l'affichage détaillé Yes
Possibilité d'hériter des palettes de couleurs de Looker Yes
Réactivité face à la taille du navigateur et de l'écran Yes
Famille de polices cohérente : font-family : Helvetica, Arial, sans-serif Yes
Dimensionnement des polices Yes
Possibilité d'activer les options Libellés de valeur et Libellés d'axe dans le panneau de configuration de la visualisation Yes
Visualisation de données croisées Oui (le cas échéant)
La visualisation est mise à jour en fonction de l'interactivité de l'utilisateur à l'aide de la fonction updateAsync ou de is update function. Yes
Messages d'erreur clairs (par exemple, cette visualisation nécessite une dimension et deux mesures) Yes
Toutes les options du panneau de configuration de la visualisation apportent une modification apparente à la visualisation Yes
Utilisation de la mise en forme du champ value par défaut Oui (le cas échéant)
Une erreur est renvoyée lorsqu'une requête ne renvoie aucun résultat. Yes

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.