@@ -21,6 +21,30 @@ const log = {
2121 error : console . error . bind ( console , "[APP]" ) ,
2222} ;
2323
24+ /**
25+ * Apply safe area insets as CSS custom properties on the document root.
26+ */
27+ function applySafeAreaInsets ( insets : {
28+ top ?: number ;
29+ right ?: number ;
30+ bottom ?: number ;
31+ left ?: number ;
32+ } ) {
33+ const root = document . documentElement ;
34+ if ( insets . top !== undefined ) {
35+ root . style . setProperty ( "--safe-area-inset-top" , `${ insets . top } ) ;
36+ }
37+ if ( insets . right !== undefined ) {
38+ root . style . setProperty ( "--safe-area-inset-right" , `${ insets . right } ) ;
39+ }
40+ if ( insets . bottom !== undefined ) {
41+ root . style . setProperty ( "--safe-area-inset-bottom" , `${ insets . bottom } ) ;
42+ }
43+ if ( insets . left !== undefined ) {
44+ root . style . setProperty ( "--safe-area-inset-left" , `${ insets . left } ) ;
45+ }
46+ }
47+
2448// DOM element references
2549const xAxisSelect = document . getElementById ( "x-axis" ) as HTMLSelectElement ;
2650const yAxisSelect = document . getElementById ( "y-axis" ) as HTMLSelectElement ;
@@ -32,6 +56,9 @@ const chartCanvas = document.getElementById(
3256) as HTMLCanvasElement ;
3357const legendContainer = document . getElementById ( "legend" ) ! ;
3458const detailPanel = document . getElementById ( "detail-panel" ) ! ;
59+ const fullscreenBtn = document . getElementById (
60+ "fullscreen-btn" ,
61+ ) as HTMLButtonElement ;
3562
3663// App state
3764interface AppState {
@@ -364,8 +391,11 @@ function resetDetailPanel(): void {
364391 '<span class="detail-placeholder">Hover over a point to see details</span>' ;
365392}
366393
367- // Create app instance
368- const app = new App ( { name : "Customer Segmentation" , version : "1.0.0" } ) ;
394+ // Create app instance with fullscreen support
395+ const app = new App (
396+ { name : "Customer Segmentation" , version : "1.0.0" } ,
397+ { availableDisplayModes : [ "inline" , "fullscreen" ] } ,
398+ ) ;
369399
370400// Fetch data from server
371401async function fetchData ( ) : Promise < void > {
@@ -419,6 +449,16 @@ sizeMetricSelect.addEventListener("change", () => {
419449 updateChart ( ) ;
420450} ) ;
421451
452+ // Fullscreen toggle
453+ fullscreenBtn . addEventListener ( "click" , async ( ) => {
454+ try {
455+ const result = await app . requestDisplayMode ( { mode : "fullscreen" } ) ;
456+ log . info ( "Display mode changed to:" , result . mode ) ;
457+ } catch ( error ) {
458+ log . error ( "Failed to change display mode:" , error ) ;
459+ }
460+ } ) ;
461+
422462// Clear selection when clicking outside chart
423463document . addEventListener ( "click" , ( e ) => {
424464 if ( ! ( e . target as HTMLElement ) . closest ( ".chart-section" ) ) {
@@ -459,6 +499,33 @@ app.onhostcontextchanged = (params) => {
459499 if ( params . styles ?. css ?. fonts ) {
460500 applyHostFonts ( params . styles . css . fonts ) ;
461501 }
502+ if ( params . displayMode ) {
503+ document . documentElement . setAttribute (
504+ "data-display-mode" ,
505+ params . displayMode ,
506+ ) ;
507+ }
508+ if ( params . safeAreaInsets ) {
509+ applySafeAreaInsets ( params . safeAreaInsets ) ;
510+ }
511+ // Update container height based on containerDimensions from host
512+ // This ensures the chart resizes correctly during transitions
513+ if ( params . containerDimensions ) {
514+ const mainEl = document . querySelector ( ".main" ) as HTMLElement | null ;
515+ if ( mainEl ) {
516+ if ( "height" in params . containerDimensions ) {
517+ // If height is fixed, take up all the height
518+ mainEl . style . height = "100vh" ;
519+ } else if ( "maxHeight" in params . containerDimensions ) {
520+ // If height is variable, let the rest of the css determine the height
521+ mainEl . style . height = "" ;
522+ }
523+ // Resize chart after container dimensions change
524+ if ( state . chart ) {
525+ state . chart . resize ( ) ;
526+ }
527+ }
528+ }
462529 // Recreate chart to pick up new colors
463530 if ( state . chart && ( params . theme || params . styles ?. variables ) ) {
464531 state . chart . destroy ( ) ;
@@ -478,6 +545,19 @@ app.connect().then(() => {
478545 if ( ctx ?. styles ?. css ?. fonts ) {
479546 applyHostFonts ( ctx . styles . css . fonts ) ;
480547 }
548+ if ( ctx ?. displayMode ) {
549+ document . documentElement . setAttribute ( "data-display-mode" , ctx . displayMode ) ;
550+ }
551+ if ( ctx ?. safeAreaInsets ) {
552+ applySafeAreaInsets ( ctx . safeAreaInsets ) ;
553+ }
554+ // Apply initial container dimensions
555+ if ( ctx ?. containerDimensions ) {
556+ const mainEl = document . querySelector ( ".main" ) as HTMLElement | null ;
557+ if ( mainEl && "height" in ctx . containerDimensions ) {
558+ mainEl . style . height = `${ ctx . containerDimensions . height } ;
559+ }
560+ }
481561} ) ;
482562
483563// Fetch data after connection
0 commit comments