ngSeattle 11/17: Configurable data Visualization using Angular + Highcharts.

hi everyone my name is their Mohit I'm a full-stack developer here at Blackrock I've been with lacquer off since 2011 and that sure my story seemed like grace I have an archaeology degree so but I have some certifications here and there in Dubna development and web applications I'll share a little story with you today who had spinners at home or at work use your hand so I might get used to have a spinner and they really liked it so and she have an LSAT because she loves the else and I as she's four years old I decided to buy myself a spinner over here and then once a I bought it what she saw and she's like dad this is for me I said like no this is for me and she said no no and then she built a case and said like see like this is a small on my hand because here's is a little bit bigger and she said I can fit this with my my hand so whatever this is not related to ours I can run this over here and we can keep it running and then we will say like once this stops our demo end well like and it can't really assess yoga can't really go that long because it can only go for like a few minutes maybe so our presentation today is about configurable data visualization using angular and using height shorts you can find me in LinkedIn or github under Mohit so my problem started over here with our users who started to complain about this good over here they said like the data is getting really big and it's hard to analyze it's hard to take an action based on this and this data or this grid so the solution for sure for me was like okay what about visualizing your data and that was a clear answer for them right and they agreed then I started to think about 2008 when I was doing development and I was doing asp.net reporting portal and I felt like oh some queer they can just visualize my data this is very easy for me but you can see this photo is taken yesterday from the asp.net website they don't have good cameras a lot of big cells over there so this is a very old technology and we are in 2017 so we should find another solution which is absolutely highcharts once I started looking into head shorts I live like we have some other teams here in Blackrock who are using hotshots I said like what them to teach me a little bit about hide shorts and then I start to face some issues over here the first requirement that came in was like we have this great data just use it as is and display as hide shirts and I was like what like data for goods is totally different then hide shots series are totally different what's going on here and then the next requirement that came in was like they use any an ability to be able to switch between a hide short and a grid and then I was like oh I got it this make sense why do I make two different calls to get the same data and in this parade and a hide short or displayed in a grid so the solution was like absolutely what about aggregating this data and the front end applying filters client-side filtering and make this completely configurable in a JSON file and you can think about your JSON for word even save it you can save it in a file or you can save it in the cloud anywhere and then think about reusability whether you can use your widgets going forward so let's jump in a demo who likes coding raise your hand so what not do much of coding here today we will write configurations we all right Jason right this is all what it's about so I'll start with writing my first demo over here and what it needs from me it needs an ID right so I'll provide an ID and then oh sure okay and I don't look at the screen for a while there because like you will not get a very good resolution over here but we'll try to make it better okay type we will say like we want to build a column chart and then the next is like first demo and then by what do you own a grenade this data by I want aggregated by continent so we have user data that have some continent information into it and then what kind of really use of the apply or not by a current average or some I'll say a current and then I will save this now I'll jump into my TS file and what I'm going to do like this configure as my configuration and then I will import my widget configuration that I just write not add widget then I'll jump into my HTML over here and I will add my workspace component and it takes an attribute called config and we just pass our config to it let's look at this and see how this is working so we got this very nicely out over here that say has my first demo for you no data is there so the next step is as what it's waiting for the data to come in right so I'm going to come over here and have this little service to get some data that the service that create data row and I want to create a a thousand record maybe not subscribe and then stop config and then now I want to tell it this data is going to my ID than my config ID remember we provided an ID so I'm telling go to demo and then we'll provide the data property over here and you have some typescript issues over here let's close this there's the config dot data dot next that should be it because like that has an observable where we can send data to it now we get this nice chart over here something's going on we probably did not spell continents right let's make a continent and there you go so this is our first demo with just some configuration some Jason configuration we were able to build our first chart over here let me let's make it a little better so what do you see here like what kind of of sorting do we have it's probably alphabetically not true is it by value that's not true let's hide short sorting hide short sticks whatever series you provide to it and just run that doesn't care about sorting over here so how do we do some sorting over here with using our configuration over here I'll say you sort what unit sort by I'm gonna sort it alphabetically and now let's look our our chart and we get a nicely alphabetically sorted thing we can change the value so for buy value and I can say directional descendant and this will sort it by value now I want to change this continent to be by name so I want to aggregate this data by name I only see what's gonna happen here when some processing is happening let's make this a hundred : I don't think they should take that time okay okay there you go so you get a paging by default you get ten or ten columns per page and now let's go to expect not something wrong happened here no data let's minimize this and actually probably there is no no data over here so does anybody want to look at 84 series over here not true right so what we can do we can tell it our users want to focus into our table twinny and our table is by value over here now you will look into here and we'll only bring the top two any values for you now let's do something fun here we want to stag this by gender and you'll see like it's been stacked by female/male over here but look at the coloring here we have females green and mazes black is that true maybe not so what I'm gonna do I'm going I have a provider here and this provider can take a color provider format for my chart and now a given male has blue and Families pink over here now let's jump into my next demo over here and what's happening here I'm using the same data that is yoursel and they have built out like six different charts out of it so we have data by continent data by country data by skills or by whatever and we have bar chart pie chart and column chart different sorting and all this stuff this is cool right like let's have a little problem here that they want to show you so look at the Y skills widget over here and you see like this guy is angular GS comma database look at more database come a C sharp common angular G this is not right so what's happening here this data is got this a specific record is coming there and the response as a comedy limited think so how to treat this the framework provide you something in the providers as well it's called Expendables so what I'm going to tell it when you when I'm aggregating by a scale by skills please aggregated by comma or expanded by comma so this is my separator you can make your own separator over here and now let's see okay is it really skills oh we're looking at the wrong thing you have to go back here and coma this is my heir by skilled Jatin and skills and then come absolutely so I can take this out or here outside here in the stability of a time scale for sure you peer out with your issues so now it has been divided out and you can see here is the set of databases angularjs her c-sharp is Java and has angular now what if we want to search into this whole six widgets what if we want to say like have two searches and we want to search through all of them and they will filter out so this is very easy we can do that by coming over here like for each widget and what we're going to do we are go inside the providers as well I can have a deal lookup it's called a lock up filter and this is like ITIL it hey like this is specific widget have an index called name and it depends the value called name and we have another index called country and depending on a value that's called country what is this doing this is actually taking the data in this widget and collecting a unique distinct list and posting this up using messaging services that we have using observable posting this up to the parent the workspace parent component and the workspace parent component will collect all this data from all the different widgets that it have and then it will build indexes that will be ready for you to search and once you search the workspace compare and component will send the message back to all the widget said which is that's interested in this index and will filter it down this means that if for example I removed the country this specific widget will not be filtered by country so now let this happen by going into this home component where we have this and we will just say this is the parent component that we have and we say hey please this config you have search indexes this is the parent and we tell it you have a name and the various name country the various country support well you have to actually do it like this oh we used the value for this place what doesn't really matter so let's see what this is gonna do here for us and we get this nicely painted a filter by name or filter by country now was this the load I can search for a country Egypt this is where I'm from and this will filter down see we did not do this right but the country was filtered down this data skills was filtered down and all of them here's like by continent this is Africa for this specific one we can look at the config and see maybe we did not pass the right values oh we did not even save now if I felt of this so now this is e this is responsive and this is this is explains how a widget can be responsive to specific index but not responsive to another index and you have the ability to decide there for each widget your indexes now I'm going to jump into my last demo over here and then we will jump into code and see how did we do that so this is a full-featured widget think about this we have six wedges that was using the same data why sometimes like we might have some different data points that's coming in and then our widget astir will just keep growing and growing and growing and we might end up with tens or hundreds of widgets in the page if it's the same data says why not combine all of this into one widget and then we will have this buttons that will control the aggregations and the filters into the widget so we will say like the user will have full control over here say like yes I want to filter by country you know I want to filter by skills or by language they can apply filters over here this week maybe this is where they can drive an action nobody logged in in our system this week so we have to take an action here and say do why this is happening see this is the people who logged in this month and this is the people who logged in this nine hundred days we have customized tooltip so if I'm if I'm looking by language I will see what kind of skills this language have if I'm looking by continent what kind what are the countries and was and going forward you can do drilling as well so if I'm in the continent I can drill into a country and from a country I can drill into a my toe step place you start doing that FMN contract and drill into skills and like you can keep drilling in and can build your drilling in your configuration file as many levels as you want and you can even take an action business drilling say for example like if we keep drilling in and then we drill into names then probably it would be time to open a grid of names or open a specific name if it's only one name and you can do this with by listening to a press fake message through observables can drill up yeah this is very much what the framework is doing and we will take a look here back to our presentation and see what's going on at this demo is that good for ya so it's highly configurable and reusable II for me like it it's very important that our developers now don't have to write too much code to reuse this stuff all what they have to do is just provided a description for your JSON and think about it you have adjacent and you know where the data coming from you can build the whole widget out of this it's we're having a client-side aggregation sorting top end or paging provides consistency for coloring so you can define coloring scheme as for all these different widgets through your configuration summary and layout ID before you did not notice the header have summary for how how many records do we have what's filtered out was not filtered out advanced features like custom tooltips drilling down common components we're sort of like will provide charts and grids lists and calendars and even it even when you initialize your module into your application you'll be able to say call a function called with components so this will give you the ability to even inject more components from your perspective that this does not provide provide you like let's say you want to build a name details component you can still inject that component and load it through your configuration into the framework so let's look inside the code first thing we have a chart options very clear we always have like very common chart options that we have to share between different components so I save this in a very simple simple type script file or what the width of my charts are going to be responsive design for my charts what they will look like in a tablet what they will look like in a mobile and this is shared between different shots over here now I have the filtering service over here so what's the first dream service is all based on I filter interface take a look at the filter interface what is doing so pointer nope oh yeah so take a look here we have the apply filter function what's the apply filter function is taken is taking an item which is a row and as taken a field what kind of column what field you wanna filter and then it takes a value even this value is optional so what can you do with a item with a field over here right so let's look at the implementation of this interface to see how did we build this configurable framework so we provide inline implementation so this is that the filter service over here it's an injectable service and then we provide a inline implementation of these services do you see like and this is where the description of the filter will come in place so this is an example last seven days and the ID this is where we use the transformation between Jason is drink to an actual function that can run into our framework and then this is the the code that runs inside it to run this a specific filter against the item and the field look at the equals we provide three parameters over here we have the item we have the field and we have a value to compare against for our thing reduced service same same pattern we have an interface that will provide inline implementation for it and then it have an ID to describe what this reducer is gonna do is it account is it the sum is it average and then the reduce function it all cares about it takes a list and then what do you energy use which field do you already use typescript Jason mapping I have to say thank you for mark mark eagerly this is his github he was my driver for this JSON transformation I will explain a little bit about this so you all know that today if your mid-corner HTTP request you can specific model and type of script and it will transform your Jason into this specific model so this is happening it's actually like it's not a real mapping that's happening over here it's just an even property to property and that's it so let's say your model have a function in our case was the reducers or was the filtering right so let's say your model have a function that it needs to apply if you call this function I will say like sorry I don't know what function you're talking because he did not initialize this class so this is a I found this in the web was written by this guy and then it uses a reflection over here to say map here is my mapping mechanism and it tells it this is the class that you need to create in lessons for and it creates the instance for you and you will be able to call any function in this in this thing this is an example how this reflection is happening so we'll provide annotation or now no it's annotation by using typescript if your Java developers you'll absolutely know what is that so this is a JSON I feel like this is the name of the field that you're going to fill our for me find it into the JSON by this name and then this is the class name and then a camper or you can provide union types even it's very strong you can provide title meaning you can provide Union classes so this is the my filter can be a string in our case it's like the ID of the function that we save in that JSON or you can even provide the eye the eye filter if you don't save as Jason you can just and you're just leaving this in your code so you can just provide the eyes the filter interface directly we have this is the field example it's a string type so there is no need for complex stuff in here now I'm going to move to next slide which is the workspace architecture so how did I put all this together and we will look into some architecture over here so we are talking about configuration fire station and then workspace component this is the parent component the parent component will use some services in the middle and will provide my cream my widgets over here and we'll build it out we're using angular we'll use a high charts or even tax credit no - and moment GS for our for our factoring purposes and aggregation purposes so this is the workspace component workspace component is the parent component it provides different type of widgets that we have we have a chart we have a calendar we have a grid we have a list so how do we make all these stuff work inside this well works this component they all implement inherit and abstract based widget over here they have all the common functionalities that all of these might have and it only needs you implement one function which is called set view and you're going to provide the right data setup if it's a hard shot series of it's roads for a grade or of it's something for a calendar this is where you can render whatever you want through the implementing the set view function and the abstract base classes we talked about configuration I'll just highlight few things over here so we have the type for sure we have filters so those filters are the filters that apply upfront I don't know if you notice that the last widget that I know that I demoed was ycd widget it did not have a hundred K column into it so I can provide an upfront to tell it like hey apply this filter and this filter and this filter upfront to my data for this specific widget but as we will provide filter buttons for the users to interact with this which was like this week or next month or whatever we can provide an aggregation by if it's a single widget we can say like a string value or we can provide aggregation buttons over here we have the reducers in this tag by experice that gives us a ability to do the lookup services to search or the colors consistency stuff or metadata for the tooltip to show and then our data is an observable and the reason for this is that the reason why we make it an observable is that we our data may might take like a minute to load or something like this so we want to display the layout upfront for the users to I'm gonna get a widget over here it's about this person this and this and this and there will be some buttons over here so they will have an idea do you know what kind of data will show up for them and the rather than not shown anything for for this minute waiting for data going to the next next slide what services did we have we have a filter service we have a reduced service we have a formatter service to format numbers and dates we have a map util service to do the mapping between Jason and the actual class or the actual model and we have the messaging service that does messaging between pear and two different choice from a child to try to from child to the parent component so what's next step next steps is to using grx I have to depend a lot now and Oleg manniac and on Michael learn from them about in G or X because my service is getting very complex right now and there probably if I go in G or X if I will simplify a lot of stuff and they'll be able to manage my state much better than what I'm doing right now personalized widgets layout so in add ability to customize resize and remove and the good news is I was in the angular mix meetup conference in Orlando last months and the unknown said that they are working in the cdk think and they are they already working in some shared components like models and alerts and stuff like that but they are working functionalities like Gurda start stuff on customizing and resizing so hopefully by this time time 1d this is implemented I can just use it to a personalization into my widgets enable what you just saw so what's the savage it it's data and configuration so why not create a widget builder we written it here's my data and please I'm gonna give this by and then the user will be able to create their widgets and the fly and save it into the cloud and and shirt even with their colleagues global workspace actions so you see the buttons that they have if these buttons match for different widgets why not move them up into the parent component and then the same like the search how the search is controlled and all the different widgets these buttons the aggregation buttons in the filter buttons as well will be in the container and they will control the flow down there add more common components this case-by-case your business will be responsible to do the find out now this is my demo for the configuration but before before I end tonight I would like to share my my proposal over here so this is a call this angular universe it's not universal it's universe and what is this about you have seen the demo that I have and this demo have a header over there it has some navigations and they might have more common functionalities they're like tooltips pop-ups others hostesses if it's mobile or whatever right so my idea is why not build this upfront and enable angular template in little configurations and this is this whole demos building the angular universe it's now on NPM it's in and get it's in very early proposal so your support would be very much appreciated it's an open source so of I would love if someone ui/ux would help out with this if you have angular experience as well would be much appreciated as well to come and help me out with this so this Deb universe is the bonus or over here that control that have all the common functionalities that any application will have why if you want to build a new website why do you have to create the navigation every time or do you need to build the header every time where you can just control all this through JSON and all what you have to do to build your application is just import your module over here I um put the configuration file it's confirmed the JSON and they tell it angular universe module from config and then over here this is only think that my app component have it's this tank and the angular that the module will be able to pass this information to my library over here to build out your whole application over there thank you and you'll find the the github for this AB universe over here and we will publish the presentations as well thank you any questions no I like the idea of this is not the same aggregate because this data see I can I can aggregate this data by whatever you don't know you can aggregate them by different thin ways so you can tangle give them upfront you have to have the data and I'm not worried about this because this is working today and they have the data in memory today it's working but the idea of using in G or X is actually to you rather than what's happening is like I'm pushing this data every time to every different widget to so I'm kind of copying that and this is the bigger problem right if I'm able to take all this data as ones and apply it into a store and each widget will be able to apply actions and filtering into it this will probably minimize the size of the data over there so he does know this but in the story there will be a copy yeah yeah that's true and they're like there's lots of things to learn about in gr existed and I'm not say like if you're not maintaining the history of the data so you're not worrying about growing the data as much but you still garbage collected and you still want to make sure you unsubscribe there is an overhead and in using in G or X so it's not for every use case but they still believe that this is a good use case for energy or X to use because my model can grow and then if I started to move those buttons up in the component but it still some say like users gets crazy to be honest with you and and I propose and say like say I want to move these buttons over here and say like no no but I still want them in the widget I can I want to still be able so how can you maintain all these views are working together but in the same data you gotta have a one state one store that's manipulating your data and applying filters and aggregations on top of it yeah so what the component will get I will give the aggregation aggregated version of the data but the data under storage say as is the actions and we will have like centralized place to play yeah any other questions okay go thank you [Applause]

Channel: AngularSeattle

Views: 3,042

Keywords: angular, web development, google, meetups

Id: 2yJMIG8lJYM

Length: 35min 12sec (2112 seconds)

Published: Thu Dec 14 2017