googledatastudio · musiciancodes · Jan 24, 2020
diff --git a/barchart-codelab/.gitignore b/barchart-codelab/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+build/
diff --git a/barchart-codelab/README.md b/barchart-codelab/README.md
@@ -0,0 +1,3 @@
+# Community Viz Barchart Codelab
+
+Code for dscc-gen barchart codelab
diff --git a/barchart-codelab/dist/index.html b/barchart-codelab/dist/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Community Viz</title>
+
+</head>
+
+<body>
+  <iframe src="vizframe.html" componentid="abc" width="75%" height="800px">
+  </iframe>
+</body>
+
+</html>
diff --git a/barchart-codelab/dist/vizframe.html b/barchart-codelab/dist/vizframe.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+
+<head>
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+  <style>
+    body {
+      font-family: Roboto;
+    }
+
+    code {
+      background-color: #fdf6e3;
+      color: #586e75;
+    }
+  </style>
+</head>
+
+<body>
+  <script src="main.js"></script>
+  <link rel="stylesheet" href="index.css">
+</body>
+
+</html>
diff --git a/barchart-codelab/package.json b/barchart-codelab/package.json
@@ -0,0 +1,28 @@
+{
+  "dsccViz": {
+    "gcsDevBucket": "gs://yl-viz-dev/barchart-codelab",
+    "gcsProdBucket": "gs://yl-viz-dev/barchart-codelab-prod",
+    "jsFile": "index.js",
+    "jsonFile": "index.json",
+    "cssFile": "index.css",
+    "print": "printMessage.js"
+  },
+  "scripts": {
+    "build:dev": "dscc-scripts viz build -d dev",
+    "prettier": "prettier --write \"**/*.js\"",
+    "build:prod": "dscc-scripts viz build -d prod",
+    "push:dev": "dscc-scripts viz push -d dev",
+    "push:prod": "dscc-scripts viz push -d prod",
+    "update_message": "dscc-scripts viz update_message -f object",
+    "start": "dscc-scripts viz start"
+  },
+  "devDependencies": {
+    "@google/dscc": "^0.3.13",
+    "@google/dscc-scripts": "^1.0.14"
+  },
+  "dependencies": {
+    "d3": "^5.15.0",
+    "d3-array": "^2.4.0",
+    "prettier": "^1.19.1"
+  }
+}
diff --git a/barchart-codelab/src/index.css b/barchart-codelab/src/index.css
diff --git a/barchart-codelab/src/index.js b/barchart-codelab/src/index.js
@@ -0,0 +1,91 @@
+const dscc = require("@google/dscc");
+const d3 = require("d3");
+
+// parse the style value
+const styleVal = (message, styleId) => {
+  if (typeof message.style[styleId].defaultValue === "object") {
+    return message.style[styleId].value.color !== undefined
+      ? message.style[styleId].value.color
+      : message.style[styleId].defaultValue.color;
+  }
+  return message.style[styleId].value !== undefined
+    ? message.style[styleId].value
+    : message.style[styleId].defaultValue;
+};
+
+const drawViz = messsage => {
+  const margin = { left: 20, right: 20, top: 20, bottom: 20 };
+  const height = dscc.getHeight() - 10;
+  const width = dscc.getWidth();
+
+  const chartHeight = height - margin.top - margin.bottom;
+  const chartWidth = width - margin.left - margin.right;
+
+  // remove existing svg
+  d3.select("body")
+    .selectAll("svg")
+    .remove();
+
+  // make a canvas
+  const svg = d3
+    .select("body")
+    .append("svg")
+    .attr("width", width)
+    .attr("height", height);
+
+  // make an svg for the bar chart
+  const chartSvg = svg
+    .append("svg")
+    .attr("x", margin.left)
+    .attr("y", margin.top)
+    .attr("width", chartWidth)
+    .attr("height", chartHeight);
+
+  // xScale to distribute bars
+  const xScale = d3
+    .scaleBand()
+    .domain(messsage.tables.DEFAULT.map(d => d.dimension[0]))
+    .range([0, chartWidth])
+    .paddingInner(0.3);
+
+  // yScale to size bars
+  const yScale = d3
+    .scaleLinear()
+    .domain([0, d3.max(messsage.tables.DEFAULT.map(d => d.metric[0]))])
+    .range([0, chartHeight]);
+
+  // get the user-selected bar color
+  let barColor = styleVal(messsage, "barColor");
+
+  // add bars
+  const bars = chartSvg
+    .append("g")
+    .attr("class", "bars")
+    .selectAll("rect.bars")
+    .data(messsage.tables.DEFAULT)
+    .enter()
+    .append("rect")
+    .attr("x", d => xScale(d.dimension[0]))
+    .attr("y", d => chartHeight - yScale(d.metric[0]))
+    .attr("width", xScale.bandwidth())
+    .attr("height", d => yScale(d.metric[0]))
+    .attr("fill", barColor);
+
+  // add text
+  const text = svg
+    .append("g")
+    .selectAll("text")
+    .data(messsage.tables.DEFAULT)
+    .enter()
+    .append("text")
+    .attr(
+      "x",
+      d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
+    )
+    .attr("y", height - margin.bottom / 4)
+    .attr("text-anchor", "middle")
+    .attr("fill", barColor)
+    .text(d => d.dimension[0]);
+};
+
+dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });
diff --git a/barchart-codelab/src/index.json b/barchart-codelab/src/index.json
@@ -0,0 +1,44 @@
+{
+  "data": [
+    {
+      "id": "concepts",
+      "label": "Concepts",
+      "elements": [
+        {
+          "id": "dimension",
+          "label": "Dimensions",
+          "type": "DIMENSION",
+          "options": {
+            "min": 1,
+            "max": 1
+          }
+        },
+        {
+          "id": "metric",
+          "label": "Metric",
+          "type": "METRIC",
+          "options": {
+            "min": 1,
+            "max": 1
+          }
+        }        
+      ]
+    }
+  ],
+  "style": [
+    {
+      "id": "barStyling",
+      "label": "Bar Styles",
+      "elements": [
+        {
+          "id": "barColor",
+          "label": "Bar Color",
+          "type": "FILL_COLOR",
+          "defaultValue": {
+            "color": "#1E555C"
+          }
+        }
+      ]
+    }
+  ]  
+}
diff --git a/barchart-codelab/src/manifest.json b/barchart-codelab/src/manifest.json
@@ -0,0 +1,23 @@
+{
+  "name": "My Visualizations",
+  "organization": "MyOrg",
+  "description": "My first visualization package.",
+  "logoUrl": "https://logo",
+  "organizationUrl": "https://url",
+  "supportUrl": "https://url",
+  "privacyPolicyUrl": "https://url",
+  "termsOfServiceUrl": "https://url",
+  "packageUrl": "https://url",
+  "devMode": "DEVMODE_BOOL",
+  "components": [
+    {
+      "name": "table",
+      "description": "Simple JavaScript Table",
+      "iconUrl": "https://url",
+      "resource": {
+        "js": "YOUR_GCS_BUCKET/index.js",
+        "config": "YOUR_GCS_BUCKET/index.json"
+      }
+    }
+  ]
+}
diff --git a/barchart-codelab/webpack.config.js b/barchart-codelab/webpack.config.js
@@ -0,0 +1,21 @@
+const path = require("path");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+
+const CSS_FILE = process.env.npm_package_dsccViz_cssFile;
+
+module.exports = [
+  {
+    mode: "development",
+    entry: "./src/index.js",
+    devServer: {
+      contentBase: "./dist"
+    },
+    output: {
+      filename: "main.js",
+      path: path.resolve(__dirname, "dist")
+    },
+    plugins: [
+      new CopyWebpackPlugin([{ from: path.join("src", CSS_FILE), to: "." }])
+    ]
+  }
+];