datastudio community visualization integration

example/src/App.tsx

@@ -17,7 +17,6 @@ const App = () => {
         <Provider store={store}>
           <Motif
             name='Motif'
-            currency='ETH'
             secondaryTheme={MotifDarkTheme}
             accessors={{
               // getters below are for simple edge

motif-datastudio/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+src/localMessage.js

motif-datastudio/README.md

@@ -0,0 +1,90 @@
+# Usage
+
+```bash
+cd motif-datastudio/
+npm install
+
+# wait...
+
+# start local dev server
+npm run start
+
+# build and push dev version, GCS bucket defined in package.json
+npm run build:dev
+npm run push:dev
+
+# build and push prod version
+npm run build:prod
+npm run push:prod
+```
+
+# Known issues / Quirks
+
+When running `npm run update_message` it outputs `build/index.js` so `src/manifest.json` should point
+`components.resource.js` to a `.js` file, but when running `npm run build:dev` it builds a
+`.jsx` file, so remember to update `manifest.json` to `.jsx` as well. You may need to manually
+delete the misnamed file in Google Cloud Storage because `npm run push:dev` does not appear to first
+clear out the folder.
+
+`src/index.tsx`.`DSCC_IS_LOCAL` is not defined properly by webpack, so we'll just have to do it manually
+each time when switching between `npm run push:dev` and `npm start` for local.
+
+Bundle size is a little large at ~8MB uncompressed. Expectation is 1.6MB from datastudio + 2.8MB from
+base motif. Build options and build tool are entirely different (dscc-scripts / webpack vs react-scripts)
+so this might explain, but still requires a fix for long term.
+
+# How this cylynx-datastudio was _initially_ setup
+
+Install the development environment via `npm`:
+
+```bash
+npx @google/dscc-gen viz # project-name=motif-datastudio, buckets gs://lynx-community-viz/cylynx-motif[-dev]
+cd motif-datastudio      # generated by above command
+npm run start            # fails as of 8 Jan 2021
+```
+
+Known package distribution issue here: https://github.com/googledatastudio/tooling/issues/190
+
+Fix issue by editing `motif-datastudio/webpack.config.js`:
+
+```js
+--- const {getBuildableComponents} = require('@google/dscc-scripts/build/viz/util');
+
+--- const components = getBuildableComponents();
+--- const componentIndexToBuild = Number(process.env.WORKING_COMPONENT_INDEX) || 0;
+--- const component = components[componentIndexToBuild];
+
+--- console.log(`Building ${component.tsFile || component.jsFile}...`);
+
+--- const cssFilePath = path.resolve(__dirname, 'src', component.cssFile || '');
+--- const jsFilePath  = path.resolve(__dirname, 'src', component.jsFile  || '');
++++ const cssFilePath = path.resolve(__dirname, 'src', process.env.npm_package_dsccViz_cssFile || '');
++++ const jsFilePath  = path.resolve(__dirname, 'src', process.env.npm_package_dsccViz_jsFile  || '');
+```
+
+`npm run start` should work now and host a server at http://localhost:8080 , which has the
+following numbered instructions:
+
+1. Edit `motif-datastudio/src/index.json` to declare accepted columns
+
+Also edit `motif-datastudio/src/manifest.json` for metadata / company branding
+
+2. `npm run update_message` which uploads to `gs://lynx-community-viz/cylynx-dev`
+
+But this fails as well. As the error message says, in `package.json`, it's expecting `jsonFile`
+immediately within `dsccViz` key, so remove the containing `components` key / array and try
+again.
+
+In the DataStudio report, add a Community Visualization pointing to the just-uploaded manifest
+path `gs://lynx-community-viz/cylynx-dev/`
+
+In DataStudio, go to View mode and copy the entire JSON text in the newly-added visualisation
+into `cylynx-datastudio/src/localMessage.js` (this file can/should be .gitignored)
+
+Update `cylynx-datastudio/src/index.js` until the visualisation looks right, then deploy
+(automatically to GCS) using:
+
+```bash
+npm run build:dev
+npm run push:dev
+```

motif-datastudio/README_dscc-gen.md

@@ -0,0 +1,119 @@
+# Data Studio Community Visualization Local Development Template
+
+Data Studio [community visualizations][community viz] allow you to write custom
+JavaScript visualizations for [Google Data Studio][datastudio].
+
+## About this template
+
+This template provides
+
+1.  An opinionated workflow for developing community visualizations
+1.  A local development workflow with immediate feedback
+1.  Scripts to manage building and deploying your visualization
+
+### Files included
+
+To develop your visualization, you should be editing the files in the [./src]
+directory.
+
+| File       | Template location   | Documentation        |
+| ---------- | ------------------- | -------------------- |
+| Manifest   | `src/manifest.json` | [manifest reference] |
+| Config     | `src/index.json`    | [config reference]   |
+| JavaScript | `src/index.js`      | [write viz code]     |
+| CSS        | `src/index.css`     | [write css code]     |
+
+## Using this template
+
+To create a new community visualization based on this template, run the command
+
+```bash
+npx @google/dscc-gen viz
+```
+
+After running this command (and answering some prompts), you will have a minimal
+working visualization and have set GCS buckets for a dev and prod version. Edit
+`src/index.js` to see changes.
+
+### Update your local data
+
+1.  Update the dimensions and metrics your visualization requires in
+    `src/index.json`
+1.  Run the command `npm run update_message` to build and deploy your
+    visualization to your "dev" bucket.
+1.  [Create a new report][datastudio] and connect to the dataset you want to use
+    for your sample message.
+1.  Use your "dev bucket" to add this visualization to your report. It will
+    display div with the `data` returned by the [ds-component] helper library.
+1.  Copy the `data` in the visualization and replace the empty object in
+    `src/localData.js`. This is the "local data" that you will develop with.
+
+### Local development workflow
+
+To develop locally:
+
+1.  Change `const LOCAL` to `true` in `src/index.js`.
+1.  Run `npm run start` to start a local server. A browser tab should open with
+    the visualization you just deployed in Data Studio.
+1.  Make changes in `src/index.js` and `src/index.css`, save the changes, and
+    see them reflected in the browser tab.
+
+### Deployment workflow
+
+You should have two deployments of your visualization: a "dev" version, where
+[caching] is disabled and where you normally develop, and a "prod" version,
+where caching is enabled and you only push "finished" visualizations.
+
+To deploy:
+
+1.  Change `const LOCAL` to `false` in `src/index.js`
+1.  Run the appropriate build and push command (see below)
+1.  Load your viz in Data Studio
+
+### Key commands:
+
+To update the message:
+
+```bash
+npm run update_message
+```
+
+Note: The message update script uses the `object` format by default. To update
+the message with the `table` format, change the `-f` parameter `update_message`
+script in `package.json` from `object` to `table`.
+
+Build the "dev" (devMode is true) visualization
+
+```bash
+npm run build:dev
+```
+
+Deploy the "dev" (devMode is true) visualization
+
+```bash
+npm run push:dev
+```
+
+Build the "prod" (devMode is false) visualization
+
+```bash
+npm run build:prod
+```
+
+Deploy the "prod" (devMode is false) visualization
+
+```bash
+npm run push:prod
+```
+
+## Scripts
+
+The `build` and `deploy` scripts can be found in the `./scripts/bin` directory.
+
+[community viz]: http://developers.google.com/datastudio/visualization
+[datastudio]: https://datastudio.google.com
+[manifest reference]: https://http://developers.google.com/datastudio/visualization/manifest-reference
+[config reference]: https://http://developers.google.com/datastudio/visualization/config-reference
+[write viz code]: https://developers.google.com/datastudio/visualization/write-viz
+[ds-component]: https://developers.google.com/datastudio/visualization/library-reference
+[caching]: https://developers.google.com/datastudio/visualization/caching