Skip to content

Commit f691e0c

Browse files
rapczynskarapczynska
committed
Fix timeline routing, add introduction section description
1 parent 766f23c commit f691e0c

File tree

11 files changed

+133
-122
lines changed

11 files changed

+133
-122
lines changed

‎src/app/app-routing.module.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {LineComponent} from './design-tokens/line/line.component';
1111
import {ShapeComponent} from './design-tokens/shape/shape.component';
1212
import {SizeComponent} from './design-tokens/size/size.component';
1313
import {OverviewComponent} from './components/overview/overview.component';
14-
import {ObservableComponent} from './components/observable/observable.component';
14+
import {TimelineComponent} from './components/timeline/timeline.component';
1515
import {TimeSpanComponent} from './components/time-span/time-span.component';
1616
import {EventInTimeComponent} from './components/event-in-time/event-in-time.component';
1717
import {OperationComponent} from './components/operation/operation.component';
@@ -73,7 +73,7 @@ const routes: Routes = [
7373
component: ComponentsComponent,
7474
children: [
7575
{path: 'overview', component: OverviewComponent},
76-
{path: 'observable', component: ObservableComponent},
76+
{path: 'timeline', component: TimelineComponent},
7777
{path: 'time-span', component: TimeSpanComponent},
7878
{path: 'event-in-time', component: EventInTimeComponent},
7979
{path: 'notifications', component: NotificationsComponent},

‎src/app/app.module.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {LineComponent} from './design-tokens/line/line.component';
1717
import {ShapeComponent} from './design-tokens/shape/shape.component';
1818
import {SizeComponent} from './design-tokens/size/size.component';
1919
import {OverviewComponent} from './components/overview/overview.component';
20-
import {ObservableComponent} from './components/observable/observable.component';
20+
import {TimelineComponent} from './components/timeline/timeline.component';
2121
import {TimeSpanComponent} from './components/time-span/time-span.component';
2222
import {EventInTimeComponent} from './components/event-in-time/event-in-time.component';
2323
import {OperationComponent} from './components/operation/operation.component';
@@ -69,7 +69,7 @@ import {DiagramDetailsComponent} from './mds-diagrams/diagram-details/diagram-de
6969
ShapeComponent,
7070
SizeComponent,
7171
OverviewComponent,
72-
ObservableComponent,
72+
TimelineComponent,
7373
TimeSpanComponent,
7474
EventInTimeComponent,
7575
OperationComponent,

‎src/app/components/timeline/timeline.component.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
<h1>Observable</h1>
1+
<h1>Timeline</h1>
22
<div class="text-block">
33
<p>
4-
Observable represents a data stream that can be actively observed over time. The solid timeline is directly
5-
related to the Observable being active and continuously emitting data or events. As long as the Observable is
6-
active and responsive, the timeline remains coherent, allowing developers to work with real-time data and events
7-
effectively.
4+
Time in marble diagrams is represented as an arrow going from left to right. The arrow at the same time is also
5+
a representation of an Observable itself. The solid timeline is directly related to the Observable being active
6+
and continuously emitting data or events. As long as the Observable is active and responsive, the timeline
7+
remains coherent. Time is measured in frames, a superset of blocks. 1 frame is 2 blocks
88
</p>
99
</div>
1010
<div class="preview-block">
11-
<figure role="group" *ngFor="let observable of observables">
11+
<figure role="group" *ngFor="let timeline of timelines">
1212
<img
13-
[class]="observable.styleClass"
14-
[src]="observable.img"
15-
alt="{{ observable.alt }}"
13+
[class]="timeline.styleClass"
14+
[src]="timeline.img"
15+
alt="{{ timeline.alt }}"
1616
loading="lazy"
1717
/>
1818
<figcaption>
19-
<span>{{ observable.desc }}</span>
19+
<span>{{ timeline.desc }}</span>
2020
</figcaption>
2121
</figure>
2222
</div>

‎src/app/components/timeline/timeline.component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import { Component, OnInit } from '@angular/core';
22

33
@Component({
4-
selector: 'mds-time',
5-
templateUrl: './time.component.html',
6-
styleUrls: ['./time.component.scss']
4+
selector: 'mds-timeline',
5+
templateUrl: './timeline.component.html',
6+
styleUrls: ['./timeline.component.scss']
77
})
8-
export class TimeComponent implements OnInit {
8+
export class TimelineComponent implements OnInit {
99

10-
public observables = [
10+
public timelines = [
1111
{
12-
img: '/assets/graphics/components/observable/timeline1.svg',
12+
img: '/assets/graphics/components/timeline/timeline1.svg',
1313
alt: 'Timeline 1 Graphic',
1414
},
1515
{
16-
img: '/assets/graphics/components/observable/timeline2.svg',
16+
img: '/assets/graphics/components/timeline/timeline2.svg',
1717
alt: 'Timeline 2 Graphic',
1818
styleClass: 'big'
1919
}

‎src/app/design-tokens/color/color.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@ <h2>Color Palettes</h2>
4747
<p>
4848
For <strong>“notification” colors</strong> you can use the defined colors 1
4949
- 4 or any other color of your choice. All notification colors have the same
50-
meaning. There is no “danger” or “success” color.
50+
meaning. There is no “danger” or “success” color. Below you can find some
51+
example sets of colors to be used as a diagram pallete.
5152
</p>
5253
</div>
5354
<h3>Palette 1</h3>

‎src/app/diagrams/multiple-notifications/multiple-notifications.component.html‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
<h1>Multiple Notifications in One Frame</h1>
22
<div class="text-block">
3-
<p></p>
3+
<p>As notifications can only be placed in frames,they can not overlap. However, technically it is possible to have
4+
multiple notifications in one frame. In very rare cases there can be multiple different colors and shapes in the
5+
same frame. In this case we use the legend to provide enough information.</p>
46
</div>
57
<div class="preview-block">
6-
<figure
7-
role="group"
8-
*ngFor="let multipleNotification of multipleNotifications"
9-
>
10-
<img
11-
[class]="multipleNotification.styleClass"
12-
[src]="multipleNotification.img"
13-
alt="{{ multipleNotification.alt }}"
14-
loading="lazy"
15-
/>
16-
<figcaption>
8+
<figure
9+
role="group"
10+
*ngFor="let multipleNotification of multipleNotifications"
11+
>
12+
<img
13+
[class]="multipleNotification.styleClass"
14+
[src]="multipleNotification.img"
15+
alt="{{ multipleNotification.alt }}"
16+
loading="lazy"
17+
/>
18+
<figcaption>
1719
<span *ngIf="multipleNotification.desc">{{
18-
multipleNotification.desc
19-
}}</span>
20-
</figcaption>
21-
</figure>
20+
multipleNotification.desc
21+
}}</span>
22+
</figcaption>
23+
</figure>
2224
</div>

‎src/app/introduction/introduction.component.html‎

Lines changed: 88 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,112 @@
11
<h1>The idea behind the MarbleDesignSystem</h1>
22
<div class="text-block">
3-
<p>
4-
<strong>
5-
Diagrams have the unique ability to express complex things simply.<br />
6-
Never had reactive programming been made so visual.<br />
7-
Diagrams is transforming information into compelling images.
8-
</strong>
9-
</p>
10-
<p>
11-
Marble diagrams serve a <strong>method for</strong> us to
12-
<strong>visualize processes over time.</strong>
13-
</p>
14-
<p>
15-
The overall goal of the MarbleDesignSystem is to
16-
<strong>provide a unified way</strong> of
17-
<strong>reading and creating</strong> stream based diagrams, in particular
18-
one specific type of it, the <strong>marble diagrams</strong>.
19-
</p>
20-
<p>
21-
This guide explains all building blocks of the design system step by step
22-
and in detail.
23-
</p>
24-
<p>
25-
In general we have some main rules that system follows:
26-
</p>
27-
<ul>
28-
<li><span class="bullet"></span>Consistent</li>
29-
<li><span class="bullet"></span>Intuitive</li>
30-
<li><span class="bullet"></span>Easy</li>
31-
<li><span class="bullet"></span>Detailed</li>
32-
<li><span class="bullet"></span>Technically Correct</li>
33-
</ul>
3+
<p>
4+
<strong>
5+
Diagrams have the unique ability to express complex things simply.<br/>
6+
Never had reactive programming been made so visual.<br/>
7+
Diagrams is transforming information into compelling images.
8+
</strong>
9+
</p>
10+
<p>
11+
Marble diagrams serve a <strong>method for</strong> us to
12+
<strong>visualize processes over time.</strong>
13+
</p>
14+
<p>
15+
The overall goal of the MarbleDesignSystem is to
16+
<strong>provide a unified way</strong> of
17+
<strong>reading and creating</strong> stream based diagrams, in particular
18+
one specific type of it, the <strong>marble diagrams</strong>.
19+
</p>
20+
<p>
21+
This guide explains all building blocks of the design system step by step
22+
and in detail.
23+
</p>
24+
<p>
25+
In general we have some main rules that system follows:
26+
</p>
27+
<ul>
28+
<li><span class="bullet"></span>Consistent</li>
29+
<li><span class="bullet"></span>Intuitive</li>
30+
<li><span class="bullet"></span>Easy</li>
31+
<li><span class="bullet"></span>Detailed</li>
32+
<li><span class="bullet"></span>Technically Correct</li>
33+
</ul>
3434
</div>
3535

3636
<h2>Consistency</h2>
3737
<div class="text-block">
38-
<p>
39-
There are several things to follow if you try to create a standard. One of
40-
them is more <strong>critical for a positive outcome</strong> than
41-
everything else, <strong>consistency</strong>.
42-
</p>
43-
<p>
44-
By working with a standardized, reproducible approach we managed to create a
45-
consistent way of drawing marble diagrams. A set of rules developed over
46-
many many iterations, adopted and simplified to serve as a guideline and
47-
blueprint for creating and using these diagrams.
48-
</p>
38+
<p>
39+
There are several things to follow if you try to create a standard. One of
40+
them is more <strong>critical for a positive outcome</strong> than
41+
everything else, <strong>consistency</strong>.
42+
</p>
43+
<p>
44+
By working with a standardized, reproducible approach we managed to create a
45+
consistent way of drawing marble diagrams. A set of rules developed over
46+
many many iterations, adopted and simplified to serve as a guideline and
47+
blueprint for creating and using these diagrams.
48+
</p>
4949
</div>
5050

5151
<h2>Intuitive</h2>
5252
<div class="text-block">
53-
<p>
54-
As programming with Rx is hard we made sure to keep it intuitive. By
55-
<strong>including</strong> a lot of <strong>people</strong> into the process
56-
of the creation of this guide we collected a lot of
57-
<strong>personal feedback</strong> to improve the system.
58-
</p>
59-
<p>
60-
To make sure we consider a <strong>common way</strong> interpretation we
61-
created several <strong>public polls</strong> we were collected and
62-
evaluated the general understanding. This helped us to make our system
63-
<strong>intuitive to understand</strong>.
64-
</p>
53+
<p>
54+
As programming with Rx is hard we made sure to keep it intuitive. By
55+
<strong>including</strong> a lot of <strong>people</strong> into the process
56+
of the creation of this guide we collected a lot of
57+
<strong>personal feedback</strong> to improve the system.
58+
</p>
59+
<p>
60+
To make sure we consider a <strong>common way</strong> interpretation we
61+
created several <strong>public polls</strong> we were collected and
62+
evaluated the general understanding. This helped us to make our system
63+
<strong>intuitive to understand</strong>.
64+
</p>
6565
</div>
6666

6767
<h2>Easy</h2>
6868
<div class="text-block">
69-
<p>
70-
As mindset behind the system are several principles. One of them is “<strong
71-
>Easy to adopt and create</strong
69+
<p>
70+
As mindset behind the system are several principles. One of them is “<strong
71+
>Easy to adopt and create</strong
7272
>”, which means we want to provide <strong>a way for everybody</strong> to
73-
<strong>read and create</strong> marble diagrams.
74-
</p>
75-
<p>
76-
To achieve this we create all diagrams in either googleSlides oder
77-
Powerpoint. We believe this two options <strong>enable</strong> a big group
78-
of people to <strong>edit and draw</strong> these <strong>diagrams</strong>.
79-
</p>
73+
<strong>read and create</strong> marble diagrams.
74+
</p>
75+
<p>
76+
To achieve this we create all diagrams in either googleSlides oder
77+
Powerpoint. We believe this two options <strong>enable</strong> a big group
78+
of people to <strong>edit and draw</strong> these <strong>diagrams</strong>.
79+
</p>
8080
</div>
8181

8282
<h2>Detailed</h2>
8383
<div class="text-block">
84-
<p>
85-
Marble diagrams exist since a long time now. As there was no well thought
86-
standard out there and not all edge cases considered, people started to
87-
create their own solutions to visualize processes. These let to a variety of
88-
different ways of drawing these diagrams. Some of the better approaches were
89-
able to visualize more complex prozesses, but there is one essential thing
90-
which nobody considered yet, but which is most critical to understand
91-
processes based on Rx. The internal behavior of operators.
92-
</p>
93-
<p>
94-
This system is not only providing a consistent, standardized way of drawing
95-
marble diagrams, but also offers a way to visualize the internals of
96-
operators. Of course based on the systems rules itself.
97-
</p>
84+
<p>
85+
Marble diagrams exist since a long time now. As there was no well thought
86+
standard out there and not all edge cases considered, people started to
87+
create their own solutions to visualize processes. These let to a variety of
88+
different ways of drawing these diagrams. Some of the better approaches were
89+
able to visualize more complex processes, but there is one essential thing
90+
which nobody considered yet, but which is most critical to understand
91+
processes based on Rx. The internal behavior of operators.
92+
</p>
93+
<p>
94+
This system is not only providing a consistent, standardized way of drawing
95+
marble diagrams, but also offers a way to visualize the internals of
96+
operators. Of course based on the systems rules itself.
97+
</p>
9898
</div>
9999

100100
<h2>Technically Correct</h2>
101101
<div class="text-block">
102-
<p>
103-
//
104-
</p>
102+
<p>
103+
Marble diagrams accurately represent the asynchronous nature of RxJS streams and illustrate how data flows
104+
through streams and how operators transform that data over time. Time can be paused, resumed, or advanced as
105+
needed, showing how different operations react to the passage of time and the arrival of new values. They can be
106+
customized to match specific use cases or scenarios. Different shapes, colors, and labels can be used to
107+
represent various types of observables, operators, or emitted values. This visual representation makes it easy
108+
to understand the sequence of events in an asynchronous stream. Diagrams flexibility allows to suit different
109+
scenarios and learning environments, making them an invaluable tool for developers learning and working with
110+
RxJS.
111+
</p>
105112
</div>

‎src/app/toolbar/toolbar.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ const TREE_DATA: NavNode[] = [
7474
icon: 'remove'
7575
},
7676
{
77-
routerLink: '/components/observable',
78-
name: 'Observable',
77+
routerLink: '/components/timeline',
78+
name: 'Timeline',
7979
icon: 'remove'
8080
},
8181
{

‎src/assets/graphics/components/time/timeline1.svg‎ renamed to ‎src/assets/graphics/components/timeline/timeline1.svg‎

File renamed without changes.

‎src/assets/graphics/components/time/timeline2.svg‎ renamed to ‎src/assets/graphics/components/timeline/timeline2.svg‎

File renamed without changes.

0 commit comments

Comments
 (0)