web component

we need someone to develop this component Bar chart component. This component needs to be created with Angular 6, html, CSS or SASS and typescript, no external libraries. Doesn’t need to be an NPM package, the below image is a representation on how it should look. The next section of this document will explain how needs to work, and how is needed to receive the data to show. Component breakdown. The following image shows the principal data structures that the component needs to receive. After the image, it’s described how the component needs to work. • Categories o Each category contains a name, a color, a minimum value and a maximum value, these values can contain decimal (up to four digits after the decimal point). o It doesn’t matter the range value of the categories, these will display the same height percentage in relation to the height of the component (the height and width of the component should be 100% of the parent element).  3 categories – 33.3% height of the total height of the component  5 categories – 20% height of the total height of the component. o The categories may change, so they need to be provided to the component via input parameter. • Data o Each data item contains a date and a value. o The data need to be provided to the component via input parameter. o The value property of each data item is inside the range of one category min and max values. o Ideally the component only will display 5 data items, but, if the input parameter contains more than 5 elements the component will maintain the same width but show the exceeding data items through a horizontal scroll bar. o The bar that display the data doesn’t need to be exact, just need to display an approximated relation between the category range and the data item value.  Example: In the image, the data item inside the green mark, the category for “Intermediate Risk” could have a range of 1 – 2.4, the data item value could be 1.7, this doesn’t mean that the bar is needed exactly at half of the category, it can be a little low or high, just need to be representative to the eye.