/
PnlScrollingTickerPart.part
1 lines (1 loc) · 20.1 KB
/
PnlScrollingTickerPart.part
1
{"typeName":"Part","id":"fef6b837-0ebe-4f90-b317-9c9bd1b12931","name":"PnlScrollingTickerPart.part","path":"/parts/PnlScrollingTickerPart.part","lastModified":"2018-11-03T00:48:19.133Z","data":{"htmlText":"<script src=\"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js\"></script>\n<script\n src=\"https://code.jquery.com/jquery-1.8.1.min.js\"\n integrity=\"sha256-/BhPlt0YeU4gTEEHWgCSO+fo5Wh0QjHXTy/fiSH3jSk=\"\n crossorigin=\"anonymous\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery-simplyscroll/2.0.5/jquery.simplyscroll.min.js\"></script>\n<script src=\"https://cdn.rawgit.com/danielecr/jquery-contextual-menu/master/jquery.contextmenu.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jQuery-JSONP/2.4.0/jquery.jsonp.min.js\"></script>\n<div id=\"JsepTarget\"></div>","jsText":"function parseDate(str) {\n\tif (typeof str === 'undefined')\n\t\treturn null;\n\t\t\n\ttry {\n\t\tvar date = new Date(Date.parse(str));\n\t\tif (!isNaN( date.getTime() ))\n\t\t\treturn date;\n\t} \n\tcatch(err) {\n\t}\n\n\tvar match = str.match(/Date\\s*\\(\\s*(\\d+)(?:\\-\\d+)?\\s*\\)/);\n\treturn match ? new Date(parseInt(match[1], 10)) : null;\n}\n\nvar formatter = new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 0,\n maximumFractionDigits:0\n});\n\nfunction depthFirstWalk(obj, getChildren) {\n let result = [];\n _depthFirstWalk(result, obj, getChildren);\n return result;\n}\n\nfunction _depthFirstWalk(result, obj, getChildren) {\n if (Array.isArray(obj)) {\n _.forEach(obj, o => _depthFirstWalk(result, o, getChildren));\n } else {\n result.push(obj);\n _.forEach(getChildren(obj), c => {\n _depthFirstWalk(result, c, getChildren);\n });\n }\n}\nfunction getRowPath(row) {\n let str = \"\";\n while (row != null) {\n str = \"/\" + row.name + str;\n row = row.parent;\n }\n return \"/root\" + str;\n}\nfunction toMQLResultTable(input) {\n let flatRows = depthFirstWalk(input.rows, (row) => row.children);\n\n let columns = input.columnNames.map(c => ({Name: c}));\n let rows = _.map(flatRows, r => ({\n Depth: r.level,\n Name: r.name,\n RowData: r._data,\n Path: getRowPath(r)\n }));\n return {\n Columns: columns,\n Result: {Rows: rows}\n };\n}\n\nthis.render = function (args) {\n if (args[0] == null) {\n return;\n }\n G = { \"resultTable\": toMQLResultTable(args[0]),\n \"target\": document.getElementById(\"JsepTarget\"),\n \"webMavenHost\": null,\n \"favorite\": null };\n let target = G.target;\n let resultTable = G.resultTable;\n try{\n\t\n\t if (typeof $.isLoaded === 'undefined')\n\t \t$.isLoaded = false;\n\t \t\n\t var speed = 2;\n\t var tickerSpacing = 34;\n\t var showChart = true;\n\t var showGrayLines = false;\n\t var showAreasInCharts = false;\n\t \n\t \n\t \n\t var queryChanged = false;\n\t \n\t if (typeof $.savedQuery === 'undefined') {\n\t \t$.savedQuery = G.resultTable.Result;\n\t \tqueryChanged = false;\n\t }\n\t else {\n\t \tif ($.savedQuery != G.resultTable.Result)\n\t \tqueryChanged = true;\n\t else\n\t \tqueryChanged = false;\n\t }\n\t \t\n\t \t\n\t if (!$.isLoaded || queryChanged){\n\t // \twebMavenHost.AppendStyle(\"ScrollingTicker\\\\style.css\");\n\t // \twebMavenHost.AppendStyle(\"ScrollingTicker\\\\contextmenu.css\");\n\t \t\n\t \t$(target).empty();\n\t \t\n\t \t\n\t \n\t\t var tickerList = $('<ul id=\"scroller\" class=\"scroller\" ></ul>');\n\t\t tickerList.appendTo(target); \n\t\t \n\t\t var resultRows = resultTable.Result.Rows;\n\t\t for (var i = 0; i < resultRows.length; i++)\n\t\t {\n\t\t \t//hardcoded column indices\n\t\t \tvar listElement = createListElement(resultRows[i].RowData[0], formatter.format(resultRows[i].RowData[1]), resultRows[i].RowData[2], i, showChart);\n\t\t \tlistElement.appendTo(tickerList); \n\t\t }\n\t\t \n\t\t\t$.isPaused = false\n\t\t\t$(function() { //on DOM ready \n\t\t\t\t\n\t\t\t\t$('.ticker-item').css(\"margin-right\", tickerSpacing);\n\t\t\t\t\n\t\t\t\tif (showChart)\n\t\t\t\t{\n\t\t\t var resultRows = G.resultTable.Result.Rows;\n\t\t\t var vals = [];\n\t\t\t for (var index = 0; index < resultRows.length; index++)\n\t\t\t {\n\t\t\t \t//hardcoded column index - asumes values start from 3rd column - should be checked for column type == 'sparkline' or 'chart'\n\t\t\t\t var values = resultRows[index].RowData[3]; \n\t\t\t\t var vals = [];\n\t\t\t\t for (var i = values.length-1; i >=0; i--) {\n\t\t\t\t \tvar xvals = []; \n\t\t\t\t \tvar formattedDate = parseDate(values[i][0]);\n\t\t\t\t xvals.push(formattedDate);\n\t\t\t\t\t\t\txvals.push(values[i][1]);\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tvals.push(xvals);\n\t\t\t\t }\n\t\t\t\t var plot = \"#myplot\" + index; \n\t\t\t\t vals = vals.reverse(); \n\t\t\t\t // alert(vals);\n\t\t\t\t d3.select(plot).datum(vals).call(timeSeriesChart().height(80).YAx(function (ax) {ax.ticks(5);}).showArea(showAreasInCharts));\t\n\t\t\t \t\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\tvar options = {\n\t\t\t\t\t\tspeed: speed,\n\t\t\t\t\t\tpauseOnHover: false,\n\t\t\t\t\t\tmanualMode: 'loop',\n\t\t\t\t\t\tpauseButton: true\n\t\t\t\t\t};\n\t\t\t\tvar scroller = $(\"#scroller\").simplyScroll(options);\n\t\t\t\t\n\t\t\t\t\n\t\t\t\tfunction movePause(e,el){\n\t\t\t\t\tif(!$.isPaused){\n\t\t\t\t\t debugger;\n\t\t\t\t\t\t$(\".simply-scroll-btn-pause\").click();\n\n\t\t\t\t\t\t$.isPaused = true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tfunction moveResume(e,el){\n\t\t\t\t\tif($.isPaused){\n\t\t\t\t \t\t$(\".simply-scroll-btn-pause\").click();\n\t\t\t\t \t\t$.isPaused = false;\n\t\t\t\t \t}\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t$(\".scroller\").contextmenu({'Pause': () => movePause(), 'Resume': () => moveResume()}, 'right');\n\t\t\t\t\n\t\t\t});\n\t\t\t\n\t\t\t}\n\t\t \n\t\t function createListElement(title, value, arrowType, index, showChart)\n\t\t {\n\t\t \tvar text = title + value; \n\t\t \tvar width = getWidthInPixels(text);\n\t\t \twhile (width % speed != 0){\n\t\t \t\twidth++;\n\t\t \t}\n\t\t \t\n\t\t \tvar listElement = $( '<li style=\"display: inline; width: '+ ( width + 50 ) +'px; \" class=\"ticker-item\" ></li>' );\n\t\t \tvar container = $('<div style= \"display:inline-block;float:left\" > </div>');\n\t\t \t\n\t\t \tvar title = $( '<div style=\"font-size: 16px;margin-right: 10px;float:left;\">'+ title +'</div>' );\n\t\t \ttitle.appendTo(container);\n\t\t \t\n\t\t \tvar arrow = $( '<div style=\"float:left;margin-top: 5px;margin-right: 10px;\" class=\"'+ arrowType +'\"> </div>' );\n\t\t \tarrow.appendTo(container);\n\t\t \t$('<div style=\"clear:both\"/>').appendTo(container);\n\t\t \t\n\t\t \tcontainer.appendTo(listElement);\n\t\t \t\n\t\t \tvar container2 = $('<div style= \"float:left\" > </div>');\n\t\t \tvar valueColor = \"black\";\n\t\t \tif (value.indexOf(\"-\") >= 0)\n\t\t \t\tvalueColor = \"red\";\n\t\t \tvar value = $( '<div style=\"font-size: 13px;color: '+ valueColor +'\">'+ value +'</div>' );\n\t\t \tvalue.appendTo(container2);\n\t\t \tcontainer2.appendTo(listElement);\n\t\t \t\n\t\t \t$('<div style=\"clear:both\"/>').appendTo(listElement);\n\t\t \t\n\t\t \tif (showChart)\n\t\t \t\t$('<div style=\"margin-left: -15px;\" id=\"myplot'+index+'\" ></div>').appendTo(listElement);\n\t\t \t\n\t\t \treturn listElement\n\t\t }\n\t\t\n\t\t function getWidthInPixels(value) \n\t\t {\n\t \tjQuery(target).append('<div id=\"test\" style=\"position: absolute; visibility: hidden; height: auto; width: auto\">' + value + '</div>');\n\t var divElement = document.getElementById('test');\n\t var width = (divElement.clientWidth + 20);\n\t var parent = divElement.parentNode;\n\t parent.removeChild(divElement);\n\t return width;\n\t }\n\t \n\t\t\tfunction timeSeriesChart() {\n\t\t\t var margin = {\n\t\t\t top: 20,\n\t\t\t right: 20,\n\t\t\t bottom: 40,\n\t\t\t left: 80\n\t\t\t },\n\t\t\t width = 60,\n\t\t\t height = 20,\n\t\t\t xValue = function (d) {\n\t\t\t return d[0];\n\t\t\t },\n\t\t\t yValue = function (d) {\n\t\t\t return d[1];\n\t\t\t },\n\t\t\t xScale = d3.time.scale(),\n\t\t\t yScale = d3.scale.linear(),\n\t\t\t xAxis = d3.svg.axis()\n\t\t\t .scale(xScale)\n\t\t\t .orient(\"bottom\")\n\t\t\t .tickSize(6, 0)\n\t\t\t //.ticks(12)\n\t\t\t .tickFormat(function (t) {\n\t\t\t return Math.round(t);\n\t\t\t }),\n\t\t\t yAxis = d3.svg.axis()\n\t\t\t .scale(yScale)\n\t\t\t .orient(\"left\")\n\t\t\t \n\t\t\t yAxisLabel = \"\",\n\t\t\t xAxisLabel = \"\",\n\t\t\t showArea = false,\n\t\t\t area = d3.svg.area()\n\t\t\t .x(X)\n\t\t\t .interpolate(\"linear\"),\n\t\t\t arean = d3.svg.area()\n\t\t\t .x(X)\n\t\t\t //.interpolate(\"linear\"),\n\t\t\t .interpolate(function(points){\n\t\t\t \tvar path = \"\";\n\t\t\t\t\t\t\t for (var i = 0; i < points.length; i++) {\n\t\t\t\t\t\t\t \t/*if (i) {\n\t\t\t\t\t\t\t \t\tif (points[i][1] > 0)\n\t\t\t\t\t\t\t \t\t\tpoints[i][1] = \n\t\t\t\t\t\t\t \t}*/\n\t\t\t\t\t\t\t \t\n\t\t\t\t\t\t\t \t\n\t\t\t\t\t\t\t if (i) path += \"L\";\n\t\t\t\t\t\t\t path += points[i][0] + \",\" + points[i][1];\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t return path;\n\t\t\t }\n\t\t\t ),\n\t\t\t line = d3.svg.line().x(X).y(Y);\n\t\t\t\n\t\t\t function chart(selection) {\n\t\t\t selection.each(function (data) {\n\t\t\t\n\t\t\t // Convert data to standard representation greedily;\n\t\t\t // this is needed for nondeterministic accessors.\n\t\t\t data = data.map(function (d, i) {\n\t\t\t return [xValue.call(data, d, i), yValue.call(data, d, i)];\n\t\t\t });\n\t\t\t\t\t\t\n\t\t\t // Update the x-scale.\n\t\t\t xScale.domain(d3.extent(data, function (d) {\n\t\t\t return d[0];\n\t\t\t }))\n\t\t\t .range([width - margin.left - margin.right, 0]);\n\t\t\t\n\t\t\t // Update the y-scale.\n\t\t\t yScale.domain(d3.extent(data, function (d) {\n\t\t\t return d[1];\n\t\t\t }))\n\t\t\t .range([height - margin.top - margin.bottom, 0]);\n\t\t\t\n\t\t\t // Select the svg element, if it exists.\n\t\t\t var svg = d3.select(this).selectAll(\"svg\").data([data]);\n\t\t\t\n\t\t\t // Otherwise, create the skeletal chart.\n\t\t\t var gEnter = svg.enter().append(\"svg\").append(\"g\");\n\t\t\t if (showArea) {\n\t\t\t gEnter.append(\"path\").attr(\"class\", \"area\");\n\t\t\t gEnter.append(\"path\").attr(\"class\", \"arean\");\n\t\t\t\n\t\t\t // Also want to force the y axis to go to zero\n\t\t\t var domain = yScale.domain();\n\t\t\t domain[0] = Math.min(0, domain[0]);\n\t\t\t yScale.domain(domain);\n\t\t\t \n\t\t\t var domain2 = xScale.domain();\n\t\t\t domain[1] = Math.min(0, domain[1]);\n\t\t\t xScale.domain(domain2);\n\t\t\t }\n\t\t\t gEnter.append(\"line\").attr(\"class\", \"zeroline\");\n\t\t\t gEnter.append(\"line\").attr(\"class\", \"outery\");\n\t\t\t gEnter.append(\"line\").attr(\"class\", \"outerx\");\n\t\t\t gEnter.append(\"path\").attr(\"class\", \"line\");\n\t\t\t gEnter.append(\"g\").attr(\"class\", \"x axis\");\n\t\t\t gEnter.append(\"g\").attr(\"class\", \"y axis\");\n\t\t\t\n\t\t\t // Update the outer dimensions.\n\t\t\t svg.attr(\"width\", width)\n\t\t\t .attr(\"height\", height);\n\t\t\t\n\t\t\t // Update the inner dimensions.\n\t\t\t var g = svg.select(\"g\")\n\t\t\t .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n\t\t\t\n\t\t\t // Update the area path.\n\t\t\t \n\t\t\t\n\t\t\t // update the zero line\n\t\t\t g.select(\".zeroline\")\n\t\t\t .attr(\"x1\", -width + 10)\n\t\t\t .attr(\"x2\", width)\n\t\t\t .attr(\"y1\", yScale(0))\n\t\t\t .attr(\"y2\", yScale(0));\n\t\n\t\t\t\t\t\tif (showGrayLines)\n\t\t\t\t\t\t{\n\t\t\t\t g.select(\".outerx\")\n\t\t\t\t .attr(\"x1\", -width)\n\t\t\t\t .attr(\"x2\", width)\n\t\t\t\t .attr(\"y1\", height/2 - 15)\n\t\t\t\t .attr(\"y2\", height/2 - 15);\n\t\t\t\t g.select(\".outery\")\n\t\t\t\t .attr(\"x1\", -width + 2) //to account for the line width\n\t\t\t\t .attr(\"x2\", -width + 2)\n\t\t\t\t .attr(\"y1\", height/2 - 15 )\n\t\t\t\t .attr(\"y2\", -height + 75);\n\t\t\t }\n\t\t\t\n\t\t\t // Update the line path.\n\t\t\t g.select(\".line\")\n\t\t\t .attr(\"d\", line);\n\t\t\t \n\t\t\t \n\t\t\t if (showArea) {\n\t\t\t g.select(\".area\").attr(\"d\",\n\t\t\t area.y1(function (d) {\n\t\t\t // the highest point\n\t\t\t /* if (d[1] < 0) {\n\t\t\t return yScale(0)/3;\n\t\t\t } else {\n\t\t\t return Y(d);\n\t\t\t }*/\n\t\t\t return Y(d);\n\t\t\t })\n\t\t\t .y0(function (d) {\n\t\t\t // the lowest point\n\t\t\t /*if (d[1] <= 0) {\n\t\t\t return 0;\n\t\t\t } else {\n\t\t\t return yScale(0);\n\t\t\t }*/\n\t\t\t return yScale(0);\n\t\t\t })\n\t\t\t );\n\t\t\t \n\t\t\t g.select(\".arean\").attr(\"d\",\n\t\t\t arean.y1(function (d) {\n\t\t\t // the highest point\n\t\t\t var aa = yScale(0);\n\t\t\t var bb = Y(d);\n\t\t\t if (d[1] <= 0) {\n\t\t\t return yScale(0); \n\t\t\t } else {\n\t\t\t \treturn 0;\n\t\t\t }\n\t\t\t })\n\t\t\t .y0(function (d) {\n\t\t\t // the lowest point\n\t\t\t var aa = yScale(0);\n\t\t\t var bb = Y(d);\n\t\t\t if (d[1] <= 0) {\n\t\t\t return Y(d);\n\t\t\t } else {\n\t\t\t \treturn 0;\n\t\t\t }\n\t\t\t })\n\t\t\t \n\t\t\t );\n\t\t\t }\n\t\t\t\n\t\t\t // Update the x-axis.\n\t\t\t /*g.select(\".x.axis\")\n\t\t\t .attr(\"transform\", \"translate(0,\" + yScale.range()[0] + \")\")\n\t\t\t .call(xAxis);\n\t\t\t\n\t\t\t // Update the y-axis\n\t\t\t /*g.select(\".y.axis\")\n\t\t\t .attr(\"transform\", \"translate(0,\" + xScale.range()[0] + \")\")\n\t\t\t .call(yAxis);*/\n\t\t\t\n\t\t\t });\n\t\t\t }\n\t\t\t\n\t\t\t // The x-accessor for the path generator; xScale ∘ xValue.\n\t\t\t function X(d) {\n\t\t\t return xScale(d[0]);\n\t\t\t }\n\t\t\t\n\t\t\t // The x-accessor for the path generator; yScale ∘ yValue.\n\t\t\t function Y(d) {\n\t\t\t return yScale(d[1]);\n\t\t\t }\n\t\t\t\n\t\t\t chart.margin = function (_) {\n\t\t\t if (!arguments.length) return margin;\n\t\t\t margin = _;\n\t\t\t return chart;\n\t\t\t };\n\t\t\t\n\t\t\t chart.width = function (_) {\n\t\t\t if (!arguments.length) return width;\n\t\t\t width = _;\n\t\t\t return chart;\n\t\t\t };\n\t\t\t\n\t\t\t chart.height = function (_) {\n\t\t\t if (!arguments.length) return height;\n\t\t\t height = _;\n\t\t\t return chart;\n\t\t\t };\n\t\t\t\n\t\t\t chart.x = function (_) {\n\t\t\t if (!arguments.length) return xValue;\n\t\t\t xValue = _;\n\t\t\t return chart;\n\t\t\t };\n\t\t\t\n\t\t\t chart.y = function (_) {\n\t\t\t if (!arguments.length) return yValue;\n\t\t\t yValue = _;\n\t\t\t return chart;\n\t\t\t };\n\t\t\t\n\t\t\t chart.showArea = function (_) {\n\t\t\t if (!arguments.length) return showArea;\n\t\t\t showArea = _;\n\t\t\t return chart;\n\t\t\t };\n\t\t\t // TODO Axis labels\n\t\t\t\n\t\t\t\n\t\t\t // Customize the ticks by allowing direct access to axis?\n\t\t\t chart.YAx = function (f) {\n\t\t\t f(yAxis);\n\t\t\t return chart;\n\t\t\t };\n\t\t\t\n\t\t\t\n\t\t\t return chart;\n\t\t\t}\n\t\t \n\t\t \n\t\t \n\t\t \n\t\t\t\n\t\t\t$.isLoaded = true;\n\t\t\n\t\t \n\t\t}catch(ex)\n\t\t{\n\t\t\talert(ex);\n\t\t}\n}\n\nthis.initialize = function () {\n // setup config for the @maven packages\n return Promise.resolve();\n}","cssText":"body {\n overflow: hidden;\n}\n.JsepTarget { overflow:hidden; }\n/* Container DIV - automatically generated */\n.simply-scroll-container { \n\tposition: relative;\n}\n\n/* Clip DIV - automatically generated */\n.simply-scroll-clip { \n\tposition: relative;\n\toverflow: hidden;\n}\n\n/* UL/OL/DIV - the element that simplyScroll is inited on\nClass name automatically added to element */\n.simply-scroll-list { \n\toverflow: hidden;\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n}\n\t\n.simply-scroll-list li {\n\tpadding: 0;\n\tmargin: 0;\n\tlist-style: none;\n}\n\t\n.simply-scroll-list li img {\n\tborder: none;\n\tdisplay: block;\n}\n\n/* Custom class modifications - adds to / overrides above\n\n.simply-scroll is default base class */\n\n/* Container DIV */\n.simply-scroll { \n\twidth: 100%;\n\theight: 200px;\n\tmargin-bottom: 1em;\n}\n\n/* Clip DIV */\n.simply-scroll .simply-scroll-clip {\n\twidth: 100%;\n\theight: 200px;\n}\n\n.simply-scroll .simply-scroll-list li {\n\tfloat: left; /* Horizontal scroll only */\n\twidth: 100%;\n\theight: 200px;\n\tmargin-right: 140px;\n}\n\n.arrow-up {\n\twidth: 0; \n\theight: 0; \n\tborder-left: 10px solid transparent;\n\tborder-right: 10px solid transparent;\n\t\n\tborder-bottom: 10px solid black;\n}\n\n.arrow-down {\n\twidth: 0; \n\theight: 0; \n\tborder-left: 10px solid transparent;\n\tborder-right: 10px solid transparent;\n\t\n\tborder-top: 10px solid #f00;\n}\n\n.arrow-right {\n\twidth: 0; \n\theight: 0; \n\tborder-top: 10px solid transparent;\n\tborder-bottom: 10px solid transparent;\n\t\n\tborder-left: 10px solid green;\n}\n\n.arrow-left {\n\twidth: 0; \n\theight: 0; \n\tborder-top: 10px solid transparent;\n\tborder-bottom: 10px solid transparent; \n\t\n\tborder-right:10px solid blue; \n}\n\n.line {\n fill: none;\n stroke: #000;\n stroke-width: 1.5px;\n}\n.area {\n fill: #78906B;\n}\n.arean {\n fill: #91413D;\n}\n.zeroline {\n stroke: #5B6758;\n stroke-dasharray: 3,3\n}\n.outerx {\n stroke: #ccc;\n stroke-width: 4;\n}\n.outery {\n stroke: #ccc;\n stroke-width: 4;\n}\n#contextmenu{\n\tmargin:0;\n\tpadding:0;\n\tborder: 1px solid #000;\n\tbackground:#ccc;\n}\n#contextmenu li {\n list-style-type:none;\n margin:1px;\n margin-left: 25px;\n\tmargin-right: 15px;\n padding:2px;\n cursor:pointer;\n}\n#contextmenu li.hover{\n background: #ddd;\n}"},"functionType":"UserDefinedEvalPart","arguments":[{"name":"Input Table","typeAnnotation":"Table","defaultValue":null,"metadata":null}],"returnType":"Any"}