├── .env.sample ├── .eslintrc ├── .gitignore ├── .nvmrc ├── .prettierrc ├── LICENSE-APACHE ├── LICENSE-MIT ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json └── src ├── actions ├── appStatus.js ├── chartData.js └── sheetData.js ├── charts ├── bar.jsx ├── barReverse.jsx ├── horizontalBar.jsx ├── horizontalBarReverse.jsx ├── line.jsx ├── lineReverse.jsx ├── pie.jsx └── pieReverse.jsx ├── components ├── App.jsx ├── Chart.jsx ├── ChartEditor.jsx ├── ChartView.jsx ├── Footer.jsx ├── InfoView.jsx ├── SheetPicker.jsx └── SpreadsheetPicker.jsx ├── constants.jsx ├── index.jsx ├── reducers ├── appStatus.js ├── chartData.js ├── index.js └── sheetData.js ├── screens └── Home.jsx ├── static └── images │ ├── robo-chart.gif │ ├── robo-chart.png │ └── spreadsheet-format.png ├── styles ├── App.scss ├── _Colors.scss ├── _Screens.scss └── _Variables.scss └── utils ├── handleOptions.jsx ├── horizontalBarOptions.jsx ├── lineOptions.jsx ├── pieOptions.jsx └── processSpreadsheet.jsx /.env.sample: -------------------------------------------------------------------------------- 1 | REACT_APP_CHART_TOKEN = '' 2 | REACT_APP_GSHEETS_API = 'https://sheets.googleapis.com/v4/spreadsheets/' 3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": ["airbnb", "prettier", "prettier/react"], 4 | "env": { 5 | "browser": true, 6 | "node": true, 7 | "jest": true 8 | }, 9 | "rules": { 10 | "react/prop-types": 0 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v10.17.0 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all" 4 | } 5 | -------------------------------------------------------------------------------- /LICENSE-APACHE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright 2019 Postlight 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Postlight 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Robo Chart 2 | 3 | Transform Google sheets to pretty charts! 4 | 5 | ![Robo Chart preview](src/static/images/robo-chart.png) 6 | 7 | ## How to Install 8 | 9 | To install the React Component, please check [this link](https://github.com/postlight/react-google-sheet-chart). 10 | 11 | To setup this repository, follow these steps: 12 | 13 | 1. Clone the project: 14 | 15 | > git clone https://github.com/postlight/robo-chart-web.git 16 | 17 | 2. Generate a Google API Key: https://console.cloud.google.com/apis/credentials 18 | 3. Rename `.env.sample` to `.env` and paste the generated API Key in the `REACT_APP_CHART_TOKEN` field 19 | 4. run the following commands: 20 | ```sh 21 | npm install 22 | npm start 23 | ``` 24 | 25 | Once setup is done, the app will be available on http://localhost:3000 26 | 27 | ## How to use 28 | 29 | Paste your Google Sheet URL in the Spreadsheet field, Robo Chart will fetch the data and process it. 30 | 31 | You can switch between different sheets, pick chart type, modify the Rows and Columns to process, flip Rows & Columns, modify colors and other.. 32 | 33 | ![Robo Chart preview](src/static/images/robo-chart.gif) 34 | 35 | ## Spreadsheet format 36 | 37 | In order to successfuly generate a chart, the Spreadsheet should have Row titles, Column titles and Values, example: 38 | 39 | ![Spreadsheet example](src/static/images/spreadsheet-format.png) 40 | 41 | ## License 42 | 43 | Licensed under either of the below, at your preference: 44 | 45 | - Apache License, Version 2.0 46 | ([LICENSE-APACHE](LICENSE-APACHE) or http://www.apache.org/licenses/LICENSE-2.0) 47 | - MIT license 48 | ([LICENSE-MIT](LICENSE-MIT) or http://opensource.org/licenses/MIT) 49 | 50 | ## Contributing 51 | 52 | Unless it is explicitly stated otherwise, any contribution intentionally submitted for inclusion in the work, as defined in the Apache-2.0 license, shall be dual licensed as above without any additional terms or conditions. 53 | 54 | --- 55 | 56 | 🔬 A Labs project from your friends at [Postlight](https://postlight.com/labs) 57 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "robo-chart-web", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.21.1", 7 | "bootstrap": "^4.3.1", 8 | "chart.js": "^2.7.3", 9 | "chartjs-plugin-annotation": "^0.5.7", 10 | "dom-to-image": "^2.6.0", 11 | "eslint-config-airbnb": "^17.1.0", 12 | "eslint-config-prettier": "^4.1.0", 13 | "eslint-plugin-import": "^2.16.0", 14 | "eslint-plugin-jsx-a11y": "^6.2.1", 15 | "eslint-plugin-prettier": "^3.0.1", 16 | "eslint-plugin-react": "^7.12.4", 17 | "lodash": "^4.17.20", 18 | "node-sass": "^4.14.1", 19 | "prettier": "^1.16.4", 20 | "prop-types": "^15.7.2", 21 | "randomcolor": "^0.5.4", 22 | "react": "^16.8.4", 23 | "react-bootstrap": "^1.0.0-beta.5", 24 | "react-chartjs-2": "^2.7.4", 25 | "react-color": "^2.17.0", 26 | "react-dom": "^16.8.4", 27 | "react-redux": "^6.0.1", 28 | "react-router-bootstrap": "^0.24.4", 29 | "react-router-dom": "^4.3.1", 30 | "react-scripts": "^3.4.3", 31 | "react-spinners": "^0.5.3", 32 | "redux": "^4.0.1" 33 | }, 34 | "scripts": { 35 | "deploy": "gcloud app deploy", 36 | "start": "react-scripts start", 37 | "build": "react-scripts build", 38 | "test": "react-scripts test", 39 | "eject": "react-scripts eject" 40 | }, 41 | "eslintConfig": { 42 | "extends": "react-app" 43 | }, 44 | "browserslist": [ 45 | ">0.2%", 46 | "not dead", 47 | "not ie <= 11", 48 | "not op_mini all" 49 | ] 50 | } 51 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/postlight/robo-chart-web/b0b6f8e4306469b816020757e94c6254c82128e3/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | 31 | 32 | Robo Chart 33 | 34 | 35 | 36 |
37 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Robo Chart", 3 | "name": "Transform ugly sheets to pretty charts!", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/actions/appStatus.js: -------------------------------------------------------------------------------- 1 | /** 2 | * App Status redux actions 3 | */ 4 | 5 | export const SET_FETCHING_DATA = 'SET_FETCHING_DATA'; 6 | export const SET_AUTH_ERROR = 'SET_AUTH_ERROR'; 7 | export const SET_ERROR = 'SET_ERROR'; 8 | 9 | /** 10 | * Flag an authentication error 11 | * @param {boolean} authError 12 | */ 13 | export function setAuthError(authError) { 14 | return { type: SET_AUTH_ERROR, authError }; 15 | } 16 | 17 | /** 18 | * Flag a query error 19 | * @param {boolean} error 20 | */ 21 | export function setError(error) { 22 | return { type: SET_ERROR, error }; 23 | } 24 | 25 | /** 26 | * Flag that data is being fetched, or is done fetching 27 | * @param {boolean} fetchingData 28 | */ 29 | export function setFetchingData(fetchingData) { 30 | return { type: SET_FETCHING_DATA, fetchingData }; 31 | } 32 | -------------------------------------------------------------------------------- /src/actions/chartData.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Chart data redux actions 3 | */ 4 | 5 | export const SET_CHART_DATA = 'SET_CHART_DATA'; 6 | export const SET_CHART_TYPE = 'SET_CHART_TYPE'; 7 | export const SET_CHART_COLORS = 'SET_CHART_COLORS'; 8 | export const SET_ACTIVE_COLOR = ' SET_ACTIVE_COLOR'; 9 | export const SET_CHART_TITLE = 'SET_CHART_TITLE'; 10 | export const SET_XSUFFIX = 'SET_XSUFFIX'; 11 | export const SET_YSUFFIX = 'SET_YSUFFIX'; 12 | export const SET_START_FROM = 'SET_START_FROM'; 13 | export const SET_FLIP_AXIS = 'SET_FLIP_AXIS'; 14 | export const RESET_CHART_DATA = 'RESET_CHART_DATA'; 15 | 16 | /** 17 | * Set processed chart data 18 | * @param {object} data 19 | */ 20 | export function setChartData(data) { 21 | return { type: SET_CHART_DATA, data }; 22 | } 23 | 24 | /** 25 | * Reset chart data, example: while changing active sheet 26 | * @param {object} data 27 | */ 28 | export function resetChartData() { 29 | return { type: RESET_CHART_DATA }; 30 | } 31 | 32 | /** 33 | * Set chart colors, includes an array of colors 34 | * @param {object} data 35 | */ 36 | export function setChartColors(data) { 37 | return { type: SET_CHART_COLORS, data }; 38 | } 39 | 40 | /** 41 | * Set active color (color currently being edited) 42 | * @param {string} color 43 | */ 44 | export function setActiveColor(color) { 45 | return { type: SET_ACTIVE_COLOR, color }; 46 | } 47 | 48 | /** 49 | * Set chart type, one of: 50 | * line 51 | * bar 52 | * horizontalBar 53 | * stacked 54 | * pie 55 | * semi-pie 56 | * doughnut 57 | * semi-doughnut 58 | * @param {string} chartType 59 | */ 60 | export function setChartType(chartType) { 61 | return { type: SET_CHART_TYPE, chartType }; 62 | } 63 | 64 | /** 65 | * Set chart title 66 | * @param {string} title 67 | */ 68 | export function setChartTitle(title) { 69 | return { type: SET_CHART_TITLE, title }; 70 | } 71 | 72 | /** 73 | * Set x axis labels suffix 74 | * @param {string} xsuffix 75 | */ 76 | export function setxSuffix(xsuffix) { 77 | return { type: SET_XSUFFIX, xsuffix }; 78 | } 79 | 80 | /** 81 | * Set y axis labels suffix 82 | * @param {string} ysuffix 83 | */ 84 | export function setySuffix(ysuffix) { 85 | return { type: SET_YSUFFIX, ysuffix }; 86 | } 87 | 88 | /** 89 | * Set start from for the values axis. 90 | * example: if minimum value is 10000, user might choose to start the Y Axis from 9000 instead of 0 91 | * @param {number} startFrom 92 | */ 93 | export function setStartFrom(startFrom) { 94 | return { type: SET_START_FROM, startFrom }; 95 | } 96 | 97 | /** 98 | * Flip axis, process the sheet's columns as rows and vice versa 99 | * @param {string} flipAxis 100 | */ 101 | export function setFlipAxis(flipAxis) { 102 | return { type: SET_FLIP_AXIS, flipAxis }; 103 | } 104 | -------------------------------------------------------------------------------- /src/actions/sheetData.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sheet data redux actions 3 | */ 4 | 5 | export const SET_SHEET_ID = 'SET_SHEET_ID'; 6 | export const SET_SHEET_DATA = 'SET_SHEET_DATA'; 7 | export const SET_ACTIVE_SHEET = 'SET_ACTIVE_SHEET'; 8 | export const SET_START_AND_END = 'SET_START_AND_END'; 9 | export const RESET_SHEET_DATA = 'RESET_SHEET_DATA'; 10 | 11 | /** 12 | * Set raw sheet data 13 | * @param {object} data 14 | */ 15 | export function setSheetData(data) { 16 | return { type: SET_SHEET_DATA, data }; 17 | } 18 | 19 | /** 20 | * Set start and end cells 21 | * e.g.: A5, E15 22 | * @param {object} data 23 | */ 24 | export function setStartAndEnd(data) { 25 | return { type: SET_START_AND_END, data }; 26 | } 27 | 28 | /** 29 | * Set sheet id, found in Google sheet urls 30 | * e.g.: 1RE_JYUCXBXY2LNV5Tp5GegLnMue-CpfTVMxjdudZ8Js 31 | * @param {string} sheetId 32 | */ 33 | export function setSheetId(sheetId) { 34 | return { type: SET_SHEET_ID, sheetId }; 35 | } 36 | 37 | /** 38 | * Set active sheet 39 | * @param {string} activeSheet 40 | */ 41 | export function setActiveSheet(activeSheet) { 42 | return { type: SET_ACTIVE_SHEET, activeSheet }; 43 | } 44 | 45 | /** 46 | * Reset sheet data 47 | * @param {string} activeSheet 48 | */ 49 | export function resetSheetData() { 50 | return { type: RESET_SHEET_DATA }; 51 | } 52 | -------------------------------------------------------------------------------- /src/charts/bar.jsx: -------------------------------------------------------------------------------- 1 | import { randomColor } from 'randomcolor'; 2 | import options from '../utils/lineOptions'; 3 | 4 | /** 5 | * Returns chart data specific for Bar chart type 6 | * 7 | * @param {object} data chart data 8 | * @param {boolean} stacked true or false 9 | * @param {array} colors array of colors used to present data 10 | */ 11 | const getBarChartData = (data, stacked, colors) => { 12 | const chartData = { 13 | labels: [], 14 | datasets: [], 15 | info: [], 16 | annotations: [], 17 | options, 18 | colors: [], 19 | }; 20 | 21 | let columnCount = 0; 22 | let colorIndex = 0; 23 | data.forEach((element, rowindex) => { 24 | if (columnCount === 0) { 25 | columnCount = element.length; 26 | } 27 | element.forEach((value, colindex) => { 28 | const numericalValue = value.replace(/[^\d.-]/g, ''); 29 | 30 | if (rowindex === 0) { 31 | if (value && value.length > 0) { 32 | const object = { data: [] }; 33 | let color = colors[colorIndex]; 34 | if (!colors || colorIndex >= colors.length) { 35 | color = randomColor(); 36 | } 37 | colorIndex += 1; 38 | object.borderColor = color; 39 | object.backgroundColor = color; 40 | object.pointBorderColor = color; 41 | object.pointBackgroundColor = color; 42 | object.pointHoverBackgroundColor = color; 43 | object.pointHoverBorderColor = color; 44 | object.label = value; 45 | chartData.datasets.push(object); 46 | 47 | chartData.colors.push(color); 48 | } 49 | } else if (colindex === 0) { 50 | chartData.labels.push(value); 51 | } else if (chartData.datasets[colindex - 1]) { 52 | chartData.datasets[colindex - 1].data.push(numericalValue); 53 | } 54 | }); 55 | let i = element.length; 56 | for (; i < columnCount; ) { 57 | if (chartData.datasets[i - 1]) { 58 | chartData.datasets[i - 1].data.push(0); 59 | } 60 | i += 1; 61 | } 62 | }); 63 | 64 | chartData.options.scales.xAxes[0].labels = chartData.labels; 65 | chartData.options.scales.xAxes[0].stacked = stacked; 66 | chartData.options.scales.yAxes[0].ticks = { 67 | beginAtZero: true, 68 | }; 69 | chartData.options.scales.xAxes[0].ticks = { 70 | beginAtZero: true, 71 | }; 72 | 73 | return chartData; 74 | }; 75 | 76 | export default getBarChartData; 77 | -------------------------------------------------------------------------------- /src/charts/barReverse.jsx: -------------------------------------------------------------------------------- 1 | import { randomColor } from 'randomcolor'; 2 | import options from '../utils/lineOptions'; 3 | 4 | /** 5 | * Returns chart data specific for Bar chart type with reversed axis processing 6 | * 7 | * @param {object} data chart data 8 | * @param {boolean} stacked true or false 9 | * @param {array} colors array of colors used to present data 10 | */ 11 | const getBarReverseChartData = (data, stacked, colors) => { 12 | const chartData = { 13 | labels: [], 14 | datasets: [], 15 | info: [], 16 | annotations: [], 17 | options, 18 | colors: [], 19 | }; 20 | 21 | let columnCount = 0; 22 | let colorIndex = 0; 23 | data.forEach((element, rowindex) => { 24 | if (columnCount === 0) { 25 | columnCount = element.length; 26 | } 27 | element.forEach((value, colindex) => { 28 | const numericalValue = value.replace(/[^\d.-]/g, ''); 29 | 30 | if (rowindex === 0) { 31 | if (value && value.length > 0) { 32 | chartData.labels.push(value); 33 | } 34 | } else if (colindex === 0) { 35 | if (value && value.length > 0) { 36 | const object = { data: [] }; 37 | let color = colors[colorIndex]; 38 | if (!colors || colorIndex >= colors.length) { 39 | color = randomColor(); 40 | } 41 | colorIndex += 1; 42 | object.borderColor = color; 43 | object.backgroundColor = color; 44 | object.pointBorderColor = color; 45 | object.pointBackgroundColor = color; 46 | object.pointHoverBackgroundColor = color; 47 | object.pointHoverBorderColor = color; 48 | object.label = value; 49 | chartData.datasets.push(object); 50 | 51 | chartData.colors.push(color); 52 | } 53 | } else if (chartData.datasets[rowindex - 1]) { 54 | chartData.datasets[rowindex - 1].data.push(numericalValue); 55 | } 56 | }); 57 | }); 58 | 59 | chartData.options.scales.xAxes[0].labels = chartData.labels; 60 | chartData.options.scales.xAxes[0].stacked = stacked; 61 | chartData.options.scales.yAxes[0].ticks = { 62 | beginAtZero: true, 63 | }; 64 | chartData.options.scales.xAxes[0].ticks = { 65 | beginAtZero: true, 66 | }; 67 | return chartData; 68 | }; 69 | 70 | export default getBarReverseChartData; 71 | -------------------------------------------------------------------------------- /src/charts/horizontalBar.jsx: -------------------------------------------------------------------------------- 1 | import { randomColor } from 'randomcolor'; 2 | import options from '../utils/horizontalBarOptions'; 3 | 4 | /** 5 | * Returns chart data specific for Horizontal Bar chart type 6 | * 7 | * @param {object} data chart data 8 | * @param {array} colors array of colors used to present data 9 | */ 10 | const getHorizontalBarChartData = (data, colors) => { 11 | const chartData = { 12 | labels: [], 13 | datasets: [], 14 | options, 15 | colors: [], 16 | }; 17 | 18 | let columnCount = 0; 19 | let colorIndex = 0; 20 | data.forEach((element, rowindex) => { 21 | if (columnCount === 0) { 22 | columnCount = element.length; 23 | } 24 | element.forEach((value, colindex) => { 25 | const numericalValue = value.replace(/[^\d.-]/g, ''); 26 | if (rowindex === 0) { 27 | if (value && value.length > 0) { 28 | chartData.labels.push(value); 29 | } 30 | } else if (colindex === 0) { 31 | if (value && value.length > 0) { 32 | const object = { data: [] }; 33 | let color = colors[colorIndex]; 34 | if (!colors || colorIndex >= colors.length) { 35 | color = randomColor(); 36 | } 37 | colorIndex += 1; 38 | object.borderColor = color; 39 | object.backgroundColor = color; 40 | object.borderWidth = 1; 41 | object.label = value; 42 | object.hoverBackgroundColor = color; 43 | object.hoverBorderColor = color; 44 | chartData.datasets.push(object); 45 | 46 | chartData.colors.push(color); 47 | } 48 | } else if (chartData.datasets[rowindex - 1]) { 49 | chartData.datasets[rowindex - 1].data.push(numericalValue); 50 | } 51 | }); 52 | }); 53 | return chartData; 54 | }; 55 | 56 | export default getHorizontalBarChartData; 57 | -------------------------------------------------------------------------------- /src/charts/horizontalBarReverse.jsx: -------------------------------------------------------------------------------- 1 | import { randomColor } from 'randomcolor'; 2 | import options from '../utils/horizontalBarOptions'; 3 | 4 | /** 5 | * Returns chart data specific for Horizontal Bar chart type with reversed axis processing 6 | * 7 | * @param {object} data chart data 8 | * @param {array} colors array of colors used to present data 9 | */ 10 | const getHorizontalBarReverseChartData = (data, colors) => { 11 | const chartData = { 12 | labels: [], 13 | datasets: [], 14 | options, 15 | colors: [], 16 | }; 17 | 18 | let columnCount = 0; 19 | let colorIndex = 0; 20 | data.forEach((element, rowindex) => { 21 | if (columnCount === 0) { 22 | columnCount = element.length; 23 | } 24 | element.forEach((value, colindex) => { 25 | const numericalValue = value.replace(/[^\d.-]/g, ''); 26 | if (rowindex === 0) { 27 | if (value && value.length > 0) { 28 | const object = { data: [] }; 29 | let color = colors[colorIndex]; 30 | if (!colors || colorIndex >= colors.length) { 31 | color = randomColor(); 32 | } 33 | colorIndex += 1; 34 | object.borderColor = color; 35 | object.backgroundColor = color; 36 | object.borderWidth = 1; 37 | object.label = value; 38 | object.hoverBackgroundColor = color; 39 | object.hoverBorderColor = color; 40 | chartData.datasets.push(object); 41 | 42 | chartData.colors.push(color); 43 | } 44 | } else if (colindex === 0) { 45 | if (value && value.length > 0) { 46 | chartData.labels.push(value); 47 | } 48 | } else if (chartData.datasets[colindex - 1]) { 49 | chartData.datasets[colindex - 1].data.push(numericalValue); 50 | } 51 | }); 52 | }); 53 | return chartData; 54 | }; 55 | 56 | export default getHorizontalBarReverseChartData; 57 | -------------------------------------------------------------------------------- /src/charts/line.jsx: -------------------------------------------------------------------------------- 1 | import { randomColor } from 'randomcolor'; 2 | import options from '../utils/lineOptions'; 3 | 4 | /** 5 | * Returns chart data specific for Line chart type 6 | * 7 | * @param {object} data chart data 8 | * @param {array} colors array of colors used to present data 9 | */ 10 | const getLineChartData = (data, colors) => { 11 | const chartData = { 12 | labels: [], 13 | datasets: [], 14 | info: [], 15 | annotations: [], 16 | options, 17 | colors: [], 18 | }; 19 | 20 | let columnCount = 0; 21 | let colorIndex = 0; 22 | data.forEach((element, rowindex) => { 23 | if (columnCount === 0) { 24 | columnCount = element.length; 25 | } 26 | element.forEach((value, colindex) => { 27 | const numericalValue = value.replace(/[^\d.-]/g, ''); 28 | if (rowindex === 0) { 29 | if (value && value.length > 0) { 30 | const object = { data: [] }; 31 | let color = colors[colorIndex]; 32 | if (!colors || colorIndex >= colors.length) { 33 | color = randomColor(); 34 | } 35 | colorIndex += 1; 36 | object.borderColor = color; 37 | object.backgroundColor = color; 38 | object.pointBorderColor = color; 39 | object.pointBackgroundColor = color; 40 | object.pointHoverBackgroundColor = color; 41 | object.pointHoverBorderColor = color; 42 | object.fill = false; 43 | object.label = value; 44 | chartData.datasets.push(object); 45 | 46 | chartData.colors.push(color); 47 | } 48 | } else if (colindex === 0) { 49 | chartData.labels.push(value); 50 | } else if (chartData.datasets[colindex - 1]) { 51 | chartData.datasets[colindex - 1].data.push(numericalValue); 52 | } 53 | }); 54 | let i = element.length; 55 | for (; i < columnCount; ) { 56 | if (chartData.datasets[i - 1]) { 57 | chartData.datasets[i - 1].data.push(0); 58 | } 59 | i += 1; 60 | } 61 | }); 62 | 63 | chartData.options.scales.xAxes[0].labels = chartData.labels; 64 | return chartData; 65 | }; 66 | 67 | export default getLineChartData; 68 | -------------------------------------------------------------------------------- /src/charts/lineReverse.jsx: -------------------------------------------------------------------------------- 1 | import randomColor from 'randomcolor'; 2 | import options from '../utils/lineOptions'; 3 | 4 | /** 5 | * Returns chart data specific for Line chart type with reversed axis processing 6 | * 7 | * @param {object} data chart data 8 | * @param {array} colors array of colors used to present data 9 | */ 10 | const getLineReverseChartData = (data, colors) => { 11 | const chartData = { 12 | labels: [], 13 | datasets: [], 14 | info: [], 15 | annotations: [], 16 | options, 17 | colors: [], 18 | }; 19 | 20 | let columnCount = 0; 21 | let colorIndex = 0; 22 | data.forEach((element, rowindex) => { 23 | if (columnCount === 0) { 24 | columnCount = element.length; 25 | } 26 | element.forEach((value, colindex) => { 27 | const numericalValue = value.replace(/[^\d.-]/g, ''); 28 | if (rowindex === 0) { 29 | if (value && value.length > 0) { 30 | chartData.labels.push(value); 31 | } 32 | } else if (colindex === 0) { 33 | if (value && value.length > 0) { 34 | const object = { data: [] }; 35 | let color = colors[colorIndex]; 36 | if (!colors || colorIndex >= colors.length) { 37 | color = randomColor(); 38 | } 39 | colorIndex += 1; 40 | object.borderColor = color; 41 | object.backgroundColor = color; 42 | object.pointBorderColor = color; 43 | object.pointBackgroundColor = color; 44 | object.pointHoverBackgroundColor = color; 45 | object.pointHoverBorderColor = color; 46 | object.fill = false; 47 | object.label = value; 48 | chartData.datasets.push(object); 49 | 50 | chartData.colors.push(color); 51 | } 52 | } else if (chartData.datasets[rowindex - 1]) { 53 | chartData.datasets[rowindex - 1].data.push(numericalValue); 54 | } 55 | }); 56 | }); 57 | 58 | chartData.options.scales.xAxes[0].labels = chartData.labels; 59 | return chartData; 60 | }; 61 | 62 | export default getLineReverseChartData; 63 | -------------------------------------------------------------------------------- /src/charts/pie.jsx: -------------------------------------------------------------------------------- 1 | import { randomColor } from 'randomcolor'; 2 | import options from '../utils/pieOptions'; 3 | 4 | /** 5 | * Returns chart data specific for Pie chart type 6 | * 7 | * @param {object} data chart data 8 | * @param {boolean} semi true or false 9 | * @param {array} colors array of colors used to present data 10 | */ 11 | const getPieChartData = (data, semi, colors) => { 12 | const chartData = { 13 | data: { 14 | datasets: [], 15 | labels: [], 16 | }, 17 | options, 18 | colors: [], 19 | }; 20 | 21 | if (semi) { 22 | chartData.options.circumference = Math.PI; 23 | chartData.options.rotation = -Math.PI; 24 | } else { 25 | chartData.options.circumference = 2 * Math.PI; 26 | chartData.options.rotation = 0; 27 | } 28 | 29 | let colorIndex = 0; 30 | data.forEach((element, rowindex) => { 31 | element.forEach((value, colindex) => { 32 | const numericalValue = value.replace(/[^\d.-]/g, ''); 33 | if (rowindex === 0) { 34 | if (value && value.length > 0) { 35 | const object = { data: [], backgroundColor: [], label: '' }; 36 | object.label = value; 37 | chartData.data.datasets.push(object); 38 | } 39 | } else if (colindex === 0) { 40 | chartData.data.labels.push(value); 41 | } else { 42 | let color = colors[colorIndex]; 43 | if (!colors || colorIndex >= colors.length) { 44 | color = randomColor(); 45 | } 46 | colorIndex += 1; 47 | if (chartData.data.datasets[colindex - 1]) { 48 | chartData.data.datasets[colindex - 1].backgroundColor.push(color); 49 | chartData.data.datasets[colindex - 1].data.push(numericalValue); 50 | } 51 | chartData.colors.push(color); 52 | } 53 | }); 54 | }); 55 | 56 | const finalDatasets = []; 57 | chartData.data.datasets.forEach(dataset => { 58 | if (dataset.data.length > 0) { 59 | finalDatasets.push(dataset); 60 | } 61 | }); 62 | 63 | chartData.data.datasets = finalDatasets; 64 | 65 | return chartData; 66 | }; 67 | 68 | export default getPieChartData; 69 | -------------------------------------------------------------------------------- /src/charts/pieReverse.jsx: -------------------------------------------------------------------------------- 1 | import { randomColor } from 'randomcolor'; 2 | import options from '../utils/pieOptions'; 3 | 4 | /** 5 | * Returns chart data specific for Pie chart type with reversed axis processing 6 | * 7 | * @param {object} data chart data 8 | * @param {boolean} semi true or false 9 | * @param {array} colors array of colors used to present data 10 | */ 11 | const getPieReverseChartData = (data, semi, colors) => { 12 | const chartData = { 13 | data: { 14 | datasets: [], 15 | labels: [], 16 | }, 17 | options, 18 | colors: [], 19 | }; 20 | 21 | if (semi) { 22 | chartData.options.circumference = Math.PI; 23 | chartData.options.rotation = -Math.PI; 24 | } else { 25 | chartData.options.circumference = 2 * Math.PI; 26 | chartData.options.rotation = 0; 27 | } 28 | 29 | let colorIndex = 0; 30 | data.forEach((element, rowindex) => { 31 | element.forEach((value, colindex) => { 32 | const numericalValue = value.replace(/[^\d.-]/g, ''); 33 | if (colindex === 0) { 34 | if (value && value.length > 0) { 35 | const object = { data: [], backgroundColor: [], label: '' }; 36 | object.label = value; 37 | chartData.data.datasets.push(object); 38 | if (chartData.data.labels.length === 0) { 39 | chartData.data.labels.push(value); 40 | } 41 | } 42 | } else if (rowindex === 0) { 43 | chartData.data.labels.push(value); 44 | } else { 45 | let color = colors[colorIndex]; 46 | if (!colors || colorIndex >= colors.length) { 47 | color = randomColor(); 48 | } 49 | colorIndex += 1; 50 | if (chartData.data.datasets[rowindex - 1]) { 51 | chartData.data.datasets[rowindex - 1].backgroundColor.push(color); 52 | chartData.data.datasets[rowindex - 1].data.push(numericalValue); 53 | } 54 | chartData.colors.push(color); 55 | } 56 | }); 57 | }); 58 | 59 | const finalDatasets = []; 60 | chartData.data.datasets.forEach(dataset => { 61 | if (dataset.data.length > 0) { 62 | finalDatasets.push(dataset); 63 | } 64 | }); 65 | 66 | chartData.data.datasets = finalDatasets; 67 | return chartData; 68 | }; 69 | 70 | export default getPieReverseChartData; 71 | -------------------------------------------------------------------------------- /src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Switch, Route, Redirect } from 'react-router-dom'; 3 | import Footer from './Footer'; 4 | import Home from '../screens/Home'; 5 | import '../styles/App.scss'; 6 | 7 | const App = () => { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 |