{"id":13802452,"url":"https://github.com/kitten/rxjs-diagrams","last_synced_at":"2025-05-13T13:31:22.311Z","repository":{"id":78159886,"uuid":"78481558","full_name":"kitten/rxjs-diagrams","owner":"kitten","description":"React Components for visualising RxJS observables and operators","archived":true,"fork":false,"pushed_at":"2017-02-27T23:04:54.000Z","size":1319,"stargazers_count":128,"open_issues_count":0,"forks_count":5,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-05-02T05:19:24.648Z","etag":null,"topics":["react","react-components","rxjs","rxjs-diagrams"],"latest_commit_sha":null,"homepage":"http://rxjs-diagrams.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kitten.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-01-10T00:19:44.000Z","updated_at":"2023-06-27T12:55:52.000Z","dependencies_parsed_at":"2023-02-27T21:30:33.546Z","dependency_job_id":null,"html_url":"https://github.com/kitten/rxjs-diagrams","commit_stats":null,"previous_names":["philpl/rxjs-diagrams"],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitten%2Frxjs-diagrams","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitten%2Frxjs-diagrams/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitten%2Frxjs-diagrams/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitten%2Frxjs-diagrams/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kitten","download_url":"https://codeload.github.com/kitten/rxjs-diagrams/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225218071,"owners_count":17439713,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-components","rxjs","rxjs-diagrams"],"created_at":"2024-08-04T00:01:44.819Z","updated_at":"2024-11-18T17:31:28.074Z","avatar_url":"https://github.com/kitten.png","language":"JavaScript","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/philpl/rxjs-diagrams/master/docs/preview.gif\" width=500\u003e\u003c/p\u003e\n\u003ch2 align=\"center\"\u003eRxJS Diagrams\u003c/h2\u003e\n\u003cp align=\"center\"\u003e\n\u003cstrong\u003eReact Components for visualising RxJS observables and operators\u003c/strong\u003e\n\u003cbr\u003e\u003cbr\u003e\n\u003ca href=\"https://npmjs.com/package/rxjs-diagrams\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/rxjs-diagrams.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://npmjs.com/package/rxjs-diagrams\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/rxjs-diagrams.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n**RxJS Diagrams** provides React Components for interactively visualising RxJS observables and operators.\nIt is a rewrite (and redesign) of the amazing [RxMarbles](http://rxmarbles.com/).\nThe goal is to provide simple and reusable components for quickly explaining how RxJS works.\n\n```bash\nnpm install --save rxjs-diagrams\n```\n\nDon't forget to install its peer dependencies, `react` and `rxjs`.\n\n## Usage\n\n### One input stream\n\nThis renders an SVG showing the input values and the result.\nThe input values are converted to an observables and then transformed\nto an output using the transform prop.\n\n```js\nimport 'rxjs' // This imports all observables, operators, etc\nimport OperatorDiagram from 'rxjs-diagrams'\n\n// Somewhere in your components...\n\u003cOperatorDiagram\n  label=\".distinctUntilChanged()\"\n  transform={obs =\u003e obs.distinctUntilChanged()}\n  emissions={[\n    { x: 5, d: 1 },\n    { x: 35, d: 1 },\n    { x: 70, d: 3 }\n  ]}\n  end={80}\n  completion={80}\n/\u003e\n```\n\n### Two input streams\n\nHaving multiple input streams is as simple as passing multiple value arrays\nand accepting them in your transform function.\n\n```js\nimport { Observable } from 'rxjs'\nimport OperatorDiagram from 'rxjs-diagrams'\n\n// Somewhere in your components...\n\u003cOperatorDiagram\n  label=\".combineLatest((x, y) =\u003e '' + x + y)\"\n  transform={(a, b) =\u003e Observable.combineLatest(a, b, (x, y) =\u003e '' + x + y)}\n  emissions={[\n    [\n      { x: 5, d: 1 },\n      { x: 35, d: 2 },\n      { x: 70, d: 3 }\n    ], [\n      { x: 10, d: 'A' },\n      { x: 45, d: 'B' },\n      { x: 80, d: 'C' }\n    ]\n  ]}\n  end={80}\n  completion={80}\n/\u003e\n```\n\n## API\n\nExports:\n\n- transformEmissions\n- EmissionsView (Docs TODO)\n- TransitionEmissionsView (Docs TODO)\n- DraggableEmissionsView (Docs TODO)\n- ChainDiagram (Docs TODO)\n- OperatorDiagram (also the default export)\n\n### Emissions, End \u0026 Completion\n\nThe common three values that describe your input are: emissions, end, and completion.\nThis is enough for this library to generate an input observable.\n\n**Emissions** are an array of objects, which have a time value `x` and a label `d`.\nThe value `x` must be a number. (Example: `{ x: 5, d: 'A' }`)\n\n**Completion** is the time value when your observable completes. It is a number\nand usually you'll want it to be larger than all `x` values of your emissions.\n\n**End** is where the component stops to draw your observable. It basically defines\nhow long in time the diagram is. So if your `end` is `20` and an emission's `x`\nis `10`, then the emission will be drawn right in the center.\n\n### OperatorDiagram\n\n#### Props\n\n- `label?: string`: Some text that describes your transformation.\n\n- `transform: (...input, scheduler)`: A function that transforms the input observables and\n  produces an output. It receives the input observables as the first arguments and the scheduler\n  last. You will need the scheduler to transform the virtual observable's time. For example for\n  `delay`. More information on Schedulers\n  [here](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/schedulers.md)\n\n- `emissions: Emission[] | Emission[][]`: Here you can pass an array of emissions (described above)\n  or an array of an array of emissions, in case you want multiple input observables.\n\n- `end: number`: Described above.\n\n- `completion: number`: Described above.\n\n- `width: number`: The width of the resulting SVG.\n\n- `height: number`: The height of the resulting SVG component.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitten%2Frxjs-diagrams","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkitten%2Frxjs-diagrams","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitten%2Frxjs-diagrams/lists"}