Merge pull request #62 from RhoInc/add-test-page

add test page and npm script that opens it in all three major browsers
RhoInc · May 2, 2018 · 0e3565c · 0e3565c
2 parents cc70ede + 4e0e70d
commit 0e3565c
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 1 deletion.
diff --git a/build/test-page/index.css b/build/test-page/index.css
@@ -0,0 +1,25 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
+* {
+    padding: 0;
+    margin: 0;
+    font-family: 'Open Sans';
+}
+#title {
+    width: 96%;
+    padding: 0 0 1% 0;
+    border-bottom: 2px solid lightgray;
+    margin: 2% 2% 1% 2%;
+    font-size: 32px;
+    font-weight: normal;
+}
+#subtitle {
+    width: 96%;
+    margin: 0 2% 1% 2%;
+    font-size: 24px;
+    font-weight: lighter;
+}
+#container {
+    width: 96%;
+    margin: 1% 2%;
+    display: inline-block;
+}
diff --git a/build/test-page/index.html b/build/test-page/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Query Overview</title>
+        <meta http-equiv = 'Content-Type' content = 'text/html; charset = utf-8'>
+
+        <script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
+        <script type = 'text/javascript' src = 'https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js'></script>
+        <script type = 'text/javascript' src = 'https://rawgit.com/RhoInc/query-overview/master/build/queryOverview.js'></script>
+
+        <link type = 'text/css' rel = 'stylesheet' href = 'https://rawgit.com/RhoInc/Webcharts/master/css/webcharts.css'>
+        <link type = 'text/css' rel = 'stylesheet' href = './index.css'>
+    </head>
+
+    <body>
+        <div id = 'title'>Query Overview</div>
+        <div id = 'subtitle'>Test Page</div>
+        <div id = 'container'></div>
+    </body>
+
+    <script type = 'text/javascript' src = './index.js'></script>
+</html>
diff --git a/build/test-page/index.js b/build/test-page/index.js
@@ -0,0 +1,23 @@
+//Load local build if in local environment.
+if (window.origin !== 'https://rhoinc.github.io') {
+    var head = document.getElementsByTagName('head')[0];
+    var script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = '../queryOverview.js';
+    head.appendChild(script);
+}
+
+d3.csv(
+    'https://rawgit.com/RhoInc/viz-library/master/data/queries/queries.csv',
+    function(error,data) {
+        if (error)
+            console.log(error);
+
+        var settings = {};
+        var instance = queryOverview(
+            '#container',
+            settings
+        );
+        instance.init(data);
+    }
+);
diff --git a/package.json b/package.json
@@ -11,12 +11,13 @@
     "webcharts": "~1"
   },
   "scripts": {
-    "build": "npm run bundle && npm run format",
+    "build": "npm run bundle && npm run format && npm run build-md && npm run test-page",
     "build-md": "node ./scripts/configuration-markdown.js",
     "bundle": "rollup -c",
     "format": "npm run format-src && npm run format-bundle",
     "format-src": "prettier --print-width=100 --tab-width=4 --single-quote --write \"./src/**/*.js\"",
     "format-bundle": "prettier --print-width=100 --tab-width=4 --single-quote --write ./build/*.js",
+    "test-page": "start chrome ./build/test-page/index.html && start firefox ./build/test-page/index.html && start iexplore file://%CD%/build/test-page/index.html",
     "watch": "rollup -c -w"
   },
   "devDependencies": {