rule-matrix-js
The front-end module of rule matrix
Last updated a year ago by myaooo .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rule-matrix-js 
SYNC missed versions from official npm registry.

rule-matrix-js

The front end module for rule matrix

Install

npm install --save rule-matrix-js

Usage

import { RuleMatrixApp, RuleList, Streams, ConditionalStreams } from 'rule-matrix-js';

const input = null;
const styles: RuleMatrixStyles = {
  flowWidth: 30,
  // mode: 'matrix',
  rectWidth: 45,
  rectHeight: 27,
  color: labelColor,
  displayEvidence: true,
  // displayFidelity: false,
  // displayFlow: false,
  zoomable: true,
};
const model: RuleList = new RuleList(require('./test_data/model.json'));
const streams: Streams = createStreams(require('./test_data/stream.json'));
// const streams: ConditionalStreams = createConditionalStreams(require('./test_data/stream_cond.json'));
// const support: Support | SupportMat = require('./test_data/support.json');
const support: Support | SupportMat = require('./test_data/support_mat.json');
model.support(support);

ReactDOM.render(
  <div>
    <RuleMatrixApp model={model} streams={streams} support={support} styles={styles} input={input} widgets={true}/>
  </div>,
  document.getElementById('root') as HTMLElement
);

Customization

RuleMatrixApp support the following styling (the styles prop) options:

  • transform: (string) The transform css applied to the group element containing the visualization (not affecting the svg);
  • flowWidth: (number) The width of the data flow on the left of the matrix;
  • evidenceWidth: (number) The width of the evidence on the right of the matrix;
  • rectWidth: (number) The width of each rect cell in the matrix;
  • rectHeight: (number) The height of each rect cell in the matrix;
  • displayFlow: (boolean) Whether to display the data flow;
  • displayEvidence: (boolean) Whether to display the evidence;
  • zoomable: (boolean) Whether the visualization is zoomable or not;
  • color: (ColorType) A color function, used for color the class labels, the type of the function should be (i: number) => string;
  • minSupport: (number) The minimum support (in proportion) of a rule (if a rule does not have a enough support, it will be collapsed) default to 0.01;
  • width: (number) The width of the svg;
  • height: (number) The height of the svg;

Known Issues

  1. Firefox has trouble using getBBox, which results in the error display of tooltip

Current Tags

  • 1.0.8                                ...           latest (a year ago)

12 Versions

  • 1.0.8                                ...           a year ago
  • 1.0.7                                ...           a year ago
  • 1.0.7-rc4                                ...           2 years ago
  • 1.0.7-rc3                                ...           2 years ago
  • 1.0.7-rc2                                ...           2 years ago
  • 1.0.7-rc                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 12
Last Day 0
Last Week 0
Last Month 1
Dependencies (14)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |