Initial commit.

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 datenguide
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,16 @@
+# Datenguideguide
+
+Datenguideguide is a graphical query builder for datenguide. 
+
+It allows users to build queries without knowledge of GraphQL, 
+generates the corresponding GraphQL query and returns the JSON 
+result from datenguide.
+
+Built at [Wahlsalon 2019](https://datengui.de/wahlsalon/)
+
+## Getting started
+
+* Clone the repository
+* `yarn install`
+* `yarn dev`
+* The app will be running at [http://localhost:3000](http://localhost:3000)

package.json

@@ -0,0 +1,90 @@
+{
+  "name": "datenguide-wdc",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "apollo-cache-inmemory": "^1.5.1",
+    "apollo-client": "^2.5.1",
+    "apollo-link-http": "^1.5.14",
+    "bootstrap": "^4.3.1",
+    "classnames": "^2.2.6",
+    "flexsearch": "^0.6.22",
+    "graphql": "^14.1.1",
+    "graphql-tag": "^2.10.1",
+    "lodash": "^4.17.11",
+    "node-fetch": "^2.3.0",
+    "node-sass": "^4.11.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.5",
+    "react-dom": "^16.8.5",
+    "react-redux": "^6.0.1",
+    "react-scripts": "2.1.8",
+    "react-select": "^2.4.2",
+    "reactstrap": "^8.0.0",
+    "redux": "^4.0.1",
+    "redux-form": "^8.1.0",
+    "redux-starter-kit": "^0.4.3",
+    "redux-thunk": "^2.3.0",
+    "unfetch": "^4.1.0"
+  },
+  "devDependencies": {
+    "eslint-config-airbnb": "17.1.0",
+    "eslint-config-prettier": "4.1.0",
+    "eslint-loader": "2.1.2",
+    "eslint-plugin-babel": "5.3.0",
+    "eslint-plugin-cypress": "^2.2.1",
+    "eslint-plugin-import": "2.16.0",
+    "eslint-plugin-jsx-a11y": "6.2.1",
+    "eslint-plugin-prettier": "3.0.1",
+    "eslint-plugin-react": "7.12.4",
+    "prettier": "^1.16.4"
+  },
+  "scripts": {
+    "dev": "react-scripts start",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "airbnb",
+      "prettier",
+      "prettier/react"
+    ],
+    "parserOptions": {
+      "ecmaVersion": 7
+    },
+    "plugins": [
+      "cypress"
+    ],
+    "parser": "babel-eslint",
+    "globals": {
+      "Teikei": true
+    },
+    "rules": {
+      "no-extra-semi": 2,
+      "semi": 0,
+      "react/jsx-filename-extension": 0,
+      "jsx-a11y/href-no-hash": [
+        0
+      ]
+    },
+    "env": {
+      "browser": true,
+      "node": true,
+      "jest": true,
+      "cypress/globals": true
+    }
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>datenguideguide</title>
+<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.js" type="text/javascript"></script>-->
+<!--    <script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>-->
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

src/components/App/index.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import Navbar from '../Navbar'
+import {Row, Col, Container, Button} from 'reactstrap'
+
+import './styles.scss'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import RegionSelector from '../../containers/RegionSelector'
+import DataSelector from '../../containers/DataSelector'
+import Results from '../../containers/Results'
+
+const App = () => (
+  <div className="dg-app">
+    <Navbar />
+    <Container fluid  className="dg-app__container">
+    <Row>
+      <Col md={6}>
+        <RegionSelector />
+        <DataSelector />
+      </Col>
+      <Col md={6}>
+        <Results/>
+      </Col>
+    </Row>
+    </Container>
+  </div>
+)
+
+export default App

src/components/App/styles.scss

@@ -0,0 +1,24 @@
+html,
+body,
+#root,
+.dg-app {
+  height: 100%;
+}
+
+.dg-app {
+  &__container {
+    height: 100%;
+    .row {
+      height: 100%;
+    }
+  }
+  &__wrapper {
+    width: 100%;
+  }
+  &__go {
+    margin-top: 20px;
+    padding-top: 20px;
+    float: right;
+    width: 150px;
+  }
+}

src/components/Navbar/index.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+import {
+  Collapse,
+  Navbar,
+  NavbarToggler,
+  NavbarBrand,
+  Nav,
+  NavItem,
+  NavLink,
+} from 'reactstrap'
+
+import './styles.scss'
+
+class ConnectorNavbar extends Component {
+  constructor(props) {
+    super(props)
+
+    this.toggle = this.toggle.bind(this)
+    this.state = {
+      isOpen: false
+    }
+  }
+
+  toggle() {
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
+  }
+
+  render() {
+    return (
+      <Navbar className="dg-navbar" light expand="md">
+        <NavbarBrand href="/">datenguideguide</NavbarBrand>
+        <NavbarToggler onClick={this.toggle} />
+        <Collapse isOpen={this.state.isOpen} navbar>
+          <Nav className="ml-auto" navbar>
+            <NavItem>
+              <NavLink href="https://github.com/reactstrap/reactstrap">
+                GitHub
+              </NavLink>
+            </NavItem>
+          </Nav>
+        </Collapse>
+      </Navbar>
+    )
+  }
+}
+
+export default ConnectorNavbar

src/components/Navbar/styles.scss

@@ -0,0 +1,3 @@
+.dg-navbar {
+  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.4);
+}

src/containers/DataSelector/ducks.js

@@ -0,0 +1,64 @@
+/*  __
+___( o)>
+\ <_. )
+ `---'
+*/
+
+import { createSlice } from 'redux-starter-kit'
+import _ from 'lodash'
+import { actions as resultActions } from '../Results/ducks'
+
+const slice = createSlice({
+  slice: 'dataselector',
+  initialState: {},
+  reducers: {}
+})
+
+export const { reducer } = slice
+
+const mapAttributeArguments = args => {
+  if (args.length === 0) {
+    return ''
+  }
+  const arglist = Object.keys(args)
+    .reduce((acc, curr) => {
+      acc.push(
+        `${curr}: ${JSON.stringify(
+          _.isArray(args[curr]) ? args[curr].map(a => a.value) : args[curr]
+        )}`
+      )
+      return acc
+    }, [])
+    .join(', ')
+    .replace(/"/g, '')
+  return arglist ? `(${arglist})` : ''
+}
+
+const mapValueAttributes = attributes =>
+  attributes.map(
+    attribute => `
+      ${attribute.valueattribute.value}${mapAttributeArguments(
+      _.pickBy(attribute, (value, key) => key !== 'valueattribute')
+    )}{
+        year
+        value
+      }`
+  )
+
+const getGraphQLQuery = values =>
+  `
+  {
+    region(id: "${values.region.value}"){
+      id
+      name${mapValueAttributes(values.valueattributes)}    
+    }
+  }
+  `
+
+export const actions = {
+  ...slice.actions,
+  getData: () => (dispatch, getState) => {
+    const query = getGraphQLQuery(getState().form.dataselector.values)
+    dispatch(resultActions.fetchData(query))
+  }
+}