@obliczeniowo/elementary

Author

Krzysztof Zajączkowski

Home page: https://www.obliczeniowo.com.pl

History of changes

2-12-2021 - v1.2.10 add event emmitters for chess component on drag and drop and blocking default set chess on drop to handle it by your self

1-12-2021 - v1.2.10 add chess component

20-11-2021 - v1.2.8 add color function for formatting colors

20-11-2021 - v1.2.7 add text formatting input function for pie diagram

19-11-2021 - v1.2.5 add export to pdf file button for pie diagram

19-11-2021 - v1.2.4 fix problem with small pie values displaying on flat pie diagram

18-11-2021 - v1.2.3 add lib-flat-pie-diagram component

12-11.2021 - v1.2.2 event emit when calendar position was clicked

11-11-2021 - v1.2.1 upgrade to Angular 13!

11-11-2021 - v1.1.42 add basic calendar component with events to display on it

09-11-2021 - v1.1.41 add minus digit

08-11-2021 - v1.1.40 add digit module with digits components

07-11-2021 - v1.1.39 more flexible horizontal progress bar implementation

05-11-2021 - v1.1.38 auto recalculate dx & dy greed for 3D diagram component

05-11-2021 - v1.1.37 add export button to pdf for 3D diagram component

05-11-2021 - v1.1.36 a basic stuff of drawing 3D diagram

30-10-2021 - v1.1.35 add template to hover element

30-10-2021 - v1.1.34 repair bug connected to positioning pdf export button and tooltip

30-10-2021 - v1.1.33 add component DiagramPointHoverComponent that connect thru ng-content to LinerDiagram2DComponent and display point info on hover for vectors with displaying point option

30-10-2021 - v1.1.(31-32) add option to turn on cursor on diagram

29-10-2021 - v 1.1.30 add option to control align text of Y axis (and move y axis to right or left side of diagram)

27-10-2021 - v 1.1.29 yFormatter function

27-10-2021 - v 1.1.28 fix problem for negative value diagram

26-10-2021 - v 1.1.27 add x/y precision option

26-10-2021 - v 1.1.26 correct defautl drawing point fu

26-10-2021 - v 1.1.25 add posibility to draw points in your own way

23-10-2021 - v 1.1.24 add drawing legend option

21-10-2021 - v 1.1.23 fix align text problem in export to pdf

21-10-2021 - v 1.1.22 add clipping rec to svg and jspdf interface on grouping stuff!!!

20-10-2021 - v 1.1.21 group different parts of svg diagram using g element

19-10-2021 - v 1.1.20 add disable option to lib-slider component

19-10-2021 - v 1.1.19 add SliderModule with lib-slider component

18-10-2021 - v 1.1.18

18-10-2021 - v 1.1.16 correct min max settings

17-10-2021 - v 1.1.15 remove unnecesary classes

17-10-2021 - v 1.1.14 move classes to separated folder

17-10-2021 - v 1.1.13 move math class

17-10-2021 - v 1.1.12

17-10-2021 - v 1.1.11 move colors classes to separated lib folder call classes

17-10-2021 - v 1.1.10 change name lib-status-bar to lib-ball-progress-bar and move it to separated module

16-10-2021 - v 1.1.9 add autoIncreaseDecrease option for x & y axis

16-10-2021 - v 1.1.8 add dp option for scrale x and y

16-10-2021 - v 1.1.7 disable option for drawing line

16-10-2021 - v 1.1.6 add posibility of displaying points on diagram

15-10-2021 - v 1.1.5 add more then one settins for vector of points styles

15-10-2021 - v 1.1.4 add button for downloading diagram as PDF in lib-linear-diagram-2d

14-10-2021 - v 1.1.3 add posibility of add more then one vector of points for lib-linear-diagram-2d

Upgrade to Angular 12!

Components inside lib

Inside library You can find components:

lib-post-diagram

lib-flat-pie-diagram

lib-ball-progress-bar

lib-color-picker-control

lib-color-component

lib-horizontal-progress-bar

lib-linear-diagram-2d

lib-diagram-point-hover

lib-diagram3-d

lib-slider

lib-digit

lib-digits

lib-digital-timer

lib-calendar

lib-calendar-event

lib-month-control

Using lib-diagram

Install package:

npm i @obliczeniowo/elementary

Import module:

import { PostDiagramModule } from '@obliczeniowo/elementary/lib/post-diagram';

...

  imports: [
    BrowserModule,
    AppRoutingModule,
    PostDiagramModule // here is import
  ],

Inside of your own component:

import { Component } from '@angular/core';
import { ColorHSV, ColorRGB } from '@obliczeniowo/elementary';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'Diagram';
  xLabel = 'xLabel';
  yLabel = 'yLabel';

  diagramData: { [key: string]: number } = {
    'key 1': 100,
    'key 2': 200,
    'key 3': 1500,
    'key 4': 1,
    'key 5': 2,
    'key 6': 145,
    'key 7': 200,
    'key 8': 340,
    'key 9': 885,
    'key 10': 1234,
    'key 11': 450,
    'key 12': 800,
    'key 13': 3900,
    'key 14': 1300,
    'key 15': 1200,
    'key 16': 2500,
    'key 17': 1300,
    'key 18': 1200,
    'key 19': 2500,
  };

  colorFunction = (
    index: number,
    dataLength: number,
    value: number,
    max: number
  ): ColorRGB => {
    return ColorHSV.createColorHSV(
      180 - (180 * value) / max,
      0.5,
      255
    ).convertToRGB();
  }
}

In HTML:

<lib-post-diagram
    [diagramData]="diagramData"
    [diagramTitle]="title"
    [xLabel]="xLabel"
    [yLabel]="yLabel"
    [colorFunction]="colorFunction"
>
</lib-post-diagram>

Live example of working component is on my page: https://obliczeniowo.com.pl/1142

Using lib-flat-pie-diagram

In HTML:

<lib-flat-pie-diagram [data]="diagramData"></lib-flat-pie-diagram>

in ts:

diagramData: { [key: string]: number } = {
    klucz1: 100,
    'klucz 2': 200,
    'klucz 3': 1500,
    'klucz 4': 1,
    'klucz 5': 2,
    'klucz 6': 145,
    'klucz 7': 200,
    'klucz 8': 340,
    'klucz 9': 885,
    'klucz 10': 1234,
    'klucz 11': 450,
    'klucz 12': 800,
    'klucz 13': 3900,
    'klucz 14': 1300,
    'klucz 15': 1200,
    'klucz 16': 2500,
    'klucz 17': 1300,
    'klucz 18': 150,
    'klucz 19': 2500,
};

Live component: https://obliczeniowo.com.pl/1244

Using lib-status-bar

Example of use in html without 3d effect:

<lib-ball-progress-bar [value]="20" [effect3d]="false"></lib-ball-progress-bar>

Example of use in html with 3d effect

<lib-ball-progress-bar [value]="20"></lib-ball-progress-bar>

WARNING! On Firefox component not working correctly

Live example of working component is on my page: https://obliczeniowo.com.pl/1144

Using lib-color-picker-control and lib-color-component

Example of use in html for color picker with button:

<lib-color-picker-control></lib-color-picker-control>

Example of use in html for color component withour button:

<lib-color-component></lib-color-component>

Using lib-horizontal-progress-bar

Example of use in html for horizontal progress bar:

<lib-horizontal-progress-bar [value]="value" class="black"><lib-horizontal-progress-bar>

To change default colors use SCSS mixin:

@mixin vertical-progress-bar($class, $value-color, $background-color, $value-background-color, $frame-color) {
    ::ng-deep .#{$class} {
        #value {
            fill: $value-color !important;
        }

        #background-pattern {
            fill: $background-color !important;
        }

        #value-pattern {
            fill: $value-background-color !important;
        }

        #border-rect {
            stroke: $frame-color !important;
        }
    }
}

and make some kind of include stuff:

@include vertical-progress-bar('black', white, #bebebe, black, #bebebe);

More on my home page: https://www.obliczeniowo.com.pl/1241

Using lib-linear-diagram-2d

In html

<lib-linear-diagram-2d [points]="points" [labels]="{ x: xLabel, y: yLabel, title: title }">
</lib-linear-diagram-2d>

in ts file of component:

points: Point2D[] = []; // imported from import { Point2D } from '@obliczeniowo/elementary/lib/linear-diagram';

constructor() {
  for (let i = 0; i < 100; i++) {
    this.points.push(
        new Point2D(i, Math.random() * 100)
    );
  }
}

Example with changing settings of vector points line color and drawing points:

<lib-linear-diagram-2d
    [points]="points"
    [labels]="{ x: xLabel, y: yLabel, title: title }"
    [options]="{
        set: [{
            color: '#ffaa00',
            stroke: 1,
            linePattern: LinePattern.NONE,
            drawPoint: PointType.CIRCLE
        },
        {
            color: '#aaff00',
            stroke: 2,
            linePattern: LinePattern.NONE,
            drawPoint: PointType.X
        },
        {
            color: '#aa00ff',
            stroke: 2,
            linePattern: LinePattern.NONE,
            drawPoint: PointType.STAR
        },
        {
            color: '#aabbff',
            stroke: 1,
            linePattern: LinePattern.DISABLED,
            drawPoint: PointType.STAR
        }]
    }"
    >
</lib-linear-diagram-2d>

Where LinePattern need to be imported in ts component file:

import { LinePattern } from 'dist/components/lib/linear-diagram';

and then in component class:

LinePattern = LinePattern;

You can override more options just using interface:

export interface LinearDiagram2DOptions {
    xAxis?: AxisOptions;
    yAxis?: AxisOptions;
    xMinMax?: MinMax;
    yMinMax?: MinMax;
    greed?: GridOptions;
    set?: BaseDrawingOptions[];
}

You can see live example on my home page: https://obliczeniowo.com.pl/1239

Using lib-diagram3-d

In ts file generate a table of z values:

zValues: number[][] = [];

for (let x = 0; x < 20; x++) {
  const v = [];
  for (let y = 0; y < 20; y++) {
    v.push((Math.sin(x / 4) + Math.cos(y / 4)) * 50 - x * x / 10);
  }
  this.zValues.push(v);
}

in html:

<lib-diagram3-d [zValues]="zValues" [lattitude]="lattitude" [longditude]="longditude">
</lib-diagram3-d>

Live working diagram showcase can be see here: https://obliczeniowo.com.pl/1241

Example of use lib-slider component

Import:

import { SliderModule } from '@obliczeniowo/elementary/lib/slider';

in html:

<lib-slider [value]="30" (valueChanged)="changed($event)"></lib-slider>

or

<form [formGroup]="form">
    <lib-slider formControlName="valueControl" [value]="30"></lib-slider>
</form>

{{ form.getRawValue() | json }}

in component.ts for forms:

form = this.fb.group({
    valueControl: [60]
});

...

constructor(private fb: FormBuilder) {
    ...

Digital module

Example of use lib-digit

Code bellow display single digital number:

<lib-digit digit="0"></lib-digit>

Example of use lib-digits

Code bellow display integer number or string containing number

<lib-digits [integer]="1234567890"></lib-digits>

Example of use lib-digit-timer

Code bellow display digital timer:

<lib-digital-timer></lib-digital-timer>

Live working example

Live working diagram showcase can be see here: https://obliczeniowo.com.pl/1243

Example of use lib-calendar component with lib-mont-contro & lib-calendar-event

In html file:

<lib-month-control #monthControl></lib-month-control>

<lib-calendar
[monthControl]="monthControl"
[eventsList]="eventsList || null"
></lib-calendar>

<lib-events-list #eventsList>
<lib-calendar-event
    *ngFor="let event of eventsListData"
    [eventSettings]="event"
    ngProjectAs="eventslist"
>
    <h3
    ngProjectAs="title"
    [style.backgroundColor]="event.color"
    class='event-title'
    >
    {{ event.title }}
    </h3>
    <div ngProjectAs="body" class="event-body">
    {{ event.body }}
    </div>
</lib-calendar-event>
</lib-events-list>

in css or scss:

h3.event-title {
    display: flex;
    margin: 0;
    padding: 5px;
    font-size: 22px;
}

.event-body {
    padding: 30px 5px 5px 5px;
    display: flex;
}

lib-month-control {
    width: 320px;
}

in ts file:

export interface EventData extends EventSettings {
    title: string;
    body: string;
}

...

@Component(
    ...

    eventsListData: EventData[] = [];

    ...

    constructor() {
        const date = new Date();

        this.eventsListData.push({
        day: new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-14'),
        color: '#ffcc00',
        body: 'Some text for 14 day of ' + (date.getMonth() + 1) + 'th month',
        title: '14 day of ' + (date.getMonth() + 1) + ' th month'
        });

        this.eventsListData.push({
        day: new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-28'),
        color: '#189a18',
        body: 'Some text for 28 day of ' + (date.getMonth() + 1) + ' th month',
        title: '28 day of ' + (date.getMonth() + 1) + ' th month'
        });
    }

Live working example

Life example: https://www.obliczeniowo.com.pl/1143

Example of use lib-chess component

In HTML:

<lib-chess [chessPawnsMap]="chessPawns"></lib-chess>

In ts file constructor of component:

chessPawns: Map<string, ChessEnum> = new Map<string, ChessEnum>();

constructor() {
    this.chessPawns.set('a1', ChessEnum.whiteRook);
    this.chessPawns.set('h1', ChessEnum.whiteRook);

    this.chessPawns.set('a8', ChessEnum.blackRook);
    this.chessPawns.set('h8', ChessEnum.blackRook);

    this.chessPawns.set('b1', ChessEnum.whiteKnight);
    this.chessPawns.set('g1', ChessEnum.whiteKnight);

    this.chessPawns.set('b8', ChessEnum.blackKnight);
    this.chessPawns.set('g8', ChessEnum.blackKnight);

    this.chessPawns.set('c1', ChessEnum.whiteBishop);
    this.chessPawns.set('f1', ChessEnum.whiteBishop);

    this.chessPawns.set('c8', ChessEnum.blackBishop);
    this.chessPawns.set('f8', ChessEnum.blackBishop);

    this.chessPawns.set('d1', ChessEnum.whiteQueen);
    this.chessPawns.set('e1', ChessEnum.whiteKing);

    this.chessPawns.set('d8', ChessEnum.blackQueen);
    this.chessPawns.set('e8', ChessEnum.blackKing);

    for (const i of ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']) {
    this.chessPawns.set(i + 2, ChessEnum.whitePawn);
    this.chessPawns.set(i + 7, ChessEnum.blackPawn);
    }
}

Live example of component: https://obliczeniowo.com.pl/1150