jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

chore: format

Browse Source
This commit is contained in:
Safwan Samsudeen 2024-04-30 05:06:17 +05:30
parent 1403f2e581
commit 3194f883ad
20 changed files with 5390 additions and 5126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.babelrc
View File

@ -1,3 +1,3 @@
{ {
"presets": ["env"] "presets": ["env"]
} }

30
.github/workflows/publish.yml vendored
View File

@ -1,19 +1,19 @@
name: Publish on NPM name: Publish on NPM
on: on:
push: push:
branches: [master] branches: [master]
jobs: jobs:
publish: publish:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v1 - uses: actions/checkout@v1
- uses: actions/setup-node@v1 - uses: actions/setup-node@v1
with: with:
node-version: 14 node-version: 14
- run: yarn install - run: yarn install
- run: yarn prettier-check - run: yarn prettier-check
- run: yarn test - run: yarn test
- uses: JS-DevTools/npm-publish@v1 - uses: JS-DevTools/npm-publish@v1
with: with:
token: ${{ secrets.NPM_TOKEN }} token: ${{ secrets.NPM_TOKEN }}

4
.prettierrc.json
View File

@ -1,4 +1,4 @@
{ {
"tabWidth": 4, "tabWidth": 4,
"singleQuote": true "singleQuote": true
} }

50
README.md
View File

@ -51,19 +51,19 @@ var gantt = new Gantt("#gantt", tasks);
You can also pass various options to the Gantt constructor: You can also pass various options to the Gantt constructor:
```js ```js
var gantt = new Gantt("#gantt", tasks, { var gantt = new Gantt('#gantt', tasks, {
header_height: 50, header_height: 50,
column_width: 30, column_width: 30,
step: 24, step: 24,
view_modes: ["Quarter Day", "Half Day", "Day", "Week", "Month"], view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],
bar_height: 20, bar_height: 20,
bar_corner_radius: 3, bar_corner_radius: 3,
arrow_curve: 5, arrow_curve: 5,
padding: 18, padding: 18,
view_mode: "Day", view_mode: 'Day',
date_format: "YYYY-MM-DD", date_format: 'YYYY-MM-DD',
language: "en", // or 'es', 'it', 'ru', 'ptBr', 'fr', 'tr', 'zh', 'de', 'hu' language: 'en', // or 'es', 'it', 'ru', 'ptBr', 'fr', 'tr', 'zh', 'de', 'hu'
custom_popup_html: null, custom_popup_html: null,
}); });
``` ```
@ -91,25 +91,25 @@ Assuming the last commit (or a couple of commits) were enhancements or fixes,
1. Run `yarn build` 1. Run `yarn build`
This will generate files in the `dist/` folder. These files need to be committed. This will generate files in the `dist/` folder. These files need to be committed.
1. Run `yarn publish` 1. Run `yarn publish`
1. Type the new version at the prompt 1. Type the new version at the prompt
Depending on the type of change, you can either bump the patch version or the minor version. Depending on the type of change, you can either bump the patch version or the minor version.
For e.g., For e.g.,
``` ```
0.5.0 -> 0.6.0 (minor version bump) 0.5.0 -> 0.6.0 (minor version bump)
0.5.0 -> 0.5.1 (patch version bump) 0.5.0 -> 0.5.1 (patch version bump)
``` ```
1. Now, there will be a commit named after the version you just entered. Include the generated files in `dist/` folder as part of this commit by running the command: 1. Now, there will be a commit named after the version you just entered. Include the generated files in `dist/` folder as part of this commit by running the command:
``` ```
git add dist git add dist
git commit --amend git commit --amend
git push origin master git push origin master
``` ```
License: MIT License: MIT

16
dist/frappe-gantt.css vendored
View File

@ -111,7 +111,7 @@
} }
.gantt-container .today-button, .gantt-container .today-button,
.gantt-container .viewmode-select { .gantt-container .viewmode-select {
background: #F4F5F6; background: #f4f5f6;
text-align: -webkit-center; text-align: -webkit-center;
text-align: center; text-align: center;
height: 25px; height: 25px;
@ -132,7 +132,7 @@
text-overflow: ""; text-overflow: "";
} }
.gantt-container .date-highlight { .gantt-container .date-highlight {
background-color: #EBEEF0; background-color: #ebeef0;
border-radius: 12px; border-radius: 12px;
position: absolute; position: absolute;
display: none; display: none;
@ -164,7 +164,7 @@
stroke: #ebeff2; stroke: #ebeff2;
} }
.gantt .tick { .gantt .tick {
stroke: #EBEEF0; stroke: #ebeef0;
stroke-width: 0.4; stroke-width: 0.4;
} }
.gantt .tick.thick { .gantt .tick.thick {
@ -172,11 +172,11 @@
stroke-width: 0.7; stroke-width: 0.7;
} }
.gantt .holiday-highlight { .gantt .holiday-highlight {
fill: #F9FAFA; fill: #f9fafa;
} }
.gantt .arrow { .gantt .arrow {
fill: none; fill: none;
stroke: #9FA9B1; stroke: #9fa9b1;
stroke-width: 1; stroke-width: 1;
} }
.gantt .bar-wrapper .bar { .gantt .bar-wrapper .bar {
@ -186,7 +186,7 @@
transition: stroke-width 0.3s ease; transition: stroke-width 0.3s ease;
} }
.gantt .bar-progress { .gantt .bar-progress {
fill: #EBEEF0; fill: #ebeef0;
} }
.gantt .bar-expected-progress { .gantt .bar-expected-progress {
fill: #c4c4e9; fill: #c4c4e9;
@ -269,7 +269,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
background: #171B1F; background: #171b1f;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
width: max-content; width: max-content;
@ -284,7 +284,7 @@
color: #fff; color: #fff;
} }
.gantt-container .popup-wrapper .subtitle { .gantt-container .popup-wrapper .subtitle {
color: #98A1A9; color: #98a1a9;
} }
.gantt-container .popup-wrapper .pointer { .gantt-container .popup-wrapper .pointer {
position: absolute; position: absolute;

4697
dist/frappe-gantt.js vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/frappe-gantt.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-gantt.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

260
index.html
View File

@ -1,130 +1,138 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Simple Gantt</title> <title>Simple Gantt</title>
<style> <style>
body { body {
font-family: sans-serif; font-family: sans-serif;
background: #ccc; background: #ccc;
} }
.container { .container {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
} }
/* custom class */ /* custom class */
.gantt .bar-milestone .bar { .gantt .bar-milestone .bar {
fill: tomato; fill: tomato;
} }
.heading { .heading {
text-align: center; text-align: center;
} }
.gantt-target.dark { .gantt-target.dark {
background-color: #252525; background-color: #252525;
} }
</style> </style>
<link rel="stylesheet" href="dist/frappe-gantt.css" /> <link rel="stylesheet" href="dist/frappe-gantt.css" />
<script src="dist/frappe-gantt.js"></script> <script src="dist/frappe-gantt.js"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h2 class="heading">Interactive Gantt Chart entirely made in SVG!</h2> <h2 class="heading">
<div class="gantt-target"></div> Interactive Gantt Chart entirely made in SVG!
</div> </h2>
<script> <div class="gantt-target"></div>
let tasks = [ </div>
{ <script>
start: '2024-04-01', let tasks = [
end: '2024-04-01', {
name: 'Redesign website', start: '2024-04-01',
id: "Task 0", end: '2024-04-01',
progress: 30 name: 'Redesign website',
}, id: 'Task 0',
{ progress: 30,
start: '2024-03-26', },
// Utilizes duration {
duration: '6d', start: '2024-03-26',
name: 'Write new content', // Utilizes duration
id: "Task 1", duration: '6d',
progress: 5, name: 'Write new content',
important: true id: 'Task 1',
}, progress: 5,
{ important: true,
start: '2024-04-04', },
end: '2024-04-08', {
name: 'Apply new styles', start: '2024-04-04',
id: "Task 2", end: '2024-04-08',
progress: 80, name: 'Apply new styles',
dependencies: 'Task 1' id: 'Task 2',
}, progress: 80,
{ dependencies: 'Task 1',
start: '2024-04-08', },
end: '2024-04-09', {
name: 'Review', start: '2024-04-08',
id: "Task 3", end: '2024-04-09',
progress: 5, name: 'Review',
dependencies: 'Task 2' id: 'Task 3',
}, progress: 5,
{ dependencies: 'Task 2',
start: '2024-04-08', },
end: '2024-04-10', {
name: 'Deploy', start: '2024-04-08',
id: "Task 4", end: '2024-04-10',
progress: 0, name: 'Deploy',
// dependencies: 'Task 2' id: 'Task 4',
}, progress: 0,
{ // dependencies: 'Task 2'
start: '2024-04-21', },
end: '2024-04-29', {
name: 'Go Live!', start: '2024-04-21',
id: "Task 5", end: '2024-04-29',
progress: 0, name: 'Go Live!',
dependencies: 'Task 2', id: 'Task 5',
custom_class: 'bar-milestone' progress: 0,
}, dependencies: 'Task 2',
// { custom_class: 'bar-milestone',
// start: '2014-01-05', },
// end: '2019-10-12', // {
// name: 'Long term task', // start: '2014-01-05',
// id: "Task 6", // end: '2019-10-12',
// progress: 0 // name: 'Long term task',
// } // id: "Task 6",
]; // progress: 0
// }
];
// Uncomment to test fixed header // Uncomment to test fixed header
tasks = [...tasks, ...Array.from({length: tasks.length * 3}, (_, i) => ({...tasks[i % 3], id: i}))] tasks = [
...tasks,
let gantt_chart = new Gantt(".gantt-target", tasks, { ...Array.from({ length: tasks.length * 3 }, (_, i) => ({
on_click: (task) => { ...tasks[i % 3],
console.log("Click", task); id: i,
}, })),
// on_double_click: (task) => { ];
// console.log("Double Click", task);
// }, let gantt_chart = new Gantt('.gantt-target', tasks, {
// on_date_change: (task, start, end) => { on_click: (task) => {
// console.log("Date change", task, start, end); console.log('Click', task);
// }, },
// on_progress_change: (task, progress) => { // on_double_click: (task) => {
// console.log("Progress Change", task, progress); // console.log("Double Click", task);
// }, // },
// on_view_change: (mode) => { // on_date_change: (task, start, end) => {
// console.log("View Change", mode); // console.log("Date change", task, start, end);
// }, // },
// on_hover: (task, x, y) => { // on_progress_change: (task, progress) => {
// console.log("Hover", x, y); // console.log("Progress Change", task, progress);
// }, // },
view_mode: "Day", // on_view_change: (mode) => {
view_mode_padding: { DAY: "3d" }, // console.log("View Change", mode);
popup: false, // },
// scroll_to: 'today', // on_hover: (task, x, y) => {
// view_mode_select: true, // console.log("Hover", x, y);
// today_button: false, // },
// readonly: true, view_mode: 'Day',
// lines: 'vertical', view_mode_padding: { DAY: '3d' },
// lower_text: (date) => date.getDay(), popup: false,
// upper_text: (date, view_mode, def) => def, // scroll_to: 'today',
}); // view_mode_select: true,
console.log(gantt_chart); // today_button: false,
</script> // readonly: true,
</body> // lines: 'vertical',
// lower_text: (date) => date.getDay(),
// upper_text: (date, view_mode, def) => def,
});
console.log(gantt_chart);
</script>
</body>
</html> </html>

100
package.json
View File

@ -1,52 +1,52 @@
{ {
"name": "frappe-gantt", "name": "frappe-gantt",
"version": "0.6.1", "version": "0.6.1",
"description": "A simple, modern, interactive gantt library for the web", "description": "A simple, modern, interactive gantt library for the web",
"main": "src/index.js", "main": "src/index.js",
"scripts": { "scripts": {
"start": "yarn run dev", "start": "yarn run dev",
"build": "rollup -c", "build": "rollup -c",
"dev": "rollup -c -w", "dev": "rollup -c -w",
"test": "jest", "test": "jest",
"test:watch": "jest --watch", "test:watch": "jest --watch",
"prettier": "prettier --write \"{src/*,tests/*,rollup.config}.js\"", "prettier": "prettier --write \"{src/*,tests/*,rollup.config}.js\"",
"prettier-check": "prettier --check \"{src/*,tests/*,rollup.config}.js\"" "prettier-check": "prettier --check \"{src/*,tests/*,rollup.config}.js\""
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/frappe/gantt.git" "url": "https://github.com/frappe/gantt.git"
}, },
"files": [ "files": [
"src", "src",
"dist", "dist",
"README.md" "README.md"
], ],
"keywords": [ "keywords": [
"gantt", "gantt",
"svg", "svg",
"simple gantt", "simple gantt",
"project timeline", "project timeline",
"interactive gantt", "interactive gantt",
"project management" "project management"
], ],
"author": "Faris Ansari", "author": "Faris Ansari",
"license": "MIT", "license": "MIT",
"bugs": { "bugs": {
"url": "https://github.com/frappe/gantt/issues" "url": "https://github.com/frappe/gantt/issues"
}, },
"homepage": "https://github.com/frappe/gantt", "homepage": "https://github.com/frappe/gantt",
"devDependencies": { "devDependencies": {
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.6.1",
"eslint": "^4.17.0", "eslint": "^4.17.0",
"eslint-config-prettier": "^2.9.0", "eslint-config-prettier": "^2.9.0",
"eslint-plugin-prettier": "^2.6.0", "eslint-plugin-prettier": "^2.6.0",
"jest": "^22.2.1", "jest": "^22.2.1",
"prettier": "3.2.5", "prettier": "3.2.5",
"rollup": "^2.70.2", "rollup": "^2.70.2",
"rollup-plugin-sass": "^1.2.12", "rollup-plugin-sass": "^1.2.12",
"rollup-plugin-terser": "^7.0.2" "rollup-plugin-terser": "^7.0.2"
}, },
"eslintIgnore": [ "eslintIgnore": [
"dist" "dist"
] ]
} }

60
rollup.config.js
View File

@ -1,37 +1,37 @@
import sass from "rollup-plugin-sass"; import sass from 'rollup-plugin-sass';
import { terser } from "rollup-plugin-terser"; import { terser } from 'rollup-plugin-terser';
const dev = { const dev = {
input: "src/index.js", input: 'src/index.js',
output: { output: {
name: "Gantt", name: 'Gantt',
file: "dist/frappe-gantt.js", file: 'dist/frappe-gantt.js',
sourcemap: true, sourcemap: true,
format: "iife", format: 'iife',
}, },
plugins: [ plugins: [
sass({ sass({
output: true, output: true,
}), }),
], ],
}; };
const prod = { const prod = {
input: "src/index.js", input: 'src/index.js',
output: { output: {
name: "Gantt", name: 'Gantt',
file: "dist/frappe-gantt.min.js", file: 'dist/frappe-gantt.min.js',
sourcemap: true, sourcemap: true,
format: "iife", format: 'iife',
}, },
plugins: [ plugins: [
sass({ sass({
output: true, output: true,
options: { options: {
outputStyle: "compressed", outputStyle: 'compressed',
}, },
}), }),
terser(), terser(),
], ],
}; };
export default [dev, prod]; export default [dev, prod];

127
src/arrow.js
View File

@ -1,52 +1,53 @@
import { createSVG } from "./svg_utils"; import { createSVG } from './svg_utils';
export default class Arrow { export default class Arrow {
constructor(gantt, from_task, to_task) { constructor(gantt, from_task, to_task) {
this.gantt = gantt; this.gantt = gantt;
this.from_task = from_task; this.from_task = from_task;
this.to_task = to_task; this.to_task = to_task;
this.calculate_path(); this.calculate_path();
this.draw(); this.draw();
}
calculate_path() {
let start_x =
this.from_task.$bar.getX() + this.from_task.$bar.getWidth() / 2;
const condition = () =>
this.to_task.$bar.getX() < start_x + this.gantt.options.padding &&
start_x > this.from_task.$bar.getX() + this.gantt.options.padding;
while (condition()) {
start_x -= 10;
} }
const start_y = calculate_path() {
this.gantt.options.header_height + let start_x =
this.gantt.options.bar_height + this.from_task.$bar.getX() + this.from_task.$bar.getWidth() / 2;
(this.gantt.options.padding + this.gantt.options.bar_height) *
this.from_task.task._index +
this.gantt.options.padding;
const end_x = this.to_task.$bar.getX() - this.gantt.options.padding / 2 - 7; const condition = () =>
const end_y = this.to_task.$bar.getX() < start_x + this.gantt.options.padding &&
this.gantt.options.header_height + start_x > this.from_task.$bar.getX() + this.gantt.options.padding;
this.gantt.options.bar_height / 2 +
(this.gantt.options.padding + this.gantt.options.bar_height) *
this.to_task.task._index +
this.gantt.options.padding;
const from_is_below_to = while (condition()) {
this.from_task.task._index > this.to_task.task._index; start_x -= 10;
const curve = this.gantt.options.arrow_curve; }
const clockwise = from_is_below_to ? 1 : 0;
const curve_y = from_is_below_to ? -curve : curve;
const offset = from_is_below_to
? end_y + this.gantt.options.arrow_curve
: end_y - this.gantt.options.arrow_curve;
this.path = ` const start_y =
this.gantt.options.header_height +
this.gantt.options.bar_height +
(this.gantt.options.padding + this.gantt.options.bar_height) *
this.from_task.task._index +
this.gantt.options.padding;
const end_x =
this.to_task.$bar.getX() - this.gantt.options.padding / 2 - 7;
const end_y =
this.gantt.options.header_height +
this.gantt.options.bar_height / 2 +
(this.gantt.options.padding + this.gantt.options.bar_height) *
this.to_task.task._index +
this.gantt.options.padding;
const from_is_below_to =
this.from_task.task._index > this.to_task.task._index;
const curve = this.gantt.options.arrow_curve;
const clockwise = from_is_below_to ? 1 : 0;
const curve_y = from_is_below_to ? -curve : curve;
const offset = from_is_below_to
? end_y + this.gantt.options.arrow_curve
: end_y - this.gantt.options.arrow_curve;
this.path = `
M ${start_x} ${start_y} M ${start_x} ${start_y}
V ${offset} V ${offset}
a ${curve} ${curve} 0 0 ${clockwise} ${curve} ${curve_y} a ${curve} ${curve} 0 0 ${clockwise} ${curve} ${curve_y}
@ -55,16 +56,18 @@ export default class Arrow {
l 5 5 l 5 5
l -5 5`; l -5 5`;
if ( if (
this.to_task.$bar.getX() < this.to_task.$bar.getX() <
this.from_task.$bar.getX() + this.gantt.options.padding this.from_task.$bar.getX() + this.gantt.options.padding
) { ) {
const down_1 = this.gantt.options.padding / 2 - curve; const down_1 = this.gantt.options.padding / 2 - curve;
const down_2 = const down_2 =
this.to_task.$bar.getY() + this.to_task.$bar.getHeight() / 2 - curve_y; this.to_task.$bar.getY() +
const left = this.to_task.$bar.getX() - this.gantt.options.padding; this.to_task.$bar.getHeight() / 2 -
curve_y;
const left = this.to_task.$bar.getX() - this.gantt.options.padding;
this.path = ` this.path = `
M ${start_x} ${start_y} M ${start_x} ${start_y}
v ${down_1} v ${down_1}
a ${curve} ${curve} 0 0 1 -${curve} ${curve} a ${curve} ${curve} 0 0 1 -${curve} ${curve}
@ -76,19 +79,19 @@ export default class Arrow {
m -5 -5 m -5 -5
l 5 5 l 5 5
l -5 5`; l -5 5`;
}
} }
}
draw() { draw() {
this.element = createSVG("path", { this.element = createSVG('path', {
d: this.path, d: this.path,
"data-from": this.from_task.task.id, 'data-from': this.from_task.task.id,
"data-to": this.to_task.task.id, 'data-to': this.to_task.task.id,
}); });
} }
update() { update() {
this.calculate_path(); this.calculate_path();
this.element.setAttribute("d", this.path); this.element.setAttribute('d', this.path);
} }
} }

1235
src/bar.js
View File

File diff suppressed because it is too large Load Diff

150
src/dark.scss
View File

@ -9,89 +9,89 @@ $text-color-dark: #f7f7f7;
$blue-dark: #8a8aff; $blue-dark: #8a8aff;
.dark > .gantt-container .gantt { .dark > .gantt-container .gantt {
.grid-header { .grid-header {
fill: #252525; fill: #252525;
stroke: $border-color-dark; stroke: $border-color-dark;
}
.grid-row {
fill: #252525;
}
.grid-row:nth-child(even) {
fill: $light-bg-dark;
}
.row-line {
stroke: $light-border-color-dark;
}
.tick {
stroke: $border-color-dark;
}
.today-highlight {
opacity: 0.2;
}
.arrow {
stroke: $text-muted-dark;
}
.bar {
fill: $bar-color-dark;
stroke: none;
}
.bar-progress {
fill: $blue-dark;
}
.bar-invalid {
fill: transparent;
stroke: $bar-stroke-dark;
& ~ .bar-label {
fill: $text-light-dark;
} }
} .grid-row {
fill: #252525;
.bar-label.big { }
fill: $text-light-dark; .grid-row:nth-child(even) {
} fill: $light-bg-dark;
}
.bar-wrapper { .row-line {
&:hover { stroke: $light-border-color-dark;
.bar { }
fill: lighten($bar-color-dark, 5); .tick {
} stroke: $border-color-dark;
}
.bar-progress { .today-highlight {
fill: lighten($blue-dark, 5); opacity: 0.2;
}
} }
&.active { .arrow {
.bar { stroke: $text-muted-dark;
fill: lighten($bar-color-dark, 5);
}
.bar-progress {
fill: lighten($blue-dark, 5);
}
} }
}
.upper-text { .bar {
fill: #a2a2a2; fill: $bar-color-dark;
} stroke: none;
.lower-text { }
fill: $text-color-dark; .bar-progress {
} fill: $blue-dark;
}
.bar-invalid {
fill: transparent;
stroke: $bar-stroke-dark;
& ~ .bar-label {
fill: $text-light-dark;
}
}
.bar-label.big {
fill: $text-light-dark;
}
.bar-wrapper {
&:hover {
.bar {
fill: lighten($bar-color-dark, 5);
}
.bar-progress {
fill: lighten($blue-dark, 5);
}
}
&.active {
.bar {
fill: lighten($bar-color-dark, 5);
}
.bar-progress {
fill: lighten($blue-dark, 5);
}
}
}
.upper-text {
fill: #a2a2a2;
}
.lower-text {
fill: $text-color-dark;
}
} }
.dark > .gantt-container { .dark > .gantt-container {
.popup-wrapper { .popup-wrapper {
background-color: #333; background-color: #333;
.title { .title {
border-color: lighten($blue-dark, 5); border-color: lighten($blue-dark, 5);
}
.pointer {
border-top-color: #333;
}
} }
.pointer {
border-top-color: #333;
}
}
} }

466
src/date_utils.js
View File

@ -1,266 +1,266 @@
const YEAR = "year"; const YEAR = 'year';
const MONTH = "month"; const MONTH = 'month';
const DAY = "day"; const DAY = 'day';
const HOUR = "hour"; const HOUR = 'hour';
const MINUTE = "minute"; const MINUTE = 'minute';
const SECOND = "second"; const SECOND = 'second';
const MILLISECOND = "millisecond"; const MILLISECOND = 'millisecond';
const SHORTENED = { const SHORTENED = {
January: "Jan", January: 'Jan',
February: "Feb", February: 'Feb',
March: "Mar", March: 'Mar',
April: "Apr", April: 'Apr',
May: "May", May: 'May',
June: "Jun", June: 'Jun',
July: "Jul", July: 'Jul',
August: "Aug", August: 'Aug',
September: "Sep", September: 'Sep',
October: "Oct", October: 'Oct',
November: "Nov", November: 'Nov',
December: "Dec" December: 'Dec',
}; };
export default { export default {
parse_duration(duration) { parse_duration(duration) {
const regex = /([0-9])+(y|m|d|h|min|s|ms)/gm; const regex = /([0-9])+(y|m|d|h|min|s|ms)/gm;
const matches = regex.exec(duration); const matches = regex.exec(duration);
if (matches !== null) { if (matches !== null) {
if (matches[2] === "y") { if (matches[2] === 'y') {
return { duration: parseInt(matches[1]), scale: `year` }; return { duration: parseInt(matches[1]), scale: `year` };
} else if (matches[2] === "m") { } else if (matches[2] === 'm') {
return { duration: parseInt(matches[1]), scale: `month` }; return { duration: parseInt(matches[1]), scale: `month` };
} else if (matches[2] === "d") { } else if (matches[2] === 'd') {
return { duration: parseInt(matches[1]), scale: `day` }; return { duration: parseInt(matches[1]), scale: `day` };
} else if (matches[2] === "h") { } else if (matches[2] === 'h') {
return { duration: parseInt(matches[1]), scale: `hour` }; return { duration: parseInt(matches[1]), scale: `hour` };
} else if (matches[2] === "min") { } else if (matches[2] === 'min') {
return { duration: parseInt(matches[1]), scale: `minute` }; return { duration: parseInt(matches[1]), scale: `minute` };
} else if (matches[2] === "s") { } else if (matches[2] === 's') {
return { duration: parseInt(matches[1]), scale: `second` }; return { duration: parseInt(matches[1]), scale: `second` };
} else if (matches[2] === "ms") { } else if (matches[2] === 'ms') {
return { duration: parseInt(matches[1]), scale: `millisecond` }; return { duration: parseInt(matches[1]), scale: `millisecond` };
} }
}
},
parse(date, date_separator = "-", time_separator = /[.:]/) {
if (date instanceof Date) {
return date;
}
if (typeof date === "string") {
let date_parts, time_parts;
const parts = date.split(" ");
date_parts = parts[0]
.split(date_separator)
.map((val) => parseInt(val, 10));
time_parts = parts[1] && parts[1].split(time_separator);
// month is 0 indexed
date_parts[1] = date_parts[1] ? date_parts[1] - 1 : 0;
let vals = date_parts;
if (time_parts && time_parts.length) {
if (time_parts.length === 4) {
time_parts[3] = "0." + time_parts[3];
time_parts[3] = parseFloat(time_parts[3]) * 1000;
} }
vals = vals.concat(time_parts); },
} parse(date, date_separator = '-', time_separator = /[.:]/) {
return new Date(...vals); if (date instanceof Date) {
} return date;
},
to_string(date, with_time = false) {
if (!(date instanceof Date)) {
throw new TypeError("Invalid argument type");
}
const vals = this.get_date_values(date).map((val, i) => {
if (i === 1) {
// add 1 for month
val = val + 1;
}
if (i === 6) {
return padStart(val + "", 3, "0");
}
return padStart(val + "", 2, "0");
});
const date_string = `${vals[0]}-${vals[1]}-${vals[2]}`;
const time_string = `${vals[3]}:${vals[4]}:${vals[5]}.${vals[6]}`;
return date_string + (with_time ? " " + time_string : "");
},
format(date, format_string = "YYYY-MM-DD HH:mm:ss.SSS", lang = "en") {
const dateTimeFormat = new Intl.DateTimeFormat(lang, {
month: "long",
});
const month_name = dateTimeFormat.format(date);
const month_name_capitalized =
month_name.charAt(0).toUpperCase() + month_name.slice(1);
const values = this.get_date_values(date).map((d) => padStart(d, 2, 0));
const format_map = {
YYYY: values[0],
MM: padStart(+values[1] + 1, 2, 0),
DD: values[2],
HH: values[3],
mm: values[4],
ss: values[5],
SSS: values[6],
D: values[2],
MMMM: month_name_capitalized,
MMM: SHORTENED[month_name_capitalized],
};
let str = format_string;
const formatted_values = [];
Object.keys(format_map)
.sort((a, b) => b.length - a.length) // big string first
.forEach((key) => {
if (str.includes(key)) {
str = str.replaceAll(key, `$${formatted_values.length}`);
formatted_values.push(format_map[key]);
} }
}); if (typeof date === 'string') {
let date_parts, time_parts;
const parts = date.split(' ');
date_parts = parts[0]
.split(date_separator)
.map((val) => parseInt(val, 10));
time_parts = parts[1] && parts[1].split(time_separator);
formatted_values.forEach((value, i) => { // month is 0 indexed
str = str.replaceAll(`$${i}`, value); date_parts[1] = date_parts[1] ? date_parts[1] - 1 : 0;
});
return str; let vals = date_parts;
},
diff(date_a, date_b, scale = DAY) { if (time_parts && time_parts.length) {
let milliseconds, seconds, hours, minutes, days, months, years; if (time_parts.length === 4) {
time_parts[3] = '0.' + time_parts[3];
time_parts[3] = parseFloat(time_parts[3]) * 1000;
}
vals = vals.concat(time_parts);
}
return new Date(...vals);
}
},
milliseconds = date_a - date_b; to_string(date, with_time = false) {
seconds = milliseconds / 1000; if (!(date instanceof Date)) {
minutes = seconds / 60; throw new TypeError('Invalid argument type');
hours = minutes / 60; }
days = hours / 24; const vals = this.get_date_values(date).map((val, i) => {
months = days / 30; if (i === 1) {
years = months / 12; // add 1 for month
val = val + 1;
}
if (!scale.endsWith("s")) { if (i === 6) {
scale += "s"; return padStart(val + '', 3, '0');
} }
return Math.floor( return padStart(val + '', 2, '0');
{ });
milliseconds, const date_string = `${vals[0]}-${vals[1]}-${vals[2]}`;
seconds, const time_string = `${vals[3]}:${vals[4]}:${vals[5]}.${vals[6]}`;
minutes,
hours,
days,
months,
years,
}[scale],
);
},
today() { return date_string + (with_time ? ' ' + time_string : '');
const vals = this.get_date_values(new Date()).slice(0, 3); },
return new Date(...vals);
},
now() { format(date, format_string = 'YYYY-MM-DD HH:mm:ss.SSS', lang = 'en') {
return new Date(); const dateTimeFormat = new Intl.DateTimeFormat(lang, {
}, month: 'long',
});
const month_name = dateTimeFormat.format(date);
const month_name_capitalized =
month_name.charAt(0).toUpperCase() + month_name.slice(1);
add(date, qty, scale) { const values = this.get_date_values(date).map((d) => padStart(d, 2, 0));
qty = parseInt(qty, 10); const format_map = {
const vals = [ YYYY: values[0],
date.getFullYear() + (scale === YEAR ? qty : 0), MM: padStart(+values[1] + 1, 2, 0),
date.getMonth() + (scale === MONTH ? qty : 0), DD: values[2],
date.getDate() + (scale === DAY ? qty : 0), HH: values[3],
date.getHours() + (scale === HOUR ? qty : 0), mm: values[4],
date.getMinutes() + (scale === MINUTE ? qty : 0), ss: values[5],
date.getSeconds() + (scale === SECOND ? qty : 0), SSS: values[6],
date.getMilliseconds() + (scale === MILLISECOND ? qty : 0), D: values[2],
]; MMMM: month_name_capitalized,
return new Date(...vals); MMM: SHORTENED[month_name_capitalized],
}, };
start_of(date, scale) { let str = format_string;
const scores = { const formatted_values = [];
[YEAR]: 6,
[MONTH]: 5,
[DAY]: 4,
[HOUR]: 3,
[MINUTE]: 2,
[SECOND]: 1,
[MILLISECOND]: 0,
};
function should_reset(_scale) { Object.keys(format_map)
const max_score = scores[scale]; .sort((a, b) => b.length - a.length) // big string first
return scores[_scale] <= max_score; .forEach((key) => {
} if (str.includes(key)) {
str = str.replaceAll(key, `$${formatted_values.length}`);
formatted_values.push(format_map[key]);
}
});
const vals = [ formatted_values.forEach((value, i) => {
date.getFullYear(), str = str.replaceAll(`$${i}`, value);
should_reset(YEAR) ? 0 : date.getMonth(), });
should_reset(MONTH) ? 1 : date.getDate(),
should_reset(DAY) ? 0 : date.getHours(),
should_reset(HOUR) ? 0 : date.getMinutes(),
should_reset(MINUTE) ? 0 : date.getSeconds(),
should_reset(SECOND) ? 0 : date.getMilliseconds(),
];
return new Date(...vals); return str;
}, },
clone(date) { diff(date_a, date_b, scale = DAY) {
return new Date(...this.get_date_values(date)); let milliseconds, seconds, hours, minutes, days, months, years;
},
get_date_values(date) { milliseconds = date_a - date_b;
return [ seconds = milliseconds / 1000;
date.getFullYear(), minutes = seconds / 60;
date.getMonth(), hours = minutes / 60;
date.getDate(), days = hours / 24;
date.getHours(), months = days / 30;
date.getMinutes(), years = months / 12;
date.getSeconds(),
date.getMilliseconds(),
];
},
get_days_in_month(date) { if (!scale.endsWith('s')) {
const no_of_days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; scale += 's';
}
const month = date.getMonth(); return Math.floor(
{
milliseconds,
seconds,
minutes,
hours,
days,
months,
years,
}[scale],
);
},
if (month !== 1) { today() {
return no_of_days[month]; const vals = this.get_date_values(new Date()).slice(0, 3);
} return new Date(...vals);
},
// Feb now() {
const year = date.getFullYear(); return new Date();
if ((year % 4 === 0 && year % 100 != 0) || year % 400 === 0) { },
return 29;
} add(date, qty, scale) {
return 28; qty = parseInt(qty, 10);
}, const vals = [
date.getFullYear() + (scale === YEAR ? qty : 0),
date.getMonth() + (scale === MONTH ? qty : 0),
date.getDate() + (scale === DAY ? qty : 0),
date.getHours() + (scale === HOUR ? qty : 0),
date.getMinutes() + (scale === MINUTE ? qty : 0),
date.getSeconds() + (scale === SECOND ? qty : 0),
date.getMilliseconds() + (scale === MILLISECOND ? qty : 0),
];
return new Date(...vals);
},
start_of(date, scale) {
const scores = {
[YEAR]: 6,
[MONTH]: 5,
[DAY]: 4,
[HOUR]: 3,
[MINUTE]: 2,
[SECOND]: 1,
[MILLISECOND]: 0,
};
function should_reset(_scale) {
const max_score = scores[scale];
return scores[_scale] <= max_score;
}
const vals = [
date.getFullYear(),
should_reset(YEAR) ? 0 : date.getMonth(),
should_reset(MONTH) ? 1 : date.getDate(),
should_reset(DAY) ? 0 : date.getHours(),
should_reset(HOUR) ? 0 : date.getMinutes(),
should_reset(MINUTE) ? 0 : date.getSeconds(),
should_reset(SECOND) ? 0 : date.getMilliseconds(),
];
return new Date(...vals);
},
clone(date) {
return new Date(...this.get_date_values(date));
},
get_date_values(date) {
return [
date.getFullYear(),
date.getMonth(),
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds(),
date.getMilliseconds(),
];
},
get_days_in_month(date) {
const no_of_days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const month = date.getMonth();
if (month !== 1) {
return no_of_days[month];
}
// Feb
const year = date.getFullYear();
if ((year % 4 === 0 && year % 100 != 0) || year % 400 === 0) {
return 29;
}
return 28;
},
}; };
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
function padStart(str, targetLength, padString) { function padStart(str, targetLength, padString) {
str = str + ""; str = str + '';
targetLength = targetLength >> 0; targetLength = targetLength >> 0;
padString = String(typeof padString !== "undefined" ? padString : " "); padString = String(typeof padString !== 'undefined' ? padString : ' ');
if (str.length > targetLength) { if (str.length > targetLength) {
return String(str); return String(str);
} else { } else {
targetLength = targetLength - str.length; targetLength = targetLength - str.length;
if (targetLength > padString.length) { if (targetLength > padString.length) {
padString += padString.repeat(targetLength / padString.length); padString += padString.repeat(targetLength / padString.length);
}
return padString.slice(0, targetLength) + String(str);
} }
return padString.slice(0, targetLength) + String(str);
}
} }

493
src/gantt.scss
View File

@ -1,316 +1,307 @@
@import "./dark.scss"; @import './dark.scss';
$bar-color: #fff !default; $bar-color: #fff !default;
$bar-color-important: #94c4f4 !default; $bar-color-important: #94c4f4 !default;
$bar-stroke: #fff !default; $bar-stroke: #fff !default;
$dark-stroke-color: #e0e0e0 !default; $dark-stroke-color: #e0e0e0 !default;
$stroke-color: #EBEEF0 !default; $stroke-color: #ebeef0 !default;
$light-bg: #f5f5f5 !default; $light-bg: #f5f5f5 !default;
$light-border-color: #ebeff2 !default; $light-border-color: #ebeff2 !default;
$light-yellow: #f6e796 !default; $light-yellow: #f6e796 !default;
$holiday-color: #F9FAFA !default; $holiday-color: #f9fafa !default;
$text-muted: #666 !default; $text-muted: #666 !default;
$text-grey: #98A1A9; $text-grey: #98a1a9;
$text-light: #fff !default; $text-light: #fff !default;
$text-dark: #111 !default; $text-dark: #111 !default;
$progress: #EBEEF0 !default; $progress: #ebeef0 !default;
$handle-color: #dcdce4 !default; $handle-color: #dcdce4 !default;
$handle-color-important: #94c4f4 !default; $handle-color-important: #94c4f4 !default;
$light-blue: #c4c4e9 !default; $light-blue: #c4c4e9 !default;
$middle-blue: #62B2F9 !default; $middle-blue: #62b2f9 !default;
$dark-blue: #2c94ec !default; $dark-blue: #2c94ec !default;
.gantt-container { .gantt-container {
line-height: 14.5px; line-height: 14.5px;
.grid-header { .grid-header {
background-color: #ffffff; background-color: #ffffff;
position: sticky; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
} }
.lower-text, .lower-text,
.upper-text { .upper-text {
text-anchor: middle; text-anchor: middle;
color: $text-dark; color: $text-dark;
} }
.upper-header { .upper-header {
height: 40px; height: 40px;
} }
.lower-header { .lower-header {
height: 30px; height: 30px;
} }
.lower-text { .lower-text {
font-size: 14px; font-size: 14px;
position: absolute; position: absolute;
width: fit-content; width: fit-content;
} }
.upper-text { .upper-text {
position: absolute; position: absolute;
width: fit-content; width: fit-content;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
} }
.current-upper { .current-upper {
position: fixed; position: fixed;
} }
.side-header { .side-header {
position: fixed; position: fixed;
padding: 0 10px; padding: 0 10px;
margin-right: 10px; margin-right: 10px;
background: white; background: white;
line-height: 20px; line-height: 20px;
font-weight: 400; font-weight: 400;
} }
.today-button, .today-button,
.viewmode-select { .viewmode-select {
background: #F4F5F6; background: #f4f5f6;
text-align: -webkit-center; text-align: -webkit-center;
text-align: center; text-align: center;
height: 25px; height: 25px;
border-radius: 8px; border-radius: 8px;
border: none; border: none;
color: $text-dark; color: $text-dark;
padding: 4px 10px; padding: 4px 10px;
border-radius: 8px; border-radius: 8px;
height: 25px; height: 25px;
} }
.viewmode-select { .viewmode-select {
outline: none !important; outline: none !important;
padding: 4px 8px; padding: 4px 8px;
margin-right: 4px; margin-right: 4px;
// Hide select icon // Hide select icon
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
text-indent: 1px; text-indent: 1px;
text-overflow: ''; text-overflow: '';
} }
.date-highlight { .date-highlight {
background-color: $progress; background-color: $progress;
border-radius: 12px; border-radius: 12px;
position: absolute; position: absolute;
display: none; display: none;
} }
.current-highlight { .current-highlight {
position: absolute; position: absolute;
background: $dark-blue; background: $dark-blue;
width: 1px; width: 1px;
} }
.current-date-highlight { .current-date-highlight {
background: $dark-blue; background: $dark-blue;
color: $text-light; color: $text-light;
padding: 4px 8px; padding: 4px 8px;
border-radius: 200px; border-radius: 200px;
} }
} }
.gantt { .gantt {
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
position: absolute; position: absolute;
.grid-background { .grid-background {
fill: none; fill: none;
}
.grid-row {
fill: #ffffff;
}
// .grid-row:nth-child(even) {
// fill: $light-bg;
// }
.row-line {
stroke: $light-border-color;
}
.tick {
stroke: $stroke-color;
stroke-width: 0.4;
&.thick {
stroke: $dark-stroke-color;
stroke-width: 0.7;
} }
}
.grid-row {
fill: #ffffff;
.holiday-highlight {
fill: $holiday-color;
}
.arrow {
fill: none;
stroke: #9FA9B1;
stroke-width: 1;
}
.bar-wrapper .bar {
fill: $bar-color;
stroke: $bar-stroke;
stroke-width: 0;
transition: stroke-width 0.3s ease;
}
.bar-progress {
fill: $progress;
}
.bar-expected-progress {
fill: $light-blue;
}
.bar-invalid {
fill: transparent;
stroke: $bar-stroke;
stroke-width: 1;
stroke-dasharray: 5;
&~.bar-label {
fill: $text-light;
} }
}
.bar-label { // .grid-row:nth-child(even) {
fill: $text-dark; // fill: $light-bg;
dominant-baseline: central; // }
// text-anchor: middle;
font-family: Helvetica;
font-size: 13px;
font-weight: 400;
&.big { .row-line {
fill: $text-dark; stroke: $light-border-color;
text-anchor: start;
} }
}
.bar-wrapper.important { .tick {
.bar { stroke: $stroke-color;
fill: $bar-color-important; stroke-width: 0.4;
&.thick {
stroke: $dark-stroke-color;
stroke-width: 0.7;
}
}
.holiday-highlight {
fill: $holiday-color;
}
.arrow {
fill: none;
stroke: #9fa9b1;
stroke-width: 1;
}
.bar-wrapper .bar {
fill: $bar-color;
stroke: $bar-stroke;
stroke-width: 0;
transition: stroke-width 0.3s ease;
} }
.bar-progress { .bar-progress {
fill: $dark-blue; fill: $progress;
}
.bar-expected-progress {
fill: $light-blue;
}
.bar-invalid {
fill: transparent;
stroke: $bar-stroke;
stroke-width: 1;
stroke-dasharray: 5;
& ~ .bar-label {
fill: $text-light;
}
} }
.bar-label { .bar-label {
fill: $text-light; fill: $text-dark;
dominant-baseline: central;
// text-anchor: middle;
font-family: Helvetica;
font-size: 13px;
font-weight: 400;
&.big {
fill: $text-dark;
text-anchor: start;
}
}
.bar-wrapper.important {
.bar {
fill: $bar-color-important;
}
.bar-progress {
fill: $dark-blue;
}
.bar-label {
fill: $text-light;
}
.handle {
fill: $handle-color-important;
}
.handle.progress {
fill: $text-light;
}
} }
.handle { .handle {
fill: $handle-color-important; fill: $handle-color;
cursor: ew-resize;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
} }
.handle.progress { .handle.progress {
fill: $text-light; fill: $text-muted;
}
}
.handle {
fill: $handle-color;
cursor: ew-resize;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.handle.progress {
fill: $text-muted;
}
.bar-wrapper {
cursor: pointer;
outline: none;
&.active {
& .handle {
visibility: visible;
opacity: 1;
}
} }
.bar { .bar-wrapper {
-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7)); cursor: pointer;
filter: drop-shadow(0 0 2px rgba(17, 43, 66, .16)); outline: none;
border-radius: 3px;
&.active {
& .handle {
visibility: visible;
opacity: 1;
}
}
.bar {
-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
filter: drop-shadow(0 0 2px rgba(17, 43, 66, 0.16));
border-radius: 3px;
}
&:hover {
.bar {
transition: transform 0.3s ease;
}
.date-highlight {
display: block;
}
}
} }
.hide {
&:hover { display: none;
.bar {
transition: transform 0.3s ease;
}
.date-highlight {
display: block;
}
} }
}
.hide {
display: none;
}
} }
.gantt-container { .gantt-container {
position: relative; position: relative;
overflow: auto; overflow: auto;
font-size: 12px; font-size: 12px;
height: 500px; height: 500px;
.popup-wrapper { .popup-wrapper {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
background: #171B1F; background: #171b1f;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
width: max-content; width: max-content;
&.hidden { &.hidden {
opacity: 0 !important; opacity: 0 !important;
}
.title {
margin-bottom: 5px;
text-align: -webkit-center;
text-align: center;
color: $text-light;
}
.subtitle {
color: $text-grey;
}
.pointer {
position: absolute;
height: 5px;
margin: 0 0 0 -5px;
border: 5px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.8);
}
} }
}
.title {
margin-bottom: 5px;
text-align: -webkit-center;
text-align: center;
color: $text-light;
}
.subtitle {
color: $text-grey;
}
.pointer {
position: absolute;
height: 5px;
margin: 0 0 0 -5px;
border: 5px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.8);
}
}
}

2363
src/index.js
View File

File diff suppressed because it is too large Load Diff

97
src/popup.js
View File

@ -1,61 +1,62 @@
export default class Popup { export default class Popup {
constructor(parent, custom_html) { constructor(parent, custom_html) {
this.parent = parent; this.parent = parent;
this.custom_html = custom_html; this.custom_html = custom_html;
this.make(); this.make();
} }
make() { make() {
this.parent.innerHTML = ` this.parent.innerHTML = `
<div class="title"></div> <div class="title"></div>
<div class="subtitle"></div> <div class="subtitle"></div>
<div class="pointer"></div> <div class="pointer"></div>
`; `;
this.hide(); this.hide();
this.title = this.parent.querySelector(".title"); this.title = this.parent.querySelector('.title');
this.subtitle = this.parent.querySelector(".subtitle"); this.subtitle = this.parent.querySelector('.subtitle');
this.pointer = this.parent.querySelector(".pointer"); this.pointer = this.parent.querySelector('.pointer');
}
show(options) {
if (!options.target_element) {
throw new Error("target_element is required to show popup");
}
const target_element = options.target_element;
if (this.custom_html) {
let html = this.custom_html(options.task);
html += '<div class="pointer"></div>';
this.parent.innerHTML = html;
this.pointer = this.parent.querySelector(".pointer");
} else {
// set data
this.title.innerHTML = options.title;
this.subtitle.innerHTML = options.subtitle;
} }
// set position show(options) {
let position_meta; if (!options.target_element) {
if (target_element instanceof HTMLElement) { throw new Error('target_element is required to show popup');
position_meta = target_element.getBoundingClientRect(); }
} else if (target_element instanceof SVGElement) { const target_element = options.target_element;
position_meta = options.target_element.getBBox();
if (this.custom_html) {
let html = this.custom_html(options.task);
html += '<div class="pointer"></div>';
this.parent.innerHTML = html;
this.pointer = this.parent.querySelector('.pointer');
} else {
// set data
this.title.innerHTML = options.title;
this.subtitle.innerHTML = options.subtitle;
}
// set position
let position_meta;
if (target_element instanceof HTMLElement) {
position_meta = target_element.getBoundingClientRect();
} else if (target_element instanceof SVGElement) {
position_meta = options.target_element.getBBox();
}
this.parent.style.left = options.x - this.parent.clientWidth / 2 + 'px';
this.parent.style.top =
position_meta.y + position_meta.height + 10 + 'px';
this.pointer.style.left = this.parent.clientWidth / 2 + 'px';
this.pointer.style.top = '-15px';
// show
this.parent.style.opacity = 1;
} }
this.parent.style.left = options.x - this.parent.clientWidth / 2 + "px"; hide() {
this.parent.style.top = position_meta.y + position_meta.height + 10 + "px"; this.parent.style.opacity = 0;
this.parent.style.left = 0;
this.pointer.style.left = this.parent.clientWidth / 2 + "px"; }
this.pointer.style.top = "-15px";
// show
this.parent.style.opacity = 1;
}
hide() {
this.parent.style.opacity = 0;
this.parent.style.left = 0;
}
} }

188
src/svg_utils.js
View File

@ -1,135 +1,135 @@
export function $(expr, con) { export function $(expr, con) {
return typeof expr === "string" return typeof expr === 'string'
? (con || document).querySelector(expr) ? (con || document).querySelector(expr)
: expr || null; : expr || null;
} }
export function createSVG(tag, attrs) { export function createSVG(tag, attrs) {
const elem = document.createElementNS("http://www.w3.org/2000/svg", tag); const elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (let attr in attrs) { for (let attr in attrs) {
if (attr === "append_to") { if (attr === 'append_to') {
const parent = attrs.append_to; const parent = attrs.append_to;
parent.appendChild(elem); parent.appendChild(elem);
} else if (attr === "innerHTML") { } else if (attr === 'innerHTML') {
elem.innerHTML = attrs.innerHTML; elem.innerHTML = attrs.innerHTML;
} else if (attr === 'clipPath') { } else if (attr === 'clipPath') {
elem.setAttribute('clip-path', 'url(#' + attrs[attr] + ')'); elem.setAttribute('clip-path', 'url(#' + attrs[attr] + ')');
} else { } else {
elem.setAttribute(attr, attrs[attr]); elem.setAttribute(attr, attrs[attr]);
}
} }
} return elem;
return elem;
} }
export function animateSVG(svgElement, attr, from, to) { export function animateSVG(svgElement, attr, from, to) {
const animatedSvgElement = getAnimationElement(svgElement, attr, from, to); const animatedSvgElement = getAnimationElement(svgElement, attr, from, to);
if (animatedSvgElement === svgElement) { if (animatedSvgElement === svgElement) {
// triggered 2nd time programmatically // triggered 2nd time programmatically
// trigger artificial click event // trigger artificial click event
const event = document.createEvent("HTMLEvents"); const event = document.createEvent('HTMLEvents');
event.initEvent("click", true, true); event.initEvent('click', true, true);
event.eventName = "click"; event.eventName = 'click';
animatedSvgElement.dispatchEvent(event); animatedSvgElement.dispatchEvent(event);
} }
} }
function getAnimationElement( function getAnimationElement(
svgElement, svgElement,
attr, attr,
from,
to,
dur = "0.4s",
begin = "0.1s",
) {
const animEl = svgElement.querySelector("animate");
if (animEl) {
$.attr(animEl, {
attributeName: attr,
from,
to,
dur,
begin: "click + " + begin, // artificial click
});
return svgElement;
}
const animateElement = createSVG("animate", {
attributeName: attr,
from, from,
to, to,
dur, dur = '0.4s',
begin, begin = '0.1s',
calcMode: "spline", ) {
values: from + ";" + to, const animEl = svgElement.querySelector('animate');
keyTimes: "0; 1", if (animEl) {
keySplines: cubic_bezier("ease-out"), $.attr(animEl, {
}); attributeName: attr,
svgElement.appendChild(animateElement); from,
to,
dur,
begin: 'click + ' + begin, // artificial click
});
return svgElement;
}
return svgElement; const animateElement = createSVG('animate', {
attributeName: attr,
from,
to,
dur,
begin,
calcMode: 'spline',
values: from + ';' + to,
keyTimes: '0; 1',
keySplines: cubic_bezier('ease-out'),
});
svgElement.appendChild(animateElement);
return svgElement;
} }
function cubic_bezier(name) { function cubic_bezier(name) {
return { return {
ease: ".25 .1 .25 1", ease: '.25 .1 .25 1',
linear: "0 0 1 1", linear: '0 0 1 1',
"ease-in": ".42 0 1 1", 'ease-in': '.42 0 1 1',
"ease-out": "0 0 .58 1", 'ease-out': '0 0 .58 1',
"ease-in-out": ".42 0 .58 1", 'ease-in-out': '.42 0 .58 1',
}[name]; }[name];
} }
$.on = (element, event, selector, callback) => { $.on = (element, event, selector, callback) => {
if (!callback) { if (!callback) {
callback = selector; callback = selector;
$.bind(element, event, callback); $.bind(element, event, callback);
} else { } else {
$.delegate(element, event, selector, callback); $.delegate(element, event, selector, callback);
} }
}; };
$.off = (element, event, handler) => { $.off = (element, event, handler) => {
element.removeEventListener(event, handler); element.removeEventListener(event, handler);
}; };
$.bind = (element, event, callback) => { $.bind = (element, event, callback) => {
event.split(/\s+/).forEach(function (event) { event.split(/\s+/).forEach(function (event) {
element.addEventListener(event, callback); element.addEventListener(event, callback);
}); });
}; };
$.delegate = (element, event, selector, callback) => { $.delegate = (element, event, selector, callback) => {
element.addEventListener(event, function (e) { element.addEventListener(event, function (e) {
const delegatedTarget = e.target.closest(selector); const delegatedTarget = e.target.closest(selector);
if (delegatedTarget) { if (delegatedTarget) {
e.delegatedTarget = delegatedTarget; e.delegatedTarget = delegatedTarget;
callback.call(this, e, delegatedTarget); callback.call(this, e, delegatedTarget);
} }
}); });
}; };
$.closest = (selector, element) => { $.closest = (selector, element) => {
if (!element) return null; if (!element) return null;
if (element.matches(selector)) { if (element.matches(selector)) {
return element; return element;
} }
return $.closest(selector, element.parentNode); return $.closest(selector, element.parentNode);
}; };
$.attr = (element, attr, value) => { $.attr = (element, attr, value) => {
if (!value && typeof attr === "string") { if (!value && typeof attr === 'string') {
return element.getAttribute(attr); return element.getAttribute(attr);
}
if (typeof attr === "object") {
for (let key in attr) {
$.attr(element, key, attr[key]);
} }
return;
}
element.setAttribute(attr, value); if (typeof attr === 'object') {
for (let key in attr) {
$.attr(element, key, attr[key]);
}
return;
}
element.setAttribute(attr, value);
}; };

174
tests/date_utils.test.js
View File

@ -1,124 +1,124 @@
import date_utils from "../src/date_utils"; import date_utils from '../src/date_utils';
test("Parse: parses string date", () => { test('Parse: parses string date', () => {
const date = date_utils.parse("2017-09-09"); const date = date_utils.parse('2017-09-09');
expect(date.getDate()).toBe(9); expect(date.getDate()).toBe(9);
expect(date.getMonth()).toBe(8); expect(date.getMonth()).toBe(8);
expect(date.getFullYear()).toBe(2017); expect(date.getFullYear()).toBe(2017);
}); });
test("Parse: parses string datetime", () => { test('Parse: parses string datetime', () => {
const date = date_utils.parse("2017-08-27 16:08:34"); const date = date_utils.parse('2017-08-27 16:08:34');
expect(date.getFullYear()).toBe(2017); expect(date.getFullYear()).toBe(2017);
expect(date.getMonth()).toBe(7); expect(date.getMonth()).toBe(7);
expect(date.getDate()).toBe(27); expect(date.getDate()).toBe(27);
expect(date.getHours()).toBe(16); expect(date.getHours()).toBe(16);
expect(date.getMinutes()).toBe(8); expect(date.getMinutes()).toBe(8);
expect(date.getSeconds()).toBe(34); expect(date.getSeconds()).toBe(34);
}); });
test("Parse: parses string datetime", () => { test('Parse: parses string datetime', () => {
const date = date_utils.parse("2016-02-29 16:08:34.3"); const date = date_utils.parse('2016-02-29 16:08:34.3');
expect(date.getFullYear()).toBe(2016); expect(date.getFullYear()).toBe(2016);
expect(date.getMonth()).toBe(1); expect(date.getMonth()).toBe(1);
expect(date.getDate()).toBe(29); expect(date.getDate()).toBe(29);
expect(date.getHours()).toBe(16); expect(date.getHours()).toBe(16);
expect(date.getMinutes()).toBe(8); expect(date.getMinutes()).toBe(8);
expect(date.getSeconds()).toBe(34); expect(date.getSeconds()).toBe(34);
expect(date.getMilliseconds()).toBe(300); expect(date.getMilliseconds()).toBe(300);
}); });
test("Parse: parses string datetime", () => { test('Parse: parses string datetime', () => {
const date = date_utils.parse("2015-07-01 00:00:59.200"); const date = date_utils.parse('2015-07-01 00:00:59.200');
expect(date.getFullYear()).toBe(2015); expect(date.getFullYear()).toBe(2015);
expect(date.getMonth()).toBe(6); expect(date.getMonth()).toBe(6);
expect(date.getDate()).toBe(1); expect(date.getDate()).toBe(1);
expect(date.getHours()).toBe(0); expect(date.getHours()).toBe(0);
expect(date.getMinutes()).toBe(0); expect(date.getMinutes()).toBe(0);
expect(date.getSeconds()).toBe(59); expect(date.getSeconds()).toBe(59);
expect(date.getMilliseconds()).toBe(200); expect(date.getMilliseconds()).toBe(200);
}); });
test("Format: converts date object to string", () => { test('Format: converts date object to string', () => {
const date = new Date("2017-09-18"); const date = new Date('2017-09-18');
expect(date_utils.to_string(date)).toBe("2017-09-18"); expect(date_utils.to_string(date)).toBe('2017-09-18');
}); });
test("Format: converts date object to string", () => { test('Format: converts date object to string', () => {
const date = new Date("2016-02-29 16:08:34.3"); const date = new Date('2016-02-29 16:08:34.3');
expect(date_utils.to_string(date, true)).toBe("2016-02-29 16:08:34.300"); expect(date_utils.to_string(date, true)).toBe('2016-02-29 16:08:34.300');
}); });
test("Format: converts date object to string", () => { test('Format: converts date object to string', () => {
const date = new Date("2016-02-29 16:08:34.3"); const date = new Date('2016-02-29 16:08:34.3');
expect(date_utils.to_string(date, true)).toBe("2016-02-29 16:08:34.300"); expect(date_utils.to_string(date, true)).toBe('2016-02-29 16:08:34.300');
}); });
test("Parse: returns Date Object as is", () => { test('Parse: returns Date Object as is', () => {
const d = new Date(); const d = new Date();
const date = date_utils.parse(d); const date = date_utils.parse(d);
expect(d).toBe(date); expect(d).toBe(date);
}); });
test("Diff: returns diff between 2 date objects", () => { test('Diff: returns diff between 2 date objects', () => {
const a = date_utils.parse("2017-09-08"); const a = date_utils.parse('2017-09-08');
const b = date_utils.parse("2017-06-07"); const b = date_utils.parse('2017-06-07');
expect(date_utils.diff(a, b, "day")).toBe(93); expect(date_utils.diff(a, b, 'day')).toBe(93);
expect(date_utils.diff(a, b, "month")).toBe(3); expect(date_utils.diff(a, b, 'month')).toBe(3);
expect(date_utils.diff(a, b, "year")).toBe(0); expect(date_utils.diff(a, b, 'year')).toBe(0);
}); });
test("StartOf", () => { test('StartOf', () => {
const date = date_utils.parse("2017-08-12 15:07:34.012"); const date = date_utils.parse('2017-08-12 15:07:34.012');
const start_of_millisecond = date_utils.start_of(date, "millisecond"); const start_of_millisecond = date_utils.start_of(date, 'millisecond');
expect(date_utils.to_string(start_of_millisecond, true)).toBe( expect(date_utils.to_string(start_of_millisecond, true)).toBe(
"2017-08-12 15:07:34.012", '2017-08-12 15:07:34.012',
); );
const start_of_second = date_utils.start_of(date, "second"); const start_of_second = date_utils.start_of(date, 'second');
expect(date_utils.to_string(start_of_second, true)).toBe( expect(date_utils.to_string(start_of_second, true)).toBe(
"2017-08-12 15:07:34.000", '2017-08-12 15:07:34.000',
); );
const start_of_minute = date_utils.start_of(date, "minute"); const start_of_minute = date_utils.start_of(date, 'minute');
expect(date_utils.to_string(start_of_minute, true)).toBe( expect(date_utils.to_string(start_of_minute, true)).toBe(
"2017-08-12 15:07:00.000", '2017-08-12 15:07:00.000',
); );
const start_of_hour = date_utils.start_of(date, "hour"); const start_of_hour = date_utils.start_of(date, 'hour');
expect(date_utils.to_string(start_of_hour, true)).toBe( expect(date_utils.to_string(start_of_hour, true)).toBe(
"2017-08-12 15:00:00.000", '2017-08-12 15:00:00.000',
); );
const start_of_day = date_utils.start_of(date, "day"); const start_of_day = date_utils.start_of(date, 'day');
expect(date_utils.to_string(start_of_day, true)).toBe( expect(date_utils.to_string(start_of_day, true)).toBe(
"2017-08-12 00:00:00.000", '2017-08-12 00:00:00.000',
); );
const start_of_month = date_utils.start_of(date, "month"); const start_of_month = date_utils.start_of(date, 'month');
expect(date_utils.to_string(start_of_month, true)).toBe( expect(date_utils.to_string(start_of_month, true)).toBe(
"2017-08-01 00:00:00.000", '2017-08-01 00:00:00.000',
); );
const start_of_year = date_utils.start_of(date, "year"); const start_of_year = date_utils.start_of(date, 'year');
expect(date_utils.to_string(start_of_year, true)).toBe( expect(date_utils.to_string(start_of_year, true)).toBe(
"2017-01-01 00:00:00.000", '2017-01-01 00:00:00.000',
); );
}); });
test("format", () => { test('format', () => {
const date = date_utils.parse("2017-08-12 15:07:23"); const date = date_utils.parse('2017-08-12 15:07:23');
expect(date_utils.format(date, "YYYY-MM-DD")).toBe("2017-08-12"); expect(date_utils.format(date, 'YYYY-MM-DD')).toBe('2017-08-12');
}); });
test("format", () => { test('format', () => {
const date = date_utils.parse("2016-02-29 16:08:34.3"); const date = date_utils.parse('2016-02-29 16:08:34.3');
expect(date_utils.format(date)).toBe("2016-02-29 16:08:34.300"); expect(date_utils.format(date)).toBe('2016-02-29 16:08:34.300');
}); });