visualized-array-compare

1.0.3 • Public • Published

Visualize your array changed history

It compares changed history between two arrays.
It is wriiten in vanilla script so that you use it in any other UI framework and the browser.

Image

Installation

npm install visualized-array-compare

or

yarn add visualized-array-compare

Usage

import VisualizedArrayCompare from 'visualized-array-compare';

when after mounted

const prev = [ "a", "b", "c", "d", "e" ];
const current = [ "a", "b", "c", "d", "e" ];
const container = document.querySelector('#array-compare-canvas');
const options = {
  lineWidth: 1,
  fillArrow: true,
  arrowStart: false,
  arrowEnd: true
};
const visualizedArrayCompare = new VisualizedArrayCompare({ canvas: container, prev, current, options });
const visualizedArrayCompare.draw();

this.visualizedArrayCompare = visualizedArrayCompare; // In order to redraw

in order to redraw

this.visualizedArrayCompare.options.arrowStart = true;
this.visualizedArrayCompare.redraw();

Options

container1Width: 300,
container2Width: 200,
container3Width: 300,
canvasPadding: 20,
elementGap: 20,
rectWidth: 200,
rectHeight: 30,
margin: 20,

// Line Options
lineWidth: 1,
lineStyle: 'RGBA(57, 150, 250, 1.00)',
lineStyleStayed: '#000000',
lineStyleMoved: 'RGBA(57, 150, 250, 1.00)',
lineStyleAdded: 'green',
lineStyleRemoved: 'red',

// Arrow Options
fillArrow: true,
fillStyle: '#000000',
arrowSize: 10,
arrowStart: true,
arrowEnd: true,

// Graph Options
showModuleMove: true,
showGroupMove: false

/visualized-array-compare/

    Package Sidebar

    Install

    npm i visualized-array-compare

    Weekly Downloads

    0

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    117 kB

    Total Files

    26

    Last publish

    Collaborators

    • mansoo.app