Good morning welcome to my talk exploring ember typescript and high charts a Little bit about me. I currently am a front-end software engineer at Adipar for the navigator team and Before working at Adipar I co-founded hot force

Which is a healthcare software company and actually the story that I'm going to tell today took place during development at hop force But is relevant to all ember stakeholders I actually started developing in ember about six years ago and in 2018 I took my first trip to New York for an ember related work and I Had a the pleasurable experience of my first subway ride in New York City, which was really exciting and I was super excited to

Get down to the platform. I just had one Concrete staircase to conquer and I did trip go head over heels down the staircase and break my foot so me standing in here in front of you today is actually a redemption story of me returning to New York and

Still contributing to the ember community So, let me start with a little bit more context hop force owns and develops the PDPM calculator, which is a nursing home Software that allows administrators to go in and enter patient diagnoses in order to calculate the reimbursement They will get on Medicare part a so as administrators started entering more and more data

They started to ask more complex questions about this data such as how many coded patients at our facility treat in July of 2020 or What was the total reimbursement expected from our depression patients last month In order for us to answer these questions We wanted to build a data analytics tool And so the first decision we made was we're going to integrate our enter ember app with high charts

Which if you don't know is a very complex and great data visualization tool So I'm actually going to start today to show you where we're going and the feature that we ended up building So here it is This is our little data analytics tool

It's showing our high charts graph re-rendering upon each click of a different grouping here You're seeing the nursing case make groups, which are different nursing category diagnoses and We can yeah So here's the chart re-rendering and re-rendering with revenue and then we actually can group the different things to nursing care levels months weeks years Etc

So this is what we built So now I'm going to go into How did we get there and this video is looping, okay So this there are really three pillars to this story. The first is using ember modifier We actually started using a wrapper add-on which I'll get into soon and then we convert it to an ember modifier and then we were able to use ember import to

Implement lazy loading and then finally we converted from JavaScript to typescript and glint So at the very beginning here's our very first iteration of code and We were using the ember high charts wrapper add-on in order to do this. It's pretty simple

Invocation of the high charts add-on and then a few arguments which I will note because this is a wrapper These are not the actual direct arguments that the high charts library itself is using which I'm going to get back to and the accompanying JavaScript file is essentially just JSON populating the chart options that high charts takes in So as our feature started to develop to increase in complexity

We started to find some drawbacks to the wrapper add-on that we were using The first is that is obstructing high charts built-in types Which was a bummer because these types are really nice and robust and helped to use the library And then as I just mentioned they're using different arguments So that forced us to not only learn high charts library

We really wanted to use but also read about and learn more about the wrapper add-on and how that's abstracting as well Finally we had some issues with scroll position and initial rendering in some cases. The chart would be missing on initial render and Then when changes needed to be made for the graph to re-render we would lose our scroll position which would force

You know the scroll position to default to the top of the page and most times this would push the graph out of sight So the user would miss the re-render entirely So kind of thinking about these drawbacks we started to dig into well what actually is this wrapper add-on doing for us and Also, what is an add-on anyways, so

There's three layers of abstraction here The first is our Ember app which in this case was the PDPM calculator And then the middleman was the wrapper add-on that we were using called Ember high charts And then third the actual library trying to use which was high charts of course And it should be mentioned that the reason that wrapper add-ons were initially created in this context were to help us to get access to

These third-party libraries and so in this case they're really adding they're acting as a layer of glue and they can be wrapper add-ons can be very useful and have been for some time and However, they can be difficult for us to customize and change to our liking so

Digging a little bit deeper now into the Ember high charts add-on specifically some history here You may notice this add-on was built during the time of Ember native components before converting to Glimmer components So you may see some remnants of that here And you may also notice there's the did insert and did update Ember runner modifiers being used. These are trying to

track the insertion and updating of the DOM so essentially the crux of what is trying to What is going on here is that The add-on was using A component to try to track the state Of the DOM and trying to use a component to manipulate the DOM instead of

manipulating the DOM itself So it's kind of again like another third layer and using more modifiers to do so So this led us to start to wonder is there a way that we can actually just manipulate the DOM directly instead of having this third middleman and this of course led us to Looking at Ember modifier

So what's really awesome about this slide right here is this actually shows the 14 lines of code that we were able to write to replace the entire usage of the add-on itself so Again, what is a modifier? It allows us to manipulate the DOM directly This is important because a component's job is really to manage state not the DOM

and what's going on here is This modify function is taking in the DOM element We're going to manipulate and the positional arguments the options and if the chart's been rendered it will trigger the update and track This DOM element and then otherwise it will just use the imported chart function from high charts to render the chart

and This in theory could we could have made this an add-on and this could be used similarly to other add-ons But it's also nice to kind of see this new pattern of not really needing an add-on at all And just using this small bit of code that we can customize ourselves to integrate with a third-party library And the best part is here's the invocation of that modifier, it's just one line

Of course, this is the invocation on a div Element and here's kind of you know, the bigger fixture. Here's the original modifier Here's the invocation on a div And then zooming out just a little bit farther. Here's the entire demo gjs file So this is some demo credit I wrote for the purpose of this talk

Using our simplified modifier version so yeah, there it is and there's our chart options quite simple And so Here's the demo Little thing that I built for this talk here And of course in the spirit of being in new york I thought what could be a fun data visualization to show everyone and then I learned about the pizza principle

So some native new yorkers maybe already know what this is, but I just learned Turns out that this is an economic concept discovered in the 1980s But has been true since the 1960s That the average price of one slice of cheese pizza in new york has matched almost exactly The fare of one mta subway ticket in new york

Yeah, really love the new york subway. So, um And actually it should also I guess be noted that this did recently change in 2023 2024 And there's many financial articles that you can read about it So i'm not sure what's up with that, but new york is in uproar about this so anyways, here is Here's what I built. Here's my demo so you can see the graph re-render and then just a cool little high charts feature that

Here's the tool tips hovering over the prices of the fare and the pizza slices So another cool thing about ember modifiers that we can actually invoke them on a component as long as this component has attributes

so Here's an example of us doing just that and also adding a little Toggle piece that I can better exemplify re-rendering up the graph so Just to zoom in more here's our component called fancy box. It's just an arbitrary component. That's going to add

You know a border and has to take attributes because that is where the modifier is going to be passed in And then there's invocation simple just the same way as we would with a div element And here's this same demonstration again allows us to re-render the graph Going between a line and a bar chart

Oh and a quick note, this is going to come up in a bit you'll see this little hamburger menu This is actually a module we're getting from high charts that allows us to export the data into a pdf get the csv or Data that's accompanying the graph So once we conquered the ember modifier

We thought well, let's add lazy loading so that we don't have to load the entirety of this massive high charts library Unnecessarily, we'll only load it when we need it. So you'll see our original modifier on the bottom left And then on the top right, here's just a normal Here's us just importing the modules that we need the exporting data modules what I just mentioned with that hamburger menu

And then exporting as normal Um now let's go from that example to lazy loading so this is where it gets cool We're now able to if you look at this load high charts task We can actually import high charts and the high charts modules that we'd like to use dynamically And what i'd like to point out here is that this is an ability that we have both an ember auto import and embroider

so Yeah, this is that's what I wanted to touch on here And So let's let me take a progress check. Let's see. Where did we start? We started with Implementing this modifier invoking it on another component now. We've just added lazy loading which is now

Something we can do in most ember apps with ember import order embroider auto import. Sorry So now that we've conquered we've done this The next thing that we are now able to do that We're not using the add-on is access the high charts types, which is again really nice

They have robust types and a really really large documentation. So Being able to navigate those with type hints and type errors would really aid us in development and help the third-party integration So what does our modifier look like in? TypeScript Here it is Where now you can see us actually using these high charts types

There are modified functions taking in a html element Which is an important distinction of what type of element it accepts and then we're getting our positional arguments which are high charts options and Just to zoom in in our signature a bit. Here's that again. Exactly. So we're taking an additional moment. We're expecting high charts options

And then we're going to convert this is our demo now gts glint file And highlighting again, what do our chart options look like and then we also can see well, there's many different types of series and charts and

Things that high charts takes in. So for example, our series has to be a of type series option type and Now let's look at some of these type hints and type errors in action Let's say for example We go back to our modifier and we want to change the type of the element to an svg element and for the demo purposes

I've already updated here the element that's passed into modifier to be an svg type Otherwise, we'd see our first cascading type error here So now we're getting a type hint that's telling us the chart function That we imported from high charts to actually render the chart does not accept an svg element It only accepts type html element So instead of us digging through the docs to try to understand the implementation of that function there it is right there

And then to continue this example even further let's say that we've now reverted our modifier type to be of ht of type to html element, but we changed the Type signature of our fancy box component to an svg. We're also going to get hit with another type error

finally When we go to invoke the modifier on this component with these conflicting types, we're once again seeing the same type error So we're getting we're pulling information from high charts. We are not able to invoke a svg on an html So that's really nice

And really just to drive this point home. Here's the high charts dts file. So These are this video could go on for hours. Um Yeah, these are all the types in high charts. So Not being on typescripts was a pretty big disadvantage And something that using wrapper add-on wouldn't allow us to do

And then one more type hint just to drive it home. Um What type of options does high charts accept? Well, it's string So if we type in something arbitrary like four, we're obviously going to get hit with a type error there So really just to recap what this is is an ember interoperability story

We're now ember modifiers allows to stop building wrapper add-ons and customize much smaller modifiers ourselves Both ember auto import and ember support dynamic importing which can be great for lazy loading And ember is increasing in interoperability by evidence how easily we can integrate with third-party libraries with less glue So 14 lines of a modifier no add-on needed and we're able to use this really powerful data visualization tool

And then finally typescript and glint are great technologies that assist with the ember interoperability story Thank you very much