react collapse + charts

2020-06-17 21:39:46 +02:00
parent 6a1f4d6752
commit dd29a96161
10 changed files with 3041 additions and 140 deletions
--- a/admin/dist/main.js
+++ b/admin/dist/main.js
--- a/admin/package-lock.json
+++ b/admin/package-lock.json
@@ -1349,11 +1349,6 @@
      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
      "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
    },
-    "@reach/observe-rect": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.1.0.tgz",
-      "integrity": "sha512-kE+jvoj/OyJV24C03VvLt5zclb9ArJi04wWXMMFwQvdZjdHoBlN4g0ZQFjyy/ejPF1Z/dpUD5dhRdBiUmIGZTA=="
-    },
    "@sheerun/mutationobserver-shim": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
@@ -3435,6 +3430,32 @@
      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
    },
+    "chart.js": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz",
+      "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
    "chokidar": {
      "version": "3.4.0",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
@@ -4245,80 +4266,6 @@
        "type": "^1.0.1"
      }
    },
-    "d3-array": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.4.0.tgz",
-      "integrity": "sha512-KQ41bAF2BMakf/HdKT865ALd4cgND6VcIztVQZUTt0+BH3RWy6ZYnHghVXf6NFjt2ritLr8H1T8LreAAlfiNcw=="
-    },
-    "d3-color": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz",
-      "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q=="
-    },
-    "d3-delaunay": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-5.3.0.tgz",
-      "integrity": "sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==",
-      "requires": {
-        "delaunator": "4"
-      }
-    },
-    "d3-format": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.4.tgz",
-      "integrity": "sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw=="
-    },
-    "d3-interpolate": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
-      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
-      "requires": {
-        "d3-color": "1"
-      }
-    },
-    "d3-path": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
-      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
-    },
-    "d3-scale": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.1.tgz",
-      "integrity": "sha512-huz5byJO/6MPpz6Q8d4lg7GgSpTjIZW/l+1MQkzKfu2u8P6hjaXaStOpmyrD6ymKoW87d2QVFCKvSjLwjzx/rA==",
-      "requires": {
-        "d3-array": "1.2.0 - 2",
-        "d3-format": "1",
-        "d3-interpolate": "^1.2.0",
-        "d3-time": "1",
-        "d3-time-format": "2"
-      }
-    },
-    "d3-shape": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
-      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
-      "requires": {
-        "d3-path": "1"
-      }
-    },
-    "d3-time": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
-      "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
-    },
-    "d3-time-format": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.3.tgz",
-      "integrity": "sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==",
-      "requires": {
-        "d3-time": "1"
-      }
-    },
-    "d3-voronoi": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
-      "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
-    },
    "damerau-levenshtein": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -4494,11 +4441,6 @@
        }
      }
    },
-    "delaunator": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-4.0.1.tgz",
-      "integrity": "sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag=="
-    },
    "delayed-stream": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -10526,18 +10468,20 @@
        "whatwg-fetch": "^3.0.0"
      }
    },
-    "react-charts": {
-      "version": "2.0.0-beta.7",
-      "resolved": "https://registry.npmjs.org/react-charts/-/react-charts-2.0.0-beta.7.tgz",
-      "integrity": "sha512-iUspg9rnx7kD0H/wsK67HNUioOgKgJ8WRXr/Tk3EGP2qcFb9Vo7pjDk4oz1jH12TC+mqL+HFxNYraMkhWd6CUw==",
+    "react-chartjs-2": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.9.0.tgz",
+      "integrity": "sha512-IYwqUUnQRAJ9SNA978vxulHJTcUFTJk2LDVfbAyk0TnJFZZG7+6U/2flsE4MCw6WCbBjTTypy8T82Ch7XrPtRw==",
      "requires": {
-        "@reach/observe-rect": "^1.1.0",
-        "d3-delaunay": "^5.2.1",
-        "d3-scale": "^3.2.1",
-        "d3-shape": "^1.3.7",
-        "d3-voronoi": "^1.1.2"
+        "lodash": "^4.17.4",
+        "prop-types": "^15.5.8"
      }
    },
+    "react-collapse": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-5.0.1.tgz",
+      "integrity": "sha512-cN2tkxBWizhPQ2JHfe0aUSJtmMthKA17NZkTElpiQ2snQAAi1hssXZ2fv88rAPNNvG5ss4t0PbOZT0TIl9Lk3Q=="
+    },
    "react-dev-utils": {
      "version": "10.2.1",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
--- a/admin/package.json
+++ b/admin/package.json
@@ -6,8 +6,11 @@
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
+    "chart.js": "^2.9.3",
    "moment": "^2.26.0",
    "react": "^16.13.1",
+    "react-chartjs-2": "^2.9.0",
+    "react-collapse": "^5.0.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
--- a/admin/src/include/index.css
+++ b/admin/src/include/index.css
@@ -1,2 +1,6 @@
 .page-link { color: #222629; }
-.page-link:hover { color: black; }
+.page-link:hover { color: black; }
+
+.ReactCollapse--collapse {
+    transition: height 500ms;
+}
--- a/admin/src/views/adduser.js
+++ b/admin/src/views/adduser.js
@@ -3,6 +3,7 @@ import {Link} from "react-router-dom";
 import Alert from "../elements/alert";
 import Icon from "../elements/icon";
 import ReactTooltip from 'react-tooltip'
+import {Collapse} from "react-collapse/lib/Collapse";

 export default class CreateUser extends React.Component {

@@ -39,24 +40,6 @@ export default class CreateUser extends React.Component {
            errors.push(<Alert key={"error-" + i} onClose={() => this.removeError(i)} {...this.state.errors[i]}/>)
        }

-        let passwordForm = null;
-        if (!this.state.sendInvite) {
-            passwordForm = <div className={"mt-2"}>
-                <div className={"form-group"}>
-                    <label htmlFor={"password"}>Password</label>
-                    <input type={"password"} className={"form-control"} placeholder={"Password"}
-                           id={"password"} name={"password"} value={this.state.password}
-                           onChange={this.onChangeInput.bind(this)}/>
-                </div>
-                <div className={"form-group"}>
-                    <label htmlFor={"confirmPassword"}>Confirm Password</label>
-                    <input type={"password"} className={"form-control"} placeholder={"Confirm Password"}
-                           id={"confirmPassword"} name={"confirmPassword"} value={this.state.confirmPassword}
-                           onChange={this.onChangeInput.bind(this)}/>
-                </div>
-            </div>
-        }
-
        return <>
            <div className="content-header">
                <div className="container-fluid">
@@ -102,7 +85,24 @@ export default class CreateUser extends React.Component {
                                          data-type={"info"} data-place={"right"} data-effect={"solid"}/>
                                </label>
                            </div>
-                            {passwordForm}
+
+                            <Collapse isOpened={!this.state.sendInvite}>
+                                <div className={"mt-2"}>
+                                    <div className={"form-group"}>
+                                        <label htmlFor={"password"}>Password</label>
+                                        <input type={"password"} className={"form-control"} placeholder={"Password"}
+                                               id={"password"} name={"password"} value={this.state.password}
+                                               onChange={this.onChangeInput.bind(this)}/>
+                                    </div>
+                                    <div className={"form-group"}>
+                                        <label htmlFor={"confirmPassword"}>Confirm Password</label>
+                                        <input type={"password"} className={"form-control"} placeholder={"Confirm Password"}
+                                               id={"confirmPassword"} name={"confirmPassword"} value={this.state.confirmPassword}
+                                               onChange={this.onChangeInput.bind(this)}/>
+                                    </div>
+                                </div>
+                            </Collapse>
+
                            <Link to={"/admin/users"} className={"btn btn-info mt-2 mr-2"}>
                                <Icon icon={"arrow-left"}/>
                                &nbsp;Back
--- a/admin/src/views/overview.js
+++ b/admin/src/views/overview.js
@@ -1,6 +1,9 @@
 import * as React from "react";
 import {Link} from "react-router-dom";
 import Icon from "../elements/icon";
+import { Bar } from 'react-chartjs-2';
+import {Collapse} from 'react-collapse';
+import moment from 'moment';

 export default class Overview extends React.Component {

@@ -10,6 +13,10 @@ export default class Overview extends React.Component {
            showDialog: props.showDialog,
            notifications: props.notification,
            api: props.api,
+        };
+
+        this.state = {
+            chartVisible : true,
        }
    }

@@ -24,6 +31,22 @@ export default class Overview extends React.Component {
        let pageCount = 0;
        let visitorCount = 0;

+        const colors = [
+            '#ff4444', '#ffbb33', '#00C851', '#33b5e5',
+            '#ff4444', '#ffbb33', '#00C851', '#33b5e5',
+            '#ff4444', '#ffbb33', '#00C851', '#33b5e5'
+        ];
+
+        let chartOptions = {};
+        let chartData = {
+            labels: moment.monthsShort(),
+            datasets: [{
+                label: 'Unique Visitors ' + moment().year(),
+                borderWidth: 1,
+                data: [ 10, 20, 30, 0, 15, 5, 40, 100, 6, 3, 10, 20 ],
+                backgroundColor: colors,
+            }]
+        };

        return <>
            <div className={"content-header"}>
@@ -100,27 +123,29 @@ export default class Overview extends React.Component {
                            <div className="card-header">
                                <h3 className="card-title">Unique Visitors this year</h3>
                                <div className="card-tools">
-                                    <button type="button" className="btn btn-tool" data-card-widget="collapse">
+                                    <button type="button" className={"btn btn-tool"} onClick={(e) => {
+                                        e.preventDefault();
+                                        this.setState({ ...this.state, chartVisible: !this.state.chartVisible });
+                                    }}>
                                        <Icon icon={"minus"} />
                                    </button>
-                                    <button type="button" className="btn btn-tool" data-card-widget="remove">
-                                        <Icon icon={"times"} />
-                                    </button>
                                </div>
                            </div>
-                            <div className="card-body">
-                                <div className="chart">
-                                    <div className="chartjs-size-monitor">
-                                        <div className="chartjs-size-monitor-expand">
-                                            <div/>
-                                        </div>
-                                        <div className="chartjs-size-monitor-shrink">
-                                            <div/>
+                            <Collapse isOpened={this.state.chartVisible}>
+                                <div className="card-body">
+                                    <div className="chart">
+                                        <div className="chartjs-size-monitor">
+                                            <div className="chartjs-size-monitor-expand">
+                                                <div/>
+                                            </div>
+                                            <div className="chartjs-size-monitor-shrink">
+                                                <div/>
+                                            </div>
                                        </div>
+                                        <Bar data={chartData} options={chartOptions} />
                                    </div>
-                                    <BarChart data={data} series={series} axes={axes} tooltip />
                                </div>
-                            </div>
+                            </Collapse>
                        </div>
                    </div>
                </div>