{"_id":"@amine-lejmi/scenariograph","_rev":"1-f5795d523626ea5162dc59519ba0078d","name":"@amine-lejmi/scenariograph","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@amine-lejmi/scenariograph","version":"1.0.0","description":"Simple scenario generator, allowing the user to graphically generate his choices","main":"src/scenarioGraph.js","repository":{"type":"git","url":"git+https://github.com/aminelejmi/scenarioGraph.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","watch":"webpack --watch","build":"webpack --mode production"},"keywords":["graph","scenario","svg","generator"],"author":{"name":"Mohamed amine LEJMI","email":"lejmi.amine@gmail.com"},"license":"MIT","devDependencies":{"@babel/core":"^7.7.7","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/preset-env":"^7.7.7","babel-loader":"^8.0.6","css-loader":"^0.27.3","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","optimize-css-assets-webpack-plugin":"^5.0.3","webpack":"^4.41.5","webpack-cli":"^3.3.10","webpack-fix-style-only-entries":"^0.2.1","webpack-server":"^0.1.2"},"dependencies":{"bootstrap":"^4.4.1"},"gitHead":"51628a9dcbf47ba83f71a1b903cc986bf83ad424","bugs":{"url":"https://github.com/aminelejmi/scenarioGraph/issues"},"homepage":"https://github.com/aminelejmi/scenarioGraph#readme","_id":"@amine-lejmi/scenariograph@1.0.0","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-nCnN/v4JnBc5uR8tyWKVD5HBI/4r0VVSL+08Ah7qZlvg01aFTGjlaKTCe3LnuzqUsUPgU93Etm0hFq5v3jMX9w==","shasum":"375893bb09728b953b99b02a9da6936b219fa0cd","tarball":"https://registry.npmjs.org/@amine-lejmi/scenariograph/-/scenariograph-1.0.0.tgz","fileCount":8,"unpackedSize":104925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHH/DCRA9TVsSAnZWagAAt2AP+QHhx0ulZ7nHJhbnrdQI\ndV6T+ubtfE/PPy4iI3NJ1kSV/nQoSoF8hjsPzCBs4uHiUyirWlaGmA5XIS1P\nAfKw5eWFjTVIONx8p1iWZkFu7bZcvHLKjTo/u9EB33l2gS+yfZVGmhHS+Msr\nudkhkHJUHLt7wHv7eiO8LK6h/54PCPnCpDi3fb+r++173TZy4XMsApl9fq4+\nuKdi0um6ApGGbSvHE5MPKzH4fyaltsWfNUKNE77WTzz/c8potzbY/fyQ9HRP\nS2JlMj1+8wX1XOVqZzMogMPXvXzULGUHGBXjndWVE0/9APXDaCjlm/FoN4O2\nN2MNNROgefKTQ/hDhr7Fy+rkmlYtCo7KUwpLddW9frJxVIE+x/s3nkSTczgG\nv0cHvioAHErkdrcf9SB6nfsV09jdYvPS7l+Pcy9i/eKgqRxFq7TPhYr6Bs2f\nGuDhg2ok+R2ejgNtUlrYtAUem8vYVqSesjiLzZfnJTvS/vDJ0rOHKVTMPhQj\nqBq2P2m7lC/2q5Py07kF/0pasl5fWSbRK4F0UMOa6wzPQVmhSXJNpah0WgO6\nKKVyv/StivUoGm7H+m3GDXl/maiLUU7W+k5mzIqnpv6iPdZTRcHpb3ACYMbF\noVgUz/m2aUitlUXAoDjxPBIJzTTyPIAeqwkAbtQdy6t6tCxMVzOuaDzVtjRG\nQHUU\r\n=9ftD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdXPbrHKi6OF0+oX+rvDYneH5Szs/s6hl8ByqmvhKEGAiAavlBqO5GUOOC2b3EPjIwo1/s8RHEFoINL4mATXD8waw=="}]},"maintainers":[{"name":"amine-lejmi","email":"lejmi.amine@gmail.com"}],"_npmUser":{"name":"amine-lejmi","email":"lejmi.amine@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scenariograph_1.0.0_1578926018647_0.6508495494749575"},"_hasShrinkwrap":false}},"time":{"created":"2020-01-13T14:33:38.611Z","1.0.0":"2020-01-13T14:33:38.790Z","modified":"2022-04-04T13:49:14.470Z"},"maintainers":[{"name":"amine-lejmi","email":"lejmi.amine@gmail.com"}],"description":"Simple scenario generator, allowing the user to graphically generate his choices","homepage":"https://github.com/aminelejmi/scenarioGraph#readme","keywords":["graph","scenario","svg","generator"],"repository":{"type":"git","url":"git+https://github.com/aminelejmi/scenarioGraph.git"},"author":{"name":"Mohamed amine LEJMI","email":"lejmi.amine@gmail.com"},"bugs":{"url":"https://github.com/aminelejmi/scenarioGraph/issues"},"license":"MIT","readme":"# Scenario Graph\n\nThis library provides a simple graph allowing the user to dynamically generate a scenario using preconfigured choices .\n\nYou can try it out and explore the options here : [Live demo](https://codesandbox.io/s/scenariograph-lrrlm)\n\n\n\n## Installation\n### With CDN\n\n##### In your main HTML file :\n\nImport the css and js files in the head tag of your html document \n```html\n\n\n```\n\n### Locally: ES5\nDownload the **scenarioGraph.main.js** and\n**scenarioGraph.styles.css** located in the **dist** directory, and import them in the head tag of your html document\n\n### Locally: ES6\nIf you want to integrate the ES6 (non mignified) version of the library : \n\n* download **scenarioGraph.js** located in the src directory\n, and import it in your js file:\n```js\nimport Scenario from './src/scenarioGraph.js';\n```\n* download **scenarioGraph.css** located in the src directory\n , and import it in your html file:\n```html\n\n```\n\n## Usage\n### Basic usage\n\n##### In your main HTML file\n- Create the HTML structure\n```html\n
\n \n
\n```\n\n##### In your main JS file\n- Import the library in your main javascript file :\n\n```js\nconst Scenario = ScenarioGraph.default;\n```\n\n- Select and put your container in a variable :\n```js\nmainContainer = document.getElementById(\"id-of-your-container\");\n```\n- Create the object containing your main data :\n\n```js\ndata = [\n {\n title: \"title\",\n description: \"description\",\n _children: [\n {\n title: \"title 2\",\n description: \"description 2\"\n },\n {\n ...\n```\n- Instantiate your graph with your data\n\n```js\n new Scenario(mainContainer, data);\n````\n### Options\n\nThe instantiation of the scenario accepts a third optional parameter, allowing you to customize your graph:\n```js\n...\noptions = {\n ...\n };\n\nnew Scenario(mainContainer, data, options);\n```\n\n| Attribute | Type | Default | Description |\n|-----------|------|---------|-------------|\nstoreChanges|Boolean|false|Stores the changes in the localStorage|\nstrokeColor|String|\"bcbdbd\"|Color of the graph lines, hex color|\nstrokeWidth|String|\"3\"|The width of the graph lines|\ncardShadowColor|String|\"0,0,0,0.15\"| The color of the cards shadow, rgba color without braces|\nselectedCardBorderColor|String|\"228B22\"|The border color of the selected cards, hex color\nselectedCardBorderWidth |String|\"2\"|The border width of the selected cards|\n\n### Output\nIf you put the instance your created into a variable, you can access some output methods:\n```js\n let scenario = new Scenario(mainContainer, data, options);\n```\n\n#### Methods\n##### generateScenario(): \nAllows you to export an array containing the selected scenario\n\n##### generateScenarioFields(fields: Array) : \nAllows you to export only the fields you need from the selected scenario\n```js\nscenario.generateScenarioFields([\"title\", \"_id\"]);\n```\n- If one of the fields doesn't exist in the data object, it will be ignored\n\n- If the fields array contains only one element, the output will \nbe a simple array containing the values of the field\n\n- If the fields array contains many elements, the output will be\nan array of objects.\n\n## Version\n* **V1.0.0** *Initial release*\n\n## Author\n* **Mohamed Amine LEJMI** - *Initial work* - [lejmi.amine@gmail.com](lejmi.amine@gmail.com)\n\n## Contributing\nTo modify the library and improve it :\n* Clone the project\n* Install npm dependencies (it uses webpack and babel to transpile and minify the files)\n* **npm run watch** to watch and build changes in css and js files\n* **npm run build** to build the dist files\n","readmeFilename":"README.md"}