@wildfalcon/graph2data NPM

Graph2Data

This package contains one WebComponnent useful for extrating data from graphs created from that data

graph-2-data is WebComponent that displays an image, allows the user to calibrate the graph (assumed to be shown in the image) and extract data from the graph by clicking on points

See online examples

There is also a change log

Usage

Install

Install Graph Displayer from npm. On the command line run:

npm i @wildfalcon/graph2data

Import

Use <scipt> tags to import graph-2-data compoennts into your html:

<script src='node_modules/@wildfalcon/graph2data/build/graph-2-data.js'></script>

Calling

Use the <graph-2-data> component in your html

<body>
  <graph-2-data/>
</body>

The <graph-2-data> component will expand only to the height of the div it is rendered in. Ensure that div is the height you want. The method of doing this depends on the context, but probably means setting a height on the containing div and making sure that <graph-2-data> has the following styles.

graph-2-data {
  display: block;
  height: 100%;
}

Configuration

Configure the component by setting properties on it:

const graph2DataComponent = document.querySelector('graph-2-data');
graph2DataComponent.dataUri = graph

The following configuration options are available:

dataUri - A string containing a dataUri of the graph to be digitised.
seriesLabel - A string denoting what a series corresponds to in the problem domain (eg Cohort).
independentVariableLabel - A string denoting what an independent variable corresponds to in the problem domain (eg Time).
series - An array of objects defining what series if any to pre-populate graph2data with. Each element should contain a label property, and an (optional) uuid property.
independentVariables - An array of objects defining what independent variables if any to pre-populate graph to data with. Each element should contain a value property, and an (optional) uuid property. Passing this parameter switches Graph2Data into "Input Manually" mode for independent variables.
unchangableIndependentVariable - An object containing an (optional) uuid property and a (required) value property. This overrides any independent variables passed by the independentVariables property, and hides the independent variable control from the user. This is intended to be used in cases where the independent variable is not shown on the graph or we want the user to ignore the one shown on the graph.
stateToRestore - An object representing the internal state of graph-2-data to be restored. Used to continue a pervious session. See Pause and Resume below for more deatils

Data

graph-2-data returns the data in the form of an event. The event contains a detail property which contains the data that was extracted. Use the following code to listen to the event

const graph2DataComponent = document.querySelector('graph-2-data');
graph2DataComponent.addEventListener("data-extraction-complete", (e) => {
  console.log("Graph 2 Data Returned this data:")
  console.log(e.detail)
})

Pause and Resume

graph-2-data can dump its internal state so that the host application can provide future invocations of graph-2-data with a complete initial state. This can be used to "pause" and "resume" digitisation of a graph.

Getting a state dump is a two stage process.

First register an event listner to recieve the state:

const graph2DataComponent = document.querySelector('graph-2-data');
graph2DataComponent.addEventListener('g2d-state-dumped', (e)=>{
  console.log("Graph 2 Data dumped it's state:")
  console.log(e.detail)
})

Then trigger an event commanding graph-2-data to dump its state

document.dispatchEvent(new Event("g2dDumpStateCommand"))

Once the internal state has been obtained it can be stored and passed to a future invocation of graph-2-data.

const graph2DataComponent = document.querySelector('graph-2-data');
graph2DataComponent.stateToRestore = stateObject

NOTE Passing a state to G2D that was generated by a pervious version of G2D is not supported. If you try, it will fail silently

Development

Graph 2 Data is a React app that is compiled into a WebComponent using Direflow

Available Scripts

In the project directory, you can run:

`yarn start`

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

`yarn test`

Launches the test runner in the interactive watch mode.

`yarn build`

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

@babel/runtime @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons direflow-component element-resize-event pluralize react react-dom react-draggable react-redux react-scripts redux redux-devtools-extension uuid

@infinitebrahmanuniverse/nolb-_wil @everything-registry/sub-chunk-1015

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago