A repo for getting started with custom visualizations that includes a Highcharts example integration.
-
Install Dependecies.
Using yarn, install all dependencies
yarn install
-
Generate local HTTPS certificate
Using yarn, run the following to generate certificates for serving the custom visualization to Looker:
yarn gen-cert
Enter a country code when asked for country code. All other prompts can be skipped by pressing Enter. This will generate /server/cert.pem and /server/key.pem
-
Enable Google Chrome to allow invalid certificates for resources loaded from localhost
Paste this into Google Chrome URL bar:
chrome://flags/#allow-insecure-localhost
Reference: https://stackoverflow.com/a/31900210
-
Make changes to the source code
-
Compile your code
You need to bundle your code, let's run:
yarn build
Recommended: Webpack can detect changes and build automatically, and Node can serve bundled code from a local HTTPS server:
yarn serve
-
Add visualization to Looker
In Looker, add the visualization according to the official documentation.
This project consists of the following folders and files:
/server
: This directory contains everything necessary for serving the compiled visualization code to Looker during development & testing/server/index.js
: Node script leveraging Express to serve build file over a local HTTPS server./server/static/my-custom-viz.js
: This visualization's minified distribution file (not included in version control).manifest.lkml
: Looker's external dependencies configuration file. The visualization object is defined here.marketplace.json
: A JSON file containing information the marketplace installer uses to set up this project./src
: This directory will contain all of the visualization's source code./src/my-custom-viz.js
: The main source code for the visualization./node_modules
: The directory where all of the modules of code that your project depends on (npm packages) are automatically installed.README.md
: This is a text file containing useful reference information about this visualization.yarn.lock
: Yarn is a package manager alternative to npm. This file serves essentially the same purpose aspackage-lock.json
, just for a different package management system.