vizzu style from CSS properties

dyuri · dyuri · commit 9a3246ed3458 · 2021-11-25T15:52:59.000+01:00
diff --git a/example/example.js b/example/example.js
@@ -91,6 +91,8 @@ let anim = chart.initializing
 .then(chart => chart.animate({ tooltip: 8 }))*/
 .catch(console.log);
 
+console.log(chart);
+
 let slider = document.getElementById("myRange");
 
 slider.oninput = (e)=>
diff --git a/example/index.html b/example/index.html
@@ -5,6 +5,20 @@
 		<meta charset="utf-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 	</head>
+	<style>
+    :root {
+			--vizzu-plot-marker-colorPalette: #e655e8FF #123456FF #BDAF10FF;
+			--vizzu-backgroundColor: #ffffffff;
+			--vizzu-plot-xAxis-interlacing-color: #f7f7f7;
+		}
+
+		@media (prefers-color-scheme: dark) {
+			#vizzuCanvas {
+				--vizzu-backgroundColor: #282828FF;
+				--vizzu-plot-xAxis-interlacing-color: #444444FF;
+			}
+		}
+  </style>
 <body>
 	<noscript>
 		<p class="noscript">To use Vizzu, please enable Javascript.</p>
@@ -25,4 +39,4 @@
 
 	<script type="module" src="example.js"></script>
 </body>
-</html>
+</html>
diff --git a/src/apps/weblib/js-api/utils.js b/src/apps/weblib/js-api/utils.js
@@ -1,4 +1,4 @@
-export const canBeAccessed = (stylesheet) => {
+export const isAccessibleStylesheet = (stylesheet) => {
   try {
     stylesheet.cssRules;
     return true;
@@ -8,7 +8,7 @@ export const canBeAccessed = (stylesheet) => {
 };
 
 export const getCSSCustomProps = (pfx = "") =>
-  [...document.styleSheets].filter(canBeAccessed).reduce(
+  [...document.styleSheets].filter(isAccessibleStylesheet).reduce(
     (finalArr, sheet) =>
       finalArr.concat(
         [...sheet.cssRules]
@@ -27,6 +27,35 @@ export const getCSSCustomPropsForElement = (el, pfx = "") => {
   const props = getCSSCustomProps(pfx);
   const style = getComputedStyle(el);
   return props
-    .map((prop) => [prop, style.getPropertyValue(prop)])
+    .map((prop) => [prop, style.getPropertyValue(prop).trim()])
     .filter((pv) => pv[1] !== "");
 };
+
+export const propSet = (obj, path, value) => {
+  path.reduce((acc, part, idx) => {
+    if (!acc?.[part]) {
+      acc[part] = idx === path.length - 1 ? value : {};
+    }
+
+    return acc[part];
+  }, obj);
+  return obj;
+};
+
+export const propGet = (obj, path) => {
+  return path.reduce((acc, part) => acc?.[part], obj);
+};
+
+export const propsToObject = (props, propObj, pfx = "") => {
+  propObj = propObj || {};
+  propObj = props.reduce((obj, [prop, val]) => {
+    const propname = prop.replace("--" + (pfx ? pfx + "-" : ""), "");
+    const proppath = propname.split("-");
+
+    propSet(obj, proppath, val);
+
+    return obj;
+  }, propObj);
+
+  return propObj;
+};
diff --git a/src/apps/weblib/js-api/vizzu.js b/src/apps/weblib/js-api/vizzu.js
@@ -4,10 +4,23 @@ import Data from "./data.js";
 import AnimControl from "./animcontrol.js";
 import Tooltip from "./tooltip.js";
 import VizzuModule from "./cvizzu.js";
+import { getCSSCustomPropsForElement, propsToObject } from "./utils.js";
 
 export default class Vizzu {
   constructor(container, initState) {
     this.container = container;
+
+    if (!(this.container instanceof HTMLElement)) {
+      this.container = document.getElementById(container);
+    }
+
+    if (!this.container) {
+      throw new Error(
+        `Cannot find container ${this.container} to render Vizzu!`
+      );
+    }
+
+    this._propPrefix = "vizzu";
     this.started = false;
 
     this._resolveAnimate = null;
@@ -222,7 +235,14 @@ export default class Vizzu {
         }
 
         this.data.set(obj.data);
-        this.setStyle(obj.style);
+
+        // setting style, including CSS properties
+        const style = JSON.parse(JSON.stringify(obj.style || {}));
+        const props = getCSSCustomPropsForElement(
+          this.container,
+          this._propPrefix
+        );
+        this.setStyle(propsToObject(props, style, this._propPrefix));
         this.setConfig(obj.config);
       }
     }
@@ -329,16 +349,6 @@ export default class Vizzu {
     let canvas = null;
     let placeholder = this.container;
 
-    if (!(placeholder instanceof HTMLElement)) {
-      placeholder = document.getElementById(placeholder);
-    }
-
-    if (!placeholder) {
-      throw new Error(
-        `Cannot find container ${this.container} to render Vizzu!`
-      );
-    }
-
     if (placeholder instanceof HTMLCanvasElement) {
       canvas = placeholder;
     } else {
