diff --git a/frontend/src/components/floatingWidgets/FloatingWidgetLayer.tsx b/frontend/src/components/floatingWidgets/FloatingWidgetLayer.tsx index 2804ce8..4eb1b70 100644 --- a/frontend/src/components/floatingWidgets/FloatingWidgetLayer.tsx +++ b/frontend/src/components/floatingWidgets/FloatingWidgetLayer.tsx @@ -24,6 +24,7 @@ import { import type { WidgetSlot } from '../../types/widgetDashboard'; import FloatingWidgetLayoutPicker from './FloatingWidgetLayoutPicker'; import FloatingWidgetWindow from './FloatingWidgetWindow'; +import '../../styles/paperDashboard.css'; import '../../styles/widgetDashboard.css'; import '../../styles/floatingWidget.css'; diff --git a/frontend/src/components/paper/PaperMiniChart.tsx b/frontend/src/components/paper/PaperMiniChart.tsx index 5cba84c..2b8bf6c 100644 --- a/frontend/src/components/paper/PaperMiniChart.tsx +++ b/frontend/src/components/paper/PaperMiniChart.tsx @@ -69,7 +69,10 @@ const PaperMiniChart: React.FC = ({ useEffect(() => { if (!containerRef.current) return undefined; const t = readChartTheme(containerRef.current); - const chart = createChart(containerRef.current, { + const el = containerRef.current; + const chart = createChart(el, { + width: el.clientWidth || undefined, + height: el.clientHeight || undefined, layout: { background: { type: ColorType.Solid, color: t.bgColor }, textColor: t.textColor, @@ -103,7 +106,18 @@ const PaperMiniChart: React.FC = ({ }); ro.observe(containerRef.current); + const onLayoutSync = () => { + if (containerRef.current && chartRef.current) { + chartRef.current.applyOptions({ + width: containerRef.current.clientWidth, + height: containerRef.current.clientHeight, + }); + } + }; + window.addEventListener('gc-widget-layout-sync', onLayoutSync); + return () => { + window.removeEventListener('gc-widget-layout-sync', onLayoutSync); ro.disconnect(); chart.remove(); chartRef.current = null; diff --git a/frontend/src/styles/floatingWidget.css b/frontend/src/styles/floatingWidget.css index d3f1c2c..d1b63ae 100644 --- a/frontend/src/styles/floatingWidget.css +++ b/frontend/src/styles/floatingWidget.css @@ -303,10 +303,49 @@ flex: 0 0 auto; } +.fw-window-cell .wd-widget-host--panel, +.fw-window-cell .wd-widget-host--mini-chart { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + height: 100%; + overflow: hidden; +} + .fw-window-cell .wd-widget-host--panel > .wd-panel-body, .fw-window-cell .wd-widget-host--panel > .wd-mini-chart-wrap { flex: 1; min-height: 0; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.fw-window-cell .wd-mini-chart-wrap { + padding: 0; +} + +.fw-window-cell .wd-widget-host--mini-chart .ptd-chart-wrap { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + padding: 4px 8px 0; + overflow: hidden; +} + +.fw-window-cell .wd-widget-host--mini-chart .ptd-chart-head, +.fw-window-cell .wd-widget-host--mini-chart .ptd-tf-row { + flex-shrink: 0; +} + +.fw-window-cell .wd-widget-host--mini-chart .ptd-chart-canvas { + flex: 1; + min-height: 80px !important; + max-height: none !important; + width: 100%; + position: relative; } .fw-window-cell .wd-widget-host--chart, @@ -371,19 +410,6 @@ overflow: auto; } -.fw-window-cell .wd-widget-host--mini-chart .ptd-chart-wrap { - flex: 1; - min-height: 0; - display: flex; - flex-direction: column; -} - -.fw-window-cell .wd-widget-host--mini-chart .ptd-chart-canvas { - flex: 1; - min-height: 0 !important; - max-height: none !important; -} - .fw-window-cell .ptd-analysis-chart { flex: 1; min-height: 0;