diff --git a/README.md b/README.md index feddce2..d141ed2 100644 --- a/README.md +++ b/README.md @@ -120,18 +120,19 @@ For a full description of Plotly chart types and attributes see the following re | `(error)` | `Function(err)` | `undefined` | Callback executed when a plotly.js API method rejects | | `[divId]` | `string` | `undefined` | id assigned to the `
` into which the plot is rendered. | | `[className]` | `string` | `undefined` | applied to the `
` into which the plot is rendered | -| `[style]` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `
` into which the plot is rendered | +| `[innerStyle]` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `
` into which the plot is rendered | +| `[style]` | `Object` | `undefined` | deprecated compatibility alias for `[innerStyle]` | | `[debug]` | `Boolean` | `false` | Assign the graph div to `window.gd` for debugging | | `[useResizeHandler]` | `Boolean` | `false` | When true, adds a call to `Plotly.Plot.resize()` as a `window.resize` event handler | -**Note**: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use `style` or `className` to set the dimensions of the element (i.e. using `width: 100%; height: 100%` or some similar values) and set `useResizeHandler` to `true` while setting `layout.autosize` to `true` and leaving `layout.height` and `layout.width` undefined. This will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/ +**Note**: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use `innerStyle` or `className` to set the dimensions of the element (i.e. using `width: 100%; height: 100%` or some similar values) and set `useResizeHandler` to `true` while setting `layout.autosize` to `true` and leaving `layout.height` and `layout.width` undefined. This will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/ ```typescript @Component({ selector: 'plotly-example', template: ` + [useResizeHandler]="true" [innerStyle]="{position: 'relative', width: '100%', height: '100%'}"> `, }) export class PlotlyExampleComponent { diff --git a/projects/demo_app/src/app/pages/dashboard/dashboard.component.html b/projects/demo_app/src/app/pages/dashboard/dashboard.component.html index 15990d7..fc090bd 100644 --- a/projects/demo_app/src/app/pages/dashboard/dashboard.component.html +++ b/projects/demo_app/src/app/pages/dashboard/dashboard.component.html @@ -10,19 +10,19 @@

Revenue

Monthly performance

USD
-
+

Customers

Plan mix

-
+

Acquisition

Channel comparison

-
+

Engagement

Sessions by weekday

-
+
diff --git a/projects/demo_app/src/app/pages/events/events.component.html b/projects/demo_app/src/app/pages/events/events.component.html index e938108..738347b 100644 --- a/projects/demo_app/src/app/pages/events/events.component.html +++ b/projects/demo_app/src/app/pages/events/events.component.html @@ -10,7 +10,7 @@ [data]="data" [layout]="layout" [config]="config" - [style]="plotStyle" + [innerStyle]="plotStyle" [useResizeHandler]="true" (plotlyClick)="capture('plotlyClick', $event)" (hover)="capture('hover', $event)" diff --git a/projects/demo_app/src/app/pages/getting-started/getting-started.component.html b/projects/demo_app/src/app/pages/getting-started/getting-started.component.html index 3c87a30..479ed70 100644 --- a/projects/demo_app/src/app/pages/getting-started/getting-started.component.html +++ b/projects/demo_app/src/app/pages/getting-started/getting-started.component.html @@ -10,7 +10,7 @@ [data]="data" [layout]="layout" [config]="config" - [style]="plotStyle" + [innerStyle]="plotStyle" [useResizeHandler]="true">
diff --git a/projects/demo_app/src/app/pages/getting-started/getting-started.component.ts b/projects/demo_app/src/app/pages/getting-started/getting-started.component.ts index 68abcdd..90dbb5b 100644 --- a/projects/demo_app/src/app/pages/getting-started/getting-started.component.ts +++ b/projects/demo_app/src/app/pages/getting-started/getting-started.component.ts @@ -55,7 +55,7 @@ export class GettingStartedComponent { [data]="data" [layout]="layout" [config]="config" - [style]="plotStyle" + [innerStyle]="plotStyle" [useResizeHandler]="true"> `; diff --git a/projects/demo_app/src/app/pages/home/home.component.html b/projects/demo_app/src/app/pages/home/home.component.html index a10d533..94a0c3d 100644 --- a/projects/demo_app/src/app/pages/home/home.component.html +++ b/projects/demo_app/src/app/pages/home/home.component.html @@ -35,7 +35,7 @@

Interactive charts.
Angular-native.

[data]="data" [layout]="layout" [config]="config" - [style]="plotStyle" + [innerStyle]="plotStyle" [useResizeHandler]="true">
diff --git a/projects/demo_app/src/app/pages/lifecycle/lifecycle.component.html b/projects/demo_app/src/app/pages/lifecycle/lifecycle.component.html index 7abbc3b..59e187a 100644 --- a/projects/demo_app/src/app/pages/lifecycle/lifecycle.component.html +++ b/projects/demo_app/src/app/pages/lifecycle/lifecycle.component.html @@ -21,7 +21,7 @@ [data]="data" [layout]="layout" [config]="config" - [style]="plotStyle" + [innerStyle]="plotStyle" [useResizeHandler]="true" [debug]="debugEnabled" (initialized)="record('initialized')" diff --git a/projects/demo_app/src/app/pages/reactive-updates/reactive-updates.component.html b/projects/demo_app/src/app/pages/reactive-updates/reactive-updates.component.html index a376e6b..5417f2d 100644 --- a/projects/demo_app/src/app/pages/reactive-updates/reactive-updates.component.html +++ b/projects/demo_app/src/app/pages/reactive-updates/reactive-updates.component.html @@ -20,7 +20,7 @@ [data]="data" [layout]="layout" [config]="config" - [style]="plotStyle" + [innerStyle]="plotStyle" [useResizeHandler]="true" [revision]="revision" [updateOnlyWithRevision]="true" diff --git a/projects/plotly/src/lib/plotly.component.spec.ts b/projects/plotly/src/lib/plotly.component.spec.ts index 483b1f6..52568ef 100644 --- a/projects/plotly/src/lib/plotly.component.spec.ts +++ b/projects/plotly/src/lib/plotly.component.spec.ts @@ -41,12 +41,25 @@ describe('PlotlyComponent', () => { expect(component.plotEl.nativeElement).toBeDefined(); }); - it('should receive the style from the property', () => { + it('should receive the inner style from the property', () => { + componentRef.setInput('innerStyle', { 'background-color': 'red' }); + fixture.detectChanges(); + expect(component.plotEl.nativeElement.style.backgroundColor).toBe('red'); + }); + + it('should retain style as a deprecated compatibility alias', () => { componentRef.setInput('style', { 'background-color': 'red' }); fixture.detectChanges(); expect(component.plotEl.nativeElement.style.backgroundColor).toBe('red'); }); + it('should prefer innerStyle when both style inputs are provided', () => { + componentRef.setInput('style', { 'background-color': 'red' }); + componentRef.setInput('innerStyle', { 'background-color': 'blue' }); + fixture.detectChanges(); + expect(component.plotEl.nativeElement.style.backgroundColor).toBe('blue'); + }); + it('should add the id in the #plotEl', () => { expect(component.plotEl.nativeElement.id).toBe(''); componentRef.setInput('divId', 'some-id'); diff --git a/projects/plotly/src/lib/plotly.component.ts b/projects/plotly/src/lib/plotly.component.ts index c689b6e..8f8a178 100644 --- a/projects/plotly/src/lib/plotly.component.ts +++ b/projects/plotly/src/lib/plotly.component.ts @@ -30,7 +30,7 @@ import { Plotly } from './plotly.interface'; selector: 'plotly-plot', standalone: true, imports: [CommonModule], - template: `
+ template: `
`, changeDetection: ChangeDetectionStrategy.Eager, @@ -51,6 +51,10 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck { layout = input>(); config = input>(); frames = input[]>(); + innerStyle = input<{ [key: string]: string }>(); + /** + * @deprecated Use `innerStyle` to avoid conflicting with Angular's global style binding. + */ style = input<{ [key: string]: string }>(); divId = input();