This library provides a simple graph allowing the user to dynamically generate a scenario using preconfigured choices .
You can try it out and explore the options here : Live demo
To add scenarioGraph to your dependencies:
npm install @amine-lejmi/scenariograph
- Import the css file in your HTML document:
<link rel="stylesheet" href="path-to-node_modules/@amine-lejmi/scenariograph/dist/scenarioGraph.styles.css">
- Import the js module in your main js file:
import Scenario from 'path-to-node_modules/@amine-lejmi/scenariograph/src/scenarioGraph.js';
Import the css and js files in the head tag of your html document
<link rel="stylesheet" href="https://res.cloudinary.com/amine-lejmi/raw/upload/v1578917478/scenarioGraph/scenarioGraph.styles_rnxukc.css">
<script src="https://res.cloudinary.com/amine-lejmi/raw/upload/v1578917478/scenarioGraph/scenarioGraph.main_tdw5hx.js"></script>
Download the scenarioGraph.main.js and scenarioGraph.styles.css located in the dist directory, and import them in the head tag of your html document
If you want to integrate the ES6 (non mignified) version of the library :
- download scenarioGraph.js located in the src directory , and import it in your js file:
import Scenario from './src/scenarioGraph.js';
- download scenarioGraph.css located in the src directory , and import it in your html file:
<link rel="stylesheet" href="./src/scenarioGraph.css">
- Create the HTML structure
<div id="id-of-your-container">
<svg></svg>
</div>
- Import the library in your main javascript file :
const Scenario = ScenarioGraph.default;
- Select and put your container in a variable :
mainContainer = document.getElementById("id-of-your-container");
- Create the object containing your main data :
data = [
{
title: "title",
description: "description",
_children: [
{
title: "title 2",
description: "description 2"
},
{
...
- Instantiate your graph with your data
new Scenario(mainContainer, data);
The instantiation of the scenario accepts a third optional parameter, allowing you to customize your graph:
...
options = {
...
};
new Scenario(mainContainer, data, options);
Attribute | Type | Default | Description |
---|---|---|---|
storeChanges | Boolean | false | Stores the changes in the localStorage |
strokeColor | String | "bcbdbd" | Color of the graph lines, hex color |
strokeWidth | String | "3" | The width of the graph lines |
cardShadowColor | String | "0,0,0,0.15" | The color of the cards shadow, rgba color without braces |
selectedCardBorderColor | String | "228B22" | The border color of the selected cards, hex color |
selectedCardBorderWidth | String | "2" | The border width of the selected cards |
If you put the instance your created into a variable, you can access some output methods:
let scenario = new Scenario(mainContainer, data, options);
Allows you to export an array containing the selected scenario
Allows you to export only the fields you need from the selected scenario
scenario.generateScenarioFields(["title", "_id"]);
-
If one of the fields doesn't exist in the data object, it will be ignored
-
If the fields array contains only one element, the output will be a simple array containing the values of the field
-
If the fields array contains many elements, the output will be an array of objects.
- V1.0.0 Initial release
- Mohamed Amine LEJMI - Initial work - lejmi.amine@gmail.com
To modify the library and improve it :
- Clone the project
- Install npm dependencies (it uses webpack and babel to transpile and minify the files)
- npm run watch to watch and build changes in css and js files
- npm run build to build the dist files