I am trying to create a scattergeo map in React using Plotly.
Basically I have a container that have a sidebar, and then the plot, so basically something like:
.main_container {
display: grid;
grid-template-columns: 300px 1fr;
}
However, when I plot it and set the layout parameters as follows:
layout={{
margin: { r: 0, t: 0, l: 0, b: 0 },
showlegend: false,
autosize: true,
geo: {
visible: true,
resolution: 50,
scope: "europe",
showcountries: true,
countrycolor: "#6E6E6E",
showland: true,
landcolor: "#343332",
showocean: true,
oceancolor: "#191A1A",
showlakes: true,
lakecolor: "#191A1A",
showsubunits: true,
subunitcolor: "Blue",
lonaxis: { range: [-10.854492, 28.78418], dtick: 5 },
lataxis: { range: [45.065607, 59.063154], dtick: 5 },
},
}}
The result is:
I know it isn't much (in this case), but there is still a bit of a margin/padding to the left and right. If I dare to put anything on top of the map, e.g. some kind of bar, it just gets worse:
I have even tried giving the plot a width and height in the layout instead of the autosize. But that doesn't help either.
So is that just how Plotly is, or am I doing something wrong ?
Related
I have created a chart with 3 points. I have added two graphical elements as circle and rectangle (line) for dragging the points.
Circle dragging should apply for all three points in the graph as in the expected behavior screenshot below.
Line dragging is a vertical shift for graph to move it vertically.
Circle dragging does not apply for all 3 points when I return both graphical elements in the elements array as in the code. It just applies only for 1st point.
When I return one graphical element at a time it works.
Current Behaviour
image of how chart works now
Below I have included the code which returns graphic elements
myChart.setOption({
graphic: data.map(function (item, dataIndex) {
let rec = {
type: 'group',
left: 'center',
position: myChart.convertToPixel('grid', item),
draggable: 'vertical',
ondrag: function (dx, dy) {
onPointDraggingLine(dataIndex, [this.x, this.y]);
},
children: [
{
type: 'rect',
top: '200x',
shape: {
width: 470,
height: 0
},
style: {
stroke: 'gray',
lineWidth: 5,
lineDash: [6]
},
cursor: 'move'
}
]
};
let onlyCrc = {
type: 'circle',
position: myChart.convertToPixel('grid', item),
draggable: true,
ondrag: function (dx, dy) {
onPointDragging(dataIndex, [this.x, this.y]);
},
shape: {
cx: 0,
cy: 0,
r: symbolSize / 2
},
invisible: false,
z: 100,
cursor: 'move'
};
return { elements: [rec, onlyCrc] };
})
});
I have tried to return graphical elements as array of objects .And I have tried by giving a condition for dataIndex while mapping. but didn't work. Expected behavior is as below.
Expected Behavior.
image of how chart should work
Below I have attached the whole code I tried in Codepen.
Link to Minimal Reproduction
https://codepen.io/rushaidrilaf/pen/bGKONRj
I was able to Solve this. Started to resolve it by pointing the dragging function to 2nd point in the graph and updating the position of circular graphical element while dragging the horizontal line.
solution can be viewed from this link
https://codepen.io/rushaidrilaf/pen/bGKONRj
enter code here
I want the slider to use centered slides, but not in the first and the last ones.
When I enable the centered slides property "centeredSlides: true" and set also "slidesPerView: 1.2" I get the correct result on the middle slides, but the first and the last I want to be the left or rigth position respectively.
this.SlideOptionsPaths =
{
initialSlide: 0,
centeredSlides: true,
slidesPerView: 1.2,
slidesPerGroup: 1,
spaceBetween: 10,
//slidesOffsetBefore: -82,
//slidesOffsetAfter: 160,
speed: 400,
fadeEffect:
{
crossFade: true
}
};
This is the actual behavior:
And i need the first image to be aligned left...
When swiping trow the cards (the middle cards) I need this behavier (that is correctly happening):
By the time the question was posted there was no easy way to achieve this result. But since Swiper version 5.2 a new centeredSlidesBounds parameter was added to the API.
All you need to do is use the following parameters in the options object:
{
centeredSlides: true,
centeredSlidesBounds: true
}
Based on the docs what about using:
{
initialSlide: 1
}
which will push the slide along one so it has something to fill the gap, or
{
loop: true,
}
which will start at the beginning but show the end wrapped around.
Because the option your asking isn't supported as far as I know.
we use the highchart control with Angular and bootstrap.
To adjust the vertical space between the chart and the legend (both are rendered by highchart as svg elements), we set the y property of the legend on page load (in the controller) like this:
$scope.chartContracts = {
options: {
chart: {
type: 'pie',
marginBottom: 50
},
legend : {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 4,
Now in one of the Bootstraps layouts, the spacing (y) should be -10 in stead of 4 because for some reason an extra spacing is added.
So it should be based on media query or something similar I guess?
The question is how to do this... I tried with css but I can't seem to style SVG elements (they are called <g>)?
You can check window width and then return correct value.
var wWidth = $(window).width(),
value;
if(wWidth < 400) {
value = 5;
} else {
value = 10;
}
//scope
y: value
I am trying to create some autosizing properties for an angular ng-grid element:
for (var i = 0; i < $scope.dates.length; i++) {
var dateElement = {
field: 'reportMap.' + $scope.dates[i] + '.hours | round',
displayName: i + 1,
minWidth: "27px",
maxWidth: "46px"
};
if ($scope.holidays.indexOf(i + 1) != -1) {
dateElement.cellTemplate = 'app/partials/gridCell.html';
}
$scope.columns.push(dateElement);
.....
$scope.gridOptions = {
data: 'monthlyReports',
columnDefs: 'columns',
plugins: [new ngGridFlexibleHeightPlugin()],
enableRowSelection: false,
enableColumnResize: true,
enableSorting: false,
enableCellSelection: true
};
However, when the field data gets longer than 4 characters the content is hidden. I.e. the width is not increased. I could be using width: "auto" but i need to limit the sizing of th columns somewhat...
Why is the column width not increased when the conent gets longer than 27px?
This is what i get setting the width to auto for my date elements:
This is what i want, dynamic width depending on content! (i also want less padding around the number and the left and right sides of the cell, see the wide cell)
Ovveriding the cell properties did the trick in this case, just increasing the constant width one pixel to 28px and overriding the padding made it look good.
ngCellText {padding: 2px; text-align: center;}
I'm having a few issues when attempting to make the switch from extjs 4.0.7 to 4.1.1.
The first issue is as follow:
I have two treepanels which are within a column layout. One right next to the other. My app loads a bunch of nodes into the left panel, and then you can optionally move some of them to the other panel. However, the panel with all the nodes is not showing a scrollbar, and thus I can't see about 1/3 of the nodes all of a sudden. I had a semi-similar issue in 4.0.7 where I couldnt see the last node moved if the panel was full until I moved another node. I fixed that with the following lines:
treePanel1.invalidateScroller();
treePanel2.invalidateScroller();
These lines are deprecated in 4.1.1, and the problem seems to have become worse. Has anyone had a similar issue, and how do I get my scroll bar back.
A second major issue related to my UI:
I have two grids right next to each other elsewhere, layed out similarly to the treepanels. I've set up drag and drop between the two grids. Again all the nodes start in the left grid, with the option to drag some into the right grid. However, the right grid is now not showing at full size, it is defaulting to a sliver. So, the DD functionality is still there, if you know to drag the node to that little sliver. Afterwards, the sliver expands enough to hold the single node and so on. So, how do I get it back to defaulting full size. Why had extjs 4.1.1 caused these issues? I'd have to fat finger in any code, but can if absolutely neccessary. However, if anyone is familiar with this type of issue based on my description, that would be great.
Edit: Also, I have a combobox in the right-most column of the grids. When I click to change one of the comboboxes, a mini scrollbar thing pops up that sort of blocks the dropdown button. What have they done to this version?
Here is the layout definition where I have the first problem where the scrollbar doesn't show up on the panel when it needs to:
{
xtype: 'panel',
title: 'Select fields',
defaults: {
border: false,
height: '100%'
},
layout: 'column',
items: [
{
xtype: 'treepanel',
itemID: 'choicesTreePanel',
title: 'Choose from below fields',
height: '100%',
multiSelect: true,
store: choicesTree,
rootVisible: false,
columnWidth: .44},
{
xtype: 'panel',
columnWidth: .06,
layout: {
type: 'vbox',
align: 'center'
},
defaults: {
margins: "15 0 0 0"
},
items: [
{
xtype: 'button',
text: '==>'},
{
xtype: 'button',
text: '<=='},
{
xtype: 'button',
text: 'RST'}
]},
{
xtype: 'treepanel',
itemId: 'chosenTreePanel',
title: 'Fields',
border: true,
store: chosenFields,
rootVisible: false,
columnWidth: .44,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop,
dragText:'
dragginggggg '
},
ddGroup: '
fieldsDD '
}
},
{xtype:'
panel ',
columnWidth:.06,
layout:{
type:'
vbox ',
align:'
center '
},
items: [
{
xtype: '
button ',
text: '
UP '},
{
xtype: '
button ',
text: '
DOWN '}
]
}
]
}
Edit: on the left panel, if I make height a set value, and autoscroll true, I have a scrollbar. If I set height '100%' and autoscroll true, there is no scroll bar. So a solution might be to find out how to have the panel fit the height of the parent, while maintaining the scrollbar
Although you are looking for a percentage based height solution, you can also use a constant value height. In many cases this will avoid your problem. For example, set the panels to 600 height, that should fix the scroller issue.
This does not solve your issue in percentage based layouts. Hopefully someone else can provide help with that.
(maybe it is best to split your question into multiple separate questions)
Concerning your first question about the panel height and scrollbar:
In your example I would ask myself the question "I want the treepanel to have a 100% height related to what?".
A column layout is typically used when you don't care about the height of the child elements related to their parent: the sum of the height of the child elements define the height of the column as you can see here: http://docs.sencha.com/ext-js/4-1/extjs-build/examples/layout/column.html.
You did not define any height on the columns, so it uses the height of the child elements (which have no height in your example). I don't know what Ext does in this case, but based on this, it cannot do anything smart.
If you want the treepanel to use the whole height of the containing panel, you would use a hbox layout with the align property set to stretch.
That might fix the scrollbar too since height calculation can be done properly.
Don't forget to remove the "height: 100%" and "autoscroll" properties since they mix things up.
Finally, changing the layout of the treepanel to 'fit' might give you the result you are looking for.
Your code might become something like:
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'treepanel',
layout: 'fit',
flex: 44,
...
}, {
flex: 6,
...
},{
flex: 44,
...
}]
}
I did not test this answer on your code. Please provide a full working code sample (with a dummy store) and I'll test it.