@xyzblocks/domless
v1.0.0
Published
Create HTML and SVG elements without DOM
Downloads
3
Readme
@xyzblocks/domless
Create HTML and SVG elements without DOM
Installation
npm install @xyzblocks/domless --save
Example (Bar Chart)
const items: Array<number> = [20, 40, 80, 100, 150];
const minimum: number = 0;
const maximum: number = 200;
const width: number = 125;
const height: number = 200;
const pixelPerBar: number = width / items.length;
const yPixelsPerUnit: number = height / (maximum - minimum);
const domless = new Domless('svg');
domless.attr('width', width).attr('height', height);
for (let index = 0; index < items.length; index++) {
const item: number = items[index];
domless
.append('rect')
.attr('x', index * pixelPerBar)
.attr('y', height - (item - minimum) * yPixelsPerUnit)
.attr('width', pixelPerBar * 0.9)
.attr('height', (item - minimum) * yPixelsPerUnit)
.attr('fill', 'blue');
}
console.log(domless.toString());
// <svg width="125" height="200">
// <rect x="0" y="180" width="22.5" height="20" fill="blue" />
// <rect x="25" y="160" width="22.5" height="40" fill="blue" />
// <rect x="50" y="120" width="22.5" height="80" fill="blue" />
// <rect x="75" y="100" width="22.5" height="100" fill="blue" />
// <rect x="100" y="50" width="22.5" height="150" fill="blue" />
// </svg>
Rendered SVG
API
Domless
Properties
tag: string
Methods
static create(tag: string): Domless
append(tag: string): Domless
attr(name: string, value: string | number): Domless
style(name: string, value: string | number): Domless
text(value: string): Domless
toString(): string