@obliczeniowo/elementary

History of changes

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-ball-progress-bar

lib-color-picker-control

lib-color-component

lib-horizontal-progress-bar

lib-linear-diagram-2d

lib-slider

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

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

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) {
    ...