Creating the responsiveness demo

Author: andrefarzat

src/app/demo/demo.component.html

@@ -17,6 +17,7 @@ <h5>Angular Plotly</h5>
                     <li><a [routerLink]="['/timeout-update']">Timeout Update</a></li>
                     <li><a [routerLink]="['/huge-memory-usage']">Huge Memory Usage</a></li>
                     <li><a [routerLink]="['/slow-example']">Slow Example</a></li>
+                    <li><a [routerLink]="['/responsiveness']">Responsiveness</a></li>
                 </ul>
             </div>
         </div>

src/app/demo/demo.module.ts

@@ -23,6 +23,7 @@ import { FramesComponent } from './frames/frames.component';
 import { TimeoutUpdateComponent } from './timeout-update/timeout-update.component';
 import { HugeMemoryUsageComponent } from './huge-memory-usage/huge-memory-usage.component';
 import { SlowExampleComponent } from './slow-example/slow-example.component';
+import { ResponsivenessComponent } from './responsiveness/responsiveness.component';
 
 
 const demoRoutes: Routes = [
@@ -37,6 +38,7 @@ const demoRoutes: Routes = [
     { path: 'timeout-update', component: TimeoutUpdateComponent, data: { title: 'Timeout Update' } },
     { path: 'huge-memory-usage', component: HugeMemoryUsageComponent, data: { title: 'Huge Memory Usage' } },
     { path: 'slow-example', component: SlowExampleComponent, data: { title: 'Slow example' } },
+    { path: 'responsiveness', component: ResponsivenessComponent, data: { title: 'Responsiveness' } },
 
     { path: '', redirectTo: '/home', pathMatch: 'full' },
 ];
@@ -68,6 +70,7 @@ PlotlyViaCDNModule.plotlyVersion = '1.49.4';
         TimeoutUpdateComponent,
         HugeMemoryUsageComponent,
         SlowExampleComponent,
+        ResponsivenessComponent,
     ],
     exports: [DemoComponent],
 })

src/app/demo/responsiveness/responsiveness.component.css

@@ -0,0 +1,2 @@
+<plotly-plot [data]="graph.data" [layout]="graph.layout" [config]="{resize: true}" [useResizeHandler]="true" [style]="{position: 'relative', width: '100%', height: '100%'}">
+</plotly-plot>

src/app/demo/responsiveness/responsiveness.component.html

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'plotly-responsiveness',
+  templateUrl: './responsiveness.component.html',
+  styleUrls: ['./responsiveness.component.css']
+})
+export class ResponsivenessComponent implements OnInit {
+
+  public graph = {
+    data: [
+      { x: [1, 2, 3], y: [2, 6, 3], type: 'scattergl', mode: 'lines+points', marker: { color: 'red' } },
+      { x: [1, 2, 3], y: [1, 2, 3], type: 'markers' },
+      { x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
+    ],
+    layout: { width: 320, height: 240, title: 'A Fancy Plot' }
+  };
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}