@haukeland-mgm/plateviewer
Vue component for visualizing a lab plate
Last updated a year ago by valkra .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @haukeland-mgm/plateviewer 
SYNC missed versions from official npm registry.

Description

This is a vue.js component for visualizing a (96 well) plate as found in many wet labs.

It uses the bulma framework for CSSing and layout, [font awesome](font awesome.com) as a font to provide icons, and buefy for tooltips.

Usage / Development

Consider the app in the example directory app, and to get it up and running, run

npm install
npm run dev

This will install all dependencies for the example app, and run the app with hot-reload and whatnot for your viewing and development convenience.

Inputs (Props)

  • numberOfRows (default: 8, type: int)
  • numberOfColumns (default: 12, type: int)
  • plateMapping: Object containing info, used for mapping and determining which wells are full, and displaying extra info as tooltips; e.g. ``` { "id": "43210000", "placements": [ { "position": "A1", "sample": { "id": "6572411215" } }, { "position": "B1", "sample": { "id": "6573166189" } }, { "position": "C1", "sample": { "id": "6562071415" } }, { "position": "D1", "sample": { "id": "6562369215" } }, { "position": "E1", "sample": { "id": "6568433989" } }, { "position": "F1", "sample": { "id": "6571775089" } }, { "position": "G1", "sample": { "id": "6571773523" } }, { "position": "H1", "sample": { "id": "6571977289" } } ] }

**TODO** Specify what data can be passed, and how it will be displayed.

Current Tags

  • 1.0.2                                ...           latest (a year ago)

5 Versions

  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
  • 0.0.2                                ...           a year ago
  • 0.0.1                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 5
Last Day 0
Last Week 0
Last Month 1
Dependencies (5)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |