I am a beginner in Gatsby.js, I am developing a page with a dropdown of 12 months. Once user select the month, I will pass the value into a component, which will display different set of result based on month selected.
There is a graphql query to retrieve data by using useStaticQuery in my component.
I understand the useStaticQuery cannot accept any variable, so is it possible to filter the returned data and create another data set based on the month inputted? Or should I just create 12 components and display the correspondning one based on month selected?
(Actually I tried to loop the data and return a single aggregate value successfully, but I not sure if it is possible to return a subset of data result
data.allData.edges.forEach(edge => {
if(edge.node.month==inputMonth)
total=total+edge.node.amount
})
outValue= total
)
I think you are trying to use a find() loop. In your case:
let matchedMonth = data.allData.edges.find(edge => edge.node.month === inputMonth)
Basically, you are looping through allData (all months) to find which one is exactly equal to inputMonth. Since you are saving it in matchedMonth you can play whatever you want (passing to a component, etc).
Related
In my Cypress test, I'm comparing the data on a HTML table (which is paginated) against expected values (which are stored in an array).
Also, the number of records in the table is can vary.
The current amount of rows appearing on the table (the first page) is 5 records, and users can navigate to the other records using the Next/Previous/First/Last buttons as usual.
Here is my latest Cypress code:
cy.task('queryDb', `${myQuery}`).then(result => {
for (var i = 0; i < result.length; i++) {
dashboard.name(i).should('have.text', ` ${result[i].name} `)
}
})
The above for loop works for the 5 companies that appear on the UI, but it doesn't loop through the records that aren't visible on the screen.
Can someone please tell me how I can validate the remaining companies in the table?
Do I only do this for the first 5 records, click the 'Next' button, & then do the same for the next 5 records?
There are two very different things, and you may want to separate them into two tests:
You want to test the method that populates your HTML table and make sure you retrieve the expected results
You want to ensure that your HTML table is working as expected with the proper pagination
For (1) it would be easier to test your HTML table query URL and see if you can query all without the pagination. In this way, you will be able to ensure that the retrieved data are correct.
For (2) you know the data are correct. You want to make sure they are displayed as expected.. It may be helpful to try and validate the next and previous buttons.
In this way, you will know if the problem comes from the logic inside your UI component or if it comes from your backend.
We have a set of JSON data coming back from an API that we pass to WDR via the report.dataSource field in the initial configuration. One of these columns is a string that doesn't render in the normal display. However, the data is there and if we export Excel the column is shown there is well.
This columns still renders for most users, and we can't repro it in our dev environment. It's just a single client that we know of thats experiencing this.
What are some reasons this might be happening?
We tried changing the data, passing in different values, and specifying the data type in dataSource.mapping.
None of these had any effect
Such behavior can happen when there are multiple WebDataRocks components on the page using the exportTo API call from the webdatarocks instance. In this case, webdatarocks will be equal to the last initialized component. Hence, the export result will correspond to the slice from the last WDR instance, which may differ from the previous.
If this is the case, you should use the names of WebDataRocks instances to access API calls of different components:
let pivot1 = new WebDataRocks({
//config
});
let pivot2 = new WebDataRocks({
//config
});
//Export first pivot
pivot1.exportTo('excel');
//Export second pivot
pivot2.exportTo('excel');
I have two select lists
1. The first one P4_country_id_B contains countries names
select country_name as d, country_id as r
from countries
2. The second one P4_CITY_ID_B contains cities of a country based on selected value in P4_CITY_ID_B.
select city_name as d, city_id as r
from cities
where country_id = :P4_country_id_B
Everything goes OK without any problem.
BUT
I use Execute PL/SQL Code Dynamic Action to change selected values of those lists like this (for example):
:P4_country_id_B:=country_returned_value;
:P4_CITY_ID_B:=city_returned_value;
Where
country_returned_value : is a one value of countries list values for example (USA)
city_returned_value : is a one value of cities list values for example (NewYourk).
The first selected list value changes but the second list never changes.
Notes:
I used P4_country_id_B,P4_CITY_ID_B as Page Items to Submit for the dynamic action.
I don't whan to submit the page instead of dynamic action
How can I change list values in this case please?.
Thanks in advance.
Cascading select lists are refreshed through ajax.
Change select list 1, select list 2 will be refreshed.
You execute plsql, which in turn will set the value of the items involved. Both are select lists, and one is dependent on the other.
So while both will be set, the change of the first one will cause the second to be refreshed.
In other words, you're doing it too fast. And while there is a solution, the proper way is a bit complex and I wouldn't build it in DA's personally.
You haven't specified how or when you call the code which sets the values for the items. So here I'll just assume a DA with an action of type "Execute JavaScript" (for example)
// perform a call to the ajax callback process to get the country and city id
// there are several ways to provide values to the process if necessary.
// for example through x01, which can be used in the proces like
// apex_application.g_x01
apex.server.process('GET_COUNTRY_DEFAULTS', {x01:""}).done(function(data){
// process returns JSON which contains 2 properties: country_id and city_id
// data.country_id
// data.city_id
// bind a ONE-TIME handler to the after refresh event of the city
// cascading LOVs fire the before and after refresh events like any other
// refreshable element in apex
// a one time handler since the values are different each time this code will
// execute
apex.jQuery("#Px_CITY_ID").one("apexafterrefresh",function(){
// after refresh of the list, attempt to set the value of the list to the
// value retrieved earlier
apex.item(this).setValue(data.city_id);
});
// finally, set the value of the country. Doing this will also trigger the
// refresh of dependent elements
apex.item('Px_CITY_ID').setValue(data.country_id);
// since a handler has been bound, the refresh will occur, the after refresh
// triggers, and the value will be set properly
});
Finally, create a new process on the page under "AJAX Callback", and name it GET_COUNTRY_DEFAULTS
DECLARE
l_country_id NUMBER;
l_city_id NUMBER;
BEGIN
l_country_id := 8;
l_city_id := 789;
htp.p('{"country_id":'||l_country_id||',"city_id":'||l_city_id||'}');
EXCEPTION WHEN OTHERS THEN
-- returning an error while using apex.server.process will prompt the user
-- with the error and halt further processing
htp.p('{"error":"'||sqlerrm||'"}');
END;
That should tie everything together.
I think there is some confusion here. My answer below, assumes, according to your question, the first list name is P4_country_id_B, and the second list name is Cities_LOV. If that is not the case, please clarify.
Your first list called P4_country_id_B, and you assign it to itself through the following statement:
:P4_country_id_B:=country_returned_value;
So basically, nothing has changed, the value of P4_country_id_B is the returned value of your list P4_country_id_B without any need for this assignment. Note, it is not clear to me, what is country_returned_value, because P4_country_id_B holds the returned value.
Secondly, you have a list called Cities_LOV, and you assign the returned value to P4_CITY_ID_B page item, through the following statement:
:P4_CITY_ID_B:=returned_city_value;
Again, I am not sure what is returned_city_value, because Cities_LOV holds the returned value of that list.
I am not sure what you are trying to achieve here. But I assume, you want to allow the user to select the Country first, and then based on that, you want to refresh the Cities list to display the cities in that particular country. If that is the case, then use a dynamic action on P4_country_id_B value change, to refresh the value of Cities_LOV. You only need to pass P4_country_id_B to that dynamic action.
UPDATE
After you corrected the wording of the question, the answer would be like this:
In your child list P4_CITY_ID_B make sure you set the option Cascading LOV parent item(s) to the parent list P4_country_id_B. You do not need the dynamic action. The child list, should refresh upon the change of the parent list. The answer here, goes in details about how to implement cascading list
I'm trying to do something a little clever with my app. I have a table, Adverts - which contains info on cars: model, mileage etc. The table is related to a few other tables via foreign keys e.g. model name is retrieved through a foreign key linking to a "VehicleModels" table etc.
Within the app's "Entities" dir (classes which map to tables in the database) I have one for the Adverts table, Advert.cs. This has a couple of properties which EF has been told to ignore (in fluent api) as they don't map to actual fields in the Adverts table.
The idea behind these fields is to store the calculated distance from a postcode (zip code) the user enters in a search form which filters through the Adverts table if they only want to see cars available within a certain radius. e.g.:
IQueryable<Advert> FilteredAdverts = repository.Adverts
.Where(am => mfr == "" || am.Manufacturer == mfr) &&
(am => model == etc etc...)
Later on, to calculate the distance the code resembles:
if (userPostcode != null) {
foreach (var ap in FilteredAdverts.ToList()) {
distmiles = //calculate distance in miles
distkm = //calculate distance in km
ap.DistanceMiles = Convert.ToInt32(distmiles);
ap.DistanceKm = Convert.ToInt32(distkm);
}
}
The problem I'm having is that in order to assign values to these two fields, I'm having to use .ToList() which is pulling all rows from the table. Works ok if there are only a few rows, but when there are ~1,000 it takes approx. 2.2 seconds, when I increased it to about 12,000 rows it took 32 seconds for the page to load when no filters were applied i.e. all active adverts returned.
The reason I'm pulling all adverts before calling .Skip and .Take to display them is that the filters available in the search form are based on possible options of all current adverts that are active i.e. have time remaining, rather than just selecting a list of manufacturers from the manufacturers table (where a user could choose a manufacturer for which there are no search results). e.g.
VehicleManufacturers = (from vm in FilteredAdverts.Select(x => x.VehicleManufacturer).Distinct().OrderBy(x => x)
select new SearchOptionsModel
{
Value = vm,
Text = vm,
Count = FilteredAdvertsVM.Where(x => x.VehicleManufacturer == vm).Count(),
})
.... filters for model, mileage etc
To get an idea of what I'm trying to achieve - take a look at the search form on the Autotrader website.
Once all the filters are applied, just before the model is passed to the view, .Skip and .Take are applied, but of course by this time all rows have been pulled.
My question is, how do I go about redoing this? Is there a better method to make use of these non-mapped properties in my Advert entity class? I'm working on my home PC - C2D # 3.4GHz, 2GB ram - would the slow queries run ok on a propert web host ?
You cannot use server-side paging on a client side function. That's the short answer. Assuming I understand your need correctly (to filter a list based on proximity to a given zip code), a solution I've used in the past is storing each 'Advert' record with a lat/long for that record's zip code. This data is persisted.
Then, when it comes time to query, calculate a bounding box (lat1, lng1, lat2, lng2) based on X distance from the center (user provided zip code) and filter the query results based on records whose lat/lng fits within this box. You can then apply client side calculations to further and more accurately filter the list, but using this method, you can establish a base filter to minimize the number of records pulled.
Edit: You can order the results of the query based on the absolute distance from the center point in terms of abs(latU-latR) and abs(lngU-lngR) where latU/lngU is the lat/lng of the user provided zip code and latR/lngR is the lat/lng of the record in the db.
We are using advanced search in the latest version of jqGrid, and our search dialog is configured to be always visible on the page above the grid. The structure of our data lists is dynamic. Thus, when we are going to display a list, we first do an ajax call to get the list of columns for the grid. We then construct the data model for the grid and make a request for the data.
Currently, in the request to get the columns, we return the data type of the column. If the data is a date, we display a date picker in the search form. However, some of our customers HATE having to use <= >= for date ranges. They want to be able to pick a date column and then set a start and end date using two side-by-side date pickers. I've been pushing them off for a while now because they have the ability to do date range searches, but the complaining isn't stopping. (It's more clicks to add the second filter with the end date)
Is there any way I can modify jqGrid to give me a date range control when I am configuring a search on a date column? I really don't want to have to set up an external search dialog UI just to deal with these complaints, but product-management is pushing really hard to get "normal" date ranges for the grids.
You can create your own custom search dialog. See this question which I asked couple days ago.
using setGridParam to change your postData array and include extra values in the filters JSON object that will be carried over to your server side where you can dissect it. In your case you can pass over your data range Start and End inside the filter item of the postData. Then reload your jqGrid like this
var $grid = $("#list');
//$grid.setGridParam({datatype:'json', page:1}).trigger('reloadGrid');
var post_data = {searchField:'',searchString:'', searchOper:'',
filters:'{"groupOp":"OR","rules":['+
'{"field":"Date","op":"ge","data":"2012-04-23"},'+
'{"field":"Date","op":"lt","data":"2012-04-25"}' +
']}'
};
$grid.setGridParam({postData:post_data}).trigger('reloadGrid');
The above will save the postData array with the new config and the reloadGrid sends a request to the server with the new postData array. This will preserve the paging as well; however, to get the old view of your grid (without search terms) you need to implement the reset button separately too and trigger reloadGrid after that for this to take effect.
Not sure if you have solved your problem by now; however, I am putting this solution here for any one from the future who has the same issue.
As far I know there is no way to do this, but to write it yourself.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_searching
Filter jqGrid Data by Date Range?