@hedeqiang/dsh-nl2sql 0.14.0 → 0.14.1

package/CHANGELOG.md

@@ -5,6 +5,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.14.1] - 2026-11-13
+
+### Fixed
+- Charts, the ER graph and forecast charts were blurry on Retina / HiDPI screens: ECharts runs in a sandboxed chunk without access to the real `window`, so it rendered at 1×. Charts now render at the screen's device pixel ratio (re-rendering when it changes, e.g. moving to another monitor or zooming), and PNG export uses at least 2×.
+
 ## [0.14.0] - 2026-11-13
 
 ### Added
@@ -139,7 +144,8 @@ These features are tested with local databases and fake IM / Lark servers; real
 
 - Redesigned UI; Lark push (Markdown and native charts); access control, feedback loop, dashboard global filters; PostgreSQL / Elasticsearch, SSH tunnels, privacy settings, automatic overviews, scheduled reports; semantic layer, ER graph, scan guard, history and audit, dashboards; first version.
 
-[Unreleased]: https://github.com/hedeqiang/dsh-nl2sql/compare/v0.14.0...HEAD
+[Unreleased]: https://github.com/hedeqiang/dsh-nl2sql/compare/v0.14.1...HEAD
+[0.14.1]: https://github.com/hedeqiang/dsh-nl2sql/compare/v0.14.0...v0.14.1
 [0.14.0]: https://github.com/hedeqiang/dsh-nl2sql/compare/v0.13.1...v0.14.0
 [0.13.1]: https://github.com/hedeqiang/dsh-nl2sql/compare/v0.13.0...v0.13.1
 [0.13.0]: https://github.com/hedeqiang/dsh-nl2sql/compare/v0.12.2...v0.13.0

package/lib/client.js

@@ -2836,6 +2836,26 @@ window.__ModuleLoader__.load({
     }
     // ----------------------------------------------------------- charts
 
+    // ECharts is loaded in a sandboxed wrapper (lib/client.echarts.js) whose `window` is an empty
+    // object, so it cannot read the screen's devicePixelRatio and would draw at 1x (blurry on
+    // Retina / HiDPI). Every chart passes the real ratio explicitly and re-inits when it changes
+    // (moving between screens, browser zoom).
+    const chartDpr = () => Math.max(1, Math.min(3, (typeof window !== 'undefined' && window.devicePixelRatio) || 1))
+    function initChart(echarts, el, opts = {}) {
+      return echarts.init(el, null, { renderer: 'canvas', devicePixelRatio: chartDpr(), ...opts })
+    }
+    /** Call `onChange` when the device pixel ratio changes; returns a cleanup. */
+    function watchDpr(onChange) {
+      if (typeof window === 'undefined' || !window.matchMedia) return () => {}
+      let mq
+      const listen = () => {
+        mq = window.matchMedia(`(resolution: ${window.devicePixelRatio || 1}dppx)`)
+        mq.addEventListener?.('change', handler, { once: true })
+      }
+      const handler = () => { onChange(); listen() }
+      listen()
+      return () => mq?.removeEventListener?.('change', handler)
+    }
     let echartsPromise
     function loadEcharts() {
       echartsPromise ??= require.async('./client.echarts.js')
@@ -2942,17 +2962,27 @@ window.__ModuleLoader__.load({
       useEffect(() => {
         let disposed = false
         let observer
+        let stopDpr
         loadEcharts().then((echarts) => {
           if (disposed || !ref.current) return
-          instance.current = echarts.init(ref.current, null, { renderer: 'canvas' })
-          instance.current.on('click', (p) => { if (pointRef.current && p.name !== undefined && p.name !== '') pointRef.current(p.name) })
+          const create = () => {
+            const prev = instance.current
+            const option = prev?.getOption?.()
+            prev?.dispose()
+            instance.current = initChart(echarts, ref.current)
+            instance.current.on('click', (p) => { if (pointRef.current && p.name !== undefined && p.name !== '') pointRef.current(p.name) })
+            if (option) instance.current.setOption(option, true)
+            onInstance?.(instance.current)
+          }
+          create()
+          stopDpr = watchDpr(() => { if (!disposed && ref.current) create() })
           observer = new ResizeObserver(() => instance.current?.resize())
           observer.observe(ref.current)
           setReady(true)
-          onInstance?.(instance.current)
         }, (e) => setError(e.message))
         return () => {
           disposed = true
+          stopDpr?.()
           observer?.disconnect()
           instance.current?.dispose()
           instance.current = null
@@ -3095,7 +3125,7 @@ window.__ModuleLoader__.load({
       const [flash, setFlash] = useFlash()
       const copySql = () => { navigator.clipboard?.writeText(result.sql); setFlash(t('result.copied')) }
       const exportPng = () => {
-        const url = chartInstance?.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: cssVar(document.body, '--dsw-alias-bg-base', '#fff') })
+        const url = chartInstance?.getDataURL({ type: 'png', pixelRatio: Math.max(2, chartDpr()), backgroundColor: cssVar(document.body, '--dsw-alias-bg-base', '#fff') })
         if (url) fetch(url).then(r => r.blob()).then(b => download(`${safeName(result.title)}.png`, b))
       }
       const isChart = chart.type !== 'table' && chart.type !== 'kpi'
@@ -3761,7 +3791,7 @@ window.__ModuleLoader__.load({
         let observer
         loadEcharts().then((echarts) => {
           if (disposed || !ref.current) return
-          chart = echarts.init(ref.current, null, { renderer: 'canvas' })
+          chart = initChart(echarts, ref.current)
           observer = new ResizeObserver(() => chart?.resize())
           observer.observe(ref.current)
           const el = ref.current
@@ -7227,7 +7257,7 @@ window.__ModuleLoader__.load({
         let observer
         loadEcharts().then((echarts) => {
           if (disposed || !ref.current) return
-          inst.current = echarts.init(ref.current, null, { renderer: 'canvas' })
+          inst.current = initChart(echarts, ref.current)
           observer = new ResizeObserver(() => inst.current?.resize())
           observer.observe(ref.current)
           try { inst.current.setOption(proForecastOption(forecast, ref.current, t), true) } catch (e) { setError(e.message) }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hedeqiang/dsh-nl2sql",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Ask MySQL, PostgreSQL, Elasticsearch and CSV/Excel in plain language inside DeepSeek Harness: charts, dashboards, alerts, and IM push and bots for Lark/Feishu, Telegram, WeCom and DingTalk.",
   "type": "module",
   "bin": {