As the code bellow, column don't resize when width is less than minWidth. How can i resize it to minWidth?
var passMinMaxCheck =
!resizeSets ||
resizeSets.every(function (columnResizeSet) {
return _this.checkMinAndMaxWidthsForSet(columnResizeSet);
});
if (!passMinMaxCheck) {
// even though we are not going to resize beyond min/max size, we still need to raise event when finished
if (finished) {
var columns =
resizeSets && resizeSets.length > 0 ? resizeSets[0].columns : null;
this.fireColumnResizedEvent(columns, finished, source);
}
return; // don't resize!
}
Related
I am using getRowStyle to hide the rows which don't have changes, under certain circumstances. Essentially:
const rowsToHide = [3,5,6]
function getRowStyle({node}) => {
if(!rowsToHide.includes[node.rowIndex]) {
return undefined;
}
return { display: 'none', height: 0 }
}
However, ag-grid retains the space for the hidden row regardless. How could I display only the rows I want, without leaving blank rows in the grid?
I'm trying to load images from internet but i want to show a placeholder till load finishes.
How can i determine the size of placeholder to match the actual size of the image?
The width and height of the image from the api are 2000, 3000 respectively. How can I convert these values?
There are a few parts to the question,
First, you should download an image the from the web through one of many methods.
https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html
https://docs.flutter.io/flutter/widgets/Image/Image.network.html
get the bytes and convert to an image with this https://docs.flutter.io/flutter/widgets/Image/Image.memory.html
Here are the widgets you should use.
You should use this widget as a sized placeholder.
https://docs.flutter.io/flutter/widgets/SizedBox-class.html
Here is a possible child to show a loading animation
https://docs.flutter.io/flutter/material/CircularProgressIndicator-class.html
To display it, you can either complete the FutureBuilder or
Image im = null;
Map imageDimensions = null;
initState(){
fetchImageDimension.fetch().then((imageD) => setState(){imageDimensions = imageD;})
somefuntion.fetch().then((image) => setState(){im = image;})
}
Widget build(buildContext context){
var width = imageDimensions["width"];
var height = imageDimensions["height"];
var placeholderColor = imageDimensions["color"];
var dimensionsLoaded = imageDimensions != null;
var imageLoaded = im != null;
return if(imageLoaded)
Image.....
else {
if(dimensionsLoaded) {
SizedBox(
width: width,
height: height,
child: const Card(child: Container(color: Color(placeholderColor)),
)
} else {
//neigher image or dimensions are Loaded. Nothing you can do
}
}
}
}
This code is not meant to be compiled but it is meant to show the possible options to answer the question.
When I hover on pie chart, the values are displayed in tooltip. However, I want to display values outside of pie chart. I want to make chart like this image:
How to do this?
I was able to get something similar working using chart.js v2.3.0 using both the plugin API and extending chart types API. You should be able to take this as a starting point and tweak it to your needs.
Here is how it looks after being rendered.
Note, this requires digging deep into chart.js internals and could break if they change the way tooltips are positioned or rendered in the future. I also added a new configuration option called showAllTooltips to enable selectively using the plugin on certain charts. This should work for all chart types, but I am currently only using it for pie, doughnut, bar, and line charts so far.
With that said, here is a working solution for the image above.
Chart.plugins.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create a namespace to persist plugin state (which unfortunately we have to do)
if (!chart.showAllTooltipsPlugin) {
chart.showAllTooltipsPlugin = {};
}
// turn off normal tooltips in case it was also enabled (which is the global default)
chart.options.tooltips.enabled = false;
// we can't use the chart tooltip because there is only one tooltip per chart which gets
// re-positioned via animation steps.....so let's create a place to hold our tooltips
chart.showAllTooltipsPlugin.tooltipsCollection = [];
// create a tooltip for each plot on the chart
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
// but only create one for pie and doughnut charts if the plot is large enough to even see
if (!_.contains(['doughnut', 'pie'], sector._chart.config.type) || sector._model.circumference > 0.1) {
var tooltip;
// create a new tooltip based upon configuration
if (chart.config.options.showAllTooltips.extendOut) {
// this tooltip reverses the location of the carets from the default
tooltip = new Chart.TooltipReversed({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart);
} else {
tooltip = new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart);
}
// might as well initialize this now...it would be a waste to do it once we are looping over our tooltips
tooltip.initialize();
// save the tooltips so they can be rendered later
chart.showAllTooltipsPlugin.tooltipsCollection.push(tooltip);
}
});
});
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we want to wait until everything on the chart has been rendered before showing the
// tooltips for the first time...otherwise it looks weird
if (!chart.showAllTooltipsPlugin.initialRenderComplete) {
// still animating until easing === 1
if (easing !== 1) {
return;
}
// animation is complete, let's remember that fact
chart.showAllTooltipsPlugin.initialRenderComplete = true;
}
// at this point the chart has been fully rendered for the first time so start rendering tooltips
Chart.helpers.each(chart.showAllTooltipsPlugin.tooltipsCollection, function (tooltip) {
// create a namespace to persist plugin state within this tooltip (which unfortunately we have to do)
if (!tooltip.showAllTooltipsPlugin) {
tooltip.showAllTooltipsPlugin = {};
}
// re-enable this tooltip otherise it won't be drawn (remember we disabled all tooltips in beforeRender)
tooltip._options.enabled = true;
// perform standard tooltip setup (which determines it's alignment and x, y coordinates)
tooltip.update(); // determines alignment/position and stores in _view
tooltip.pivot(); // we don't actually need this since we are not animating tooltips, but let's be consistent
tooltip.transition(easing).draw(); // render and animate the tooltip
// disable this tooltip in case something else tries to do something with it later
tooltip._options.enabled = false;
});
}
},
});
// A 'reversed' tooltip places the caret on the opposite side from the current default.
// In order to do this we just need to change the 'alignment' logic
Chart.TooltipReversed = Chart.Tooltip.extend({
// Note: tooltipSize is the size of the box (not including the caret)
determineAlignment: function(tooltipSize) {
var me = this;
var model = me._model;
var chart = me._chart;
var chartArea = me._chartInstance.chartArea;
// set caret position to top or bottom if tooltip y position will extend outsite the chart top/bottom
if (model.y < tooltipSize.height) {
model.yAlign = 'top';
} else if (model.y > (chart.height - tooltipSize.height)) {
model.yAlign = 'bottom';
}
var leftAlign, rightAlign; // functions to determine left, right alignment
var overflowLeft, overflowRight; // functions to determine if left/right alignment causes tooltip to go outside chart
var yAlign; // function to get the y alignment if the tooltip goes outside of the left or right edges
var midX = (chartArea.left + chartArea.right) / 2;
var midY = (chartArea.top + chartArea.bottom) / 2;
if (model.yAlign === 'center') {
leftAlign = function(x) {
return x >= midX;
};
rightAlign = function(x) {
return x < midX;
};
} else {
leftAlign = function(x) {
return x <= (tooltipSize.width / 2);
};
rightAlign = function(x) {
return x >= (chart.width - (tooltipSize.width / 2));
};
}
overflowLeft = function(x) {
return x - tooltipSize.width < 0;
};
overflowRight = function(x) {
return x + tooltipSize.width > chart.width;
};
yAlign = function(y) {
return y <= midY ? 'bottom' : 'top';
};
if (leftAlign(model.x)) {
model.xAlign = 'left';
// Is tooltip too wide and goes over the right side of the chart.?
if (overflowLeft(model.x)) {
model.xAlign = 'center';
model.yAlign = yAlign(model.y);
}
} else if (rightAlign(model.x)) {
model.xAlign = 'right';
// Is tooltip too wide and goes outside left edge of canvas?
if (overflowRight(model.x)) {
model.xAlign = 'center';
model.yAlign = yAlign(model.y);
}
}
}
});
I am having a popup and it position is set dynamically according to the screen but when the number of the label increase the popup create problem as ones its show in upper side then when the label goes top on the scolling window it suppose to come down but its not coming down.
var position= popup.offsetTop;
alert("popupTop"+position);
var positionpop=popup.offsetHeight;
var width1=label.offsetWidth;
var position1=label.offsetHeight;
var position2=label.offsetTop;
var windowHeight = $wnd.innerHeight;
var scroll=$wnd.pageYOffset;
alert(scroll+"scroll");
var t=position-scroll;
var z=windowHeight-scroll;
var x="Totalheight"+screen.height;
var y=position1+position2+positionpop;
if(position1+position2+positionpop<windowHeight)
{
alert("no change");
}
if(position1+position2+positionpop>windowHeight )
{
popup.setAttribute("style","top:"+(position2-positionpop)+"px");
}
if(t<=0 || z<=0)
{
popup.setAttribute("style","bottom:"+(diff)+"px");
}
I have reached upto the dynamically changing the position up and down when the label is in the top but still have one problem that I both up and down position occured one by one I want to bound it into one..
if(position2+positionpop<windowHeight || t<=0)
{
popup.setAttribute("style","bottom:"+((windowHeight-(position2+position1))-positionpop)+"px");
}
else
{
if(position2+positionpop>windowHeight && t>0)
{
popup.setAttribute("style","top:"+(position2-positionpop)+"px");
}
}
You should use PopupPanel.setPopupPositionAndShow and PopupPanel.setPopupPosition. See the PopupPanel javadoc sample.
I have found this thread on creating and uploading thumbnail images client side. The tread shows how to upload the first image then follow up by resizing it and uploading again. I was wondering if there is an easy way to add another step so the end result would produce and original, medium size and thumbnail
A better solution is to trigger QueueChanged in the FileUploaded handler, and then call refresh. This will initiate the upload again for the same file and you can set a property that you read in the BeforeUpload handler to adjust the file size.
Warning #1: you should upload the thumbnail after the full-sized image, otherwise the full-sized image may have some buffer issues and get cut off.
Warning #2: This will only work if the bind call for FileUploaded happens after uploader.init(), otherwise the uploader's own handler for FileUploaded will overwrite file.status back to DONE after your handler.
below is the original response from this thread Plupload Thumbnail
uploader.bind('BeforeUpload', function(up, file) {
if('thumb' in file)
up.settings.resize = {width : 150, height : 150, quality : 100};
else
up.settings.resize = {width : 1600, height : 1600, quality : 100};
}
uploader.bind('FileUploaded', function(up, file) {
if(!('thumb' in file)) {
file.thumb = true;
file.loaded = 0;
file.percent = 0;
file.status = plupload.QUEUED;
up.trigger("QueueChanged");
up.refresh();
}
}
is quite simple, I did that in my project, with two minor adjustments.
In the upload.php I made the directory information dynamically:
$diretorio = $_REQUEST["diretorio"];
$targetDir = 'upload/'.$diretorio;
and changed the code in the upload interface:
uploader.bind('BeforeUpload', function(up, file) {
if('thumb' in file){
//thumb
up.settings.url = 'upload/upload.php?diretorio=thumbs',
up.settings.resize = {width : 100, height : 75, quality : 60};
// medium size
up.settings.url = 'upload/upload.php?diretorio=medium',
up.settings.resize = {width : 200, height : 150, quality : 60};
}else{
up.settings.url = 'upload/upload.php?diretorio=full-size',
up.settings.resize = {quality : 100};
}
uploader.bind('FileUploaded', function(up, file) {
if(!('thumb' in file)) {
file.thumb = true;
file.loaded = 0;
file.percent = 0;
file.status = plupload.QUEUED;
up.trigger("QueueChanged");
up.refresh();
}
});
});
the answer given by Eduardo de Souza is very useful to me but there some change to work this code here can't upload medium file and the other is image can't be resize as resize param given i found some changes in my case which is:
var i = 1;
uploader.bind('BeforeUpload', function (up, file) {
if ('thumb' in file) {
if (i == 1) {
//thumb
up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=thumb',
up.settings.resize = {width: 80, height: 80, enabled: true};
} else {
// medium size
up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=medium',
up.settings.resize = {width: 800, height: 600, enabled: true};
}
} else {
up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=full';
}
uploader.bind('FileUploaded', function (up, file) {
if (!('thumb' in file)) {
file.thumb = true;
file.loaded = 0;
file.percent = 0;
file.status = plupload.QUEUED;
up.trigger("QueueChanged");
up.refresh();
} else {
if (i < 2) {
i++;
file.medium = true;
file.loaded = 0;
file.percent = 0;
file.status = plupload.QUEUED;
up.trigger("QueueChanged");
up.refresh();
}
}
});
});
have added a attribue enabled:true in resize param which make image resize and some checking with i variable for geting notice on medium url also,
i think this can be useful.