Merge branch 'master' of https://github.com/ReactiveX/rxjs-docs into docs-merge

Author: sumitarora

README.md

@@ -36,7 +36,7 @@ The build and test structure is fairly primitive at the moment. There are variou
 ## Committing
 It is strongly recommended that when creating a commit, you follow this procedure to start the commit wizard. It will aid you on creating valid commit messages.
 
-     ```shell
-     git add .
-     npm run commit
-     ```
+```shell
+git add .
+npm run commit
+```

src/app/operators/components/operator-extras/operator-extras.component.scss

@@ -1,13 +1,17 @@
+.extra-tip {
+    display: flex;
+}
+
 h3 {
-  display: inline-block;
-  vertical-align: middle;
-  padding-left: 10px;
+    display: inline-block;
+    vertical-align: middle;
+    padding-left: 10px;
 }
 
 .tip-warning {
-  color: rgb(244, 67, 54);
+    color: rgb(244, 67, 54);
 }
 
 .tip-info {
-  color: rgb(33, 150, 243);
+    color: rgb(33, 150, 243);
 }

src/app/operators/components/operator/operator.component.html

@@ -21,12 +21,18 @@ <h3 class="short-description" [innerHTML]="shortDescription"></h3>
     [operatorExamples]="examples" class="margin-bottom-16">
   </app-operator-examples>
   <app-operator-parameters
-    [operatorParameters]="parameters">
+    [operatorParameters]="parameters"
+    *ngIf="parameters?.length">
   </app-operator-parameters>
   <app-operator-walkthrough
     class="margin-bottom-16"
     [operatorWalkthrough]="walkthrough" >
   </app-operator-walkthrough>
+  <app-operator-extras
+    class="margin-bottom-16"
+    *ngIf="walkthroughExtras"
+    [operatorExtras]="walkthroughExtras">
+  </app-operator-extras>
   <app-related-operators
     [relatedOperators]="relatedOperators">
   </app-related-operators>

src/app/operators/components/operator/operator.component.ts

@@ -1,24 +1,29 @@
-import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { OperatorDoc } from '../../../../operator-docs/operator.model';
+import {
+  Component,
+  Input,
+  OnInit,
+  ChangeDetectionStrategy
+} from "@angular/core";
+import { OperatorDoc } from "../../../../operator-docs/operator.model";
 
 @Component({
-  selector: 'app-operator',
-  templateUrl: './operator.component.html',
-  styleUrls: ['./operator.component.scss'],
+  selector: "app-operator",
+  templateUrl: "./operator.component.html",
+  styleUrls: ["./operator.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class OperatorComponent {
   @Input() operator: OperatorDoc;
 
-  private readonly baseSourceUrl = 'https://github.com/ReactiveX/rxjs/blob/master/src/operators/';
-  private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
+  private readonly baseSourceUrl = "https://github.com/ReactiveX/rxjs/blob/master/src/operators/";
+  private readonly baseSpecUrl = "http://reactivex.io/rxjs/test-file/spec-js/operators";
 
   get operatorName() {
     return this.operator.name;
   }
 
   get signature() {
-    return this.operator.signature || 'Signature Placeholder';
+    return this.operator.signature || "Signature Placeholder";
   }
 
   get marbleUrl() {
@@ -30,17 +35,26 @@ export class OperatorComponent {
   }
 
   get shortDescription() {
-    return this.operator.shortDescription && this.operator.shortDescription.description;
+    return (
+      this.operator.shortDescription &&
+      this.operator.shortDescription.description
+    );
   }
 
   get shortDescriptionExtras() {
-    return this.operator.shortDescription && this.operator.shortDescription.extras;
+    return (
+      this.operator.shortDescription && this.operator.shortDescription.extras
+    );
   }
 
   get walkthrough() {
     return this.operator.walkthrough && this.operator.walkthrough.description;
   }
 
+  get walkthroughExtras() {
+    return this.operator.walkthrough && this.operator.walkthrough.extras;
+  }
+
   get parameters() {
     return this.operator.parameters || [];
   }

src/operator-docs/combination/combineLatest.ts

@@ -1,34 +1,37 @@
-import { OperatorDoc } from '../operator.model';
+import { OperatorDoc } from "../operator.model";
 
 export const combineLatest: OperatorDoc = {
-  'name': 'combineLatest',
-  'operatorType': 'combination',
-  'signature': 'public combineLatest(observables: ...Observable, project: function): Observable',
-  "useInteractiveMarbles": true,
-  'parameters': [
+  name: "combineLatest",
+  operatorType: "combination",
+  signature:
+    "public combineLatest(observables: ...Observable, project: function): Observable",
+  useInteractiveMarbles: true,
+  parameters: [
     {
-      'name': 'other',
-      'type': 'Observable',
-      'attribute': '',
-      'description': 'An input Observable to combine with the source Observable. More than one input Observables may be given as argument.'
+      name: "other",
+      type: "Observable",
+      attribute: "",
+      description:
+        "An input Observable to combine with the source Observable. More than one input Observables may be given as argument."
     },
     {
-      'name': 'other',
-      'type': 'function',
-      'attribute': 'optional',
-      'description': 'An optional function to project the values from the combined latest values into a new value on the output Observable.'
+      name: "other",
+      type: "function",
+      attribute: "optional",
+      description:
+        "An optional function to project the values from the combined latest values into a new value on the output Observable."
     }
   ],
-  'marbleUrl': 'http://reactivex.io/rxjs/img/combineLatest.png',
-  'shortDescription': {
-    'description': `
+  marbleUrl: "http://reactivex.io/rxjs/img/combineLatest.png",
+  shortDescription: {
+    description: `
       Combines multiple Observables to create an Observable whose values
       are calculated from the latest values of each of its input Observables.
     `,
-    'extras': []
+    extras: []
   },
-  'walkthrough': {
-    'description': `
+  walkthrough: {
+    description: `
       <p>
         <span class="markdown-code">combineLatest</span> combines the values from this Observable with values from
         Observables passed as arguments. This is done by subscribing to each
@@ -40,10 +43,11 @@ export const combineLatest: OperatorDoc = {
       </p>
     `
   },
-  'examples': [
+  examples: [
     {
-      'name': 'Dynamically calculate the Body-Mass Index from an Observable of weight and one for height',
-      'code': `
+      name:
+        "Dynamically calculate the Body-Mass Index from an Observable of weight and one for height",
+      code: `
         const weight = Rx.Observable.of(70, 72, 76, 79, 75);
         const height = Rx.Observable.of(1.76, 1.77, 1.78);
         const bmi = weight.combineLatest(height, (w, h) => w / (h * h));
@@ -55,9 +59,12 @@ export const combineLatest: OperatorDoc = {
         */
         bmi.subscribe(x => console.log('BMI is ' + x));
       `,
-      'externalLink': { 'platform': 'JSBin', 'url': 'http://jsbin.com/pivowunedu/1/embed?js,console'}
+      externalLink: {
+        platform: "JSBin",
+        url: "http://jsbin.com/pivowunedu/1/embed?js,console"
+      }
     }
   ],
-  'relatedOperators': [ 'combineAll', 'merge', 'withLatestFrom' ],
-  'additionalResources': []
+  relatedOperators: ["combineAll", "merge", "withLatestFrom"],
+  additionalResources: []
 };

src/operator-docs/transformation/groupBy.ts

@@ -1,6 +1,134 @@
-import { OperatorDoc } from '../operator.model';
+import { OperatorDoc } from "../operator.model";
 
 export const groupBy: OperatorDoc = {
-  'name': 'groupBy',
-  'operatorType': 'transformation'
+  name: "groupBy",
+  operatorType: "transformation",
+  signature: `
+    public groupBy(keySelector: (value: T) => K,
+                   elementSelector?: ((value: T) => R) | void,
+                   durationSelector?: (grouped: GroupedObservable<K, R>) => Observable<any>,
+                   subjectSelector?: () => Subject<R>)
+          : Observable<any>): OperatorFunction<T, GroupedObservable<K, R>>`,
+  parameters: [
+    {
+      name: "keySelector",
+      type: "(value: T) => K",
+      attribute: "",
+      description: `A function that extracts the key used for grouping for each item.`
+    },
+    {
+      name: "elementSelector",
+      type: "((value: T) => R) | void",
+      attribute: "optional",
+      description: `A function that extracts the emitted element for each item. Default is identity function.`
+    },
+    {
+      name: "durationSelector",
+      type: "(grouped: GroupedObservable<K, R>) => Observable<any>",
+      attribute: "optional",
+      description: `A function that returns an Observable to determine how long each group should exist.`
+    },
+    {
+      name: "subjectSelector",
+      type: "() => Subject<R>",
+      attribute: "optional",
+      description: ``
+    }
+  ],
+  marbleUrl: "http://reactivex.io/rxjs/img/groupBy.png",
+  shortDescription: {
+    description: `
+      Group, according to a specified key, elements from items emitted by an Observable,
+      and emit these grouped items as GroupedObservables, one GroupedObservable per group.
+    `,
+    extras: []
+  },
+  walkthrough: {
+    description: `
+    <p>When the Observable emits an item, a key is computed for this item with the keySelector function.</p>
+
+    <p>If a GroupedObservable for this key exists, this GroupedObservable emits. Elsewhere, a new
+    GroupedObservable for this key is created and emits.</p>
+
+    <p>A GroupedObservable represents values belonging to the same group represented by a common key.
+    The common key is available as the key field of a GroupedObservable instance.</p>
+
+    <p>The elements emitted by GroupedObservables are by default the items emitted by the Observable,
+    or elements returned by the elementSelector function.
+    `
+  },
+  examples: [
+    {
+      name: "Group objects by id and return as array",
+      code: `
+        interface Obj {
+          id: number;
+          name: string;
+        }
+        Rx.Observable.of<Obj>({id: 1, name: 'aze1'},
+                              {id: 2, name: 'sf2'},
+                              {id: 2, name: 'dg2'},
+                              {id: 1, name: 'erg1'},
+                              {id: 1, name: 'df1'},
+                              {id: 2, name: 'sfqfb2'},
+                              {id: 3, name: 'qfs3'},
+                              {id: 2, name: 'qsgqsfg2'})
+          .groupBy(p => p.id)
+          .flatMap( (group$) => group$.reduce((acc, cur) => [...acc, cur], []))
+          .subscribe(p => console.log(p));
+        /*
+          Output:
+          [ { id: 1, name: 'aze1' },
+            { id: 1, name: 'erg1' },
+            { id: 1, name: 'df1' } ]
+
+          [ { id: 2, name: 'sf2' },
+            { id: 2, name: 'dg2' },
+            { id: 2, name: 'sfqfb2' },
+            { id: 2, name: 'qsgqsfg2' } ]
+
+          [ { id: 3, name: 'qfs3' } ]
+        */
+        `,
+      externalLink: {
+        platform: "JSBin",
+        url: "http://jsbin.com/linekelumo/1/embed?js,console"
+      }
+    },
+    {
+      name: "Pivot data on the id field",
+      code: `
+      interface Obj {
+        id: number;
+        name: string;
+      }
+      Rx.Observable.of<Obj>({id: 1, name: 'aze1'},
+                            {id: 2, name: 'sf2'},
+                            {id: 2, name: 'dg2'},
+                            {id: 1, name: 'erg1'},
+                            {id: 1, name: 'df1'},
+                            {id: 2, name: 'sfqfb2'},
+                            {id: 3, name: 'qfs1'},
+                            {id: 2, name: 'qsgqsfg2'})
+        .groupBy(p => p.id, p => p.name)
+        .flatMap( (group$) => group$.reduce((acc, cur) => [...acc, cur], ["" + group$.key]))
+        .map(arr => ({'id': parseInt(arr[0]), 'values': arr.slice(1)}))
+        .subscribe(p => console.log(p));
+      /*
+        Output:
+        { id: 1, values: [ 'aze1', 'erg1', 'df1' ] }
+
+        { id: 2, values: [ 'sf2', 'dg2', 'sfqfb2', 'qsgqsfg2' ] }
+
+        { id: 3, values: [ 'qfs1' ] }
+      */
+        `,
+      externalLink: {
+        platform: "JSBin",
+        url: "http://jsbin.com/racikizeji/embed?js,console"
+      }
+    }
+  ],
+  relatedOperators: [],
+  additionalResources: []
 };