I want to create a header like this in pdf-make:
My current code has only the gradient at the top, the logo and the border-bottom:
import { Content } from 'pdfmake/interfaces';
import Gradient from '#vw/wwft/pdf/domain/pdf-components/gradient';
export type PageHeaderProps = {};
export const PageHeader = (): Content[] => [
Gradient(),
{
svg: logoSVG,
width: 80,
margin: [32, 11],
bold: true,
fontSize: 18,
},
{
canvas: [
{
type: 'rect',
x: 0,
y: 0,
w: 595,
h: 0.75,
color: '#EEEEEE',
},
],
},
];
If I simply add another object it doesn't stay at the same row, the style that I want here is something similar with justify-content: space-between in CSS. Is it possible?
The pdfmake lib version is: 0.2.4
Related
I'm trying to customize the Tailwind Typography plugin, as follows:
typography (theme) {
return {
DEFAULT: {
css: {
'code::before': {
content: 'none', // don’t generate the pseudo-element
//content: '""', // this is an alternative: generate pseudo element using an empty string
},
'code::after': {
content: 'none'
},
code: {
color: theme('colors.slate.700'),
fontWeight: "400",
backgroundColor: theme('colors.stone.100/30'),
borderRadius: theme('borderRadius.DEFAULT'),
borderWidth: '1px',
paddingLeft: theme('spacing[1.5]'),
paddingRight: theme('spacing[1.5]'),
paddingTop: theme('spacing[0.5]'),
paddingBottom: theme('spacing[0.5]'),
},
}
},
invert: {
css: {
code: {
color: theme('colors.slate.100'),
backgroundColor: theme('colors.slate.800'),
borderColor: theme('colors.slate.600'),
}
}
}
}
},
How can I apply a color value to backgroundColor - based on one of the built in colors, with with opacity applied? For example colors.slate.800 / 50 (which doesn't work)
This is a tricky one. The problem is theme function will return HEX value for colors - it simply gets value from resolved configuration in dot notation. So theme('colors.red.500/300') is not valid (at least for now. I think it worth to open PR or Discussion)
All you need to solve the problem is to convert HEX to RGB. There are two Tailwind's ways I know but of course you're free to use any similar approach
First one - convert using Tailwind's withAlphaVariable function. It accepts an object with CSS property, color name and variable name.
const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable')
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
// This will create CSS-like object
// you should destruct and override CSS-variable with desired opacity
const proseCodeBgColor = withAlphaVariable({
color: theme('colors.red.500'), // get color from theme config
property: 'background-color',
variable: '--tw-my-custom-bg-opacity', // could be any
})
return {
DEFAULT: {
css: {
code: {
...proseCodeBgColor,
'--tw-my-custom-bg-opacity': '.3', // opacity
},
}
},
}
}
},
},
plugins: [
require('#tailwindcss/typography')
],
}
Second one much simplier - use #apply directive. Pass desired Tailwind's utilities as a key and empty object as a value
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
return {
DEFAULT: {
css: {
code: {
// you may pass as much utilities as you need eg `#apply bg-red-500/30 text-lg font-bold`: {}
'#apply bg-red-500/30': {},
},
}
},
}
}
},
},
plugins: [
require('#tailwindcss/typography')
],
}
Worth to mention you can customize code background as utility prose-code:bg-blue-500/50
<div class="prose prose-code:bg-blue-500/50">
<code>
npm install tailwindcss
</code>
</div>
DEMO
Follow the vaadin guidence of web component to create a meter:
#Tag("dw-meter")
#NpmPackage(value = "echarts", version = "5.2.2")
#JsModule("../node_modules/echarts/dist/echarts.js")
#JsModule("./dwmeter.webcomponent.js")
public class DwMeter extends Div {
}
Integrate the meter into a demo application:
DwMeter meter = new DwMeter();
meter.setWidth("100px");
meter.setHeight("100px");
add(meter);
Application is executed successfully, but the meter is not displayed.
Trace the web page, Tag <dw-meter> and <canvas> are generated correctly :
Changed Tag <dw-meter> to <div>, the meter is visible:
My question is how to visualize an user-defined vaadin web component? e.g. <dw-meter>
attached dwmeter.webcomponent.js:
import * as ECharts from "echarts";
class dwMeter extends HTMLElement {
constructor() {
super();
}
init(o) {
// Shadow root
const shadowRoot = this.attachShadow({mode: 'open'});
// container
var container = document.createElement('div');
shadowRoot.appendChild(container);
// Garantee all elements are rendered
setTimeout(function() {
var myChart = ECharts.init(o); //container
myChart.setOption(o.options());
}, 0);
}
options() {
const gaugeData = [
{
value: 0.25,
name: 'pressure',
title: {
offsetCenter: ['0%', '90%']
}
}
];
var option = {
series: [
{
type: 'gauge',
min: 0,
max: 0.25,
splitNumber: 5,
progress: {
show: false,
width: 5
},
axisLine: {
lineStyle: {
width: 5,
color: [[1, 'rgba(36,177, 76)']]
}
},
axisTick: {
show: false
},
splitLine: {
length: -10,
lineStyle: {
width: 5,
color: 'rgba(36,177, 76)'
}
},
axisLabel: {
distance: -20,
color: '#999',
fontSize: 10
},
anchor: {
show: true,
showAbove: true,
size: 12,
itemStyle: {
borderWidth:0,
color: 'rgba(36,177, 76)',
}
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 5,
length: '60%',
offsetCenter: [0, '8%'],
itemStyle: {
color: 'rgba(36,177, 76)'
}
},
title: {
color: 'rgba(36,177, 76)',
fontSize: 14,
fontWeight: 800,
fontFamily: 'Arial',
offsetCenter: [0, '100%']
},
detail: {
valueAnimation: true,
fontSize: 12,
offsetCenter: [0, '55%'],
show: true
},
data:gaugeData
}
]
};
return option;
}
connectedCallback() {
this.init(this);
}
disconnectedCallback() {
}
attributeChangedCallback() {
}
clone(origin, target) {
var target = target || {};
for(var prop in origin) {
target[prop] = origin[prop];
}
}
}
window.customElements.define('dw-meter', dwMeter);
The reason that nothing is shown when you're using the <dw-meter> custom element is that it has a shadow root, while the actual content (rendered by the ECharts library) is outside that shadow root. Whenever an element has a shadow root, then the content of the shadow root will be rendered and the content outside the shadow root will be rendered in the location of a <slot> element inside the shadow root. If there is no <slot>, then it won't be shown anywhere at all.
If you want to use the shadow root to encapsulate styles, then you would at the very least need to change ECharts.init(o) to instead do ECharts.init(container). There might also be other things that you need to change to make it work properly, but that depends on exactly how ECharts is implemented. The o parameter that I assume you're passing from the server is most likely redundant since this is already a reference to the top-level element.
I'm using cytoscape.js and when I try to initialize it, I found the canvas height to 0. I don't understand why.
This is my js :
var cy = cytoscape({container: document.getElementById("mapping")});
cy.add([
{group: "nodes", data: {id: "n0"}, position: {x:0, y:0}},
{group: "nodes", data: {id: "n1"}, position: {x:100, y:50}},
{group: "edges", data: {id: "e0", source: "n0", target: "n1"}}
]);
console.log(cy.container());
Here is the jsfiddle where you can see the "height":0px in log and nothing in rendered.
If you initialize cytoscape with static data, consider doing it like the documentation shows:
var cy = cytoscape({
container: document.getElementById('cy'), // container to render in
elements: [ // list of graph elements to start with
{ // node a
data: { id: 'a' }
},
{ // node b
data: { id: 'b' }
},
{ // edge ab
data: { id: 'ab', source: 'a', target: 'b' }
}
],
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(id)'
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
layout: { /!!!
name: 'grid',
rows: 1
}
});
you dont specify a layout in your sample code, i rarely do it like that, i simply add the nodes/edges and call the layout algorithm i want, the rest of your code seems ok, did you include all scripts and css files for cytoscape?
I am trying to implement angular D3 Line Chart with angular-nvd3 library. We are using AngularJS 1.6 with ES6. This is how angular-nvd3 is wired:
app.js
import angularnvd3 from '../node_modules/angular-nvd3/index';
export default angular.module('myApp', othermodules,..angularnvd3)
.
.
controller.js
this.linechartOptions = {
chart: {
type: 'lineChart',
height: 300,
width:500,
x: function(d){ return d.x },
y: function(d){ return d.y },
useInteractiveGuideline: true,
xAxis: {
axisLabel: 'X Label'
},
yAxis: {
axisLabel: 'Y Label',
},
},
title: {
enable: true,
text: 'Some text',
css: {
'font-size' : '15px',
'font-weight' : 'bold',
'text-align' : 'left'
}
},
};
this.linechartData = [{
values: lineChartData,
key: 'Some Key',
color: '#1f77b4'
}]
template.html
<nvd3 options="controller.linechartOptions" data="controller.linechartData"></nvd3>
However, the graphs get painted with a black background.
I have been referring to these resources:
http://krispo.github.io/angular-nvd3/#/quickstart
http://plnkr.co/edit/lBKFld?p=preview
However I can't figure out how to remove the black background and the lines that create the filled area. I simply need to view the line graph as shown in the plunker mentioned above.
Simply include nv.d3.css from node_modules/nvd3/build/nv.d3.css and it will fix this issue.
I'm following the example from the Telerik web site for Basic Usage with the exception of using a Model, children Heirarchy. I just want to be able to list shapes with text boxes and be able to connect them and get the connections later. So far, I'm able to list the shapes and the text boxes, but for some reason all the shapes get centered to the origin of the diagram. I'd like to be able to list the shapes in some order, without connections, then connect them later on on the diagram. Here is the code I have so far:
var data = [{
firstName: "Antonio",
lastName: "Moreno",
title: "Team Lead",
colorScheme: "#1696d3"
},
{
firstName: "Alfredo",
lastName: "Morales",
title: "Team Lead",
colorScheme: "#1696d3"
}];
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
g.append(new dataviz.diagram.Rectangle({
width: 210,
height: 75,
stroke: {
width: 0
},
fill: {
gradient: {
type: "linear",
stops: [{
color: dataItem.colorScheme,
offset: 0,
opacity: 0.5
}, {
color: dataItem.colorScheme,
offset: 1,
opacity: 1
}]
}
}
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.firstName + " " + dataItem.lastName,
x: 85,
y: 20,
fill: "#fff"
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.title,
x: 85,
y: 40,
fill: "#fff"
}));
return g;
}
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
data: data,
}),
shapeDefaults: {
visual: visualTemplate
},
});
var diagram = $("#diagram").getKendoDiagram();
diagram.bringIntoView(diagram.shapes);
}
$(document).ready(createDiagram);
I've made some sample: http://dojo.telerik.com/UbECE that makes rectangles one next to another.
I am following this example from API Documentation http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-shapeDefaults.visual
They are using:
$("#diagram").getKendoDiagram().layout();
which works.
Your function will became:
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource : data,
shapeDefaults: {
visual: visualTemplate
},
});
$("#diagram").getKendoDiagram().layout();
}