@obliczeniowo/elementary

Components

Upgrade to Angular 12!

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

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

Components inside lib

Inside library You can find components:

lib-post-diagram

lib-status-bar

lib-color-picker-control

lib-color-component

lib-horizontal-progress-bar

lib-linear-diagram-2d

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-status-bar [value]="20" [effect3d]="false"></lib-status-bar>

Example of use in html with 3d effect

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

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 data set line color:

<lib-linear-diagram-2d [points]="points" [labels]="{ x: xLabel, y: yLabel, title: title }" [options]="
    {
    set: {
        color: '#ffaa00',
        stroke: 1,
        linePattern: LinePattern.NONE
    }
    }">
</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;
    greed?: GridOptions;
    set?: BaseDrawingOptions;
}

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