fix tests and get example wired up

akbstone · Oct 5, 2019 · 7b5addc · 7b5addc
1 parent d39006e
commit 7b5addc
Show file tree

Hide file tree

Showing 6 changed files with 367 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -24,6 +24,7 @@ Create timeseries and QC chart:
 
 ```
 
+
 ```
 
 
@@ -33,14 +34,28 @@ Create QC-only chart:
 
 ```
 
+Create curtain plot:
+
+```
+
+```
+
 
 API
 ---
 
 - ``data(arr)``
 - ``x(fn)``
 - ``y(fn)``
-- ``x_label(str)``
-- ``y_label(str)``
-- ``qc_options(arr)``
+- ``width(number)``
+- ``height(number)``
+- ``xLabel(str)``
+- ``yLabel(str)``
+- ``qcOptions(arr)``
 	- qc_option: ``{code:4,color:#FF0000,label:'Fail'}``
+
+- ``drawLine``
+- ``drawQc``
+- ``drawCurtain``
+- ``getDataAtX``
+- ``getDataAtXY``
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,93 @@
+<html>
+	<head>
+		<script src="https://d3js.org/d3-selection.v1.min.js"></script>
+        <script src="https://d3js.org/d3-path.v1.min.js"></script>
+        <script src="https://d3js.org/d3-shape.v1.min.js"></script>
+        <script src="https://d3js.org/d3-time.v1.min.js"></script>
+        <script src="https://d3js.org/d3-array.v2.min.js"></script>
+
+        <script src="https://d3js.org/d3-color.v1.min.js"></script>
+        <script src="https://d3js.org/d3-format.v1.min.js"></script>
+        <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
+        <script src="https://d3js.org/d3-time.v1.min.js"></script>
+        <script src="https://d3js.org/d3-time-format.v2.min.js"></script>
+        <script src="https://d3js.org/d3-scale.v3.min.js"></script>
+
+        <script src="https://d3js.org/d3-axis.v1.js"></script>
+
+		<script src="../build/erddap-timeseries-chart.js"></script>
+
+	</head>
+	<body>
+		<div class="line-chart"></div>
+        <script type="text/javascript">
+            let width = d3.select('.line-chart').node().offsetWidth,
+	            height = 300,
+                data = [
+                    {
+                        time:new Date(2019,10,1),
+                        value:10,
+                        qc:1
+                    },
+                    {
+                        time:new Date(2019,10,2),
+                        value:11,
+                        qc:3
+                    },
+                    {
+                        time:new Date(2019,10,3),
+                        value:4,
+                        qc:3
+                    },
+                    {
+                        time:new Date(2019,10,4),
+                        value:5,
+                        qc:4
+                    },
+                    {
+                        time:new Date(2019,10,5),
+                        value:2,
+                        qc:1
+                    }
+
+                ],
+
+                qc_options = [
+						{
+							code:1,
+							color:'green',
+							label:'Pass'
+						},
+						{
+							code:3,
+							color:'orange',
+							label:'Suspect'
+						},
+						{
+							code:4,
+							color:'red',
+							label:'Fail'
+						}
+					],
+
+                chart = d3.erddap_timeseries_chart()
+                        .data(data)
+                        .width(width)
+                        .height(height)
+                        .x(d=>d.time)
+                        .y(d=>d.value)
+                        .chartType('line'),
+
+	            chartSvg = d3.select('div.line-chart')
+                    .append('svg')
+                    .attr('width',width)
+                    .attr('height',height)
+                    .call(chart);
+
+
+
+		</script>
+
+
+	</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,14 +7,15 @@
     "d3-module"
   ],
   "license": "BSD-3-Clause",
-  "jsnext:main": "index",
   "homepage": "https://github.com/{USERNAME}/erddap-timeseries-chart",
   "repository": {
     "type": "git",
     "url": "https://github.com/{USERNAME}/erddap-timeseries-chart"
   },
-  "module":"index",
+  "main": "build/erddap-timeseries-chart.js",
+  "module": "src/index",
   "files": [
+    "dist/**/*.js",
     "src/**/*.js"
   ],
   "scripts": {
@@ -31,6 +32,8 @@
   },
   "dependencies": {
     "d3-array": "^2.3.2",
+    "d3-axis": "^1.0.12",
+    "d3-scale": "^3.1.0",
     "d3-selection": "^1.4.0",
     "d3-shape": "^1.3.5",
     "d3-time": "^1.1.0"

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,6 +1,6 @@
 export default {
   input: 'src/index.js',
-  external: [ 'd3-selection','d3-array','d3-shape','d3-selection','d3-time' ],
+  external: [ 'd3-selection','d3-array','d3-shape','d3-axis','d3-scale' ],
   output:{
     format: 'umd',
     name:'d3',
@@ -10,7 +10,9 @@ export default {
     globals:{
       'd3-array':'d3',
       'd3-shape':'d3',
-      'd3-selection':'d3'
+      'd3-selection':'d3',
+      'd3-axis':'d3',
+      'd3-scale':'d3'
     }
   }
 }