From d48618d2f0509f22eeeda80d5a5b4fad2e31f942 Mon Sep 17 00:00:00 2001 From: dedenbangkit Date: Thu, 13 Feb 2020 22:28:12 +0800 Subject: [PATCH] =?UTF-8?q?[#76]=20Charts=20Filter=20Factory=20?= =?UTF-8?q?=F0=9F=94=A5=20=F0=9F=94=A5=20=F0=9F=94=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Console/Commands/SeedCountryValues.php | 46 +- .../Http/Controllers/Api/TestController.php | 4 +- sites/unep-dashboard/public/css/all.css | 38 +- sites/unep-dashboard/public/js/app.js | 880 +++++++++++------- .../resources/js/components/Charts.js | 57 +- .../resources/js/components/DataCountries.js | 2 +- .../resources/js/components/DataFilters.js | 30 +- .../resources/js/components/Navigation.js | 8 +- .../resources/js/components/Page.js | 9 +- .../resources/js/data/chart-utils.js | 25 + .../resources/js/data/features/animation.js | 10 + .../js/data/{barExample.js => options/Bar.js} | 17 +- .../data/{mapExample.js => options/Maps.js} | 21 +- .../resources/js/data/options/Pie.js | 57 ++ .../resources/js/data/options/index.js | 0 .../resources/js/data/pieExample.js | 57 -- .../unep-dashboard/resources/js/pages/Home.js | 36 +- .../resources/js/reducers/actions.js | 34 +- .../js/reducers/helpers/chart-helpers.js | 10 - .../resources/js/reducers/reducers.js | 110 +-- .../js/reducers/states/chart-states.js | 59 ++ .../filter-states.js} | 48 +- .../page-helpers.js => states/page-states.js} | 3 +- .../unep-dashboard/resources/sass/custom.css | 38 +- sites/unep-dashboard/routes/api.php | 2 + 25 files changed, 1044 insertions(+), 557 deletions(-) create mode 100644 sites/unep-dashboard/resources/js/data/chart-utils.js create mode 100644 sites/unep-dashboard/resources/js/data/features/animation.js rename sites/unep-dashboard/resources/js/data/{barExample.js => options/Bar.js} (54%) rename sites/unep-dashboard/resources/js/data/{mapExample.js => options/Maps.js} (74%) create mode 100644 sites/unep-dashboard/resources/js/data/options/Pie.js create mode 100644 sites/unep-dashboard/resources/js/data/options/index.js delete mode 100644 sites/unep-dashboard/resources/js/data/pieExample.js delete mode 100644 sites/unep-dashboard/resources/js/reducers/helpers/chart-helpers.js create mode 100644 sites/unep-dashboard/resources/js/reducers/states/chart-states.js rename sites/unep-dashboard/resources/js/reducers/{helpers/filter-helpers.js => states/filter-states.js} (54%) rename sites/unep-dashboard/resources/js/reducers/{helpers/page-helpers.js => states/page-states.js} (75%) diff --git a/sites/unep-dashboard/app/Console/Commands/SeedCountryValues.php b/sites/unep-dashboard/app/Console/Commands/SeedCountryValues.php index 5f9e0aca..79aac497 100644 --- a/sites/unep-dashboard/app/Console/Commands/SeedCountryValues.php +++ b/sites/unep-dashboard/app/Console/Commands/SeedCountryValues.php @@ -14,7 +14,7 @@ class SeedCountryValues extends Command * * @var string */ - protected $signature = 'seed:values {ncategory=10} {ncountry=10}'; + protected $signature = 'seed:values {ncategory=10} {ncountry=10} {type=random}'; /** * The console command description. @@ -42,6 +42,49 @@ public function handle() { $ncategory = $this->argument('ncategory'); $ncountry = $this->argument('ncountry'); + $type = $this->argument('type'); + if ($type === "random") { + $this->SeedRandomValue($ncategory, $ncountry); + } + if ($type === "category") { + $this->SeedCategory($ncategory, $ncountry); + } + } + + private function SeedCategory($id, $ncountry) + { + $url = 'http://geodata.grid.unep.ch/api/countries/#cid/'.'variables/#vid/'.'years/2012'; + $countries = \App\Country::select('id','code')->get()->random($ncountry); + $var = \App\Value::select('id','code') + ->where('id', $id)->first(); + $countries = collect($countries)->map(function($data) use ($url, $var) { + $faker = Faker::create(); + $client = New \GuzzleHttp\Client(); + $url = str_replace('#cid',$data->code, $url); + $url = str_replace('#vid',$var->code, $url); + echo 'FETCH:'.$url."\n"; + $response = $client->request('GET', $url)->getBody(); + $response = json_decode($response); + $response_value = null; + $results = null; + if ($response !== "null"){ + $response_value = $response[0]->value; + $results = array( + 'country_id' => $data->id, + 'value_id' => $var->id, + 'value' => $response_value, + 'description' => $faker->sentence() + ); + } + usleep(500000); + return $results; + }); + $input = $countries->filter()->values()->toArray(); + \App\CountryValue::insert($input); + } + + private function SeedRandomValue($ncategory, $ncountry) + { $url = 'http://geodata.grid.unep.ch/api/countries/#cid/'.'variables/#vid/'.'years/2008'; $countries = \App\Country::select('id','code')->get()->random($ncountry); $variables = \App\Value::select('id','code') @@ -74,6 +117,5 @@ public function handle() }); $input = $countries->flatten(1)->filter()->values()->toArray(); \App\CountryValue::insert($input); - } } diff --git a/sites/unep-dashboard/app/Http/Controllers/Api/TestController.php b/sites/unep-dashboard/app/Http/Controllers/Api/TestController.php index a4273bd5..17dd7162 100644 --- a/sites/unep-dashboard/app/Http/Controllers/Api/TestController.php +++ b/sites/unep-dashboard/app/Http/Controllers/Api/TestController.php @@ -7,11 +7,11 @@ use App\Country; use App\Value; use App\CountryValue; +use Faker\Factory as Faker; class TestController extends Controller { - public function test(Country $countries, Value $values, CountryValue $countryvalues) + public function test() { - return $values->with('countries')->get(); } } diff --git a/sites/unep-dashboard/public/css/all.css b/sites/unep-dashboard/public/css/all.css index d2629795..5a38053c 100644 --- a/sites/unep-dashboard/public/css/all.css +++ b/sites/unep-dashboard/public/css/all.css @@ -141,10 +141,6 @@ body { padding-top: 0px !important; } -.right-dropdowns.dropdown { - float: right; -} - .jumbotron { margin-top: 20px; } @@ -164,6 +160,8 @@ body { background-color: #009fe2 !important; font-family: "Assistant", sans-serif; border: 1px solid #0e9e82 !important; + border-radius: 0px; + border-bottom: solid 3px #0478a9!important; } .btn-primary:hover { @@ -270,9 +268,23 @@ h1.title-page { } .dropdown-menu.show { + width: 100%; max-width: 100%; } +.dropdown-fix { + display: inline-block; + margin-right: 10px; + padding-right: 10px; + border-right: 1px solid #ddd; + width: 100%; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 12px; +} + @media (min-width: 992px) { .container, .container-lg, @@ -280,6 +292,16 @@ h1.title-page { .container-sm { max-width: 95%!important; } + + .dropdown-menu.show { + width: 100%; + } + + .dropdown-fix { + width: 200px; + max-width: 200px; + } + .navbar-expand-lg .navbar-collapse { display: -webkit-box !important; display: flex !important; @@ -298,14 +320,13 @@ h1.title-page { } .nav-right { height: 40px; - border-bottom: solid 3px #0478a9; } + .nav-right .right-dropdowns, .nav-right .btn { height: 37px; - padding-left: 20px; - padding-right: 20px; line-height: 26px; border-radius: 0px; + border-bottom: solid 3px #0478a9!important; } .nav-right .btn svg { margin-right: 10px; @@ -319,9 +340,6 @@ h1.title-page { min-width:100%; padding-bottom: 10px; } - .container .right-dropdowns.dropdown{ - margin-right: 0px; - } .container .dropdown .btn { min-width:100%; text-align: left; diff --git a/sites/unep-dashboard/public/js/app.js b/sites/unep-dashboard/public/js/app.js index 3ddf5891..5187fd94 100644 --- a/sites/unep-dashboard/public/js/app.js +++ b/sites/unep-dashboard/public/js/app.js @@ -206095,8 +206095,10 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js"); /* harmony import */ var _reducers_actions_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../reducers/actions.js */ "./resources/js/reducers/actions.js"); -/* harmony import */ var echarts_for_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! echarts-for-react */ "./node_modules/echarts-for-react/lib/index.js"); -/* harmony import */ var echarts_for_react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(echarts_for_react__WEBPACK_IMPORTED_MODULE_3__); +/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-bootstrap */ "./node_modules/react-bootstrap/esm/index.js"); +/* harmony import */ var _data_chart_utils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../data/chart-utils.js */ "./resources/js/data/chart-utils.js"); +/* harmony import */ var echarts_for_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! echarts-for-react */ "./node_modules/echarts-for-react/lib/index.js"); +/* harmony import */ var echarts_for_react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(echarts_for_react__WEBPACK_IMPORTED_MODULE_5__); function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -206107,10 +206109,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } -function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } - function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } @@ -206121,29 +206123,69 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func + + var Charts = /*#__PURE__*/ function (_Component) { _inherits(Charts, _Component); function Charts(props) { + var _this; + _classCallCheck(this, Charts); - return _possibleConstructorReturn(this, _getPrototypeOf(Charts).call(this, props)); + _this = _possibleConstructorReturn(this, _getPrototypeOf(Charts).call(this, props)); + _this.state = { + option: _data_chart_utils_js__WEBPACK_IMPORTED_MODULE_4__["loadingChart"], + style: _this.props.data.style, + selected: _this.props.selected + }; + _this.clickEvent = _this.clickEvent.bind(_assertThisInitialized(_this)); + _this.doubleClickEvent = _this.doubleClickEvent.bind(_assertThisInitialized(_this)); + return _this; } _createClass(Charts, [{ + key: "doubleClickEvent", + value: function doubleClickEvent() { + this.setState({ + selected: this.props.selected + }); + this.props.chart.value.select(this.state.selected.id); + } + }, { + key: "clickEvent", + value: function clickEvent(param) { + var data = [param.data]; + this.props.chart.value.filter(data); + } + }, { key: "render", value: function render() { - var option = this.props.option; - var style = this.props.data.style; - return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(echarts_for_react__WEBPACK_IMPORTED_MODULE_3___default.a, { - option: option, + var _this2 = this; + + setTimeout(function () { + _this2.setState({ + option: _this2.props.option + }); + }, 500); + var onEvents = { + 'click': this.clickEvent, + 'dblclick': this.doubleClickEvent + }; + return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Col"], { + md: this.props.data.column + }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(echarts_for_react__WEBPACK_IMPORTED_MODULE_5___default.a, { + option: this.state.option, notMerge: true, lazyUpdate: true, - theme: "theme_name", - style: style - }); + style: this.state.style, + opts: { + renderer: "svg" + }, + onEvents: onEvents + }), this.props.data.line ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("hr", null) : ""); } }]); @@ -206292,7 +206334,7 @@ function (_Component) { var _this3 = this; var filters = this.props.data; - var selected = this.props.value.countrySelected; + var selected = this.props.value.filters.country; return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Dropdown"], { className: "right-dropdowns" }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Dropdown"].Toggle, { @@ -206429,14 +206471,29 @@ function (_Component) { _createClass(DataFilters, [{ key: "saveValues", - value: function saveValues(data) { - var dataVal = data.country_values.map(function (x) { + value: function saveValues(_ref3) { + var id = _ref3.id, + name = _ref3.name, + units = _ref3.units, + description = _ref3.description, + country_values = _ref3.country_values; + var valuesMap = country_values.map(function (x) { return { + id: x.country.id, + code: x.country.code, name: x.country.name, - value: x.value, - desc: x.description + value: x.value }; }); + var data = { + id: id, + name: name, + units: units, + description: description, + values: valuesMap + }; + this.props.chart.value.append(data); + this.props.chart.value.select(id); } }, { key: "changeActive", @@ -206459,12 +206516,21 @@ function (_Component) { } this.props.filter.program.update(id, name, this.props.depth); + var charts = this.props.value.charts.data; + var chartisnew = charts.find(function (x) { + return x.id === id; + }); + chartisnew = chartisnew ? false : true; - if (depth === 2) { + if (depth === 2 && chartisnew) { axios.get('/api/value/' + id).then(function (res) { _this2.saveValues(res.data); }); } + + if (depth === 2 && !chartisnew) { + this.props.chart.value.select(id); + } } }, { key: "getDropDownItem", @@ -206487,12 +206553,14 @@ function (_Component) { var depth = this.props.depth; var filters = this.props.data[depth]; - var selected = this.props.value.filterSelected[depth]; + var selected = this.props.value.filters.selected[depth]; selected = selected ? selected : this.state.active; return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Dropdown"], null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Dropdown"].Toggle, { as: CustomToggle, id: "dropdown-custom-components" - }, selected.name), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Dropdown"].Menu, { + }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { + className: "dropdown-fix" + }, selected.name)), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Dropdown"].Menu, { as: CustomMenu }, filters.map(function (x) { return _this4.getDropDownItem(x, depth); @@ -206605,7 +206673,8 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js"); /* harmony import */ var _reducers_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../reducers/actions */ "./resources/js/reducers/actions.js"); /* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-bootstrap */ "./node_modules/react-bootstrap/esm/index.js"); -/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ "./node_modules/@fortawesome/react-fontawesome/index.es.js"); +/* harmony import */ var _DataCountries__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./DataCountries */ "./resources/js/components/DataCountries.js"); +/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ "./node_modules/@fortawesome/react-fontawesome/index.es.js"); function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -206631,6 +206700,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func + var Navigation = /*#__PURE__*/ function (_Component) { @@ -206656,7 +206726,7 @@ function (_Component) { window.scrollTo(0, 0); this.props.page.change(key); this.setState({ - active: this.props.value.active + active: this.props.value.page.name }); return true; } @@ -206675,7 +206745,7 @@ function (_Component) { }, { key: "render", value: function render() { - var page = this.props.value.active; + var page = this.props.value.page.name; return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Navbar"], { bg: "light", fixed: "top", @@ -206693,7 +206763,7 @@ function (_Component) { id: "basic-navbar-nav" }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Nav"], { className: "mr-auto", - activeKey: this.props.value.page, + activeKey: this.props.value.page.name, onSelect: this.changePage }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Nav"].Link, { eventKey: "home", @@ -206716,11 +206786,14 @@ function (_Component) { }, "Funding")), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_3__["Form"], { inline: true, className: "nav-right" - }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", { + }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_DataCountries__WEBPACK_IMPORTED_MODULE_4__["default"], { + className: "dropdown-right", + data: this.props.value.filters.countries + }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", { className: "btn btn-primary text-white", href: "https://github.com/akvo/akvo-tech-consultancy", target: "_blank" - }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__["FontAwesomeIcon"], { + }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_5__["FontAwesomeIcon"], { icon: ["fas", "arrow-circle-down"] }), " Resources"))))); } @@ -206749,11 +206822,10 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var _reducers_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../reducers/actions */ "./resources/js/reducers/actions.js"); /* harmony import */ var _Navigation__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Navigation */ "./resources/js/components/Navigation.js"); /* harmony import */ var _DataFilters__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./DataFilters */ "./resources/js/components/DataFilters.js"); -/* harmony import */ var _DataCountries__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./DataCountries */ "./resources/js/components/DataCountries.js"); -/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react-bootstrap */ "./node_modules/react-bootstrap/esm/index.js"); -/* harmony import */ var _pages_Home__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../pages/Home */ "./resources/js/pages/Home.js"); -/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! axios */ "./node_modules/axios/index.js"); -/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_9__); +/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! react-bootstrap */ "./node_modules/react-bootstrap/esm/index.js"); +/* harmony import */ var _pages_Home__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../pages/Home */ "./resources/js/pages/Home.js"); +/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! axios */ "./node_modules/axios/index.js"); +/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_8__); function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } @@ -206789,7 +206861,6 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func - var prefixPage = "" + "/page/"; var Page = @@ -206813,10 +206884,10 @@ function (_Component) { value: function componentDidMount() { var _this2 = this; - axios__WEBPACK_IMPORTED_MODULE_9___default.a.get(prefixPage + "filters").then(function (res) { + axios__WEBPACK_IMPORTED_MODULE_8___default.a.get(prefixPage + "filters").then(function (res) { _this2.props.filter.program.init(res.data); }); - axios__WEBPACK_IMPORTED_MODULE_9___default.a.get(prefixPage + "countries").then(function (res) { + axios__WEBPACK_IMPORTED_MODULE_8___default.a.get(prefixPage + "countries").then(function (res) { _this2.props.filter.country.init(res.data); }); this.props.page.change('home'); @@ -206826,7 +206897,7 @@ function (_Component) { value: function repeat(i) { return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_DataFilters__WEBPACK_IMPORTED_MODULE_5__["default"], { key: i, - data: this.props.value.filters, + data: this.props.value.filters.list, depth: i }); } @@ -206848,13 +206919,10 @@ function (_Component) { }, { key: "render", value: function render() { - var page = this.props.value.pageActive; - return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Navigation__WEBPACK_IMPORTED_MODULE_4__["default"], null), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_7__["Container"], { + var page = this.props.value.page.name; + return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Navigation__WEBPACK_IMPORTED_MODULE_4__["default"], null), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_6__["Container"], { className: "top-container" - }, this.getFilters(this.props.value.filterDepth), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_DataCountries__WEBPACK_IMPORTED_MODULE_6__["default"], { - className: "dropdown-right", - data: this.props.value.countries - })), page === "home" ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_pages_Home__WEBPACK_IMPORTED_MODULE_8__["default"], { + }, this.getFilters(this.props.value.filters.depth)), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("hr", null), page === "home" ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_pages_Home__WEBPACK_IMPORTED_MODULE_7__["default"], { parent: this.props }) : ""); } @@ -206867,20 +206935,100 @@ function (_Component) { /***/ }), -/***/ "./resources/js/data/barExample.js": -/*!*****************************************!*\ - !*** ./resources/js/data/barExample.js ***! - \*****************************************/ -/*! exports provided: barExample */ +/***/ "./resources/js/data/chart-utils.js": +/*!******************************************!*\ + !*** ./resources/js/data/chart-utils.js ***! + \******************************************/ +/*! exports provided: loadingChart, generateOptions */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "barExample", function() { return barExample; }); -var barExample = function barExample() { - var option = { +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "loadingChart", function() { return loadingChart; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "generateOptions", function() { return generateOptions; }); +/* harmony import */ var _options_Bar__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./options/Bar */ "./resources/js/data/options/Bar.js"); +/* harmony import */ var _options_Maps__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./options/Maps */ "./resources/js/data/options/Maps.js"); +/* harmony import */ var _options_Pie__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./options/Pie */ "./resources/js/data/options/Pie.js"); + + + +var loadingChart = { + title: { + text: "Loading... ", + left: "center", + top: "middle", + textStyle: { + color: "#222" + } + } +}; +var generateOptions = function generateOptions(type, title, data) { + switch (type) { + case "MAPS": + return Object(_options_Maps__WEBPACK_IMPORTED_MODULE_1__["default"])(data, title); + + case "PIE": + return Object(_options_Pie__WEBPACK_IMPORTED_MODULE_2__["default"])(data, title); + + default: + return Object(_options_Bar__WEBPACK_IMPORTED_MODULE_0__["default"])(data, title); + } +}; + +/***/ }), + +/***/ "./resources/js/data/features/animation.js": +/*!*************************************************!*\ + !*** ./resources/js/data/features/animation.js ***! + \*************************************************/ +/*! exports provided: Easing */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Easing", function() { return Easing; }); +var Easing = { + animation: true, + animationThreshold: 2000, + animationDuration: 1000, + animationEasing: "cubicOut", + animationDelay: 0, + animationDurationUpdate: 300, + animationEasingUpdate: "cubicOut", + animationDelayUpdate: 0 +}; + +/***/ }), + +/***/ "./resources/js/data/options/Bar.js": +/*!******************************************!*\ + !*** ./resources/js/data/options/Bar.js ***! + \******************************************/ +/*! exports provided: default */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _features_animation_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../features/animation.js */ "./resources/js/data/features/animation.js"); +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + + + +var Bar = function Bar(data, title) { + var values = data.map(function (x) { + return x.value; + }); + var labels = data.map(function (x) { + return x.name; + }); + + var option = _objectSpread({ title: { - text: 'Production and Management', + text: title, left: 'center', top: 'top', textStyle: { @@ -206889,35 +207037,46 @@ var barExample = function barExample() { }, xAxis: { type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + data: labels }, yAxis: { type: 'value' }, series: [{ - data: [120, 200, 150, 80, 70, 110, 420], + data: values, type: 'bar' }] - }; + }, _features_animation_js__WEBPACK_IMPORTED_MODULE_0__["Easing"]); + return option; }; +/* harmony default export */ __webpack_exports__["default"] = (Bar); + /***/ }), -/***/ "./resources/js/data/mapExample.js": -/*!*****************************************!*\ - !*** ./resources/js/data/mapExample.js ***! - \*****************************************/ -/*! exports provided: mapExample */ +/***/ "./resources/js/data/options/Maps.js": +/*!*******************************************!*\ + !*** ./resources/js/data/options/Maps.js ***! + \*******************************************/ +/*! exports provided: default */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mapExample", function() { return mapExample; }); -var mapExample = function mapExample() { - var option = { +/* harmony import */ var _features_animation_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../features/animation.js */ "./resources/js/data/features/animation.js"); +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + + + +var Maps = function Maps(data, title) { + var option = _objectSpread({ title: { - text: 'Production and Management', + text: title, left: 'center', top: 'top', textStyle: { @@ -206965,7 +207124,7 @@ var mapExample = function mapExample() { } }, series: [{ - name: 'Production and Management', + name: title, type: 'map', roam: true, map: 'world', @@ -206982,85 +207141,75 @@ var mapExample = function mapExample() { color: '#222' } }, - data: [{ - 'code': 'ID', - 'name': 'Indonesia', - 'value': 4152369, - 'color': '#eea638' - }, { - 'code': 'VN', - 'name': 'Vietnam', - 'value': 88791996, - 'color': '#eea638' - }, { - 'code': 'YE', - 'name': 'Yemen, Rep.', - 'value': 24799880, - 'color': '#eea638' - }, { - 'code': 'ZM', - 'name': 'Zambia', - 'value': 13474959, - 'color': '#de4c4f' - }, { - 'code': 'ZW', - 'name': 'Zimbabwe', - 'value': 12754378, - 'color': '#de4c4f' - }] + data: data }] - }; + }, _features_animation_js__WEBPACK_IMPORTED_MODULE_0__["Easing"]); + return option; }; +/* harmony default export */ __webpack_exports__["default"] = (Maps); + /***/ }), -/***/ "./resources/js/data/pieExample.js": -/*!*****************************************!*\ - !*** ./resources/js/data/pieExample.js ***! - \*****************************************/ -/*! exports provided: pieExample */ +/***/ "./resources/js/data/options/Pie.js": +/*!******************************************!*\ + !*** ./resources/js/data/options/Pie.js ***! + \******************************************/ +/*! exports provided: default */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "pieExample", function() { return pieExample; }); -var pieExample = function pieExample() { - var option = { +/* harmony import */ var _features_animation_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../features/animation.js */ "./resources/js/data/features/animation.js"); +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + + + +var Pie = function Pie(data, title) { + var labels = data.map(function (x) { + return x.name; + }); + + var option = _objectSpread({ title: { - text: 'Production and Management', - left: 'center', - top: 'top', + text: title, + left: "center", + top: "top", textStyle: { - color: '#222' + color: "#222" } }, tooltip: { - trigger: 'item', - formatter: '{a}
{b}: {c} ({d}%)' + trigger: "item", + formatter: "{a}
{b}: {c} ({d}%)" }, legend: { - orient: 'vertical', + orient: "vertical", left: 10, top: 70, - data: ['West Bank and Gaza', 'Vietnam', 'Yamen', 'Zambia', 'Zimbabwe'] + data: labels }, series: [{ - name: 'Data', - type: 'pie', + name: title, + type: "pie", top: 120, - radius: ['40%', '70%'], + radius: ["40%", "70%"], avoidLabelOverlap: false, label: { normal: { show: false, - position: 'center' + position: "center" }, emphasis: { show: true, textStyle: { - fontSize: '22', - fontWeight: 'bold' + fontSize: "22", + fontWeight: "bold" } } }, @@ -207069,37 +207218,15 @@ var pieExample = function pieExample() { show: false } }, - data: [{ - 'code': 'PS', - 'name': 'West Bank and Gaza', - 'value': 4152369, - 'color': '#eea638' - }, { - 'code': 'VN', - 'name': 'Vietnam', - 'value': 88791996, - 'color': '#eea638' - }, { - 'code': 'YE', - 'name': 'Yemen, Rep.', - 'value': 24799880, - 'color': '#eea638' - }, { - 'code': 'ZM', - 'name': 'Zambia', - 'value': 13474959, - 'color': '#de4c4f' - }, { - 'code': 'ZW', - 'name': 'Zimbabwe', - 'value': 12754378, - 'color': '#de4c4f' - }] + data: data }] - }; + }, _features_animation_js__WEBPACK_IMPORTED_MODULE_0__["Easing"]); + return option; }; +/* harmony default export */ __webpack_exports__["default"] = (Pie); + /***/ }), /***/ "./resources/js/data/world.js": @@ -207129,15 +207256,13 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js"); -/* harmony import */ var _reducers_actions__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../reducers/actions */ "./resources/js/reducers/actions.js"); +/* harmony import */ var _reducers_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../reducers/actions */ "./resources/js/reducers/actions.js"); /* harmony import */ var _fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @fortawesome/fontawesome-svg-core */ "./node_modules/@fortawesome/fontawesome-svg-core/index.es.js"); /* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-bootstrap */ "./node_modules/react-bootstrap/esm/index.js"); /* harmony import */ var _components_Charts__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/Charts */ "./resources/js/components/Charts.js"); /* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! axios */ "./node_modules/axios/index.js"); /* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_6__); -/* harmony import */ var _data_barExample__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../data/barExample */ "./resources/js/data/barExample.js"); -/* harmony import */ var _data_pieExample__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../data/pieExample */ "./resources/js/data/pieExample.js"); -/* harmony import */ var _data_mapExample__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../data/mapExample */ "./resources/js/data/mapExample.js"); +/* harmony import */ var _data_chart_utils_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../data/chart-utils.js */ "./resources/js/data/chart-utils.js"); function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -207165,8 +207290,6 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func - - __webpack_require__(/*! ../data/world.js */ "./resources/js/data/world.js"); var Home = @@ -207190,48 +207313,51 @@ function (_Component) { }, { key: "storeData", value: function storeData(filterId) {} - }, { - key: "componentDidMount", - value: function componentDidMount() {} }, { key: "render", value: function render() { - var bar = Object(_data_barExample__WEBPACK_IMPORTED_MODULE_7__["barExample"])(); - var pie = Object(_data_pieExample__WEBPACK_IMPORTED_MODULE_8__["pieExample"])(); - var map = Object(_data_mapExample__WEBPACK_IMPORTED_MODULE_9__["mapExample"])(); + var selected = this.props.value.filters.selected; + selected = selected[selected.length - 1]; + var bar = Object(_data_chart_utils_js__WEBPACK_IMPORTED_MODULE_7__["generateOptions"])("BAR", selected.name, this.props.value.charts.active.values); + var pie = Object(_data_chart_utils_js__WEBPACK_IMPORTED_MODULE_7__["generateOptions"])("PIE", selected.name, this.props.value.charts.active.values); + var maps = Object(_data_chart_utils_js__WEBPACK_IMPORTED_MODULE_7__["generateOptions"])("MAPS", selected.name, this.props.value.charts.active.values); var mapData = { + column: 12, + line: true, style: { height: "500px" } }; var chartData = { + column: 6, + line: false, style: { height: "600px" } }; - return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_4__["Container"], null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("hr", null), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Charts__WEBPACK_IMPORTED_MODULE_5__["default"], { - option: map, - data: mapData - }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_4__["Jumbotron"], { - className: "charts" - }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_4__["Row"], null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_4__["Col"], { - sm: 6 - }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Charts__WEBPACK_IMPORTED_MODULE_5__["default"], { + return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_4__["Container"], null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_4__["Row"], null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Charts__WEBPACK_IMPORTED_MODULE_5__["default"], { + option: maps, + data: mapData, + selected: selected, + type: "MAPS" + }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Charts__WEBPACK_IMPORTED_MODULE_5__["default"], { option: bar, - data: chartData - })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_4__["Col"], { - sm: 6 - }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Charts__WEBPACK_IMPORTED_MODULE_5__["default"], { + data: chartData, + selected: selected, + type: "BAR" + }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Charts__WEBPACK_IMPORTED_MODULE_5__["default"], { option: pie, - data: chartData - }))))); + data: chartData, + selected: selected, + type: "PIE" + }))); } }]); return Home; }(react__WEBPACK_IMPORTED_MODULE_0__["Component"]); -/* harmony default export */ __webpack_exports__["default"] = (Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["connect"])(_reducers_actions__WEBPACK_IMPORTED_MODULE_10__["mapStateToProps"], _reducers_actions__WEBPACK_IMPORTED_MODULE_10__["mapDispatchToProps"])(Home)); +/* harmony default export */ __webpack_exports__["default"] = (Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["connect"])(_reducers_actions__WEBPACK_IMPORTED_MODULE_2__["mapStateToProps"], _reducers_actions__WEBPACK_IMPORTED_MODULE_2__["mapDispatchToProps"])(Home)); /***/ }), @@ -207263,16 +207389,16 @@ var mapDispatchToProps = function mapDispatchToProps(dispatch) { }, filter: { program: { - init: function init(filters) { + init: function init(list) { return dispatch({ type: "FILTERS - PROGRAM INIT", - filters: filters + list: list }); }, - append: function append(filters, depth) { + append: function append(list, depth) { return dispatch({ type: "FILTERS - PROGRAM APPEND", - filters: filters, + list: list, depth: depth }); }, @@ -207284,10 +207410,10 @@ var mapDispatchToProps = function mapDispatchToProps(dispatch) { depth: depth }); }, - change: function change(filters) { + change: function change(list) { return dispatch({ type: "FILTERS - PROGRAM CHANGE", - filters: filters + list: list }); } }, @@ -207307,25 +207433,30 @@ var mapDispatchToProps = function mapDispatchToProps(dispatch) { } }, chart: { - values: { - store: function store(id, values) { + value: { + append: function append(values) { return dispatch({ - type: "CHART - STORE VALUES", - id: id, + type: "CHART - VALUES APPEND", values: values }); }, - change: function change(id) { + select: function select(id) { return dispatch({ - type: "CHART - CHANGE VALUES", + type: "CHART - VALUES SELECT", id: id }); + }, + filter: function filter(data) { + return dispatch({ + type: "CHART - VALUES FILTER", + data: data + }); } }, - options: { - store: function store(id, option) { + option: { + append: function append(id, option) { return dispatch({ - type: "CHART - STORE OPTIONS", + type: "CHART - OPTIONS APPEND", option: option, id: id }); @@ -207337,15 +207468,210 @@ var mapDispatchToProps = function mapDispatchToProps(dispatch) { /***/ }), -/***/ "./resources/js/reducers/helpers/filter-helpers.js": -/*!*********************************************************!*\ - !*** ./resources/js/reducers/helpers/filter-helpers.js ***! - \*********************************************************/ -/*! exports provided: showFilters, updateSelectedFilters, appendFilters */ +/***/ "./resources/js/reducers/reducers.js": +/*!*******************************************!*\ + !*** ./resources/js/reducers/reducers.js ***! + \*******************************************/ +/*! exports provided: states */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "states", function() { return states; }); +/* harmony import */ var _states_page_states_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./states/page-states.js */ "./resources/js/reducers/states/page-states.js"); +/* harmony import */ var _states_filter_states_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./states/filter-states.js */ "./resources/js/reducers/states/filter-states.js"); +/* harmony import */ var _states_chart_states_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./states/chart-states.js */ "./resources/js/reducers/states/chart-states.js"); +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + + + + +var initialState = { + page: _states_page_states_js__WEBPACK_IMPORTED_MODULE_0__["pageState"], + filters: _states_filter_states_js__WEBPACK_IMPORTED_MODULE_1__["filterState"], + charts: _states_chart_states_js__WEBPACK_IMPORTED_MODULE_2__["chartState"] +}; +var states = function states() { + var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState; + var action = arguments.length > 1 ? arguments[1] : undefined; + + switch (action.type) { + case 'PAGE - CHANGE PAGE': + return _objectSpread({}, state, { + page: Object(_states_page_states_js__WEBPACK_IMPORTED_MODULE_0__["showPage"])(state.page, action.page) + }); + + case 'FILTERS - PROGRAM INIT': + return _objectSpread({}, state, { + filters: _objectSpread({}, state.filters, { + list: [action.list] + }) + }); + + case 'FILTERS - PROGRAM APPEND': + return _objectSpread({}, state, { + filters: Object(_states_filter_states_js__WEBPACK_IMPORTED_MODULE_1__["appendFilters"])(state.filters, action.list, action.depth) + }); + + case 'FILTERS - PROGRAM SELECT': + return _objectSpread({}, state, { + filters: Object(_states_filter_states_js__WEBPACK_IMPORTED_MODULE_1__["updateSelectedFilters"])(state.filters, action.name, action.id, action.depth) + }); + + case 'FILTERS - PROGRAM CHANGE': + return _objectSpread({}, state, { + filters: Object(_states_filter_states_js__WEBPACK_IMPORTED_MODULE_1__["showFilters"])(state.filters, action.list) + }); + + case 'FILTERS - COUNTRY INIT': + return _objectSpread({}, state, { + filters: _objectSpread({}, state.filters, { + countries: action.countries + }) + }); + + case 'FILTERS - COUNTRY CHANGE': + return _objectSpread({}, state, { + filters: _objectSpread({}, state.filters, { + country: action.country + }) + }); + + case 'CHART - VALUES APPEND': + return _objectSpread({}, state, { + charts: Object(_states_chart_states_js__WEBPACK_IMPORTED_MODULE_2__["appendData"])(state.charts, action.values) + }); + + case 'CHART - VALUES SELECT': + return _objectSpread({}, state, { + charts: Object(_states_chart_states_js__WEBPACK_IMPORTED_MODULE_2__["selectCharts"])(state.charts, action.id) + }); + + case 'CHART - VALUES FILTER': + return _objectSpread({}, state, { + charts: Object(_states_chart_states_js__WEBPACK_IMPORTED_MODULE_2__["filterCharts"])(state.charts, action.data) + }); + + case 'CHART - OPTIONS APPEND': + return _objectSpread({}, state, { + charts: _objectSpread({}, state.charts, { + options: Object(_states_chart_states_js__WEBPACK_IMPORTED_MODULE_2__["appendOption"])(option) + }) + }); + + default: + return state; + } +}; + +/***/ }), + +/***/ "./resources/js/reducers/states/chart-states.js": +/*!******************************************************!*\ + !*** ./resources/js/reducers/states/chart-states.js ***! + \******************************************************/ +/*! exports provided: chartState, appendData, appendOption, filterCharts, selectCharts */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "chartState", function() { return chartState; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "appendData", function() { return appendData; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "appendOption", function() { return appendOption; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "filterCharts", function() { return filterCharts; }); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "selectCharts", function() { return selectCharts; }); +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } + +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } + +function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } + +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } + +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var chartState = { + data: [{ + id: 1, + name: "", + units: "", + description: "", + values: [{ + id: 1, + code: "Loading", + name: "Loading", + value: 0 + }] + }], + loading: true, + options: [{ + id: 1, + options: [] + }], + filtered: false, + active: { + id: 1, + name: "", + units: "", + description: "Loading", + values: [{ + id: 1, + code: "", + name: "Loading", + value: 0 + }] + } +}; +var appendData = function appendData(state, data) { + return _objectSpread({}, state, { + data: [].concat(_toConsumableArray(state.data), [data]) + }); +}; +var appendOption = function appendOption(state, id, option) { + return _objectSpread({}, state, { + options: [].concat(_toConsumableArray(state.option), [{ + id: id, + option: option + }]) + }); +}; +var filterCharts = function filterCharts(state, data) { + return _objectSpread({}, state, { + active: _objectSpread({}, state.active, { + values: data + }) + }); +}; +var selectCharts = function selectCharts(state, id) { + var data = state.data.find(function (x) { + return x.id === id; + }); + return _objectSpread({}, state, { + active: data, + loading: false + }); +}; + +/***/ }), + +/***/ "./resources/js/reducers/states/filter-states.js": +/*!*******************************************************!*\ + !*** ./resources/js/reducers/states/filter-states.js ***! + \*******************************************************/ +/*! exports provided: filterState, showFilters, updateSelectedFilters, appendFilters */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "filterState", function() { return filterState; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "showFilters", function() { return showFilters; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "updateSelectedFilters", function() { return updateSelectedFilters; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "appendFilters", function() { return appendFilters; }); @@ -207363,13 +207689,42 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } +var filterState = { + list: [[{ + name: 'loading', + code: 'loading', + id: 1, + values: [{ + id: 1, + name: "Loading", + value: 0 + }] + }]], + depth: 1, + selected: [{ + id: 1, + name: 'Select Programs', + values: [{ + id: 1, + name: "Loading", + value: 0 + }] + }], + active: false, + countries: [{ + name: 'Select Country', + code: 'Loading', + id: 1 + }], + country: 'Select Country' +}; var showFilters = function showFilters(state, data) { return _objectSpread({}, state, { - filters: [data] + list: [data] }); }; var updateSelectedFilters = function updateSelectedFilters(state, name, id, depth) { - var selected = state.filterSelected; + var selected = state.selected; var x = depth; selected[depth] = { id: id, @@ -207381,7 +207736,7 @@ var updateSelectedFilters = function updateSelectedFilters(state, name, id, dept if (check) { id = selected[x - 1].id; - var next_selected = state.filters[x - 1].find(function (data) { + var next_selected = state.list[x - 1].find(function (data) { return data.id === id; }).childs[0]; selected[x] = { @@ -207394,42 +207749,42 @@ var updateSelectedFilters = function updateSelectedFilters(state, name, id, dept } var newdata = _objectSpread({}, state, { - filterSelected: selected + selected: selected }); return newdata; }; var appendFilters = function appendFilters(state, data, depth) { var appends = []; - var len = state.filters.length - 1; + var len = state.list.length - 1; var i = 0; - if (state.filters.length === 3) { + if (state.list.length === 3) { appends = false; } var newdata = _objectSpread({}, state, { - filterDepth: 3 + depth: 3 }); if (appends) { while (i <= len) { - var current = state.filters[i]; + var current = state.list[i]; appends = [].concat(_toConsumableArray(appends), [current]); i++; } newdata = _objectSpread({}, state, { - filterDepth: state.filters.length + 1, - filters: [].concat(_toConsumableArray(appends), [data]) + depth: state.list.length + 1, + list: [].concat(_toConsumableArray(appends), [data]) }); } if (appends === false) { - var finalFilter = state.filters; + var finalFilter = state.list; finalFilter[depth + 1] = data; newdata = _objectSpread({}, state, { - filters: finalFilter + list: finalFilter }); } @@ -207438,10 +207793,10 @@ var appendFilters = function appendFilters(state, data, depth) { /***/ }), -/***/ "./resources/js/reducers/helpers/page-helpers.js": -/*!*******************************************************!*\ - !*** ./resources/js/reducers/helpers/page-helpers.js ***! - \*******************************************************/ +/***/ "./resources/js/reducers/states/page-states.js": +/*!*****************************************************!*\ + !*** ./resources/js/reducers/states/page-states.js ***! + \*****************************************************/ /*! exports provided: pageState, showPage */ /***/ (function(module, __webpack_exports__, __webpack_require__) { @@ -207455,130 +207810,17 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } -var pageState = {}; +var pageState = { + name: "home" +}; var showPage = function showPage(state, page) { return _objectSpread({}, state, { - pageActive: page + name: page }); }; /***/ }), -/***/ "./resources/js/reducers/reducers.js": -/*!*******************************************!*\ - !*** ./resources/js/reducers/reducers.js ***! - \*******************************************/ -/*! exports provided: states */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "states", function() { return states; }); -/* harmony import */ var _helpers_page_helpers_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./helpers/page-helpers.js */ "./resources/js/reducers/helpers/page-helpers.js"); -/* harmony import */ var _helpers_filter_helpers_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./helpers/filter-helpers.js */ "./resources/js/reducers/helpers/filter-helpers.js"); -function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } - - - -var initialState = { - pageActive: "home", - filters: [[{ - name: 'loading', - code: 'loading', - id: 1 - }, { - name: 'mantap', - code: 'mantap', - id: 2 - }]], - filterDepth: 1, - filterSelected: [{ - id: 1, - name: 'Select Programs' - }], - filterActive: false, - countries: [{ - name: 'Select Country', - code: 'Loading', - id: 1 - }], - countrySelected: 'Select Country', - chartData: [{ - id: 1, - values: [{ - code: "Loading", - name: "Loading", - value: 0 - }] - }], - chartOptions: [], - chartActive: { - id: 1, - values: [{ - code: "Loading", - name: "Loading", - value: 0 - }] - } -}; -var states = function states() { - var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState; - var action = arguments.length > 1 ? arguments[1] : undefined; - - switch (action.type) { - case 'PAGE - CHANGE PAGE': - return Object(_helpers_page_helpers_js__WEBPACK_IMPORTED_MODULE_0__["showPage"])(state, action.page); - - case 'FILTERS - PROGRAM INIT': - return _objectSpread({}, state, { - filters: [action.filters] - }); - - case 'FILTERS - PROGRAM APPEND': - return Object(_helpers_filter_helpers_js__WEBPACK_IMPORTED_MODULE_1__["appendFilters"])(state, action.filters, action.depth); - - case 'FILTERS - PROGRAM SELECT': - return Object(_helpers_filter_helpers_js__WEBPACK_IMPORTED_MODULE_1__["updateSelectedFilters"])(state, action.name, action.id, action.depth); - - case 'FILTERS - PROGRAM CHANGE': - return Object(_helpers_filter_helpers_js__WEBPACK_IMPORTED_MODULE_1__["showFilters"])(state, action.filters); - - case 'FILTERS - COUNTRY INIT': - return _objectSpread({}, state, { - countries: action.countries - }); - - case 'FILTERS - CHANGE COUNTRY': - return _objectSpread({}, state, { - countrySelected: action.country - }); - - case 'CHART - STORE': - return _objectSpread({}, state, { - chartData: storeChart(action.id, action.values) - }); - - case 'CHART - CHANGE': - return _objectSpread({}, state, { - chartActive: changeActive(state.chartData, action.id) - }); - - case 'CHART - OPTIONS': - return _objectSpread({}, state, { - chartActive: action.id - }); - - default: - return state; - } -}; - -/***/ }), - /***/ "./resources/sass/app.scss": /*!*********************************!*\ !*** ./resources/sass/app.scss ***! diff --git a/sites/unep-dashboard/resources/js/components/Charts.js b/sites/unep-dashboard/resources/js/components/Charts.js index e6d7e22e..44d3285d 100644 --- a/sites/unep-dashboard/resources/js/components/Charts.js +++ b/sites/unep-dashboard/resources/js/components/Charts.js @@ -1,26 +1,53 @@ -import React, { Component } from 'react'; -import { redux } from 'react-redux'; -import { connect } from 'react-redux'; -import { mapStateToProps, mapDispatchToProps } from '../reducers/actions.js'; -import ReactEcharts from 'echarts-for-react'; +import React, { Component } from "react"; +import { redux } from "react-redux"; +import { connect } from "react-redux"; +import { mapStateToProps, mapDispatchToProps } from "../reducers/actions.js"; +import { Col } from "react-bootstrap"; +import { loadingChart, generateOptions } from "../data/chart-utils.js"; +import ReactEcharts from "echarts-for-react"; class Charts extends Component { - constructor(props) { super(props); + this.state = { + option: loadingChart, + style: this.props.data.style, + selected: this.props.selected, + }; + this.clickEvent = this.clickEvent.bind(this); + this.doubleClickEvent = this.doubleClickEvent.bind(this); + } + + doubleClickEvent() { + this.setState({ selected: this.props.selected }); + this.props.chart.value.select(this.state.selected.id); + } + + clickEvent(param) { + let data = [param.data]; + this.props.chart.value.filter(data); } render() { - let option = this.props.option; - let style = this.props.data.style; + setTimeout(() => { + this.setState({ option: this.props.option }); + }, 500); + let onEvents = { + 'click': this.clickEvent, + 'dblclick': this.doubleClickEvent + } return ( - + + + {this.props.data.line ?
: ""} + ); } } diff --git a/sites/unep-dashboard/resources/js/components/DataCountries.js b/sites/unep-dashboard/resources/js/components/DataCountries.js index 5a5b1c53..e9b46b0e 100644 --- a/sites/unep-dashboard/resources/js/components/DataCountries.js +++ b/sites/unep-dashboard/resources/js/components/DataCountries.js @@ -76,7 +76,7 @@ class DataCountries extends Component { render() { let filters = this.props.data; - let selected = this.props.value.countrySelected; + let selected = this.props.value.filters.country; return ( diff --git a/sites/unep-dashboard/resources/js/components/DataFilters.js b/sites/unep-dashboard/resources/js/components/DataFilters.js index 16c69836..0f34df42 100644 --- a/sites/unep-dashboard/resources/js/components/DataFilters.js +++ b/sites/unep-dashboard/resources/js/components/DataFilters.js @@ -58,14 +58,24 @@ class DataFilters extends Component { this.saveValues = this.saveValues.bind(this); } - saveValues(data) { - let dataVal = data.country_values.map((x) => { + saveValues({id, name, units, description, country_values}) { + let valuesMap = country_values.map((x) => { return { + id: x.country.id, + code: x.country.code, name: x.country.name, value: x.value, - desc: x.description } - }) + }); + let data = { + id: id, + name: name, + units: units, + description: description, + values: valuesMap + }; + this.props.chart.value.append(data); + this.props.chart.value.select(id); } changeActive(name, id, depth) { @@ -79,12 +89,18 @@ class DataFilters extends Component { this.props.filter.program.update(next_id, next_name, this.props.depth + 1); } this.props.filter.program.update(id, name, this.props.depth); - if (depth === 2) { + let charts = this.props.value.charts.data; + let chartisnew = charts.find((x => x.id === id)) + chartisnew = chartisnew ? false : true; + if (depth === 2 && chartisnew) { axios.get('/api/value/' + id) .then(res => { this.saveValues(res.data); }) } + if (depth === 2 && !chartisnew) { + this.props.chart.value.select(id); + } } getDropDownItem (dd, depth) { @@ -104,12 +120,14 @@ class DataFilters extends Component { render() { let depth = this.props.depth; let filters = this.props.data[depth]; - let selected = this.props.value.filterSelected[depth]; + let selected = this.props.value.filters.selected[depth]; selected = selected ? selected : this.state.active; return ( +
{ selected.name } +
diff --git a/sites/unep-dashboard/resources/js/components/Navigation.js b/sites/unep-dashboard/resources/js/components/Navigation.js index 7357bb79..1defc148 100644 --- a/sites/unep-dashboard/resources/js/components/Navigation.js +++ b/sites/unep-dashboard/resources/js/components/Navigation.js @@ -10,6 +10,7 @@ import { Form, Button, } from 'react-bootstrap'; +import DataCountries from './DataCountries'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' class Navigation extends Component { @@ -26,7 +27,7 @@ class Navigation extends Component { window.scrollTo(0, 0) this.props.page.change(key); this.setState({ - active: this.props.value.active + active: this.props.value.page.name }); return true; } @@ -41,7 +42,7 @@ class Navigation extends Component { } render() { - let page = this.props.value.active; + let page = this.props.value.page.name; return ( @@ -55,7 +56,7 @@ class Navigation extends Component {
+ + ); } @@ -51,14 +50,14 @@ class Page extends Component { } render() { - let page = this.props.value.pageActive + let page = this.props.value.page.name return ( - {this.getFilters(this.props.value.filterDepth)} - + {this.getFilters(this.props.value.filters.depth)} +
{page === "home" ? () : ""} ); diff --git a/sites/unep-dashboard/resources/js/data/chart-utils.js b/sites/unep-dashboard/resources/js/data/chart-utils.js new file mode 100644 index 00000000..66b709ca --- /dev/null +++ b/sites/unep-dashboard/resources/js/data/chart-utils.js @@ -0,0 +1,25 @@ +import Bar from './options/Bar'; +import Maps from './options/Maps'; +import Pie from './options/Pie'; + +export const loadingChart = { + title: { + text: "Loading... ", + left: "center", + top: "middle", + textStyle: { + color: "#222" + } + } +}; + +export const generateOptions = (type, title, data) => { + switch (type) { + case "MAPS": + return Maps(data, title); + case "PIE": + return Pie(data, title); + default: + return Bar(data, title); + } +} diff --git a/sites/unep-dashboard/resources/js/data/features/animation.js b/sites/unep-dashboard/resources/js/data/features/animation.js new file mode 100644 index 00000000..88871524 --- /dev/null +++ b/sites/unep-dashboard/resources/js/data/features/animation.js @@ -0,0 +1,10 @@ +export const Easing = { + animation: true , + animationThreshold: 2000 , + animationDuration: 1000 , + animationEasing: "cubicOut", + animationDelay: 0 , + animationDurationUpdate: 300 , + animationEasingUpdate: "cubicOut", + animationDelayUpdate: 0 , +} diff --git a/sites/unep-dashboard/resources/js/data/barExample.js b/sites/unep-dashboard/resources/js/data/options/Bar.js similarity index 54% rename from sites/unep-dashboard/resources/js/data/barExample.js rename to sites/unep-dashboard/resources/js/data/options/Bar.js index 47ea1b8c..bda587b9 100644 --- a/sites/unep-dashboard/resources/js/data/barExample.js +++ b/sites/unep-dashboard/resources/js/data/options/Bar.js @@ -1,7 +1,11 @@ -export const barExample = () => { +import { Easing } from '../features/animation.js'; + +const Bar = (data, title) => { + let values = data.map((x) => x.value); + let labels = data.map((x) => x.name); let option = { title : { - text: 'Production and Management', + text: title, left: 'center', top: 'top', textStyle: { @@ -10,15 +14,18 @@ export const barExample = () => { }, xAxis: { type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + data: labels, }, yAxis: { type: 'value' }, series: [{ - data: [120, 200, 150, 80, 70, 110, 420], + data: values, type: 'bar' - }] + }], + ...Easing, }; return option; } + +export default Bar; diff --git a/sites/unep-dashboard/resources/js/data/mapExample.js b/sites/unep-dashboard/resources/js/data/options/Maps.js similarity index 74% rename from sites/unep-dashboard/resources/js/data/mapExample.js rename to sites/unep-dashboard/resources/js/data/options/Maps.js index 37d7844f..bf8b116d 100644 --- a/sites/unep-dashboard/resources/js/data/mapExample.js +++ b/sites/unep-dashboard/resources/js/data/options/Maps.js @@ -1,7 +1,9 @@ -export const mapExample = () => { +import { Easing } from '../features/animation.js'; + +const Maps = (data, title) => { let option = { title : { - text: 'Production and Management', + text: title, left: 'center', top: 'top', textStyle: { @@ -50,7 +52,7 @@ export const mapExample = () => { }, series: [ { - name: 'Production and Management', + name: title, type: 'map', roam: true, map: 'world', @@ -67,15 +69,12 @@ export const mapExample = () => { color: '#222', } }, - data:[ - {'code':'ID' , 'name':'Indonesia', 'value':4152369, 'color':'#eea638'}, - {'code':'VN' , 'name':'Vietnam', 'value':88791996, 'color':'#eea638'}, - {'code':'YE' , 'name':'Yemen, Rep.', 'value':24799880, 'color':'#eea638'}, - {'code':'ZM' , 'name':'Zambia', 'value':13474959, 'color':'#de4c4f'}, - {'code':'ZW' , 'name':'Zimbabwe', 'value':12754378, 'color':'#de4c4f'} - ] + data: data } - ] + ], + ...Easing, }; return option; } + +export default Maps; diff --git a/sites/unep-dashboard/resources/js/data/options/Pie.js b/sites/unep-dashboard/resources/js/data/options/Pie.js new file mode 100644 index 00000000..b549adac --- /dev/null +++ b/sites/unep-dashboard/resources/js/data/options/Pie.js @@ -0,0 +1,57 @@ +import { Easing } from '../features/animation.js'; + +const Pie = (data, title) => { + let labels = data.map(x => x.name); + let option = { + title: { + text: title, + left: "center", + top: "top", + textStyle: { + color: "#222" + } + }, + tooltip: { + trigger: "item", + formatter: "{a}
{b}: {c} ({d}%)" + }, + legend: { + orient: "vertical", + left: 10, + top: 70, + data: labels + }, + series: [ + { + name: title, + type: "pie", + top: 120, + radius: ["40%", "70%"], + avoidLabelOverlap: false, + label: { + normal: { + show: false, + position: "center" + }, + emphasis: { + show: true, + textStyle: { + fontSize: "22", + fontWeight: "bold" + } + } + }, + labelLine: { + normal: { + show: false + } + }, + data: data + } + ], + ...Easing, + }; + return option; +}; + +export default Pie; diff --git a/sites/unep-dashboard/resources/js/data/options/index.js b/sites/unep-dashboard/resources/js/data/options/index.js new file mode 100644 index 00000000..e69de29b diff --git a/sites/unep-dashboard/resources/js/data/pieExample.js b/sites/unep-dashboard/resources/js/data/pieExample.js deleted file mode 100644 index 7e847590..00000000 --- a/sites/unep-dashboard/resources/js/data/pieExample.js +++ /dev/null @@ -1,57 +0,0 @@ -export const pieExample = () => { - let option = { - title : { - text: 'Production and Management', - left: 'center', - top: 'top', - textStyle: { - color: '#222' - } - }, - tooltip: { - trigger: 'item', - formatter: '{a}
{b}: {c} ({d}%)' - }, - legend: { - orient: 'vertical', - left: 10, - top: 70, - data: ['West Bank and Gaza', 'Vietnam', 'Yamen', 'Zambia', 'Zimbabwe'] - }, - series: [ - { - name: 'Data', - type: 'pie', - top: 120, - radius: ['40%', '70%'], - avoidLabelOverlap: false, - label: { - normal: { - show: false, - position: 'center' - }, - emphasis: { - show: true, - textStyle: { - fontSize: '22', - fontWeight: 'bold' - } - } - }, - labelLine: { - normal: { - show: false - } - }, - data: [ - {'code':'PS' , 'name':'West Bank and Gaza', 'value':4152369, 'color':'#eea638'}, - {'code':'VN' , 'name':'Vietnam', 'value':88791996, 'color':'#eea638'}, - {'code':'YE' , 'name':'Yemen, Rep.', 'value':24799880, 'color':'#eea638'}, - {'code':'ZM' , 'name':'Zambia', 'value':13474959, 'color':'#de4c4f'}, - {'code':'ZW' , 'name':'Zimbabwe', 'value':12754378, 'color':'#de4c4f'} - ] - } - ] -}; -return option; -} diff --git a/sites/unep-dashboard/resources/js/pages/Home.js b/sites/unep-dashboard/resources/js/pages/Home.js index 2b01eb38..7e1cafce 100644 --- a/sites/unep-dashboard/resources/js/pages/Home.js +++ b/sites/unep-dashboard/resources/js/pages/Home.js @@ -5,9 +5,7 @@ import { library } from "@fortawesome/fontawesome-svg-core"; import { Col, Row, Container, Jumbotron } from "react-bootstrap"; import Charts from "../components/Charts"; import axios from "axios"; -import { barExample } from "../data/barExample"; -import { pieExample } from "../data/pieExample"; -import { mapExample } from "../data/mapExample"; +import { loadingChart, generateOptions } from "../data/chart-utils.js"; require("../data/world.js"); class Home extends Component { @@ -22,37 +20,33 @@ class Home extends Component { storeData(filterId) { } - componentDidMount() { - } - render() { - let bar = barExample(); - let pie = pieExample(); - let map = mapExample(); + let selected = this.props.value.filters.selected; + selected = selected[selected.length - 1]; + let bar = generateOptions("BAR", selected.name, this.props.value.charts.active.values); + let pie = generateOptions("PIE", selected.name, this.props.value.charts.active.values); + let maps = generateOptions("MAPS", selected.name, this.props.value.charts.active.values); let mapData = { + column: 12, + line: true, style: { height: "500px" } }; let chartData = { + column: 6, + line: false, style: { height: "600px" } }; return ( -
- - - - - - - - - - - + + + + + ); } diff --git a/sites/unep-dashboard/resources/js/reducers/actions.js b/sites/unep-dashboard/resources/js/reducers/actions.js index 0f4270d4..4f182fd2 100644 --- a/sites/unep-dashboard/resources/js/reducers/actions.js +++ b/sites/unep-dashboard/resources/js/reducers/actions.js @@ -15,15 +15,15 @@ export const mapDispatchToProps = dispatch => { }, filter: { program: { - init: filters => + init: list => dispatch({ type: "FILTERS - PROGRAM INIT", - filters: filters + list: list }), - append: (filters, depth) => + append: (list, depth) => dispatch({ type: "FILTERS - PROGRAM APPEND", - filters: filters, + list: list, depth: depth }), update: (id, name, depth) => @@ -33,10 +33,10 @@ export const mapDispatchToProps = dispatch => { name: name, depth: depth }), - change: filters => + change: list => dispatch({ type: "FILTERS - PROGRAM CHANGE", - filters: filters + list: list }) }, country: { @@ -53,23 +53,27 @@ export const mapDispatchToProps = dispatch => { } }, chart: { - values: { - store: (id, values) => + value: { + append: (values) => dispatch({ - type: "CHART - STORE VALUES", - id: id, + type: "CHART - VALUES APPEND", values: values }), - change: id => + select: id => dispatch({ - type: "CHART - CHANGE VALUES", + type: "CHART - VALUES SELECT", id: id + }), + filter: data => + dispatch({ + type: "CHART - VALUES FILTER", + data: data, }) }, - options: { - store: (id, option) => + option: { + append: (id, option) => dispatch({ - type: "CHART - STORE OPTIONS", + type: "CHART - OPTIONS APPEND", option: option, id: id }) diff --git a/sites/unep-dashboard/resources/js/reducers/helpers/chart-helpers.js b/sites/unep-dashboard/resources/js/reducers/helpers/chart-helpers.js deleted file mode 100644 index 56c1b6e5..00000000 --- a/sites/unep-dashboard/resources/js/reducers/helpers/chart-helpers.js +++ /dev/null @@ -1,10 +0,0 @@ -export const storeValues = (data, { id, values }) => { - console.log(values); - let newdata = { id: id, values: values }; - console.log(newdata); - return [...data, newdata]; -}; - -export const storeOptions = (options, id, option) => { - return [...options, { id: id, option: option }]; -}; diff --git a/sites/unep-dashboard/resources/js/reducers/reducers.js b/sites/unep-dashboard/resources/js/reducers/reducers.js index be134ef4..ca244dad 100644 --- a/sites/unep-dashboard/resources/js/reducers/reducers.js +++ b/sites/unep-dashboard/resources/js/reducers/reducers.js @@ -1,90 +1,96 @@ import { + pageState, showPage, -} from './helpers/page-helpers.js'; +} from './states/page-states.js'; import { + filterState, appendFilters, updateSelectedFilters, showFilters, -} from './helpers/filter-helpers.js'; +} from './states/filter-states.js'; +import { + chartState, + appendData, + appendOption, + selectCharts, + filterCharts, +} from './states/chart-states.js'; const initialState = { - pageActive: "home", - filters: [[ - { - name:'loading', - code:'loading', - id:1 - }, - { - name:'mantap', - code:'mantap', - id:2 - } - ]], - filterDepth: 1, - filterSelected: [{ - id: 1, - name: 'Select Programs' - }], - filterActive: false, - countries: [{ - name: 'Select Country', - code: 'Loading', - id: 1, - }], - countrySelected: 'Select Country', - chartData: [ - { - id: 1, - values: [{ code: "Loading", name: "Loading", value: 0 }] - } - ], - chartOptions: [], - chartActive: { - id: 1, - values: [{ code: "Loading", name: "Loading", value: 0 }] - } + page: pageState, + filters: filterState, + charts: chartState, + } export const states = (state = initialState, action) => { switch (action.type) { case 'PAGE - CHANGE PAGE': - return showPage(state, action.page) + return { + ...state, + page: showPage(state.page, action.page) + } case 'FILTERS - PROGRAM INIT': return { ...state, - filters: [action.filters] + filters: { + ...state.filters, + list: [action.list] + } } case 'FILTERS - PROGRAM APPEND': - return appendFilters(state, action.filters, action.depth) + return { + ...state, + filters: appendFilters(state.filters, action.list, action.depth) + } case 'FILTERS - PROGRAM SELECT': - return updateSelectedFilters(state, action.name, action.id, action.depth) + return { + ...state, + filters: updateSelectedFilters(state.filters, action.name, action.id, action.depth) + } case 'FILTERS - PROGRAM CHANGE': - return showFilters(state, action.filters) + return { + ...state, + filters: showFilters(state.filters, action.list) + } case 'FILTERS - COUNTRY INIT': return { ...state, - countries: action.countries + filters : { + ...state.filters, + countries: action.countries + } + } + case 'FILTERS - COUNTRY CHANGE': + return { + ...state, + filters: { + ...state.filters, + country: action.country + } } - case 'FILTERS - CHANGE COUNTRY': + case 'CHART - VALUES APPEND': return { ...state, - countrySelected: action.country + charts: appendData(state.charts, action.values) } - case 'CHART - STORE': + case 'CHART - VALUES SELECT': return { ...state, - chartData: storeChart(action.id, action.values) + charts: selectCharts(state.charts, action.id) } - case 'CHART - CHANGE': + case 'CHART - VALUES FILTER': return { ...state, - chartActive: changeActive(state.chartData, action.id) + charts: filterCharts(state.charts, action.data) } - case 'CHART - OPTIONS': + case 'CHART - OPTIONS APPEND': return { ...state, - chartActive: (action.id) + charts: { + ...state.charts, + options: appendOption(option) + } } default: return state; diff --git a/sites/unep-dashboard/resources/js/reducers/states/chart-states.js b/sites/unep-dashboard/resources/js/reducers/states/chart-states.js new file mode 100644 index 00000000..d594e981 --- /dev/null +++ b/sites/unep-dashboard/resources/js/reducers/states/chart-states.js @@ -0,0 +1,59 @@ +export const chartState = { + data: [ + { + id: 1, + name: "", + units: "", + description: "", + values: [{ id:1, code: "Loading", name: "Loading", value: 0 }] + } + ], + loading: true, + options: [ + { + id: 1, + options: [] + } + ], + filtered: false, + active: { + id: 1, + name: "", + units: "", + description: "Loading", + values: [{ id:1, code: "", name: "Loading", value: 0}] + } +}; + +export const appendData = (state, data) => { + return { + ...state, + data: [...state.data, data] + }; +}; + +export const appendOption = (state, id, option) => { + return { + ...state, + options: [...state.option, { id: id, option: option }] + }; +}; + +export const filterCharts = (state, data) => { + return { + ...state, + active: { + ...state.active, + values: data, + } + } +} + +export const selectCharts = (state, id) => { + let data = state.data.find(x => x.id === id); + return { + ...state, + active: data, + loading:false + } +}; diff --git a/sites/unep-dashboard/resources/js/reducers/helpers/filter-helpers.js b/sites/unep-dashboard/resources/js/reducers/states/filter-states.js similarity index 54% rename from sites/unep-dashboard/resources/js/reducers/helpers/filter-helpers.js rename to sites/unep-dashboard/resources/js/reducers/states/filter-states.js index ec781bc4..49b3c6ae 100644 --- a/sites/unep-dashboard/resources/js/reducers/helpers/filter-helpers.js +++ b/sites/unep-dashboard/resources/js/reducers/states/filter-states.js @@ -1,12 +1,36 @@ +export const filterState = { + list: [[ + { + name:'loading', + code:'loading', + id:1, + values:[{ id: 1, name: "Loading", value: 0 }] + } + ]], + depth: 1, + selected: [{ + id: 1, + name: 'Select Programs', + values:[{ id: 1, name: "Loading", value: 0 }] + }], + active: false, + countries: [{ + name: 'Select Country', + code: 'Loading', + id: 1, + }], + country: 'Select Country', +} + export const showFilters = (state, data) => { return { ...state, - filters: [data] + list: [data] } } export const updateSelectedFilters = (state, name, id, depth) => { - let selected = state.filterSelected; + let selected = state.selected; let x = depth; selected[depth] = { id:id, @@ -17,7 +41,7 @@ export const updateSelectedFilters = (state, name, id, depth) => { // console.log('x',x, 'depth', depth, 'check', check); if (check){ id = selected[x - 1].id; - let next_selected = state.filters[x - 1].find((data) => data.id === id).childs[0]; + let next_selected = state.list[x - 1].find((data) => data.id === id).childs[0]; selected[x] = { id: next_selected.id, name: next_selected.name, @@ -27,40 +51,40 @@ export const updateSelectedFilters = (state, name, id, depth) => { } let newdata = { ...state, - filterSelected: selected, + selected: selected, } return newdata; } export const appendFilters = (state, data, depth) => { let appends = []; - let len = state.filters.length - 1; + let len = state.list.length - 1; let i = 0 - if (state.filters.length === 3) { + if (state.list.length === 3) { appends = false } let newdata = { ...state, - filterDepth: 3 + depth: 3 } if (appends) { while (i <= len) { - let current = state.filters[i]; + let current = state.list[i]; appends = [...appends, current] i++; } newdata = { ...state, - filterDepth: state.filters.length + 1, - filters: [...appends, data] + depth: state.list.length + 1, + list: [...appends, data] } } if (appends === false) { - let finalFilter = state.filters; + let finalFilter = state.list; finalFilter[depth + 1] = data; newdata = { ...state, - filters: finalFilter, + list: finalFilter, } } return newdata; diff --git a/sites/unep-dashboard/resources/js/reducers/helpers/page-helpers.js b/sites/unep-dashboard/resources/js/reducers/states/page-states.js similarity index 75% rename from sites/unep-dashboard/resources/js/reducers/helpers/page-helpers.js rename to sites/unep-dashboard/resources/js/reducers/states/page-states.js index 1b238c7b..fb3d700a 100644 --- a/sites/unep-dashboard/resources/js/reducers/helpers/page-helpers.js +++ b/sites/unep-dashboard/resources/js/reducers/states/page-states.js @@ -1,9 +1,10 @@ export const pageState = { + name: "home" } export const showPage = (state, page) => { return { ...state, - pageActive: page + name: page } } diff --git a/sites/unep-dashboard/resources/sass/custom.css b/sites/unep-dashboard/resources/sass/custom.css index d2629795..5a38053c 100644 --- a/sites/unep-dashboard/resources/sass/custom.css +++ b/sites/unep-dashboard/resources/sass/custom.css @@ -141,10 +141,6 @@ body { padding-top: 0px !important; } -.right-dropdowns.dropdown { - float: right; -} - .jumbotron { margin-top: 20px; } @@ -164,6 +160,8 @@ body { background-color: #009fe2 !important; font-family: "Assistant", sans-serif; border: 1px solid #0e9e82 !important; + border-radius: 0px; + border-bottom: solid 3px #0478a9!important; } .btn-primary:hover { @@ -270,9 +268,23 @@ h1.title-page { } .dropdown-menu.show { + width: 100%; max-width: 100%; } +.dropdown-fix { + display: inline-block; + margin-right: 10px; + padding-right: 10px; + border-right: 1px solid #ddd; + width: 100%; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 12px; +} + @media (min-width: 992px) { .container, .container-lg, @@ -280,6 +292,16 @@ h1.title-page { .container-sm { max-width: 95%!important; } + + .dropdown-menu.show { + width: 100%; + } + + .dropdown-fix { + width: 200px; + max-width: 200px; + } + .navbar-expand-lg .navbar-collapse { display: -webkit-box !important; display: flex !important; @@ -298,14 +320,13 @@ h1.title-page { } .nav-right { height: 40px; - border-bottom: solid 3px #0478a9; } + .nav-right .right-dropdowns, .nav-right .btn { height: 37px; - padding-left: 20px; - padding-right: 20px; line-height: 26px; border-radius: 0px; + border-bottom: solid 3px #0478a9!important; } .nav-right .btn svg { margin-right: 10px; @@ -319,9 +340,6 @@ h1.title-page { min-width:100%; padding-bottom: 10px; } - .container .right-dropdowns.dropdown{ - margin-right: 0px; - } .container .dropdown .btn { min-width:100%; text-align: left; diff --git a/sites/unep-dashboard/routes/api.php b/sites/unep-dashboard/routes/api.php index bc560a3c..10e8fe43 100644 --- a/sites/unep-dashboard/routes/api.php +++ b/sites/unep-dashboard/routes/api.php @@ -27,3 +27,5 @@ Route::get('count/values', 'Api\ChartController@getAllValues'); Route::get('value/{id}', 'Api\ChartController@getValueById'); + +Route::get('test', 'Api\TestController@test');