Merge pull request #49 from drdmitry/feature/bar-plots

Added demo of Bar plots

Author: andrefarzat

src/app/demo/bar-plots/bar-plots.component.html

@@ -0,0 +1,7 @@
+<div>
+    <plotly-plot [data]="barPlot.data" [layout]="barPlot.layout" [revision]="0" [debug]="debug" [useResizeHandler]="useResizeHandler"></plotly-plot>
+    <p>&nbsp;</p>
+    <plotly-plot [data]="horizontalBarPlot.data" [layout]="horizontalBarPlot.layout" [revision]="0" [debug]="debug" [useResizeHandler]="useResizeHandler"></plotly-plot>
+    <p>&nbsp;</p>
+    <plotly-plot [data]="groupedBarPlot.data" [layout]="groupedBarPlot.layout" [revision]="0" [debug]="debug" [useResizeHandler]="useResizeHandler"></plotly-plot>
+</div>

src/app/demo/bar-plots/bar-plots.component.ts

@@ -0,0 +1,66 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'plotly-bar-plot',
+    templateUrl: './bar-plots.component.html',
+})
+export class BarPlotComponent {
+    public debug = true;
+    public useResizeHandler = true;
+
+    public barPlot = {
+        data: [
+            { y: [10, 15, 13, 17], type: 'bar' },
+            { y: [16, 5, 11, 9], type: 'bar' },
+        ],
+        layout: {
+            title: 'Simple Bar Plot',
+        }
+    };
+
+    public horizontalBarPlot = {
+        data: [
+            { x: [1, 2, 3, 4, 4, 4, 8, 9, 10], type: 'bar', name: 'Set 1' },
+            { x: [2, 3, 3, 3, 3, 5, 6, 6, 7], type: 'bar', name: 'Set 2' },
+        ],
+        layout: {
+            title: 'Horizontal Bar Plot',
+        },
+    };
+
+    private x = ['day 1', 'day 1', 'day 1', 'day 1', 'day 1', 'day 1',
+        'day 2', 'day 2', 'day 2', 'day 2', 'day 2', 'day 2'];
+
+    public groupedBarPlot = {
+        data: [{
+            y: [0.2, 0.2, 0.6, 1.0, 0.5, 0.4, 0.2, 0.7, 0.9, 0.1, 0.5, 0.3],
+            x: this.x,
+            name: 'kale',
+            marker: { color: '#3D9970' },
+            type: 'bar'
+        },
+        {
+            y: [0.6, 0.7, 0.3, 0.6, 0.0, 0.5, 0.7, 0.9, 0.5, 0.8, 0.7, 0.2],
+            x: this.x,
+            name: 'radishes',
+            marker: { color: '#FF4136' },
+            type: 'bar'
+        },
+        {
+            y: [0.1, 0.3, 0.1, 0.9, 0.6, 0.6, 0.9, 1.0, 0.3, 0.6, 0.8, 0.5],
+            x: this.x,
+            name: 'carrots',
+            marker: { color: '#FF851B' },
+            type: 'bar'
+        }],
+        layout: {
+            title: 'Grouped Bar Plot',
+            yaxis: {
+                title: 'normalized moisture',
+                zeroline: false
+            },
+            barmode: 'stack'
+        }
+    };
+
+}

src/app/demo/demo.component.html

@@ -7,6 +7,7 @@ <h5>Angular Plotly</h5>
 
                 <ul class="vertical menu">
                     <li><a [routerLink]="['/home']">Home</a></li>
+                    <li><a [routerLink]="['/bar-plots']">Bar Plots</a></li>
                     <li><a [routerLink]="['/box-plots']">Box Plots</a></li>
                     <li><a [routerLink]="['/linear-charts']">Linear Charts</a></li>
                     <li><a [routerLink]="['/ajax']">Ajax</a></li>

src/app/demo/demo.module.ts

@@ -11,6 +11,7 @@ import { PlotlyModule } from '../plotly/plotly.module';
 // import { PlotlyViaWindowModule } from '../plotly-via-window/plotly-via-window.module';
 
 // Examples
+import { BarPlotComponent } from './bar-plots/bar-plots.component';
 import { BoxPlotComponent } from './box-plots/box-plots.component';
 import { LinearChartsComponent } from './linear-charts/linear-charts.component';
 import { AjaxComponent } from './ajax/ajax.component';
@@ -21,6 +22,7 @@ import { FramesComponent } from './frames/frames.component';
 
 const demoRoutes: Routes = [
     { path: 'home', component: HomeComponent, data: { title: 'Home' } },
+    { path: 'bar-plots', component: BarPlotComponent, data: { title: 'Bar Plots' } },
     { path: 'box-plots', component: BoxPlotComponent, data: { title: 'Box Plots' } },
     { path: 'linear-charts', component: LinearChartsComponent, data: { title: 'Linear Charts' } },
     { path: 'ajax', component: AjaxComponent, data: { title: 'Ajax' } },
@@ -43,6 +45,7 @@ const demoRoutes: Routes = [
     declarations: [
         HomeComponent,
         DemoComponent,
+        BarPlotComponent,
         BoxPlotComponent,
         LinearChartsComponent,
         AjaxComponent,