Update examples

Author: Niilo Keinänen

src/index.js

@@ -1,3 +1,14 @@
+window.lcjsSmallView = window.devicePixelRatio >= 2
+if (!window.__lcjsDebugOverlay) {
+    window.__lcjsDebugOverlay = document.createElement('div')
+    window.__lcjsDebugOverlay.style.cssText = 'position:fixed;top:10px;left:10px;background:rgba(0,0,0,0.7);color:#fff;padding:4px 8px;z-index:99999;font:12px monospace;pointer-events:none'
+    const attach = () => { if (document.body && !window.__lcjsDebugOverlay.parentNode) document.body.appendChild(window.__lcjsDebugOverlay) }
+    attach()
+    setInterval(() => {
+        attach()
+        window.__lcjsDebugOverlay.textContent = window.innerWidth + 'x' + window.innerHeight + ' dpr=' + window.devicePixelRatio + ' small=' + window.lcjsSmallView
+    }, 500)
+}
 const lcjs = require('@lightningchart/lcjs')
 const {
     lightningChart,
@@ -47,19 +58,9 @@ const chart1 = lc
         defaultAxisY: { type: 'linear-highPrecision' },
         theme: (() => {
     const t = Themes[new URLSearchParams(window.location.search).get('theme') || 'darkGold'] || undefined
-    const smallView = window.devicePixelRatio >= 2
-    if (!window.__lcjsDebugOverlay) {
-        window.__lcjsDebugOverlay = document.createElement('div')
-        window.__lcjsDebugOverlay.style.cssText = 'position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);color:#fff;padding:4px 8px;z-index:99999;font:12px monospace;pointer-events:none'
-        if (document.body) document.body.appendChild(window.__lcjsDebugOverlay)
-        setInterval(() => {
-            if (!window.__lcjsDebugOverlay.parentNode && document.body) document.body.appendChild(window.__lcjsDebugOverlay)
-            window.__lcjsDebugOverlay.textContent = window.innerWidth + 'x' + window.innerHeight + ' dpr=' + window.devicePixelRatio + ' small=' + (window.devicePixelRatio >= 2)
-        }, 500)
-    }
-    return t && smallView ? lcjs.scaleTheme(t, 0.5) : t
+    return t && window.lcjsSmallView ? lcjs.scaleTheme(t, 0.5) : t
 })(),
-textRenderer: window.devicePixelRatio >= 2 ? lcjs.htmlTextRenderer : undefined,
+textRenderer: window.lcjsSmallView ? lcjs.htmlTextRenderer : undefined,
     })
     .setTitle('Scrolling Heatmap - No Aggregation')
     .setTitleMargin({ top: 10, bottom: 10 })
@@ -118,7 +119,11 @@ const chart2 = lc
         container: containerChart2,
         defaultAxisX: { type: 'linear-highPrecision' },
         defaultAxisY: { type: 'linear-highPrecision' },
-        // theme: Themes.darkGold
+        theme: (() => {
+    const t = Themes[new URLSearchParams(window.location.search).get('theme') || 'darkGold'] || undefined
+    return t && window.lcjsSmallView ? lcjs.scaleTheme(t, 0.5) : t
+})(),
+textRenderer: window.lcjsSmallView ? lcjs.htmlTextRenderer : undefined,
     })
     .setTitle('Scrolling Heatmap - Aggregation (Max)')
     .setTitleMargin({ top: 10, bottom: 10 })