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 { AxisTickStrategies, emptyTick, FormattingFunctions, SolidLine, emptyFill, SolidFill, lightningChart, DataSetXY, Themes } = lcjs
 
@@ -65,19 +76,9 @@ const setDrillDown = (() => {
                 defaultAxisX: { 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(name)
             .setCursor((cursor) => cursor.setTickMarkerXVisible(false))
@@ -138,7 +139,11 @@ textRenderer: window.devicePixelRatio >= 2 ? lcjs.htmlTextRenderer : undefined,
 setTimeout(async () => {
     const dataGrid = lc.DataGrid({
         container: containerDataGrid,
-        // 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,
     })
 
     const gridColHighlight = 0