├── .travis.yml
├── src
    ├── .eslintrc
    ├── test.js
    ├── styles.scss
    └── index.js
├── example
    ├── demo.gif
    ├── src
    │   ├── index.js
    │   ├── helpers.js
    │   ├── index.css
    │   ├── mocks.js
    │   └── App.js
    ├── README.md
    ├── public
    │   ├── manifest.json
    │   └── index.html
    ├── config
    │   ├── jest
    │   │   ├── cssTransform.js
    │   │   └── fileTransform.js
    │   ├── pnpTs.js
    │   ├── modules.js
    │   ├── paths.js
    │   ├── env.js
    │   ├── webpackDevServer.config.js
    │   └── webpack.config.js
    ├── scripts
    │   ├── test.js
    │   ├── start.js
    │   └── build.js
    └── package.json
├── .babelrc
├── .editorconfig
├── .gitignore
├── .eslintrc
├── .github
    └── FUNDING.yml
├── rollup.config.js
├── LICENSE
├── package.json
├── CONTRIBUTING.md
└── README.md


/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 9
4 |   - 8
5 | 


--------------------------------------------------------------------------------
/src/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "env": {
3 |     "jest": true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/example/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dsternlicht/react-dynamic-charts/HEAD/example/demo.gif


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false
 5 |     }],
 6 |     "stage-0",
 7 |     "react"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/test.js:
--------------------------------------------------------------------------------
1 | import ExampleComponent from './'
2 | 
3 | describe('ExampleComponent', () => {
4 |   it('is truthy', () => {
5 |     expect(ExampleComponent).toBeTruthy()
6 |   })
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/example/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | 
4 | import './index.css'
5 | import App from './App'
6 | 
7 | ReactDOM.render(<App />, document.getElementById('root'))
8 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | # react-dynamic-charts - example app
 2 | 
 3 | ## Installing dependencies
 4 | 
 5 | `npm i`
 6 | 
 7 | ## Running
 8 | 
 9 | `npm start`
10 | 
11 | The app will be available by default in **port 3000**.


--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |   "short_name": "react-dynamic-charts",
3 |   "name": "react-dynamic-charts",
4 |   "start_url": "./index.html",
5 |   "display": "standalone",
6 |   "theme_color": "#000000",
7 |   "background_color": "#ffffff"
8 | }
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 3 | 
 4 | # dependencies
 5 | node_modules
 6 | 
 7 | # builds
 8 | build
 9 | dist
10 | .rpt2_cache
11 | 
12 | # misc
13 | .DS_Store
14 | .env
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 | 
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 | 


--------------------------------------------------------------------------------
/example/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "extends": [
 4 |     "standard",
 5 |     "standard-react"
 6 |   ],
 7 |   "env": {
 8 |     "es6": true
 9 |   },
10 |   "plugins": [
11 |     "react"
12 |   ],
13 |   "parserOptions": {
14 |     "sourceType": "module"
15 |   },
16 |   "rules": {
17 |     "space-before-function-paren": 0,
18 |     "react/jsx-boolean-value": 0,
19 |     "semi": 0,
20 |     "jsx-quotes": 0
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 | 
 8 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 9 | 
10 |     <title>react-dynamic-charts</title>
11 |   </head>
12 | 
13 |   <body>
14 |     <noscript>
15 |       You need to enable JavaScript to run this app.
16 |     </noscript>
17 | 
18 |     <div id="root"></div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: [dsternlicht]
 4 | patreon: # Replace with a single Patreon username
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with a single custom sponsorship URL
13 | 


--------------------------------------------------------------------------------
/example/config/pnpTs.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const { resolveModuleName } = require('ts-pnp');
 4 | 
 5 | exports.resolveModuleName = (
 6 |   typescript,
 7 |   moduleName,
 8 |   containingFile,
 9 |   compilerOptions,
10 |   resolutionHost
11 | ) => {
12 |   return resolveModuleName(
13 |     moduleName,
14 |     containingFile,
15 |     compilerOptions,
16 |     resolutionHost,
17 |     typescript.resolveModuleName
18 |   );
19 | };
20 | 
21 | exports.resolveTypeReferenceDirective = (
22 |   typescript,
23 |   moduleName,
24 |   containingFile,
25 |   compilerOptions,
26 |   resolutionHost
27 | ) => {
28 |   return resolveModuleName(
29 |     moduleName,
30 |     containingFile,
31 |     compilerOptions,
32 |     resolutionHost,
33 |     typescript.resolveTypeReferenceDirective
34 |   );
35 | };
36 | 


--------------------------------------------------------------------------------
/example/src/helpers.js:
--------------------------------------------------------------------------------
 1 | function getRandomNumber(min, max) {
 2 |   return Math.floor(Math.random() * (max - min + 1) + min);
 3 | };
 4 | 
 5 | function generateData(iterations = 100, defaultValues = [], namePrefix = {}, maxJump = 100) {
 6 |   const arr = [];
 7 |   for (let i = 0; i <= iterations; i++) {
 8 |     const values = defaultValues.map((v, idx) => {
 9 |       if (i === 0 && typeof v.value === 'number') {
10 |         return v;
11 |       }
12 |       return {
13 |         ...v,
14 |         value: i === 0 ? this.getRandomNumber(1, 1000) : arr[i - 1].values[idx].value + this.getRandomNumber(0, maxJump)
15 |       }
16 |     });
17 |     arr.push({
18 |       name: `${namePrefix.prefix || ''} ${(namePrefix.initialValue || 0) + i}`,
19 |       values
20 |     });
21 |   }
22 |   return arr;
23 | };
24 | 
25 | export default {
26 |   getRandomNumber,
27 |   generateData
28 | }


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import babel from 'rollup-plugin-babel'
 2 | import commonjs from 'rollup-plugin-commonjs'
 3 | import external from 'rollup-plugin-peer-deps-external'
 4 | import postcss from 'rollup-plugin-postcss'
 5 | import resolve from 'rollup-plugin-node-resolve'
 6 | import url from 'rollup-plugin-url'
 7 | import svgr from '@svgr/rollup'
 8 | 
 9 | import pkg from './package.json'
10 | 
11 | export default {
12 |   input: 'src/index.js',
13 |   output: [
14 |     {
15 |       file: pkg.main,
16 |       format: 'cjs',
17 |       sourcemap: true
18 |     },
19 |     {
20 |       file: pkg.module,
21 |       format: 'es',
22 |       sourcemap: true
23 |     }
24 |   ],
25 |   plugins: [
26 |     external(),
27 |     postcss({
28 |       modules: false,
29 |       extract: true
30 |     }),
31 |     url(),
32 |     svgr(),
33 |     babel({
34 |       exclude: 'node_modules/**',
35 |       plugins: [ 'external-helpers' ]
36 |     }),
37 |     resolve(),
38 |     commonjs()
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Daniel Sternlicht
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
 2 | 
 3 | body {
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   font-family: 'Open Sans', sans-serif;
 7 | }
 8 | 
 9 | *:focus {
10 |   outline: 0;
11 | }
12 | 
13 | button {
14 |   font-size: 16px;
15 |   background: #333;
16 |   color: #fff;
17 |   border: none;
18 |   border-radius: 5px;
19 |   padding: 10px 20px;
20 |   cursor: pointer;
21 | }
22 | 
23 | button:hover {
24 |   background: #111;
25 | }
26 | 
27 | .main-section {
28 |   position: relative;
29 | }
30 | 
31 | .main-section > a {
32 |   position: fixed; 
33 |   z-index: 1000; 
34 |   top: 0px; 
35 |   right: 0px; 
36 |   border: 0px;
37 | }
38 | 
39 | .chart-row {
40 |   display: flex;
41 |   justify-content: flex-start;
42 |   align-items: stretch;
43 |   background: #f8f8f8;
44 | }
45 | 
46 | .chart-row .description {
47 |   min-width: 420px;
48 |   max-width: 420px;
49 |   box-sizing: border-box;
50 |   padding: 20px;
51 |   border-right: 1px solid #ccc;
52 | }
53 | 
54 | .chart-row .description h3 {
55 |   margin: 0 0 20px;
56 | }
57 | 
58 | .chart-row .description .buttons {
59 |   text-align: center;
60 |   margin-bottom: 20px;
61 | }
62 | 
63 | .chart-row .description .buttons > * {
64 |   margin: 0 8px;
65 | }


--------------------------------------------------------------------------------
/example/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const camelcase = require('camelcase');
 5 | 
 6 | // This is a custom Jest transformer turning file imports into filenames.
 7 | // http://facebook.github.io/jest/docs/en/webpack.html
 8 | 
 9 | module.exports = {
10 |   process(src, filename) {
11 |     const assetFilename = JSON.stringify(path.basename(filename));
12 | 
13 |     if (filename.match(/\.svg$/)) {
14 |       // Based on how SVGR generates a component name:
15 |       // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
16 |       const pascalCaseFileName = camelcase(path.parse(filename).name, {
17 |         pascalCase: true,
18 |       });
19 |       const componentName = `Svg${pascalCaseFileName}`;
20 |       return `const React = require('react');
21 |       module.exports = {
22 |         __esModule: true,
23 |         default: ${assetFilename},
24 |         ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
25 |           return {
26 |             $$typeof: Symbol.for('react.element'),
27 |             type: 'svg',
28 |             ref: ref,
29 |             key: null,
30 |             props: Object.assign({}, props, {
31 |               children: ${assetFilename}
32 |             })
33 |           };
34 |         }),
35 |       };`;
36 |     }
37 | 
38 |     return `module.exports = ${assetFilename};`;
39 |   },
40 | };
41 | 


--------------------------------------------------------------------------------
/example/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | 
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 | 
23 | function isInGitRepository() {
24 |   try {
25 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 |     return true;
27 |   } catch (e) {
28 |     return false;
29 |   }
30 | }
31 | 
32 | function isInMercurialRepository() {
33 |   try {
34 |     execSync('hg --cwd . root', { stdio: 'ignore' });
35 |     return true;
36 |   } catch (e) {
37 |     return false;
38 |   }
39 | }
40 | 
41 | // Watch unless on CI or explicitly running all tests
42 | if (
43 |   !process.env.CI &&
44 |   argv.indexOf('--watchAll') === -1
45 | ) {
46 |   // https://github.com/facebook/create-react-app/issues/5210
47 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
48 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
49 | }
50 | 
51 | 
52 | jest.run(argv);
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-dynamic-charts",
 3 |   "version": "1.0.5",
 4 |   "description": "",
 5 |   "author": "dsternlicht",
 6 |   "license": "MIT",
 7 |   "repository": "dsternlicht/react-dynamic-charts",
 8 |   "main": "dist/index.js",
 9 |   "module": "dist/index.es.js",
10 |   "jsnext:main": "dist/index.es.js",
11 |   "engines": {
12 |     "node": ">=8",
13 |     "npm": ">=5"
14 |   },
15 |   "scripts": {
16 |     "test": "cross-env CI=1 react-scripts test --env=jsdom",
17 |     "test:watch": "react-scripts test --env=jsdom",
18 |     "build": "rollup -c",
19 |     "start": "rollup -c -w",
20 |     "prepare": "npm run build",
21 |     "predeploy": "cd example && npm install && npm run build",
22 |     "deploy": "gh-pages -d example/build"
23 |   },
24 |   "peerDependencies": {
25 |     "prop-types": "^15.5.4",
26 |     "react": "^15.0.0 || ^16.0.0",
27 |     "react-dom": "^15.0.0 || ^16.0.0"
28 |   },
29 |   "devDependencies": {
30 |     "@svgr/rollup": "^2.4.1",
31 |     "babel-core": "^6.26.3",
32 |     "babel-plugin-external-helpers": "^6.22.0",
33 |     "babel-preset-env": "^1.7.0",
34 |     "babel-preset-react": "^6.24.1",
35 |     "babel-preset-stage-0": "^6.24.1",
36 |     "cross-env": "^5.1.4",
37 |     "eslint": "^5.0.1",
38 |     "eslint-config-standard": "^11.0.0",
39 |     "eslint-config-standard-react": "^6.0.0",
40 |     "eslint-plugin-import": "^2.13.0",
41 |     "eslint-plugin-node": "^7.0.1",
42 |     "eslint-plugin-promise": "^4.0.0",
43 |     "eslint-plugin-react": "^7.10.0",
44 |     "eslint-plugin-standard": "^3.1.0",
45 |     "gh-pages": "^1.2.0",
46 |     "node-sass": "^4.12.0",
47 |     "react": "^16.8.6",
48 |     "react-dom": "^16.8.6",
49 |     "react-scripts": "^3.0.1",
50 |     "rollup": "^0.64.1",
51 |     "rollup-plugin-babel": "^3.0.7",
52 |     "rollup-plugin-commonjs": "^9.1.3",
53 |     "rollup-plugin-node-resolve": "^3.3.0",
54 |     "rollup-plugin-peer-deps-external": "^2.2.0",
55 |     "rollup-plugin-postcss": "^1.6.2",
56 |     "rollup-plugin-url": "^1.4.0"
57 |   },
58 |   "files": [
59 |     "dist"
60 |   ]
61 | }
62 | 


--------------------------------------------------------------------------------
/example/config/modules.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | const chalk = require('react-dev-utils/chalk');
 7 | 
 8 | /**
 9 |  * Get the baseUrl of a compilerOptions object.
10 |  *
11 |  * @param {Object} options
12 |  */
13 | function getAdditionalModulePaths(options = {}) {
14 |   const baseUrl = options.baseUrl;
15 | 
16 |   // We need to explicitly check for null and undefined (and not a falsy value) because
17 |   // TypeScript treats an empty string as `.`.
18 |   if (baseUrl == null) {
19 |     // If there's no baseUrl set we respect NODE_PATH
20 |     // Note that NODE_PATH is deprecated and will be removed
21 |     // in the next major release of create-react-app.
22 | 
23 |     const nodePath = process.env.NODE_PATH || '';
24 |     return nodePath.split(path.delimiter).filter(Boolean);
25 |   }
26 | 
27 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
28 | 
29 |   // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
30 |   // the default behavior.
31 |   if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
32 |     return null;
33 |   }
34 | 
35 |   // Allow the user set the `baseUrl` to `appSrc`.
36 |   if (path.relative(paths.appSrc, baseUrlResolved) === '') {
37 |     return [paths.appSrc];
38 |   }
39 | 
40 |   // Otherwise, throw an error.
41 |   throw new Error(
42 |     chalk.red.bold(
43 |       "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
44 |         ' Create React App does not support other values at this time.'
45 |     )
46 |   );
47 | }
48 | 
49 | function getModules() {
50 |   // Check if TypeScript is setup
51 |   const hasTsConfig = fs.existsSync(paths.appTsConfig);
52 |   const hasJsConfig = fs.existsSync(paths.appJsConfig);
53 | 
54 |   if (hasTsConfig && hasJsConfig) {
55 |     throw new Error(
56 |       'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
57 |     );
58 |   }
59 | 
60 |   let config;
61 | 
62 |   // If there's a tsconfig.json we assume it's a
63 |   // TypeScript project and set up the config
64 |   // based on tsconfig.json
65 |   if (hasTsConfig) {
66 |     config = require(paths.appTsConfig);
67 |     // Otherwise we'll check if there is jsconfig.json
68 |     // for non TS projects.
69 |   } else if (hasJsConfig) {
70 |     config = require(paths.appJsConfig);
71 |   }
72 | 
73 |   config = config || {};
74 |   const options = config.compilerOptions || {};
75 | 
76 |   const additionalModulePaths = getAdditionalModulePaths(options);
77 | 
78 |   return {
79 |     additionalModulePaths: additionalModulePaths,
80 |     hasTsConfig,
81 |   };
82 | }
83 | 
84 | module.exports = getModules();
85 | 


--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
  1 | .live-chart {
  2 |   width: 100%;
  3 |   padding: 20px;
  4 |   box-sizing: border-box;
  5 |   position: relative;
  6 |   text-align: center;
  7 | 
  8 |   .start-button {
  9 |     margin: 0 auto;
 10 |   }
 11 |  
 12 |   h1 {
 13 |     font-weight: 700;
 14 |     font-size: 60px;
 15 |     text-transform: uppercase;
 16 |     text-align: center;
 17 |     padding: 20px 10px;
 18 |     margin: 0;
 19 |   }
 20 | 
 21 |   .chart {
 22 |     position: relative;
 23 |     margin: 20px auto;
 24 |   }
 25 | 
 26 |   .baseline {
 27 |     position: absolute;
 28 |     top: 0;
 29 |     left: 50%;
 30 |     width: 2px;
 31 |     height: 100%;
 32 |     z-index: 2;
 33 |     background: #555;
 34 | 
 35 |     span {
 36 |       position: absolute;
 37 |       left: 0;
 38 |       top: -25px;
 39 |       transform: translateX(-50%);
 40 |       font-style: italic;
 41 |     }
 42 |   }
 43 | 
 44 |   .chart-bars {
 45 |     position: relative;
 46 |     width: 100%;
 47 | 
 48 |     &.with-baseline {
 49 |       .bar-wrapper {
 50 |         left: 0;
 51 |         padding-left: 50%;
 52 | 
 53 |         label {
 54 |           right: 50%;
 55 |           width: auto;
 56 |         }
 57 | 
 58 |         &.behind-baseline {
 59 |           left: auto;
 60 |           right: 0;
 61 |           padding-left: 0;
 62 |           padding-right: 50%;
 63 |           flex-direction: row-reverse;
 64 | 
 65 |           label {
 66 |             right: auto;
 67 |             left: 50%;
 68 |             text-align: left;
 69 |             flex-direction: row-reverse;
 70 | 
 71 |             img {
 72 |               margin: 0 10px 0 0;
 73 |             }
 74 |           }
 75 | 
 76 |           .value {
 77 |             right: 100%;
 78 |             left: auto;
 79 |             margin-left: 0;
 80 |             margin-right: 10px;
 81 |           }
 82 |         }
 83 |       }
 84 |     } 
 85 |   }
 86 |   
 87 |   .bar-wrapper {
 88 |     display: flex;
 89 |     flex-wrap: wrap;
 90 |     align-items: center;
 91 |     position: absolute;
 92 |     top: 0;
 93 |     left: 0;
 94 |     transform: translateY(0);
 95 |     transition: transform 0.5s linear;
 96 |     padding-left: 200px;
 97 |     box-sizing: border-box;
 98 |     width: 100%;
 99 |     justify-content: flex-start;
100 | 
101 |     label {
102 |       position: absolute;
103 |       height: 100%;
104 |       width: 200px;
105 |       left: 0;
106 |       padding: 0 10px;
107 |       box-sizing: border-box;
108 |       text-align: right;
109 |       top: 50%;
110 |       transform: translateY(-50%);
111 |       font-size: 16px;
112 |       font-weight: 700;
113 |       display: flex;
114 |       justify-content: flex-end;
115 |       align-items: center;
116 | 
117 |       img {
118 |         max-height: 100%;
119 |         max-width: 100%;
120 |         margin-left: 10px;
121 |       }
122 |     }
123 | 
124 |     .value {
125 |       font-size: 16px;
126 |       font-weight: 700;
127 |       margin-left: 10px;
128 |     }
129 | 
130 |     .bar {
131 |       width: 0%;
132 |       transition: width 0.5s linear;
133 |     }
134 |   }
135 | }


--------------------------------------------------------------------------------
/example/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebook/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(inputPath, needsSlash) {
15 |   const hasSlash = inputPath.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return inputPath.substr(0, inputPath.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${inputPath}/`;
20 |   } else {
21 |     return inputPath;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | const moduleFileExtensions = [
42 |   'web.mjs',
43 |   'mjs',
44 |   'web.js',
45 |   'js',
46 |   'web.ts',
47 |   'ts',
48 |   'web.tsx',
49 |   'tsx',
50 |   'json',
51 |   'web.jsx',
52 |   'jsx',
53 | ];
54 | 
55 | // Resolve file paths in the same order as webpack
56 | const resolveModule = (resolveFn, filePath) => {
57 |   const extension = moduleFileExtensions.find(extension =>
58 |     fs.existsSync(resolveFn(`${filePath}.${extension}`))
59 |   );
60 | 
61 |   if (extension) {
62 |     return resolveFn(`${filePath}.${extension}`);
63 |   }
64 | 
65 |   return resolveFn(`${filePath}.js`);
66 | };
67 | 
68 | // config after eject: we're in ./config/
69 | module.exports = {
70 |   dotenv: resolveApp('.env'),
71 |   appPath: resolveApp('.'),
72 |   appBuild: resolveApp('build'),
73 |   appPublic: resolveApp('public'),
74 |   appHtml: resolveApp('public/index.html'),
75 |   appIndexJs: resolveModule(resolveApp, 'src/index'),
76 |   appPackageJson: resolveApp('package.json'),
77 |   appSrc: resolveApp('src'),
78 |   appTsConfig: resolveApp('tsconfig.json'),
79 |   appJsConfig: resolveApp('jsconfig.json'),
80 |   yarnLockFile: resolveApp('yarn.lock'),
81 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
82 |   proxySetup: resolveApp('src/setupProxy.js'),
83 |   appNodeModules: resolveApp('node_modules'),
84 |   publicUrl: getPublicUrl(resolveApp('package.json')),
85 |   servedPath: getServedPath(resolveApp('package.json')),
86 | };
87 | 
88 | 
89 | 
90 | module.exports.moduleFileExtensions = moduleFileExtensions;
91 | 


--------------------------------------------------------------------------------
/example/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |       }
81 |     );
82 |   // Stringify all values so we can feed into Webpack DefinePlugin
83 |   const stringified = {
84 |     'process.env': Object.keys(raw).reduce((env, key) => {
85 |       env[key] = JSON.stringify(raw[key]);
86 |       return env;
87 |     }, {}),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | When contributing to this repository, please first discuss the change you wish to make via issue,
 4 | email, or any other method with the owners of this repository before making a change. 
 5 | 
 6 | Please note we have a code of conduct, please follow it in all your interactions with the project.
 7 | 
 8 | ## Pull Request Process
 9 | 
10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 
11 |    build.
12 | 2. Update the README.md with details of changes to the interface, this includes new environment 
13 |    variables, exposed ports, useful file locations and container parameters.
14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this
15 |    Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 
17 |    do not have permission to do that, you may request the second reviewer to merge it for you.
18 | 
19 | ## Code of Conduct
20 | 
21 | ### Our Pledge
22 | 
23 | In the interest of fostering an open and welcoming environment, we as
24 | contributors and maintainers pledge to making participation in our project and
25 | our community a harassment-free experience for everyone, regardless of age, body
26 | size, disability, ethnicity, gender identity and expression, level of experience,
27 | nationality, personal appearance, race, religion, or sexual identity and
28 | orientation.
29 | 
30 | ### Our Standards
31 | 
32 | Examples of behavior that contributes to creating a positive environment
33 | include:
34 | 
35 | * Using welcoming and inclusive language
36 | * Being respectful of differing viewpoints and experiences
37 | * Gracefully accepting constructive criticism
38 | * Focusing on what is best for the community
39 | * Showing empathy towards other community members
40 | 
41 | Examples of unacceptable behavior by participants include:
42 | 
43 | * The use of sexualized language or imagery and unwelcome sexual attention or
44 | advances
45 | * Trolling, insulting/derogatory comments, and personal or political attacks
46 | * Public or private harassment
47 | * Publishing others' private information, such as a physical or electronic
48 |   address, without explicit permission
49 | * Other conduct which could reasonably be considered inappropriate in a
50 |   professional setting
51 | 
52 | ### Our Responsibilities
53 | 
54 | Project maintainers are responsible for clarifying the standards of acceptable
55 | behavior and are expected to take appropriate and fair corrective action in
56 | response to any instances of unacceptable behavior.
57 | 
58 | Project maintainers have the right and responsibility to remove, edit, or
59 | reject comments, commits, code, wiki edits, issues, and other contributions
60 | that are not aligned to this Code of Conduct, or to ban temporarily or
61 | permanently any contributor for other behaviors that they deem inappropriate,
62 | threatening, offensive, or harmful.
63 | 
64 | ### Scope
65 | 
66 | This Code of Conduct applies both within project spaces and in public spaces
67 | when an individual is representing the project or its community. Examples of
68 | representing a project or community include using an official project e-mail
69 | address, posting via an official social media account, or acting as an appointed
70 | representative at an online or offline event. Representation of a project may be
71 | further defined and clarified by project maintainers.
72 | 
73 | ### Enforcement
74 | 
75 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
76 | reported by contacting the project team at [daniel.sternlicht@gmail.com]. All
77 | complaints will be reviewed and investigated and will result in a response that
78 | is deemed necessary and appropriate to the circumstances. The project team is
79 | obligated to maintain confidentiality with regard to the reporter of an incident.
80 | Further details of specific enforcement policies may be posted separately.
81 | 
82 | Project maintainers who do not follow or enforce the Code of Conduct in good
83 | faith may face temporary or permanent repercussions as determined by other
84 | members of the project's leadership.
85 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-dynamic-charts-example",
  3 |   "homepage": "https://dsternlicht.github.io/react-dynamic-charts",
  4 |   "version": "0.0.0",
  5 |   "license": "MIT",
  6 |   "private": true,
  7 |   "dependencies": {
  8 |     "@babel/core": "7.4.3",
  9 |     "@svgr/webpack": "4.1.0",
 10 |     "@typescript-eslint/eslint-plugin": "1.6.0",
 11 |     "@typescript-eslint/parser": "1.6.0",
 12 |     "babel-eslint": "10.0.1",
 13 |     "babel-jest": "^24.8.0",
 14 |     "babel-loader": "8.0.5",
 15 |     "babel-plugin-named-asset-import": "^0.3.2",
 16 |     "babel-preset-react-app": "^9.0.0",
 17 |     "camelcase": "^5.2.0",
 18 |     "case-sensitive-paths-webpack-plugin": "2.2.0",
 19 |     "css-loader": "2.1.1",
 20 |     "dotenv": "6.2.0",
 21 |     "dotenv-expand": "4.2.0",
 22 |     "eslint": "^5.16.0",
 23 |     "eslint-config-react-app": "^4.0.1",
 24 |     "eslint-loader": "2.1.2",
 25 |     "eslint-plugin-flowtype": "2.50.1",
 26 |     "eslint-plugin-import": "2.16.0",
 27 |     "eslint-plugin-jsx-a11y": "6.2.1",
 28 |     "eslint-plugin-react": "7.12.4",
 29 |     "eslint-plugin-react-hooks": "^1.5.0",
 30 |     "file-loader": "3.0.1",
 31 |     "fs-extra": "7.0.1",
 32 |     "html-webpack-plugin": "4.0.0-beta.5",
 33 |     "identity-obj-proxy": "3.0.0",
 34 |     "is-wsl": "^1.1.0",
 35 |     "jest": "24.7.1",
 36 |     "jest-environment-jsdom-fourteen": "0.1.0",
 37 |     "jest-resolve": "24.7.1",
 38 |     "jest-watch-typeahead": "0.3.0",
 39 |     "mini-css-extract-plugin": "0.5.0",
 40 |     "optimize-css-assets-webpack-plugin": "5.0.1",
 41 |     "pnp-webpack-plugin": "1.2.1",
 42 |     "postcss-flexbugs-fixes": "4.1.0",
 43 |     "postcss-loader": "3.0.0",
 44 |     "postcss-normalize": "7.0.1",
 45 |     "postcss-preset-env": "6.6.0",
 46 |     "postcss-safe-parser": "4.0.1",
 47 |     "prop-types": "^15.6.2",
 48 |     "react": "file:../node_modules/react",
 49 |     "react-app-polyfill": "^1.0.1",
 50 |     "react-dev-utils": "^9.0.1",
 51 |     "react-dom": "^16.8.6",
 52 |     "react-dynamic-charts": "file:..",
 53 |     "react-github-btn": "^1.0.5",
 54 |     "react-syntax-highlighter": "^10.3.0",
 55 |     "resolve": "1.10.0",
 56 |     "sass-loader": "7.1.0",
 57 |     "semver": "6.0.0",
 58 |     "style-loader": "0.23.1",
 59 |     "terser-webpack-plugin": "1.2.3",
 60 |     "ts-pnp": "1.1.2",
 61 |     "url-loader": "1.1.2",
 62 |     "webpack": "4.29.6",
 63 |     "webpack-dev-server": "3.2.1",
 64 |     "webpack-manifest-plugin": "2.0.4",
 65 |     "workbox-webpack-plugin": "4.2.0"
 66 |   },
 67 |   "scripts": {
 68 |     "start": "node scripts/start.js",
 69 |     "build": "node scripts/build.js",
 70 |     "test": "node scripts/test.js --env=jsdom"
 71 |   },
 72 |   "browserslist": {
 73 |     "production": [
 74 |       ">0.2%",
 75 |       "not dead",
 76 |       "not op_mini all"
 77 |     ],
 78 |     "development": [
 79 |       "last 1 chrome version",
 80 |       "last 1 firefox version",
 81 |       "last 1 safari version"
 82 |     ]
 83 |   },
 84 |   "jest": {
 85 |     "collectCoverageFrom": [
 86 |       "src/**/*.{js,jsx,ts,tsx}",
 87 |       "!src/**/*.d.ts"
 88 |     ],
 89 |     "setupFiles": [
 90 |       "react-app-polyfill/jsdom"
 91 |     ],
 92 |     "setupFilesAfterEnv": [],
 93 |     "testMatch": [
 94 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
 95 |       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
 96 |     ],
 97 |     "testEnvironment": "jest-environment-jsdom-fourteen",
 98 |     "transform": {
 99 |       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
100 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
101 |       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
102 |     },
103 |     "transformIgnorePatterns": [
104 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
105 |       "^.+\\.module\\.(css|sass|scss)$"
106 |     ],
107 |     "modulePaths": [],
108 |     "moduleNameMapper": {
109 |       "^react-native$": "react-native-web",
110 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
111 |     },
112 |     "moduleFileExtensions": [
113 |       "web.js",
114 |       "js",
115 |       "web.ts",
116 |       "ts",
117 |       "web.tsx",
118 |       "tsx",
119 |       "json",
120 |       "web.jsx",
121 |       "jsx",
122 |       "node"
123 |     ],
124 |     "watchPlugins": [
125 |       "jest-watch-typeahead/filename",
126 |       "jest-watch-typeahead/testname"
127 |     ]
128 |   },
129 |   "babel": {
130 |     "presets": [
131 |       "react-app"
132 |     ]
133 |   },
134 |   "eslintConfig": {
135 |     "extends": "react-app"
136 |   }
137 | }
138 | 


--------------------------------------------------------------------------------
/example/src/mocks.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | 
  3 | import helpers from './helpers';
  4 | 
  5 | const defaultChart = [
  6 |   {
  7 |     id: 1,
  8 |     label: 'Google',
  9 |     value: helpers.getRandomNumber(0, 50)
 10 |   },
 11 |   {
 12 |     id: 2,
 13 |     label: 'Facebook',
 14 |     value: helpers.getRandomNumber(0, 50)
 15 |   },
 16 |   {
 17 |     id: 3,
 18 |     label: 'Outbrain',
 19 |     value: helpers.getRandomNumber(0, 50)
 20 |   },
 21 |   {
 22 |     id: 4,
 23 |     label: 'Apple',
 24 |     value: helpers.getRandomNumber(0, 50)
 25 |   },
 26 |   {
 27 |     id: 5,
 28 |     label: 'Amazon',
 29 |     value: helpers.getRandomNumber(0, 50)
 30 |   },
 31 | ];
 32 | 
 33 | const baselineWithNegatives = [
 34 |   {
 35 |     id: 1,
 36 |     label: 'Google',
 37 |     value: - (helpers.getRandomNumber(100, 1000))
 38 |   },
 39 |   {
 40 |     id: 2,
 41 |     label: 'Facebook',
 42 |     value: - (helpers.getRandomNumber(100, 1000))
 43 |   },
 44 |   {
 45 |     id: 3,
 46 |     label: 'Outbrain',
 47 |     value: helpers.getRandomNumber(1, 1000)
 48 |   },
 49 |   {
 50 |     id: 4,
 51 |     label: 'Apple',
 52 |     value: - (helpers.getRandomNumber(1, 1000))
 53 |   },
 54 |   {
 55 |     id: 5,
 56 |     label: 'Amazon',
 57 |     value: helpers.getRandomNumber(1, 1000)
 58 |   },
 59 | ];
 60 | 
 61 | const customLabels = [
 62 |   {
 63 |     id: 1,
 64 |     color: '#ea4335',
 65 |     label: (
 66 |       <React.Fragment>
 67 |         <img src={'https://cdn3.iconfinder.com/data/icons/google-suits-1/32/1_google_search_logo_engine_service_suits-512.png'} alt="Google" />
 68 |       </React.Fragment>
 69 |     ),
 70 |     value: helpers.getRandomNumber(1, 1000)
 71 |   },
 72 |   {
 73 |     id: 2,
 74 |     color: '#3b5998',
 75 |     label: (
 76 |       <React.Fragment>
 77 |         <img src={'https://image.flaticon.com/icons/png/512/124/124010.png'} alt="Facebook" />
 78 |       </React.Fragment>
 79 |     ),
 80 |     value: helpers.getRandomNumber(1, 1000)
 81 |   },
 82 |   {
 83 |     id: 3,
 84 |     color: '#f18421',
 85 |     label: (
 86 |       <React.Fragment>
 87 |         <img src={'https://www.outbrain.com/favicon/favicon-192x192.png'} alt="Outbrain" />
 88 |       </React.Fragment>
 89 |     ),
 90 |     value: helpers.getRandomNumber(1, 1000)
 91 |   },
 92 |   {
 93 |     id: 4,
 94 |     color: '#7cbb00',
 95 |     label: (
 96 |       <React.Fragment>
 97 |         <img src={'https://diylogodesigns.com/wp-content/uploads/2016/04/Microsoft-Logo-icon-png-Transparent-Background-768x768.png'} alt="Microsoft" />
 98 |       </React.Fragment>
 99 |     ),
100 |     value: helpers.getRandomNumber(1, 1000)
101 |   },
102 |   {
103 |     id: 5,
104 |     color: '#146eb4',
105 |     label: (
106 |       <React.Fragment>
107 |         <img src={'https://www.freeiconspng.com/uploads/amazon-icon-6.png'} alt="Amazon" />
108 |       </React.Fragment>
109 |     ),
110 |     value: helpers.getRandomNumber(1, 1000)
111 |   },
112 | ];
113 | 
114 | const runByCommand = [
115 |   {
116 |     id: 1,
117 |     color: '#000000',
118 |     label: 'This',
119 |     value: helpers.getRandomNumber(1, 1000)
120 |   },
121 |   {
122 |     id: 2,
123 |     color: '#333333',
124 |     label: 'is',
125 |     value: helpers.getRandomNumber(1, 1000)
126 |   },
127 |   {
128 |     id: 3,
129 |     color: '#666666',
130 |     label: 'So',
131 |     value: helpers.getRandomNumber(1, 1000)
132 |   },
133 |   {
134 |     id: 4,
135 |     color: '#999999',
136 |     label: 'Freaking',
137 |     value: helpers.getRandomNumber(1, 1000)
138 |   },
139 |   {
140 |     id: 5,
141 |     color: '#cccccc',
142 |     label: 'Awesome!!!',
143 |     value: helpers.getRandomNumber(1, 1000)
144 |   },
145 | ];
146 | 
147 | const stylesGoCrazy = [
148 |   {
149 |     id: 1,
150 |     color: ['#59C173', '#a17fe0', '#5D26C1'],
151 |     label: '😎',
152 |     value: helpers.getRandomNumber(1, 100)
153 |   },
154 |   {
155 |     id: 2,
156 |     color: ['#DA4453', '#89216B'],
157 |     label: '🤔',
158 |     value: helpers.getRandomNumber(1, 100)
159 |   },
160 |   {
161 |     id: 3,
162 |     color: ['#636363', '#a2ab58'],
163 |     label: '🤪',
164 |     value: helpers.getRandomNumber(1, 100)
165 |   },
166 |   {
167 |     id: 4,
168 |     color: ['#a8c0ff', '#3f2b96'],
169 |     label: '😁',
170 |     value: helpers.getRandomNumber(1, 100)
171 |   },
172 |   {
173 |     id: 5,
174 |     color: ['#40E0D0', '#FF8C00', '#FF0080'],
175 |     label: '😍',
176 |     value: helpers.getRandomNumber(1, 100)
177 |   },
178 | ];
179 | 
180 | export default {
181 |   defaultChart,
182 |   baselineWithNegatives,
183 |   customLabels,
184 |   runByCommand,
185 |   stylesGoCrazy
186 | }


--------------------------------------------------------------------------------
/example/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const fs = require('fs');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const webpack = require('webpack');
 21 | const WebpackDevServer = require('webpack-dev-server');
 22 | const clearConsole = require('react-dev-utils/clearConsole');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const {
 25 |   choosePort,
 26 |   createCompiler,
 27 |   prepareProxy,
 28 |   prepareUrls,
 29 | } = require('react-dev-utils/WebpackDevServerUtils');
 30 | const openBrowser = require('react-dev-utils/openBrowser');
 31 | const paths = require('../config/paths');
 32 | const configFactory = require('../config/webpack.config');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | 
 35 | const useYarn = fs.existsSync(paths.yarnLockFile);
 36 | const isInteractive = process.stdout.isTTY;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // Tools like Cloud9 rely on this.
 44 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 45 | const HOST = process.env.HOST || '0.0.0.0';
 46 | 
 47 | if (process.env.HOST) {
 48 |   console.log(
 49 |     chalk.cyan(
 50 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 51 |         chalk.bold(process.env.HOST)
 52 |       )}`
 53 |     )
 54 |   );
 55 |   console.log(
 56 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 57 |   );
 58 |   console.log(
 59 |     `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
 60 |   );
 61 |   console.log();
 62 | }
 63 | 
 64 | // We require that you explicitly set browsers and do not fall back to
 65 | // browserslist defaults.
 66 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 67 | checkBrowsers(paths.appPath, isInteractive)
 68 |   .then(() => {
 69 |     // We attempt to use the default port but if it is busy, we offer the user to
 70 |     // run on a different port. `choosePort()` Promise resolves to the next free port.
 71 |     return choosePort(HOST, DEFAULT_PORT);
 72 |   })
 73 |   .then(port => {
 74 |     if (port == null) {
 75 |       // We have not found a port.
 76 |       return;
 77 |     }
 78 |     const config = configFactory('development');
 79 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 80 |     const appName = require(paths.appPackageJson).name;
 81 |     const useTypeScript = fs.existsSync(paths.appTsConfig);
 82 |     const urls = prepareUrls(protocol, HOST, port);
 83 |     const devSocket = {
 84 |       warnings: warnings =>
 85 |         devServer.sockWrite(devServer.sockets, 'warnings', warnings),
 86 |       errors: errors =>
 87 |         devServer.sockWrite(devServer.sockets, 'errors', errors),
 88 |     };
 89 |     // Create a webpack compiler that is configured with custom messages.
 90 |     const compiler = createCompiler({
 91 |       appName,
 92 |       config,
 93 |       devSocket,
 94 |       urls,
 95 |       useYarn,
 96 |       useTypeScript,
 97 |       webpack,
 98 |     });
 99 |     // Load proxy config
100 |     const proxySetting = require(paths.appPackageJson).proxy;
101 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
102 |     // Serve webpack assets generated by the compiler over a web server.
103 |     const serverConfig = createDevServerConfig(
104 |       proxyConfig,
105 |       urls.lanUrlForConfig
106 |     );
107 |     const devServer = new WebpackDevServer(compiler, serverConfig);
108 |     // Launch WebpackDevServer.
109 |     devServer.listen(port, HOST, err => {
110 |       if (err) {
111 |         return console.log(err);
112 |       }
113 |       if (isInteractive) {
114 |         clearConsole();
115 |       }
116 | 
117 |       // We used to support resolving modules according to `NODE_PATH`.
118 |       // This now has been deprecated in favor of jsconfig/tsconfig.json
119 |       // This lets you use absolute paths in imports inside large monorepos:
120 |       if (process.env.NODE_PATH) {
121 |         console.log(
122 |           chalk.yellow(
123 |             'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
124 |           )
125 |         );
126 |         console.log();
127 |       }
128 | 
129 |       console.log(chalk.cyan('Starting the development server...\n'));
130 |       openBrowser(urls.localUrlForBrowser);
131 |     });
132 | 
133 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
134 |       process.on(sig, function() {
135 |         devServer.close();
136 |         process.exit();
137 |       });
138 |     });
139 |   })
140 |   .catch(err => {
141 |     if (err && err.message) {
142 |       console.log(err.message);
143 |     }
144 |     process.exit(1);
145 |   });
146 | 


--------------------------------------------------------------------------------
/example/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
  5 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  6 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
  7 | const paths = require('./paths');
  8 | const fs = require('fs');
  9 | 
 10 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 11 | const host = process.env.HOST || '0.0.0.0';
 12 | 
 13 | module.exports = function(proxy, allowedHost) {
 14 |   return {
 15 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 16 |     // websites from potentially accessing local content through DNS rebinding:
 17 |     // https://github.com/webpack/webpack-dev-server/issues/887
 18 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 19 |     // However, it made several existing use cases such as development in cloud
 20 |     // environment or subdomains in development significantly more complicated:
 21 |     // https://github.com/facebook/create-react-app/issues/2271
 22 |     // https://github.com/facebook/create-react-app/issues/2233
 23 |     // While we're investigating better solutions, for now we will take a
 24 |     // compromise. Since our WDS configuration only serves files in the `public`
 25 |     // folder we won't consider accessing them a vulnerability. However, if you
 26 |     // use the `proxy` feature, it gets more dangerous because it can expose
 27 |     // remote code execution vulnerabilities in backends like Django and Rails.
 28 |     // So we will disable the host check normally, but enable it if you have
 29 |     // specified the `proxy` setting. Finally, we let you override it if you
 30 |     // really know what you're doing with a special environment variable.
 31 |     disableHostCheck:
 32 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 33 |     // Enable gzip compression of generated files.
 34 |     compress: true,
 35 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 36 |     // It will still show compile warnings and errors with this setting.
 37 |     clientLogLevel: 'none',
 38 |     // By default WebpackDevServer serves physical files from current directory
 39 |     // in addition to all the virtual build products that it serves from memory.
 40 |     // This is confusing because those files won’t automatically be available in
 41 |     // production build folder unless we copy them. However, copying the whole
 42 |     // project directory is dangerous because we may expose sensitive files.
 43 |     // Instead, we establish a convention that only files in `public` directory
 44 |     // get served. Our build script will copy `public` into the `build` folder.
 45 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 46 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 47 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 48 |     // Note that we only recommend to use `public` folder as an escape hatch
 49 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 50 |     // for some reason broken when imported through Webpack. If you just want to
 51 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 52 |     contentBase: paths.appPublic,
 53 |     // By default files from `contentBase` will not trigger a page reload.
 54 |     watchContentBase: true,
 55 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 56 |     // for the WebpackDevServer client so it can learn when the files were
 57 |     // updated. The WebpackDevServer client is included as an entry point
 58 |     // in the Webpack development configuration. Note that only changes
 59 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 60 |     hot: true,
 61 |     // It is important to tell WebpackDevServer to use the same "root" path
 62 |     // as we specified in the config. In development, we always serve from /.
 63 |     publicPath: '/',
 64 |     // WebpackDevServer is noisy by default so we emit custom message instead
 65 |     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
 66 |     quiet: true,
 67 |     // Reportedly, this avoids CPU overload on some systems.
 68 |     // https://github.com/facebook/create-react-app/issues/293
 69 |     // src/node_modules is not ignored to support absolute imports
 70 |     // https://github.com/facebook/create-react-app/issues/1065
 71 |     watchOptions: {
 72 |       ignored: ignoredFiles(paths.appSrc),
 73 |     },
 74 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 75 |     https: protocol === 'https',
 76 |     host,
 77 |     overlay: false,
 78 |     historyApiFallback: {
 79 |       // Paths with dots should still use the history fallback.
 80 |       // See https://github.com/facebook/create-react-app/issues/387.
 81 |       disableDotRule: true,
 82 |     },
 83 |     public: allowedHost,
 84 |     proxy,
 85 |     before(app, server) {
 86 |       if (fs.existsSync(paths.proxySetup)) {
 87 |         // This registers user provided middleware for proxy reasons
 88 |         require(paths.proxySetup)(app);
 89 |       }
 90 | 
 91 |       // This lets us fetch source contents from webpack for the error overlay
 92 |       app.use(evalSourceMapMiddleware(server));
 93 |       // This lets us open files from the runtime error overlay.
 94 |       app.use(errorOverlayMiddleware());
 95 | 
 96 |       // This service worker file is effectively a 'no-op' that will reset any
 97 |       // previous service worker registered for the same host:port combination.
 98 |       // We do this in development to avoid hitting the production cache if
 99 |       // it used the same host and port.
100 |       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
101 |       app.use(noopServiceWorkerMiddleware());
102 |     },
103 |   };
104 | };
105 | 


--------------------------------------------------------------------------------
/example/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const path = require('path');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const configFactory = require('../config/webpack.config');
 23 | const paths = require('../config/paths');
 24 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 25 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 26 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 27 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 28 | const printBuildError = require('react-dev-utils/printBuildError');
 29 | 
 30 | const measureFileSizesBeforeBuild =
 31 |   FileSizeReporter.measureFileSizesBeforeBuild;
 32 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 33 | const useYarn = fs.existsSync(paths.yarnLockFile);
 34 | 
 35 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 36 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 37 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 38 | 
 39 | const isInteractive = process.stdout.isTTY;
 40 | 
 41 | // Warn and crash if required files are missing
 42 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 43 |   process.exit(1);
 44 | }
 45 | 
 46 | // Generate configuration
 47 | const config = configFactory('production');
 48 | 
 49 | // We require that you explicitly set browsers and do not fall back to
 50 | // browserslist defaults.
 51 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 52 | checkBrowsers(paths.appPath, isInteractive)
 53 |   .then(() => {
 54 |     // First, read the current file sizes in build directory.
 55 |     // This lets us display how much they changed later.
 56 |     return measureFileSizesBeforeBuild(paths.appBuild);
 57 |   })
 58 |   .then(previousFileSizes => {
 59 |     // Remove all content but keep the directory so that
 60 |     // if you're in it, you don't end up in Trash
 61 |     fs.emptyDirSync(paths.appBuild);
 62 |     // Merge with the public folder
 63 |     copyPublicFolder();
 64 |     // Start the webpack build
 65 |     return build(previousFileSizes);
 66 |   })
 67 |   .then(
 68 |     ({ stats, previousFileSizes, warnings }) => {
 69 |       if (warnings.length) {
 70 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 71 |         console.log(warnings.join('\n\n'));
 72 |         console.log(
 73 |           '\nSearch for the ' +
 74 |             chalk.underline(chalk.yellow('keywords')) +
 75 |             ' to learn more about each warning.'
 76 |         );
 77 |         console.log(
 78 |           'To ignore, add ' +
 79 |             chalk.cyan('// eslint-disable-next-line') +
 80 |             ' to the line before.\n'
 81 |         );
 82 |       } else {
 83 |         console.log(chalk.green('Compiled successfully.\n'));
 84 |       }
 85 | 
 86 |       console.log('File sizes after gzip:\n');
 87 |       printFileSizesAfterBuild(
 88 |         stats,
 89 |         previousFileSizes,
 90 |         paths.appBuild,
 91 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 92 |         WARN_AFTER_CHUNK_GZIP_SIZE
 93 |       );
 94 |       console.log();
 95 | 
 96 |       const appPackage = require(paths.appPackageJson);
 97 |       const publicUrl = paths.publicUrl;
 98 |       const publicPath = config.output.publicPath;
 99 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
100 |       printHostingInstructions(
101 |         appPackage,
102 |         publicUrl,
103 |         publicPath,
104 |         buildFolder,
105 |         useYarn
106 |       );
107 |     },
108 |     err => {
109 |       console.log(chalk.red('Failed to compile.\n'));
110 |       printBuildError(err);
111 |       process.exit(1);
112 |     }
113 |   )
114 |   .catch(err => {
115 |     if (err && err.message) {
116 |       console.log(err.message);
117 |     }
118 |     process.exit(1);
119 |   });
120 | 
121 | // Create the production build and print the deployment instructions.
122 | function build(previousFileSizes) {
123 |   // We used to support resolving modules according to `NODE_PATH`.
124 |   // This now has been deprecated in favor of jsconfig/tsconfig.json
125 |   // This lets you use absolute paths in imports inside large monorepos:
126 |   if (process.env.NODE_PATH) {
127 |     console.log(
128 |       chalk.yellow(
129 |         'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
130 |       )
131 |     );
132 |     console.log();
133 |   }
134 | 
135 |   console.log('Creating an optimized production build...');
136 | 
137 |   const compiler = webpack(config);
138 |   return new Promise((resolve, reject) => {
139 |     compiler.run((err, stats) => {
140 |       let messages;
141 |       if (err) {
142 |         if (!err.message) {
143 |           return reject(err);
144 |         }
145 |         messages = formatWebpackMessages({
146 |           errors: [err.message],
147 |           warnings: [],
148 |         });
149 |       } else {
150 |         messages = formatWebpackMessages(
151 |           stats.toJson({ all: false, warnings: true, errors: true })
152 |         );
153 |       }
154 |       if (messages.errors.length) {
155 |         // Only keep the first error. Others are often indicative
156 |         // of the same problem, but confuse the reader with noise.
157 |         if (messages.errors.length > 1) {
158 |           messages.errors.length = 1;
159 |         }
160 |         return reject(new Error(messages.errors.join('\n\n')));
161 |       }
162 |       if (
163 |         process.env.CI &&
164 |         (typeof process.env.CI !== 'string' ||
165 |           process.env.CI.toLowerCase() !== 'false') &&
166 |         messages.warnings.length
167 |       ) {
168 |         console.log(
169 |           chalk.yellow(
170 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
171 |               'Most CI servers set it automatically.\n'
172 |           )
173 |         );
174 |         return reject(new Error(messages.warnings.join('\n\n')));
175 |       }
176 | 
177 |       return resolve({
178 |         stats,
179 |         previousFileSizes,
180 |         warnings: messages.warnings,
181 |       });
182 |     });
183 |   });
184 | }
185 | 
186 | function copyPublicFolder() {
187 |   fs.copySync(paths.appPublic, paths.appBuild, {
188 |     dereference: true,
189 |     filter: file => file !== paths.appHtml,
190 |   });
191 | }
192 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-dynamic-charts ([demo](https://dsternlicht.github.io/react-dynamic-charts/))
  2 | 
  3 | > A React library for creating animated charts visualizations based on dynamic data.
  4 | 
  5 | [![NPM](https://img.shields.io/npm/v/react-dynamic-charts.svg)](https://www.npmjs.com/package/react-dynamic-charts) [![Build Status](https://travis-ci.com/dsternlicht/react-dynamic-charts.svg?branch=master)](https://travis-ci.com/dsternlicht/react-dynamic-charts) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
  6 | 
  7 | [![Demo](https://raw.githubusercontent.com/dsternlicht/react-dynamic-charts/master/example/demo.gif)](https://dsternlicht.github.io/react-dynamic-charts/)
  8 | 
  9 | ## Install
 10 | 
 11 | ```bash
 12 | npm install --save react-dynamic-charts
 13 | ```
 14 | 
 15 | ## Usage
 16 | 
 17 | Check out the [Demo](https://dsternlicht.github.io/react-dynamic-charts/) to see it in action.
 18 | 
 19 | ```jsx
 20 | import React, { Component } from 'react';
 21 | 
 22 | import { LiveBarChart } from 'react-dynamic-charts';
 23 | import 'react-dynamic-charts/dist/index.css'; // Don't forget to import the styles
 24 | 
 25 | class App extends Component {
 26 |   state = {
 27 |     data: [
 28 |       // ...
 29 |     ]
 30 |   };
 31 | 
 32 |   render () {
 33 |     return (
 34 |       <LiveBarChart
 35 |         data={this.state.data}
 36 |       />
 37 |     )
 38 |   }
 39 | }
 40 | ```
 41 | 
 42 | ## Props
 43 | 
 44 | | Property      | Type               | Default                               | Description                                                                                                                                  |
 45 | |:--------------|:-------------------|:--------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------|
 46 | | `data`  | array           | []                                  | An array of objects that contain the data of the chart (see section [below](https://github.com/dsternlicht/react-dynamic-charts#data)). |
 47 | | `baseline`  | number           | null                                  | If you want the chart to have a baseline, add its number here. Could be useful for charts that include negative values. |
 48 | | `iterationTimeout`  | number           | 200                         | Number of milliseconds you want between iterations. |
 49 | | `startAutomatically`  | boolean           | true                                  | Whether the visualization should start running automatically. Default is `true`. |
 50 | | `startRunningTimeout`  | number           | 0                         | Number of milliseconds you want before running the visualization. |
 51 | | `onRunStart`  | function           | null                                  | A callback function that being called once the visualization **starts**. |
 52 | | `onRunEnd`  | function           | null                                  | A callback function that being called once the visualization **ends**. |
 53 | | `showTitle`  | boolean           | true                                  | Whether you want to show each iteration's title. |
 54 | | `barHeight`  | number           | 50                                  | The height (in pixels) of each bar item. |
 55 | | `showStartButton`  | boolean           | false                                  | Show a start button that triggers the animation. |
 56 | | `startButtonText`  | string           | 'Start'                                  | The text that will appear in the start button. |
 57 | | `mainWrapperStyles`  | object           | {}                                  | Styles object for the component's main wrapper. |
 58 | | `chartWrapperStyles`  | object           | {}                                  | Styles object for the chart wrapper. |
 59 | | `baselineStyles`  | object           | {}                                  | Styles object for the baseline element. |
 60 | | `iterationTitleStyles`  | object           | {}                                  | Styles object for the title element. |
 61 | | `labelStyles`  | object           | {}                                  | Styles object for the chart's labels. |
 62 | | `startButtonStyles`  | object           | {}                                  | Styles object for the start button. |
 63 | 
 64 | ## Data
 65 | 
 66 | The `data` property is expected to be an array of objects. Each object will present an iteration and will include the following fields:
 67 | 
 68 | | Property      | Type          | Description                                                                                                                                  |
 69 | |:--------------|:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------------|
 70 | | `name` | string | The name of the iteration. 
 71 | | `values` | array | An array of data objects (see below).
 72 | 
 73 | 
 74 | Each value in the `values` array will contain the following properties:
 75 | 
 76 | | Property      | Type          | Description                                                                                                                                  |
 77 | |:--------------|:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------------|
 78 | | `id` | string / number | A unique identifier for the item. Note that it should be consistent across all iterations. |
 79 | | `label` | string / React Node | The label of the item. |
 80 | | `value` | number | A numeric value of the item. |
 81 | | `color` | string / array | Set a fixed color for the item. Could be also an array of colors that will generate a gradient effect. By default, if not set, each item will get a random color. |
 82 | 
 83 | 
 84 | Here's an example of a `data` object:
 85 | 
 86 | ```json
 87 | [
 88 |   {
 89 |     "name": "Round 1",
 90 |     "values": [
 91 |       {
 92 |         "id": 1,
 93 |         "label": "Test 1",
 94 |         "value": 0,
 95 |         "color": "red"
 96 |       },
 97 |       {
 98 |         "id": 2,
 99 |         "label": "Test 2",
100 |         "value": 0,
101 |         "color": ["yellow", "green"]
102 |       }
103 |     ]
104 |   },
105 |   {
106 |     "name": "Round 2",
107 |     "values": [
108 |       {
109 |         "id": 1,
110 |         "label": "Test 1",
111 |         "value": 10,
112 |         "color": "red"
113 |       },
114 |       {
115 |         "id": 2,
116 |         "label": "Test 2",
117 |         "value": 5,
118 |         "color": ["yellow", "green"]
119 |       }
120 |     ]
121 |   },
122 |   {
123 |     "name": "Round 3",
124 |     "values": [
125 |       {
126 |         "id": 1,
127 |         "label": "Test 1",
128 |         "value": 12,
129 |         "color": "red"
130 |       },
131 |       {
132 |         "id": 2,
133 |         "label": "Test 2",
134 |         "value": 21,
135 |         "color": ["yellow", "green"]
136 |       }
137 |     ]
138 |   }
139 | ]
140 | ```
141 | 
142 | ## License
143 | 
144 | MIT © [Daniel Sternlicht](https://github.com/dsternlicht)
145 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import PropTypes from 'prop-types';
  3 | 
  4 | import './styles.scss';
  5 | 
  6 | function getRandomColor() {
  7 |   const letters = '0123456789ABCDEF';
  8 |   let color = '#';
  9 |   for (let i = 0; i < 6; i++) {
 10 |     color += letters[Math.floor(Math.random() * 16)]
 11 |   }
 12 |   return color;
 13 | };
 14 | 
 15 | function translateY(value) {
 16 |   return `translateY(${value}px)`;
 17 | }
 18 | 
 19 | function DynamicBarChart(props) {
 20 |   const [dataQueue, setDataQueue] = useState([]);
 21 |   const [activeItemIdx, setActiveItemIdx] = useState(0);
 22 |   const [highestValue, setHighestValue] = useState(0);
 23 |   const [currentValues, setCurrentValues] = useState({});
 24 |   const [firstRun, setFirstRun] = useState(false);
 25 |   const [afterClick, setAfterClick] = useState(false);
 26 |   let iterationTimeoutHolder = null;
 27 | 
 28 |   function start() {
 29 |     if (activeItemIdx > 1) {
 30 |       return;
 31 |     }
 32 |     if (props.onRunStart) {
 33 |       props.onRunStart();
 34 |     }
 35 |     nextStep(true);
 36 |   }
 37 | 
 38 |   function setNextValues() {
 39 |     if (!dataQueue[activeItemIdx]) {
 40 |       iterationTimeoutHolder = null;
 41 |       if (props.onRunEnd) {
 42 |         props.onRunEnd();
 43 |       }
 44 |       return;
 45 |     }
 46 | 
 47 |     const roundData = dataQueue[activeItemIdx].values;
 48 |     const nextValues = {};
 49 |     let highestValue = 0;
 50 |     roundData.map((c) => {
 51 |       nextValues[c.id] = {
 52 |         ...c,
 53 |         color: c.color || (currentValues[c.id] || {}).color || getRandomColor()
 54 |       };
 55 | 
 56 |       if (Math.abs(c.value) > highestValue) {
 57 |         highestValue = Math.abs(c.value);
 58 |       }
 59 | 
 60 |       return c;
 61 |     });
 62 | 
 63 |     setCurrentValues(nextValues);
 64 |     setHighestValue(highestValue);
 65 |     setActiveItemIdx(activeItemIdx + 1);
 66 |   }
 67 | 
 68 |   function nextStep(firstRun = false) {
 69 |     setFirstRun(firstRun);
 70 |     setNextValues();
 71 |   }
 72 | 
 73 |   useEffect(() => {
 74 |     setDataQueue(props.data);
 75 |   }, []);
 76 | 
 77 |   useEffect(() => {
 78 |     if (props.startAutomatically) {
 79 |       start();
 80 |     } else {
 81 |       setNextValues();
 82 |     }
 83 |   }, [dataQueue]);
 84 | 
 85 |   useEffect(() => {
 86 |     if (props.startAutomatically || afterClick) {
 87 |       iterationTimeoutHolder = window.setTimeout(nextStep, firstRun ? props.startRunningTimeout : props.iterationTimeout);
 88 |     }
 89 | 
 90 |     return () => {
 91 |       if (iterationTimeoutHolder) {
 92 |         window.clearTimeout(iterationTimeoutHolder);
 93 |       }
 94 |     };
 95 |   }, [activeItemIdx, afterClick]);
 96 | 
 97 |   const keys = Object.keys(currentValues);
 98 |   const { barGapSize, barHeight, baseline, iterationTimeout, chartWrapperStyles, mainWrapperStyles, iterationTitleStyles, labelStyles, baselineStyles, showTitle } = props;
 99 |   const maxValue = highestValue / 0.85;
100 |   const sortedCurrentValues = keys.sort((a, b) => currentValues[b].value - currentValues[a].value);
101 |   const hasBaseline = baseline !== null && !isNaN(baseline);
102 |   const currentItem = dataQueue[activeItemIdx - 1] || {};
103 | 
104 |   return (
105 |     <div className="live-chart" style={mainWrapperStyles}>
106 |       {
107 |         <React.Fragment>
108 |           {
109 |             showTitle &&
110 |             <h1 style={iterationTitleStyles}>{currentItem.name}</h1>
111 |           }
112 |           <section className="chart" style={chartWrapperStyles}>
113 |             {
114 |               hasBaseline &&
115 |               <div className="baseline" style={baselineStyles}><span>{baseline}</span></div>
116 |             }
117 |             <div className={`chart-bars ${hasBaseline ? 'with-baseline' : ''}`} style={{ height: (barHeight + barGapSize) * keys.length }}>
118 |               {
119 |                 sortedCurrentValues.map((key, idx) => {
120 |                   const currentValueData = currentValues[key];
121 |                   const value = hasBaseline ? (currentValueData.value || baseline) - baseline : currentValueData.value;
122 |                   let width = Math.abs((value / maxValue * 100));
123 |                   let behindbaseline = false;
124 |                   if (hasBaseline && currentValueData.value < baseline) {
125 |                     behindbaseline = true;
126 |                   }
127 | 
128 |                   if (hasBaseline) {
129 |                     width = width / 2;
130 |                   }
131 | 
132 |                   let widthStr;
133 |                   if (isNaN(width) || !width) {
134 |                     widthStr = '1px';
135 |                   } else {
136 |                     widthStr = `${width}%`;
137 |                   }
138 | 
139 |                   return (
140 |                     <div className={`bar-wrapper ${behindbaseline ? 'behind-baseline' : ''}`} style={{ transform: translateY((barHeight + barGapSize) * idx), transitionDuration: iterationTimeout / 1000 }} key={`bar_${key}`}>
141 |                       <label style={labelStyles}>
142 |                         {
143 |                           !currentValueData.label
144 |                             ? key
145 |                             : currentValueData.label
146 |                         }
147 |                       </label>
148 |                       <div className="bar" style={{ height: barHeight, width: widthStr, background: typeof currentValueData.color === 'string' ? currentValueData.color : `linear-gradient(to right, ${currentValueData.color.join(',')})` }} />
149 |                       <span className="value" style={{ color: typeof currentValueData.color === 'string' ? currentValueData.color : currentValueData.color[0] }}>{currentValueData.value}</span>
150 |                     </div>
151 |                   );
152 |                 })
153 |               }
154 |             </div>
155 |           </section>
156 |         </React.Fragment>
157 |       }
158 |       {
159 |         props.showStartButton &&
160 |         <button className="start-button" onClick={() => setAfterClick(true)} style={props.startButtonStyles}>{props.startButtonText}</button>
161 |       }
162 |     </div>
163 |   );
164 | };
165 | 
166 | DynamicBarChart.propTypes = {
167 |   startAutomatically: PropTypes.bool,
168 |   showTitle: PropTypes.bool,
169 |   iterationTimeout: PropTypes.number,
170 |   data: PropTypes.array,
171 |   startRunningTimeout: PropTypes.number,
172 |   barHeight: PropTypes.number,
173 |   barGapSize: PropTypes.number,
174 |   baseline: PropTypes.number,
175 |   showStartButton: PropTypes.bool,
176 |   startButtonText: PropTypes.string,
177 |   mainWrapperStyles: PropTypes.object,
178 |   chartWrapperStyles: PropTypes.object,
179 |   baselineStyles: PropTypes.object,
180 |   iterationTitleStyles: PropTypes.object,
181 |   labelStyles: PropTypes.object,
182 |   startButtonStyles: PropTypes.object,
183 |   onRunStart: PropTypes.func,
184 |   onRunEnd: PropTypes.func
185 | };
186 | 
187 | DynamicBarChart.defaultProps = {
188 |   startAutomatically: true,
189 |   showTitle: true,
190 |   iterationTimeout: 200,
191 |   data: [],
192 |   startRunningTimeout: 0,
193 |   barHeight: 50,
194 |   barGapSize: 20,
195 |   baseline: null,
196 |   showStartButton: false,
197 |   startButtonText: 'Start',
198 |   mainWrapperStyles: {},
199 |   chartWrapperStyles: {},
200 |   baselineStyles: {},
201 |   iterationTitleStyles: {},
202 |   labelStyles: {},
203 |   startButtonStyles: {},
204 |   onRunStart: null,
205 |   onRunEnd: null
206 | };
207 | 
208 | export {
209 |   DynamicBarChart
210 | };
211 | 


--------------------------------------------------------------------------------
/example/src/App.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import SyntaxHighlighter from 'react-syntax-highlighter';
  3 | import { hybrid } from 'react-syntax-highlighter/dist/esm/styles/hljs';
  4 | import GitHubButton from 'react-github-btn';
  5 | 
  6 | import { DynamicBarChart } from "react-dynamic-charts";
  7 | 
  8 | import helpers from "./helpers";
  9 | import mocks from "./mocks";
 10 | 
 11 | import "react-dynamic-charts/dist/index.css";
 12 | 
 13 | export default class App extends Component {
 14 |   render() {
 15 |     return (
 16 |       <div className="main-section">
 17 |         <a href="https://github.com/dsternlicht/react-dynamic-charts">
 18 |           <img
 19 |             src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAACVCAMAAABmfEh9AAACc1BMVEX///8AAAAAAAAAAAAAAAAAAAAAAABnZ2eCgoKlpaWSkpJtbW2Dg4OXl5dtbW0jIyMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkZGR4eHiqqqqfn595eXl0dHSVlZWJiYloaGghISEAAAAAAAAAAAAAAABlZWWKioqxsbGdnZ1+fn6kpKSamppzc3MgICAAAAAAAAAAAAAAAABhYWFzc3OhoaGTk5NycnKLi4toaGgfHx8AAAAAAAAAAAAAAAAAAAAAAAAAAABfX1+IiIi3t7d1dXWbm5tzc3MAAAAAAAAAAAAAAABdXV19fX2ioqKQkJBubm4fHx9cXFyvr696enpxcXFsbGwAAAAAAABeXl6Hh4etra2ZmZmAgICmpqZwcHAAAAAAAABbW1ujo6OYmJgAAAAAAAC2trZ0dHR2dnagoKCPj4+zs7ONjY1vb29cXFynp6eUlJRtbW13d3eoqKhsbGxdXV1ra2twcHBqamppaWmMjIyGhoZoaGhnZ2dxcXF/f39mZmZlZWVkZGSEhIRpaWl7e3tjY2NiYmLAwMBqampeXl6urq5hYWFgYGCenp7///+WlpZfX1/p6el8fHzf39+rq6vS0tJYWFhaWlrJycm8vLxZWVlbW1tdXV2FhYWpqand3d1cXFxubm60tLRvb2/09PTIyMheXl6Ojo61tbXT09NXV1e7u7tra2vq6ure3t7V1dXBwcFycnKwsLC/v79VVVW9vb2cnJxWVlaBgYGysrLg4ODo6OhUVFTHx8e+vr7U1NTLy8usrKyRkZG6urpTU1Pz8/PR0dFxcXF0dHRbW1tkZGRiYmK4ubPZAAAA0XRSTlMAAQMEBwkMiv///////9o3JB8aFhIOCgUCDRGN/////////9o7JiEcF5H////////cPSgiHQaT///////bPykjGAgQFSCV/////90qEx4lmP////9Amv///9wLLJz//////90nLpz//xsv/93//////9yc///c////nf//////////3f//////2//////bnf//////////////////////////////3P/////////////c/////93////////////////////////////c25uUkLcVs+8AAAs6SURBVHgBvNJjoqJhGIDhPmbbtm3brmGumWPu/yD8jm/3Cq4HhF0QBCMohhNJZAp1fzQyncFksTlcHl+ACmERBBGAtFYJxBKpTK5Q7mep1BqtTm8wmsCydiqu2WK1Ufdndzhdbo/XB5YFQSLEj+ESrjEQDIUjB7Cc0Vg8kfSlgLK+VWk8k+Xk8oUiubSfVSqHK/EqYBYkgoWogF9L1RvNVruzX9WltcOxXpUFlAVB8PaE3kTfPnAM97t+qC0/AbOg72Wlf62X9fvP39GYur/JdDwDzVova/1Z88VStfp3wG8N6RqwR1wvC0ExsYT73+C5WWpuV5H9LKWCfndV1v3DIS9PUjxed1ukp6lyvytCf365JuuV9vZO3R9tSv8k3jze00jSMM5RCHvjFQnYvCiwGU2+eWFPCJ5n8By8EnNAE2CStKhtgw2r7rbV7bW7+dQowCAwsHK5lcY9QQk5Z/t/mqpuupAcji6Xg66/56vq9/3qrU//YVqtzPSg++U4HF7kZ8p3jOkmnvR/3h97KdIpvEywSHLsX0yrFUy/cfpFUBgpm83lslkM5oqNh8+wPfJnP0lkXgSVzeULeOUxF66WNxD9L1OsmWTvi6DyBV4QBQFj4V10xc4N+84zxZr992j8eShelOT0BUk0sYhA+H71P5ZYF49dCrwASlGLABckoZAzqVzjzgDbTQyOznmfg9IwVAkuiHwua1K55if8bI88bgODB6hyBVEmUGF+ARYFcwvJygzOsfVEz0j04OfHS2T7lsoV/mtOtLcQe+JIL9tqjQ8k4t0NFOR+sn3V5VpdxVRZzm4D584wNZ+TlxtzB6hGAAalJlyutDRZKFhbSFZPYuz/TKsVSgQyNtVlgGJtWfpMSkznVYnHJ8v2xMwc2zbwK//KyJXOuSqMLmr1WvkcAkBDisgXLOshYLMjY58y9sTemEmFlUFStNYsAmcUXdUVCUu8xUU8cXCV7ZE/tzbpdnFmsQRJ0dchvLFRQi2MJfKE65S5i8Gx6Idsv0TnGy6KpcJ6eWMTqpVITjW5CJYVjcx9wxQr3pf2mFj5gqhcQ9EqIMWDjJauct+eo1hBH9sjf/FXA4O26UjjCKDpziCAdb6wAN/xVOWHnIHv2R75EV/QltJTxd5lDwLnD03JgC256z2uyNhbbI/8iU8SIUJFzFDV5xEEtrfVJuzoykE5Te1OsW2aZ0k00jnx3DUIl/cwVLUWVERKRaMRhlhD7zvj9ofYxhovNwEQoLZoHXcajbz1AVNPPLE40akWLyo6b0ATrk4X2yJPNYusdmKMrW55h8dSVOS/hp19OF7XFLEj8TaWh3U04l9LHrd0ixe5vrph1HVVkUWhI/F2YpOeYB+NmFh4E+UQrGiqqihKWyL1olixniLjaOTI55NE5bM5XC339baiqKo2g7ZwwUwxpdHI6odssRJTLoJFboYeUcLaFUFQamiK2Zxyry0aaRTd5s0+h7lESR1CsG/AoH4YK8Q8GtkvWmeLlEtqIwhvOKH0LFYkGWCr8m+me8mXaLYQHgSDZTdCN2DfwqJHfuY1RCMpUi4i84vFGib7QgWEbxgHsEg00sv2Vj2UjNLGRj2GYOxmD9xaxlhC/qAnDk+xjUbmLyXj1nVakPvwwcogyLgm31Al/rAn+r9hG42Q5wKrsVGGyB5OTCCABa7b1ryWaMSbxNFIp2cOIgh8ATAQhTSNkKw1e9TP2BM/SQbtVr4xWL4BTRSGPkkwDzwVCHeRcTTiHonaTq3oNbglGYC82HmseJJ6YjrKtlrtfaeHYqESzxtFTSFGjct1wBPnzjDNIL663PDRavVDKaLrmqrImIu3ttH2xAm20UhqMpyx49K5NVXV8PL3+cnlNd/FyryW5wKraRZESVa03G0AuK2RaKSLNT/KPhq5Yju1ICrabTCiOxAh0Ui3WrHx3S9Ye+Kkm+s0NoLsB0PaCECi9itVom2gFY2wldPxYTsawabYB2dxBwGuKkwdamxi7KORxdG47T5p2IkiSG4CGFOyLahc57ngPFtPfH+QxrlbADC8Cc0EgpR5Ucx2YjfXDOto5M1RX5Ba9fSVKjTl8iT4JXIjy+dzOcJFohE/62jE6aWPF9NgSGWxBCFTT3m+YEtqatDHtmmOj1JPlNXPCzXegBUi85IkiqKt9LEjrJ8LZgasaCRPolMttwBbunmBfWtxbU60jr0VjbB9Ljjbd7QTnWL3WYMtFS8tewfwuhuj4WkP62gk5AykqMrfkxVFJSVDn0/dgU/I12hpl4f5c8Ha6OmOnJJ6KSqGMo636vq3iCTzHf+JjzCORrzp+zETy9xGWW1Aia/VWnp/Wpbo0Yq1i6uMo5GVSXc3mFcQnKhUCJauXviEYrnenGAcjfQksCfaEvEWGLVKRajUWvVfAd1Eznwu+IBtL9/odxMuIvMclGqVeCleqZxoNaYUgtUxHy/jNvAijkZsT5TWYH0fIFEOw36toCtSN0AdGmYcjeBJyuOdYikrABAuBwB5qsaOrpIG1cYKsH8uSNmemF0YXA4DygwDVIWWvtVDFQJPUrLtICLJ+ySvMbFm6rsYSmsCNKXlHbjG4V3seGKS8XNB5NJw3I7lhwB5lCY8mNjcrgKKaDTjopOUzI48maQkWKRaxcjyEmzefHhzE/NV6tk2zUfGEwG2uhVMHg3Zm6ifgKW97ZsPACa2NwQD9ZA9fPEkpYPBJKV9q56B0uW9TXj06FFIbQLqFsvlfmaS0vGqsTLkucDCkvvv8FVAodCjRxgqolp3H86apDwUjTheOVabTFJaQRLxaeTZfjgO+EdNs+4+lvkcnqR0vHKsr85Nd6IR8p54J7K8QfThsTJbPzAIYUYj3e7UQdYrj0YG3Rx9uKuJTXh0VG+ief3AK9nhSUqHuRhEIxQrZwBK6U1oCi0SclGRJ9EI9sT3yG8XOFhgkWjkNNcRrtQCPlqPYVMp70awJX6XNLGsaIQ8FxAsh70YTFJaCiGdilQSsLS9HYASX9+C61foABeZpHzn3b/+/pcOuhhMUppYgqTWS6BsjwHylHdggTMFwn4u8J1/5y+/+4WDFdbsPRyNcNZzgXYHnE5AKWw+RsFMkmh26vOf//Nvf+7oLhaTlJzZb8lD64ChHj4AMHo1uUtlRiNPfvMzByssMknpo88F+h185B9AcxhBkFLZk5S//qmDIdav/jlME5tcZLkKTXUvAf7uDnYmKX1PHSyx4iOdqRErsYEjGxKCkDVESReJRhxMscbtaMTCuppA0DCnFSmTNUnpYIp18mzjKA2SNJKIrChUGLqrx8EWi0QjGZcdJKX7UocGDehysMUik5QkGrE8ES8BQ2U59lTPRyO9MXtqn47ts6f6sX17VqwtjIIAvO6NbdtVbNu2bXSx6nRp4leJyqQKHilnHVTz93uCeYKv21gz5ialY+Fw6rjVWaAC1pOzSemIoqxQASvJMTJ13QWsUQHrHEemlqjw18hOBYHK9GuEQAX1jP5XAhWwdGRKoIJfIy+rDCpsUgZsEaiwNdI/RqAyNCkJVKYmZTyByjAyJVAZm5QEKtO5gEAFJ/Sy8mMClalJSaDCJqUvgwpHpiujBCrDrxEGFZ4LLpMJVHguyCklUBmalAQqYM09zycRqHBkmsKggheb+fY9AhWcC3Rkqiom1tK7NilVxcRanBw+29DXQGFiNfXU9M75+KqKiBXaXdjTPHpXliRMrMa6rO6mj9SRB2FiNXSF1YVmfZb2CxPLMyK2qzEsLK5FqFgTnhENsbGxXsLEKq73iPT0jInxFCpWVLG7DRbpIVQsdRW7u7sLEcvh0ggTS13RNtl/ETaXRugCKuL85S9/+csXReNiTmoNnxoAAAAASUVORK5CYII="
 20 |             alt="Fork me on GitHub"
 21 |           />
 22 |         </a>
 23 |         <div className="chart-row">
 24 |           <div className="description">
 25 |             <div className="buttons">
 26 |               <GitHubButton href="https://github.com/dsternlicht/react-dynamic-charts" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star dsternlicht/react-dynamic-charts on GitHub">Star</GitHubButton>
 27 |               <GitHubButton href="https://github.com/dsternlicht/react-dynamic-charts/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork dsternlicht/react-dynamic-charts on GitHub">Fork</GitHubButton>
 28 |             </div>
 29 |             <h3>Hello Dynamic Charts!</h3>
 30 |             <p>React Dynamic Charts will allow you to create awesome animated dynamic charts to visualize your data.</p>
 31 |             <p>Here's the most basic example of how to use Dynamic Charts:</p>
 32 |             <SyntaxHighlighter language="javascript" style={hybrid}>
 33 |               {
 34 | `<DynamicBarChart
 35 |   data={this.state.data}
 36 |   // Timeout in ms between each iteration
 37 |   iterationTimeout={100}
 38 | />`
 39 |               }
 40 |             </SyntaxHighlighter>
 41 |             <p>You may also add custom callbacks when animation starts, and animation ends. Check out your console to see it in action.</p>
 42 |             <SyntaxHighlighter language="javascript" style={hybrid}>
 43 |               {
 44 | `<DynamicBarChart
 45 |   data={this.state.data}
 46 |   onRunStart={() => {
 47 |     console.log("Started!");
 48 |   }}
 49 |   onRunEnd={() => {
 50 |     console.log("Ended!");
 51 |   }}
 52 | />`
 53 |               }
 54 |             </SyntaxHighlighter>
 55 |           </div>
 56 |           <DynamicBarChart
 57 |             barGapSize={10}
 58 |             data={helpers.generateData(100, mocks.defaultChart, {
 59 |               prefix: "Iteration"
 60 |             })}
 61 |             iterationTimeout={100}
 62 |             showTitle={true}
 63 |             mainWrapperStyles={{
 64 |               backgroundColor: '#fff'
 65 |             }}
 66 |             chartWrapperStyles={{
 67 |               maxWidth: '1200px'
 68 |             }}
 69 |             onRunStart={() => {
 70 |               console.log("Started!");
 71 |             }}
 72 |             onRunEnd={() => {
 73 |               console.log("Ended!");
 74 |             }}
 75 |             startRunningTimeout={2500}
 76 |           />
 77 |         </div>
 78 | 
 79 |         <div className="chart-row">
 80 |           <div className="description">
 81 |             <h3>Custom Labels</h3>
 82 |             <p>Dynamic Charts support custom labels. So if you want to add images rather than plain text, you can!</p>
 83 |             <p>All you'll have to do is to set a React element in the `label` field as part of your data structure:</p>
 84 |             <SyntaxHighlighter language="javascript" style={hybrid}>
 85 |               {
 86 | `var data = [
 87 |   {
 88 |     id: 1,
 89 |     label: (
 90 |       <React.Fragment>
 91 |         <img src={'...'} alt="..." />
 92 |       </React.Fragment>
 93 |     )
 94 |   },
 95 |   // ...
 96 | ];`
 97 |               }
 98 |             </SyntaxHighlighter>
 99 |           </div>
100 |           <DynamicBarChart
101 |             data={helpers.generateData(100, mocks.customLabels, { prefix: "Year", initialValue: 1980 }, 10)}
102 |             iterationTimeout={100}
103 |             chartWrapperStyles={{
104 |               maxWidth: '1200px'
105 |             }}
106 |             mainWrapperStyles={{
107 |               backgroundColor: '#fff'
108 |             }}
109 |             startRunningTimeout={0}
110 |           />
111 |         </div>
112 | 
113 |         <div className="chart-row">
114 |           <div className="description">
115 |             <h3>Baseline</h3>
116 |             <p>If your chart has negative values, you may want to set a <strong>baseline</strong>.</p>
117 |             <p>The `baseline` property is any numeric value. In the example below, we set up a baseline of 0.</p>
118 |             <SyntaxHighlighter language="javascript" style={hybrid}>
119 |               {
120 | `<DynamicBarChart
121 |   data={this.state.data}
122 |   baseline={0}
123 | />`
124 |               }
125 |             </SyntaxHighlighter>
126 |           </div>
127 |           <DynamicBarChart
128 |             data={helpers.generateData(
129 |               20,
130 |               mocks.baselineWithNegatives,
131 |               { prefix: "Year", initialValue: 1980 },
132 |               100
133 |             )}
134 |             barHeight={30}
135 |             showTitle={false}
136 |             iterationTimeout={1000}
137 |             startRunningTimeout={1500}
138 |             baseline={0}
139 |             mainWrapperStyles={{
140 |               backgroundColor: '#fff'
141 |             }}
142 |           />
143 |         </div>
144 | 
145 |         <div className="chart-row">
146 |           <div className="description">
147 |             <h3>Run by Command</h3>
148 |             <p>By default, the animation starts automatically. You may choose to start the animation after a certain timeout:</p>
149 |             <SyntaxHighlighter language="javascript" style={hybrid}>
150 |               {
151 | `<DynamicBarChart
152 |   data={this.state.data}
153 |   // Wait 2500 ms before animation starts
154 |   startRunningTimeout={2500}
155 | />`
156 |               }
157 |             </SyntaxHighlighter>
158 |             <p>Another option is to start the animation programmatically by adding a start button, and disabling the `startAutomatically` flag, and adding the `showStartButton` flag:</p>
159 |             <SyntaxHighlighter language="javascript" style={hybrid}>
160 |               {
161 | `<DynamicBarChart
162 |   data={this.state.data}
163 |   startAutomatically={false}
164 |   showStartButton={true}
165 |   startButtonText={'Click Me!'}
166 | />`
167 |               }
168 |             </SyntaxHighlighter>
169 |           </div>
170 |           <DynamicBarChart
171 |             data={helpers.generateData(100, mocks.runByCommand)}
172 |             showTitle={false}
173 |             iterationTimeout={100}
174 |             barHeight={20}
175 |             chartWrapperStyles={{
176 |               maxWidth: '1200px'
177 |             }}
178 |             mainWrapperStyles={{
179 |               backgroundColor: '#fff'
180 |             }}
181 |             startAutomatically={false}
182 |             showStartButton={true}
183 |             startButtonText={'Click Me!'}
184 |             onRunStart={() => {
185 |               console.log('It\'s on!');
186 |             }}
187 |           />
188 |         </div>
189 |         <div className="chart-row">
190 |           <div className="description">
191 |             <h3>Styles Go Crazy!</h3>
192 |             <p>Although Dynamic Charts have default styling, you have various of option to control and change how your chart looks like.</p>
193 |             <p></p>
194 |             <SyntaxHighlighter language="javascript" style={hybrid}>
195 |               {
196 | `<DynamicBarChart
197 |   data={this.state.data}
198 |   barHeight={50}
199 |   mainWrapperStyles={{
200 |     backgroundColor: '#333',
201 |     color: '#fff'
202 |   }}
203 |   chartWrapperStyles={{
204 |     maxWidth: '800px',
205 |     padding: '40px 20px'
206 |   }}
207 |   labelStyles={{
208 |     fontSize: '35px'
209 |   }}
210 |   iterationTitleStyles={{
211 |     color: '#fff',
212 |     fontSize: '24px',
213 |     backgroundColor: '#999',
214 |     borderRadius: '50em',
215 |     position: 'absolute',
216 |     left: '50%',
217 |     transform: 'translateX(-50%)',
218 |     top: '440px',
219 |     padding: '10px 30px'
220 |   }}
221 | />`
222 |               }
223 |             </SyntaxHighlighter>
224 |           </div>
225 |           <DynamicBarChart
226 |             data={helpers.generateData(100, mocks.stylesGoCrazy, { prefix: 'Year', initialValue: 2020 })}
227 |             iterationTimeout={100}
228 |             startRunningTimeout={4000}
229 |             barHeight={50}
230 |             chartWrapperStyles={{
231 |               maxWidth: '1200px',
232 |               padding: '40px 20px'
233 |             }}
234 |             mainWrapperStyles={{
235 |               backgroundColor: '#333'
236 |             }}
237 |             iterationTitleStyles={{
238 |               color: '#fff',
239 |               fontSize: '24px',
240 |               backgroundColor: '#999',
241 |               borderRadius: '50em',
242 |               position: 'absolute',
243 |               left: '50%',
244 |               transform: 'translateX(-50%)',
245 |               top: '440px',
246 |               padding: '10px 30px'
247 |             }}
248 |             labelStyles={{
249 |               fontSize: '35px'
250 |             }}
251 |           />
252 |         </div>
253 |       </div>
254 |     );
255 |   }
256 | }
257 | 


--------------------------------------------------------------------------------
/example/config/webpack.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const isWsl = require('is-wsl');
  5 | const path = require('path');
  6 | const webpack = require('webpack');
  7 | const resolve = require('resolve');
  8 | const PnpWebpackPlugin = require('pnp-webpack-plugin');
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 10 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 11 | const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 12 | const TerserPlugin = require('terser-webpack-plugin');
 13 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 14 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 15 | const safePostCssParser = require('postcss-safe-parser');
 16 | const ManifestPlugin = require('webpack-manifest-plugin');
 17 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 18 | const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 19 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 20 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 21 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 22 | const paths = require('./paths');
 23 | const modules = require('./modules');
 24 | const getClientEnvironment = require('./env');
 25 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 26 | const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 27 | const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 28 | 
 29 | const postcssNormalize = require('postcss-normalize');
 30 | 
 31 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 32 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 33 | // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 34 | // makes for a smoother build process.
 35 | const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 36 | 
 37 | // Check if TypeScript is setup
 38 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 39 | 
 40 | // style files regexes
 41 | const cssRegex = /\.css$/;
 42 | const cssModuleRegex = /\.module\.css$/;
 43 | const sassRegex = /\.(scss|sass)$/;
 44 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 45 | 
 46 | // This is the production and development configuration.
 47 | // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 48 | module.exports = function(webpackEnv) {
 49 |   const isEnvDevelopment = webpackEnv === 'development';
 50 |   const isEnvProduction = webpackEnv === 'production';
 51 | 
 52 |   // Webpack uses `publicPath` to determine where the app is being served from.
 53 |   // It requires a trailing slash, or the file assets will get an incorrect path.
 54 |   // In development, we always serve from the root. This makes config easier.
 55 |   const publicPath = isEnvProduction
 56 |     ? paths.servedPath
 57 |     : isEnvDevelopment && '/';
 58 |   // Some apps do not use client-side routing with pushState.
 59 |   // For these, "homepage" can be set to "." to enable relative asset paths.
 60 |   const shouldUseRelativeAssetPaths = publicPath === './';
 61 | 
 62 |   // `publicUrl` is just like `publicPath`, but we will provide it to our app
 63 |   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 64 |   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 65 |   const publicUrl = isEnvProduction
 66 |     ? publicPath.slice(0, -1)
 67 |     : isEnvDevelopment && '';
 68 |   // Get environment variables to inject into our app.
 69 |   const env = getClientEnvironment(publicUrl);
 70 | 
 71 |   // common function to get style loaders
 72 |   const getStyleLoaders = (cssOptions, preProcessor) => {
 73 |     const loaders = [
 74 |       isEnvDevelopment && require.resolve('style-loader'),
 75 |       isEnvProduction && {
 76 |         loader: MiniCssExtractPlugin.loader,
 77 |         options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
 78 |       },
 79 |       {
 80 |         loader: require.resolve('css-loader'),
 81 |         options: cssOptions,
 82 |       },
 83 |       {
 84 |         // Options for PostCSS as we reference these options twice
 85 |         // Adds vendor prefixing based on your specified browser support in
 86 |         // package.json
 87 |         loader: require.resolve('postcss-loader'),
 88 |         options: {
 89 |           // Necessary for external CSS imports to work
 90 |           // https://github.com/facebook/create-react-app/issues/2677
 91 |           ident: 'postcss',
 92 |           plugins: () => [
 93 |             require('postcss-flexbugs-fixes'),
 94 |             require('postcss-preset-env')({
 95 |               autoprefixer: {
 96 |                 flexbox: 'no-2009',
 97 |               },
 98 |               stage: 3,
 99 |             }),
100 |             // Adds PostCSS Normalize as the reset css with default options,
101 |             // so that it honors browserslist config in package.json
102 |             // which in turn let's users customize the target behavior as per their needs.
103 |             postcssNormalize(),
104 |           ],
105 |           sourceMap: isEnvProduction && shouldUseSourceMap,
106 |         },
107 |       },
108 |     ].filter(Boolean);
109 |     if (preProcessor) {
110 |       loaders.push({
111 |         loader: require.resolve(preProcessor),
112 |         options: {
113 |           sourceMap: isEnvProduction && shouldUseSourceMap,
114 |         },
115 |       });
116 |     }
117 |     return loaders;
118 |   };
119 | 
120 |   return {
121 |     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
122 |     // Stop compilation early in production
123 |     bail: isEnvProduction,
124 |     devtool: isEnvProduction
125 |       ? shouldUseSourceMap
126 |         ? 'source-map'
127 |         : false
128 |       : isEnvDevelopment && 'cheap-module-source-map',
129 |     // These are the "entry points" to our application.
130 |     // This means they will be the "root" imports that are included in JS bundle.
131 |     entry: [
132 |       // Include an alternative client for WebpackDevServer. A client's job is to
133 |       // connect to WebpackDevServer by a socket and get notified about changes.
134 |       // When you save a file, the client will either apply hot updates (in case
135 |       // of CSS changes), or refresh the page (in case of JS changes). When you
136 |       // make a syntax error, this client will display a syntax error overlay.
137 |       // Note: instead of the default WebpackDevServer client, we use a custom one
138 |       // to bring better experience for Create React App users. You can replace
139 |       // the line below with these two lines if you prefer the stock client:
140 |       // require.resolve('webpack-dev-server/client') + '?/',
141 |       // require.resolve('webpack/hot/dev-server'),
142 |       isEnvDevelopment &&
143 |         require.resolve('react-dev-utils/webpackHotDevClient'),
144 |       // Finally, this is your app's code:
145 |       paths.appIndexJs,
146 |       // We include the app code last so that if there is a runtime error during
147 |       // initialization, it doesn't blow up the WebpackDevServer client, and
148 |       // changing JS code would still trigger a refresh.
149 |     ].filter(Boolean),
150 |     output: {
151 |       // The build folder.
152 |       path: isEnvProduction ? paths.appBuild : undefined,
153 |       // Add /* filename */ comments to generated require()s in the output.
154 |       pathinfo: isEnvDevelopment,
155 |       // There will be one main bundle, and one file per asynchronous chunk.
156 |       // In development, it does not produce real files.
157 |       filename: isEnvProduction
158 |         ? 'js/[name].[contenthash:8].js'
159 |         : isEnvDevelopment && 'js/bundle.js',
160 |       // TODO: remove this when upgrading to webpack 5
161 |       futureEmitAssets: true,
162 |       // There are also additional JS chunk files if you use code splitting.
163 |       chunkFilename: isEnvProduction
164 |         ? 'js/[name].[contenthash:8].chunk.js'
165 |         : isEnvDevelopment && 'js/[name].chunk.js',
166 |       // We inferred the "public path" (such as / or /my-project) from homepage.
167 |       // We use "/" in development.
168 |       publicPath: publicPath,
169 |       // Point sourcemap entries to original disk location (format as URL on Windows)
170 |       devtoolModuleFilenameTemplate: isEnvProduction
171 |         ? info =>
172 |             path
173 |               .relative(paths.appSrc, info.absoluteResourcePath)
174 |               .replace(/\\/g, '/')
175 |         : isEnvDevelopment &&
176 |           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
177 |     },
178 |     optimization: {
179 |       minimize: isEnvProduction,
180 |       minimizer: [
181 |         // This is only used in production mode
182 |         new TerserPlugin({
183 |           terserOptions: {
184 |             parse: {
185 |               // we want terser to parse ecma 8 code. However, we don't want it
186 |               // to apply any minfication steps that turns valid ecma 5 code
187 |               // into invalid ecma 5 code. This is why the 'compress' and 'output'
188 |               // sections only apply transformations that are ecma 5 safe
189 |               // https://github.com/facebook/create-react-app/pull/4234
190 |               ecma: 8,
191 |             },
192 |             compress: {
193 |               ecma: 5,
194 |               warnings: false,
195 |               // Disabled because of an issue with Uglify breaking seemingly valid code:
196 |               // https://github.com/facebook/create-react-app/issues/2376
197 |               // Pending further investigation:
198 |               // https://github.com/mishoo/UglifyJS2/issues/2011
199 |               comparisons: false,
200 |               // Disabled because of an issue with Terser breaking valid code:
201 |               // https://github.com/facebook/create-react-app/issues/5250
202 |               // Pending futher investigation:
203 |               // https://github.com/terser-js/terser/issues/120
204 |               inline: 2,
205 |             },
206 |             mangle: {
207 |               safari10: true,
208 |             },
209 |             output: {
210 |               ecma: 5,
211 |               comments: false,
212 |               // Turned on because emoji and regex is not minified properly using default
213 |               // https://github.com/facebook/create-react-app/issues/2488
214 |               ascii_only: true,
215 |             },
216 |           },
217 |           // Use multi-process parallel running to improve the build speed
218 |           // Default number of concurrent runs: os.cpus().length - 1
219 |           // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
220 |           // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
221 |           parallel: !isWsl,
222 |           // Enable file caching
223 |           cache: true,
224 |           sourceMap: shouldUseSourceMap,
225 |         }),
226 |         // This is only used in production mode
227 |         new OptimizeCSSAssetsPlugin({
228 |           cssProcessorOptions: {
229 |             parser: safePostCssParser,
230 |             map: shouldUseSourceMap
231 |               ? {
232 |                   // `inline: false` forces the sourcemap to be output into a
233 |                   // separate file
234 |                   inline: false,
235 |                   // `annotation: true` appends the sourceMappingURL to the end of
236 |                   // the css file, helping the browser find the sourcemap
237 |                   annotation: true,
238 |                 }
239 |               : false,
240 |           },
241 |         }),
242 |       ],
243 |       // Automatically split vendor and commons
244 |       // https://twitter.com/wSokra/status/969633336732905474
245 |       // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
246 |       splitChunks: {
247 |         chunks: 'all',
248 |         name: false,
249 |       },
250 |       // Keep the runtime chunk separated to enable long term caching
251 |       // https://twitter.com/wSokra/status/969679223278505985
252 |       runtimeChunk: true,
253 |     },
254 |     resolve: {
255 |       // This allows you to set a fallback for where Webpack should look for modules.
256 |       // We placed these paths second because we want `node_modules` to "win"
257 |       // if there are any conflicts. This matches Node resolution mechanism.
258 |       // https://github.com/facebook/create-react-app/issues/253
259 |       modules: ['node_modules', paths.appNodeModules].concat(
260 |         modules.additionalModulePaths || []
261 |       ),
262 |       // These are the reasonable defaults supported by the Node ecosystem.
263 |       // We also include JSX as a common component filename extension to support
264 |       // some tools, although we do not recommend using it, see:
265 |       // https://github.com/facebook/create-react-app/issues/290
266 |       // `web` extension prefixes have been added for better support
267 |       // for React Native Web.
268 |       extensions: paths.moduleFileExtensions
269 |         .map(ext => `.${ext}`)
270 |         .filter(ext => useTypeScript || !ext.includes('ts')),
271 |       alias: {
272 |         // Support React Native Web
273 |         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
274 |         'react-native': 'react-native-web',
275 |       },
276 |       plugins: [
277 |         // Adds support for installing with Plug'n'Play, leading to faster installs and adding
278 |         // guards against forgotten dependencies and such.
279 |         PnpWebpackPlugin,
280 |         // Prevents users from importing files from outside of src/ (or node_modules/).
281 |         // This often causes confusion because we only process files within src/ with babel.
282 |         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
283 |         // please link the files into your node_modules/ and let module-resolution kick in.
284 |         // Make sure your source files are compiled, as they will not be processed in any way.
285 |         new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
286 |       ],
287 |     },
288 |     resolveLoader: {
289 |       plugins: [
290 |         // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
291 |         // from the current package.
292 |         PnpWebpackPlugin.moduleLoader(module),
293 |       ],
294 |     },
295 |     module: {
296 |       strictExportPresence: true,
297 |       rules: [
298 |         // Disable require.ensure as it's not a standard language feature.
299 |         { parser: { requireEnsure: false } },
300 | 
301 |         // First, run the linter.
302 |         // It's important to do this before Babel processes the JS.
303 |         {
304 |           test: /\.(js|mjs|jsx|ts|tsx)$/,
305 |           enforce: 'pre',
306 |           use: [
307 |             {
308 |               options: {
309 |                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
310 |                 eslintPath: require.resolve('eslint'),
311 |                 
312 |               },
313 |               loader: require.resolve('eslint-loader'),
314 |             },
315 |           ],
316 |           include: paths.appSrc,
317 |         },
318 |         {
319 |           // "oneOf" will traverse all following loaders until one will
320 |           // match the requirements. When no loader matches it will fall
321 |           // back to the "file" loader at the end of the loader list.
322 |           oneOf: [
323 |             // "url" loader works like "file" loader except that it embeds assets
324 |             // smaller than specified limit in bytes as data URLs to avoid requests.
325 |             // A missing `test` is equivalent to a match.
326 |             {
327 |               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
328 |               loader: require.resolve('url-loader'),
329 |               options: {
330 |                 limit: 10000,
331 |                 name: 'media/[name].[hash:8].[ext]',
332 |               },
333 |             },
334 |             // Process application JS with Babel.
335 |             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
336 |             {
337 |               test: /\.(js|mjs|jsx|ts|tsx)$/,
338 |               include: paths.appSrc,
339 |               loader: require.resolve('babel-loader'),
340 |               options: {
341 |                 customize: require.resolve(
342 |                   'babel-preset-react-app/webpack-overrides'
343 |                 ),
344 |                 
345 |                 plugins: [
346 |                   [
347 |                     require.resolve('babel-plugin-named-asset-import'),
348 |                     {
349 |                       loaderMap: {
350 |                         svg: {
351 |                           ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
352 |                         },
353 |                       },
354 |                     },
355 |                   ],
356 |                 ],
357 |                 // This is a feature of `babel-loader` for webpack (not Babel itself).
358 |                 // It enables caching results in ./node_modules/.cache/babel-loader/
359 |                 // directory for faster rebuilds.
360 |                 cacheDirectory: true,
361 |                 cacheCompression: isEnvProduction,
362 |                 compact: isEnvProduction,
363 |               },
364 |             },
365 |             // Process any JS outside of the app with Babel.
366 |             // Unlike the application JS, we only compile the standard ES features.
367 |             {
368 |               test: /\.(js|mjs)$/,
369 |               exclude: /@babel(?:\/|\\{1,2})runtime/,
370 |               loader: require.resolve('babel-loader'),
371 |               options: {
372 |                 babelrc: false,
373 |                 configFile: false,
374 |                 compact: false,
375 |                 presets: [
376 |                   [
377 |                     require.resolve('babel-preset-react-app/dependencies'),
378 |                     { helpers: true },
379 |                   ],
380 |                 ],
381 |                 cacheDirectory: true,
382 |                 cacheCompression: isEnvProduction,
383 |                 
384 |                 // If an error happens in a package, it's possible to be
385 |                 // because it was compiled. Thus, we don't want the browser
386 |                 // debugger to show the original code. Instead, the code
387 |                 // being evaluated would be much more helpful.
388 |                 sourceMaps: false,
389 |               },
390 |             },
391 |             // "postcss" loader applies autoprefixer to our CSS.
392 |             // "css" loader resolves paths in CSS and adds assets as dependencies.
393 |             // "style" loader turns CSS into JS modules that inject <style> tags.
394 |             // In production, we use MiniCSSExtractPlugin to extract that CSS
395 |             // to a file, but in development "style" loader enables hot editing
396 |             // of CSS.
397 |             // By default we support CSS Modules with the extension .module.css
398 |             {
399 |               test: cssRegex,
400 |               exclude: cssModuleRegex,
401 |               use: getStyleLoaders({
402 |                 importLoaders: 1,
403 |                 sourceMap: isEnvProduction && shouldUseSourceMap,
404 |               }),
405 |               // Don't consider CSS imports dead code even if the
406 |               // containing package claims to have no side effects.
407 |               // Remove this when webpack adds a warning or an error for this.
408 |               // See https://github.com/webpack/webpack/issues/6571
409 |               sideEffects: true,
410 |             },
411 |             // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
412 |             // using the extension .module.css
413 |             {
414 |               test: cssModuleRegex,
415 |               use: getStyleLoaders({
416 |                 importLoaders: 1,
417 |                 sourceMap: isEnvProduction && shouldUseSourceMap,
418 |                 modules: true,
419 |                 getLocalIdent: getCSSModuleLocalIdent,
420 |               }),
421 |             },
422 |             // Opt-in support for SASS (using .scss or .sass extensions).
423 |             // By default we support SASS Modules with the
424 |             // extensions .module.scss or .module.sass
425 |             {
426 |               test: sassRegex,
427 |               exclude: sassModuleRegex,
428 |               use: getStyleLoaders(
429 |                 {
430 |                   importLoaders: 2,
431 |                   sourceMap: isEnvProduction && shouldUseSourceMap,
432 |                 },
433 |                 'sass-loader'
434 |               ),
435 |               // Don't consider CSS imports dead code even if the
436 |               // containing package claims to have no side effects.
437 |               // Remove this when webpack adds a warning or an error for this.
438 |               // See https://github.com/webpack/webpack/issues/6571
439 |               sideEffects: true,
440 |             },
441 |             // Adds support for CSS Modules, but using SASS
442 |             // using the extension .module.scss or .module.sass
443 |             {
444 |               test: sassModuleRegex,
445 |               use: getStyleLoaders(
446 |                 {
447 |                   importLoaders: 2,
448 |                   sourceMap: isEnvProduction && shouldUseSourceMap,
449 |                   modules: true,
450 |                   getLocalIdent: getCSSModuleLocalIdent,
451 |                 },
452 |                 'sass-loader'
453 |               ),
454 |             },
455 |             // "file" loader makes sure those assets get served by WebpackDevServer.
456 |             // When you `import` an asset, you get its (virtual) filename.
457 |             // In production, they would get copied to the `build` folder.
458 |             // This loader doesn't use a "test" so it will catch all modules
459 |             // that fall through the other loaders.
460 |             {
461 |               loader: require.resolve('file-loader'),
462 |               // Exclude `js` files to keep "css" loader working as it injects
463 |               // its runtime that would otherwise be processed through "file" loader.
464 |               // Also exclude `html` and `json` extensions so they get processed
465 |               // by webpacks internal loaders.
466 |               exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
467 |               options: {
468 |                 name: 'media/[name].[hash:8].[ext]',
469 |               },
470 |             },
471 |             // ** STOP ** Are you adding a new loader?
472 |             // Make sure to add the new loader(s) before the "file" loader.
473 |           ],
474 |         },
475 |       ],
476 |     },
477 |     plugins: [
478 |       // Generates an `index.html` file with the <script> injected.
479 |       new HtmlWebpackPlugin(
480 |         Object.assign(
481 |           {},
482 |           {
483 |             inject: true,
484 |             template: paths.appHtml,
485 |           },
486 |           isEnvProduction
487 |             ? {
488 |                 minify: {
489 |                   removeComments: true,
490 |                   collapseWhitespace: true,
491 |                   removeRedundantAttributes: true,
492 |                   useShortDoctype: true,
493 |                   removeEmptyAttributes: true,
494 |                   removeStyleLinkTypeAttributes: true,
495 |                   keepClosingSlash: true,
496 |                   minifyJS: true,
497 |                   minifyCSS: true,
498 |                   minifyURLs: true,
499 |                 },
500 |               }
501 |             : undefined
502 |         )
503 |       ),
504 |       // Inlines the webpack runtime script. This script is too small to warrant
505 |       // a network request.
506 |       isEnvProduction &&
507 |         shouldInlineRuntimeChunk &&
508 |         new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
509 |       // Makes some environment variables available in index.html.
510 |       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
511 |       // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
512 |       // In production, it will be an empty string unless you specify "homepage"
513 |       // in `package.json`, in which case it will be the pathname of that URL.
514 |       // In development, this will be an empty string.
515 |       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
516 |       // This gives some necessary context to module not found errors, such as
517 |       // the requesting resource.
518 |       new ModuleNotFoundPlugin(paths.appPath),
519 |       // Makes some environment variables available to the JS code, for example:
520 |       // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
521 |       // It is absolutely essential that NODE_ENV is set to production
522 |       // during a production build.
523 |       // Otherwise React will be compiled in the very slow development mode.
524 |       new webpack.DefinePlugin(env.stringified),
525 |       // This is necessary to emit hot updates (currently CSS only):
526 |       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
527 |       // Watcher doesn't work well if you mistype casing in a path so we use
528 |       // a plugin that prints an error when you attempt to do this.
529 |       // See https://github.com/facebook/create-react-app/issues/240
530 |       isEnvDevelopment && new CaseSensitivePathsPlugin(),
531 |       // If you require a missing module and then `npm install` it, you still have
532 |       // to restart the development server for Webpack to discover it. This plugin
533 |       // makes the discovery automatic so you don't have to restart.
534 |       // See https://github.com/facebook/create-react-app/issues/186
535 |       isEnvDevelopment &&
536 |         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
537 |       isEnvProduction &&
538 |         new MiniCssExtractPlugin({
539 |           // Options similar to the same options in webpackOptions.output
540 |           // both options are optional
541 |           filename: 'css/[name].[contenthash:8].css',
542 |           chunkFilename: 'css/[name].[contenthash:8].chunk.css',
543 |         }),
544 |       // Generate a manifest file which contains a mapping of all asset filenames
545 |       // to their corresponding output file so that tools can pick it up without
546 |       // having to parse `index.html`.
547 |       new ManifestPlugin({
548 |         fileName: 'asset-manifest.json',
549 |         publicPath: publicPath,
550 |         generate: (seed, files) => {
551 |           const manifestFiles = files.reduce(function(manifest, file) {
552 |             manifest[file.name] = file.path;
553 |             return manifest;
554 |           }, seed);
555 | 
556 |           return {
557 |             files: manifestFiles,
558 |           };
559 |         },
560 |       }),
561 |       // Moment.js is an extremely popular library that bundles large locale files
562 |       // by default due to how Webpack interprets its code. This is a practical
563 |       // solution that requires the user to opt into importing specific locales.
564 |       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
565 |       // You can remove this if you don't use Moment.js:
566 |       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
567 |       // Generate a service worker script that will precache, and keep up to date,
568 |       // the HTML & assets that are part of the Webpack build.
569 |       isEnvProduction &&
570 |         new WorkboxWebpackPlugin.GenerateSW({
571 |           clientsClaim: true,
572 |           exclude: [/\.map$/, /asset-manifest\.json$/],
573 |           importWorkboxFrom: 'cdn',
574 |           navigateFallback: publicUrl + '/index.html',
575 |           navigateFallbackBlacklist: [
576 |             // Exclude URLs starting with /_, as they're likely an API call
577 |             new RegExp('^/_'),
578 |             // Exclude URLs containing a dot, as they're likely a resource in
579 |             // public/ and not a SPA route
580 |             new RegExp('/[^/]+\\.[^/]+$'),
581 |           ],
582 |         }),
583 |       // TypeScript type checking
584 |       useTypeScript &&
585 |         new ForkTsCheckerWebpackPlugin({
586 |           typescript: resolve.sync('typescript', {
587 |             basedir: paths.appNodeModules,
588 |           }),
589 |           async: isEnvDevelopment,
590 |           useTypescriptIncrementalApi: true,
591 |           checkSyntacticErrors: true,
592 |           resolveModuleNameModule: process.versions.pnp
593 |             ? `${__dirname}/pnpTs.js`
594 |             : undefined,
595 |           resolveTypeReferenceDirectiveModule: process.versions.pnp
596 |             ? `${__dirname}/pnpTs.js`
597 |             : undefined,
598 |           tsconfig: paths.appTsConfig,
599 |           reportFiles: [
600 |             '**',
601 |             '!**/__tests__/**',
602 |             '!**/?(*.)(spec|test).*',
603 |             '!**/src/setupProxy.*',
604 |             '!**/src/setupTests.*',
605 |           ],
606 |           watch: paths.appSrc,
607 |           silent: true,
608 |           // The formatter is invoked directly in WebpackDevServerUtils during development
609 |           formatter: isEnvProduction ? typescriptFormatter : undefined,
610 |         }),
611 |     ].filter(Boolean),
612 |     // Some libraries import Node modules but don't use them in the browser.
613 |     // Tell Webpack to provide empty mocks for them so importing them works.
614 |     node: {
615 |       module: 'empty',
616 |       dgram: 'empty',
617 |       dns: 'mock',
618 |       fs: 'empty',
619 |       http2: 'empty',
620 |       net: 'empty',
621 |       tls: 'empty',
622 |       child_process: 'empty',
623 |     },
624 |     // Turn off performance processing because we utilize
625 |     // our own hints via the FileSizeReporter
626 |     performance: false,
627 |   };
628 | };
629 | 


--------------------------------------------------------------------------------