[Music] welcome to code creative i'm travis tolson i should probably be watching the presidential debates tonight but um yeah pretty sure i've already got my mind made up and i don't think watching another one of those is gonna change that uh so instead i'm gonna work on the salary survey analysis tool some more last time we got our histograms up and running i've got a few things left that i want to polish up with those before i move on to the next component which should technically be the final significant component um and you know gauging time we'll see how some of this stuff goes but uh first thing i want to try to clean up is i need to make room for my other component first of all and i also need to add titles to each of these histograms so to start i'm going to jump over here and i do need to look up chart.js i need to hit up their documentation again um title so let's see chart options title there we go all right so basically i need to come in here it's not part of data i need to come in and add an options object and title and display is true and text is going to be we'll just start with chart title and i'll jump back over here something didn't go as planned now you let's fix my little quote marks here there we go now save it reload all right so you can see we got the chart title there now uh but we do need to make this dynamic so once again i'm going to copy basically what we did before here and i'm going to add a property to this return this chart dot options dot title dot text and set title value so this is going to allow us to set the title value and basically we're going to take this guy is equal to value and to keep things consistent i will use new value sarah will hopefully be joining us at some point right now she is uh putting the little one down all right so now that i got the property set up on the histogram i need to come over here all right now the parent let's reload this there we go all right so the parent is going to be um the parent is going to be the property so [Music] let's see render state okay so i need this dot histogram dot title is equal to state dot histogram selected property it's easy i'll do it otherwise i'll uh yeah we'll we can do that through css if we need to alright so then hi welcome you doing the thing i am presidential debates tonight yep what time is it at nine um i don't remember let's look it up it might be live already yeah 8 p.m central so what's going on right now yes what's going on right now you want to save this for another night and watch the dumpster fire that is the yeah i've i i think i've seen enough of that i'm i'm good i'm good all right uh histogram title is equal to now for the children i want the key oh thank you and and for that we are going to have to change this up so i'm going to have to change this to object.keys and key histogram data dot children key change she's the key as well i don't even need the index no more and self dot children histograms dot query selector that should do data bins and then title would be the key and let's see how that does okay outlook rainy overcast sunny and there we go so uh so now we've got titles on each of these uh fave icon i'm not concerned about that one okay so now we've got our histograms the next thing i want to do is take our all right so we got a outside and we got inside so now if i was using uh shadow dom i could more easily configure how this style would work uh because all of my i i could isolate all the css to that shadow shadow dom scope but i don't feel like messing with shadow dom right now so i'm going to use classes instead so we got histograms and come in here dot histograms um actually i may not even need that let's see all right so this is my app all right let's do this first because what i'm going to end up with is a when i add my component that i plan on adding tonight the plan is to have a sidebar off to the left of all this so essentially what i want to do is i'll put a placeholder in here for now and now here let's do this i'll just do sidebar for now and let's do let's change that to flex row because then i can use it in two different places save it reload sidebar ooh what happened let's see cannot set property enter html of null oh i know what i did i do still need because i'm keying off of the children histograms so this actually does still need to have children histograms in it otherwise it can't read there we go okay now we're back all right so now i've got a sidebar so we'll do class sidebar actually we'll switch this div over to main because that's my main content uh let's see aside i don't like a side for this one because this isn't an article so all right so i no longer have histograms i can eliminate that one um i do need what is it dot sidebar i want to be uh yeah we'll start with with and we'll see how that goes and then main just kind of ballpark this one okay that feels pretty good uh it does go off to the side though i need to set flex wrap and okay so i need flex wrap wrap i think is what i'm missing so div class flex row uh we'll go off children histograms flex wrap wrap let's see if that changes anything there we go so now it's going to stack down to the bottom instead of branching out to the side the way that it was so now we've got our basic layout that we were hoping for i got my top distribution i got my child distributions and then i've got a sidebar over here so next up i need a new component so let's jump over here and let's start working on this um what do we want to call this one we'll call it a property tray at least for now i guess we can go with that all right so i'm going to come back over here and i guess i don't need that export let's make sure i don't need that export yep everything's still good okay so property tray paste will get rid of the export and i'm just using the histogram class as kind of a dummy template here just to get some code down quickly we'll keep the render function at least for now though i may not need it we'll give this one the salary property tree tag all right now all right so for this one what i want is at least to start anyway i want a list of all the properties outlook temp humidity windy um i don't technically want hours played there's going to be some degree of stuff that i want to exclude but i'm not going to worry about excluding those just yet so property train need the chart don't need the context all that can go away all right let's see so let's take a look at the data i've got if i look at my state uh well here let's get rid of a couple things first cuz i think i still got a yeah here's a console.log we won't need that anymore uh this guy we shouldn't need anymore i'm just going to comment them out so i can get rid of them later if needed reload there we go oh nope it's still going to console.log somewhere uh where are you we're let's see rainy overcast sunny undefined undefined undefined i'm not sure it's not there it's not here is it here let's do a let's search all of it and i did a control shift f for this one um i don't need any of them that's for sure sequence store engine x app salary survey those are both commented out this one this one here i don't need that console.log anymore and that was in the selectors there we go all right so now i've got just the actions being outputted so in my state all right so hmm to make this simple i'm going to assume that hey andrew how's it going welcome back um so to keep this simple i'm going to assume and i think i made this assumption somewhere else as well but i'm going to assume that every object in our responses in our survey responses object i'm going to assume that every single one of them has some value in every single property so in other words if i look at one response i can immediately tell what all the properties are so first thing i'm going to create properties and set properties let me think about this one um yeah i guess we can stick with that let's change this to property names though and new value this dot property names is equal to new value so this creates a new property on this particular component and this kind of makes the component quote unquote reusable and basically what i'll do is i will pass the data from my app object and this makes it so that my app object is the only one that has to be hooked up to the store in the store subscribe and for anybody joining in new that uh store is basically like a redux store it's my own poor man's version of it let's clear that search out okay so get property names set property names the render function what i want it to do so first of all we're going to need now we really don't need anything um i shouldn't need a render because i'm actually only going to build this once so let's do this actually wait a second now i do need a render i do need a render because i'm going to call that render method shouldn't really need state but we'll pass it anyway um okay so what i need to do is this property names for each function property name let's see all right what do i want this guy to append and i did this before with the histogram so let's remember how i did it with this guy or no sorry it was over here with the histograms insert adjacent html before and and let's start with something nice and simple we'll use the back text to give us the string literal uh or sorry template literal and what do i need what do i need okay let's do nice and simple div sign curly braces property name slash div let's keep it real simple right now all right um here and i'm going to add a little bit of a caching layer here so if state is equal to this dot state don't do anything now that actually won't work because this should only be working on state change anyway so ignore that we'll go back okay um let's just see how this works for now all right so when i render this i need to render the parent histogram i need to render children histograms and [Music] render property tree all right so the property tree actually now because there's only going to be one of these i don't have to render multiple think this through now sorry i will need that because what we're going to do is do this i want to add into my template in my sidebar i want to add a salary property tray or if there's a plug-in that gives me the html autocomplete i'm sure there is from within these templates i have to check on that at some point all right so that should put the salary property tree in there and then this dot property tree is equal to this dot query selector salary property tree and then down here when i render i can say this dot property tree i know what i wanted to do now okay i'll get to that in a second uh this dot property tree is equal to okay and this is where i need to do state dot responses so i'm taking this state object uh responses the first one and we're gonna do object dot keys and that should get me the list and this is based off of the assumption once again that every object in in the responses array has the exact same properties doing this would not work if the objects changed but because i'm going to be converting an excel spreadsheet into a json object they'll all have the same properties i'm not getting this json from anywhere else so i don't have to worry about that kind of variance because in excel it's the columns are still there it's it's physically required um let's see what we got um property tree oh and then i got to call this stop property tree propertytree.or dot render and we'll pass state and actually i wanted property tree to go property names okay and then i come over here and so the caching layer that i actually want if state dot responses so if my responses changes uh is equal to return and so then what i can do is after that i can say this dot responses is equal to state dot responses and so now what will happen is if the if that responses array changes at any point it will redraw however if i'm issuing events or dispatching actions that don't change the responses then nothing should change and we got an error anyway this dot property tree dot render is not a function i beg to differ salary property tree hmm i think i know what the issue is i did not import this component import all as property tree from dot slash components dot property tree.js oh dot instead of slash there we go cannot read property insert adjacent html of undefined and once again i have run into the can i specify a this context yes i can okay so callback and then this all right so since that's the case this all right outlook temp humidity wendy hours played all right so we've got them visible at this point okay now and i don't have my see if i can pull it out i don't remember if i saved it or not i think i did okay recent document not that one glide fast nodes now that was different did i not save it i guess not all right so basically i'm going to be working down the decision tree so i need to be able to filter and once filtered i need to be able to split so basically i only need two actions on each on each of these properties i need the ability to add it to my filter and i need or actually wait a second now i need to know what values are available for each of these what i have is not good enough so basically if you remember correctly i've got this filter object which um golly i wonder where is i guess i didn't save it and i restarted my computer last night and so that drawing went away um alright so the basically as i work down the decision tree first i'm going to split on a property such as outlook temp humidity windy and hours played well probably not that one because that's my target value however i also need the ability to add filters where basically i say you know outlook for example has the option of being rainy overcast or sunny so if i'm going to filter down to a node basically you would have here let's just kind of rebuild a little bit so if i were to split on outlook then i would end up with my rainy overcast and was the other one sunny okay and we're going to change the color of this one all right so green is my properties yellow is the values so when i select i select properties to split on and that is what if i go back to my actions um histogram property selected is when i select a property what that's going to do is it's going to display the histograms given my current filter now that's going to display the histogram for outlook and it'll display three histograms one for rainy one for overcast one for sunny then um if i wanted to take and split this further to i in decision tree parlance i have split on this attribute i would then select one of these split nodes in order to split that particular node further and i would select another property so let's say what was another one let's say temp okay so then i would split i might split rainy on temp but overcast i could split on a different property so essentially you have selecting you have the action you have history histogram property selected action i select outlook and then i would add a filter which is basically selecting this node so outlook is rainy that said i in some way here have to display what these values are because as of right now i'm not showing it as of right now all i've got is the properties so let's see what can we do um my histogram does get them and that is done through the children uh where are those where's that function at histogram um no selectors get histograms okay so object.keys children so for each filtered response selected property value response state histogram selected property okay i see basically i could probably piggyback on my get histograms okay how do i want to do this actually i could just leverage my histograms over here because technically my if i clicked on my title or if i clicked on some button around these histograms i could use my histogram to do the filtering and then i could just select my properties from the side that would work that would work okay i kind of like this approach let's go with it all right so let's first focus on this guy over here um excuse me sue i have a list of properties and i need to be able to split on them splitting is what we're doing here and that is going to be the histogram property selected action histogram property selected so my property tree is going to have to import that action or not necessarily i could keep this this one pure and pass it so for example um we'll do on click oh no that one may conflict we'll find out let's try it this way first render render all right so now we are going to have to bind that here okay how can we do this um let's try what was i calling it select property okay should be able to do something like on click now don't quote me on this one but if i remember correctly i don't know if that'll do it or not but we're going to find out select property is not defined this dot unexpected token um i want to say i did this one before but i can't remember how uncaught syntax our unexpected token i don't understand that error let's see now not tagged function let's see on click my function try it i don't see any issues explicitly unexpected token which token is unexpected well let's take a look at the http let my function um here's how you can invoke a function in a template literal you can give the one click a reference to your function by not providing that when referencing it this will tell javascript to call a function and attempt to pass the events arguments when it gets triggered so the problem though is that it's actually rendering out it's it's converting it to a string it's not passing a reference that's not what we're going for um let's try some kind of a crazy idea i don't think it'll work but give it a shot it's worse that could happen nothing um can i read property select property of undefined nothing one click not sure on this one this one's this one's proven tough let's see i wonder if let's try something real quick now savannah's trusted target div to element div okay so in theory i can add ah not enters and i can say property name curly brace and i can say a dot target um uh dom get attribute a.target.get attribute property name windy humidity temp outlook okay so basically what i've done here is by passing the property name to the div events bubble up so anytime i click anything and i'm actually going to move this handler up to the connected callback anytime i click on anything inside of this property tree element um it's going to cause the on click to bubble up to the salary property tree element and because i've given each of these an attribute i can use the target dot attribute so we're gonna element or i think it's actually technically event so it's gonna bubble the event up and i can look at the event i can look at the target of the event that was clicked and i can get its property name attribute and now i know which one i clicked now from here what i can do is i can um okay so i can actually jump out of this all right i'm actually going to remove this on click i'm not going to bind it in this property tree i'm actually going to find it from the application because the application again already has my store it already has the behaviors i'm looking for so what i want to do is up in my connected callback i'm going to come down here and i'm going to say this dot property tree dot on click is equal to function event and what we're going to do is say store dot dispatch and i'm going to do a histogram property selected but instead of passing outlook i am going to pass event event dot target dot get attribute property name and if that works okay so you'll notice all right right now i have humidity and it shows high and normal really is there only two let's make sure humidity is only higher normal okay so i have high and i have normal now i can select temp and you'll see temp has changed hot mild and cool i can select wendy and now i've got false and true so because of how i have wired up these these render statements uh in in these components and because i've wired it all up to my poor man's redux store uh i have an event management system where basically um on any given event i can dispatch actions to my store and my and my app component subscribes to the store and pushes the state back down my component tree and so everything wires up there's no angularjs in this there's no react there's no view js there's no uh lit element polymer i'm not using any of those this is pure vanilla and what you're seeing is the dynamic style behavior where i can click on something over here and get the behavior that i'm looking for on the right hand side now obviously we kind of want to take things to uh we want to clean things up at least a little bit [Music] so inner html is equal to we'll give it a base and style give it a style tag again every component can have its own styles and you know we can create this as a bit of a tree so for this style first of all i'm just going to leave it that way for now i had so the the uh the portal developer in me wants to do all of the accessibility features roll button uh you know all the uh i think it's pronounced web web aria web art weberia something like that i don't quite remember bottom line it's the web accessibility standards and my instinct tells me put that stuff in now or you'll forget but then i realized that i'm really kind of only building this tool for myself for this very specific purpose and that that might not be the most important thing to focus on right now so focus and requirements and stuff um okay class equal to property tree prop ah who am i kidding i don't need this garbage because i can actually just do what's this element called salary property tree and if you're wondering why salary property tree why i said property tree it's because initially i was expecting to have some expanded collapse type stuff where i showed the values in the tree but then i realized that i don't need it so whatever um cursor is pointer i think haha so now i get the nice little cursor um add some hover all right now if that's that's a little too dark there we go that feels a little better i wonder what this color is oh it's a canvas i can't get that color oh well okay so then we're going to add a little uh padding zero i don't know let's go with that see how that works probably too much probably the wrong way yeah way too much let's say 0.5 see where that gets us padding left all right so now i got it clicking through so and this is why this is why i was saying that the target value is probably one we wouldn't want to split on because you get this weird bottom line this is not categorical dale carrick did this is not categorical data the same way that these are um let's see what else can we do all right so that gives me that so then the next thing i need is the ability to click on the titles and filter them all right let's see one batch histogram all right something i want to do in here inspect let's do a little bit of cleanup oh my i can't style that at all that that's not going to do nope that is not going to do it all okay so let's try something real quick histogram title and in the title instead of getting and setting we're going to say return this dot title and we're going to say this dot title is equal to that we're going to get rid of our title options um basically what i want is i want to be able to use css to capitalize the title and i want to be able to style that without having to do some extensive manipulation to the chart js and right now this is embedded within the canvas and i i can't do anything with that i couldn't even really do an on click at least not on that specific title without going into the chart js library which is something i'm trying to avoid right now mostly because i'm just trying to stick with what i know best so when i render this.chart update this dot um i do need to get the title so we'll do this dot title is equal to this dot query selector i'll make this an internal title element and query selector dot histogram title there and then what i want to change is the inner text of this so this dot enter text is equal to the stop type no not title element and we do want to change a couple things here i don't even know what that's doing all right see how that does okay so now you can see it's shifted over so we need to do a salary histogram and then dot histogram title text align center um let's see this dot title element dot set attribute property value is this dot title so now if i take a look and i inspect this guy you can see that the property value is outlook and we're going to do the same thing that we did before with hooking into the on click event when we build these guys we're going to hook into the on click uh well technically we're going to look at it from the salary histogram end of things uh or actually probably the children histogram so if i come down here and i'll do this dot children histograms is where we're going to listen to the event dot one click is equal to because once again if i click on one of these the event will bubble up to my um children histogram well not this one these ones will and those are the ones that i want those are the ones that i want to capture so event store dot dispatch actions dot filter something or other uh filter add-in here we'll just copy this guy where are you right here actions dot filter added this one needs to be event.target dot get attribute property name value and this one is going to be store.getstate dot i don't even remember the name of that property keep forgetting it histogram selected property the one we got currently selected okay reload okay so now if we watch down here i should be able to click on temp and you see histogram property selected gets dispatched now i should be able to click on this and filter added and my charts update temp is null so that didn't work uh let's see not property tree it's going to be in the histogram oh it's just property value my bad should just be property value let's try that again okay once again select temp i get my property selected my values update click on hot filter added so it's now filtering down to just hot and you can see that there's only one distribution now so i can then switch to let's say windy and now i can see the distribution for wendy oh my gosh we are almost done we are almost done let's see all right so now they only need the ability to remove filters i need the ability to walk back up the tree i'm going to need another component okay we're getting close guys i mean this is this already is really cool because like i said i can now walk down the tree i can select humidity i can select where the humidity is high and you can see that you know it changes well actually there is one more thing sorry before i do anything else with filter.js let's do one other thing um and this is in the property tree because one thing i wanted to be able to clearly see on this property tree was the variance okay property names i set the property names let's go back to the app.js property tray salary property tray okay on clicks not what i need property names is state dot responses object dot keys um let's do let's get the split variances okay humidity outlook temp windy all right so this function is going to get my split variances all right so basically what i need to do variances set variances variances spell it right there we go all right so then what we're going to do is we're going to create an internal value for these and there's supposed to be a spec that will allow true internal property names but or true internal properties but as of right now the only way to successfully get this is to basically cheat with the underscore which you know indicates that you wish it was private but it's not you can also do some fancy things with closures and stuff like that but especially in this case it's just not worth it to me um so get variances set variances property name dash and we're going to say this dot variances property name and then in here i'm going to get these and we're going to say this dot property tree dot variances is equal to that and i'm going to comment this guy out and let's see now i think i'm going to have to remove my little caching bit here because i am going to need that to update and i am bar styles is equal to and then what i'll do is say this dot enter html is equal to styles and on render we'll do the same thing and that's actually wait a second i need this dot underscore styles otherwise i can't access it from down here um this.interhtml is equal to this dot underscore styles just okay so what we're going to do is we're going to reset it render the responses render the property names go all right that's fine i don't particularly care about that one right now because again we're just we're not going for perfect um one thing i do want to do though is and we will do this over here math.round i do not want and i do not want a bunch of decimal points math round no that is not what i want maybe what i really want is to fixed number prototype to fixed okay so i don't want math.round i want that guy dot and we're gonna multiply by one i don't know if that'll actually do anything.2 fixed let's say two and give it a whirl i'm okay with nan as an answer that's alright undefined to nan i can live with that okay so now you can get a sense of the basic process i'm going to be following here because essentially what we're going to do is we will ultimately start out and actually let me start by getting rid of some of these dispatches because those were just dummy placeholder reload histogram um let's see if state dot selected histogram selected property is that ryan yeah histogram selected property is currently undefined so i only want to render this stuff if it has a value reload histogram not that one component histogram that's fine i can live with that all right so what we're going to get i don't know let me think about this one that's fine it's a trash state but if i was going from better i'd like hide this until i selected something um let's see else this dot histogram dot styles display i don't know if that'll work or not oh that else is in the wrong place i don't know what happened there cannot set property display of undefined histogram is that one dot style oh it's not plural there we go and otherwise display block so now what should happen is i select one and boom so nothing selected no data then i would look at my variances lower variance indicates that it has more influence so for example if i look at this you can see somewhat tight cluster there you can see a nice tight cluster right there nice low variance and then that one's a little more spread out if i compare that to temp spread out a lot more spread out kind of spread out humidity almost completely spread out on all attributes and wendy is much the same so you can see that when i split by a given attribute you can see that the distributions change and you know basically what this what this is telling me is that if um if i was looking at um improving my ability to predict the hours played then i would want to start by looking at the outlook and i'd be really fortunate if i came across the outlook being overcast because that almost uh that that pins my hours played to somewhere between 40 and 55 according to the uh studied results um and basically we can do the same with our salary data we can we we can see these these variance reductions um and that's what this tool is going to help me build out and now that i can see the variances and i can click through these i can easily show where these breakdowns uh fair better and worse for how they impact the distribution but after filtering so like if i were to turn around and filter by overcast for example then i you can see that the next lowest is temp so if i select temp you can see that if the temperature is cool so overcast was sunny i think we selected um so if it's sunny and cool you got it pinned down to 40 to 45. if it's sunny and hot you got it pinned down to 40 to 50. so you can see how each time we filter down we get a little bit closer the problem is that right now i can't see the filter that we currently have um can't see the filter and frankly i can't drill back out of the filter and that's what i need to fix once i fix that it'll be ready to use it'll be usable uh it will be functional sarah will yell at me because it's still hideous but it'll be functional i get nothing for that oh i came in oh hi your ears must have been burning ow [Laughter] hey andrew he dropped off he just yeah he just stopped in for a moment somebody's feeling i assumed it was you no i'm not you know i see how it is yeah i can hear you all over the house so we're good uh looking good yeah check it out so you haven't actually seen all the changes but these are the properties in the data set okay so you can see that outlook has the lowest variance so i select it and you can see the different splits okay now i can turn around and i can see that this one's got a tighter variance so let's say that i want to see uh for just the outlook overcast and click on that and now it's filtered it down to just those now you can see that temperature is the lowest variance so i can select temperature and you can see now that if my outlook is sunny i think is what i selected if the outlook is sunny and it's cool the hours played not salary because yeah right but it's between 40 and 45. if it's mild it's between 50 and 55 and if it's hot it'll be between 40 and 50. so you get a nice nice tight cluster when you drill it down that way so now i can do this with the salary data but i don't have any way to walk back up the filter chain nor can i actually see what my current filter is breadcrumbs exactly which is where this next that's where i'm going is my filter and we're going to turn around and we're going to get rid of some of this stuff i'll leave i know a lot of developers like roller eyes at breadcrumbs what is important about them is that for a good user experience it does a lot to ensure that your user knows exactly where they are and has an easy way to look and see uh how to get back to where they were um there are some other things we could put on the page to help with that as well um and once you get it functional and everything i can show some different ways to style it so that we're not like out of box blah blah bread crumbs you know not much you want to do with that because you want to uh you want to keep it recognizable for what it is but we'll definitely make it a part of an overall theme so it's not sticking out like a sore thumb and they can find what they need so have fun building breadcrumbs and in this case it's part of the necessary user experience because without them you have no idea i have no way to get back i mean you could build something on this like sidebar or something like that that they can like select between or something like that but breadcrumbs is gonna be kind of your bread and butter for this kind of situation yeah i wouldn't mind seeing i'll have to think about that maybe a sidebar of some kind where they can just like click and stuff like that but we don't want to get overly complex for the sake of oh we can do this and it's cool because that does not contribute to crunching numbers the other thing you have to worry about is if you put too many choices in front of the user then that's going to overwhelm them and it's actually going to slow down the rate at which they can find what they need and process the information too many choices too many choices bedroom floor syndrome ah apartment room floor center yeah i remember that one all right let's see all right i'm gonna try and wrap this up soon so that means i gotta do this quick if i'm gonna get this knocked out tonight we are we are within reach of accomplishing this in five sessions and i'm gonna be honest when i started this i was worried that after a couple sessions i was gonna have to throw in the towel because i wouldn't be able to do it fast enough um so the fact that it's actually almost done in five is quite astonishing um with that i'm gonna cheat state dot filter is my object is equal to this dot filter return and again i could redraw this every time and i may end up going back to that but filter is equal to state dot filter because what we're going to do is when the filter changes and i'm going to get rid of all that chunk oh come on come on come on come on come on i can do object dot keys state dot filter oh my gosh property name okay here's what we're going to do we're going to do this dot we're going to do same as we did with the property tree this dot insert adjacent html before end and back ticks div well span span would be more appropriate here span span oh my goodness it can't be this easy it can't be property name is equal to property name now i need square brackets around that guy there we go i need state dot filter property name all right let's save it there it cannot be this easy salary filter is the name of my tag app.js i'm going to create a div up top for my filters yeah yeah there we go salary filter salary filter then we're going to come down here and i'm going to say this dot salary filter is equal to this dot query selector okay then on render i'm going to say this dot salary filter render and what i need to do it actually now all i have to do is pass state for that one nada dang it um cannot read property insert adjacent html of undefined in filter ah i did it again i need to pass this needs to be in the right context outlook is equal to rainy yes okay all right so styles and actually let's pull that out okay this dot filter is equal to state dot filter this dot enter html let's see i want to do that and then we're going to have a span folded okay next up let's give the property tree some spacing um display block there we go okay filter i need a padding left on and again this is this is kind of a dirty um if i really was doing this for a real sustainable project um i'd be a little more particular about how i was applying styles but um content to just kind of make things work salary filter padding left 20 there we go that brings it in line outlook rainy temp hot outlook stays the same okay all right getting closer getting closer ampersand greater than outlook rainy humidity high all right i gotta fix that real quick um in here i need histogram title cursor pointer hover background color is e see and that'll do i again i'm not looking for real fancy here i'm just looking for some basics okay now now the last thing i need to do is i need to bind the on click so here's what we're going to do class is equal to filter item dot filter item cursor is a pointer filter item hover background color is e-e okay we're gonna have to do the same thing we did before property name is equal to and we'll do dollar sign curlies property name and then we need to come back to our app and in here this dot salary filter dot on click and we're going to do the exact same thing we did before we're going to capture that event and then we're going to do a store.dispatch and what we need is filter removed we're going to dispatch a filter removed and you can see that the filter removed accepts a property name which is going to be a part of event target dot get attribute property name here goes nothing all right so i select outlook overcast looks good i filter down then i switch to temp all right good information i'm feeling good now i want to go back and we're back outstanding so once again i can drill in i can drill into temp um i can drill into humidity um we can drill into outlook and then i can remove humidity and i can remove oh now we have an error cannot read property type of undefined salary filter on click something botched let's see cannot read property type of undefined that's strange because it's only happening on this one this is the only one we've seen so far where it gets clutchy all right let's see i got excited a little too early but we are so close so close okay mouse event filter removed error during stored dispatch cannot read property type of undefined mouse event target span.filter item um object.dispatch responses reducer action dot type why is there no action type is right there let's pull up store real quick and let's add a little log to store where is store oh it's in lib okay all right so here's what we're going to do first of all in progress with false because we can't have errors breaking things breaking the ability to dispatch in the future and console.log or console. error action let's see what happens gosh we're so close okay so it happens even on just one undefined cannot read property type of undefined oh i see the problem i called store.dispatch twice that was stupid okay then this should do it this should do it here goes nothing outlook let's go rainy switch to temp let's select cool remove cool it works remove rainy it works ladies and gentlemen we have an app all right and with that i'm gonna call it a night for tonight uh the next step for me anyway uh is to pull the salary survey data into this app and start the analysis uh with the hopes of uh being able to publish the results fairly soon but the tool is up the tool is running it in theory works i mean we'll know for sure once i dump the uh salary survey data into it but as far as i can tell this thing is working i've double checked the numbers the numbers are what i expected them to be i'll run a couple of additional tests to make sure that the filtered data set numbers are what i expect um but in all reality this is going to help me visually confirm and that was part of this desire but yeah this does it we have a functioning salary survey analysis tool so i look forward to being able to start analyzing and putting together some compiled results so that we can get this uh survey result published um so yeah thank you guys for joining in i hope you enjoyed it i know i certainly did i'm very excited with the outcome uh and i this is everything that i hoped it would be i mean it's not the prettiest thing in the world but it'll do um so yeah thanks a lot for joining in hope you enjoyed it and i hope to get the salary results out as soon as possible and hope to see you next time thanks a lot everybody have a good night