Need Help,I'm using PptxGen to create PowerPoint reports of HTML. I'm using function addSlidesForTable to pass HTML table id, also I have requirement to each slide provide title with one straight line and after that Html table but Table position has not affecting any changes in ppt slides.
pptx=new PptxGenJS();
pptx.setLayout('LAYOUT_WIDE');
pptx.defineSlideMaster({
title: 'MASTER_SLIDE',
bkgd: 'FFFFFF',
objects: [
{ 'line': { x: 0.5, y:0.0, w:12.00, line:'0088CC', lineSize:0.2,flipH:true,rotate:4.7 } },
{ 'line': { x: 0.5, y:6.0, w:12.00, line:'0088CC', lineSize:0.2,flipH:true,rotate:4.7 } },
{ 'text': { text:'Tabular Report', options:{ x:0.4, y:0.15, w:5.5, h:0.06, fontFace:'Arial',fontSize:20,color:'0088CC' } } }
],
slideNumber: { x:0.5, y:'95%', fontFace:'Arial',fontSize:8 }
});
var slide = pptx.addNewSlide('MASTER_SLIDE');
pptx.addSlidesForTable("tabAutoPaging1",{addHeaderToEach:true,master:'MASTER_SLIDE',options:{x:0.5, y:3.5} })
pptx.save('Sample Presentation');
Provide x and y positions without the options parameter.
Your addSlidesForTable method call should be like
pptx.addSlidesForTable("tabAutoPaging1",{addHeaderToEach:true,master:'MASTER_SLIDE', x:0.5, y:3.5} })
pptx.setLayout('LAYOUT_WIDE');
pptx.defineSlideMaster({
title: 'MASTER_SLIDE',
bkgd: 'FFFFFF',
margin:[0.5,0.5,0.5,0.5],
objects: [
{ 'line': { x: 0.5, y:0.0, w:12.00, line:'0088CC', lineSize:0.2,flipH:true,rotate:4.7 } },
{ 'line': { x: 0.5, y:6.0, w:12.00, line:'0088CC', lineSize:0.2,flipH:true,rotate:4.7 } },
{ 'text': { text:'Tabular Report', options:{ x:0.4, y:0.15, w:5.5, h:0.06, fontFace:'Arial',fontSize:20,color:'0088CC' } } }
],
slideNumber: { x:0.5, y:'95%', fontFace:'Arial',fontSize:8 }
});
var slide = pptx.addNewSlide('MASTER_SLIDE');
pptx.addSlidesForTable("tabAutoPaging1",{addHeaderToEach:true,master:'MASTER_SLIDE',options:{x:0.5, y:3.5} })
pptx.save('Sample Presentation');
Related
I'm tying to change the table cell color when printing a table.. The print cusomize fucntion is called and working correctly but the color doesn't change..
When I render the initial table I call rollCallback to set the cell color
rowCallback: function(row, data, index){
if(data.scores <= 1){
$(row).find('td:eq(2)').css('background-color', 'red');
}
if(data.scores > 1 && data.scores <=2 ){
$(row).find('td:eq(2)').css('background-color', 'yellow');
}
if(data.scores > 2){
$(row).find('td:eq(2)').css('background-color', 'green');
}
}
The in the print buttom. I use the same code to render the background color again
{
extend : 'print',
text : '<i class="fa fa-print fa-lg"></i>',
titleAttr : 'Print',
exportOptions : {
columns : [0,1,2,4]
},
customize: function(win,conf,table) {
table.rows().every(function(index,element) {
if(this.data().scores <= 1)
{
$(this).find('td:eq(2)').css('background-color', 'red');
}
if(this.data().scores > 1 && this.data().scores <=2 )
{
$(this).find('td:eq(2)').css('background-color', 'yellow');
}
if(this.data().scores > 2)
{
$(this).find('td:eq(2)').css('background-color', 'green');
}
});
}
}
The color does not change..
Im using
jquery-3.5.1
Datatables-1.10.21
buttons-1.6.3
Using #andrewjames answer I get a little better result.. The preview now has color.. but when ctrl-print is used from the browser I loose the style again.
Here is the approach mentioned in my other answer, but adapted for your specific circumstances.
In my test data I only have 3 columns, so I made one small change from your code - I changed this columns : [0,1,2,4] to this columns : [ 0, 1, 2 ].
Here is my starting table:
Here are some extra styles I added:
<style>
td.bg_red {
background-color: red;
}
td.bg_yellow {
background-color: yellow;
}
td.bg_green {
background-color: green;
}
</style>
I used the following embedded test data (instead of an ajax data source):
var dataSet = [
{ "name" : "Tiger Nixon",
"office": "London",
"scores" : 1 },
{ "name" : "Donna Snider",
"office": "New York",
"scores" : 2 },
{ "name" : "Airi Satou",
"office": "Tokyo",
"scores" : 3 }
];
Here is the DataTables definition:
<script type="text/javascript">
var dataSet = [
{ "name" : "Tiger Nixon",
"office": "London",
"scores" : 1 },
{ "name" : "Donna Snider",
"office": "New York",
"scores" : 2 },
{ "name" : "Airi Satou",
"office": "Tokyo",
"scores" : 3 }
];
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
data: dataSet,
columns: [
{ title: "Name", data: "name" },
{ title: "Office", data: "office" },
{ title: "Score", data: "scores" }
],
rowCallback: function(row, data, index){
if(data.scores <= 1){
$(row).find('td:eq(2)').addClass("bg_red");
}
if(data.scores > 1 && data.scores <=2 ){
$(row).find('td:eq(2)').addClass("bg_yellow");
}
if(data.scores > 2){
$(row).find('td:eq(2)').addClass("bg_green");
}
},
buttons: [
{
extend: 'print',
//autoPrint: false, // useful for testing
exportOptions: {
//columns : [0,1,2,4],
columns : [ 0, 1, 2 ],
format: {
body: function ( inner, rowidx, colidx, node ) {
if (node.classList.contains('bg_red')) {
return '<span class="bg_red">' + inner + '</span>';
} else if (node.classList.contains('bg_yellow')) {
return '<span class="bg_yellow">' + inner + '</span>';
} else if (node.classList.contains('bg_green')) {
return '<span class="bg_green">' + inner + '</span>';
} else {
return inner;
}
}
}
},
customize: function ( win, butt, tbl ) {
$(win.document.body).find('span.bg_red').parent().css('background-color', 'red');
$(win.document.body).find('span.bg_yellow').parent().css('background-color', 'yellow');
$(win.document.body).find('span.bg_green').parent().css('background-color', 'green');
}
} ]
});
});
</script>
And here is the print-preview:
This uses the same technique as described in the other answer I mentioned in my comments, but adapted for your specific scenario. The reason it works is the same as described in that answer.
Update
You may need to adjust printer settings to see the colors on an actual print-out. For example, using Google Chrome:
So I'm setting a default query in my React Native app. Essentially I'm trying to set a sortOrder based on the elementOrder values. My partner used this same piece of code in his web app and it works for him. It doesn't seem to work on my end. The score exists if I remove the custom sort, which is normal due to what I've read in the docs. When I'm using a custom sort, then I should add track_scores: true. My score is still coming up as null.
I am not sure how to debug this situation. Can someone point me in the right direction? Thanks! Here's my code and let me know if you need to see anything. Unfortunately I don't have access to Kibana. I'm just console logging the list item and it's properties.
const defaultQueryConfig = {
track_scores: true,
sort: {
_script: {
type: 'number',
script: {
lang: 'painless',
source: `
int sortOrder = 0;
if (doc['elementOrder'].value == 1) {sortOrder = 3}
else if (doc['elementOrder'].value == 3) {sortOrder = 2}
else if (doc['elementOrder'].value == 2) {sortOrder = 1}
sortOrder;
`,
},
order: 'desc',
},
},
query: {
function_score: {
query: {
match_all: {},
},
functions: [
{
filter: {
match: {
categoryType: 'earth',
},
},
weight: 100,
},
{
filter: {
match: {
categoryType: 'water',
},
},
weight: 90,
},
{
filter: {
match: {
categoryType: 'fire',
},
},
weight: 80,
},
{
filter: {
match: {
thingExists: false,
},
},
weight: 2,
},
],
score_mode: 'multiply',
},
},
};
I want to create a chart of how many tasks are in a given Schedule State during the length of the sprint. Is it possible to call WsapiDataStore on each day?
What you are looking for is a lookback Snapshot Store , using the Lookback API - this allows you to specify a date or a point in time that you want to query by.
A typical use looks like this:
Ext.create('Rally.data.lookback.SnapshotStore', {
pageSize : 10000,
fetch : ['fetch'],
filters : [{
property : '__At',
value : 'current'
},{
property : '_ItemHierarchy',
value : 'HierarchicalRequirement'
}]
}).load({
callback : function(records) {
Ext.Array.each(records, function(record) {
// do something with each record
});
}
});
WsapiDataStore is not intended for historic data. You need to use Rally.data.lookback.SnapshotStore which retrieves data from the Lookback API.
Lookback API allows to see what any work item or collection of work items looked like in the past. This is different from using WS API directly (or via WsapiDataStore) which can provide you with the current state of objects, but does not have historical data.
LBAPI documentation is available here
As far as Rally release object's attributes see WS API object model here. But it is not clear from your comment what you mean by data for the entire release. If you are interested in getting back user stories assigned to a specific release then your query object should be hierarchical requirement and not release, and you may filter by release.
Here is an app that builds a chart using a Release dropdown. Based on the selection in the dropdown the chart is refreshed (it is destroyed and added):
Ext.define('CustomApp', {
extend: 'Rally.app.TimeboxScopedApp',
componentCls: 'app',
scopeType: 'release',
comboboxConfig: {
fieldLabel: 'Select a Release:',
labelWidth: 100,
width: 300
},
addContent: function() {
this._makeStore();
},
onScopeChange: function() {
this._makeStore();
},
_makeStore: function() {
Ext.create('Rally.data.WsapiDataStore', {
model: 'UserStory',
autoLoad: true,
filters: [this.getContext().getTimeboxScope().getQueryFilter()],
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_onDataLoaded: function(store, data) {
var records = [];
var scheduleStateGroups = ["Defined","In-Progress","Completed","Accepted"]
// State count variables
var definedCount = 0;
var inProgressCount = 0;
var completedCount = 0;
var acceptedCount = 0;
// Loop through returned data and group/count by ScheduleState
Ext.Array.each(data, function(record) {
//Perform custom actions with the data here
//Calculations, etc.
scheduleState = record.get('ScheduleState');
switch(scheduleState)
{
case "Defined":
definedCount++;
break;
case "In-Progress":
inProgressCount++;
break;
case "Completed":
completedCount++;
break;
case "Accepted":
acceptedCount++;
}
});
if (this.down('#myChart')) {
this.remove('myChart');
}
this.add(
{
xtype: 'rallychart',
height: 400,
itemId: 'myChart',
chartConfig: {
chart: {
},
title: {
text: 'User Story Schedule State Counts',
align: 'center'
},
xField : 'ScheduleState',
xAxis: [
{
//categories: scheduleStateGroups,
title: {
text: 'ScheduleState'
}
}
],
yAxis: {
title: {
text: 'Count'
}
},
plotOptions : {
column: {
color: '#F00'
},
series : {
animation : {
duration : 2000,
easing : 'swing'
}
}
}
},
chartData: {
categories: scheduleStateGroups,
series: [
{
type: 'column',
data: [definedCount, inProgressCount, completedCount, acceptedCount]
}
]
}
}
);
this.down('#myChart')._unmask();
}
});
in Sencha Touch 2.1 how can I load the chart dynamically from json, also with dynamic fields store, chart axes, and chart series,
I know maybe this is too much, but I need to display many kind of data, If I create 1 chart component for each display means I have to create more than 15 chart component, I'm afraid it get bloated
I did not complete this dynamically, but I made it seem dynamic.
I first request a user to fill out a form.
I also have multiple panels that holds charts with empty stores, in the form of several different layouts.
Based on the user's form, I show and hide panels, or chart when they need to be displayed only after loading the store with the required data.
yes it is bulky, and they are static, but I found it slightly easier to handle than dynamically loading.
EDIT
After thinking,
have you tried a function like
function dynamiccharts(var1, var2, var3){
return Ext.chart.Chart({
....
})
}
variables would include things like data, url, store or etc.
This is my example creating a chart on controller inside a panel: axis, series, store fields, url are became parameters, PAR_FORM is global variable showing the difference between views, I'm using this code for another chart (Column, Pie)
Ext.define("Geis.controller.app", {
extend: "Ext.app.Controller",
config: {
refs: {
mainview: 'mainview',
barchartview: 'barchartview',
btnShowChartAnggaran: '#btnShowChartAnggaran'
},
control: {
'btnShowChartAnggaran': {
tap: 'onShowChartAnggaran'
}
}
}
createBarChart: function(fields, series_xfield, series_yfield, url) {
this.getBarchartview().add(new Ext.chart.CartesianChart({
id: 'barchartgenerateview',
store: {
fields: fields,
proxy: {
type: 'jsonp',
url: url
}
},
background: 'white',
flipXY: true,
colors: Geis.view.ColorPatterns.getBaseColors(),
interactions: [
{
type: 'panzoom',
axes: {
"left": {
allowPan: true,
allowZoom: true
},
"bottom": {
allowPan: true,
allowZoom: true
}
}
},
'itemhighlight'
],
series: [{
type: 'bar',
xField: series_xfield,
yField: series_yfield,
highlightCfg: {
strokeStyle: 'red',
lineWidth: 3
},
style: {
stroke: 'rgb(40,40,40)',
maxBarWidth: 30
}
}],
axes: [{
type: 'numeric',
position: 'bottom',
fields: series_yfield,
grid: {
odd: {
fill: '#e8e8e8'
}
},
label: {
rotate: {
degrees: -30
}
},
maxZoom: 1
},
{
type: 'category',
position: 'left',
fields: series_xfield,
maxZoom: 4
}]
}));
Ext.getCmp('barchartgenerateview').getStore().load();
},
onShowChartAnggaran: function() {
this.getBarchartview().remove(Ext.getCmp('barchartgenerateview'), true);
if (PAR_FORM == 'Dana Anggaran') {
this.createBarChart(['kode', 'keterangan', 'nilai'], 'keterangan', 'nilai',
Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_dana_anggaran_json/');
} else if (PAR_FORM == 'Alokasi Anggaran') {
this.createBarChart(['kode', 'keterangan', 'belanja_pegawai', 'belanja_barang', 'belanja_modal'],
'keterangan', ['belanja_pegawai', 'belanja_barang', 'belanja_modal'],
Geis.util.Config.getBaseUrl() + 'anggaran/laporan/json/get_alokasi_json/');
}
this.getMainview().animateActiveItem(1, {type:'slide', direction:'left'});
}
});
base on my experiment if you want to activate the interactions features you need to set the chart id dynamically too, for example by creating Global Counter Variable
I'm wonder is it possible to proper setting each xaxis in dojox.charting.DataChart
here is my data.JSON for example:
{
"label": "btmlabel",
"items": [
{ "mydata":"ANDT", "btmlabel":[{value: 1, text: "22 April 10.34AM"},{value: 2, text: "22 April 10.40AM"}], "data":[{"x":1,"y":1},{"x":2,"y":3}] }
]
}
and trying to draw xaxis which failed(show empty in xaxis) with below code:
var chartPrefs = {
chartPlot: {type:dojox.charting.plot2d.Markers, tension:"S"},
scroll:true,
xaxis:{labelFunc:"seriesLabels"},
}
chart = new dojox.charting.DataChart("chartNode", chartPrefs);
chart.setStore(store, {mydata:"*"}, "data");
});
It looks like your json object structure is invalid for charting. It would be better use the following structure:
var storeData = {
"label": "btmlabel",
"items":
[
{
"btmlabel": "22 April 10.34AM",
"data": 1
},
{
"btmlabel": "22 April 10.40AM",
"data": 3
}
]
}
and creating chart:
dojo.addOnLoad(function () {
var storeForChart = new dojo.data.ItemFileWriteStore({ data: storeData });
var chartPrefs = {
chartPlot: { type: dojox.charting.plot2d.Markers, tension: "S" },
comparative: true,
xaxis: { labelFunc: "seriesLabels" }
}
chart = new dojox.charting.DataChart("chartNode", chartPrefs);
chart.setStore(storeForChart, { data: "*" }, "data");
});
View source of this page - here working example.
Read good article about chart building - introducing-dojox-datachart
EDIT:
Also look this page. I think it will be very helpful for you.