Add JSON support for element attributes

riccardoscalco · riccardoscalco · commit e135ce664747 · 2021-07-22T15:54:25.000+02:00
diff --git a/demo/index.html b/demo/index.html
@@ -17,26 +17,41 @@
 		}
 	</style>
 	<body>
-		<trend-line width="100" height="100" margin="20"></trend-line>
-		<trend-line width="100" height="100" margin="20"></trend-line>
+
+		<trend-line
+			data="[[0, 1], [1, 2], [2, 4], [3, 8]]"
+			x-interval="[0, 3]"
+			y-interval="[1, 8]"
+			width="100"
+			height="100"
+			margin="20"
+		></trend-line>
+
+		<trend-line
+			id="js"
+			width="100"
+			height="100"
+			margin="20"
+		></trend-line>
+
 		<button>Update</button>
 	</body>
 	<script>
 		const N = 10;
-		const elements = document.querySelectorAll('trend-line');
-		update(elements);
+		const element = document.querySelector("#js");
+		update(element);
 
-		function update(elements) {
-			for (const el of elements) {
-				el.data = getRandomData(N);
-				el.xInterval = [0, 10];
-				el.yInterval = [0, 1];
-			}
+		function update(element) {
+			element.data = getRandomData(N);
+			/*
+			element.xInterval and element.yInterval default to
+			the ranges observed in data.
+			*/
 		}
 
 		const button = document.querySelector('button');
 		button.addEventListener('click', event => {
-			update(elements);
+			update(element);
 		});
 
 		function getRandomData (length) {
diff --git a/readme.md b/readme.md
@@ -33,7 +33,13 @@ Use the custom element:
 
 ```html
 <body>
-  <trend-line width="100" height="100" margin="20"></trend-line>
+  <trend-line
+    x-interval="[0, 10]"
+    y_interval="[0, 1]"
+    width="100"
+    height="100"
+    margin="20"
+  ></trend-line>
 </body>
 ```
 
@@ -46,7 +52,7 @@ Set the data to plot:
 </script>
 ```
 
-Please have a look at the [demo](https://pp41i.csb.app/).
+Please have a look at the [demo](https://github.com/nextbitlabs/trend-line/blob/main/demo/index.html) in the repo, or the live [demo](https://pp41i.csb.app/).
 
 ## License
 
diff --git a/src/index.js b/src/index.js
@@ -1,20 +1,28 @@
-import {define} from 'https://cdn.skypack.dev/hybrids@6';
+import {define, property} from 'https://cdn.skypack.dev/hybrids@6';
 import {render} from './render.js';
 import * as layout from './layout.js';
 import * as path from './path.js';
 import * as arrow from './arrow.js';
 
 export const TrendLine = {
-	data: [],
+	data: property(parseJSON),
+	xInterval: property(parseJSON),
+	yInterval: property(parseJSON),
 	margin: 20,
 	width: 100,
 	height: 100,
-	xInterval: [],
-	yInterval: [],
 	render,
 	...layout,
 	...path,
 	...arrow,
 };
 
 define('trend-line', TrendLine);
+
+// Custom property transform for JSON support
+// from element attribute.
+function parseJSON(value = []) {
+	return typeof value === 'string'
+		? JSON.parse(value)
+		: value;
+}
