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
labelproperty, and an (optional)uuidproperty. -
independentVariables - An array of objects defining what independent variables if any to pre-populate graph to data with. Each element should contain a
valueproperty, and an (optional)uuidproperty. Passing this parameter switches Graph2Data into "Input Manually" mode for independent variables. -
unchangableIndependentVariable - An object containing an (optional)
uuidproperty and a (required)valueproperty. This overrides any independent variables passed by theindependentVariablesproperty, 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.