examples: Words of Open Source (#4058)

* examples: Words of Open Source

* Migrate to cube-example-wrapper

Author: igorlukanin

examples/words-of-open-source/cube.js

@@ -0,0 +1,9 @@
+module.exports = {
+  orchestratorOptions: {
+    queryCacheOptions: {
+      queueOptions: {
+        concurrency: 20
+      }
+    }
+  }
+};

examples/words-of-open-source/dashboard-app/.env

@@ -0,0 +1,2 @@
+CUBE_API=https://emerald-llama.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1
+CUBE_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjEwMDAwMDAwMDAsImV4cCI6NTAwMDAwMDAwMH0.OHZOpOBVKr-sCwn8sbZ5UFsqI3uCs6e4omT7P6WVMFw

examples/words-of-open-source/dashboard-app/.gitignore

@@ -0,0 +1,3 @@
+.parcel-cache
+dist
+node_modules

examples/words-of-open-source/dashboard-app/.netlify/state.json

@@ -0,0 +1,3 @@
+{
+	"siteId": "11f75d70-722b-4fa7-930e-613486360bc9"
+}

examples/words-of-open-source/dashboard-app/package.json

@@ -0,0 +1,15 @@
+{
+  "devDependencies": {
+    "parcel": "^2.2.1"
+  },
+  "dependencies": {
+    "@cubejs-client/core": "^0.29.23",
+    "@cubejs-client/react": "^0.29.24",
+    "cube-example-wrapper": "^1.0.20",
+    "date-fns": "^2.28.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "recharts": "^2.1.8"
+  },
+  "license": "MIT"
+}

examples/words-of-open-source/dashboard-app/src/App.js

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react'
+import { AreaChart, Area, XAxis, ResponsiveContainer } from 'recharts';
+import { fetchData } from './api'
+import * as classes from './App.module.css'
+
+export function App() {
+  const [ word, setWord ] = useState("FOSDEM")
+  const [ data, setData ] = useState([])
+
+  useEffect(() => {
+    fetchData(word).then(data => setData(data))
+  }, [ word ])
+
+  return (
+    <>
+      <div className={classes.root}>
+        <div className={classes.inputWrapper}>
+          <input
+            defaultValue={word}
+            onKeyDown={e => e.key === 'Enter' && e.target.value && setWord(e.target.value)}
+            className={classes.input}
+          />
+          <div className={classes.enterSymbol}>↵</div>
+        </div>
+
+        <div className={classes.chartWrapper}>
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart
+              data={data}
+              margin={{ top: 3, right: 20, left: 20 }}
+            >
+              <XAxis
+                dataKey="name"
+                axisLine={false}
+                interval={0}
+                tickSize={0}
+                tickMargin={15}
+              />
+              <Area
+                type="basis"
+                dataKey="data"
+                stroke="#c93324"
+                fill="#eddedd"
+                strokeWidth={3}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </>
+  )
+}

examples/words-of-open-source/dashboard-app/src/App.module.css

@@ -0,0 +1,35 @@
+.root {
+  font-family: -apple-system, sans-serif;
+  box-sizing: border-box;
+  margin: auto;
+  padding: 0px 25px 50px;
+  text-align: center;
+  width: 90%;
+}
+
+.inputWrapper {
+  display: grid;
+  grid-template-columns: 1fr min-content;
+  margin: 0 auto;
+  width: 40%;
+  min-width: 300px;
+}
+
+.input {
+  border: 2px solid #ccc;
+  color: #333;
+  font-size: 20px;
+  padding: 7px 10px;
+  outline: none;
+}
+
+.enterSymbol {
+  font-size: 20px;
+  position: relative;
+  top: 30%;
+  left: 30%;
+}
+
+.chartWrapper {
+  height: 400px;
+}

examples/words-of-open-source/dashboard-app/src/api.js

@@ -0,0 +1,69 @@
+import cubejs from '@cubejs-client/core'
+import { format } from 'date-fns'
+
+const cubejsApi = cubejs(
+  process.env.CUBE_TOKEN,
+  { apiUrl: process.env.CUBE_API }
+)
+
+function createQuery(word) {
+  return ({ 
+    measures: [ "Words.count" ],
+    timeDimensions: [{
+      dimension: "Words.timestamp",
+      granularity: "month"
+    }],
+    filters: !word ? [] : [{
+      member: "Words.word",
+      operator: "equals",
+      values: [ word.toLowerCase() ]
+    }]
+  })
+}
+
+function formatDate(date) {
+  let month = format(date, 'MMM')
+  let year = format(date, 'yyyy')
+  return month == 'Jan' ? year : ''
+}
+
+function mapData(data, maxValues) {
+  return maxValues.map(row => {
+    let count = data.find(e => e["Words.timestamp"] === row["Words.timestamp"])
+
+    return ({
+      name: formatDate(new Date(row["Words.timestamp"])),
+      data: !count ? 0 : parseInt(count["Words.count"]) / parseInt(row["Words.count"])
+    })
+  })
+}
+
+let maxValues = undefined
+
+function fetchMaxValue() {
+  return new Promise((resolve, reject) => {
+    if (maxValues) {
+      resolve(maxValues)
+      return
+    }
+
+    cubejsApi
+      .load(createQuery())
+      .then(resultSet => {
+        maxValues = resultSet.rawData()
+        resolve(maxValues)
+      })
+      .catch(reject)
+  })
+}
+
+export function fetchData(word) {
+  return cubejsApi
+    .load(createQuery(word))
+    .then(resultSet => {
+      return fetchMaxValue()
+        .then(maxValues => {
+          return mapData(resultSet.rawData(), maxValues)
+        }) 
+    })
+}

examples/words-of-open-source/dashboard-app/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Words of Open Source</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="index.js"></script>
+  </body>
+</html>

examples/words-of-open-source/dashboard-app/src/index.js

@@ -0,0 +1,15 @@
+import createExampleWrapper from "cube-example-wrapper";
+
+createExampleWrapper({
+  title: "Words of Open Source",
+  text: `
+    <p>Ratio of the number of commits containing a certain word to the total number of commits.</p>
+    <p>Based on the public dataset of <a href="https://console.cloud.google.com/marketplace/product/github/github-repos">GitHub Activity Data</a> and powered by <a href="https://cube.dev">Cube</a>.</p>
+  `,
+});
+
+import ReactDOM from "react-dom";
+import { App } from "./App";
+
+const app = document.getElementById("app");
+ReactDOM.render(<App />, app);