Gathering detailed insights and metrics for gantt-elastic-h
Gathering detailed insights and metrics for gantt-elastic-h
Gantt chart. Elastic javascript gantt chart. Vue gantt. Project manager responsive gantt. jquery gantt.
1.0.5
4
MIT
Vue
10.42 MB
Installations
npm install gantt-elastic-hDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.16.0
NPM Version
6.14.17
Releases
Unable to fetch releases
Languages
3
Vue
JavaScript
HTML
Vue (86.21%)
JavaScript (13.59%)
HTML (0.2%)
Developer
JianGuoHt
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
4 Stars
15 Commits
3 Forks
1 Watchers
2 Branches
1 Contributors
Updated on Aug 14, 2024
Maintainers
1
Package Meta Information
Latest Version
1.0.5
Package Id
gantt-elastic-h@1.0.5
Unpacked Size
10.42 MB
Size
8.91 MB
File Count
51
NPM Version
6.14.17
Node Version
16.16.0
Published on
Apr 19, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
4
Dev Dependencies
25
@types/chai@types/cypress@types/mocha@vue/cli-plugin-eslint@vue/cli-service@vue/eslint-config-prettierbabel-corebabel-jestbabel-preset-envcss-loadercypresseslinteslint-plugin-cypressgh-pageshtml-webpack-pluginsasssass-loadervue-loadervue-slider-componentvue-switchesvue-template-compilervuepresswebpackwebpack-cliwebpack-dev-server
基于 Gantt-elastic 的二次封装！！
Gantt-elastic - Javascript Gantt Chart (editable, responsive)
Javascript Gantt Chart for vue, jquery, vanilla js and other frameworks
Gantt-elastic document here
Installation
npm install --save gantt-elastic-h or download zip from github / clone repo
and if you want default header
npm install --save gantt-elastic-header
Usage
1<!DOCTYPE html> 2<html charset="utf-8"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 6 <title>GanttElastic editor demo</title> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 <script src="https://cdn.jsdelivr.net/npm/dayjs"></script> 9 10 <script src="https://unpkg.com/gantt-elastic/dist/GanttElastic.umd.js"></script> 11 <script src="https://unpkg.com/gantt-elastic-header/dist/Header.umd.js"></script> 12 </head> 13 14 <body> 15 <div style="width:100%;height:100%"> 16 <div id="app" v-if="!destroy"> 17 <gantt-elastic :tasks="tasks" :options="options" :dynamic-style="dynamicStyle"> 18 <gantt-header slot="header"></gantt-header> 19 <gantt-footer slot="footer"></gantt-footer> 20 </gantt-elastic> 21 </div> 22 </div> 23 24 <script> 25 // just helper to get current dates 26 function getDate(hours) { 27 const currentDate = new Date(); 28 const currentYear = currentDate.getFullYear(); 29 const currentMonth = currentDate.getMonth(); 30 const currentDay = currentDate.getDate(); 31 const timeStamp = new Date(currentYear, currentMonth, currentDay, 0, 0, 0).getTime(); 32 return new Date(timeStamp + hours * 60 * 60 * 1000).getTime(); 33 } 34 35 let tasks = [ 36 { 37 id: 1, 38 label: 'Make some noise', 39 user: '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>', 40 start: getDate(-24 * 5), 41 duration: 15 * 24 * 60 * 60 * 1000, 42 progress: 85, 43 type: 'project', 44 //collapsed: true, 45 }, 46 { 47 id: 2, 48 label: 'With great power comes great responsibility', 49 user: '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>', 50 parentId: 1, 51 start: getDate(-24 * 4), 52 duration: 4 * 24 * 60 * 60 * 1000, 53 progress: 50, 54 type: 'milestone', 55 collapsed: true, 56 style: { 57 base: { 58 fill: '#1EBC61', 59 stroke: '#0EAC51', 60 }, 61 /*'tree-row-bar': { 62 fill: '#1EBC61', 63 stroke: '#0EAC51' 64 }, 65 'tree-row-bar-polygon': { 66 stroke: '#0EAC51' 67 }*/ 68 }, 69 }, 70 { 71 id: 3, 72 label: 'Courage is being scared to death, but saddling up anyway.', 73 user: '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>', 74 parentId: 2, 75 start: getDate(-24 * 3), 76 duration: 2 * 24 * 60 * 60 * 1000, 77 progress: 100, 78 type: 'task', 79 }, 80 { 81 id: 4, 82 label: 'Put that toy AWAY!', 83 user: '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>', 84 start: getDate(-24 * 2), 85 duration: 2 * 24 * 60 * 60 * 1000, 86 progress: 50, 87 type: 'task', 88 dependentOn: [3], 89 }, 90 ]; 91 92 let options = { 93 maxRows: 100, 94 maxHeight: 300, 95 title: { 96 label: 'Your project title as html (link or whatever...)', 97 html: false, 98 }, 99 row: { 100 height: 24, 101 }, 102 calendar: { 103 hour: { 104 display: false, 105 }, 106 }, 107 chart: { 108 progress: { 109 bar: false, 110 }, 111 expander: { 112 display: true, 113 }, 114 }, 115 taskList: { 116 expander: { 117 straight: false, 118 }, 119 columns: [ 120 { 121 id: 1, 122 label: 'ID', 123 value: 'id', 124 width: 40, 125 }, 126 { 127 id: 2, 128 label: 'Description', 129 value: 'label', 130 width: 200, 131 expander: true, 132 html: true, 133 events: { 134 click({ data, column }) { 135 alert('description clicked!\n' + data.label); 136 }, 137 }, 138 }, 139 { 140 id: 3, 141 label: 'Assigned to', 142 value: 'user', 143 width: 130, 144 html: true, 145 }, 146 { 147 id: 3, 148 label: 'Start', 149 value: (task) => dayjs(task.start).format('YYYY-MM-DD'), 150 width: 78, 151 }, 152 { 153 id: 4, 154 label: 'Type', 155 value: 'type', 156 width: 68, 157 }, 158 { 159 id: 5, 160 label: '%', 161 value: 'progress', 162 width: 35, 163 style: { 164 'task-list-header-label': { 165 'text-align': 'center', 166 width: '100%', 167 }, 168 'task-list-item-value-container': { 169 'text-align': 'center', 170 width: '100%', 171 }, 172 }, 173 }, 174 ], 175 }, 176 /*locale:{ 177 name: 'pl', // name String 178 weekdays: 'Poniedziałek_Wtorek_Środa_Czwartek_Piątek_Sobota_Niedziela'.split('_'), // weekdays Array 179 weekdaysShort: 'Pon_Wto_Śro_Czw_Pią_Sob_Nie'.split('_'), // OPTIONAL, short weekdays Array, use first three letters if not provided 180 weekdaysMin: 'Pn_Wt_Śr_Cz_Pt_So_Ni'.split('_'), // OPTIONAL, min weekdays Array, use first two letters if not provided 181 months: 'Styczeń_Luty_Marzec_Kwiecień_Maj_Czerwiec_Lipiec_Sierpień_Wrzesień_Październik_Listopad_Grudzień'.split('_'), // months Array 182 monthsShort: 'Sty_Lut_Mar_Kwi_Maj_Cze_Lip_Sie_Wrz_Paź_Lis_Gru'.split('_'), // OPTIONAL, short months Array, use first three letters if not provided 183 ordinal: n => `${n}`, // ordinal Function (number) => return number + output 184 relativeTime: { // relative time format strings, keep %s %d as the same 185 future: 'za %s', // e.g. in 2 hours, %s been replaced with 2hours 186 past: '%s temu', 187 s: 'kilka sekund', 188 m: 'minutę', 189 mm: '%d minut', 190 h: 'godzinę', 191 hh: '%d godzin', // e.g. 2 hours, %d been replaced with 2 192 d: 'dzień', 193 dd: '%d dni', 194 M: 'miesiąc', 195 MM: '%d miesięcy', 196 y: 'rok', 197 yy: '%d lat' 198 } 199 }*/ 200 }; 201 202 // create instance 203 const app = new Vue({ 204 components: { 205 'gantt-header': Header, 206 'gantt-elastic': GanttElastic, 207 'gantt-footer': { 208 template: `<span>this is a footer</span>`, 209 }, 210 }, 211 data: { 212 tasks: tasks.map((task) => Object.assign({}, task)), 213 options, 214 dynamicStyle: { 215 'task-list-header-label': { 216 'font-weight': 'bold', 217 }, 218 }, 219 destroy: false, 220 }, 221 }); 222 223 // gantt state which will be updated in realtime 224 let ganttState, ganttInstance; 225 226 // listen to 'gantt-elastic.ready' or 'gantt-elastic.mounted' event 227 // to get the gantt state for real time modification 228 app.$on('gantt-elastic-ready', (ganttElasticInstance) => { 229 ganttInstance = ganttElasticInstance; 230 231 ganttInstance.$on('tasks-changed', (tasks) => { 232 app.tasks = tasks; 233 }); 234 ganttInstance.$on('options-changed', (options) => { 235 app.options = options; 236 }); 237 ganttInstance.$on('dynamic-style-changed', (style) => { 238 app.dynamicStyle = style; 239 }); 240 241 ganttInstance.$on('chart-task-mouseenter', ({ data, event }) => { 242 console.log('task mouse enter', { data, event }); 243 }); 244 ganttInstance.$on('updated', () => { 245 //console.log('gantt view was updated'); 246 }); 247 ganttInstance.$on('destroyed', () => { 248 //console.log('gantt was destroyed'); 249 }); 250 ganttInstance.$on('times-timeZoom-updated', () => { 251 console.log('time zoom changed'); 252 }); 253 ganttInstance.$on('taskList-task-click', ({ event, data, column }) => { 254 console.log('task list clicked! (task)', { data, column }); 255 }); 256 }); 257 258 // mount gantt to DOM 259 app.$mount('#app'); 260 </script> 261 </body> 262</html>
gantt-elastic as vue component
Take a look at the vue.html inside examples folder file to see how you could add gantt-elastic inside <script> tag along with the Vue framework
Demo project: https://github.com/neuronetio/vue-gantt-elastic
You can also import gantt-elastic as compiled js component in commonjs or umd format (examples folder) or just grab GanttElastic.vue from src directory and add to your existing vue project.
1import Vue from 'vue'; 2import GanttElastic from "gantt-elastic"; 3import Header from "gantt-elastic-header"; // if you want standard header (npm i -s gantt-elastic-header) 4new Vue({ 5 el:'#gantt', 6 template:`<gantt-elastic :tasks="tasks" :options="options"> 7 <gantt-elastic-header slot="header"></gantt-elastic-header> 8 <gantt-elastic-footer slot="footer"></gantt-elastic-footer> 9 </gantt-elastic>`, 10 components: { 11 ganttElasticHeader: {template:`<span>your header</span>`}, // or Header 12 ganttElastic: GanttElastic 13 ganttElasticFooter: {template:`<span>your footer</span>`}, 14 }, 15 data() { 16 return { 17 tasks: tasks, 18 options: options 19 }; 20 } 21});
or
1import Vue from 'vue'; 2import App from './App.vue'; // your app that uses gantt-elastic from 'gantt-elastic/src/GanttElastic.vue' 3 4new Vue({ 5 el: '#app', 6 render: (h) => h(App), 7});
For webpack usage (pure javascript, inside other frameworks or Vue App/Component)
Take a look at this demo project: https://github.com/neuronetio/gantt-elastic-webpack for other bundlers use umd or commonjs from dist folder.
1import GanttElastic from 'gantt-elastic/dist/GantElastic.umd.js'; 2import GanttElastic from 'gantt-elastic/dist/GantElastic.common.js'; // same as import GanttElastic from 'gantt-elastic'; 3import GanttElastic from 'gantt-elastic/src/GantElastic.vue'; // if you want vue component directly without compilation - look above 4// and the same with require 5const GanttElastic = require('gantt-elastic/dist/GantElastic.common.js');
Licensce
MIT
No vulnerabilities found.
No security vulnerabilities found.