Is there a way to suppress the count of ag-grid-react autoGroupColumnDef.cellRendererParams.suppressCount to only be supressed for columns that do no have a count.
Currently this is how the grid options are set up for the autoGroupColumnDef:
autoGroupColumnDef: {
headerName: "My Group",
hide: true,
suppressSizeToFit: true,
width: 330,
cellRendererParams: {
suppressCount: true,
}
}
What suppress count does is hide the count next to the label: The count will look like this:
Azerbaijan(1)
United States(0)
United Kingdom(1)
Uganda (0)
What i'd like to achieve is to automatically hide for ones whose count is (0) so it becomes like shown below. Making the rows with the count expandable:
Azerbaijan (1)
United States
United Kingdom (1)
Uganda
I can't seem to figure out how to achieve this in the new version of ag-grid, in the previous version it worked automatically.
With the new version there isn't away of having a conditional statement evaluate this.
Related
This is what I am trying to do in Mapbox GL JS (I am new to it): I have a spatial dataset of US cities. Each city has a ranking attribute (1-5). At the default zoom level, I want only the major cities (rank 1) to be visible. As the user gradually zooms in, I want the cities to appear based on their rank (2,3,4,5). This way, only when the user is at the max zoom level can even the smallest cities (rank 5) be visible.
I appreciate any help!
In the Mapbox style specification (filter property on layer object documentation) you can filter the features in the US Cities spatial dataset like so:
{
"id": "layer.us-cities,
...
"filter": [
">=", ["zoom"],
["match", ["get", "rank"],
1, // rank
10, // minimum zoom level
2, // etc.
15,
3,
18,
4,
20,
23 // fallback for ranks > 4
]
]
}
The filter consists of 2 parts:
The expression to compare the map's current zoom level against
The minimum zoom level needed for a city (vector tile feature) of a specific rank
For example: let's say the map's current zoom level is 17. Features with rank 1 (minimum zoom level 10) and rank 2 (min. zoom level 15) will be displayed on the map. From rank 3 onwards the minimum zoom level is at least 18 for which the equation mapZoomLevel >= "city zoom level by rank" doesn't satisfy.
filter={[
"all",
[
"match",
["get", "level"],
["2", "3", "4", "5"],
[">", ["zoom"], 12.1],
["<=", ["zoom"], 16],
],
]}
I was wondering if it would be possible to ignore the sizes of segments in highcharts pyramid. I would like all segments to be of the same size despite the value. The reason is that sometimes differences between values may be quite significant and value of 1 - even being extremely important, becomes invisible when the next value is 500. Also, would like to be able to add a legend if possible. It would be nice to set a minimum size of a segment if not possible to get dynamic sizing disabled.
Thanks for your help!
Pawel
Yes, you can add additional data according to which the height of the segment will be calculated. Next, use keys option to map the values and show the right one in a tooltip and data label:
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.realY}</b><br/>'
},
series: [{
...
keys: ['name', 'realY', 'y'],
dataLabels: {
format: '<b>{point.name}</b> ({point.realY:,.0f})',
...
},
data: [
['Website visits', 15654, 1],
['Downloads', 4064, 1],
['Requested price list', 1987, 1],
['Invoice sent', 976, 1],
['Finalized', 846, 1]
]
}]
Live demo: https://jsfiddle.net/BlackLabel/e83fatk2/
API Reference: https://api.highcharts.com/highcharts/series.column.keys
In my developed grid with column grouping, there is white empty space is appear at end when resize the columns. Any Suggestion?[![enter image description here][1]][1]
You can call sizeColumnsToFit() after columnRowGroupChanged event:
columnRowGroupChanged A row group column was added or removed.
.html template event binding
(columnRowGroupChanged)="groupChanged($event)"
or .ts gridOptions event binding (don't forget to define [gridOptions] in .html)
this.gridOptions:{
onColumnRowGroupChanged : this.groupChanged.bind(this)
}
handling
groupChanged(params){
params.api.sizeColumnsToFit();
}
DEMO
Starting from ag-grid 23.1.0, we no longer have to use sizeColumnsToFit. Instead, in column definition, add flex: 1 to the last visible column.
This prevents all annoying jumps and weird grid behavior when resizing columns. In case user enlarge the column, horizontal scrollbar will appear, which is the expected behavior.
Please go over your code and change sizeColumnsToFit to the flex solution.
Flex also gives you control over relative column sizes, you can read more about it in the docs: https://www.ag-grid.com/javascript-grid-resizing/.
Example:
columnDefs = [{...}
...
{
headerName: 'HeaderA',
field: 'name',
...
flex: 1, // Adding this to last column definition
}]
Kendo team released their pannable/zoomable chart recently.
I would like to use it but I have the following problem: I need to display only the last X records of the available ones, and display the rest on zoom/ mouse move.
The example they presented on their site: http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom displays the data starting from c0 to c10.
I would like to see the last 10 records from c89 to c99 instead of the first 10.
How to achieve that - can you please advice.
In their example, set the min and max of the category axis:
categoryAxis: {
min: 90,
max: 99,
labels: {
rotation: "auto"
}
},
Updated DEMO
I am trying to use highcharts for large heatmap generation.I have tried to modify demo code given on highcharts website.
As by default it sets date on x axis , I need to some other values then default data format on x-axis.I have followed few question on Stack overflow which gives me the required output but it's not correct as heatmaps does't seems right and when I hover on the result ,tooltip shows those date formats on hovering and generated heatmaps is also not correct.
My fiddle demo is: http://jsfiddle.net/ktamk1tp/1/
Note: I am getting error in posting js fiddle link according to SO guidelines.It would be appreciated if anyone can edit this.
Disabling colsize in series helps - http://jsfiddle.net/ktamk1tp/9/
(JS line 255)
//colsize: 24 * 36e5, // one day
Simple fix for your yAxis title is that you are setting it twice:
yAxis: {
title: {
enabled: true,
// THIS Axis title is not working, but the same method works for the xAxis
text: 'my axis'
},
categories: ['0', '1', '2', '3', '4'],
title: null
},
Remove title: null.
The reason your tooltip looks odd is that you are setting your axis to categories using string integers and then converting to a date stamp. The conversion of xAxis = '0' to javascript time is correct. The 0 js time is Jan 1 1970. You need to either send in the javascript timestamp and set the axis accordingly or you need to use categories that are dates ['Monday','Tuesday','Wednesday'....].