From 8c082e7bc9ccbeb54003b9b74d62f3bd11bc9ca2 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Sat, 17 Feb 2018 23:40:58 +0530 Subject: [PATCH] [v0.1.0] Major Refactor (#57) * [v0.1.0] Major Refactor - Remove moment and Snap dependencies - Use Rollup as build tool - Use Prettier for linting/styling - Use Jest for testing - Use yarn * Change Bar hover behaviour, Bar animation * Corner radius configurable --- .babelrc | 3 +- .eslintrc | 185 +- .prettierrc.json | 4 + dist/frappe-gantt.css | 117 ++ dist/frappe-gantt.js | 3668 +++++++++++++++++------------------- dist/frappe-gantt.min.js | 7 +- index.html | 10 +- package.json | 46 +- rollup.config.js | 25 + src/Arrow.js | 173 +- src/Bar.js | 933 ++++----- src/Gantt.js | 571 ------ src/date_utils.js | 222 +++ src/gantt.scss | 76 +- src/index.js | 849 +++++++++ src/popup.js | 69 + src/svg_utils.js | 133 ++ tests/date_utils.test.js | 75 + webpack.config.js | 52 - yarn.lock | 3869 ++++++++++++++++++++++++++++++++++++++ 20 files changed, 7671 insertions(+), 3416 deletions(-) mode change 100755 => 100644 .eslintrc create mode 100644 .prettierrc.json create mode 100644 dist/frappe-gantt.css create mode 100644 rollup.config.js delete mode 100644 src/Gantt.js create mode 100644 src/date_utils.js create mode 100644 src/index.js create mode 100644 src/popup.js create mode 100644 src/svg_utils.js create mode 100644 tests/date_utils.test.js delete mode 100755 webpack.config.js create mode 100644 yarn.lock diff --git a/.babelrc b/.babelrc index 7b1c321..2f01e1d 100755 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,3 @@ { - "presets": ["es2015"], - "plugins": ["babel-plugin-add-module-exports"] + "presets": ["env"] } \ No newline at end of file diff --git a/.eslintrc b/.eslintrc old mode 100755 new mode 100644 index 53abe60..8d09c5f --- a/.eslintrc +++ b/.eslintrc @@ -1,182 +1,7 @@ { - "ecmaFeatures": { - "globalReturn": true, - "jsx": true, - "modules": true - }, - - "env": { - "browser": true, - "es6": true, - "node": true - }, - - "globals": { - "document": false, - "escape": false, - "navigator": false, - "unescape": false, - "window": false, - "describe": true, - "before": true, - "it": true, - "expect": true, - "sinon": true - }, - - "parser": "babel-eslint", - - "plugins": [ - - ], - - "rules": { - "block-scoped-var": 2, - "brace-style": [2, "1tbs", { "allowSingleLine": true }], - "comma-dangle": [2, "never"], - "comma-spacing": [2, { "before": false, "after": true }], - "comma-style": [2, "last"], - "complexity": 0, - "consistent-return": 2, - "consistent-this": 0, - "curly": [2, "multi-line"], - "default-case": 0, - "dot-location": [2, "property"], - "dot-notation": 0, - "eol-last": 2, - "eqeqeq": [2, "allow-null"], - "func-names": 0, - "func-style": 0, - "generator-star-spacing": [2, "both"], - "guard-for-in": 0, - "handle-callback-err": [2, "^(err|error|anySpecificError)$" ], - "indent": [2, "tab", { "SwitchCase": 1 }], - "key-spacing": [2, { "beforeColon": false, "afterColon": true }], - "linebreak-style": 0, - "max-depth": 0, - "max-len": [2, 120, 4], - "max-nested-callbacks": 0, - "max-params": 0, - "max-statements": 0, - "new-cap": [2, { "newIsCap": true, "capIsNew": false }], - "new-parens": 2, - "no-alert": 0, - "no-array-constructor": 2, - "no-bitwise": 0, - "no-caller": 2, - "no-catch-shadow": 0, - "no-cond-assign": 2, - "no-console": 0, - "no-constant-condition": 0, - "no-continue": 0, - "no-control-regex": 2, - "no-debugger": 2, - "no-delete-var": 2, - "no-div-regex": 0, - "no-dupe-args": 2, - "no-dupe-keys": 2, - "no-duplicate-case": 2, - "no-else-return": 2, - "no-empty": 0, - "no-empty-character-class": 2, - "no-empty-label": 2, - "no-eq-null": 0, - "no-eval": 2, - "no-ex-assign": 2, - "no-extend-native": 2, - "no-extra-bind": 2, - "no-extra-boolean-cast": 2, - "no-extra-parens": 0, - "no-extra-semi": 0, - "no-extra-strict": 0, - "no-fallthrough": 2, - "no-floating-decimal": 2, - "no-func-assign": 2, - "no-implied-eval": 2, - "no-inline-comments": 0, - "no-inner-declarations": [2, "functions"], - "no-invalid-regexp": 2, - "no-irregular-whitespace": 2, - "no-iterator": 2, - "no-label-var": 2, - "no-labels": 2, - "no-lone-blocks": 0, - "no-lonely-if": 0, - "no-loop-func": 0, - "no-mixed-requires": 0, - "no-mixed-spaces-and-tabs": [2, false], - "no-multi-spaces": 2, - "no-multi-str": 2, - "no-multiple-empty-lines": [2, { "max": 1 }], - "no-native-reassign": 2, - "no-negated-in-lhs": 2, - "no-nested-ternary": 0, - "no-new": 2, - "no-new-func": 2, - "no-new-object": 2, - "no-new-require": 2, - "no-new-wrappers": 2, - "no-obj-calls": 2, - "no-octal": 2, - "no-octal-escape": 2, - "no-path-concat": 0, - "no-plusplus": 0, - "no-process-env": 0, - "no-process-exit": 0, - "no-proto": 2, - "no-redeclare": 2, - "no-regex-spaces": 2, - "no-reserved-keys": 0, - "no-restricted-modules": 0, - "no-return-assign": 2, - "no-script-url": 0, - "no-self-compare": 2, - "no-sequences": 2, - "no-shadow": 0, - "no-shadow-restricted-names": 2, - "no-spaced-func": 2, - "no-sparse-arrays": 2, - "no-sync": 0, - "no-ternary": 0, - "no-throw-literal": 2, - "no-trailing-spaces": 2, - "no-undef": 2, - "no-undef-init": 2, - "no-undefined": 0, - "no-underscore-dangle": 0, - "no-unneeded-ternary": 2, - "no-unreachable": 2, - "no-unused-expressions": 0, - "no-unused-vars": [2, { "vars": "all", "args": "none" }], - "no-var": 0, - "no-void": 0, - "no-warning-comments": 0, - "no-with": 2, - "one-var": 0, - "operator-assignment": 0, - "operator-linebreak": [2, "after"], - "padded-blocks": 0, - "quote-props": 0, - "quotes": [2, "single", "avoid-escape"], - "radix": 2, - "semi": [2, "always"], - "semi-spacing": 0, - "sort-vars": 0, - "space-before-blocks": [2, "always"], - "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}], - "space-in-brackets": 0, - "space-in-parens": [2, "never"], - "space-infix-ops": 2, - "space-return-throw-case": 2, - "space-unary-ops": [2, { "words": true, "nonwords": false }], - "spaced-comment": [2, "always"], - "strict": 0, - "use-isnan": 2, - "valid-jsdoc": 0, - "valid-typeof": 2, - "vars-on-top": 2, - "wrap-iife": [2, "any"], - "wrap-regex": 0, - "yoda": [2, "never"] - } + "extends": ["plugin:prettier/recommended"], + "parserOptions": { + "ecmaVersion": 6, + "sourceType": "module" + } } diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..a7b6f32 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,4 @@ +{ + "tabWidth": 4, + "singleQuote": true +} \ No newline at end of file diff --git a/dist/frappe-gantt.css b/dist/frappe-gantt.css new file mode 100644 index 0000000..5f727d9 --- /dev/null +++ b/dist/frappe-gantt.css @@ -0,0 +1,117 @@ +.gantt .grid-background { + fill: none; } + +.gantt .grid-header { + fill: #ffffff; + stroke: #e0e0e0; + stroke-width: 1.4; } + +.gantt .grid-row { + fill: #ffffff; } + +.gantt .grid-row:nth-child(even) { + fill: #f5f5f5; } + +.gantt .row-line { + stroke: #ebeff2; } + +.gantt .tick { + stroke: #e0e0e0; + stroke-width: 0.2; } + .gantt .tick.thick { + stroke-width: 0.4; } + +.gantt .today-highlight { + fill: #fcf8e3; + opacity: 0.5; } + +.gantt .arrow { + fill: none; + stroke: #666; + stroke-width: 1.4; } + +.gantt .bar { + fill: #b8c2cc; + stroke: #8D99A6; + stroke-width: 0; + transition: stroke-width .3s ease; + user-select: none; } + +.gantt .bar-progress { + fill: #a3a3ff; } + +.gantt .bar-invalid { + fill: transparent; + stroke: #8D99A6; + stroke-width: 1; + stroke-dasharray: 5; } + .gantt .bar-invalid ~ .bar-label { + fill: #555; } + +.gantt .bar-label { + fill: #fff; + dominant-baseline: central; + text-anchor: middle; + font-size: 12px; + font-weight: lighter; } + .gantt .bar-label.big { + fill: #555; + text-anchor: start; } + +.gantt .handle { + fill: #ddd; + cursor: ew-resize; + opacity: 0; + visibility: hidden; + transition: opacity .3s ease; } + +.gantt .bar-wrapper { + cursor: pointer; } + .gantt .bar-wrapper:hover .bar { + fill: #a9b5c1; } + .gantt .bar-wrapper:hover .bar-progress { + fill: #8a8aff; } + .gantt .bar-wrapper:hover .handle { + visibility: visible; + opacity: 1; } + .gantt .bar-wrapper.active .bar { + fill: #a9b5c1; } + .gantt .bar-wrapper.active .bar-progress { + fill: #8a8aff; } + +.gantt .lower-text, .gantt .upper-text { + font-size: 12px; + text-anchor: middle; } + +.gantt .upper-text { + fill: #555; } + +.gantt .lower-text { + fill: #333; } + +.gantt .hide { + display: none; } + +.gantt-container { + position: relative; + font-size: 12px; } + .gantt-container .popup-wrapper { + position: absolute; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.8); + padding: 0; + color: #959da5; + border-radius: 3px; } + .gantt-container .popup-wrapper .title { + border-bottom: 3px solid #a3a3ff; + padding: 10px; } + .gantt-container .popup-wrapper .subtitle { + padding: 10px; + color: #dfe2e5; } + .gantt-container .popup-wrapper .pointer { + position: absolute; + height: 5px; + margin: 0 0 0 -5px; + border: 5px solid transparent; + border-top-color: rgba(0, 0, 0, 0.8); } diff --git a/dist/frappe-gantt.js b/dist/frappe-gantt.js index b50b17c..946b1b9 100644 --- a/dist/frappe-gantt.js +++ b/dist/frappe-gantt.js @@ -1,1942 +1,1766 @@ -(function webpackUniversalModuleDefinition(root, factory) { - if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(); - else if(typeof define === 'function' && define.amd) - define("Gantt", [], factory); - else if(typeof exports === 'object') - exports["Gantt"] = factory(); - else - root["Gantt"] = factory(); -})(this, function() { -return /******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) -/******/ return installedModules[moduleId].exports; -/******/ -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ exports: {}, -/******/ id: moduleId, -/******/ loaded: false -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.loaded = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ function(module, exports, __webpack_require__) { +var Gantt = (function () { +'use strict'; - 'use strict'; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - exports.default = Gantt; - - __webpack_require__(1); - - var _Bar = __webpack_require__(5); - - var _Bar2 = _interopRequireDefault(_Bar); - - var _Arrow = __webpack_require__(6); - - var _Arrow2 = _interopRequireDefault(_Arrow); - - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - - function Gantt(element, tasks) { - var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; - - - var self = {}; - - function init() { - set_defaults(); - - // expose methods - self.change_view_mode = change_view_mode; - self.unselect_all = unselect_all; - self.view_is = view_is; - self.get_bar = get_bar; - self.trigger_event = trigger_event; - self.refresh = refresh; - - // initialize with default view mode - change_view_mode(self.config.view_mode); - } - - function set_defaults() { - - var merge = __webpack_require__(7); - - var defaults = { - header_height: 50, - column_width: 30, - step: 24, - view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'], - bar: { - height: 20, - corner_radius: 3 - }, - arrow: { - curve: 5 - }, - padding: 18, - view_mode: 'Day', - date_format: 'YYYY-MM-DD', - custom_popup_html: null - }; - self.config = merge(defaults, config); - - reset_variables(tasks); - } - - function reset_variables(tasks) { - if (typeof element === 'string') { - self.element = document.querySelector(element); - } else if (element instanceof SVGElement) { - self.element = element; - } else if (element instanceof HTMLElement) { - self.element = element.querySelector('svg'); - } else { - throw new TypeError('Frappé Gantt only supports usage of a string CSS selector,' + ' HTML DOM element or SVG DOM element for the \'element\' parameter'); - } - - self._tasks = tasks; - - self._bars = []; - self._arrows = []; - self.element_groups = {}; - } - - function refresh(updated_tasks) { - reset_variables(updated_tasks); - change_view_mode(self.config.view_mode); - } - - function change_view_mode(mode) { - set_scale(mode); - prepare(); - render(); - // fire viewmode_change event - trigger_event('view_change', [mode]); - } - - function prepare() { - prepare_tasks(); - prepare_dependencies(); - prepare_dates(); - prepare_canvas(); - } - - function prepare_tasks() { - - // prepare tasks - self.tasks = self._tasks.map(function (task, i) { - - // momentify - task._start = moment(task.start, self.config.date_format); - task._end = moment(task.end, self.config.date_format); - - // make task invalid if duration too large - if (task._end.diff(task._start, 'years') > 10) { - task.end = null; - } - - // cache index - task._index = i; - - // invalid dates - if (!task.start && !task.end) { - task._start = moment().startOf('day'); - task._end = moment().startOf('day').add(2, 'days'); - } - if (!task.start && task.end) { - task._start = task._end.clone().add(-2, 'days'); - } - if (task.start && !task.end) { - task._end = task._start.clone().add(2, 'days'); - } - - // invalid flag - if (!task.start || !task.end) { - task.invalid = true; - } - - // dependencies - if (typeof task.dependencies === 'string' || !task.dependencies) { - var deps = []; - if (task.dependencies) { - deps = task.dependencies.split(',').map(function (d) { - return d.trim(); - }).filter(function (d) { - return d; - }); - } - task.dependencies = deps; - } - - // uids - if (!task.id) { - task.id = generate_id(task); - } - - return task; - }); - } - - function prepare_dependencies() { - - self.dependency_map = {}; - var _iteratorNormalCompletion = true; - var _didIteratorError = false; - var _iteratorError = undefined; - - try { - for (var _iterator = self.tasks[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { - var t = _step.value; - var _iteratorNormalCompletion2 = true; - var _didIteratorError2 = false; - var _iteratorError2 = undefined; - - try { - for (var _iterator2 = t.dependencies[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { - var d = _step2.value; - - self.dependency_map[d] = self.dependency_map[d] || []; - self.dependency_map[d].push(t.id); - } - } catch (err) { - _didIteratorError2 = true; - _iteratorError2 = err; - } finally { - try { - if (!_iteratorNormalCompletion2 && _iterator2.return) { - _iterator2.return(); - } - } finally { - if (_didIteratorError2) { - throw _iteratorError2; - } - } - } - } - } catch (err) { - _didIteratorError = true; - _iteratorError = err; - } finally { - try { - if (!_iteratorNormalCompletion && _iterator.return) { - _iterator.return(); - } - } finally { - if (_didIteratorError) { - throw _iteratorError; - } - } - } - } - - function prepare_dates() { - - self.gantt_start = self.gantt_end = null; - var _iteratorNormalCompletion3 = true; - var _didIteratorError3 = false; - var _iteratorError3 = undefined; - - try { - for (var _iterator3 = self.tasks[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) { - var task = _step3.value; - - // set global start and end date - if (!self.gantt_start || task._start < self.gantt_start) { - self.gantt_start = task._start; - } - if (!self.gantt_end || task._end > self.gantt_end) { - self.gantt_end = task._end; - } - } - } catch (err) { - _didIteratorError3 = true; - _iteratorError3 = err; - } finally { - try { - if (!_iteratorNormalCompletion3 && _iterator3.return) { - _iterator3.return(); - } - } finally { - if (_didIteratorError3) { - throw _iteratorError3; - } - } - } - - set_gantt_dates(); - setup_dates(); - } - - function prepare_canvas() { - if (self.canvas) return; - self.canvas = Snap(self.element).addClass('gantt'); - } - - function render() { - clear(); - setup_groups(); - make_grid(); - make_dates(); - make_bars(); - make_arrows(); - map_arrows_on_bars(); - set_width(); - set_scroll_position(); - bind_grid_click(); - } - - function clear() { - self.canvas.clear(); - self._bars = []; - self._arrows = []; - } - - function set_gantt_dates() { - - if (view_is(['Quarter Day', 'Half Day'])) { - self.gantt_start = self.gantt_start.clone().subtract(7, 'day'); - self.gantt_end = self.gantt_end.clone().add(7, 'day'); - } else if (view_is('Month')) { - self.gantt_start = self.gantt_start.clone().startOf('year'); - self.gantt_end = self.gantt_end.clone().endOf('month').add(1, 'year'); - } else { - self.gantt_start = self.gantt_start.clone().startOf('month').subtract(1, 'month'); - self.gantt_end = self.gantt_end.clone().endOf('month').add(1, 'month'); - } - } - - function setup_dates() { - - self.dates = []; - var cur_date = null; - - while (cur_date === null || cur_date < self.gantt_end) { - if (!cur_date) { - cur_date = self.gantt_start.clone(); - } else { - cur_date = view_is('Month') ? cur_date.clone().add(1, 'month') : cur_date.clone().add(self.config.step, 'hours'); - } - self.dates.push(cur_date); - } - } - - function setup_groups() { - - var groups = ['grid', 'date', 'arrow', 'progress', 'bar', 'details']; - // make group layers - var _iteratorNormalCompletion4 = true; - var _didIteratorError4 = false; - var _iteratorError4 = undefined; - - try { - for (var _iterator4 = groups[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) { - var group = _step4.value; - - self.element_groups[group] = self.canvas.group().attr({ 'id': group }); - } - } catch (err) { - _didIteratorError4 = true; - _iteratorError4 = err; - } finally { - try { - if (!_iteratorNormalCompletion4 && _iterator4.return) { - _iterator4.return(); - } - } finally { - if (_didIteratorError4) { - throw _iteratorError4; - } - } - } - } - - function set_scale(scale) { - self.config.view_mode = scale; - - if (scale === 'Day') { - self.config.step = 24; - self.config.column_width = 38; - } else if (scale === 'Half Day') { - self.config.step = 24 / 2; - self.config.column_width = 38; - } else if (scale === 'Quarter Day') { - self.config.step = 24 / 4; - self.config.column_width = 38; - } else if (scale === 'Week') { - self.config.step = 24 * 7; - self.config.column_width = 140; - } else if (scale === 'Month') { - self.config.step = 24 * 30; - self.config.column_width = 120; - } - } - - function set_width() { - var cur_width = self.canvas.node.getBoundingClientRect().width; - var actual_width = self.canvas.select('#grid .grid-row').attr('width'); - if (cur_width < actual_width) { - self.canvas.attr('width', actual_width); - } - } - - function set_scroll_position() { - var parent_element = self.element.parentElement; - - if (!parent_element) return; - - var scroll_pos = get_min_date().diff(self.gantt_start, 'hours') / self.config.step * self.config.column_width - self.config.column_width; - parent_element.scrollLeft = scroll_pos; - } - - function get_min_date() { - var task = self.tasks.reduce(function (acc, curr) { - return curr._start.isSameOrBefore(acc._start) ? curr : acc; - }); - return task._start; - } - - function make_grid() { - make_grid_background(); - make_grid_rows(); - make_grid_header(); - make_grid_ticks(); - make_grid_highlights(); - } - - function make_grid_background() { - - var grid_width = self.dates.length * self.config.column_width, - grid_height = self.config.header_height + self.config.padding + (self.config.bar.height + self.config.padding) * self.tasks.length; - - self.canvas.rect(0, 0, grid_width, grid_height).addClass('grid-background').appendTo(self.element_groups.grid); - - self.canvas.attr({ - height: grid_height + self.config.padding + 100, - width: '100%' - }); - } - - function make_grid_header() { - var header_width = self.dates.length * self.config.column_width, - header_height = self.config.header_height + 10; - self.canvas.rect(0, 0, header_width, header_height).addClass('grid-header').appendTo(self.element_groups.grid); - } - - function make_grid_rows() { - - var rows = self.canvas.group().appendTo(self.element_groups.grid), - lines = self.canvas.group().appendTo(self.element_groups.grid), - row_width = self.dates.length * self.config.column_width, - row_height = self.config.bar.height + self.config.padding; - - var row_y = self.config.header_height + self.config.padding / 2; - - var _iteratorNormalCompletion5 = true; - var _didIteratorError5 = false; - var _iteratorError5 = undefined; - - try { - for (var _iterator5 = self.tasks[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) { - var task = _step5.value; - // eslint-disable-line - self.canvas.rect(0, row_y, row_width, row_height).addClass('grid-row').appendTo(rows); - - self.canvas.line(0, row_y + row_height, row_width, row_y + row_height).addClass('row-line').appendTo(lines); - - row_y += self.config.bar.height + self.config.padding; - } - } catch (err) { - _didIteratorError5 = true; - _iteratorError5 = err; - } finally { - try { - if (!_iteratorNormalCompletion5 && _iterator5.return) { - _iterator5.return(); - } - } finally { - if (_didIteratorError5) { - throw _iteratorError5; - } - } - } - } - - function make_grid_ticks() { - var tick_x = 0, - tick_y = self.config.header_height + self.config.padding / 2, - tick_height = (self.config.bar.height + self.config.padding) * self.tasks.length; - - var _iteratorNormalCompletion6 = true; - var _didIteratorError6 = false; - var _iteratorError6 = undefined; - - try { - for (var _iterator6 = self.dates[Symbol.iterator](), _step6; !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next()).done); _iteratorNormalCompletion6 = true) { - var date = _step6.value; - - var tick_class = 'tick'; - // thick tick for monday - if (view_is('Day') && date.day() === 1) { - tick_class += ' thick'; - } - // thick tick for first week - if (view_is('Week') && date.date() >= 1 && date.date() < 8) { - tick_class += ' thick'; - } - // thick ticks for quarters - if (view_is('Month') && date.month() % 3 === 0) { - tick_class += ' thick'; - } - - self.canvas.path(Snap.format('M {x} {y} v {height}', { - x: tick_x, - y: tick_y, - height: tick_height - })).addClass(tick_class).appendTo(self.element_groups.grid); - - if (view_is('Month')) { - tick_x += date.daysInMonth() * self.config.column_width / 30; - } else { - tick_x += self.config.column_width; - } - } - } catch (err) { - _didIteratorError6 = true; - _iteratorError6 = err; - } finally { - try { - if (!_iteratorNormalCompletion6 && _iterator6.return) { - _iterator6.return(); - } - } finally { - if (_didIteratorError6) { - throw _iteratorError6; - } - } - } - } - - function make_grid_highlights() { - - // highlight today's date - if (view_is('Day')) { - var x = moment().startOf('day').diff(self.gantt_start, 'hours') / self.config.step * self.config.column_width; - var y = 0; - var width = self.config.column_width; - var height = (self.config.bar.height + self.config.padding) * self.tasks.length + self.config.header_height + self.config.padding / 2; - - self.canvas.rect(x, y, width, height).addClass('today-highlight').appendTo(self.element_groups.grid); - } - } - - function make_dates() { - var _iteratorNormalCompletion7 = true; - var _didIteratorError7 = false; - var _iteratorError7 = undefined; - - try { - - for (var _iterator7 = get_dates_to_draw()[Symbol.iterator](), _step7; !(_iteratorNormalCompletion7 = (_step7 = _iterator7.next()).done); _iteratorNormalCompletion7 = true) { - var date = _step7.value; - - self.canvas.text(date.lower_x, date.lower_y, date.lower_text).addClass('lower-text').appendTo(self.element_groups.date); - - if (date.upper_text) { - var $upper_text = self.canvas.text(date.upper_x, date.upper_y, date.upper_text).addClass('upper-text').appendTo(self.element_groups.date); - - // remove out-of-bound dates - if ($upper_text.getBBox().x2 > self.element_groups.grid.getBBox().width) { - $upper_text.remove(); - } - } - } - } catch (err) { - _didIteratorError7 = true; - _iteratorError7 = err; - } finally { - try { - if (!_iteratorNormalCompletion7 && _iterator7.return) { - _iterator7.return(); - } - } finally { - if (_didIteratorError7) { - throw _iteratorError7; - } - } - } - } - - function get_dates_to_draw() { - var last_date = null; - var dates = self.dates.map(function (date, i) { - var d = get_date_info(date, last_date, i); - last_date = date; - return d; - }); - return dates; - } - - function get_date_info(date, last_date, i) { - if (!last_date) { - last_date = date.clone().add(1, 'year'); - } - var date_text = { - 'Quarter Day_lower': date.format('HH'), - 'Half Day_lower': date.format('HH'), - 'Day_lower': date.date() !== last_date.date() ? date.format('D') : '', - 'Week_lower': date.month() !== last_date.month() ? date.format('D MMM') : date.format('D'), - 'Month_lower': date.format('MMMM'), - 'Quarter Day_upper': date.date() !== last_date.date() ? date.format('D MMM') : '', - 'Half Day_upper': date.date() !== last_date.date() ? date.month() !== last_date.month() ? date.format('D MMM') : date.format('D') : '', - 'Day_upper': date.month() !== last_date.month() ? date.format('MMMM') : '', - 'Week_upper': date.month() !== last_date.month() ? date.format('MMMM') : '', - 'Month_upper': date.year() !== last_date.year() ? date.format('YYYY') : '' - }; - - var base_pos = { - x: i * self.config.column_width, - lower_y: self.config.header_height, - upper_y: self.config.header_height - 25 - }; - - var x_pos = { - 'Quarter Day_lower': self.config.column_width * 4 / 2, - 'Quarter Day_upper': 0, - 'Half Day_lower': self.config.column_width * 2 / 2, - 'Half Day_upper': 0, - 'Day_lower': self.config.column_width / 2, - 'Day_upper': self.config.column_width * 30 / 2, - 'Week_lower': 0, - 'Week_upper': self.config.column_width * 4 / 2, - 'Month_lower': self.config.column_width / 2, - 'Month_upper': self.config.column_width * 12 / 2 - }; - - return { - upper_text: date_text[self.config.view_mode + '_upper'], - lower_text: date_text[self.config.view_mode + '_lower'], - upper_x: base_pos.x + x_pos[self.config.view_mode + '_upper'], - upper_y: base_pos.upper_y, - lower_x: base_pos.x + x_pos[self.config.view_mode + '_lower'], - lower_y: base_pos.lower_y - }; - } - - function make_arrows() { - self._arrows = []; - var _iteratorNormalCompletion8 = true; - var _didIteratorError8 = false; - var _iteratorError8 = undefined; - - try { - var _loop = function _loop() { - var task = _step8.value; - - var arrows = []; - arrows = task.dependencies.map(function (dep) { - var dependency = get_task(dep); - if (!dependency) return; - - var arrow = (0, _Arrow2.default)(self, // gt - self._bars[dependency._index], // from_task - self._bars[task._index] // to_task - ); - self.element_groups.arrow.add(arrow.element); - return arrow; // eslint-disable-line - }).filter(function (arr) { - return arr; - }); // filter falsy values - self._arrows = self._arrows.concat(arrows); - }; - - for (var _iterator8 = self.tasks[Symbol.iterator](), _step8; !(_iteratorNormalCompletion8 = (_step8 = _iterator8.next()).done); _iteratorNormalCompletion8 = true) { - _loop(); - } - } catch (err) { - _didIteratorError8 = true; - _iteratorError8 = err; - } finally { - try { - if (!_iteratorNormalCompletion8 && _iterator8.return) { - _iterator8.return(); - } - } finally { - if (_didIteratorError8) { - throw _iteratorError8; - } - } - } - } - - function make_bars() { - - self._bars = self.tasks.map(function (task) { - var bar = (0, _Bar2.default)(self, task); - self.element_groups.bar.add(bar.group); - return bar; - }); - } - - function map_arrows_on_bars() { - var _iteratorNormalCompletion9 = true; - var _didIteratorError9 = false; - var _iteratorError9 = undefined; - - try { - var _loop2 = function _loop2() { - var bar = _step9.value; - - bar.arrows = self._arrows.filter(function (arrow) { - return arrow.from_task.task.id === bar.task.id || arrow.to_task.task.id === bar.task.id; - }); - }; - - for (var _iterator9 = self._bars[Symbol.iterator](), _step9; !(_iteratorNormalCompletion9 = (_step9 = _iterator9.next()).done); _iteratorNormalCompletion9 = true) { - _loop2(); - } - } catch (err) { - _didIteratorError9 = true; - _iteratorError9 = err; - } finally { - try { - if (!_iteratorNormalCompletion9 && _iterator9.return) { - _iterator9.return(); - } - } finally { - if (_didIteratorError9) { - throw _iteratorError9; - } - } - } - } - - function bind_grid_click() { - self.element_groups.grid.click(function () { - unselect_all(); - self.element_groups.details.selectAll('.details-wrapper').forEach(function (el) { - return el.addClass('hide'); - }); - }); - } - - function unselect_all() { - self.canvas.selectAll('.bar-wrapper').forEach(function (el) { - el.removeClass('active'); - }); - } - - function view_is(modes) { - if (typeof modes === 'string') { - return self.config.view_mode === modes; - } else if (Array.isArray(modes)) { - var _iteratorNormalCompletion10 = true; - var _didIteratorError10 = false; - var _iteratorError10 = undefined; - - try { - for (var _iterator10 = modes[Symbol.iterator](), _step10; !(_iteratorNormalCompletion10 = (_step10 = _iterator10.next()).done); _iteratorNormalCompletion10 = true) { - var mode = _step10.value; - - if (self.config.view_mode === mode) return true; - } - } catch (err) { - _didIteratorError10 = true; - _iteratorError10 = err; - } finally { - try { - if (!_iteratorNormalCompletion10 && _iterator10.return) { - _iterator10.return(); - } - } finally { - if (_didIteratorError10) { - throw _iteratorError10; - } - } - } - - return false; - } - } - - function get_task(id) { - return self.tasks.find(function (task) { - return task.id === id; - }); - } - - function get_bar(id) { - return self._bars.find(function (bar) { - return bar.task.id === id; - }); - } - - function generate_id(task) { - return task.name + '_' + Math.random().toString(36).slice(2, 12); - } - - function trigger_event(event, args) { - if (self.config['on_' + event]) { - self.config['on_' + event].apply(null, args); - } - } - - init(); - - return self; - } /* global moment, Snap */ - /** - * Gantt: - * element: querySelector string, HTML DOM or SVG DOM element, required - * tasks: array of tasks, required - * task: { id, name, start, end, progress, dependencies, custom_class } - * config: configuration options, optional - */ - module.exports = exports['default']; +const YEAR = 'year'; +const MONTH = 'month'; +const DAY = 'day'; +const HOUR = 'hour'; +const MINUTE = 'minute'; +const SECOND = 'second'; +const MILLISECOND = 'millisecond'; -/***/ }, -/* 1 */ -/***/ function(module, exports, __webpack_require__) { +const month_names = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December' +]; - // style-loader: Adds some css to the DOM by adding a - - +

Interactive Gantt Chart entirely made in SVG!

-
- -
+