I have a table that I created in PDFMAKE with react that I would like to create spacing between that table and the text below. The text that comes after the table is placed in it and I can't make them not stick together. can anybody help me? here is the code:
const date = serviceItems.map((serviceItems) => {
{
return [
{ text: serviceItems.publicId, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.serviceCategoryTypeName, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.serviceCategoryTypeItemName, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.serviceCategoryTypeItemUnitQuantity, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.serviceCategoryTypeItemUnitMeasurement, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.status, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.unitValue, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: serviceItems.quantity, fontSize: 9, margin: [0, 2, 0, 2] },
{ text: service.total, fontSize: 9, margin: [0, 2, 0, 2] }
]
}
})
const details = [{
table: {
headerRows: 1,
widths: ['auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto'],
body: [
[
{ text: 'A', style: 'tableExample', fontSize: 9 },
{ text: 'B', style: 'tableExample', fontSize: 9 },
{ text: 'C', style: 'tableExample', fontSize: 9 },
{ text: 'D', style: 'tableExample', fontSize: 9 },
{ text: 'E', style: 'tableExample', fontSize: 9 },
{ text: 'F', style: 'tableExample', fontSize: 9 },
{ text: 'G', style: 'tableExample', fontSize: 9 },
{ text: 'H', style: 'tableExample', fontSize: 9 },
{ text: 'I', style: 'tableExample', fontSize: 9 },
],
...date
]
},
layout: 'lightHorizontalLines\n\n\n\n\n',
}];
Related
I have try to show inactive setting in my chart. But it's not showing in my project { it's worked on another live editor }
Chart Library: Highcharts
Chart type: scatter
Chart Version:
"highcharts": "^6.1.1",
"highcharts-more": "^0.1.7","highcharts-react-official": "^3.1.0",
``const config = {
chart: {
zoomType: 'x',
type: 'scatter',
height: 400,
spacingLeft: 0,
spacingRight: 0,
spacingTop: 0,
spacingBottom: 0,
margin: [30, 50, 80, 180],
width: null,
style: {
fontFamily: 'Fira Sans'
},
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
type: 'datetime',
ordinal: false,
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
Date: false,
tickInterval: 3600 * 4000,
minTickInterval: 3600 * 100,
minRange: 1000 * 60 * 60,
dateTimeLabelFormats: {
minute: '%I:%M',
hour: '%I %P',
},
offset: 0,
},
yAxis: [
{
title: {
text: 'Part A',
align: "high",
textAlign: "right",
rotation: 0,
offset: 0,
margin: 0,
y: -10,
x: -15,
style: {
fontWeight: 500,
fontSize: '14px',
lineHeight: 20,
color: "#333333",
},
},
labels: {
style: {
fontWeight: 300,
fontSize: '14px',
lineHeight: 16,
color: "#333333",
letterSpacing: 0,
},
y: 3,
align:'right',
},
categories: ['', 'B1', 'B2', '', 'A1', 'A2', 'A3', ''],
},
{
title: {
text: 'Part B',
align: "middle",
textAlign: "right",
rotation: 0,
offset: 0,
margin: 0,
y: 30,
x: 25,
style: {
fontWeight: 500,
fontSize: '14px',
lineHeight: 20,
color: "#333333",
},
},
},
],
plotOptions: {
column: {
stacking: 'normal',
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0,
grouping: true,
}
},
},
series: [
{
"name": "Poor",
"data": [[1.424304e+12, 1], [1.4243076e+12, 2], [1.4243148e+12, 1], [1.4243301e+12, 1], [1.4243364e+12, 6]],
color: '#FF8A45',
marker: {
symbol: 'square'
},
},
{
"name": "Fair",
"data": [[1.424304e+12, 6], [1.4243112e+12, 1], [1.4243292e+12, 2], [1.4243436e+12, 2], [1.4243616e+12, 2]],
color: '#FFC100',
marker: {
symbol: 'square'
},
},
{
"name": "Moderate",
"data": [[1.4243616e+12, 4], [1.4243436e+12, 4], [1.4243112e+12, 4], [1.424304e+12, 4], [1.4243292e+12, 6]],
color: '#B7DCFD',
marker: {
symbol: 'square'
},
},
{
"name": "Good",
"data": [[1.424304e+12, 5], [1.4243112e+12, 5], [1.4243292e+12, 5], [1.4243436e+12, 5], [1.4243616e+12, 6]],
color: '#00C96A',
marker: {
symbol: 'square'
},
},
],
credits: {
enabled: false
},
};``
Here is my full config of hoghchart
You are using the 6.1.1 version but inactive option is available from 7.1.0 https://www.highcharts.com/blog/changelog/#highcharts-v7.1.0 .
I would recommend to always using the latest highcharts version.
So, all you have to do is set "highcharts": "latest" in your project.
If for some reason you need to use an older version, use mouseOver and mouseOut events to change the series color on hover.
plotOptions: {
series: {
events: {
mouseOver: function() {
let hoveredSeries = this;
let allSeries = this.chart.series;
allSeries.forEach(series => {
if (series === hoveredSeries) {
return true
} else if (series.name === 'A') {
series.update({
color: 'rgba(0, 155, 0, 0.5)',
})
} else if (series.name === 'B') {
series.update({
color: 'rgba(255, 0, 0, 0.5)'
})
}
})
},
mouseOut: function() {
let hoveredSeries = this;
let allSeries = this.chart.series;
allSeries.forEach(series => {
if (series === hoveredSeries) {
return true
} else if (series.name === 'A') {
series.update({
color: 'rgba(0, 155, 0, 1)',
})
} else if (series.name === 'B') {
series.update({
color: 'rgba(255, 0, 0, 1)'
})
}
})
}
}
}
},
Example demo:
https://jsfiddle.net/BlackLabel/zgjsof7L/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver
I'm using echarts-for-react to create a gauge. I'm trying to disable the hover effect on the pointer.
The current behaviour is that I have a circle with a small pointer, and when hovering, the pointer covers the text. I've tried setting emphasis: null but it didn't change anything.
Here's the pictures demonstrating this issue:
Normal Behaviour
When hovering
Here's my code:
const series = {
type: 'gauge',
radius: '100%',
startAngle: '-20',
endAngle: '200',
clockWise: false,
data: [ltv],
max: 150,
axisLine: {
show: true,
lineStyle: {
width: '12',
color: [[0.2, '#e2da34'], [0.4, '#c2e234'], [0.6, '#7dea52'], [0.8, '#c2e234'], [1, '#e2da34']],
shadowColor: '#f5f5f5',
shadowBlur: 10,
shadowOffsetX: 5,
shadowOffsetY: 5
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: {
length: '100%',
width: '4'
},
itemStyle: {
color: '#d1d1d1',
borderWidth: 5,
borderColor: '#d1d1d1'
},
detail: {
show: true,
formatter: e => [`{val|${e.toFixed(1)}%}`, '{text|Good!}'].join('\n'),
rich: {
val: {
color: '#2f353a',
fontWeight: 'bold',
fontFamily: 'SegoePro-Bold',
fontSize: '24'
},
text: {
color: '#9c9c9c',
fontFamily: 'SegoePro-Regular',
fontSize: '12'
}
},
offsetCenter: [0, 0],
padding: [40, 10, 0, 10],
width: 85,
height: 65,
backgroundColor: '#ffffff',
borderWidth: 1,
borderRadius: 50,
borderShadow: '#000000'
}
};
const config = {
title: {
show: false
},
legend: {
show: false
},
tooltip: {
show: false
},
series
};
There is a solution here that explains how to use web worker with makepdf. However, I want to know how to apply this solution to angular using requirejs.
I have tried to use ngwebworker along with requireJs, as the RequireJS within webworker, but I had no success. Can someone help me?
EDIT:
To make it easier to visualize the problem, I will put on this edit the code that it is not working:
$scope.exportToPDF = function(){
var list = $rootScope.orderedData;
var body = [];
var headers = new Array();
headers.push({ text: 'A', fillColor: '#0075E5', color: '#ffffff'});
headers.push({ text: 'B', fillColor:#0075E5', color: '#ffffff'});
headers.push({ text: 'C', fillColor:#0075E5', color: '#ffffff'});
headers.push({ text: 'D', fillColor:#0075E5', color: '#ffffff'});
headers.push({ text: 'E', fillColor:#0075E5', color: '#ffffff'});
headers.push({ text: 'F', fillColor:#0075E5', color: '#ffffff'});
body.push(headers);
for (var key in list)
{
if (list.hasOwnProperty(key)){
var position = list[key];
var fila = new Array();
fila.push( { text: position.a.toString(), fillColor: '#ffffff' } );
fila.push( { text: position.b.toString(), fillColor: '#ffffff'} );
fila.push( { text: position.c.toString(), fillColor: '#ffffff'} );
fila.push( { text: position.d.toString().substring(0,5) + "...", fillColor: '#ffffff'} );
fila.push( { text: position.e.toString(), fillColor: '#ffffff'} );
body.push(fila);
}
}
var dd = {
background: [{
width: 30,
alignment: 'left'
}],
pageOrientation: 'landscape',
footer: function(currentPage, pageCount) { return currentPage.toString() + '/' + pageCount;},
info: {
title: 'Title',
author: 'Me'
},
content: [
{ text: 'Text', style: 'header' },
{
style: 'tableHeader',
table:
{
dontBreakRows: true,
headerRows: 1,
widths: ['5%', '10%', '10%', 'auto', '15%', 'auto', 'auto', '10%', '10%', 'auto', '4%', '10%'],
body: body
}
}
],
styles: {
header: {
fontSize: 18,
bold: true,
margin: [0, 0, 0, 10],
alignment: 'center'
},
subheader: {
fontSize: 16,
bold: true,
margin: [0, 10, 0, 5]
},
tableExample: {
margin: [0, 5, 0, 15]
},
tableHeader: {
bold: true,
fontSize: 9,
color: 'black',
margin: [0, 5, 0, 15]
}
},
defaultStyle: {
},
};
var obj = pdfMake.createPdf(dd) // FAST PROCESS!
var myWorker = Webworker.create(downloadIt);
myWorker.run(obj).then(function(body) {
});
function downloadIt(obj) {
obj.download("Title.pdf"); // REALLY SLOW PROCESS THAT SHOULD BE IN BACKGROUND
}
}
The problem is that to transfer an object to a web worker, they suggest to use JSON.parse and JSON.stringify. However, if I use that on my object, I will loose the method "download". Is there a way to send this object to my function downloadIt without loosing the method download of pdfmake object?
I am working with angularjs highcharts-ng
https://github.com/pablojim/highcharts-ng
I need to add a custom button to the speedometer.
I've found this:
Add buttons in chart of Highcharts at runtime
exporting: {
buttons: {
customButton: {
text: 'Custom Button',
onclick: function () {
alert('You pressed the button!');
}
}
}
}
But it is not working to me:
$scope.highchartsNG = {
options: {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
}
},
exporting: {
buttons: {
customButton: {
text: 'Custom Button',
onclick: function () {
alert('You pressed the button!');
}
}
}
},
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
buttons: {
customButton: {
text: 'Custom Button'
}
}
,
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}],
};
http://jsfiddle.net/76dLm8h7/3/
I've tried to add the "exporting" option in different possitions inside the array, but It does'nt work.
Any help will be appreciate.
Thanks in advance.
Please see this code and try to find solution with exact code because I am fresher in EXTJS:
var chart=Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
store: store,
width: 400,
height: 250,
animate: true,
insetPadding: 30,
axes: [{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: 100,
steps: 10,
margin: 10
}],
gradients: [{
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
},
{
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
},
{
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
},
{
'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
},
{
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'
}
}
}],
series: [{
type: 'gauge',
field: 'value',
donut: 30,
colorSet: ['url(#v-1)', '#ddd']
}]
});
Here is the portion of the code. I just want to know is this possible that gauge chart have Multi background color where they all are static? Like 0-25=red , 25-50= yellow ,50-100= green.
Yes. Someone has already gone through of work of doing this very thing by extending the gauge series: http://www.sencha.com/forum/showthread.php?159879-KPI-Gauge
There is a .zip you can download and add to your library. Then you can essentially just do:
{
xtype: 'chart',
style: 'background:#fff',
animate: {
easing: 'elasticIn',
duration: 1000
},
store: store1,
insetPadding: 50,
flex: 1,
axes: [{
type: 'kpigauge',
position: 'left',
minimum: 0,
maximum: 100,
steps: 10,
margin: 0,
label: {
fill: '#333',
font: '12px Heveltica, sans-serif'
}
}],
series: [{
type: 'kpigauge',
field: 'data1',
needle: {
width: 2,
pivotFill: '#000',
pivotRadius: 5
},
ranges: [{
from: 0,
to: 70,
color: '#FF0000'
}, {
from: 70,
to: 90,
color: '#FFFF00'
}, {
from: 90,
to: 100,
color: '#00FF00'
}],
donut: 70
}]