@xyzblocks/domless v1.0.0

@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