I have few UI components in an angularjs web-application. Each display data based upon same input. One shows stats which are calculated on the basis of a time period. Other shows a chart of daily progress of all of those stats in the given time period.I have designed both the components in such a way that they make their own API call. However now I know that data that component A receives can be used to configure component B instead of it making another API call.There is some calculation that I have to on daily data to get aggregated information. This can be done on the frontend too. Example:If data is for a year, component A shows a graph of 10 stats based on a list of 365 entries and component B receives 10 stats based on aggregate of the same 365 entries. Component B also has to show changes in each stat in terms of percentage between last 365 days and the ones that were selected. Shall I have it as two API calls or just one ? 
Is it a good idea to have separate UI components make their own webservice calls?
design;design patterns;javascript;angularjs
It depends. When A and B obtain their data each on its own, this has the advantage that both are independent from each other, and A may be used without B, and B without A. The disadvantage is that you might need to pull the same data over the network twice, and that the data displayed by A and B might not be always consistent because the content changed between the two data requests.If the data must be consistent, and/or you want to reduce network traffic, it will probably be a good idea to introduce a component C which works as a data layer, makes the API call for both A and B, and provides the same data (or different views on the same data) for both. That will still allow to use A & B independently from each other (of course, not independent from C). Moreover, this provides you immediately with a place where you can put any code shared between A and B.