@obliczeniowo/elementary

Components

This library was generated with Angular CLI version 11.0.9.

Components inside lib

Inside library You can find two components:

lib-diagram lib-status-bar lib-color-picker-control lib-color-component lib-horizontal-progress-bar

Using lib-diagram

Install package:

npm i @obliczeniowo/elementary

Import module:

import { ComponentsModule } from '@obliczeniowo/elementary/src/lib/components';

...

  imports: [
    BrowserModule,
    AppRoutingModule,
    ComponentsModule // 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-diagram
    [diagramData]="diagramData"
    [diagramTitle]="title"
    [xLabel]="xLabel"
    [yLabel]="yLabel"
    [colorFunction]="colorFunction"
>
</lib-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);