first paremeter is the filename and second is docDefinition(which value i will pass in second parameter) still confuse?
please help me out
The second parameter is an object that have all the options of "pdfmake".
The most fundamental concept to be mastered is the
document-definition-object which can be as simple as:
var docDefinition = { content: 'This is an sample PDF printed withpdfMake' };
or become pretty complex (having multi-level tables,
images, lists, paragraphs, margins, styles etc...).
You can check the documentation on Github https://github.com/bpampuch/pdfmake and do it more complex.
But if you use the function pdfExport, this one create the object with the data grid and it is more easy, Try this:
$scope.gridApi.exporter.pdfExport( uiGridExporterConstants.ALL, uiGridExporterConstants.ALL );
And they have more options that you can change in gridOptions:
exporterPdfDefaultStyle:{ fontSize: 11 },
exporterPdfFilename: 'filename.pdf',
exporterPdfTableHeaderStyle: { bold: true, fontSize: 12, color: 'black' },
exporterPdfTableStyle : { margin: [0, 5, 0, 15] },
exporterPdfHeader : null,
exporterPdfFooter : null,
gridOptions.exporterPdfOrientation : 'landscape',
etc...
Related
This may sound a bit stupid, but I am trying to use ModifyMode under the mode property of EditableGeoJsonLayer, but the adjustable handles do not appear, as it is supposed to in the "Geojson Editor" example posted on nebula.gl website. It would have been convenient if there were more examples regarding the editableGeojsonLayer API reference. This what I am trying to do:
new (EditableGeoJsonLayer as any)({
id: 'geojson',
data: featureState.data,
mode: ModifyMode,
selectedFeatureIndexes,
onEdit: ({updatedData}):any => {
setFeatureState({
data: updatedData
});
},
pickable: true,
pickingRadius: 15,
//onClick: data => InfoWindow(data.object.properties, data.coordinate, "New Shape", "PointView"),
}
Also after further tests, none of alter modes are working, but all draw modes and view modes are working fine
You should make sure the feature is selected ,as a matter of fact, make it can be seleted at first.
Make sure to have a selectionLayer when using ModifyMode. You must select the polygon before you can modify it. When the polygon/line is selected you should see the corner, and new point addition, blocks to drag-and-drop.
selectedFeatureIndexes should be an array of selected polygons ids. You can set this array in your selectionLayer onSelect by taking advantage of the pickingInfos parameter.
Here is a sample selectionLayer
const selectionLayer = new SelectionLayer({
id: "selection",
selectionType: "rectangle",
onSelect: ({ pickingInfos }) => {
// use pickingInfos to set the SelectedFeatureIndexes
setSelectedFeatureIndexes(pickingInfos.map((pi) => pi.index));
// any other functionality for selecting, like adding id's to state
},
layerIds: ["geojson"],
getTentativeFillColor: () => [255, 0, 255, 100],
getTentativeLineColor: () => [0, 0, 255, 255],
lineWidthMinPixels: 3,
});
what im trying to achieve is to be able to use the setState method to set an object as the state. However im facing some difficulty in doing so.
This is the final endproduct (state) which i was to achieve
state_class_mapping: {
{1} ,
rect: {
fill: "deepskyblue"
},
label: {
stroke: "white"
}
This values are obtained from different areas , the rect and label is preset in my state upon initializing:
constructor(props) {
super(props)
this.state = {
selected_state: null,
state_class_mapping: {},
selected_state_class: { #<---- here
rect: {
fill: "deepskyblue"
},
label: {
stroke: "white"
}
},
default_state_class: { #<---- or here depending
rect: {
fill: "#dddd"
},
label: {
stroke: "black"
}
}
}
The integer value is actually the ID of the object that i have clicked . Upon clicking onto this object , i would run some functions to set the "selected_state" .
My issue is that i have issues creating the state_class_mapping state as its more complex than just setting a static key and value.
What i would envision the way to set would be :
this.setState({state_class_mapping:{
{this.state.selected_state},
{this.state.default_state_class}
})
}
}
But ofcourse my editor shows that it is illegal to do it this way. May i know what is the proper way of doing this?
I just looked at your code and I think you missed some snippets.
First you need to declare correct object according to exact type you declared in state definition.
So in my opinion you need to try like this.
this.setState({state_class_mapping: {
idValue,
...this.state.selected_state,
...this.state.default_state_class
}});
You didn't declare state_class_mapping type as { {}, [{}]} so your code isn't working.
You declared as this type {{}, {}}
Hope this helps you to understand.
I am using rGraph to draw the chart. it is working fine for the first time. when trying to generate the graph with different input data for the second time, without refreshing the page. The graph is generating fine, but the x-axis title is disappearing. can anyone help me with this?
FYI: I am making that div empty, before generating the graph.
Attaching image:
1:
In the first image, you can see the Date.
Here you don't see the Date. when I change the input data and tried to generate the chart.
if(document.getElementById(chartID)){
RG.ObjectRegistry.Remove(document.getElementById(chartID));
}
var barGraph = new RGraph.Bar({
id: chartID,
data: chartData,
options: {
variant: '3d',
variantThreedAngle: 0.05,
colorsStroke: 'rgba(0,0,0,0)',
colors: chartColorArr,
marginTop: 35,
marginLeft: 45,
marginRight: 15,
marginBottom: 85,
xaxisLabels: x_axis_label_Arr,
shadowColor:'#ccc',
shadowOffsetx: 3,
backgroundGridColor: '#eee',
xaxisScaleZerostart: true,
axesColor: '#f2f2f2',
//yaxisScaleUnitsPost: 'H',
//title: 'User Sessions',
//key: [legendsTitle],
keyShadow: true,
keyShadowColor: '#ccc',
keyShadowOffsety: 0,
keyShadowOffsetx: 3,
keyShadowBlur: 15,
variantThreedXaxis : true,
variantThreedYaxis : true,
bevelled : false,
axes : true,
tooltips: chartTooltipArr,
tooltipsEvent : 'onmousemove',
xaxisTitle : **'Date',**
yaxisTitle : yAxisTitle,
xaxisTitleSize : legendFontSize,
yaxisTitleSize : legendFontSize,
xaxisLabelsSize : legendFontSize,
yaxisLabelsSize : legendFontSize,
yaxisTitlePos : 0.1,
colorsSequential : true,
}
});
barGraph.draw();
Thanks
By the looks of the 3D style and some other cues, you're using quite an old version. Here's two modern-style 3D charts:
https://www.rgraph.net/demos/bar-3d-effect-multi-row.html
https://www.rgraph.net/demos/bar-ajax.html
There's more examples in the download archive which are worth looking at.
As for the problem with your chart, I think the easiest solution would be to set the textAccessible option to false:
textAccessible: false,
I have the this jsfiddle, it has the ability to draw a polygon on a map which works perfectly. What I can't figure out is how to style the .Draw interaction.
Currently I have a dashed line for the sections of the polygon that the users has already draw and another dashed line connecting the first drawn point to the last drawn point.
When I write styles it seems to effect both lines.
What I need to have is a dashed black line joining points the user has already drawn, and no line (fully transparent) for the line connecting the last drawn point back to the first drawn point.
This is my current style object:
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0, 0, 0.5)',
lineDash: [10, 10],
width: 3
}),
image: new ol.style.Circle({
fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] }),
stroke: new ol.style.Stroke({
color: [0, 0, 0, 0.5],
width: 1
}),
radius: 4
})
})
I have tried adding arrays of colours and styles but can't seem to get it working.
Has anyone come across this and found a fix?
Ok I have cracked this one, I had to take a dive into the library's source to figure it out, so I'm gonna post the answer here in the hope it helps somebody else in the future, so here goes:
What I could see looking as the source code was that when you are using ol.interaction.Draw to draw a polygon there are multiple pieces of geometry being used. There is the underlying Polygon, this is the bit that has a stroke and fill and shows the connecting line (based on it's stroke style). There is a LineString which shows a line for the points the user has drawn only (no fill and no connecting line). And there is a point, which is attached to the mouse pointer. I have left a `console.log()' in the jsfiddle to show all this.
I have created this working jsfiddle. What I have done is, rather than set the styles directly inside ol.interaction.Draw I have used a styleFunction (see code below). I detect each geometry by type and set a specific style for it.
const styleFunction = feature => {
var geometry = feature.getGeometry();
console.log('geometry', geometry.getType());
if (geometry.getType() === 'LineString') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 1)',
width: 3
})
})
];
return styles;
}
if (geometry.getType() === 'Polygon') {
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 102, 0, 0)',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 102, 0, 0.3)'
})
})
];
return styles;
}
return false;
};
Hope this helps 🤓
Been trying to get into react and was looking at react-grid-layout when I came across a bit of a roadblock. I've pasted in the example from here essentially as is, but for some reason, when I drag an element it's not sticking. The error I'm getting in the console is:
Uncaught TypeError: this.props.onLayoutChange is not a function
I'm sure it's a simple thing that I'm missing, but this is my first React project and I would appreciate some guidance.
My code is included below:
'use strict';
var React = require('react');
var _ = require('lodash');
var ResponsiveReactGridLayout = require('react-grid-layout').Responsive;
/**
* This layout demonstrates how to use a grid with a dynamic number of elements.
*/
var AddRemoveLayout = React.createClass({
getDefaultProps() {
return {
className: "layout",
cols: {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},
rowHeight: 100
};
},
getInitialState() {
return {
items: [0, 1, 2, 3, 4].map(function(i, key, list) {
return {i: i, x: i * 2, y: 0, w: 2, h: 2, add: i === list.length - 1};
}),
newCounter: 0
};
},
createElement(el) {
var removeStyle = {
position: 'absolute',
right: '2px',
top: 0,
cursor: 'pointer'
};
var i = el.add ? '+' : el.i;
return (
<div key={i} _grid={el}>
{el.add ?
<span className="add text" onClick={this.onAddItem} title="You can add an item by clicking here, too.">Add +</span>
: <span className="text">{i}</span>}
<span className="remove" style={removeStyle} onClick={this.onRemoveItem.bind(this, i)}>x</span>
</div>
);
},
onAddItem() {
console.log('adding', 'n' + this.state.newCounter);
this.setState({
// Add a new item. It must have a unique key!
items: this.state.items.concat({
i: 'n' + this.state.newCounter,
x: this.state.items.length * 2 % (this.state.cols || 12),
y: Infinity, // puts it at the bottom
w: 2,
h: 2
}),
// Increment the counter to ensure key is always unique.
newCounter: this.state.newCounter + 1
});
},
// We're using the cols coming back from this to calculate where to add new items.
onBreakpointChange(breakpoint, cols) {
this.setState({
breakpoint: breakpoint,
cols: cols
});
},
onLayoutChange(layout) {
this.props.onLayoutChange(layout);
this.setState({layout: layout});
},
onRemoveItem(i) {
console.log('removing', i);
this.setState({items: _.reject(this.state.items, {i: i})});
},
render() {
return (
<div>
<button onClick={this.onAddItem}>Add Item</button>
<ResponsiveReactGridLayout onLayoutChange={this.onLayoutChange} onBreakpointChange={this.onBreakpointChange}
{...this.props}>
{_.map(this.state.items, this.createElement)}
</ResponsiveReactGridLayout>
</div>
);
}
});
module.exports = AddRemoveLayout;
React.render(<AddRemoveLayout/>, document.getElementById('app'))
The error you are receiving is an error about a missing prop. In a react component you basically have 2 places to keep your data, in its parent and in your component itself. Your parent often has props while declaring it because those are properties you pass to the child (like an attribute in an HTML tag). Then we have the state which is data inside a component itself.
The error you are receiving is saying that we didn't get a required prop from our parent (You can also see that inside the onLayoutChange(layout) function a call is being made to the this.props.onLayoutChange(layout) method).
So basically we are missing a few props. In the example from GitHub there is a root file called test-hook.jsx (https://github.com/STRML/react-grid-layout/blob/master/test/test-hook.jsx). This root node has as a child ( the code you are trying to render directly ) in which it is passing the required function as a property.
You can either use the test-hook.jsx or you can write your own root node which has a state with the layout and the required function which updates that state (see the github example on how to do that).
So after some searching, I figured out that the example was specifying the onLayoutChange function as a placeholder. If I wanted a custom funcion, I needed to define that.
Simply removing this function altogether and using the default fixed the issue.
Remove this:
onLayoutChange(layout) {
this.props.onLayoutChange(layout);
this.setState({layout: layout});
},
#Dirk-Jan explained it well. But the proper solution IMHO is to remove the prop call:
onLayoutChange(layout) {
// this.props.onLayoutChange(layout);
this.setState({layout: layout});
},
So the meaningful part is still there. In the examples the test-hook.jsx parent has to get hold of the layout so it can display it outside of the layout container for demonstration purposes. In a real-world application we don't need that.