@obliczeniowo/elementary
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.10 • Public • Published

    Author

    Krzysztof Zajączkowski

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

    History of changes

    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);
        }
    }
    

    Install

    npm i @obliczeniowo/elementary@1.2.10

    Version

    1.2.10

    License

    ISC

    Unpacked Size

    5.42 MB

    Total Files

    273

    Last publish

    Collaborators

    • obliczeniowo