AngularJs: How to use web worker with makepdf - angularjs

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?

Related

How to remove tooltip in ant-design donut chart

I am trying to remove the tooltip from the donut chart in #ant-design/plots.
I have tried passing tooltip:false to the label object which didn't work.
const config = {
appendPadding: 10,
data,
angleField: 'value',
colorField: 'type',
radius: 1,
innerRadius: 0.6,
label: {
tooltip:false,
type: 'inner',
offset: '-50%',
content: '{value}',
style: {
textAlign: 'center',
fontSize: 14,
},
},
interactions: [
{
type: 'element-selected',
},
{
type: 'element-active',
},
],
statistic: {
title: false,
content: {
style: {
whiteSpace: 'pre-wrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
content: 'AntV\nG2Plot',
},
},
};
tooltip:false should be in config object
tooltip is a property under Plot Components in the API
To remove the tooltip you should pass it directly in the config object.
const config = {
tooltip:false,
appendPadding: 10,
data,
angleField: 'value',
colorField: 'type',
radius: 1,
innerRadius: 0.6,
label: {
type: 'inner',
offset: '-50%',
content: '{value}',
style: {
textAlign: 'center',
fontSize: 14,
},
},
interactions: [
{
type: 'element-selected',
},
{
type: 'element-active',
},
],
statistic: {
title: false,
content: {
style: {
whiteSpace: 'pre-wrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
content: 'AntV\nG2Plot',
},
},
};

React HighCharts Custom Legend

I'm trying to customise my chart's legend. My current legend needs to look like this legend.
Basically I need to make the circular icons rectangular and change the legend text color to correspond with the icon.
I've looked everywhere in the docs but I'm not finding a solution. This is how I configured the graph below (legend > itemStyle):
useEffect(() => {
Highcharts.chart(chart.current, {
chart: {
type: 'column',
style: {
fontFamily: '"Roboto", sans-serif',
},
height: 312,
},
credits: {
enabled: false,
},
title: {
text: null,
},
xAxis: {
categories,
labels: {
step: 1,
style: {
fontSize: '8px',
color: '#808992',
},
useHTML: true,
formatter() {
const day = this.value.format('D');
if (moment().isSame(this.value, 'd')) {
return `<strong style="font-weight: 900; color: #0E2C47;">${day}</strong>`;
}
return day;
},
},
gridLineWidth: 1,
},
yAxis: {
min: 0,
title: {
text: `Collections ${showValue ? 'value' : 'count'}`,
style: {
color: '#0E2C47',
fontWeight: '500',
fontSize: '12px',
letterSpacing: '0.3px',
lineHeight: '14.4px',
},
},
labels: {
style: {
fontSize: '8px',
color: '#808992',
},
useHTML: true,
formatter() {
// eslint-disable-next-line react/no-this-in-sfc
const collection = this.value;
const format = Math.abs(collection) > 999 ? `${Math.sign(collection) * ((Math.abs(collection) / 1000).toFixed(1))}K` : Math.sign(collection) * Math.abs(collection);
return `${format}`;
},
},
useHTML: true,
},
legend: {
title: {
text: 'Status',
style: {
fontSize: '12px',
letterSpacing: '0.3px',
color: '#0A1944',
fontWeight: '500',
},
},
itemStyle: {
fontSize: '10px',
letterSpacing: '0.25px',
fontWeight: '500',
color: '#0A1944',
},
reversed: 'true',
layout: 'vertical',
align: 'right',
verticalAlign: 'bottom',
itemMarginBottom: 8,
x: -30,
y: -2,
},
plotOptions: {
series: {
stacking: 'normal',
},
},
tooltip: {
formatter() {
// eslint-disable-next-line react/no-this-in-sfc
return `<b>${this.y} ${this.series.name}</b><br/>${this.x.format('D MMM YYYY')}`;
},
},
series: [{
name: 'Draft',
data: chartData.draft, // [...times(() => null, 30), ...times(random, 31)],
color: collectionStateColors.draft, // processed
legendIndex: 0,
}, {
name: 'Approved',
data: chartData.approved,
color: collectionStateColors.approved, // orange
legendIndex: 1,
}, {
name: 'Expired',
data: chartData.expired,
color: collectionStateColors.expired, // purple
legendIndex: 2,
}, {
name: 'Submitted',
data: chartData.submitted,
color: collectionStateColors.submitted, // purple
legendIndex: 3,
}, {
name: 'Tracking',
data: chartData.tracking,
color: collectionStateColors.tracking, // light blue
legendIndex: 4,
}, {
name: 'Processed',
data: chartData.processed,
color: collectionStateColors.processed, // dark blue
legendIndex: 5,
}],
});
});

eChartsjs on React - trying to disabling the hover effect on the pointer

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
};

React Google Pie Chart Styling the Title

I am trying to use google react pie chart however I am having a hard time position the title.
Here is my code:
const pieOptions = {
title: 'my awesome chart',
pieHole: 0.6,
slices: [
{
color: '#00a3e0',
},
{
color: '#f2a900',
},
{
color: 'F16A21',
},
{
color: '#e9a227',
},
],
legend: {
position: 'right',
alignment: 'center',
textStyle: {
color: '233238',
fontSize: 14,
},
},
tooltip: {
showColorCode: true,
},
// chartArea: {
// left: 0,
// top: 0,
// width: '100%',
// height: '70%',
// },
fontName: 'Roboto',
fontSize: 20,
}
<Chart
chartType="PieChart"
data={[
['Item', 'Numbers'],
['Item 1', 5000],
['Item 2', 20000],
['Item 3', 6000],
]}
options={pieOptions}
graph_id="PieChart"
width={'100%'}
height={'220px'}
legend_toggle
/>
Here is what I get:
My desired result is to put the title above the legend but I am clueless how to do so.
Here is a link to the npm package I am using:
https://github.com/RakanNimer/react-google-charts#donut-chart
https://github.com/rakannimer/react-google-charts/blob/master/sandboxes/pie-chart/index.js
It doesn't seem that there is a way to position the title. You'll have to set titlePosition: 'none' and create a title separately and style it how you want instead.
Read more at the docs.

highchart datalabel one value is missing in label

i have highchart graph api similar to pasted fiddle link, the problem
is number is missing in few stacked column( example in fiddle decission line one label value is missing) could anyone help on this why
this is happening
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
inverted:true,
height: 200
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Pending', 'Further', 'Decision']
},
yAxis: {
min: 0,
//max:100,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'center',
x: -30,
verticalAlign: 'top',
y: 25,
floating: false,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
crop:false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
data:[3, 2, 1],
name:'Today'
}, {
data:[2, 2, 19],
name:'1 Day'
}, {
data:[14, 2, 22],
name:'2 Days'
},{
data:[6, 2, 18],
name:'3 Days'
},{
data:[10, 2, 537],
name:'>3 Days'
}]
});
});
http://jsfiddle.net/g6wsd1hm/
If I change stacking to percent ,all labels are visible. minPointLength is set to make minimum column stacks width for a relatively less number
use following :
plotOptions: {
column: {
stacking: 'percent',
minPointLength:10 //this needs to added
}
}
Fiddle Here

Resources