How to use takeHandle method in Playwright Internal

Best JavaScript code snippet using playwright-internal

graph.js

Source:graph.js Github

copy

Full Screen

1if (!window.Graph)2(function(window) {3var DRAG_CURSOR = 'pointer',4 DRAG2_CURSOR = 'pointer';5var document = window.document;6// Date utils7var MINUTE = 60, HOUR = 60 * MINUTE, DAY = 24 * HOUR, MONTH = 28 * DAY, YEAR = 365 * DAY, MAXSCALE = 2 * DAY + HOUR;8var xscales = [9 {base: HOUR, format: ['hour'], sub: -1},10 {base: 2 * HOUR, format: ['hour'], sub: HOUR},11 {base: 3 * HOUR, format: ['hour'], sub: HOUR},12 {base: 6 * HOUR, format: ['dayHour'], sub: HOUR},13 {base: 8 * HOUR, format: ['dayHour'], sub: HOUR},14 {base: 12 * HOUR, format: ['dayHour'], sub: HOUR},15 {base: DAY, format: ['dayFull', 'day'], sub: -1},16 {base: 2 * DAY, format: ['dayFull', 'day'], sub: DAY},17 {base: 3 * DAY, format: ['dayFull', 'day'], sub: DAY},18 {base: 4 * DAY, format: ['dayFull', 'day'], sub: DAY},19 {base: MONTH, format: ['monthFull', 'month'], sub: -1},20 {base: 2 * MONTH, format: ['monthFull', 'month'], sub: MONTH},21 {base: 3 * MONTH, format: ['monthFull', 'month'], sub: MONTH},22 {base: 4 * MONTH, format: ['monthFull', 'month'], sub: MONTH},23 {base: 6 * MONTH, format: ['monthFull', 'month'], sub: MONTH},24 {base: YEAR, format: ['yearFull'], sub: -1}]; // using 'year' ('00, '01, '02...) seems a bad idea25var DEF_TIME = Math.round((new Date()).getTime() / 1000);26var dateFormats = {27 hour: "{hour}:00",28 day: getLang('stats_day_mon').split("{month}").join("{dayMonth}"),29 dayFull: getLang('stats_day_mon').split("{month}").join("{dayMonth}"),30 dayFullYear: getLang('stats_day_month_year').split("{month}").join("{dayMonth}"),31 dayHour: getLang('graph_day_fullmon_year_hour'),32 dayHourMin: getLang('graph_day_fullmon_year_hour_min'),33 month: "{shortMonth}'{shortYear}",34 monthFull: "{month}'{shortYear}",35 year: "'{shortYear}",36 yearFull: "{year}"37};38var colors = [0x597da3, 0xb05c91, 0x4d9fab, 0x569567, 0xac4c4c, 0xc9c255, 0xcd9f4d, 0x876db3,39 0x6f9fc4, 0xc77bb1, 0x70c5c8, 0x80bb88, 0xce5e5e, 0xe8e282, 0xedb24a, 0xae97d3,40 0x6391bc, 0xc77bb1, 0x62b1bc, 0x80bb88, 0xb75454, 0xc9c255, 0xdca94f, 0x997fc4,41 0x85afd0, 0xc77bb1, 0x8ecfce, 0x80bb88, 0xe47070, 0xc9c255, 0xf7be5a, 0xbeaadf];42var globalTouchCount = 0;43function fullDate(time, params) {44 var fmt = (params && params.show_time) ? ((params.show_minutes) ? 'dayHourMin' : 'dayHour') : 'dayFullYear';45 return formatDate(time, fmt);46}47function formatDate(time, format) {48 if (time == -1) {49 var h = (format == 'dayHour' ? '0' : '88'), m = '88', d = '88',50 mmmm = 'Mmmmmmmm', mmmm2 = 'Mmmmmmmm', mmm = 'mmm', mmm2 = 'mmm', yyyy = '88888', yy = '.88';51 } else {52 var date = new Date(time * 1000);53 var h = date.getHours(), m = date.getMinutes().toString();54 var h12 = h % 12;55 if (h12 == 0) h12 = 12;56 var am_pm = h < 12 ? 'AM':'PM';57 h = h.toString();58 if (m.length == 1) m = '0' + m;59 var d = date.getDate().toString(),60 mmmm = getLang('Month' + (date.getMonth() + 1) + '_of'), mmmm2 = getLang('Month' + (date.getMonth() + 1)),61 mmm = mmmm.substr(0, 3).toLowerCase(), mmm2 = mmmm2.substr(0, 3).toLowerCase(),62 yyyy = date.getFullYear().toString(), yy = yyyy.substr(2);63 }64 var fmt = dateFormats[format];65 return fmt.split('{month}').join(mmmm2).66 split('{shortMonth}').join(mmm2).67 split('{shortYear}').join(yy).68 split('{year}').join(yyyy).69 split('{day}').join(d).70 split('{dayMonth}').join(mmmm).71 split('{shortDayMonth}').join(mmm).72 split('{hour}').join(h).73 split('{hour12}').join(h12).74 split('{min}').join(m).75 split('{am/pm}').join(am_pm);76}77function incDate(time, step, inc) {78 var date = new Date(time * 1000);79 if (step >= YEAR) {80 var count = step / YEAR;81 date = new Date((Math.floor(date.getFullYear() / count) + inc) * count, 0, 1, 0, 0);82 return Math.floor(date.getTime() / 1000);83 } else84 if (step < YEAR && step >= MONTH) {85 var count = step / MONTH;86 date = new Date(date.getFullYear(), (Math.floor(date.getMonth() / count) + inc) * count, 1, 0, 0);87 return Math.floor(date.getTime() / 1000);88 } else89 if (step < MONTH) {90 var tz = date.getTimezoneOffset() * 60;91 return Math.floor((time - tz) / step + inc) * step + tz;92 }93}94// Other utils95function addEventEx(graph, element, event, listener) {96 element.graph = graph;97 addEvent(element, event, listener);98}99function removeEventEx(element, event, listener) {100 removeData(element, "graph");101 removeEvent(element, event, listener);102}103function prepareEvent(event, pass) {104 if (event.touches) {105 if (event.touches.length > 1 || globalTouchCount > 1) {106 event.currentTarget.graph.endDrag();107 return false;108 } else {109 if (!pass) cancelEvent(event);110 return event.touches[0];111 }112 }113 cancelEvent(event);114 return event;115}116function getContext(e) {117 var ctx = e.getContext("2d");118 if (!ctx) return ctx;119 if (!ctx.measureText || !ctx.measureText(getLang('Month1')))120 return null;121 return ctx;122}123function getFirstControlPoints(rhs) {124 var n = rhs.length, x = [], tmp = [], b = 2.0;125 x[0] = rhs[0] / b;126 for (var i = 1; i < n; i++) {127 tmp[i] = 1 / b;128 b = (i < n - 1 ? 4.0 : 3.5) - tmp[i];129 x[i] = (rhs[i] - x[i - 1]) / b;130 }131 for (var i = 1; i < n; i++)132 x[n - i - 1] -= tmp[n - i] * x[n - i];133 return x;134}135function getYStep(maxValue, intScale) {136 var step = Math.pow(10, Math.floor(Math.LOG10E * Math.log(maxValue)));137 if (maxValue / step <= 2)138 step /= 4.0; else139 if (maxValue / step <= 4)140 step /= 2.0;141 if (intScale) {142 step = Math.max(step, 1);143 if (step == 2.5) {144 step = 2;145 }146 }147 return step;148}149function formatValue(value) { // something like -10 000 000.000001150 var sgn = (value < 0) ? '-' : '';151 value = Math.abs(value);152 var intv = Math.floor(value), fltv = value - intv;153 fltv = Math.round(fltv * 100000.0) / 100000.0;154 var res = '';155 while (intv > 0) {156 var q = (intv % 1000).toString();157 res = (intv > 999 ? '000'.substr(0, 3 - q.length) : '') + q + (res == '' ? '' : ' ') + res;158 intv = Math.floor(intv / 1000);159 }160 if (res == '') res = '0';161 if (fltv > 0) res += fltv.toString().substr(1);162 return sgn + res;163}164function drawCheck(e, color, color2, checked, over) {165 var ctx = getContext(e);166 ctx.clearRect(0, 0, 20, 20);167 if (checked) { // shadow168 ctx.lineWidth = 2;169 ctx.strokeStyle = color2;170 ctx.beginPath();171 ctx.moveTo(6.5, 11);172 ctx.lineTo(9.5, 14);173 ctx.lineTo(17.5, 6);174 ctx.stroke();175 }176 if (over) {177 ctx.fillStyle = color2;178 ctx.fillRect(3, 3, 14, 14);179 }180 ctx.lineWidth = 1;181 ctx.strokeStyle = color;182 ctx.strokeRect(3.5, 3.5, 13, 13);183 if (checked) {184 ctx.lineWidth = 2;185 ctx.beginPath();186 ctx.moveTo(6.5, 10);187 ctx.lineTo(9.5, 13);188 ctx.lineTo(17.5, 5);189 ctx.stroke();190 }191}192function drawLines(ctx, x, y, w, h, lines, stTime, enTime, xfactor, yfactor, yDelta, zoomedOut, active, smooth) {193 smooth = (!zoomedOut) && smooth;194 var stIdxs = [], enIdxs = [], _lines = [];195 for (var l = 0; l < lines.length + (active ? 1 : 0); l++) {196 var line = (l < lines.length) ? (active != lines[l] ? lines[l] : null) : active;197 if (line && line.shown) {198 var stIdx = 0, enIdx = line.d.length - 1;199 while ((stIdx < line.d.length - 2) && (line.d[stIdx + 2].x < stTime)) stIdx++;200 while ((enIdx > 2) && (line.d[enIdx - 2].x > enTime)) enIdx--;201 if (enIdx - stIdx > w / 5) // dots overload202 smooth = false;203 if (enIdx >= stIdx && (line.d[enIdx].x >= stTime) && (line.d[stIdx].x <= enTime)) {204 _lines.push(line);205 stIdxs.push(stIdx);206 enIdxs.push(enIdx);207 }208 }209 }210 lines = _lines;211 for (var l = 0; l < lines.length; l++) {212 var stIdx = stIdxs[l], enIdx = enIdxs[l], ps = lines[l].d;213 if (smooth && (enIdx - stIdx + 1 > 2)) {214 var knots = [], n = 0;215 for (var i = stIdx; i <= enIdx; i++) {216 knots[n] = {X: x + (ps[i].x - stTime) * xfactor, Y: y + h - (ps[i].y + yDelta) * yfactor};217 n++;218 }219 n--;220 var rhs = [];221 for (var i = 1; i < n - 1; ++i)222 rhs[i] = 4 * knots[i].X + 2 * knots[i + 1].X;223 rhs[0] = knots[0].X + 2 * knots[1].X;224 rhs[n - 1] = (8 * knots[n - 1].X + knots[n].X) / 2.0;225 var xs1 = getFirstControlPoints(rhs);226 for (var i = 1; i < n - 1; ++i)227 rhs[i] = 4 * knots[i].Y + 2 * knots[i + 1].Y;228 rhs[0] = knots[0].Y + 2 * knots[1].Y;229 rhs[n - 1] = (8 * knots[n - 1].Y + knots[n].Y) / 2.0;230 var ys1 = getFirstControlPoints(rhs), xs2 = [], ys2 = [];231 for (var i = 0; i < n; ++i) {232 if (i < n - 1) {233 xs2[i] = 2 * knots[i + 1].X - xs1[i + 1];234 ys2[i] = 2 * knots[i + 1].Y - ys1[i + 1];235 } else {236 xs2[i] = (knots[n].X + xs1[n - 1]) / 2;237 ys2[i] = (knots[n].Y + ys1[n - 1]) / 2;238 }239 }240 }241 // fill242 if (lines[l].f && stIdx < enIdx) {243 ctx.globalAlpha = (active == null || active != lines[l]) ? 0.2 : 0.4;244 ctx.fillStyle = lines[l].hexColor;245 ctx.strokeStyle = lines[l].hexColor;246 ctx.lineWidth = (zoomedOut ? 1 : 2);247 if (lines[l].b) {248 for (var i = stIdx; i <= enIdx; i++) {249 var cx1 = Math.floor(x + ((i > stIdx ? (ps[i - 1].x + ps[i].x) / 2 : ps[i].x) - stTime) * xfactor);250 var cx2 = Math.floor(x + ((i < enIdx ? (ps[i].x + ps[i + 1].x) / 2 : ps[i].x) - stTime) * xfactor);251 var cy = (ps[i].y + yDelta) * yfactor;252 ctx.fillRect(cx1, y + h - cy, cx2 - cx1, ps[i].y * yfactor);253 }254 } else {255 ctx.beginPath();256 var px = x + (ps[stIdx].x - stTime) * xfactor;257 ctx.moveTo(px, y + h - yDelta * yfactor);258 for (var i = stIdx; i <= enIdx; i++) {259 var cx = x + (ps[i].x - stTime) * xfactor;260 if (smooth && (i > stIdx) && (enIdx - stIdx + 1 > 2))261 ctx.bezierCurveTo(Math.min(Math.max(px, xs1[i - stIdx - 1]), cx), Math.min(y + h, Math.max(ys1[i - stIdx - 1], 0)), Math.min(Math.max(px, xs2[i - stIdx - 1]), cx), Math.min(y + h, Math.max(ys2[i - stIdx - 1], 0)), cx, y + h - (ps[i].y + yDelta) * yfactor);262 else263 ctx.lineTo(cx, y + h - (ps[i].y + yDelta) * yfactor);264 px = cx;265 }266 ctx.lineTo(px, y + h - yDelta * yfactor);267 ctx.fill();268 }269 ctx.globalAlpha = 1;270 }271 // stroke272 ctx.strokeStyle = lines[l].hexColor;273 ctx.lineWidth = (zoomedOut ? 1 : 2);274 ctx.beginPath();275 var px = x + (ps[stIdx].x - stTime) * xfactor, py = y + h - (ps[stIdx].y + yDelta) * yfactor;276 ctx.moveTo(px, py);277 if (lines[l].b) {278 for (var i = stIdx; i <= enIdx; i++) {279 var cx = Math.floor(x + ((i < enIdx ? (ps[i].x + ps[i + 1].x) / 2 : ps[i].x) - stTime) * xfactor);280 var cy = y + h - (ps[i].y + yDelta) * yfactor;281 ctx.lineTo(cx, cy);282 if (i < enIdx)283 if (zoomedOut)284 ctx.lineTo(cx, y + h - (ps[i + 1].y + yDelta) * yfactor);285 else {286 ctx.stroke();287 ctx.beginPath();288 ctx.moveTo(cx, y + h - (ps[i + 1].y + yDelta) * yfactor);289 }290 }291 } else {292 for (var i = stIdx + 1; i <= enIdx; i++) {293 var cx = x + (ps[i].x - stTime) * xfactor, cy = y + h - (ps[i].y + yDelta)* yfactor;294 if (ps[i].s == 'x') {295 ctx.stroke();296 ctx.beginPath();297 ctx.moveTo(cx, cy);298 } else {299 if (ps[i].s == '-' || ps[i].s == '--' || ps[i].s == '.') {300 ctx.stroke();301 ctx.globalAlpha = 0.3;302 ctx.beginPath();303 ctx.moveTo(px, py);304 }305 if (smooth && (i > stIdx) && (enIdx - stIdx + 1 > 2))306 ctx.bezierCurveTo(Math.min(Math.max(px, xs1[i - stIdx - 1]), cx), Math.min(y + h, Math.max(ys1[i - stIdx - 1], 0)), Math.min(Math.max(px, xs2[i - stIdx - 1]), cx), Math.min(y + h, Math.max(ys2[i - stIdx - 1], 0)), cx, y + h - (ps[i].y + yDelta) * yfactor);307 else308 ctx.lineTo(cx, y + h - (ps[i].y + yDelta) * yfactor);309 if (ctx.globalAlpha != 1) {310 ctx.stroke();311 ctx.beginPath();312 ctx.moveTo(cx, cy);313 }314 }315 ctx.globalAlpha = 1;316 px = cx;317 py = cy;318 }319 }320 ctx.stroke();321 // dots322 if (smooth || (enIdx - stIdx < 2 && !zoomedOut)) {323 ctx.strokeStyle = lines[l].hexColor;324 ctx.fillStyle = '#ffffff';325 ctx.lineWidth = 2;326 for (var i = stIdx; i <= enIdx; i++) {327 ctx.beginPath();328 ctx.arc(x + (ps[i].x - stTime) * xfactor, y + h - (ps[i].y + yDelta) * yfactor, 3.5, 0, Math.PI*2, true);329 ctx.fill();330 ctx.stroke();331 }332 }333 }334}335function drawBars(ctx, x, y, w, h, lines, labels, barW, xfactor, yfactor, yDelta) {336 for (var l = 0; l < lines.length; l++) {337 var ps = lines[l].d;338 for (i = 0; i < ps.length; i++) {339 if (!labels[ps[i].x]) {340 continue;341 }342 var cx = Math.floor(getBarXValue(x, xfactor, barW, l, ps[i].x));343 var psy = Math.max(ps[i].y, 2 / yfactor);344 var cy = (psy + yDelta) * yfactor;345 ctx.fillStyle = lines[l].hexColor;346 ctx.fillRect(cx, Math.floor(y + h - cy), barW, Math.ceil(psy * yfactor));347 }348 }349}350function getBarXValue(xOffset, xStep, barsWidth, lineIndex, barIndex) {351 return xOffset + barsWidth / 2 + lineIndex * barsWidth + barIndex * xStep;352}353function clearSelection() {354 if(document.selection && document.selection.empty) {355 document.selection.empty();356 } else if(window.getSelection) {357 var sel = window.getSelection();358 sel.removeAllRanges();359 }360}361function dataObjectToArray(data_object) {362 var data_array = [];363 for (var name in data_object) {364 data_array.push(data_object[name]);365 }366 return data_array;367}368// Graph constructor369function Graph(id, data, params, width, height) {370 var graph = this;371 params = extend({}, params);372 width = width ? width : 585;373 height = height ? height : 385;374 extend(this, {params: params, width: width, height: height, viewWidth: width, viewHeight: height - 80});375 this.params.yunits = this.params.yunits || '';376 // create basic DOM tree377 this.graphDiv = ge(id);378 setStyle(this.graphDiv, {fontFamily: 'tahoma, arial, verdana, sans-serif, Lucida Sans', fontSize: '11px', color: '#36638e', width: this.viewWidth + 'px', clear: 'both', lineHeight: '130%', textAlign: 'left'});379 this.graphDiv.innerHTML = '<div style="float: left"><canvas style="padding-top: 20px"></canvas></div>\380 <div style="float: left">\381 <div style="height: 20px; float: right;"></div>\382 <div style="height: 20px; padding-left: 10px;"></div>\383 <div style="position: relative; height: ' + this.viewHeight + 'px;">\384 <canvas height="' + this.viewHeight + '"></canvas>\385 <canvas height="' + (this.viewHeight - 17) + '" style="position: absolute; top: 0; left: 0;"></canvas>\386 <div style="position: absolute; border: 1px solid #5f7d9d; color: #5f7d9d;\387 background-color: #eeeeee; padding: 2px 3px 2px 4px; white-space: nowrap; display: none;">' + cur.graphVars['lang.data_empty'] + '</div>\388 </div>\389 <div style="position: relative; height: 40px;">\390 <canvas height="40"></canvas>\391 <div style="position: absolute; top: 0; height: 38px; border: 1px solid #b8c5d4; border-width: 1px 0px 1px 1px; border-top-color: #d3dee8;"><div style="background: white; opacity: 0.5; filter: alpha(Opacity=50); width: 100%; height: 100%;"></div></div>\392 <div style="position: absolute; top: 0; height: 38px; border: 1px solid #b8c5d4; cursor: ' + DRAG_CURSOR + ';"></div>\393 <div style="position: absolute; top: 0; height: 38px; border: 1px solid #b8c5d4; border-width: 1px 1px 1px 0px; border-top-color: #d3dee8;"><div style="background: white; opacity: 0.5; filter: alpha(Opacity=50); width: 100%; height: 100%;"></div></div>\394 <div style="position: absolute; top: 0; height: 38px; border: 1px solid #b8c5d4; background: #ced9de; opacity: 0.5; filter: alpha(Opacity=50); display: none;"></div>\395 <div style="position: absolute; top: 0; width: 8px; height: 40px; cursor: w-resize;"></div>\396 <div style="position: absolute; top: 0; width: 8px; height: 40px; cursor: e-resize;"></div>\397 </div>\398 <div style="float: left; width: 270px; padding-top: 8px; -moz-user-select: none; -khtml-user-select: none;"></div><div style="float: left; width: 270px; padding-top: 8px; -moz-user-select: none; -khtml-user-select: none;"></div>\399 </div><div style="clear: left;"></div>';400 this.vScale = this.graphDiv.children[0];401 this.vScaleView = this.vScale.children[0];402 this.mainLayout = this.graphDiv.children[1];403 this.menu = this.mainLayout.children[0];404 this.title = this.mainLayout.children[1];405 this.zinLayout = this.mainLayout.children[2];406 this.zinView = this.zinLayout.children[0];407 this.dotsLayer = this.zinLayout.children[1];408 this.message = this.zinLayout.children[2];409 this.zoutLayout = this.mainLayout.children[3];410 this.zoutView = this.zoutLayout.children[0];411 this.lMask = this.zoutLayout.children[1];412 this.zoutWindow = this.zoutLayout.children[2];413 this.rMask = this.zoutLayout.children[3];414 this.select = this.zoutLayout.children[4];415 this.lHandle = this.zoutLayout.children[5];416 this.rHandle = this.zoutLayout.children[6];417 this.column = [this.mainLayout.children[4], this.mainLayout.children[5]];418 var defaultGraph = 0;419 if (typeof params.multiple == 'object' && params.multiple.items) {420 if (!params.multiple.def) params.multiple.def = 0;421 for (i in params.multiple.items) {422 var item = se('<a class="graph_menu_item' + (i == params.multiple.def ? ' graph_menu_item_sel' : '') + '">' + params.multiple.items[i] + '</a>');423 var clickContext = {clickNode: i, graph: this};424 addEvent(item, 'click', this.onClickMenu, null, clickContext);425 cur.destroy.push(function() {426 removeEvent(item, 'click', this.onClickMenu, null, clickContext);427 });428 this.menu.appendChild(item);429 }430 if (params.multiple.graph_item) {431 var item = se('<a class="graph_menu_item">' + params.multiple.graph_item + '</a>');432 var clickContext = {clickNode: params.multiple.items.length, graph: this, alt_graph: true};433 addEvent(item, 'click', this.onClickMenu, null, clickContext);434 cur.destroy.push(function() {435 removeEvent(item, 'click', this.onClickMenu, null, clickContext);436 });437 this.menu.appendChild(item);438 }439 for (i in params.multiple.altitems) {440 var item = se('<a class="graph_menu_item' + (i + params.multiple.altitems.length == params.multiple.def ? ' graph_menu_item_sel' : '') + '">' + params.multiple.altitems[i][0] + '</a>');441 var clickContext = {clickNode: i, graph: this, force_func: params.multiple.altitems[i][1] };442 addEvent(item, 'click', this.onClickMenu, null, clickContext);443 cur.destroy.push(function() {444 removeEvent(item, 'click', this.onClickMenu, null, clickContext);445 });446 this.menu.appendChild(item);447 }448 defaultGraph = params.multiple.def;449 params.multiple = 1;450 }451 extend(this, {452 colMax: [0, 0], lines: [],453 leftTime: -1, rightTime: -1,454 ymarks: [],455 ystep: 0,456 minValue: 100, maxValue: 0, minTime: 2147483647, maxTime: 0,457 dragTime: [],458 startDrag: -1, startDrag2: -1, startValue: -1, startValue2: -1, endValue: -1,459 dragElement: null, maskDragging: false, viewClick: false, smoothLines: false,460 scaleWidth: 0, activeLine: null, isNegative: false});461 try {462 var tctx = getContext(this.zinView);463 if (!tctx) throw 'Error';464 } catch (e) {465 this.zoutLayout.style.display = 'none';466 this.vScale.style.display = 'none';467 this.title.style.display = 'none';468 this.message = (this.message == null) ? this.zinLayout.children[0] : this.message;469 this.message.innerHTML = (cur.graphVars['lang.bad_browser'] || 'Äëÿ îòîáðàæåíèÿ ãðàôèêà ñòàòèñòèêè Âàì íåîáõîäèìî {link}îáíîâèòü áðàóçåð{/link}.').replace('{link}', '<a onclick="Graph.prototype.showBadBrowserBox();">').replace('{/link}', '</a>');470 setStyle(this.graphDiv, {backgroundColor: '#F7F7F7', width: '480px', margin: '0 auto'});471 setStyle(this.message, {472 left: Math.round((getSize(this.zinLayout)[0] - getSize(this.message)[0]) / 2) + 'px',473 top: Math.round((getSize(this.zinLayout)[1] - getSize(this.message)[1]) / 2) + 'px',474 display: 'block',475 color: '#707070',476 border: 'none',477 backgroundColor: 'transparent'478 });479 if (!cur.badBrowserBox) {480 this.showBadBrowserBox();481 }482 return null;483 }484 if (vk.al) {485 stManager.add(['tooltips.js', 'tooltips.css'], function() {486 tooltips.create(graph.mainLayout, {text: '...', black: 1, forcetoup: 1, nohide: 1});487 });488 } else {489 tooltips = false;490 }491 if (!params.bar_chart) {492 addEventEx(this, this.lHandle, 'mousedown touchstart', this.takeHandle); // resize window493 addEventEx(this, this.rHandle, 'mousedown touchstart', this.takeHandle);494 addEventEx(this, this.zoutWindow, 'mousedown touchstart', this.takeWindow); // drag window495 addEventEx(this, this.lMask, 'mousedown touchstart', this.takeMask); // select new window496 addEventEx(this, this.rMask, 'mousedown touchstart', this.takeMask);497 addEventEx(this, this.zinLayout, 'mousedown touchstart', this.takeView); // drag view498 addEventEx(this, this.zinLayout, 'mousewheel DOMMouseScroll', this.wheelView); // zoom with mousewheel499 addEventEx(this, this.zoutLayout, 'mousewheel DOMMouseScroll', this.wheelView);500 }501 addEventEx(this, this.dotsLayer, 'mousemove', this.showDots); // show hints502 addEventEx(this, this.zinLayout, 'mouseout', this.hideDots); // hide hints503 addEvent(this.column[0], 'selectionstart', cancelEvent);504 addEvent(this.column[1], 'selectionstart', cancelEvent);505 if (typeof(data) != 'string') {506 graph.loadGraph = function(index) {507 graph.setData(params.multiple ? (data[index] || []) : data, isArray(params.adjust) ? params.adjust[index] : params.adjust);508 }509 }510 if (params.multiple) {511 for (var i = 0; i < data.length; i++) {512 data[i] = dataObjectToArray(data[i]);513 }514 graph.setData((typeof(data) == 'string') ? data : (data[defaultGraph] || []), isArray(params.adjust) ? params.adjust[0] : params.adjust);515 } else {516 graph.setData((typeof(data) == 'string') ? data : dataObjectToArray(data), params.adjust);517 }518 return graph;519}520// Prototype methods521Graph.prototype = {522 getXValue: function(pageX, view) {523 return (view ?524 ((pageX - getXY(this.zinView)[0]) / this.xfactorIn + this.leftTime) :525 ((pageX - getXY(this.zoutView)[0]) / this.xfactorOut + this.minTime));526 },527 allowZoom: function(zoom_allowed) {528 this.zoutLayout.style.display = zoom_allowed ? 'block' : 'none';529 this.viewHeight = this.height - (zoom_allowed ? 80 : 40);530 this.zinLayout.style.height = this.viewHeight + "px";531 this.zinView.height = this.viewHeight;532 this.dotsLayer.height = this.viewHeight - 17;533 this.disable_zoom = !zoom_allowed;534 },535 showEmpty: function(no_data) {536 if (no_data) this.allowZoom(false);537 setStyle(this.message, {538 display: no_data ? 'block' : 'none',539 left: Math.round((this.viewWidth - getSize(this.message)[0]) / 2) + 'px',540 top: Math.round((this.viewHeight - getSize(this.message)[1]) / 2) + 'px'});541 },542 overrideCursor: function(cursor) {543 document.body.style.cursor = cursor ? cursor : 'default';544 //document.body.style.cursor = cursor ? cursor : 'auto'; // Opera don't understand 'auto'545 this.lHandle.style.cursor = cursor ? cursor : 'w-resize';546 this.rHandle.style.cursor = cursor ? cursor : 'e-resize';547 this.zoutWindow.style.cursor = cursor ? cursor : DRAG_CURSOR;548 },549 takeHandle: function(ev) {550 var g = ev.currentTarget.graph;551 if (g.disable_zoom) return;552 if (!(ev = prepareEvent(ev))) return;553 addEventEx(g, document, 'mousemove drag touchmove', g.dragHandle);554 addEventEx(g, document, 'mouseup touchend', g.endDrag);555 g.startDrag = ev.pageX;556 g.startValue = (ev.currentTarget == g.lHandle) ? g.leftTime : g.rightTime;557 g.dragElement = ev.currentTarget;558 g.hideDots(ev);559 g.overrideCursor(g.dragElement.style.cursor);560 return false;561 },562 takeWindow: function(ev) {563 var g = ev.currentTarget.graph;564 if (g.disable_zoom) return;565 if (!(ev = prepareEvent(ev, true))) return;566 addEventEx(g, document, 'mousemove drag touchmove', g.dragWindow);567 addEventEx(g, document, 'mouseup touchend', g.endDrag);568 g.startDrag = ev.pageX;569 g.startValue = g.leftTime;570 g.hideDots(ev);571 g.overrideCursor(DRAG2_CURSOR);572 return false;573 },574 takeMask: function(ev) {575 cancelEvent(ev);576 var g = ev.currentTarget.graph;577 if (g.disable_zoom) return;578 g.dragElement = ev.currentTarget;579 if (!(ev = prepareEvent(ev))) return;580 addEventEx(g, document, 'mousemove drag touchmove', g.dragMask);581 addEventEx(g, document, 'mouseup touchend', g.endDrag);582 g.startValue = (ev.pageX - getXY(g.dragElement.parentNode)[0]) / g.xfactorOut + g.minTime;583 g.endValue = g.startValue;584 g.hideDots(ev);585 return false;586 },587 takeView: function(ev) {588 var g = ev.currentTarget.graph;589 if (g.disable_zoom) {590 g.deselectLine(ev);591 return;592 }593 if (!(ev = prepareEvent(ev, true))) return;594 g.dragTime[0] = g.getXValue(ev.pageX, true);595 addEventEx(g, document, 'mousemove drag touchmove', g.dragView);596 addEventEx(g, document, 'mouseup touchend', g.endDrag);597 g.overrideCursor(DRAG2_CURSOR);598 g.viewClick = true;599 g.startDrag = ev.pageX;600 g.showDots(ev);601 //return false;602 },603 dragHandle: function(ev) {604 var g = ev.currentTarget.graph;605 if (!(ev = prepareEvent(ev))) return;606 var xfactorOut = g.viewWidth / (g.maxTime - g.minTime);607 if (g.dragElement == g.lHandle) {608 g.leftTime = Math.max(g.minTime, Math.min(g.rightTime - g.MAXSCALE, g.startValue - (g.startDrag - ev.pageX) / xfactorOut));609 } else {610 g.rightTime = Math.min(g.maxTime, Math.max(g.leftTime + g.MAXSCALE, g.startValue - (g.startDrag - ev.pageX) / xfactorOut));611 }612 g.redrawWindow();613 return false;614 },615 dragWindow: function(ev) {616 var g = ev.currentTarget.graph;617 if (!(ev = prepareEvent(ev))) return;618 var xfactorOut = g.viewWidth / (g.maxTime - g.minTime),619 diff = g.leftTime - (g.startValue - (g.startDrag - ev.pageX) / xfactorOut);620 diff = Math.max(diff, g.rightTime - g.maxTime);621 diff = Math.min(diff, g.leftTime - g.minTime);622 g.leftTime -= diff;623 g.rightTime -= diff;624 g.redrawWindow();625 return false;626 },627 dragMask: function(ev) {628 var g = ev.currentTarget.graph;629 if (!(ev = prepareEvent(ev))) return;630 var xfactorOut = g.viewWidth / (g.maxTime - g.minTime);631 g.endValue = (ev.pageX - getXY(g.dragElement.parentNode)[0]) / xfactorOut + g.minTime;632 var lpos = (Math.max(g.minTime, Math.min(g.startValue, g.endValue)) - g.minTime) * xfactorOut,633 rpos = (Math.min(g.maxTime, Math.max(g.startValue, g.endValue)) - g.minTime) * xfactorOut;634 if (!g.maskDragging && (rpos - lpos > 4)) {635 g.select.style.display = 'block';636 g.maskDragging = true;637 }638 g.select.style.left = lpos + "px";639 g.select.style.width = (rpos - lpos - 2) + "px";640 return false;641 },642 dragView: function(ev) {643 var g = ev.currentTarget.graph;644 if (!(ev = prepareEvent(ev, g.viewClick))) return;645 var diff = (ev.pageX - getXY(g.zoutView)[0]) / g.xfactorIn + g.leftTime - g.dragTime[0];646 diff = Math.max(diff, g.rightTime - g.maxTime);647 diff = Math.min(diff, g.leftTime - g.minTime);648 g.leftTime -= diff;649 g.rightTime -= diff;650 if (Math.abs(ev.pageX - g.startDrag) > 4)651 g.viewClick = false;652 g.redrawWindow();653 g.showDots(ev);654 return g.viewClick;655 },656 endDrag: function(ev) {657 var g = this;658 if (ev) {659 cancelEvent(ev);660 g = ev.currentTarget.graph;661 }662 removeEventEx(document, 'mousemove drag touchmove', g.dragHandle);663 removeEventEx(document, 'mousemove drag touchmove', g.dragWindow);664 removeEventEx(document, 'mousemove drag touchmove', g.dragMask);665 removeEventEx(document, 'mousemove drag touchmove', g.dragView);666 removeEventEx(document, 'mouseup touchend', g.endDrag);667 g.select.style.display = 'none';668 g.overrideCursor();669 if (g.endValue != -1) {670 if (g.maskDragging) {671 g.leftTime = Math.min(g.startValue, g.endValue);672 g.rightTime = Math.min(g.maxTime, Math.max(Math.max(g.startValue, g.endValue), g.leftTime + g.MAXSCALE));673 g.leftTime = Math.max(g.minTime, Math.min(g.leftTime, g.rightTime - g.MAXSCALE));674 } else {675 var diff = (g.rightTime - g.leftTime) / 2.0;676 g.leftTime = (g.endValue - diff);677 g.rightTime = (g.endValue + diff);678 if (g.leftTime < g.minTime) {679 diff = g.minTime - g.leftTime;680 g.leftTime += diff;681 g.rightTime += diff;682 } else683 if (g.rightTime > g.maxTime) {684 diff = g.rightTime - g.maxTime;685 g.leftTime -= diff;686 g.rightTime -= diff;687 }688 }689 }690 if (g.viewClick)691 g.deselectLine(ev);692 else693 g.redrawWindow();694 g.endValue = -1;695 g.maskDragging = false;696 g.viewClick = false;697 g.dragTime = [];698 return false;699 },700 wheelView: function(ev) {701 var g = ev.currentTarget.graph,702 delta = (ev.detail ? -ev.detail * 50 : ev.wheelDelta),703 dist = g.rightTime - g.leftTime, diffL = (delta * dist) / 3500, diffR;704 if (g.disable_zoom) return;705 if (g.lines.length == 0) return;706 diffL = Math.min(diffL, (dist - g.MAXSCALE) / 2);707 diffR = Math.max(g.minTime - g.leftTime - diffL, 0);708 g.leftTime = Math.max(g.minTime, g.leftTime + diffL);709 g.rightTime = Math.min(g.maxTime, g.rightTime + diffR);710 g.redrawWindow();711 g.showDots(ev);712 return cancelEvent(ev);713 },714 overLegend: function(ev) {715 var line = ev.currentTarget.line;716 drawCheck(line.legendCheck, line.hexColor, line.hexColor2, line.shown, true);717 },718 outLegend: function(ev) {719 var line = ev.currentTarget.line;720 drawCheck(line.legendCheck, line.hexColor, line.hexColor2, line.shown, false);721 },722 toggleLegend: function(ev) {723 var g = ev.currentTarget.graph, line = ev.currentTarget.line, noneShown = true;724 for (var l = 0; l < g.lines.length; l++)725 if (g.lines[l] != line && g.lines[l].shown)726 noneShown = false;727 line.shown = noneShown || !line.shown;728 drawCheck(line.legendCheck, line.hexColor, line.hexColor2, line.shown, true);729 g.updateLines();730 clearSelection();731 return cancelEvent(ev);732 },733 chooseLegend: function(ev) {734 var g = ev.currentTarget.graph, line = ev.currentTarget.line, onlyThis = line.shown;735 if (onlyThis)736 for (var l = 0; l < g.lines.length; l++)737 if (g.lines[l] != line && g.lines[l].shown) {738 onlyThis = false;739 break;740 }741 for (var l = 0; l < g.lines.length; l++) {742 g.lines[l].shown = onlyThis || (g.lines[l] == line);743 drawCheck(g.lines[l].legendCheck, g.lines[l].hexColor, g.lines[l].hexColor2, g.lines[l].shown, g.lines[l] == line);744 }745 g.updateLines();746 clearSelection();747 return cancelEvent(ev);748 },749 showDots: function(ev) {750 var g = ((ev && ev.currentTarget) ? ev.currentTarget.graph : this);751 if (g.params.bar_chart) {752 g.highlightBar(ev);753 return;754 }755 var nearTime = -1, nnd = 0, cx = g.getXValue(ev.pageX, true);756 var ccx = ev.pageX - getXY(g.zinView)[0], ccy = ev.pageY - getXY(g.zinView)[1];757 var max_coltext = [0, 0];758 var activeLine = -1;759 var ctx = getContext(g.dotsLayer);760 ctx.clearRect(0, 0, g.viewWidth, g.viewHeight);761 for (var l = 0; l < g.lines.length; l++) {762 var ni = -1, nd = 0;763 if (g.lines[l].shown) {764 for (var i = g.lines[l].stIdx; i <= g.lines[l].enIdx; i++)765 if (g.lines[l].d[i].x >= g.leftTime && g.lines[l].d[i].x <= g.rightTime && (ni == -1 || nd > Math.abs(g.lines[l].d[i].x - cx))) {766 ni = i;767 nd = Math.abs(g.lines[l].d[i].x - cx);768 }769 }770 if (ni > -1) {771 var dot = g.lines[l].d[ni],772 dotX = (dot.x - g.leftTime) * g.xfactorIn,773 dotY = g.viewHeight - (g.isNegative ? (34 + (dot.y - g.localBottom) * g.yfactorIn) : (25 + (dot.y - (g.adjust ? g.localBottom : 0)) * g.yfactorIn));774 g.lines[l].dot.posX = dotX;775 g.lines[l].dot.posY = dotY;776 if (ccx >= dotX - 7 && ccx <= dotX + 9 &&777 ccy >= dotY - 7 && ccy <= dotY + 9) {778 activeLine = l;779 }780 if (nearTime == -1 || nd < nnd) {781 nnd = nd;782 nearTime = g.lines[l].d[ni].x;783 }784 ctx.fillStyle = g.lines[l].hexColor;785 ctx.beginPath();786 ctx.arc(dotX, dotY, 3, 0, Math.PI*2, true);787 ctx.fill();788 if (!isVisible(g.lines[l].dotLabel) || !g.lines[l].dotLabel.dot || g.lines[l].dotLabel.dot.x != dot.x || parseInt(g.lines[l].dot.style.left) != Math.floor(dotX)) {789 g.lines[l].dotLabel.innerHTML = dot.l ? dot.l : formatValue(dot.y) + g.params.yunits;790 var labelW = getSize(g.lines[l].dotLabel)[0];791 var pos = Math.max(Math.min(-labelW / 2.0, -labelW + g.viewWidth - dotX - 2), 2 - dotX);792 g.lines[l].dotLabel.dot = dot;793 g.lines[l].dotLabel.pos = Math.floor(pos);794 g.lines[l].dotLabel.w = labelW;795 setStyle(g.lines[l].dot, {796 left: Math.floor(dotX) + "px",797 top: Math.floor(dotY) + "px"});798 setStyle(g.lines[l].dotLabel, {799 top: ((g.lines[l].dot.posY > 26) ? -26 : 6) + "px",800 left: g.lines[l].dotLabel.pos + "px"});801 }802 g.lines[l].legendBox.innerHTML = formatValue(dot.y) + g.params.yunits;803 g.lines[l].legendBox.style.display = 'block';804 } else {805 g.lines[l].legendBox.style.display = 'none';806 }807 if (g.lines[l].legendBox.style.left == '40px') { // label position fix in legend808 var col = l < g.lines.length / 2 ? 0 : 1;809 max_coltext[col] = Math.max(max_coltext[col], getSize(g.lines[l].legend.children[1])[0]);810 }811 }812 if (!g.smoothLines || !tooltips) {813 activeLine = -1;814 }815 for (var l = 0; l < g.lines.length; l++) {816 if (!g.lines[l].shown) {817 hide(g.lines[l].dot);818 continue;819 }820 if (activeLine == l) {821 g.showDotTT(l);822 } else if (activeLine == -1) {823 if (g.activeLine == null || g.activeLine == g.lines[l]) {824 show(g.lines[l].dot);825 } else {826 hide(g.lines[l].dot);827 }828 } else {829 hide(g.lines[l].dot);830 }831 }832 if (max_coltext[0] || max_coltext[1]) {833 for (var l = 0; l < g.lines.length; l++) {834 var col = l < g.lines.length / 2 ? 0 : 1;835 if (max_coltext[col]) {836 g.lines[l].legendBox.style.left = (max_coltext[col] + 40) + 'px';837 }838 }839 }840 if (activeLine == -1 && tooltips) {841 tooltips.hide(g.mainLayout, {fasthide: 1});842 }843 if (nearTime > -1 && isVisible(g.title))844 g.title.innerHTML = fullDate(nearTime, g.params);845 },846 hideDots: function(ev) {847 var g = (ev.currentTarget ? ev.currentTarget.graph : this), vwPos = getXY(g.zinView);848 if (ev.pageX >= vwPos[0] && ev.pageX < vwPos[0] + g.viewWidth && ev.pageY >= vwPos[1] && ev.pageY < vwPos[1] + g.viewHeight) return;849 for (var l = 0; l < g.lines.length; l++) {850 hide(g.lines[l].dot);851 if(g.lines[l].sum) {852 g.lines[l].legendBox.innerHTML = formatValue(g.lines[l].sum) + g.params.yunits;853 } else {854 hide(g.lines[l].legendBox);855 }856 }857 var ctx = getContext(g.dotsLayer);858 ctx.clearRect(0, 0, g.viewWidth, g.viewHeight);859 g.title.innerHTML = fullDate(g.localLeft) + (g.localRight > g.localLeft ? ' &ndash; ' + fullDate(g.localRight) : '');860 if (tooltips) {861 tooltips.hide(g.mainLayout, {fasthide: 1});862 }863 },864 highlightBar: function(ev) {865 var g = ((ev && ev.currentTarget) ? ev.currentTarget.graph : this);866 var cx = (ev.pageX - getXY(g.zinView)[0]);867 var cy = (ev.pageY - getXY(g.zinView)[1]);868 var ctx = getContext(g.dotsLayer);869 ctx.clearRect(0, 0, g.viewWidth, g.viewHeight);870 var activeLine = activeBar = -1;871 for (var l = 0; l < g.lines.length; l++) {872 for (var i = 0; i < g.lines[l].d.length; i++) {873 var nx = getBarXValue(0, g.xstep, g.barsWidth, l, g.lines[l].d[i].x);874 var ny = g.viewHeight - (g.isNegative ? (34 + (g.lines[l].d[i].y - g.localBottom) * g.yfactorIn) : (25 + (g.lines[l].d[i].y - (g.adjust ? g.localBottom : 0)) * g.yfactorIn));875 if (cx > nx && cx <= nx + g.barsWidth && cy >= ny) {876 activeLine = l;877 activeBar = i;878 break;879 }880 }881 }882 for (var l = 0; l < g.lines.length; l++) {883 if (activeBar > -1) {884 var dot = g.lines[l].d[activeBar],885 dotX = getBarXValue(0, g.xstep, g.barsWidth, l, dot.x),886 dotY = g.viewHeight - (g.isNegative ? (34 + (dot.y - g.localBottom) * g.yfactorIn) : (25 + (dot.y - (g.adjust ? g.localBottom : 0)) * g.yfactorIn)),887 val = formatValue(dot.y) + g.params.yunits;888 if (activeLine == l) {889 ctx.fillStyle = g.lines[l].hexColor3;890 ctx.fillRect(dotX, dotY, g.barsWidth, g.viewHeight);891 g.showTT(dotX, dotY, dot.l ? dot.l : val + '<br>' + g.lines[l].name + ', ' + this.params.bar_chart[activeBar]);892 g.lines[l].legendBox.style.display = 'block';893 g.lines[l].legendBox.innerHTML = val;894 } else {895 g.lines[l].legendBox.style.display = 'block';896 g.lines[l].legendBox.innerHTML = val;897 }898 } else if(g.lines[l].sum) {899 g.lines[l].legendBox.innerHTML = formatValue(g.lines[l].sum) + g.params.yunits;900 } else {901 g.lines[l].legendBox.style.display = 'none';902 }903 }904 if (activeBar == -1 && tooltips) {905 tooltips.hide(g.mainLayout, {fasthide: 1});906 }907 },908 expandLabel: function(ev) {909 var g = ev.currentTarget.graph, line = ev.currentTarget.line, dot = line.dotLabel.dot, pos = line.dotLabel.pos;910 if (!g.smoothLines) {911 var text = '';912 if (line.l) {913 text += langNumeric(dot.y, line.l, true);914 } else {915 text += (dot.l ? dot.l : formatValue(dot.y)) + ' ' + line.name;916 }917 line.dotLabel.innerHTML = text;918 var sz = getSize(line.dotLabel)[0];919 if (pos + sz + line.dot.posX > g.viewWidth) {920 line.dotLabel.innerHTML = line.name + ' ' + (dot.l ? dot.l : formatValue(dot.y));921 line.dotLabel.style.left = pos - (sz - line.dotLabel.w) + "px";922 } else923 line.dotLabel.style.left = pos + "px";924 for (var l = 0; l < g.lines.length; l++)925 g.lines[l].dotLabel.style.zIndex = (g.lines[l] == line) ? 1000 : 200;926 }927 return cancelEvent(ev);928 },929 chideLabel: function(ev) {930 var g = ev.currentTarget.graph, line = ev.currentTarget.line,931 locX = ev.pageX - (getXY(line.dot)[0] + line.dotLabel.pos);932 if (locX < 0 || locX > line.dotLabel.w)933 g.hideLabel(ev);934 },935 hideLabel: function(ev) {936 var g = ev.currentTarget.graph, line = ev.currentTarget.line, dot = line.dotLabel.dot, pos = line.dotLabel.pos;937 line.dotLabel.innerHTML = dot.l ? dot.l : formatValue(dot.y);938 line.dotLabel.style.left = pos + "px";939 },940 selectLine: function(ev) {941 var g = ev.currentTarget.graph, line = ev.currentTarget.line;942 g.activeLine = line;943 g.redrawWindow();944 g.showDots(ev);945 return cancelEvent(ev);946 },947 deselectLine: function(ev) {948 this.activeLine = null;949 this.redrawWindow();950 this.showDots(ev);951 return cancelEvent(ev);952 },953 showDotTT: function(lineIndex) {954 if (!this.smoothLines) {955 return;956 }957 if (this.ttLine != lineIndex) {958 tooltips.hide(this.mainLayout, {fasthide: 1});959 }960 var line = this.lines[lineIndex], dot = line.dotLabel.dot;961 var text = '';962 if (line.l) {963 text += langNumeric(dot.y, line.l, true);964 } else {965 text += (dot.l ? dot.l : formatValue(dot.y)) + ' &ndash; ' + line.name;966 }967 text += '<br/><span style="font-weight: normal; font-size: 0.9em;">' + fullDate(dot.x, this.params) + '</span>';968 for (var l = 0; l < this.lines.length; l++) {969 hide(this.lines[l].dot);970 }971 this.showTT(line.dot.posX + 1, line.dot.posY - 5, text);972 this.ttLine = lineIndex;973 var ctx = getContext(this.dotsLayer);974 ctx.strokeStyle = line.hexColor;975 ctx.globalAlpha = 0.3;976 ctx.lineWidth = 4;977 ctx.beginPath();978 ctx.arc(line.dot.posX, line.dot.posY, 6.5, 0, Math.PI*2, true);979 ctx.stroke();980 ctx.globalAlpha = 1;981 },982 showTT: function(dotX, dotY, text) {983 var xy = getXY(this.zinLayout);984 xy[0] += dotX - 9 + (this.params.bar_chart ? this.barsWidth / 2 : 0);985 xy[1] += dotY;986 xy[0] = Math.floor(xy[0]); xy[1] = Math.floor(xy[1]);987 if (this.mainLayout.tt && this.mainLayout.tt.container && (!isVisible(this.mainLayout.tt.container) || !this.dotLabelXY || this.dotLabelXY[0] != xy[0])) {988 geByClass1('tt_text', this.mainLayout.tt.container).innerHTML = text;989 tooltips.hide(this.mainLayout, {fasthide: 1});990 tooltips.show(this.mainLayout, {forcexy: xy});991 this.dotLabelXY = xy;992 }993 },994 onClickMenu: function(ev) {995 var g = ev.data.graph;996 for (var i in g.menu.children) {997 if (g.menu.children[i].nodeType != 1) continue;998 if (i == ev.data.clickNode) {999 addClass(g.menu.children[i], 'graph_menu_item_sel');1000 if (!ev.data.alt_graph) {1001 g.loadGraph(i);1002 if (isVisible(g.graphDiv.id.replace(/_graph$/, '') + '_alt_graph')) {1003 hide(g.graphDiv.id.replace(/_graph$/, '') + '_alt_graph');1004 for (i in g.mainLayout.children) {1005 if (g.mainLayout.children[i].nodeType == 1 && g.mainLayout.children[i].mh) {1006 show(g.mainLayout.children[i]);1007 }1008 }1009 g.mainLayout.style.width = g.viewWidth + "px";1010 show(g.vScale);1011 }1012 } else {1013 hide(g.vScale);1014 for (i in g.mainLayout.children) {1015 if (g.mainLayout.children[i].nodeType != 1 || g.mainLayout.children[i] == g.menu || !isVisible(g.mainLayout.children[i])) continue;1016 g.mainLayout.children[i].mh = 1;1017 hide(g.mainLayout.children[i]);1018 }1019 g.mainLayout.style.width = g.viewWidth + g.scaleWidth + "px";1020 show(g.graphDiv.id.replace(/_graph$/, '') + '_alt_graph');1021 }1022 } else {1023 removeClass(g.menu.children[i], 'graph_menu_item_sel');1024 }1025 }1026 cancelEvent(ev);1027 },1028 // some lines were shown or hidden1029 updateLines: function() {1030 this.redrawWindow();1031 // redraw zoutView1032 var ctx = getContext(this.zoutView);1033 ctx.clearRect(0, 0, this.viewWidth, 40);1034 if (this.isNegative)1035 drawLines(ctx, 0, 4, this.viewWidth, 32, this.lines, this.minTime, this.maxTime, this.xfactorOut, this.yfactorOut, -this.localBottom, true, null, false);1036 else1037 drawLines(ctx, 0, 4, this.viewWidth, 36, this.lines, this.minTime, this.maxTime, this.xfactorOut, this.yfactorOut, 0, true, null, false);1038 },1039 // window borders were moved1040 redrawWindow: function() {1041 // move window1042 this.xfactorOut = this.viewWidth / (this.maxTime - this.minTime);1043 this.xfactorIn = this.viewWidth / (this.rightTime - this.leftTime);1044 var leftOut = Math.round((this.leftTime - this.minTime) * this.xfactorOut),1045 rightOut = Math.round((this.rightTime - this.minTime) * this.xfactorOut) - 1;1046 leftOut = Math.min(leftOut, this.viewWidth - 4);1047 rightOut = Math.max(leftOut + 1, rightOut);1048 setStyle(this.lMask, {1049 width: leftOut + "px",1050 display: (leftOut > 0 ? "block" : "none")});1051 setStyle(this.zoutWindow, {1052 left: leftOut + "px",1053 width: (rightOut - leftOut - 1) + "px"});1054 setStyle(this.rMask, {1055 left: (rightOut + 1) + "px",1056 width: (this.viewWidth - rightOut - 2) + "px",1057 display: (this.viewWidth - rightOut - 2 > 0 ? "block" : "none")});1058 this.lHandle.style.left = Math.max(0, leftOut - 4) + "px";1059 this.rHandle.style.left = Math.min(this.viewWidth - 8, rightOut - 4) + "px";1060 // get visible data1061 var localMax = (this.adjust ? -1e9 : 0), localMin = (this.adjust ? 1e9 : 0), outMax = 0, outMin = 0, dotsVisible = 0;1062 this.localLeft = this.rightTime;1063 this.localRight = this.leftTime;1064 for (var l = 0; l < this.lines.length; l++) {1065 var line = this.lines[l];1066 if (line.shown) {1067 var stIdx = 0, enIdx = line.d.length - 1, ps = line.d;1068 while ((stIdx < ps.length - 1) && (ps[stIdx + 1].x < this.leftTime)) stIdx++;1069 while ((enIdx > 1) && (ps[enIdx - 1].x > this.rightTime)) enIdx--;1070 line.stIdx = stIdx;1071 line.enIdx = enIdx;1072 if (enIdx >= stIdx && (ps[enIdx].x >= this.leftTime) && (ps[stIdx].x <= this.rightTime)) {1073 for (var i = stIdx; i <= enIdx; i++) {1074 localMax = Math.max(localMax, ps[i].y);1075 localMin = Math.min(localMin, ps[i].y);1076 this.localLeft = Math.min(this.localLeft, ps[i].x);1077 this.localRight = Math.max(this.localRight, ps[i].x);1078 }1079 dotsVisible = Math.max(dotsVisible, enIdx - stIdx);1080 }1081 outMax = Math.max(outMax, line.maxValue);1082 outMin = Math.min(outMax, line.minValue);1083 }1084 }1085 if (this.lines.length == 0 || (localMax - localMin < 1e-6)) {1086 this.isNegative = false;1087 this.ystep = 1;1088 this.localTop = 5;1089 this.localBottom = 0;1090 } else {1091 this.isNegative = (localMin < -1e-6);1092 this.ystep = Math.max(getYStep(localMax - (this.adjust ? localMin : 0), this.params.int_scale), this.isNegative ? getYStep(-localMin, this.params.int_scale) : 1e-6);1093 this.localTop = (Math.ceil(localMax / this.ystep)) * this.ystep;1094 this.localBottom = -(Math.ceil(- localMin / this.ystep)) * this.ystep;1095 }1096 this.yfactorIn = (this.viewHeight - (this.isNegative ? 43 : 34)) / (this.localTop - this.localBottom);1097 this.yfactorOut = this.minValue < -1e-6 ? (32 / (outMax - outMin)): (36 / outMax);1098 this.smoothLines = dotsVisible < 30 ? true : false;1099 // update title1100 this.title.innerHTML = fullDate(this.localLeft) + (this.localRight > this.localLeft ? ' &ndash; ' + fullDate(this.localRight) : '');1101 // redraw zinView1102 var ctx = getContext(this.zinView);1103 var ctxS = getContext(this.vScaleView);1104 ctx.clearRect(0, 0, this.viewWidth, this.viewHeight);1105 ctx.fillStyle = '#fafafa';1106 ctx.fillRect(0, 9, this.viewWidth, this.viewHeight - 9);1107 ctxS.clearRect(0, 0, this.scaleWidth, this.viewHeight);1108 // y scale1109 ctx.lineWidth = 1;1110 ctx.strokeStyle = '#e6eaf0';1111 ctxS.font = '11px tahoma, arial, verdana, sans-serif, Lucida Sans';1112 ctxS.fillStyle = '#36638e';1113 ctxS.textAlign = 'right';1114 ctxS.textBaseline = 'middle';1115 for (var gridY = this.localBottom; gridY < this.localTop + this.ystep; gridY += this.ystep) {1116 var cy = this.viewHeight - 24.5 - Math.round((gridY - this.localBottom) * this.yfactorIn) - (this.isNegative ? 9 : 0);1117 if (gridY < this.localTop) {1118 ctx.strokeStyle = (this.isNegative && Math.abs(gridY) < 1e-8) ? '#9fb1c4' : '#e6eaf0';1119 ctx.beginPath();1120 ctx.moveTo(0, cy);1121 ctx.lineTo(this.viewWidth, cy);1122 ctx.stroke();1123 }1124 ctxS.fillText(formatValue(gridY), this.scaleWidth - 6, cy);1125 }1126 // x scale1127 ctx.fillStyle = '#ffffff';1128 ctx.fillRect(0, this.viewHeight - 25, this.viewWidth, 25);1129 ctx.font = '11px tahoma, arial, verdana, sans-serif, Lucida Sans';1130 ctx.fillStyle = '#36638e';1131 ctx.textAlign = 'center';1132 ctx.textBaseline = 'top';1133 var fin = false;1134 var i_start = this.params.show_time || this.params.show_minutes ? 0 : 6;1135 for (var i = i_start; (i < 100) && !fin; i++) {1136 if (i < xscales.length) {1137 var sc = xscales[i];1138 } else {1139 var yearCnt = [2, 5, 10][(i - xscales.length + 1) % 3] * Math.pow(10, Math.floor((i - xscales.length + 1) / 3));1140 var sc = {base: yearCnt * YEAR, format: ['yearFull'], sub: Math.max(1, yearCnt / 10) * YEAR};1141 }1142 var baseWidth = sc.base * this.xfactorIn;1143 for (var j = 0; j < sc.format.length; j++) {1144 var formatWidth = ctx.measureText(formatDate(-1, sc.format[j])).width;1145 if (formatWidth < baseWidth) {1146 var sTm = incDate(this.leftTime, sc.base, -2);1147 var eTm = incDate(this.rightTime, sc.base, 2);1148 ctx.strokeStyle = '#e6eaf0';1149 if (sc.sub != -1)1150 for (var tm = sTm; tm <= eTm; tm = incDate(tm, sc.sub, 1)) {1151 var ax = Math.floor((tm - this.leftTime) * this.xfactorIn) + 0.5;1152 ctx.beginPath();1153 ctx.moveTo(ax, this.viewHeight - 24);1154 ctx.lineTo(ax, this.viewHeight - 22);1155 ctx.stroke();1156 }1157 for (var tm = sTm; tm <= eTm; tm = incDate(tm, sc.base, 1)) {1158 if (incDate(tm, sc.base, 1) < tm + HOUR)1159 throw "Erroneous date increase";1160 var ax = Math.floor((tm - this.leftTime) * this.xfactorIn) + 0.5;1161 //ctx.strokeStyle = '#e6eaf0';1162 ctx.beginPath();1163 ctx.moveTo(ax, 9);1164 ctx.lineTo(ax, this.viewHeight - 24);1165 ctx.stroke();1166 //ctx.strokeStyle = '#9fb1c4';1167 ctx.beginPath();1168 ctx.moveTo(ax, this.viewHeight - 24);1169 if (sc.sub == -1)1170 ctx.lineTo(ax, this.viewHeight);1171 else1172 ctx.lineTo(ax, this.viewHeight - 20);1173 ctx.stroke();1174 var textpos = ax;1175 if (sc.sub == -1)1176 textpos += (baseWidth / 2.0);1177 if (textpos - formatWidth / 2.0 > 0 && textpos + formatWidth / 2.0 < this.viewWidth)1178 ctx.fillText(replaceEntities(formatDate(tm, sc.format[j])), textpos, this.viewHeight - 19);1179 }1180 fin = true;1181 break;1182 }1183 }1184 if (fin) break;1185 }1186 ctx.strokeStyle = '#e6eaf0';1187 ctx.lineWidth = 1;1188 ctx.strokeRect(0, this.viewHeight - 24.5, this.viewWidth - 1, 26);1189 ctx.strokeStyle = '#f0f2f5';1190 ctx.globalAlpha = 0.5;1191 ctx.beginPath();1192 ctx.moveTo(1, this.viewHeight - 25.5);1193 ctx.lineTo(this.viewWidth, this.viewHeight - 25.5);1194 ctx.stroke();1195 ctx.globalAlpha = 1;1196 // graph1197 if (this.isNegative)1198 drawLines(ctx, 0, 9, this.viewWidth, this.viewHeight - 43, this.lines, this.leftTime, this.rightTime, this.xfactorIn, this.yfactorIn, -this.localBottom, false, this.activeLine, this.smoothLines);1199 else1200 drawLines(ctx, 0, 9, this.viewWidth, this.viewHeight - 34, this.lines, this.leftTime, this.rightTime, this.xfactorIn, this.yfactorIn, this.adjust ? -this.localBottom : 0, false, this.activeLine, this.smoothLines);1201 ctx.strokeStyle = '#b8c5d4';1202 ctx.beginPath();1203 ctx.moveTo(0, 9);1204 ctx.lineTo(0, this.viewHeight + 0.5);1205 if (!isVisible(this.zoutLayout)) {1206 ctx.lineTo(this.viewWidth, this.viewHeight + 0.5);1207 }1208 ctx.stroke();1209 },1210 destroyDots: function(data) {1211 for (var l = 0; l < this.lines.length; l++) {1212 var line = this.lines[l];1213 removeEventEx(line.dotLabel, 'mouseover', this.expandLabel);1214 removeEventEx(line.dotLabel, 'mousemove', this.chideLabel);1215 removeEventEx(line.dotLabel, 'mouseout', this.hideLabel);1216 removeEventEx(line.dot, 'click', this.selectLine);1217 removeEventEx(line.legend, 'mouseover', this.overLegend);1218 removeEventEx(line.legend, 'mouseout', this.outLegend);1219 removeEventEx(line.legend, 'click', this.toggleLegend);1220 removeEventEx(line.legend, 'dblclick', this.chooseLegend);1221 if (line.dot) {1222 this.zinLayout.removeChild(line.dot);1223 }1224 if (line.legend.parentNode) {1225 line.legend.parentNode.removeChild(line.legend);1226 }1227 removeData(line.dotLabel);1228 removeData(line.dot);1229 removeData(line.legend);1230 }1231 },1232 initLoadedData: function(text) {1233 var _t = this;1234 this.message.innerHTML = cur.graphVars['lang.data_empty'];1235 setStyle(this.message, {1236 display: 'none',1237 backgroundColor: '#eeeeee',1238 border: '1px solid #5f7d9d'});1239 try {1240 var d = eval(text);1241 _t.loadGraph = function(index) {1242 _t.setData(d[index] || [], isArray(_t.params.adjust) ? _t.params.adjust[index] : _t.params.adjust);1243 }1244 _t.noData = (d.length == 0 || (d.length == 1 && d[0].length == 0));1245 _t.setData(_t.params.multiple ? d[0] : d, isArray(_t.params.adjust) ? _t.params.adjust[0] : _t.params.adjust);1246 } catch(e){1247 _t.setData([], false);1248 }1249 },1250 setData: function(data, adjust) {1251 var _t = this;1252 if (typeof(data) == 'string') {1253 this.zoutLayout.style.display = 'none';1254 this.vScale.style.display = 'none';1255 this.title.style.display = 'none';1256 //this.message.innerHTML = cur.graphVars['lang.loading'];1257 this.message.innerHTML = '<img src="/images/progress7.gif" />';1258 setStyle(this.message, {1259 display: 'block',1260 backgroundColor: 'transparent',1261 border: 'none',1262 left: Math.round((this.viewWidth - 149) / 2) + 'px',1263 top: Math.round((this.viewHeight - 8) / 2) + 'px'});1264 if (window.ajax) {1265 ajax.post(data, {html5: 1}, {onDone: function(text) {1266 _t.initLoadedData(text);1267 }});1268 } else {1269 Ajax.Post({url:data.split('%26').join('&'), query: {html5: 1}, onDone: function(res, text) {1270 _t.initLoadedData(text);1271 }});1272 }1273 return;1274 }1275 if (this.params.bar_chart) {1276 this.setBarChartData(data, adjust);1277 return;1278 }1279 if (this.lines.length == data.length) {1280 var showOverride = [];1281 for (var l = 0; l < this.lines.length; l++)1282 if (this.lines[l].name.toLowerCase() != data[l].name.toLowerCase()) {1283 showOverride = null;1284 break;1285 } else1286 showOverride[l] = this.lines[l].shown;1287 }1288 // remove old lines1289 this.destroyDots();1290 this.adjust = adjust;1291 this.minValue = 100;1292 this.maxValue = 1;1293 this.minAbsValue = 1.0;1294 this.minTime = 2147483647;1295 this.maxTime = 0;1296 // prepare lines1297 this.lines = [];1298 var maxDotsCount = 0;1299 var max_coltext = [0, 0];1300 var dotsVisible = 0;1301 this.MAXSCALE = 2 * DAY + HOUR;1302 this.XSTEP = DAY;1303 for (var l = 0; l < data.length; l++) {1304 var line = extend({a: true}, data[l]);1305 if (!line.d || !line.d.length) {1306 continue;1307 }1308 if (!line.c || 1) {1309 line.c = colors[l % colors.length];1310 }1311 var r = (line.c & 0xFF0000) >> 16;1312 var g = (line.c & 0x00FF00) >> 8;1313 var b = (line.c & 0x0000FF);1314 r = Math.min(255, (r >> 2) + 192);1315 g = Math.min(255, (g >> 2) + 192);1316 b = Math.min(255, (b >> 2) + 192);1317 line.c2 = (r << 16) | (g << 8) | (b);1318 line.hexColor = line.c.toString(16);1319 line.hexColor = '#' + '000000'.substr(0, 6 - line.hexColor.length) + line.hexColor;1320 line.hexColor2 = line.c2.toString(16);1321 line.hexColor2 = '#' + '000000'.substr(0, 6 - line.hexColor.length) + line.hexColor2;1322 line.minValue = 100;1323 line.maxValue = 1;1324 // make dot1325 line.dot = ce('div', {1326 innerHTML: '<div style="color: white;\1327 -webkit-border-radius: 2px; -khtml-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;\1328 background-color: ' + line.hexColor + '; position: absolute; padding: 2px 3px 3px 3px; white-space: nowrap; cursor: default;"></div>'1329 }, {1330 position: 'absolute',1331 display: 'none'1332 });1333 line.dotLabel = line.dot.children[0];1334 this.zinLayout.appendChild(line.dot);1335 addEventEx(this, line.dotLabel, 'mouseover', this.expandLabel);1336 addEventEx(this, line.dotLabel, 'mousemove', this.chideLabel);1337 addEventEx(this, line.dotLabel, 'mouseout', this.hideLabel);1338 addEventEx(this, line.dotLabel, 'mousedown', cancelEvent);1339 //addEventEx(this, line.dotLabel, 'click', this.selectLine);1340 //addEventEx(this, line.dot, 'click', this.selectLine);1341 line.dotLabel.line = line;1342 line.dot.line = line;1343 // make legend1344 var col_width = Math.floor(this.viewWidth / 2);1345 line.legend = ce('div', {1346 innerHTML: '<canvas width="20" height="20" style="vertical-align: middle; padding-right: 2px;"></canvas>' +1347 '<span title="' + clean(line.name) + '">' + ((line.name.length >= 30) ? line.name.substr(0, 27) + '...' : line.name) + '</span>' +1348 '<div style="position: absolute; top: 0px; left: 0px; padding: 2px 3px; white-space: nowrap; display: none; background: ' + line.hexColor + '; color: white; -webkit-border-radius: 2px; -khtml-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;"></div>'1349 }, {1350 color: line.hexColor,1351 position: 'relative',1352 cursor: 'pointer'1353 });1354 line.shown = showOverride ? showOverride[l] : line.a;1355 line.legendCheck = line.legend.children[0];1356 drawCheck(line.legendCheck, line.hexColor, line.hexColor2, line.shown, false);1357 line.legendBox = line.legend.children[2];1358 addEventEx(this, line.legend, 'mouseover', this.overLegend);1359 addEventEx(this, line.legend, 'mouseout', this.outLegend);1360 addEventEx(this, line.legend, 'click', this.toggleLegend);1361 addEventEx(this, line.legend, 'dblclick', this.chooseLegend);1362 line.legend.line = line;1363 for (var i = 0; i < line.d.length; i++) {1364 line.d[i].x = parseInt(line.d[i].x || line.d[i]["0"] || DEF_TIME);1365 line.d[i].y = parseFloat(line.d[i].y || line.d[i]["1"] || 0);1366 line.d[i].s = line.d[i].s || line.d[i]["2"] || null;1367 line.d[i].l = line.d[i].l || line.d[i]["3"] || null;1368 line.maxValue = Math.max(line.maxValue, line.d[i].y);1369 line.minValue = Math.min(line.minValue, line.d[i].y);1370 this.maxValue = Math.max(this.maxValue, line.d[i].y);1371 this.minValue = Math.min(this.minValue, line.d[i].y);1372 this.minAbsValue = Math.min(this.minAbsValue, Math.abs(line.d[i].y));1373 this.maxTime = Math.max(this.maxTime, line.d[i].x);1374 this.minTime = Math.min(this.minTime, line.d[i].x);1375 if (i > 0 && i < 10 && Math.abs(line.d[i].x - line.d[i - 1].x) > 1) {1376 this.MAXSCALE = Math.min(this.MAXSCALE, 2.5 * Math.abs(line.d[i].x - line.d[i - 1].x));1377 this.XSTEP = (this.XSTEP + Math.abs(line.d[i].x - line.d[i - 1].x)) / 2;1378 }1379 if (this.leftTime != -1 && line.d[i].x >= this.leftTime && line.d[i].x <= this.rightTime) {1380 dotsVisible++;1381 }1382 }1383 maxDotsCount = Math.max(maxDotsCount, line.d.length);1384 // probably not needed1385 line.d.sort(function(l1, l2) {1386 return (l1.x - l2.x);1387 });1388 this.lines.push(line);1389 }1390 for (var i = 0; i < this.lines.length; i++) {1391 var line = this.lines[i];1392 if (i < this.lines.length / 2) {1393 this.column[0].appendChild(line.legend);1394 max_coltext[0] = Math.max(max_coltext[0], getSize(line.legend.children[1])[0]);1395 } else {1396 this.column[1].appendChild(line.legend);1397 max_coltext[1] = Math.max(max_coltext[1], getSize(line.legend.children[1])[0]);1398 }1399 }1400 for (var i = 0; i < this.lines.length; i++) {1401 if (i < this.lines.length / 2) {1402 this.lines[i].legendBox.style.left = (max_coltext[0] + 40) + 'px';1403 } else {1404 this.lines[i].legendBox.style.left = (max_coltext[1] + 40) + 'px';1405 }1406 }1407 var noData = this.noData || (this.lines.length == 0 && !this.params.multiple);1408 this.zoutLayout.style.display = noData ? 'none' : 'block';1409 this.vScale.style.display = noData ? 'none' : 'block';;1410 this.title.style.display = noData ? 'none' : 'block';1411 if (this.lines.length == 0) {1412 this.maxTime = incDate(DEF_TIME, DAY, 0);1413 this.minTime = this.maxTime - 7 * DAY;1414 } else {1415 this.maxTime += this.XSTEP / 5;1416 }1417 if (this.params.no_zoom) {1418 this.leftTime = this.minTime;1419 this.rightTime = this.maxTime;1420 this.allowZoom(false);1421 } else {1422 if (this.maxTime - this.minTime < 4 * DAY && maxDotsCount < 10) {1423 this.minTime -= 2 * DAY;1424 this.maxTime += 2 * DAY;1425 this.allowZoom(false);1426 } else {1427 this.allowZoom(true);1428 }1429 this.showEmpty(noData);1430 if (this.leftTime == -1 || dotsVisible < 10) {1431 var st = 10 * DAY;1432 if (this.XSTEP > 3 * MONTH) {1433 st = 2 * YEAR;1434 } else if (this.XSTEP > 10 * DAY) {1435 st = 3 * MONTH;1436 }1437 this.leftTime = (this.params.show_all || maxDotsCount < 10) ? this.minTime : Math.max(this.minTime, this.maxTime - st);1438 this.rightTime = this.maxTime;1439 } else {1440 this.leftTime = Math.max(this.minTime, Math.min(this.maxTime, this.leftTime));1441 this.rightTime = Math.max(this.minTime, Math.min(this.maxTime, this.rightTime));1442 }1443 }1444 var ctx = getContext(this.vScaleView);1445 ctx.font = '11px tahoma, arial, verdana, sans-serif, Lucida Sans';1446 var maxWidth = Math.max(1447 ctx.measureText(formatValue(this.maxValue + getYStep(this.maxValue, this.params.int_scale))).width,1448 Math.max( ctx.measureText(formatValue(getYStep(this.minAbsValue, this.params.int_scale))).width,1449 ctx.measureText(formatValue(this.minValue)).width));1450 this.scaleWidth = (this.lines.length == 0) ? 0 : (maxWidth + 25);1451 this.scaleWidth = Math.floor(this.scaleWidth);1452 this.vScale.style.width = this.scaleWidth + "px";1453 this.vScale.style.height = this.height + "px";1454 this.vScaleView.width = this.scaleWidth;1455 this.vScaleView.height = this.height;1456 this.viewWidth = (this.width - this.scaleWidth);1457 this.mainLayout.style.width = this.viewWidth + "px";1458 this.zinView.width = this.viewWidth;1459 this.dotsLayer.width = this.viewWidth;1460 this.zoutView.width = this.viewWidth;1461 this.column[0].style.width = Math.floor(this.viewWidth / 2) + "px";1462 this.column[1].style.width = Math.floor(this.viewWidth / 2) + "px";1463 this.activeLine = null;1464 this.updateLines();1465 },1466 setBarChartData: function(data, adjust) {1467 // remove old lines1468 this.destroyDots();1469 this.adjust = adjust;1470 this.minValue = 100;1471 this.maxValue = 1;1472 this.minAbsValue = 1.0;1473 // prepare lines1474 this.lines = [];1475 var max_coltext = [0, 0];1476 for (var l = 0; l < data.length; l++) {1477 var line = extend({a: true}, data[l]);1478 if (!line.d || !line.d.length) {1479 continue;1480 }1481 if (!line.c) {1482 var colors_row = l % 4;1483 colors_row = colors_row == 1 ? 3 : colors_row;1484 line.c = colors[(colors_row * 8 + Math.floor(l / 4)) % colors.length];1485 }1486 var r = (line.c & 0xFF0000) >> 16;1487 var g = (line.c & 0x00FF00) >> 8;1488 var b = (line.c & 0x0000FF);1489 r2 = Math.min(255, (r >> 2) + 192);1490 g2 = Math.min(255, (g >> 2) + 192);1491 b2 = Math.min(255, (b >> 2) + 192);1492 line.c2 = (r2 << 16) | (g2 << 8) | (b2);1493 r3 = Math.min(255, r - 16);1494 g3 = Math.min(255, g - 16);1495 b3 = Math.min(255, b - 16);1496 line.c3 = (r3 << 16) | (g3 << 8) | (b3);1497 line.hexColor = line.c.toString(16);1498 line.hexColor = '#' + '000000'.substr(0, 6 - line.hexColor.length) + line.hexColor;1499 line.hexColor2 = line.c2.toString(16);1500 line.hexColor2 = '#' + '000000'.substr(0, 6 - line.hexColor2.length) + line.hexColor2;1501 line.hexColor3 = line.c3.toString(16);1502 line.hexColor3 = '#' + '000000'.substr(0, 6 - line.hexColor3.length) + line.hexColor3;1503 line.minValue = 100;1504 line.maxValue = 1;1505 // make legend1506 line.legend = ce('div', {1507 innerHTML: '<canvas width="20" height="20" style="vertical-align: middle; padding-right: 2px;"></canvas>' +1508 '<span style="font-weight: bold;">' + ((line.name.length >= 30) ? line.name.substr(0, 27) + '...' : line.name) + '</span>' +1509 '<div style="position: absolute; top: 0px; left: 0px; padding: 2px 3px; white-space: nowrap; display: none; background: ' + line.hexColor2 + '; -webkit-border-radius: 2px; -khtml-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;"></div>'1510 }, {1511 color: line.hexColor,1512 position: 'relative',1513 cursor: 'default',1514 paddingLeft: '10px'1515 });1516 line.shown = true;1517 line.legendCheck = line.legend.children[0];1518 line.legendBox = line.legend.children[2];1519 var ctx = getContext(line.legendCheck);1520 ctx.fillStyle = ctx.strokeStyle = line.hexColor;1521 ctx.lineWidth = 4;1522 ctx.lineJoin = 'round';1523 ctx.strokeRect(4, 5, 9, 9);1524 ctx.fillRect(4, 5, 9, 9);1525 if (line.sum) {1526 line.legendBox.innerHTML = formatValue(line.sum) + this.params.yunits;1527 show(line.legendBox);1528 }1529 for (var i = 0; i < line.d.length; i++) {1530 line.d[i].x = line.d[i].x || line.d[i]["0"] || i;1531 line.d[i].y = parseFloat(line.d[i].y || line.d[i]["1"] || 0);1532 line.d[i].s = line.d[i].s || line.d[i]["2"] || null;1533 line.d[i].l = line.d[i].l || line.d[i]["3"] || null;1534 line.maxValue = Math.max(line.maxValue, line.d[i].y);1535 line.minValue = Math.min(line.minValue, line.d[i].y);1536 this.maxValue = Math.max(this.maxValue, line.d[i].y);1537 this.minValue = Math.min(this.minValue, line.d[i].y);1538 this.minAbsValue = Math.min(this.minAbsValue, Math.abs(line.d[i].y));1539 }1540 line.stInd = 0;1541 line.enIdx = line.d.length;1542 this.lines.push(line);1543 }1544 for (var i = 0; i < this.lines.length; i++) {1545 var line = this.lines[i];1546 if (i < this.lines.length / 2) {1547 this.column[0].appendChild(line.legend);1548 max_coltext[0] = Math.max(max_coltext[0], getSize(line.legend.children[1])[0]);1549 } else {1550 this.column[1].appendChild(line.legend);1551 max_coltext[1] = Math.max(max_coltext[1], getSize(line.legend.children[1])[0]);1552 }1553 }1554 for (var i = 0; i < this.lines.length; i++) {1555 var line = this.lines[i];1556 if (i < this.lines.length / 2) {1557 line.legendBox.style.left = (max_coltext[0] + 40) + 'px';1558 } else {1559 line.legendBox.style.left = (max_coltext[1] + 40) + 'px';1560 }1561 }1562 var noData = this.noData || (this.lines.length == 0 && !this.params.multiple);1563 this.zoutLayout.style.display = noData ? 'none' : 'block';1564 this.vScale.style.display = noData ? 'none' : 'block';;1565 this.showEmpty(noData);1566 this.zoutLayout.style.display = 'none';1567 this.title.style.display = 'none';1568 this.vScaleView.style.paddingTop = 0;1569 this.viewHeight = this.height - 24;1570 this.zinLayout.style.height = this.viewHeight + "px";1571 this.zinView.height = this.viewHeight;1572 this.dotsLayer.height = this.viewHeight - 25;1573 this.disable_zoom = true;1574 if (this.params.multiple && this.menu.parentNode == this.mainLayout) {1575 var menu = re(this.menu);1576 setStyle(menu, {position: 'absolute', right: '10px', top: '20px', zIndex: 1000});1577 this.zinLayout.insertBefore(menu, this.zinView);1578 }1579 var ctx = getContext(this.vScaleView);1580 ctx.font = '11px tahoma, arial, verdana, sans-serif, Lucida Sans';1581 var yUnits = this.params.yunits ? this.params.yunits : '';1582 var maxWidth = Math.max(1583 ctx.measureText(formatValue(this.maxValue + getYStep(this.maxValue, this.params.int_scale) + yUnits)).width, ctx.measureText(formatValue(getYStep(this.minAbsValue, this.params.int_scale) + yUnits)).width);1584 this.scaleWidth = (this.lines.length == 0) ? 0 : (maxWidth + 30);1585 this.scaleWidth = Math.floor(this.scaleWidth);1586 this.vScale.style.width = this.scaleWidth + "px";1587 this.vScale.style.height = this.height + "px";1588 this.vScaleView.width = this.scaleWidth;1589 this.vScaleView.height = this.height;1590 this.viewWidth = (this.width - this.scaleWidth);1591 this.mainLayout.style.width = this.viewWidth + "px";1592 this.zinView.width = this.viewWidth;1593 this.dotsLayer.width = this.viewWidth;1594 this.column[0].style.width = Math.floor(this.viewWidth / 2) + "px";1595 this.column[1].style.width = Math.floor(this.viewWidth / 2) + "px";1596 this.xstep = Math.floor(this.viewWidth / this.params.bar_chart.length);1597 this.barsWidth = Math.floor(this.xstep / (this.lines.length + 1));1598 this.barsWidth = Math.min(this.barsWidth, 25);1599 // draw window1600 if (this.lines.length == 0 || (this.maxValue - this.minValue < 1e-6)) {1601 this.isNegative = false;1602 this.ystep = 1;1603 this.localTop = 5;1604 this.localBottom = 0;1605 } else {1606 this.isNegative = (this.minValue < -1e-6);1607 this.ystep = Math.max(getYStep(this.maxValue - (adjust ? this.minValue : 0), this.params.int_scale), this.isNegative ? getYStep(-this.minValue, this.params.int_scale) : 1e-6);1608 this.localTop = (Math.ceil(this.maxValue / this.ystep)) * this.ystep;1609 this.localBottom = 0;1610 }1611 this.yfactorIn = (this.viewHeight - (this.isNegative ? 43 : 34)) / (this.localTop - this.localBottom);1612 this.xfactorIn = 1;1613 // redraw zinView1614 var ctx = getContext(this.zinView);1615 var ctxS = getContext(this.vScaleView);1616 ctx.clearRect(0, 0, this.viewWidth, this.viewHeight);1617 ctx.fillStyle = '#fafafa';1618 ctx.fillRect(0, 9, this.viewWidth, this.viewHeight - 9);1619 ctxS.clearRect(0, 0, this.scaleWidth, this.viewHeight);1620 // y scale1621 ctx.lineWidth = 1;1622 ctx.strokeStyle = '#e6eaf0';1623 ctxS.font = '11px tahoma, arial, verdana, sans-serif, Lucida Sans';1624 ctxS.fillStyle = '#36638e';1625 ctxS.textAlign = 'right';1626 ctxS.textBaseline = 'middle';1627 for (var gridY = this.localBottom; gridY < this.localTop + this.ystep; gridY += this.ystep) {1628 var cy = this.viewHeight - 24.5 - Math.round((gridY - this.localBottom) * this.yfactorIn) - (this.isNegative ? 9 : 0);1629 if (gridY < this.localTop) {1630 ctx.strokeStyle = (this.isNegative && Math.abs(gridY) < 1e-8) ? '#9fb1c4' : '#e6eaf0';1631 ctx.beginPath();1632 ctx.moveTo(0, cy);1633 ctx.lineTo(this.viewWidth, cy);1634 ctx.stroke();1635 }1636 ctxS.fillText(formatValue(gridY) + yUnits, this.scaleWidth - 6, cy);1637 }1638 // x scale1639 ctx.fillStyle = '#e9ecf0';1640 ctx.fillRect(0, this.viewHeight - 25, this.viewWidth, 25);1641 ctx.font = '11px tahoma, arial, verdana, sans-serif, Lucida Sans';1642 ctx.fillStyle = '#36638e';1643 ctx.textAlign = 'center';1644 ctx.textBaseline = 'top';1645 var fontSize = 11;1646 for (var i = 0; i < this.params.bar_chart.length; i++) {1647 while (ctx.measureText(this.params.bar_chart[i]).width > this.xstep && fontSize >= 8) {1648 fontSize--;1649 ctx.font = fontSize + 'px tahoma, arial, verdana, sans-serif, Lucida Sans';1650 }1651 }1652 for (var i = 0; i < this.params.bar_chart.length; i++) {1653 var text = this.params.bar_chart[i];1654 var textpos = this.xstep * (i + 0.5);1655 ctx.fillText(replaceEntities(text), textpos, this.viewHeight - 19);1656 }1657 // graph1658 if (this.isNegative)1659 drawBars(ctx, 0, 9, this.viewWidth, this.viewHeight - 43, this.lines, this.params.bar_chart, this.barsWidth, this.xstep, this.yfactorIn, -this.localBottom);1660 else1661 drawBars(ctx, 0, 9, this.viewWidth, this.viewHeight - 34, this.lines, this.params.bar_chart, this.barsWidth, this.xstep, this.yfactorIn, this.adjust ? -this.localBottom : 0);1662 ctx.strokeStyle = '#b8c5d4';1663 ctx.lineWidth = 1;1664 ctx.beginPath();1665 ctx.moveTo(0.5, 9);1666 ctx.lineTo(0.5, this.viewHeight);1667 ctx.lineTo(this.viewWidth, this.viewHeight);1668 ctx.stroke();1669 ctx.strokeStyle = '#6b93b5';1670 ctx.lineWidth = 2;1671 ctx.globalAlpha = 0.25;1672 ctx.beginPath();1673 ctx.moveTo(1, this.viewHeight - 26);1674 ctx.lineTo(this.viewWidth, this.viewHeight - 26);1675 ctx.stroke();1676 },1677 destroy: function() {1678 this.destroyDots();1679 this.endDrag();1680 removeEventEx(this.lHandle, 'mousedown touchstart', this.takeHandle);1681 removeEventEx(this.rHandle, 'mousedown touchstart', this.takeHandle);1682 removeEventEx(this.zoutWindow, 'mousedown touchstart', this.takeWindow);1683 removeEventEx(this.lMask, 'mousedown touchstart', this.takeMask);1684 removeEventEx(this.rMask, 'mousedown touchstart', this.takeMask);1685 removeEventEx(this.zinLayout, 'mousedown touchstart', this.takeView);1686 removeEventEx(this.dotsLayer, 'mousemove', this.showDots);1687 removeEventEx(this.zinLayout, 'mouseout', this.hideDots);1688 removeEventEx(this.zinLayout, 'mousewheel DOMMouseScroll', this.wheelView);1689 removeEventEx(this.zoutLayout, 'mousewheel DOMMouseScroll', this.wheelView);1690 removeEvent(this.column[0], 'selectionstart', cancelEvent);1691 removeEvent(this.column[1], 'selectionstart', cancelEvent);1692 this.graphDiv.innerHTML = '';1693 },1694 showBadBrowserBox: function() {1695 var s = (window.devicePixelRatio >= 2 ? '_2x' : '');1696 var content = getLang('stats_good_browser_box_msg') + '\1697 <div id="stats_good_browsers" class="clear_fix">\1698 <a href="http://www.mozilla-europe.org/" target="_blank" style="background: url(/images/firefox'+s+'.png) no-repeat 50% 17px;">Mozilla Firefox</a>\1699 <a href="http://www.google.com/chrome/" target="_blank" style="background: url(/images/chrome'+s+'.png) no-repeat 50% 17px;">Google Chrome</a>\1700 <a href="http://www.opera.com/" target="_blank" style="background: url(/images/opera'+s+'.png) no-repeat 50% 15px;">Opera</a>\1701 <a href="http://www.apple.com/safari/" target="_blank" style="background: url(/images/safari'+s+'.png) no-repeat 50% 12px;">Safari</a>\1702 </div>\1703 <style>\1704 #stats_good_browsers {\1705 height: 136px;\1706 margin: 10px auto 0 auto;\1707 width: 480px;\1708 }\1709 #stats_good_browsers a {\1710 float: left;\1711 height: 20px;\1712 padding: 106px 0 10px 0;\1713 width: 120px;\1714 text-align: center;\1715 -webkit-border-radius: 4px;\1716 -khtml-border-radius: 4px;\1717 -moz-border-radius: 4px;\1718 border-radius: 4px;\1719 }\1720 #stats_good_browsers a:hover {\1721 text-decoration: none;\1722 background-color: #edf1f5!important;\1723 }\1724 </style>';1725 cur.badBrowserBox = MessageBox({width: 540, hideButtons: true, bodyStyle: 'padding: 25px; text-align: center;', hideOnBGClick: true}).content(content).show();1726 if (!window.ajax) {1727 var b = cur.badBrowserBox.body();1728 hide(geByClass1('box_title_wrap', b.parentNode));1729 hide(geByClass1('box_controls_wrap', b.parentNode));1730 }1731 }1732}1733window.Graph = Graph;1734addEvent(document, 'touchstart touchmove touchend', function(ev) {1735 globalTouchCount = ev.touches.length;1736});1737})(window);...

Full Screen

Full Screen

page.js

Source:page.js Github

copy

Full Screen

...619 error620 })621 .catch((e) => _debugLogger.debugLogger.log('error', e))622 }623 function takeHandle(arg) {624 const handle = globalThis[arg.name]['handles'].get(arg.seq)625 globalThis[arg.name]['handles'].delete(arg.seq)626 return handle627 }628 function deliverResult(arg) {629 globalThis[arg.name]['callbacks'].get(arg.seq).resolve(arg.result)630 globalThis[arg.name]['callbacks'].delete(arg.seq)631 }632 function deliverError(arg) {633 const error = new Error(arg.message)634 error.stack = arg.stack635 globalThis[arg.name]['callbacks'].get(arg.seq).reject(error)636 globalThis[arg.name]['callbacks'].delete(arg.seq)637 }...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

...737 require('./scoreTree').scoreHandle(op, bodyObject);738 }739 // OP OWNERSHIP CHANGE740 else if (doOp === 'take') {741 require('./takeTree').takeHandle(op, bodyObject);742 }743 // OP PROJECT CHANGE744 else if (doOp === 'project') {745 require('./projectTree').projectHandle(op, bodyObject);746 }747 // OP SCHEDULING748 else if (doOp === 'schedule') {749 require('./scheduleTree').scheduleHandle(op, bodyObject);750 }751 // OP TASK CREATION752 else if (doOp === 'task') {753 require('./taskTree').taskHandle(op, bodyObject);754 }755 // OP TEST-CASE CREATION...

Full Screen

Full Screen

takeTree.js

Source:takeTree.js Github

copy

Full Screen

1// Serves the change-owner report page.2const serveTakeReport = (op, name) => {3 const {4 err,5 fs,6 globals,7 reportPrep,8 reportScriptPrep,9 servePage10 } = op;11 fs.readFile('takeReport.html', 'utf8')12 .then(13 htmlContent => {14 fs.readFile('report.js', 'utf8')15 .then(16 jsContent => {17 const newJSContent = reportScriptPrep(jsContent, '/taketally', [18 'total',19 'storyTotal',20 'taskTotal',21 'caseTotal',22 'changes',23 'storyChanges',24 'taskChanges',25 'caseChanges',26 'error'27 ]);28 const newContent = reportPrep(htmlContent, newJSContent)29 .replace('__takeWhoName__', name)30 .replace('__takeWhoRef__', globals.takeWhoRef);31 servePage(newContent, true);32 },33 error => err(error, 'reading report script')34 );35 },36 error => err(error, 'reading takeReport page')37 );38};39// Handles ownership change requests.40const takeHandle = (op, bodyObject) => {41 const {42 err,43 getGlobalNameRef,44 globals45 } = op;46 const {takeWho} = bodyObject;47 // If an owner other than the user was specified:48 if (takeWho) {49 // Serve a report identifying the new owner.50 getGlobalNameRef(takeWho, 'user', 'UserName')51 .then(52 ref => {53 if (! globals.isError) {54 globals.takeWhoRef = ref;55 serveTakeReport(op, takeWho);56 }57 },58 error => err(error, 'getting reference to new owner')59 );60 }61 // Otherwise, the new owner will be the user, so:62 else {63 globals.takeWhoRef = globals.userRef;64 // Serve a report identifying the user as new owner.65 serveTakeReport(op, globals.userName);66 }67};68// Sequentially ensures the ownership of an array of work items (tasks or test cases).69const takeItems = (op, longItemType, shortItemType, items) => {70 const {globals, err, shorten, report} = op;71 // If there are any items:72 if (items.length) {73 const firstItem = items[0];74 const firstRef = shorten(longItemType, longItemType, firstItem.ref);75 if (! globals.isError) {76 const owner = firstItem.owner;77 const ownerRef = shorten('user', 'user', owner);78 if (! globals.isError) {79 // If the ownership of the item needs to be changed:80 if (ownerRef !== globals.takeWhoRef) {81 // Change it.82 return globals.restAPI.update({83 ref: firstRef,84 data: {Owner: globals.takeWhoRef}85 })86 .then(87 // When it has been changed:88 () => {89 report(90 [['total'], ['changes'], [`${shortItemType}Total`], [`${shortItemType}Changes`]]91 );92 // Process the remaining items.93 return takeItems(op, longItemType, shortItemType, items.slice(1));94 },95 error => err(error, `changing ${longItemType} ownership`)96 );97 }98 // Otherwise, i.e. if the ownership of the item does not need to be changed:99 else {100 report([['total'], [`${shortItemType}Total`]]);101 // Process the remaining items.102 return takeItems(op, longItemType, shortItemType, items.slice(1));103 }104 }105 else {106 return Promise.resolve('');107 }108 }109 else {110 return Promise.resolve('');111 }112 }113 else {114 return Promise.resolve('');115 }116};117// Recursively changes ownerships in a tree or subtree of user stories.118const takeTree = (op, storyRefs) => {119 const {globals, err, shorten, report, getItemData, getCollectionData} = op;120 if (storyRefs.length && ! globals.isError) {121 const firstRef = shorten('userstory', 'hierarchicalrequirement', storyRefs[0]);122 if (! globals.isError) {123 // Get data on the first user story.124 return getItemData(firstRef, ['FormattedID', 'Owner'], ['Children', 'Tasks', 'TestCases'])125 .then(126 // When the data arrive:127 data => {128 report([['total'], ['storyTotal']]);129 const ownerRef = shorten('user', 'user', data.owner);130 if (! globals.isError) {131 // Report progress in the console if requested.132 if (globals.debug) {133 console.log(`Processing ${data.formattedID}`);134 }135 // Change the owner of the user story if necessary.136 const ownerWrong = ownerRef && ownerRef !== globals.takeWhoRef || ! ownerRef;137 if (ownerWrong) {138 report([['changes'], ['storyChanges']]);139 }140 return (ownerWrong ? globals.restAPI.update({141 ref: firstRef,142 data: {143 Owner: globals.takeWhoRef144 }145 }) : Promise.resolve(''))146 .then(147 // When the change, if any, has been made:148 () => {149 // Get data on the test cases, if any, of the user story.150 return getCollectionData(151 data.testCases.count ? data.testCases.ref : '', ['Owner'], []152 )153 .then(154 // When the data, if any, arrive:155 cases => {156 // Change the owner of any of them if necessary.157 return takeItems(op, 'testcase', 'case', cases)158 .then(159 // When the changes, if any, have been made:160 () => {161 // Get data on the tasks of the user story.162 return getCollectionData(163 data.tasks.count ? data.tasks.ref : '', ['Owner'], []164 )165 .then(166 // When the data, if any, arrive:167 tasks => {168 // Change the owner of any of them if necessary.169 return takeItems(op, 'task', 'task', tasks)170 .then(171 // When the changes, if any, have been made:172 () => {173 // Get references to the child user stories of the user story.174 return getCollectionData(175 data.children.count ? data.children.ref : '', [], []176 )177 .then(178 // When the references, if any, arrive:179 children => {180 // Process the child user stories, if any.181 return takeTree(op, children.map(child => child.ref))182 .then(183 /*184 When any have been processed, process the remaining user185 stories.186 */187 () => takeTree(op, storyRefs.slice(1)),188 error => err(error, 'changing owner of child user stories')189 );190 },191 error => err(error, 'getting references to child user stories')192 );193 },194 error => err(error, 'changing owner of tasks')195 );196 },197 error => err(error, 'getting data on tasks')198 );199 },200 error => err(error, 'changing owner of test cases')201 );202 },203 error => err(error, 'getting data on test cases')204 );205 },206 error => err(error, 'changing owner of user story')207 );208 }209 else {210 return '';211 }212 },213 error => err(error, 'getting data on user story')214 );215 }216 else {217 return Promise.resolve('');218 }219 }220 else {221 return Promise.resolve('');222 }223};224exports.takeHandle = takeHandle;...

Full Screen

Full Screen

[id].js

Source:[id].js Github

copy

Full Screen

1import React, { useState, useEffect } from 'react';2import Layout from '../../components/Layout';3import Head from 'next/head';4import LeadDetails from '../../components/pocket-listing/LeadDetails';5import Contact from '../../components/pocket-listing/Contact';6import OtherLeads from '../../components/pocket-listing/OtherLeads';7import { Container, Row, Col } from 'react-bootstrap';8import { parseCookies } from 'nookies';9import { getUserInfoSSR } from '../../actions/auth';10import axios from 'axios';11import { API } from '../../config';12import useSWR from 'swr';13/* const preFetchOtherLeads = async id => {14 return await axios.get(`${API}/pockets/other/${id}`).then(res => {15 if (res.data && res.data.success) {16 return res.data.leads;17 } else {18 return null;19 }20 });21}; */22const preFetchLead = async id => {23 return await axios.get(`${API}/pockets/${id}`).then(res => {24 if (res.data && res.data.success) {25 return res.data.pocket;26 } else {27 return null;28 }29 });30};31const fetchLead = async (...args) => {32 return await axios.get(...args).then(res => {33 console.log(res);34 if (res.data && res.data.success) {35 return res.data.pocket;36 } else {37 return null;38 }39 });40};41const Lead = ({ userInfo, id, /* preFetchedOtherLeads, */preFetchedLead }) => {42 const { data: lead } = useSWR(`${API}/pockets/${id}`, fetchLead, { initialData: preFetchedLead });43 /* const { data: leads } = useSWR(`${API}/pockets/other/${id}`, fetchLead, { initialData: preFetchedOtherLeads }); */44 const [modalShow, setModalShow] = useState(false);45 46 const [ContactInfo, setContactInfo] = useState({47 uid: userInfo?._id ? userInfo._id : null,48 firstName: userInfo && userInfo.firstName ? userInfo.firstName : '',49 lastName: userInfo && userInfo.lastName ? userInfo.lastName : '',50 email: userInfo && userInfo.email ? userInfo.email : '',51 phoneNumber: '',52 message: '',53 NDA: false54 });55 56 const [alert, setAlert] = useState({57 status: '',58 message: '',59 });60 const [submitProcess, setSubmitProcess] = useState(false);61 /* const [main, setMain] = useState(lead.images[0] ? lead.images[0] : '/property/image-from-rawpixel-id-558306-jpeg.jpg'); */62 useEffect(() => {63 /* setMain(lead && lead.images !== undefined ? lead.images[0] : '/property/image-from-rawpixel-id-558306-jpeg.jpg'); */64 }, [lead]);65 66 const onContactHandler = e => {67 const { name, value } = e.target;68 setContactInfo({ ...ContactInfo, [name]: value });69 };70 71 const phoneNumberHandler = e => {72 setContactInfo({ ...ContactInfo, phoneNumber: e });73 };74 const takeHandle = async e => {75 e.preventDefault();76 setSubmitProcess(true);77 setAlert({ status: 'secondary', message: 'Sending a message...' });78 let body = Object.assign({}, {79 authorId: lead.author,80 claimers: {81 ...ContactInfo,82 uid: userInfo?._id ? userInfo._id : null83 },84 pocketId: lead._id,85 leadType: 'pocket-listing'86 });87 return await axios({88 method: 'PUT',89 url: `${API}/claims/update`,90 headers: {91 Accept: 'application/json',92 'Content-Type': 'application/json',93 },94 data: JSON.stringify(body),95 withCredentials: true,96 })97 .then(response => {98 if (response.data.success) {99 setAlert({ status: 'success', message: 'We will be contacting you shortly!' });100 setSubmitProcess('success');101 }102 return response;103 })104 .catch(err => {105 console.log(err);106 setAlert({ status: 'warning', message: 'Failed to send message!' });107 setSubmitProcess(false);108 });109 };110 /* const mainHandler = e => {111 setMain(e.target.src);112 }; */113 return (114 <Layout userInfo={userInfo} style={'black'}>115 <Head>116 <meta charSet="utf-8" />117 <meta name="viewport" content="initial-scale=1.0, width=device-width" />118 <title>Pocket Listings - Cozmo Realty</title>119 <meta name="description" content="" />120 <link rel="canonical" href="https://cozmorealty.com/pocket-listings" />121 <meta property="og:locale" content="en_US" />122 <meta property="og:type" content="website" />123 <meta property="og:title" content="Pocket Listings - Cozmo Realty" />124 <meta property="og:description" content="" />125 <meta property="og:url" content="https://cozmorealty.com/pocket-listings" />126 <meta property="og:site_name" content="Cozmo Realty" />127 <meta property="og:image" content="" />128 </Head>129 <main className="mt-99px">130 <section id="singleLead">131 <Container fluid className="">132 <Row className="h-100 justify-content-sm-center">133 <Col sm={12} md={8}>134 <LeadDetails userInfo={userInfo} lead={lead} /* main={main} setMain={setMain} mainHandler={mainHandler}*/ />135 </Col>136 <Col sm={12} md={4}>137 <Contact 138 lead={lead} 139 takeHandle={takeHandle} 140 modalShow={modalShow} 141 setModalShow={setModalShow} 142 ContactInfo={ContactInfo}143 setContactInfo={setContactInfo}144 onContactHandler={onContactHandler}145 phoneNumberHandler={phoneNumberHandler}146 alert={alert} 147 setAlert={setAlert}148 submitProcess={submitProcess}149 />150 {/* <OtherLeads leads={leads} /> */}151 </Col>152 </Row>153 </Container>154 </section>155 </main>156 </Layout>157 );158};159// getstaticprops160export const getServerSideProps = async ctx => {161 const id = ctx.params.id;162 const cookie = parseCookies(ctx);163 const cookieHeader = `express:sess=${cookie['express:sess']}; express:sess.sig=${cookie['express:sess.sig']}`;164 const userInfo = await getUserInfoSSR(cookieHeader);165 /* const preFetchedOtherLeads = await preFetchOtherLeads(id); */166 const preFetchedLead = await preFetchLead(id);167 return { props: { userInfo, id, /* preFetchedOtherLeads, */preFetchedLead } };168};...

Full Screen

Full Screen

Contact.js

Source:Contact.js Github

copy

Full Screen

1import React, { useState } from 'react';2import { Container, Row, Col, Button, Modal, Form, Alert, Spinner } from 'react-bootstrap';3import { API } from '../../config';4import axios from 'axios';5import PhoneInput from 'react-phone-input-2';6const Contact = ({ lead, takeHandle, modalShow, setModalShow, ContactInfo, setContactInfo, onContactHandler, phoneNumberHandler, alert, submitProcess }) => {7 return (8 <section id="lead-contact" className="roboto">9 <Container className="border p-4">10 <Row>11 <Col>12 <h2 className="mb-0">{lead.firstName + ' ' + lead.lastName}</h2> 13 <p>Agent</p>14 </Col>15 </Row>16 <Row>17 <Col sm={12} md={3}>18 <strong>19 <p className="dark mb-0">Email:</p>20 </strong>21 </Col>22 <Col sm={12} md={9}>23 <p className="text-right mb-0">24 <a href={`mailto:${lead.email}`}>{lead.email}</a>25 </p>26 </Col>27 </Row>28 <Row>29 <Col sm={12} md={3}>30 <strong>31 <p className="dark mb-2">Phone:</p>32 </strong>33 </Col>34 <Col sm={12} md={9}>35 <p className="text-right mb-2">36 <a href={`tel:${lead.phoneNumber}`}>{lead.phoneNumber}</a>37 </p>38 </Col>39 </Row>40 <Row>41 <Col>42 <Button className="primary-button" onClick={() => setModalShow(true)}>43 Submit Proposal44 </Button>45 <span className='d-block mt-4'>Want to talk with our agent? <br />We will reach out within 24 business hours to assist you.</span>46 <Modal show={modalShow} onHide={() => setModalShow(false)} centered id="borrower-contact-form">47 <Modal.Header closeButton>48 <Modal.Title>Want more details about property?</Modal.Title>49 </Modal.Header>50 <Modal.Body>51 <Container className="bg-white px-0">52 <form onSubmit={takeHandle}>53 <Row>54 <Col xs={12} className="mb-3">{alert.message ? <Alert variant={alert.status}>{alert.message}</Alert> : <></>}</Col>55 <Col xs={12} sm={6} className="pr-sm-2 pl-sm-3 px-3 mb-3">56 <Form.Control57 required58 type="text"59 name="firstName"60 value={ContactInfo.firstName}61 onChange={onContactHandler}62 placeholder="First Name"63 />64 </Col>65 <Col xs={12} sm={6} className="pl-sm-2 pr-sm-3 px-3 mb-3">66 <Form.Control 67 required 68 type="text" 69 name="lastName" 70 value={ContactInfo.lastName} 71 onChange={onContactHandler} 72 placeholder="Last Name" 73 />74 </Col>75 <Col xs={12} className="px-3 mb-3">76 <Form.Control77 required78 type="email"79 name="email"80 autoComplete="email"81 value={ContactInfo.email}82 onChange={onContactHandler}83 placeholder="Email Address"84 />85 </Col>86 <Col xs={12} className="px-3 mb-3">87 <PhoneInput88 specialLabel={false}89 country="us"90 onlyCountries={['us']}91 disableDropdown92 disableCountryCode93 value={ContactInfo?.phoneNumber ? ContactInfo.phoneNumber.toString() : ''}94 placeholder={'Phone Number'}95 name="phoneNumber"96 onChange={phoneNumberHandler}97 />98 </Col>99 <Col xs={12} className="px-3 mb-3">100 <Form.Control101 required102 name="message"103 value={ContactInfo.message}104 onChange={onContactHandler}105 as="textarea"106 rows="5"107 style={{ resize: 'none' }}108 placeholder="Your Message"109 />110 </Col>111 <Col xs={12} className="px-3 mb-3">112 <Form.Check 113 type={'checkbox'}114 id={`NDA-checkbox`}115 label={`By marking this Checkbox, I agree to not to disclose any of infromation given by this agent to the others nor to the public. I agree to sign on this NDA provided by Cozmo Realty.`}116 style={{ fontSize: '0.8em', color: '#303030' }}117 onClick={e => setContactInfo({ ...ContactInfo, NDA: !ContactInfo.NDA })}118 disabled={submitProcess}119 />120 </Col>121 </Row>122 <div className="button-wrapper mt-2">123 <Button type="submit" className="primary-button mr-3" disabled={submitProcess || !ContactInfo.NDA}>124 {submitProcess && submitProcess !== 'success' ? <span className="button-inner-text"><Spinner animation="border" /></span> : submitProcess === 'success' ? <span className="button-inner-text">Message Sent!</span> : <span className="button-inner-text">Send Message</span> }125 126 </Button>127 </div>128 </form>129 </Container>130 </Modal.Body>131 </Modal>132 </Col>133 </Row>134 </Container>135 </section>136 );137};...

Full Screen

Full Screen

test_type.gs

Source:test_type.gs Github

copy

Full Screen

1//go_import:github.com/gen0cide/gscript/tools/linker_test/typelib as typelib2function Deploy() {3 val = 123454 console.log(typelib.TakePointer(val))5 console.log(typelib.TakeHandle(val))6 var naming = G.rand.GetAlphaString(4)7 console.log(naming)8 DebugConsole()...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { takeHandle } = require('playwright');2const { firefox } = require('playwright');3(async () => {4 const browser = await firefox.launch();5 const page = await browser.newPage();6 const pageHandle = await takeHandle(page);7 const childProcess = require('child_process');8 childProcess.fork('./childProcess.js', [pageHandle]);9})();10const { adoptHandle } = require('playwright');11const { firefox } = require('playwright');12(async () => {13 const pageHandle = process.argv[2];14 const page = await adoptHandle(pageHandle);15 console.log(await page.title());16 await page.close();17})();18#### browser.newContext([options])

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { takeHandle } = require('playwright/lib/client/helper');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const element = await page.$('input[name="q"]');8 console.log(await takeHandle(element));9 await browser.close();10})();11const { takeHandle } = require('playwright/lib/client/helper');12const { chromium } = require('playwright');13(async () => {14 const browser = await chromium.launch();15 const context = await browser.newContext();16 const page = await context.newPage();17 const element = await page.$('input[name="q"]');18 console.log(await takeHandle(element));19 await browser.close();20})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { takeHandle } = require('playwright/lib/server/chromium/crBrowser');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const element = await page.$('text=Get started');8 const handle = await takeHandle(element);9 console.log(handle._guid);10 await browser.close();11})();12const { takeHandle } = require('playwright/lib/server/chromium/crBrowser');13const { chromium } = require('playwright');14(async () => {15 const browser = await chromium.launch();16 const context = await browser.newContext();17 const page = await context.newPage();18 const element = await page.$('text=Get started');19 const handle = await takeHandle(element);20 console.log(handle._guid);21 await browser.close();22})();23const { takeHandle } = require('playwright/lib/server/chromium/crBrowser');24const { chromium } = require('playwright');25(async () => {26 const browser = await chromium.launch();27 const context = await browser.newContext();28 const page = await context.newPage();29 const element = await page.$('text=Get started');30 const handle = await takeHandle(element);31 console.log(handle._guid);32 await browser.close();33})();34const { takeHandle } = require('playwright/lib/server/chromium/crBrowser');35const { chromium } = require('playwright');36(async () => {37 const browser = await chromium.launch();38 const context = await browser.newContext();39 const page = await context.newPage();40 const element = await page.$('text=Get started');41 const handle = await takeHandle(element);42 console.log(handle._guid);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { takeHandle } = require('playwright/lib/server/chromium/crPage');2const { Page } = require('playwright/lib/server/page');3const { Frame } = require('playwright/lib/server/frame');4const { ElementHandle } = require('playwright/lib/server/dom');5const { JSHandle } = require('playwright/lib/server/jsHandle');6Page.prototype.takeHandle = async function(selector) {7 const handle = await takeHandle(this, selector);8 return handle;9};10Frame.prototype.takeHandle = async function(selector) {11 const handle = await takeHandle(this, selector);12 return handle;13};14ElementHandle.prototype.takeHandle = async function(selector) {15 const handle = await takeHandle(this, selector);16 return handle;17};18JSHandle.prototype.takeHandle = async function(selector) {19 const handle = await takeHandle(this, selector);20 return handle;21};22(async () => {23 const browser = await chromium.launch({ headless: false });24 const context = await browser.newContext();25 const page = await context.newPage();26 const searchHandle = await page.takeHandle('input[name="q"]');27 await searchHandle.type('Playwright');28 await searchHandle.press('Enter');29 await page.screenshot({ path: 'example.png' });30 await browser.close();31})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { takeHandle } = require('@playwright/test/lib/server/frames');2const { Page } = require('@playwright/test/lib/server/page');3const { Frame } = require('@playwright/test/lib/server/frame');4const handle = await takeHandle(page.mainFrame(), (frame) => {5 return frame.evaluateHandle(() => {6 return document.querySelector('div');7 });8});9const frame = await Frame.from(handle);10const page = await Page.from(handle);11const elementHandle = await frame.evaluateHandle((handle) => handle, handle);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { takeHandle } = require('playwright/lib/server/chromium/crBrowser');2const browser = await chromium.launch();3const page = await browser.newPage();4await takeHandle(page).then((handle) => {5 console.log(handle);6});7await browser.close();8const { takeElementHandle } = require('playwright/lib/server/chromium/crBrowser');9const browser = await chromium.launch();10const page = await browser.newPage();11await takeElementHandle(page).then((handle) => {12 console.log(handle);13});14await browser.close();15const { takeExecutionContext } = require('playwright/lib/server/chromium/crBrowser');16const browser = await chromium.launch();17const page = await browser.newPage();18await takeExecutionContext(page).then((handle) => {19 console.log(handle);20});21await browser.close();22const { takeFileChooser } = require('playwright/lib/server/chromium/crBrowser');23const browser = await chromium.launch();24const page = await browser.newPage();25await takeFileChooser(page).then((handle) => {26 console.log(handle);27});28await browser.close();29const { takeFrame } = require('playwright/lib/server/chromium/crBrowser');30const browser = await chromium.launch();31const page = await browser.newPage();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { Page } = require('playwright');2Page.prototype.takeHandle = async function() {3 return await this._page._delegate._takeHandle();4};5const { Page } = require('playwright');6Page.prototype.releaseHandle = async function(handle) {7 return await this._page._delegate._releaseHandle(handle);8};9const { Page } = require('playwright');10Page.prototype.takeElementHandle = async function(handle) {11 return await this._page._delegate._takeElementHandle(handle);12};13const { Page } = require('playwright');14Page.prototype.releaseElementHandle = async function(handle) {15 return await this._page._delegate._releaseElementHandle(handle);16};17const { Page } = require('playwright');18Page.prototype.takeJSHandle = async function(handle) {19 return await this._page._delegate._takeJSHandle(handle);20};21const { Page } = require('playwright');22Page.prototype.releaseJSHandle = async function(handle) {23 return await this._page._delegate._releaseJSHandle(handle);24};25const { Page } = require('playwright');26Page.prototype.takeFrame = async function(handle) {27 return await this._page._delegate._takeFrame(handle);28};29const { Page } = require('playwright');30Page.prototype.releaseFrame = async function(handle) {31 return await this._page._delegate._releaseFrame(handle);32};33const { Page } = require('playwright');34Page.prototype.takeExecutionContext = async function(handle) {35 return await this._page._delegate._takeExecutionContext(handle);36};37const { Page } = require('playwright');38Page.prototype.releaseExecutionContext = async function(handle) {39 return await this._page._delegate._releaseExecutionContext(handle);40};41const { Page } = require

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful