Custom Visualizations in LookML (Community)

View the original community article here

Last tested: Aug 13, 2020
 

Great news! Visualizations can now be defined in LookML!

Example:

manifest.lkml

visualization: {

id: "unique_id"

label: "MY LABEL"

url: "https://www.url.js"

sri_hash: "my_sri_hash"

file: "bundle.js"

dependencies: ["https://my_dep.js", "https://more_dep.js"]

}

Key notes:

• Regardless of which project defines the visualization, it will be available globally on the instance
• The project must be deployed to production for the visualization to be available
• the id must be unique across all visualizations on the instance (validation will show errors otherwise)
• We can download the files from the custom visualization repos if you are trying to add a viz made my Looker. We just need to download the .js file from the repo and drag and drop it into the LookML IDE and set this as the "file" parameter
• If dependencies are required ,the developer would make that very clear. In most cases, the visualization's source files and dependencies have been bundled into a single distribution file meaning the dependencies property is unneeded and should be left out.
  • A visualization that needs dependencies that aren't included might surface JS errors in the console like d3 was referenced but never defined
• Note: If you decide to download the same viz from Marketplace later, you should delete this manual version or change the label to not conflict in the Viz picker. Also, if you build content with this viz, then delete it, you will have to reselect the Marketplace downloaded viz as the new visualization. Tiles will show just the default table until this is done

Migrating admin vis to LookML Vis

Your admin vis looks something like this.

1. IF you do not already have a project with a manifest for your vis. Go ahead and create that project now.
   1. We recommend using a blank project with no other content besides the manifest.lkml file.
   2. This is more important if you are converting existing vis for the Looker Marketplace
2. You can directly copy each value over the corresponding LookML visualization keyword.
   1. For example Admin Vis will translate to:

visualization: {

id: "test_vis"

label: "Test Vis New"

url: "https://cdn.rawgit.com/looker/visualization-api-examples/master/examples/hello_world/hello_world.js"

sri_hash: ""

dependencies: []

}

3. Save and Validate your manifest
4. Deploy to production
5. IF your project is not connected to git we recommend setting it up so you can version your new LookML
   
   ADDITIONAL STEPS FOR MARKETPLACE CONVERSION BELOW
   sample project:https://github.com/looker/viz-liquid_fill_gauge-marketplace
    
6. For marketplace we want to add a few constants for configuration. Generally, one for Label and ID
7. Update your manifest.lkml to include these constants. It should look something like this.

constant: VIS_LABEL {

value: "Test Vis New"

export: override_optional

}

visualization: {

id: "hello_world"

url: "https://cdn.rawgit.com/looker/visualization-api-examples/master/examples/hello_world/hello_world.js"

label: "@{VIS_LABEL}"

dependencies: []

}

8. Add a corresponding marketplace.json file so that the Marketplace Installer knows how to present the configuration UI.

{

"label": "Liquid Gauge Visualization",

"category_idl": "visualizations",

"branding": {

"image_uri": "https://wwwstatic-a.lookercdn.com/blocks/logos/aws.png",

"tagline": "Visualize a single value with a neat Liquid Gauge."

},

"constants": {

"VIS_LABEL": {

"description": "This will be shown in the UI",

"label": "Visualization Label"

}

},

}

You need the branding and label to match that of the listing in the marketplace_backend for validation purposes.

9. If you want, you can also set a value constraint for ID. Although, this is no longer required.

When you eventually run the installation it should look something like this during the configuration

9. Now that you have the proper files and constants setup, go to the repository that your new LookML vis exists on
10. Grab the git:// url and the commit sha for the version you want to publish to the marketplace.
11. Follow the instructions for adding a new listing: https://github.com/looker/marketplace-backend#adding-a-new-listing
12. Make a PR to add your new listing
    1. Make sure the category is set to visualizations

Sample:

import { MarketplaceListing, fileURL } from "../../src/data"

import { category, byLooker } from ".."

const listing: MarketplaceListing = {

id: "liquid_gauge_test",

author: byLooker,

label: "Liquid Gauge Visualization"

branding: {

badge: null,

brand_color: null,

image_uri: "https://wwwstatic-a.lookercdn.com/blocks/logos/aws.png",

tagline: "Visualize a single value with a neat Liquid Gauge."

},

versions: [

{

looker_version: ">=6.21.0",

number: "1.0.0",

project_git_ref: "<< YOUR GIT REF >>",

project_git_uri: "<< YOUR GIT URL >>",

release_notes_md: "- Initial Marketplace Release",

released_at: "2019-06-30T00:00:00+0000"

}

],

metadata_fields: [],

hero_image_uris: [

"https://wwwstatic-a.lookercdn.com/blocks/screenshots/source/redshift_admin_by_aws/1.png"

],

documentation_uri: "https://docs.looker.com/apps/coolzone",

support_uri: "https://docs.looker.com/support/coolzone",

description_md: "This is a port of the existing Liquid Gauge custom visualization into the new Marketplace.",

category: category("visualizations"),

}

export default listing