@obliczeniowo/elementary

Author

Krzysztof Zajączkowski

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

1.7.0 Angular 15 - list of changes

31-03-2023 1.7.80 obl-horizontal-progress-bar - add value accessor

30-03-2023 1.7.79 obl-marks-displayer - add value accessor

30-03-2023 1.7.78 obl-arch-progress - add value accessor

29-03-2023 1.7.77 obl-pie-progress - rename input from writeValue to write
add value accessor for reactive form and form control

29-03-2023 1.7.76 obl-two-arch-progress - add value accessor for reactive form and form control

28-03-2023 1.7.75 obl-equalizer - add value accessor for reactive form and form control too

28-03-2023 1.7.74 obl-channel-volume - add value accessor for reactive form and form control too

27-03-2023 1.7.72 obl-statistics-diagram add value accessor for reactive lovely form

27-03-2023 1.7.71 oblButton directive issue with icon solved

27-03-2023 1.7.70 obl-ball-progress-bar - add value accessor to support reactive forms

26-03-2023 1.7.69 obl-vertical-stepper - add iconTemplate input to handle displaying of icons in vertical stepper

26-03-2023 1.7.68 obl-stepper - add iconTemplate input to handle displaying of icons in stepper

26-03-2023 1.7.67 obl-vertical-stepper - add stepTemplate input to handle displaying of description and name fo step

26-03-2023 1.7.66 obl-stepper - add stepTemplate input to handle displaying content of description and name of step

26-03-2023 1.7.65 obl-vertical-stepper, obl-stepper - add css variables to control icons size and thickness of line

25-03-2023 1.7.64 obl-vertical-stepper add value accessor

25-03-2023 1.7.63 add obl-vertical-stepper

25-03-2023 1.7.62 fix style issue overridden locally by global style

25-03-2023 1.7.61 add Value_Accessor to obl-stepper to make magic happen thru form

25-03-2023 1.7.60 export Step

25-03-2023 1.7.59 obl-progress-stepper change interface name from Step to ProgressStep
obl-stepper new step component

25-03-2023 1.7.58 obl-input-wrapper add emitter for files list change and documentation

25-03-2023 1.7.57 obl-input-wrapper add use case for input[type=file]

23-03-2023 1.7.56 oblButton directive add toggle / select options to make button switchable

19-03-2023 1.7.55 oblButton directive add icon input to set icon inside the button, if loading is set to true icon is removed and added one loading is set to false. Of course icon = 'name of icon', if no icon name set then no icon is displayed

19-03-2023 1.7.54 oblButton directive add loading input to disable button with spinner inside

18-03-2023 1.7.53 obl-daily-statistics add option to set year picker range by settings

18-03-2023 1.7.52 obl-daily-statistics change styling of component and value-picker related

16-03-2023 1.7.51 fix bugs in obl-daily-statistics connected to change date ranges
add new option to display year picker inside of obl-daily-statistics

16-03-2023 1.7.50 obl-value-picker create dynamic model class to let make call to API, can't use streams there

13-03-2023 1.7.49 obl-year-picker, obl-month-picker, obl-value-picker add display option to control displaying next/previous buttons

12-03-2023 1.7.48 obl-year-picker add value accessor

12-03-2023 1.7.47 obl-year-picker and make more flexible obl-value-picker by using model input

12-03-2023 1.7.46 obl-month-picker, obl-value-picker add placeholder

12-03-2023 1.7.45 obl-month-picker based on obl-value-picker

12-03-2023 1.7.44 obl-value-picker add value accessor to support reactive forms

11-03-2023 1.7.43 obl-value-picker add templates way to change displaying items things

11-03-2023 1.7.42 add obl-value-picker component

11-03-2023 1.7.41 add getImageFromUrl method to oblFile service

06-03-2023 1.7.40 obl-clock-time display pre selected pointers on mouse over selecting area section

06-03-2023 1.7.39 obl-clock-time emit value on date change in interactive mode

05-03-2023 1.7.38 obl-time-picker component and extends obl-click-time with interactive mode

04-03-2023 1.7.37 obl-statistic-diagram component

03-03-2023 1.7.36 obl-daily-statistics border for selected one

02-03-2023 1.7.35 obl-spinner to change size use:

obl-spinner {
    &.size-100 {
        width: 100px;
    }

    &.size-75 {
        --obl-spinner-width: 75px;
    }
}

obl-daily-statistics add spinner when loading ext data

01-03-2023 1.7.34 display day statistic on hover over day in obl-daily-statistics

28-02-2023 1.7.33 align days headers in obl-daily-statistics

28-02-2023 1.7.32 display total/selected information in obl-daily-statistics component

26-02-2023 1.7.31 add obl-daily-statistics component to display counted statistics

11-02-2023 1.7.30 action directive for buttons

05-02-2023 1.7.29 export mark service

05-02-2023 1.7.28 add marks service to handle marks registration

31-01-2023 1.7.27 obl-mark component - add more marks

30-01-2023 1.7.26 obl-html-lines and obl-html-line set on push strategy

30-01-2023 1.7.25 obl-html-lines to draw more complex multiple polylines

24-01-2023 1.7.24 obl-html-line fix some problems with thickness of line

23-01-2023 1.7.23 obl-html-line component that let you draw line in clear HTML stuff (tell me how cool is that)

22-01-2023 1.7.22 obl-mark-displayer add digits numbers

16-01-2023 1.7.21 obl-marks-displayer component

16-01-2023 1.7.20 obl-mark-displayer component

08-01-2023 1.7.17 style for max size of sejm component

08-01-2023 1.7.16 add legend option to sejm component

08-01-2023 1.7.15 add obl-color-key-legend component

07-01-2023 1.7.14 some spelling stuff. The most important one in input wrapper prefix as name of select for ngProjectAs was changed. For rest ide should give you friendly hand

07-01-2023 1.7.13 add SejmComponent

27-12-2022 1.7.12 add SlideViewComponent

29-11-2022 1.7.9 add percentagesByAbsMax and percentagesByMax to ElementaryMath

29-11-2022 1.7.8 add percentagesByPosition and percentagesBySum to ElementaryMath

27-11-2022 1.7.7 add countUnique static method for ElementaryMath
change static method of ElementaryMath name from middle to average

27-11-2022 1.7.6 create PageLinearTree component

25-11-2022 1.7.5 control colors of PagesCircleTree component by using css classes

25-11-2022 1.7.4 spelling for css variables

25-11-2022 1.7.3 change naming convention to TemperatureModule & TemperatureComponent as well

25-11-2022 1.7.2 create basic pages-circle-tree component

23-11-2022 1.7.1 update rxjs

from 1.6.0 Angular 14 - list of changes

20-11-2022 1.6.112 refactoring of Point2D moved completely to classes and added new method setLength,
move ColorType to classes as well

02-11-2022 1.6.111 clear cache repaired

30-10-2022 1.6.110 add options to clear cache list when request is done and (what is most cool thing I guess) retrigger one just by give list of keys. Retriggering/cleaning will happen only when request not fail. And you should be carefully with this one, you can create retriggering loop. I guess it can be usefully for update list when put/post/patch/delete request related to list is done

add(user: User): Observable<User> {
    return this.http.post('http://localhost:3000/users', user, {
        cache: {
            retrigger: ['get:users'] // yep that's it and it will retrigger last call if key exist in cache of course! I think I don't have to tell you how cool is that
        }
    })
}

29-10-2022 1.6.109 add subjects to cache service that will emit values when cache with name is change or cleared, prevent strict access to cache Map object

29-10-2022 1.6.108 add more cache information about url & method
cache key as method:name (example: get:yourNameOfCache)
add option withCacheKey that will force to return response with CacheItem object

24-10-2022 1.6.107 cache extended option

22-10-2022 1.6.106 change cache model a bit so now:

export interface User {
    id: number;
    name: string;
    email: string;
    gender: 'female' | 'male';
    status: 'active' | 'inactive';
    date: Date;
}

@Injectable({
    providedIn: 'root'
})
    export class UsersService {

    constructor(protected http: HttpCacheService) { }

    get(reload?: true): Observable<User[]> {
        return this.http.get('https://gorest.co.in/public/v2/users', {
        cache: {
            name: 'users',
            type: reload && 'reload',
            convert: (data: User[]) => data.map(user => (user.date = new Date(), user)),
            reloadOn: (data: CacheItem<User[]>) => data.triggeredAt.getTime() + 5000 < (new Date().getTime())
        }
        })
    }
}

22-10-2022 1.6.105 create cache interceptor, cache service and http-cache service to handle globally caching of response. Simple example:

export interface User {
    id: number;
    name: string;
    email: string;
    gender: 'female' | 'male';
    status: 'active' | 'inactive';
    date: Date;
}

@Injectable({
providedIn: 'root'
})
export class UsersService {

    constructor(protected http: HttpCacheService) { }

    get(reload?: true): Observable<User[]> {
        return this.http.get('https://gorest.co.in/public/v2/users', {
        cache: {
            /** name of cache key (must be unique) */
            name: 'users',
            /** to override cache anyway */
            type: reload && 'reload',
            /** to cache transformed model */
            convert: (data: User[]) => data.map(user => (user.date = new Date(), user)),
            /** to let send request after 5000 [ms] */
            reloadOn: (data: User[]) => !!data.length && data[0].date.getTime() + 5000 < (new Date().getTime())
        }
        })
    }
}

and loading:

load(reload?: true) {
    this.users.get(reload).pipe(
    tap(users => console.log(users))
    ).subscribe(users => this.usersTable = users);
}

of course cache interceptor must exist on providers:

providers: [
    {
    provide: HTTP_INTERCEPTORS,
    useClass: CacheInterceptorService,
    multi: true
    },
],

15-10-2022 1.6.104 obl-perspective-slider component change transparency on animation move

14-10-2022 1.6.103 obl-perspective-slider component basic stuff

08-10-2022 1.6.102 obl-circle-menu add external data field per item and add parent to emitted item

08-10-2022 1.6.101 obl-circle-menu - add option for closing on click
move menu text when nr of parent items < 6

07-10-2022 1.6.100 obl-circle-menu - change model of CircleExtendedMenuItem and CircleMenuItem and emit only id and text field

07-10-2022 1.6.99 obl-circle-menu - revers direction of drawing menu pos arch

06-10-2022 1.6.98 obl-circle-menu - set color with css variable

06-10-2022 1.6.97 obl-circle-menu - add progress for circle menu when number of positions is more then 6

06-10-2022 1.6.96 obl-circle-menu - add animation for beggaring of displaying of circle menu

05-10-2022 1.6.95 obl-circle-menu - add animation for extended elements of circle menu

04-10-2022 1.6.94 obl-circle-menu - resolve FireFox issue

03-10-2022 1.6.93 obl-circle-menu - extending menu on hover

02-10-2022 1.6.92 obl-circle-menu - rotate buttons and add refactor code

02-10-2022 1.6.91 obl-circle-menu - resolve partially FireFox issue

02-10-2022 1.6.90 basic obl-circle-menu component with issue on FireFox to resolve and yep not finished yet.
@todo resolve problem on FF
@todo add extended menu on hover
@todo add animation when move menu up/down

28-09-2022 1.6.89 add disabled option to obl-hex-extended-button component

25-09-2022 1.6.88 add obl-hex-extended-button component

23-09-2022 1.6.87 add possibility to change buttons radius and padding from any place of scss/css component file by using css variables

18-09-2022 1.6.84 click outside of modal and select-dropdown fix problem

18-09-2022 1.6.83 add input that control border style of input control inside of obl-color

17-09-2022 1.6.82 add double border for color mark on obl-color and change name of component from obl-color-component to obl-color

17-09-2022 1.6.81 selecting color for obl-hex-color fix bug

17-09-2022 1.6.80 colorFn for obl-pie-progress component

17-09-2022 1.6.79 input color for obl-hex-color that let select palette color if given color in format of #ffaabb match one from palette

17-09-2022 1.6.78 create obl-hex-colors component as hex palette of colors

15-09-2022 1.6.77 obl-color emit value

15-09-2022 1.6.76 obl-color-picker component repair change detection error in console

13-09-2022 1.6.75 arrayToXlsx add options that let you set maxRows and headers

12-09-2022 1.6.74 arrayToXlsx function that let you save array as xlsx by using xlsx library

11-09-2022 1.6.73 option for download as csv or json file in obl-array-to-table component
add toJson method in Csv class

11-09-2022 1.6.72 add display option that take over option index of obl-array-to-table

11-09-2022 1.6.71 add template for caption of obl-array-to-table

10-09-2022 1.6.70 add display index option to obl-array-to-table

10-09-2022 1.6.69 optimize obl-array-to-table and obl-scroller-nav

10-09-2022 1.6.67 add editable mode for obl-from-array that let you edit single ceil of it
input-wrapper - new mode without border
add td[obl-editable-ceil]

08-09-2022 1.6.66 add header to obl-from-array
add headers to fromArray static constructor

06-09-2022 1.6.65 add fromArray static method for Csv class add download as csv button to obl-array-to-table component

06-09-2022 1.6.64 add getRawRow and getJsonRow methods to Csv class

05-09-2022 1.6.62 repair style for obl-progress-stepper

05-09-2022 1.6.61 add interactive mode for obl-pie-progress
add more documentation for obl-array-to-table
type for table restricted to (string|number)[] or (string|number)[][] for obl-array-to-table

03-09-2022 1.6.60 resolve problem with overlay cdk connected to style

03-09-2022 1.6.59 add obl-pie to obl-scroller-nav

03-09-2022 1.6.58 obl-array-to-table fix bug with obl-scroller-nav not showing

03-09-2022 1.6.57 obl-scroller-nav component
obl-array-to-table - use scroller

03-09-2022 1.6.56 add obl-array-to-table object
add new set of icons display perceptron data in obl-array-to-table components

02-09-2022 1.6.55 add errors to perceptron and obl-perceptron component

30-08-2022 1.6.54 add predicted values to diagram of obl-perceptron component

30-08-2022 1.6.53 add Perceptron class and obl-perceptron simple model component

27-08-2022 1.6.52 add obl-jumper component that emit value of step every 100 ms (by default)

26-08-2022 1.6.51 add prepare method for CSV
add prepare reverse parsing method for columns and global fix bug in parsing CSV file

25-08-2022 1.6.50 add parsing string default method to override in Csv class
add set of parsing method for remove pair of quotes from beginning and end of string
drag-and-drop directive a bit more documentation

22-08-2022 1.6.49 add parsing and throwing errors for CSV file

21-08-2022 1.6.48 add Csv parse class

19-08-2022 1.6.47 step for slider

19-08-2022 1.6.46 add min/max for slider component
add gradientUnits in g[obl-svg-linear-gradient] to control space coordinates
add gradientUnits in obl-simple-diagram2-d

15-08-2022 1.6.45 add obl-circle-progress-stepper basic functionality

13-08-2022 1.6.44 repair position of gradient

13-08-2022 1.6.43 add g[obl-svg-linear-gradient] component to replace section related to gradient inside obl-single-diagram2-d component

10-08-2022 1.6.42 obl-simple-diagram2-d add interpolation method

10-08-2022 1.6.41 obl-simple-diagram2-d correct recalculation

10-08-2022 1.6.39 obl-simple-diagram2-d add bottom diagram offset, emitter when recalculation is required, input for height, width proportions. Resolve problem with deformation of draw thru ng-content objects

10-08-2022 1.6.38 obl-simple-diagram2-d add diagram bottom padding input

10-08-2022 1.6.37 obl-simple-diagram2-d add transform function, add padding, move ng-content after draw diagram

09-08-2022 1.6.36 obl-simple-diagram2-d reverse diagram

09-08-2022 1.6.35 obl-simple-diagram2-d created

09-08-2022 1.6.34 obl-ball-progress change size by css

08-08-2022 1.6.33 obl-ball-progress finally work on firefox properly

08-08-2022 1.6.32 fix issue inside obl-pie-progress

08-08-2022 1.6.31 obl-progress-vertical-stepper done

06-08-2022 1.6.29 display statuses on progress stepper diagram in obl-progress-stepper

06-08-2022 1.6.28 add obl-loading-state & use it in obl-progress-stepper component

06-08-2022 1.6.27 obl-progress-stepper component basic done

05-08-2022 1.6.26 gradients on FF for obl-combine-categories components

01-08-2022 1.6.24 optimization of scss for combinations components

31-07-2022 1.6.23 move mixin from local to global

31-07-2022 1.6.22 move styles to mixin in global.scss now you can override default one in styles.scss of your project:

$obl-half-matrix-colors-category: (
  red,
  green,
  blue,
  orange,
  purple,
  #999900,
  magenta,
);

@include half-matrix($obl-half-matrix-colors-category);

31-07-2022 1.6.20-21 fix categories not showing on when using formGroup stuff set

30-07-2022 1.6.19 add disable chosen one combination on obl-half-matrix-combine-categories

30-07-2022 1.6.18 fix adapter for id and combine id and name

30-07-2022 1.6.17 repair styles in obl-half-matrix-combine-categories

30-07-2022 1.6.15 add new component obl-half-matrix-combine-categories that let you choose combinations of 2 to 7 different categories.

26-07-2022 1.6.12 add single option to display list of single, move mixin as global to let user override default one in style.scss:

@import "node_modules/@obliczeniowo/elementary/styles/global.scss";

$obl-color-category: (
1: #8a2c2c,
2: #864702,
3: #5a6801,
4: #015b6d,
5: #54018b,
6: #8a044b,
);

@include categories-colors($obl-color-category);

26-07-2022 1.6.10-11 repair switch all by category header when some is disabled partially

26-07-2022 1.6.9 add selective disabling category option by using disable=[[{ name: 'Category 1' }, { name: 'Category 2' }]] (depends on adapter you are using)

24-07-2022 1.6.8 add CombineIdAdapter

24-07-2022 1.6.7 value input

24-07-2022 1.6.6 add brand, brand new CombineNameAndIndexAdapter for obl-combine-categories component

24-07-2022 1.6.5 bugfix connected to set input for adapter

24-07-2022 1.6.4:

• Add abstract model to control input & output format of obl-combine-categories &component outside of component;
• Pointer on hover over clickable element

23-07-2022 1.6.3 Add toggle whole categories by click on category header in obl-combine-categories component

23-07-2022 1.6.2 Add ControlValueAccessor to obl-combine-categories

23-07-2022 1.6.1 Add basic obl-combine-categories component that let you combine categories

link to page with showcase: https://obliczeniowo.com.pl/1286

1.6.0 Update Angular to 14

from 1.5.1 version some component required to copy assets folder

You can add npm command:

"copy-assets": "node ./node_modules/@obliczeniowo/elementary/assets/scripts/copy.js ./src/assets/",

and than run it in console:

npm run copy-assets

or add command:

"serve": "npm run copy-assets && ng serve",

and run with copy of assets:

npm run serve

it will copy obl-icons folder to your assets folder and run project locally

From 1.3.24 version some components required include global style

In styles.scss import style file:

@import "node_modules/@obliczeniowo/elementary/styles/global.scss";

and from 1.3.25 theming is available by using for example in global styles.scss:

.dark-theme {
    --default-border-color: white;
    --default-border-outline-color: white;
    --default-focus-color: white;
    --default-border-outline-color: white;
    --default-disabled-color: #6e6e6e;
    --default-text-color: white;
    --default-background-color: #313131;
    --default-hover-color: #3b3b3b;

    --disabled-color: #9b9b9b;

    background: #242424;
    color: white;

    --select-item-background-color: #555555;
    --select-item-text-color: white;

    --default-checkbox-color: #1477c9;
    --default-radio-color: #1477c9;

    --digit-fill-color: #535353;
    --digit-lighted-color: #cccccc;

    --temperature-text-color: white;
    --temperature-path-stroke-color: white;

    --post-diagram-scale-line-color: #7a7a7a;
}

.light-theme {
    --default-border-outline-color: #dfdfdf;
    --default-hover-color: #eeeeee;
    --default-background-color: white;
    --default-text-color: #303030;
}

WARNING! Switching theme class must be assigned to body element of dom. Because popup elements are added on top level so call outside of the box so you can't wrap them properly from component level

You can use this piece of code to switch this one correctly:

toggleStyle() {
    const body = document.body;
    if (body.classList.contains('dark-theme')) {
        body.classList.add('light-theme');
        body.classList.remove('dark-theme');
    } else {
        body.classList.add('dark-theme');
        body.classList.remove('light-theme');
    }
}

History of changes

02-02-2022 - v1.5.20 repair base path for icons & dropdown style

25-01-2022 - v1.5.16 repair downloading file method

25-01-2022 - v1.5.15 add global style for cdk

24-01-2022 - v1.5.14 add file service

23-01-2022 - v1.5.13 add Drawable interface & draw method to drawing context object

23-01-2022 - v1.5.12 add ResizeWindowService to react on windows size changes

22-01-2022 - v1.5.11 add clear rect for canvas interface

22-01-2022 - v1.5.10 add closing polyline option to drawing interface function

22-01-2022 - v1.5.9 add DrawingCanvasInterface

20-01-2022 - v1.5.8 add oblTextArea directive

17-01-2022 - v1.5.7 add obl-message-dialog component to make life more simple for simple message dialogs at least

16-01-2022 - v1.5.6 it's time to change way of dealing with the oblButton directive. Now it's control colors by class and guess what? You can set own by your self and use mixin to create new set of style for buttons theme.

15-01-2022 - v1.5.4 finally add some basic modal things

06-01-2022 - v1.5.1 add icons module with obl-icon component and IconResourceService

02-01-2022 - v1.4.23 search mode loop icon in input wrapper

30-12-2021 - v1.4.22 add cancel button on input-wrapper

30-12-2021 - v1.4.20 create AbstractSearchDomain & change way of handling DropdownSelect component by model to give you control over source of data

29-12-2021 - v1.4.15 remove materials components from color picker component

29-12-2021 - v1.4.14 add outline/underline mode for input wrapper

28-12-2021 - v1.4.13 remove ugly text and add icons on input wrapper button of number type input

28-12-2021 - v1.4.12 add buttons for number input in input wrapper

28-12-2021 - v1.4.11 add spinner on tree component

28-12-2021 - v1.4.10 add obl-spinner component

28-12-2021 - v1.4.8 add obl-star-rating component

27-12-2021 - v1.4.6 add labels to selects elements

27-12-2021 - v1.4.5 add label to input wrapper

27-12-2021 - v1.4.3 add tree component

26-12-2021 - v1.4.2 update angular to 13.1.1. and material too

25-12-2021 - v1.4.1 no more lib- prefix from now on only obl- one is used

25-12-2021 - v1.3.28 add button theming directive

25-12-2021 - v1.3.27 a little bit theming for post diagram component

24-12-2021 - v1.3.26 add colors theming control for temperature component

24-12-2021 - v1.3.25 prepare to theming the library stuff outside of the lib

22-12-2021 - v1.3.24 add obl-input directive & obl-input-wrapper component

19-12-2021 - v1.3.23 add obl-group-select component

19-12-2021 - v1.3.22 add obl-radio-group & obl-radio component

19-12-2021 - v1.3.21 add validators

18-12-2021 - v1.3.19 add obl-dropdown-multi-select component

18-12-2021 - v1.3.18 add obl-checkbox component

18-12-2021 - v1.3.16 add templateSuffix & templatePrefix to obl-dropdown-select

17-12-2021 - v1.3.14 add obl-dropdown-select component with draggable dropdown

15-12-2021 - v1.3.13 add dropdown button component

14-12-2021 - v1.3.12 use cdk in obl-color-picker component

13-12-2021 - v1.3.8 update material to 13.1.0

13-12-2021 - v1.3.7 play basic model

11-12-2021 - v1.3.6 remove drag & drop emitters and use ChessAbstractModel

11-12-2021 - v1.3.5 chess component add some extra classes for pieces

10-12-2021 - v1.3.3 reverse columns on chess component fix

10-12-2021 - v1.3.2 - lit-clock-time date input as Date | [number, number, number]

9-12-2021 - v1.3.1 remove lib part from library paths

9-12-2021 - v1.2.22 add obl-channel-volume component

9-12-2021 - v1.2.21 add obl-equalizer component

8-12-2021 - v1.2.19 add reverse method to obl-chess that let you change board position of white pawns fields

8-12-2021 - v1.2.18 add couple of new options to control obl-clock-time & obl-pie-progress controls

7-12-2021 - v1.2.17 add obl-clock-time component

5-12-2021 - v1.2.16 move DrawingPdfInterface to separated endpoint

4-12-2021 - v1.2.15 create obl-two-arch-progress component

4-12-2021 - v1.2.14 create obl-arch-progress component

4-12-2021 - v1.2.13 create obl-pie-progress component

4-12-2021 - v1.2.12 create obl-temperature component

2-12-2021 - v1.2.11 add event emitters 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 obl-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 default drawing point fu

26-10-2021 - v 1.1.25 add possibility 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 obl-slider component

19-10-2021 - v 1.1.19 add SliderModule with obl-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 unnecessary 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 obl-status-bar to obl-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 scale x and y

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

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

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

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

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

Upgrade to Angular 12!

Components inside lib

Inside library You can find components:

from DropdownButtonModule

obl-dropdown-button

from PostDiagramModule

obl-post-diagram

from BallProgressBarModule

obl-flat-pie-diagram

obl-ball-progress-bar

from PieProgressModule

obl-pie-progress

from ArchProgressModule

obl-arch-progress

obl-two-arch-progress

from ColorPickerModule

obl-color-picker-control

obl-color-component

from HorizontalProgressBarModule

obl-horizontal-progress-bar

from LinearDiagramModule

obl-linear-diagram-2d

obl-diagram-point-hover

from Diagram3DModule

obl-diagram3-d

from SliderModule

obl-slider

from DigitalModule

obl-digit

obl-digits

obl-digital-timer

from DateModule

obl-calendar

obl-calendar-event

obl-month-control

from ChessModule

obl-chess

from CheckboxModule

obl-checkbox

from TemperatureModule

obl-temperature

from TimeModule

obl-clock-time

from ChannelVolumeModule

obl-equalizer

obl-channel-volume

from DropdownModule

obl-dropdown-select

from DropdownMultiSelectModule

obl-dropdown-multi-select

from RadioModule

obl-radio-group

obl-radio

from TreeModule

obl-tree

from RatingModule

obl-star-rating

from LoadingModule

obl-spinner obl-loading-state

from IconsModule

obl-icon

from PasswordModule

obl-password-strength

from CategoriesModule

obl-half-matrix-combine-categories

obl-combine-categories

obl-single-combination

from StepperModule

obl-progress-stepper obl-progress-vertical-stepper

Using obl-diagram

Install package:

npm i @obliczeniowo/elementary

Import module:

import { PostDiagramModule } from '@obliczeniowo/elementary/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:

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

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

Using obl-flat-pie-diagram

In HTML:

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

in ts:

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': 150,
    'key 19': 2500,
};

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

Using obl-status-bar

Example of use in html without 3d effect:

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

Example of use in html with 3d effect

<obl-ball-progress-bar [value]="20"></obl-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 obl-color-picker-control and obl-color-component

Example of use in html for color picker with button:

<obl-color-picker-control></obl-color-picker-control>

Example of use in html for color component without button:

<obl-color-component></obl-color-component>

Using obl-pie-progress

<obl-pie-progress [value]="progress" [size]="100"></obl-pie-progress>

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

Using obl-arch-progress

<obl-arch-progress [value]="progress" [size]="50"></obl-arch-progress>

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

Using obl-two-arch-progress

<obl-two-arch-progress [first]="progress" [second]="progress / 2" [size]="150"></obl-two-arch-progress>

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

Using obl-horizontal-progress-bar

Example of use in html for horizontal progress bar:

<obl-horizontal-progress-bar [value]="value" class="black"><obl-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 obl-linear-diagram-2d

In html

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

in ts file of component:

points: Point2D[] = []; // imported from import { Point2D } from '@obliczeniowo/elementary/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:

<obl-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
        }]
    }"
    >
</obl-linear-diagram-2d>

Where LinePattern need to be imported in ts component file:

import { LinePattern } from 'dist/components/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 obl-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:

<obl-diagram3-d [zValues]="zValues" [latitude]="latitude" [longitude]="longitude">
</obl-diagram3-d>

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

Example of use obl-slider component

Import:

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

in html:

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

or

<form [formGroup]="form">
    <obl-slider formControlName="valueControl" [value]="30"></obl-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 obl-digit

Code bellow display single digital number:

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

Example of use obl-digits

Code bellow display integer number or string containing number

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

Example of use obl-digit-timer

Code bellow display digital timer:

<obl-digital-timer></obl-digital-timer>

Live working example

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

Example of use obl-calendar component with obl-mont-control & obl-calendar-event

In html file:

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

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

<obl-events-list #eventsList>
<obl-calendar-event
    *ngFor="let event of eventsListData"
    [eventSettings]="event"
    ngProjectAs="evangelist"
>
    <h3
    ngProjectAs="title"
    [style.backgroundColor]="event.color"
    class='event-title'
    >
    {{ event.title }}
    </h3>
    <div ngProjectAs="body" class="event-body">
    {{ event.body }}
    </div>
</obl-calendar-event>
</obl-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;
}

obl-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 obl-chess component

In HTML:

<obl-chess [chessPawnsMap]="chessPawns"></obl-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

Example of use obl-temperature

<obl-temperature [value]="20" [max]="100" [min]="-10"></obl-temperature>

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

Example of use obl-clock-time component

<obl-clock-time [size]="250" [display]="{ time: false, seconds: true }" [date]="date"></obl-clock-time>

Example of use obl-equalizer component

In html file:

<div class="equalizer"><obl-equalizer [data]="equalizer"></obl-equalizer></div>

In scss/css file:

.equalizer {
    background-color: #3b3b3b;
}

In ts file:

equalizer = new Array<number>(20).fill(0);
timer: any;

...

ngAfterViewInit(): void {
    let dt = 0;
    this.timer = setInterval(() => {
        dt ++;

        this.equalizer = this.equalizer.map((value, index) => 0.5 * Math.sin(Math.PI / 10 * (index + dt)) + 0.5);
    }, 100);
}

add channel volume

In html file:

<div class="volume-channel">
    <obl-channel-volume [volumeLeft]=".5" [volumeRight]="0.9"></obl-channel-volume>
</div>

In scss/css file:

.volume-channel {
    background-color: #3b3b3b;
}

example of using obl-dropdown-button component

In HTML:

<obl-dropdown-button [buttons]="buttons" [templateRef]="icon"></obl-dropdown-button>
<ng-template #icon let-button>
    <mat-icon [svgIcon]="button.svgIcon || ''">{{ button.matIcon }}</mat-icon>
</ng-template>

In ts file:

buttons: DropdownButton[] = [
    {
        matIcon: 'cancel',
        cb: () => console.log('message 1')
    },
    {
        matIcon: 'delete',
        cb: () => console.log('message 2')
    },
    {
    matIcon: 'download',
        cb: () => console.log('message 3')
    }
];

example of using obl-dropdown-select

In HTML:

<form [formGroup]="form">
    <obl-dropdown-select formControlName="item" [model]="model"></obl-dropdown-select>
</form>

<div>{{ form.getRawValue() | json }}</div>

In ts file:

model!: DefaultSearchDomain<DropdownSelectItem<{ icon: string; value: number }>>;

...

constructor(private fb: FormBuilder) {
    const items: DropdownSelectItem[] = []
    for(let i = 0; i < 50; i++) {
        items.push(
            {
            id: i,
            text: `item ${i + 1}`,
            }
        );
    }

    this.model = new DefaultSearchModel<DropdownSelectItem<any>>(items);

    form = this.fb.group({
        item: [5]
    });

    ...

example of using obl-dropdown-multi-select

In HTML:

<form [formGroup]="form">
    <obl-dropdown-multi-select formControlName="item" [items]="items"></obl-dropdown-multi-select>
</form>

<div>{{ form.getRawValue() | json }}</div>

In ts file:

items: DropdownSelectItems[] = [];

...

constructor(private fb: FormBuilder) {
    for(let i = 0; i < 50; i++) {
        this.items.push(
            {
            id: i,
            text: `item ${i + 1}`,
            }
        );
    }

    form = this.fb.group({
        item: [[5, 2]]
    });

    ...

example of using obl-checkbox

In ts file:

form: FormGroup;

...

constructor(private fb: FormBuilder) {
    form = this.fb.group({
        valueControl: [60],
        item: [5],
        check1: [true],
        check2: [false]
    });

    ...

In html:

<form [formGroup]="form">
    <obl-checkbox formControlName="check1">Checkbox 1</obl-checkbox>
    <obl-checkbox formControlName="check2">Checkbox 2</obl-checkbox>
    </div>
</form>

<div>{{ form.getRawValue() | json }}</div>

Example of using obl-radio-group & obl-radio

In ts:

form: FormGroup;

options: RadioItem[] = [];

...

constructor(private fb: FormBuilder) {

    for (let i = 0; i < 10; i++) {
        this.options.push({ id: i, text: `item ${i}` });
    }

    this.form = this.fb.group({
        itemMultiple: [{ value: [] }, MultiSelectValidators.min(1)]
    });

In html:

<form [formGroup]="form">
    <obl-radio-group [options]="options" formControlName="radioItems"></obl-radio-group>

    <button mat-button (click)="form.markAllAsTouched()">submit</button>
</form>

Basic example of using obl-group-select

In ts:

itemsGroup: DropdownGroupSelectItem<any>[] = [
    {
    id: 'direction',
    title: 'Sort',
    value: 1,
    options: [
        {
        id: 1,
        text: 'Decreasing'
        },
        {
        id: 2,
        text: 'Increasing'
        }
    ]
    },
    {
    id: 'by',
    title: 'By',
    value: 1,
    options: [
        {
        id: 1,
        text: 'Name'
        },
        {
        id: 2,
        text: 'Date'
        },
        {
        id: 3,
        text: 'Country'
        }
    ]
    },
    {
    id: 'display',
    title: 'View',
    value: 1,
    options: [
        {
        id: 1,
        text: 'Basic'
        },
        {
        id: 2,
        text: 'Full'
        }
    ]
    }
];

constructor(private fb: FormBuilder) {
    form = this.fb.group({
        itemsGroup: [{value: { direction: 1, by: 2, display: 2}, disabled: false}]
    });

In html:

<form [formGroup]="form">
    <obl-dropdown-group-select
        [items]="itemsGroup"
        formControlName="itemsGroup"
    ></obl-dropdown-group-select>
</form>

<div>
    {{ form.getRawValue() | json }}
</div>

Usage of obl-button directive:

You can use default styling of button by simple adding the directive:

<button (click)="toggleStyle()" libButton>change theme</button>

Will use by default the variables:

--obl-button-background-color: #d4d4d4;
--obl-button-background-hover-color: #e6e6e6;
--obl-button-text-color: black;
--obl-button-text-disabled-color: gray;
--obl-button-background-disabled-color: transparent;

You can override them in styles.scss or create own one. For example:

:root {
    --obl-button-background-color-red: rgb(204, 93, 93);
    --obl-button-background-hover-color-red: red;
    --obl-button-text-color-red: white;
    --obl-button-text-disabled-color-red: gray;
}

And then:

<button (click)="toggleStyle()" libButton="red">change theme</button>

And yep from now on it will use suffixed one!

Usage of tree component

In HTML:

<obl-tree [items]="itemsTree" (itemExpand)="itemExpand($event)" (itemClicked)="itemClicked($event)"></obl-tree>

In ts file:

itemsTree: TreeItem[] = [];

constructor() {
    for (let i = 0; i < 10; i++) {
        this.itemsTree.push(
            {
            id: i,
            title: 'title ' + i,
            subItems: true,
            items: []
            });
    }
}

itemExpand(itemExpand: TreeExpandEvent): void {
    const items: TreeItem[] = [];
    for (let i = 0; i < Math.ceil(Math.random() * 10); i++) {
        items.push({ id: itemExpand.item.id + ' ' + i, title: `${itemExpand.item.title} ${i}`, subItems: true, items: [] });
    }
    itemExpand.cb(items);
}

itemClicked(treeItem: TreeItem): void {
    console.log(treeItem);
}

Using example of obl-star-rating

In HTML:

<obl-star-rating [nrOfStars]="7" [size]="30"></obl-star-rating>