Keno spreadsheets are new and the documentation is very scarce.
I'm trying to do something relatively simple.
I have a spreadsheet with stylized headers like this:
this.sheetsHeader = [
{
name: "ProductsEntry",
rows: [
{
height: 15,
cells: [
{
value: "Name",
bold: "true",
background: "#00435e",
textAlign: "center",
color: "white",
fontSize: 14,
}, {
value: "Type",
bold: "true",
background: "#00435e",
textAlign: "center",
color: "white",
fontSize: 14,
},
{
value: "Currency",
bold: "true",
background: "#00435e",
textAlign: "center",
color: "white",
fontSize: 14,
},
{
value: "Rate",
bold: "true",
background: "#00435e",
textAlign: "center",
color: "white",
fontSize: 14
},
{
value: "StartDate",
bold: "true",
background: "#00435e",
textAlign: "center",
color: "white",
fontSize: 14,
}
]
}
],
columns: [
{ width: 200 },
{ width: 200 },
{ width: 90 },
{ width: 90 },
{ width: 110 }
]
}
];
and that gets initialized the normal way:
$("#spreadsheet").kendoSpreadsheet({
toolbar: false,
sheetsbar: false,
sheets: that.sheetsHeader
});
Then later I have an event that clears the spreadsheet but I want to leave the headers intact.
If I do this:
var sheet = spreadsheet.activeSheet();
sheet.range(kendo.spreadsheet.SHEETREF).clear();
It wipes out the headers and leaves the sheet entirely empty.
I tried re-adding the headers in many different ways but nothing worked for me.
Aftear clearing the spreadsheet I tried:
sheet.fromJSON(that.sheetsHeader[0].rows);
I also tried deleting the sheet and re-adding it:
spreadsheet.removeSheet(0);
spreadsheet.insertSheet(that.sheetsHeader);
Nothing really worked so far and there's no documentation for this sort of scenario. Any ideas?
This did it:
sheet.fromJSON(that.sheetsHeader[0]);
I really wish they provided some documentation though. It wasn't very intuitive.
Related
In data I have a am5.Picture object
icon = am5.Picture.new(root, {
height: 28,
src: src
});
The image fits on the text, is not inserted next to it
this doesn't work either
series.labels.template.set("text", "{icon} {name}") // return only name
Used Container
series.labels.values.forEach((label, index) => {
if (label.dataItem.dataContext.icon) {
let container = am5.Container.new(root, {
layout: root.horizontalLayout
})
container.children.push(label.dataItem.dataContext.icon)
container.children.push(
am5.Label.new(root, {
text: label.dataItem.dataContext.name,
fontSize: 10,
textAlign: "left",
centerY: am5.percent(50),
paddingLeft: 5,
})
)
label.children.clear()
label.children.push(container)
} else {
label.setAll({
fontSize: 10,
fontWeight: "300",
textAlign: "left",
maxWidth: 260,
oversizedBehavior: "wrap",
text: "{name}"
})
}
})
Good afternoon, I'm trying to make flatlist to display a number of objects from an API but for some reason, this flatlist seems not to work as I expected it to do, Wonder if anyone can find what's the issue here.
The flatlist was working properly before I import the API, because I made a custom set of data and it showed those without any issue but after I imported API like this flatlist has stopped working.
const [Accounts, setAccounts] = useState([]);
useEffect(() => {
const getDataList = async () => {
await axios
.get(
"API LINK" //I changed the API access link for security reasons but I can get log for response and Accounts in useState hook and it works properly!
)
.then((response) => {
//console.log(response.data, "loge response");
setAccounts(response.data);
})
.catch((error) => {
console.log(error, "loge error");
});
};
getDataList(); //we can put function out of the useEffect but you need to call one in order to run the function(getDataList) once in the code by useEffect.
}, []);
Flatlist code is below:
<FlatList
style={StyleSheet.container}
data={Accounts}
keyExtractor={(Accounts) => Accounts?.id}
renderItem={({ item }) => {
return (
<>
<View style={styles.container}>
<Text style={styles.items}>{item?.games}</Text>
<TouchableOpacity style={styles.price}>
<Text>{item?.price}</Text>
</TouchableOpacity>
</View>
</>
);
}}
></FlatList>
</>
I tried to get a log from Accounts and it shows all of the information that it gets from API but for some reason, without any errors, flatlist doesn't display any items.
This is a sample of the API data:
{
"id": 115,
"sellerId": 2,
"price": 105000,
"region": "2",
"isAvailable": true,
"plus": null,
"games": "Demon's Souls Digital Deluxe Edition PS5",
"view": 17,
"createdAt": "2021-02-26T11:17:10.000Z",
"sellers": {
"username": "ben"
}
},
{
"id": 116,
"sellerId": 3,
"price": 150000,
"region": "1",
"isAvailable": true,
"plus": true,
"games": "PES 2021,Assassin's Creed Valhalla ,WWE 2K20",
"view": 6,
"createdAt": "2021-02-26T11:17:11.000Z",
"sellers": {
"username": "moeindana"
}
In addition, these are the styling that currently I'm using:
const styles = StyleSheet.create({
container: {
borderRadius: 10,
borderWidth: 0.5,
borderColor: "black",
alignItems: "center",
maxWidth: "80%",
paddingTop: 20,
width: "90%",
backgroundColor: "gray",
marginLeft: 30,
marginTop: 26,
minHeight: 400,
paddingBottom: 100,
},
items: {
alignItems: "center",
maxWidth: "80%",
justifyContent: "center",
},
title: {
fontSize: 32,
},
price: {
fontSize: 15,
padding: 17,
paddingBottom: 20,
fontWeight: "bold",
borderRadius: 10,
borderColor: "black",
borderWidth: 0.5,
marginTop: 20,
top: 300,
position: "absolute",
},
}
I tried to change the header style of the Datagrid component based on material-ui style guide. Datagrid body content is updated based on custom style but the header is not reflected the custom style changes.
the code snippet is below:
export const TableStyleProp = {
style: {
color: "#ff0000"
},
selectable: true,
headerStyle: {
color: "#ff0000"
},
bodyStyle: {}
};
const muiTheme = getMuiTheme({
table: {
backgroundColor: "#FF0000 !important"
},
thead: {
backgroundColor: "#b7cbfb"
},
tableHeader: {
borderColor: "#FF0000",
backgroundColor: "#FF0000"
},
tableHeaderColumn: {
textColor: "#FF0000",
height: 56,
spacing: 24
},
tableRow: {
hoverColor: "#FF0000",
stripeColor: "#FF0000",
selectedColor: "#FF0000",
textColor: "#FF00FF",
borderColor: "#FF0000",
height: 48
},
tableRowColumn: {
height: 48,
spacing: 24
}
});
<MuiThemeProvider muiTheme={muiTheme}>
This is described in the documentation: https://marmelab.com/admin-on-rest/List.html#custom-grid-style
I need some help to set the width of the bars in kendo bar charts when the number of bars reduces.
Here is the jsFiddle link i am working on: http://jsfiddle.net/An59E/44/
In this example, there are 2 kendo bar charts, 1 has 6 bars and the other has 12 bars.
In the second graph the bars width is fine. Now when i remove 2 bars i need the same width of bars, instead the default behavior of the kendo is to resize bars. by setting the spacing and the gap values, the bars should resize. In this example, i have set the spacing and gaps value in series defaults attribute but it doesn't look like its working. Now the question is , how to change the width of the bars?
HMTL code:
<div id="chart1">
</div>
<div id="chart2">
</div>
JS code:
var series1= [70, 60, 40];
var series2= [-50, 40, 20];
var series3= [60, 60, -90, 60, 10, 50];
var series4= [60, 20, 20, 50, 40, 10];
$("#chart1").kendoChart({
seriesDefaults:
{
type: "column",
stack: true,
width:2,
gap: 50,
},
series:
[
{
data: series1,
color: "#00CC00",
negativeColor: "#CC0000",
spacing: 0
},
{
data: series2,
color: "#CCCCCC"
}
],
plotArea:
{
border:
{
color: "#CCCCCC",
width: 1
}
},
chartArea:
{
border:
{
color: "#CCCCCC",
width: 1
},
height: 300
},
categoryAxis:
{
pane: "top-pane",
color: "#0099FF",
majorGridLines:
{
visible: true,
},
line:
{
width: 3,
},
plotBands:
[
{from: 0, to:1, color: "#CCCCCC"},
],
},
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
},
valueAxis:
{
title:
{
text: "A"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
},
tooltip: {
visible: true,
/*format: "{0}"*/
template: "Institutional Results:#=value#<br/>Institutional Target:#=value#<br/>"
}
});
$("#chart2").kendoChart({
series:
[
{
data: series3,
color: "#00CC00",
negativeColor: "#CC0000",
spacing: 0
},
{
data: series4,
color: "#CCCCCC"
}
],
plotArea:
{
border:
{
color: "#CCCCCC",
width: 1
}
},
chartArea:
{
border:
{
color: "#CCCCCC",
width: 1
},
height: 300,
},
categoryAxis:
{
pane: "top-pane",
color: "#0099FF",
majorGridLines:
{
visible: true,
},
line:
{
width: 3,
},
plotBands:
[
{from: 0, to:1, color: "#333333"},
],
/*categories: [2005, 2006, 2007, 2008, 2009, 2010],
labels:
{
margin:
{
top: 100,
}
},*/
},
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
},
valueAxis:
{
title:
{
text: "O"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
},
tooltip: {
visible: true,
/*format: "{0}"*/
template: "Institutional Results:#=value#<br/>Institutional Target:#=value#<br/>"
}
});
Thanks.
just replace below code snippet in javascript and you are done!
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
gap: 5,
},
In above code I have added gap value to define gap of bars which leads to make them thin which you want.
Please refer to below js fiddle.
http://jsfiddle.net/An59E/134/
Please let me know if you face any difficulty to implement the same.
I have a bar chart with 2 panes. I want to add plot bands in both the panes but with different color. How can this be done?
And i want to display the categories labels at the bottom of the graph. how can this be done?
Here is the jsfiddle example: http://jsfiddle.net/An59E/27/
HTML code:
<div id="chart"></div>
JS code:
var series1= [70, 60, 40, 90, -10, 50];
var series2= [-50, 40, 20, -80, 70, 80];
var series3= [70, 60, -40, 90, 10, 50];
var series4= [-50, 40, 20, -80, 70, 80];
$("#chart").kendoChart({
series:
[
{
data: series1,
color: "#00CC00",
negativeColor: "#CC0000"
},
{
data: series2,
color: "#CCCCCC"
},
{
data: series3,
axis: "bottom" ,
color: "#00CC00",
negativeColor: "#CC0000"
},
{
data: series4,
axis: "bottom" ,
color: "#CCCCCC"
}
],
categoryAxis:
[
{
pane: "top-pane",
color: "#0099FF",
majorGridLines:
{
visible: true,
},
line: {
width: 3,
},
plotBands:
[
{from: 0, to:1, color: "#CCCCCC"},
]
},
{
pane: "bottom-pane",
color: "#0099FF",
majorGridLines:
{
visible: true
},
line: {
width: 3,
},
labels:
{
margin:
{
top: 80,
bottom: 0
}
},
categories: [2005, 2006, 2007, 2008, 2009],
}
],
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
},
valueAxis: [
{
pane: "top-pane",
title:
{
text: "Availability"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
},
{
pane: "bottom-pane",
name: "bottom",
title:
{
text: "Occupancy"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
}
],
panes:
[
{
name: "top-pane",
border: {
color: "#C0C0C0",
width: 1
},
},
{
name: "bottom-pane",
border: {
color: "#C0C0C0",
width: 1
}
}
],
tooltip: {
visible: true,
format: "{0}"
}
});
Thanks.
To add plot bands in both the panes:
plotBands: [
{
from: 95,
to: 100,
color: "#2082c8"
//color: "url(#pattern2)",
},
{
from: 125,
to: 130,
color: "#c82020"
}