-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsnippets.json
1 lines (1 loc) · 84.5 KB
/
snippets.json
1
[{"code":"$http.get(BASE_URL + 'API_URL').then(\n //Success Handler\n function(response) {\n console.log(response);\n },\n //Failure Handler\n function(response) {\n console.log(response);\n }\n);","type":"js","displayName":"API - Angular API - GET","settings":{}},{"code":"$http.post(BASE_URL + 'API_URL',\n JSON.stringify(taskObject)\n).then(\n //Success Handler\n function(response) {\n console.log(response);\n },\n //Failure Handler\n function(response) {\n console.log(response);\n }\n);","type":"js","displayName":"API - Angular API - POST","settings":{}},{"code":"$http.patch(BASE_URL + 'API_URL',\n JSON.stringify(someData)\n).then(\n //Success Handler\n function(response) {\n console.log(response);\n },\n //Failure Handler\n function(response) {\n console.log(response);\n }\n);","type":"js","displayName":"API - Angular API - PATCH","settings":{}},{"code":"$http.put(BASE_URL + 'API_URL',\n JSON.stringify(someData)\n).then(\n //Success Handler\n function(response) {\n console.log(response);\n },\n //Failure Handler\n function(response) {\n console.log(response);\n }\n);","type":"js","displayName":"API - Angular API - PUT","settings":{}},{"code":"$http.delete(BASE_URL + 'API_URL').then(\n //Success Handler\n function(response) {\n console.log(response);\n },\n //Failure Handler\n function(response) {\n console.log(response);\n }\n);","type":"js","displayName":"API - Angular API - DELETE","settings":{}},{"code":"$http({\n method: 'POST',\n url: BASE_URL + 'API_URL',\n data: JSON.stringify(someData)\n}).then(\n //Success Handler\n function(response) {\n console.log(response);\n },\n //Failure Handler\n function(response) {\n console.log(response);\n }\n);","type":"js","displayName":"API - Angular API - HTTP","settings":{}},{"code":"let call1 = $http.get(BASE_URL + 'API_URL');\nlet call2 = $http.get(BASE_URL + 'API_URL_2');\n\n$q.all([call1, call2]).then(\n //Success Handler\n function(responseArray) {\n console.log(responseArray);\n },\n //Failure Handler\n function(failureResponse) {\n console.log(failureResponse);\n }\n);","type":"js","displayName":"API - Angular API - Multiple GET","settings":{}},{"code":"const CONFIG = {\n headers: {\n 'gtmhub-application-name':'your-application-name'\n },\n params: {\n fields: 'name,id,email'\n }\n};\n\n$http.get(BASE_URL + 'API_URL', config).then(\n //Success Handler\n function(response) {\n console.log(response);\n },\n //Failure Handler\n function(response) {\n console.log(response);\n }\n);","type":"js","displayName":"API - Angular API with Config - GET","settings":{}},{"code":"const CONFIG = {\n headers: {\n 'gtmhub-application-name':'your-application-name'\n },\n params: {\n 'SomeQueryParameter': 'someValue'\n }\n};\n\n$http.post(BASE_URL + 'API_URL',\n JSON.stringify(someData),\n CONFIG\n).then(\n //Success Handler\n function(response) {\n console.log(response);\n },\n //Failure Handler\n function(response) {\n console.log(response);\n }\n);","type":"js","displayName":"API - Angular API with Config - POST","settings":{}},{"code":"const CONFIG = {\n headers: {\n 'gtmhub-application-name':'your-application-name'\n },\n params: {\n 'SomeQueryParameter': 'someValue'\n }\n};\n\n$http.patch(BASE_URL + 'API_URL',\n JSON.stringify(someData),\n CONFIG\n).then(\n //Success Handler\n function(response) {\n console.log(response);\n },\n //Failure Handler\n function(response) {\n console.log(response);\n }\n);","type":"js","displayName":"API - Angular API with Config - PATCH","settings":{}},{"code":"const CONFIG = {\n headers: {\n 'gtmhub-application-name':'your-application-name'\n },\n params: {\n 'SomeQueryParameter': 'someValue'\n }\n};\n\n$http.put(BASE_URL + 'API_URL',\n JSON.stringify(someData),\n CONFIG\n).then(\n //Success Handler\n function(response) {\n console.log(response);\n },\n //Failure Handler\n function(response) {\n console.log(response);\n }\n);","type":"js","displayName":"API - Angular API with Config - PUT","settings":{}},{"code":"const CONFIG = {\n headers: {\n 'gtmhub-application-name':'your-application-name'\n },\n params: {\n 'SomeQueryParameter': 'someValue'\n }\n};\n\n$http.delete(BASE_URL + 'API_URL', CONFIG).then(\n //Success Handler\n function(response) {\n console.log(response);\n },\n //Failure Handler\n function(response) {\n console.log(response);\n }\n);","type":"js","displayName":"API - Angular API with Config - DELETE","settings":{}},{"code":"function getPagedApiResults(url, recordLimit, config) {\n var deferred = $q.defer();\n let fullResult = [];\n config = config == null ? {} : config;\n config.params = config.params == null ? {} : config.params;\n\n //You may need to change \"take\" to \"limit\" for some API calls if you are getting unexpected results\n config.params.take = recordLimit;\n config.params.skip = 0;\n \n getResults();\n\n function getResults() {\n $http.get(url, config).then(\n function(response) {\n fullResult = fullResult.concat(response.data.items);\n config.params.skip = config.params.skip + recordLimit;\n\n if(response.data.totalCount < config.params.skip) {\n deferred.resolve({\n items: fullResult,\n totalCount: response.data.totalCount\n });\n } else {\n deferred.notify({\n message: 'Retreived ' + config.params.skip + ' of ' + response.data.totalCount + ' records',\n totalRecords: response.data.totalCount,\n retrievedRecords: config.params.skip\n });\n getResults();\n }\n }, \n function(response) {\n deferred.reject(response); \n }\n );\n }\n\n return deferred.promise;\n}","type":"js","displayName":"API - Angular Getting Paged API Results - Function","settings":{}},{"code":"getPagedApiResults(BASE_URL + 'api/v2/goals?fields=name', 10).then(\n //Handle success\n function(response) {\n console.log(response)\n },\n //Handle failure\n function(response) {\n console.log(response);\n },\n //Optional notification handler\n function(notification) {\n console.log(notification);\n }\n);","type":"js","displayName":"API - Angular Getting Paged API Results - Call","settings":{}},{"code":"const CONFIG = {\n headers: {\n 'gtmhub-application-name':'your-application-name'\n },\n params: {\n fields: 'name,id,email'\n }\n};\ngetPagedApiResults(BASE_URL + 'api/v2/users', 10, CONFIG).then(\n //Handle success\n function(response) {\n console.log(response)\n },\n //Handle failure\n function(response) {\n console.log(response);\n },\n //Optional notification handler\n function(notification) {\n console.log(notification);\n }\n);","type":"js","displayName":"API - Angular Getting Paged API Results - Call with Config","settings":{}},{"code":"$http.get('API_URL').then(\n //Success Handler\n function(response) {\n //Do something on success\n },\n //Failure Handler\n function(response) {\n console.log(response);\n if(response != null && response.config != null && response.config.headers['transaction-id'] != null) {\n alert('An error occurred. Transation ID: ' + response.config.headers['transaction-id']);\n } else {\n alert('An error occurred.');\n }\n }\n);","type":"js","displayName":"API - Angular Show Transaction ID in Failure","settings":{}},{"code":"function generateTransactionId() {\n return `${Math.random().toString().substring(2)}-${Math.random().toString().substring(2)}`\n}","type":"js","displayName":"API - Generate Transaction ID","settings":{}},{"code":"const ACCOUNT_ID = JSON.parse(localStorage.getItem(\"accountId\"));","type":"js","displayName":"API - Get Account ID","settings":{}},{"code":"const BASE_URL = window.location.hostname.replace(window.location.hostname.split('.').shift(),'https://app') + '/';","type":"js","displayName":"API - Get Base URL","settings":{}},{"code":"$.get('API_URL').done(function(response) {\n //Do something on success\n}).fail(function(response) {\n //Do something on failure. Use response.responseText to get the failure message\n});","type":"js","displayName":"API - jQuery Ajax Call - Get Call","settings":{}},{"code":"$.ajax({\n method: 'POST',\n url: 'API_URL',\n contentType: 'application/json; charset=utf-8',\n dataType: 'json',\n data: JSON.stringify('someData')\n}).done(function(response) {\n //Do something on success\n}).fail(function(response) {\n //Do something on failure. Use response.responseText to get the failure message\n});","type":"js","displayName":"API - jQuery Ajax Call - Ajax Call","settings":{}},{"code":"$.when(\n $.get('API_URL_1'),\n $.get('API_URL_2'),\n $.get('API_URL_3')\n).done(function(call1Response, call2Response, call3Response) {\n //Do something with the results\n}).fail(function(failedCallResponse) {\n //Do something with the failure.\n});","type":"js","displayName":"API - jQuery Ajax Call - Multiple Calls","settings":{}},{"code":"success: function(response) {\n angularScope.someVariable = response.someResult;\n angularScope.$apply();\n}","type":"js","displayName":"API - jQuery Ajax Call - Angular Data Model Changes","settings":{}},{"code":"function getPagedApiResults(url, recordLimit) {\n var deferred = $.Deferred();\n let skipLevel = 0;\n let fullResult = [];\n let hasQueryString = url.indexOf('?') > -1;\n getResults();\n\n function getResults() {\n $.get(url + (hasQueryString ? '&' : '?') + 'limit=' + recordLimit + '&skip=' + skipLevel).done(function(response) {\n fullResult = fullResult.concat(response.items);\n skipLevel = skipLevel + recordLimit;\n\n if(response.totalCount < skipLevel) {\n deferred.resolve({\n items: fullResult,\n totalCount: response.totalCount\n });\n } else {\n getResults();\n }\n }).fail(function(response) {\n deferred.reject(response); \n });\n }\n\n return deferred;\n}","type":"js","displayName":"API - jQuery Getting Paged API Results - Get Function","settings":{}},{"code":"getPagedApiResults(baseUrl + 'api/v2/tasks', 500).done(function(tasks) {\n //Do something with tasks\n }).fail(function(response) {\n //Do something on failure\n });","type":"js","displayName":"API - jQuery Getting Paged API Results - Calling Get Function","settings":{}},{"code":"function getPagedApiResultsAjax(ajaxOptions, recordLimit) {\n var deferred = $.Deferred();\n let skipLevel = 0;\n let fullResult = [];\n let hasQueryString = ajaxOptions.url.indexOf('?') > -1;\n let apiUrl = ajaxOptions.url;\n getResults();\n\n function getResults() {\n ajaxOptions.url = apiUrl + (hasQueryString ? '&' : '?') + 'take=' + recordLimit + '&skip=' + skipLevel;\n $.ajax(ajaxOptions).done(function(response) {\n fullResult = fullResult.concat(response.items);\n skipLevel = skipLevel + recordLimit;\n\n if(response.totalCount < skipLevel) {\n deferred.resolve({\n items: fullResult,\n totalCount: response.totalCount\n });\n } else {\n getResults();\n }\n }).fail(function(response) {\n deferred.reject(response); \n });\n }\n\n return deferred;\n}","type":"js","displayName":"API - jQuery Getting Paged API Results - Ajax Function","settings":{}},{"code":"getPagedApiResultsAjax({\n method: 'GET',\n url: angularScope.destinationBaseUrl + 'api/v1/dashboards?fields=name,id',\n contentType: 'application/json; charset=utf-8',\n dataType: 'json',\n headers: {\n 'gtmhub-accountId': angularScope.destinationAccountId,\n 'authorization': 'Bearer ' + angularScope.destinationApiToken\n } \n}, 100).done(function(response) {\n //Do something with the results\n}).fail(function(response) {\n //Do someting on failure\n});","type":"js","displayName":"API - jQuery Getting Paged API Results - Calling Ajax Function","settings":{}},{"code":"$timeout(function() {\n //Do something after the timeout\n}, 1000);","type":"js","displayName":"AngularJS - Angular Timeout","settings":{}},{"code":"<div ng-class=\"developer.accuracy < 0 ? 'positive' : 'negative'\"></div>","type":"html","displayName":"AngularJS - Conditional Classes - Single Class","settings":{}},{"code":"<div ng-class=\"{'negative': data.confidence < 0, 'positive': data.confidence >= 0}\"></div>","type":"html","displayName":"AngularJS - Conditional Classes - Multiple Classes","settings":{}},{"code":"<div ng-if=\"data && !data.metric_id\">\n <span>Shows if the condition was met</span>\n</div>","type":"html","displayName":"AngularJS - Conditional HTML - ng-show","settings":{}},{"code":"<div ng-if=\"data && !data.metric_id\">\n <span>Shows if the condition was met</span>\n</div>","type":"html","displayName":"AngularJS - Conditional HTML - ng-if","settings":{}},{"code":"const $http = this.inject(\"$http\");","type":"js","displayName":"AngularJS - Modules - http","settings":{}},{"code":"const $q = this.inject(\"$q\");","type":"js","displayName":"AngularJS - Modules - q","settings":{}},{"code":"const $timeout = this.inject(\"$timeout\");","type":"js","displayName":"AngularJS - Modules - timeout","settings":{}},{"code":"ng-init=\"objects = (data == undefined) ? [] : data.default\"","type":"html","displayName":"AngularJS - SQL Data - Standard ng-init","settings":{}},{"code":"let dataRows = (angularScope.data == undefined ? [] : [...angularScope.data.default]);","type":"js","displayName":"AngularJS - SQL Data - New Object from data.default","settings":{}},{"code":"ng-repeat=\"objective in objectives\"","type":"html","displayName":"AngularJS - ng-repeat - Simple Example","settings":{}},{"code":"ng-repeat=\"objective in objectives | orderBy: 'name'\"","type":"html","displayName":"AngularJS - ng-repeat - With Sorting","settings":{}},{"code":"ng-repeat=\"objective in objectives | filter: myFilter as filteredObjectives\"","type":"html","displayName":"AngularJS - ng-repeat - With Filtering","settings":{}},{"code":"angularScope.myFilter = function(objective) {\r\n return objective.name.length < 10;\r\n}","type":"js","displayName":"AngularJS - ng-repeat - With Filtering Function","settings":{}},{"code":"<action id=\"[{{data.ownerid}}]\" type=\"send-email\"></action>","type":"html","displayName":"Components - Action Component - User or team email dialog","settings":{}},{"code":"<action ids=\"{{data.ownerids}}\" type=\"send-emails\"></action>","type":"html","displayName":"Components - Action Component - User or team email dialog (multiple)","settings":{}},{"code":"<assignee id=\"{{data.id}}\"></assignee>","type":"html","displayName":"Components - Assignee Component - Single Owner","settings":{}},{"code":"<assignee ng-repeat=\"owner in objective.ownerids\" id=\"{{owner}}\"></assignee>","type":"html","displayName":"Components - Assignee Component - Multiple Owners","settings":{}},{"code":"<a href=\"#/users/{{user.user_id}}/user-details/\" target=\"_blank\">\n <assignee id=\"{{user.user_id}}\"></assignee>\n</a>","type":"html","displayName":"Components - Assignee Component - With a Link (User Roles Edit)","settings":{}},{"code":"<a href=\"#/employees/{{user.user_id}}/employee-details/\" target=\"_blank\">\n <assignee id=\"{{user.user_id}}\"></assignee>\n</a>","type":"html","displayName":"Components - Assignee Component - With a Link (Employee Profile)","settings":{}},{"code":"<attainment value=\"{{kr.progress}}\"></attainment>","type":"html","displayName":"Components - Attainment Component - Bar Only","settings":{}},{"code":"<attainment value=\"{{kr.progress}}\"></attainment><span>{{kr.progress | number : 1}}%</span>","type":"html","displayName":"Components - Attainment Component - Bar With Value After","settings":{}},{"code":"<avatars size=\"s-20\" ids=\"data.ownerids\" preview-number=\"3\"></avatars>","type":"html","displayName":"Components - Avatar Component","settings":{}},{"code":"<confidence-preview confidence-value=\"{{data.confidence}}\"></confidence-preview>","type":"html","displayName":"Components - Confidence Preview Component","settings":{}},{"code":"<div class=\"gh-select-v2\">\n <gh-daterangepicker ng-model=\"myVariable\"></gh-daterangepicker>\n</div>","type":"html","displayName":"Components - Date Range Picker - Component","settings":{}},{"code":"#wrapperDiv gh-daterangepicker {\n position: relative;\n display: flex;\n width: 100%;\n}","type":"css","displayName":"Components - Date Range Picker - Style","settings":{}},{"code":"<editable-textarea class=\"visible\" markdown=\"true\" mentions=\"true\" ng-model=\"newComment\"></editable-textarea>","type":"html","displayName":"Components - Editable - Textarea","settings":{}},{"code":"<mentioning text=\"{{comment.text}}\"></mentioning>","type":"html","displayName":"Components - Editable - Mentioning","settings":{}},{"code":"<div marked=\"data.rawcomment\"></div>","type":"html","displayName":"Components - Markdown Directive","settings":{}},{"code":"<metric field-name=\"sql_name\" name=\"Name for created KR/KPI\">\n {{ data.sql_name | number : 2 }}\n</metric>","type":"html","displayName":"Components - Metric Compnent","settings":{}},{"code":"<div ng-show=\"data && data.default.length === 0\">\n <no-insight-data></no-insight-data>\n</div>","type":"html","displayName":"Components - Nothing Found Component - Generic","settings":{}},{"code":"<no-insight-data title=\"Title_Text\" subtext=\"text_under_title\"></no-insight-data>","type":"html","displayName":"Components - Nothing Found Component - Custom","settings":{}},{"code":"<gtmhub-bar size=\"{{data.done_goals}}\" count=\"{{data.goal_count}}\"></gtmhub-bar>","type":"html","displayName":"Components - Progress Bar - Default Coloring","settings":{}},{"code":"#wrapperDiv .good .gtmhub-bar-holder .gtmhub-bar .progress {\n background: green;\n}\n\n#wrapperDiv .ok .gtmhub-bar-holder .gtmhub-bar .progress {\n background: yellow;\n}\n\n#wrapperDiv .bad .gtmhub-bar-holder .gtmhub-bar .progress {\n background: red;\n}","type":"css","displayName":"Components - Progress Bar - Custom Coloring","settings":{}},{"code":"<gtmhub-bar ng-class=\"data.goals_done_pct > 0.5 ? 'good' : data.goals_done_pct > 0.25 ? 'ok' : 'bad'\" size=\"{{data.done_goals}}\" count=\"{{data.goal_count}}\"></gtmhub-bar>","type":"html","displayName":"Components - Progress Bar - Custom Coloring","settings":{}},{"code":"<viewobjectivelist title=\"List Title\" objectives=\"data.default\"></viewobjectivelist>","type":"html","displayName":"Components - View Objective List Component","settings":{}},{"code":"angularScope.exportToCSV = function() {\n\tlet csv = 'data:text/csv;charset=utf-8,';\n\tcsv += '\"Task\",\"Assignee\",\"Status\",\"Latest Comment\"\\r\\n'\n\tfor(const row of someArray) {\n\t\tlet rowCsv = [\n\t\t\trow.task_name, \n\t\t\trow.assignee_name, \n\t\t\trow.status,\n\t\t\trow.latestComment\n\t\t]\n\t\tcsv += '\"' + rowCsv.join('\",\"') + '\"\\r\\n';\n\t}\n\n //Generate a download link and click it\n\tvar encodedUri = encodeURI(csv);\n\tvar link = document.createElement(\"a\");\n\tlink.setAttribute(\"href\", encodedUri);\n\tlink.setAttribute(\"download\", \"export.csv\");\n\tdocument.body.appendChild(link);\n\tlink.click();\n\tlink.remove();\n}","type":"js","displayName":"Data Exports - Download CSV","settings":{}},{"code":"<div>{{ data.number | currency : \"€\" }}</div>","type":"html","displayName":"Formatting - Currency Formatting - Change Currency","settings":{}},{"code":"<div>{{ data.number | currency : 3}}</div>","type":"html","displayName":"Formatting - Currency Formatting - Decimal","settings":{}},{"code":"<div>{{ data.number | currency }}</div>","type":"html","displayName":"Formatting - Currency Formatting - Default","settings":{}},{"code":"<div> {{date.datecreated | date}} </div>","type":"html","displayName":"Formatting - Date Formatting - Default","settings":{}},{"code":"<div> {{date.datecreated | date : <format> }} </div>","type":"html","displayName":"Formatting - Date Formatting - With Formatting","settings":{}},{"code":"{{ data.message || 'N/A'}}","type":"html","displayName":"Formatting - If Null Display This","settings":{}},{"code":"<div> {{date.field_name | number}} </div>","type":"html","displayName":"Formatting - Number Formatting - Default","settings":{}},{"code":"<div> {{date.field_name | number : 2}} </div>","type":"html","displayName":"Formatting - Number Formatting - Specify Decimal","settings":{}},{"code":"var chart = new google.visualization.BarChart(document.getElementById('targetDiv'));\nchart.draw(data, options);\n$(window).resize(function() {\n if (chart1 == \"done\") {\n chart1 = \"waiting\";\n setTimeout(function() {\n drawChart();\n chart1 = \"done\"\n }, 1000);\n }\n});","type":"js","displayName":"Google Visualization - Chart Resize","settings":{}},{"code":"var myChart = new google.visualization.ComboChart(document.getElementById(\"targetDiv\"));\n\ngoogle.visualization.events.addListener(myChart, \"ready\", function () {\n document.getElementById(\"<your-div>\").outerHTML = \"<a download='image.png' href='\" + myChart.getImageURI() + \"'>Download Image</a>\";\n});\n\nmyChart.draw(data, options);","type":"js","displayName":"Google Visualization - Download Chart Image","settings":{}},{"code":"var id = \"chart_id\";\nvar rawdata = angular.element($(\"#\" + id)).scope().data.default;\nlet datesMap = [['axis_x_label', 'axis_y_label']];\nfor (let i = 0; i < rawdata.length; i++) {\n datesMap.push([moment(rawdata[i].date).format(\"MMM 'YY\"), rawdata[i].count]);\n}\nvar data = google.visualization.arrayToDataTable(datesMap);\nvar options = {\n chartArea: { left: 50, bottom: 60, top: 30, right: 20, width: \"100%\", height: \"100%\" },\n width: document.getElementById(id).width,\n height: 280,\n series: [{ color: '#09B180' }],\n vAxis: {\n baselineColor: \"#ccc\",\n textStyle: { color: \"#777\", fontSize: 12 },\n gridlines: { count: 3, color: \"#e7e7e7\" }\n },\n hAxis: {\n baselineColor: \"#ccc\",\n slantedText: true,\n slantedTextAngle: \"90\",\n titleTextStyle: { color: \"#333\", fontSize: 12 }\n }\n};\n\nvar chart = new google.visualization.AreaChart(document.getElementById('#chartDiv'));\nchart.draw(data, options);\n","type":"js","displayName":"Google Visualization - Line Chart","settings":{}},{"code":"var data = google.visualization.arrayToDataTable([\n ['Team | Data 1 name', 'OKR Completion Rate | Data 2 name'],\n ['HR', 71],\n ['Engineering', 72],\n ['Sales', 62],\n ['Marketing', 82],\n ['IT', 67]\n]);\n\nvar options = {\n title: 'My Chart Title'\n};\n\nvar chart = new google.visualization.PieChart(document.getElementById('#chartDiv'));\n\nchart.draw(data, options);","type":"js","displayName":"Google Visualization - Pie Chart","settings":{}},{"code":"#wrapperDiv .chartContainer {\n height: 120px; /* Should be 1/2 the gauge height + 20px */\n overflow: hidden;\n position: relative;\n}\n\n#wrapperDiv .vertical-centered-flex {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n#wrapperDiv .gaugeValue {\n position: absolute;\n width: 100%;\n top: 75px;\n text-align: center;\n font-size: 30px;\n font-weight: 300;\n z-index: 1;\n}","type":"css","displayName":"Google Visualization - Standard Gauge Chart - Standard Gauge","settings":{}},{"code":"<div id=\"wrapperDiv\">\n <div class=\"vertical-centered-flex\" ng-show=\"data.<property> != undefined\">\n <div class=\"bigger-120 medium\">Objectives Over 50% Attainment</div>\n <div class=\"chartContainer\">\n <div class=\"gaugeValue\">\n <metric field-name=\"<property>\">{{data.<property> | number : 0}}%</metric>\n </div>\n <div id=\"wrapperDivGaugeContainer\"></div>\n </div>\n </div>\n <div ng-show=\"data.<property> === undefined\">\n <no-insight-data></no-insight-data>\n </div>\n</div>","type":"html","displayName":"Google Visualization - Standard Gauge Chart - Standard Gauge","settings":{}},{"code":"drawGauge('overFiftyPercentAttainmentGaugeContainer', 'Objectives Over 50% Attainment', angularScope.data.pct_over_50_pct, 100, 'green');","type":"js","displayName":"Google Visualization - Standard Gauge Chart - Standard Gauge Calling Function","settings":{}},{"code":"// Defaults:\n// maxValue = 100\n// color = Quantive Results green\n// height = 200 (in pixels)\n// width = 200 (in pixels)\n// thickness = 0.2 (20% of a full circle)\nfunction drawGauge(targetDivName, gaugeTitle, gaugeValue, maxValue, color, height, width, thickness) {\n //Check target div\n let targetDiv = document.getElementById(targetDivName)\n if(targetDiv == null) {\n console.error('Target div for the gauge is not valid');\n return\n }\n\n maxValue = maxValue == null ? 100 : maxValue;\n height = height == null ? 200 : height;\n width = width == null ? 200 : width;\n thickness = thickness == null ? 0.2 : thickness;\n color = color == null ? '#15C679' : color;\n\n //Make sure the gague value is a number\n let displayValue = 0;\n if(typeof(gaugeValue) === 'number') {\n displayValue = gaugeValue;\n } else if(gaugeValue == null) {\n displayValue = 0;\n } else {\n try {\n displayValue = parseFloat(gaugeValue);\n } catch {\n console.error('Invalid gauge value');\n return;\n }\n }\n\n //Make sure our data fits within our window\n displayValue = displayValue < 0 ? 0 : displayValue > maxValue ? maxValue : displayValue;\n\n let chartData = [\n [gaugeTitle, 'Full Amount'],\n [gaugeTitle, displayValue],\n ['', maxValue - displayValue],\n ['', maxValue]\n ];\n\n var data = google.visualization.arrayToDataTable(chartData);\n\n var options = {\n chartArea:{left: 0, bottom: 0, top: 20, width:\"100%\", height: \"100%\"},\n width: width,\n height: height,\n pieHole: 1 - thickness,\n pieStartAngle: 270,\n pieSliceText: 'none',\n tooltip: {text: 'value'},\n legend: 'none',\n slices: { \n 0: {color: color},\n 1: {color: '#E8EDF2'},\n 2: {color: 'none'}\n },\n };\n\n var chart = new google.visualization.PieChart(targetDiv);\n chart.draw(data, options);\n}","type":"js","displayName":"Google Visualization - Standard Gauge Chart - Standard Gauge Draw Function","settings":{}},{"code":"myArray.sort();","type":"js","displayName":"Javascript - Array Sorting - Simple Sort","settings":{}},{"code":"myArray.sort(function(a,b) {\n return a - b;\n});","type":"js","displayName":"Javascript - Array Sorting - Numeric Sort","settings":{}},{"code":"myArray.sort(function(a,b) {\n return a.name.localeCompare(b.name, undefined, {sensitivity: 'base'});\n});","type":"js","displayName":"Javascript - Array Sorting - Sort On String Property","settings":{}},{"code":"for (const prop in someObject) {\n elements[prop].isAwesome = true; \n}","type":"js","displayName":"Javascript - For In Loop - Simple Object","settings":{}},{"code":"for (const prop in someObject) {\n if (Object.hasOwn(someObject, prop)) {\n someObject[prop].isAwesome = true;\n }\n}","type":"js","displayName":"Javascript - For In Loop - Complex Object","settings":{}},{"code":"for(const arrayElement of someArray) {\n arrayElement.isAwesome = true;\n}","type":"js","displayName":"Javascript - For Of Loop","settings":{}},{"code":"#wrapperDiv {\r\n white-space: pre-line;\r\n}","type":"css","displayName":"Javascript - Newlines","settings":{}},{"code":"<script>\r\nwidget().on('ready', function(evt, angularScope) {\r\n\r\n});\r\n</script>","type":"js","displayName":"Javascript - Script Tag with Widget Load","settings":{}},{"code":"for(let i = 0; i < someArray.length; i++) {\n someArray[i].property = true;\n}\n","type":"js","displayName":"Javascript - Standard For Loop","settings":{}},{"code":"someArray.forEach((someElement) => {\n someElement.isAwesome = true;\n});","type":"js","displayName":"Javascript - forEach Function","settings":{}},{"code":"requirejs(['plotly'], function (Plotly) {\n // We set timeout so the markup has enough time to initialize\n setTimeout(function () {\n let trace1 = {\n x: xdata, // Change xdata to appropriate data-->\n y: ydata, // Change ydata to appropriate data-->\n type: 'bar'\n };\n let plotData = [trace1];\n var layout = {\n title: 'Example Bar Chart',\n xaxis: {\n title: 'x-axis'\n },\n yaxis: {\n title: 'y-axis'\n }\n };\n\n Plotly.newPlot('plotly-container', plotData, layout); // Change 'plotly-container' to match div id\n }, 10)\n});\n","type":"js","displayName":"Plotly - Bar Chart","settings":{}},{"code":"requirejs(['plotly'], function (Plotly) {\n setTimeout(function () {\n\n let trace1 = {\n x: xdataBar, // Change xdataBar to appropriate data\n y: ydataBar, // Change ydataBar to appropriate data\n marker: { color: 'rgb(164, 194, 244)' },\n type: 'bar',\n name: 'Bar Title'\n };\n let trace2 = {\n x: xdataLine, // Change xdataLine to appropriate data\n y: ydataLine, // Change ydataLine to appropriate data\n line: { color: 'rgb(142, 124, 195)' },\n type: 'scatter',\n name: 'Line Title'\n };\n\n\n let data = [trace1, trace2];\n // To add more plates create more traces and add to data array\n let layout = {\n title: 'Chart Title',\n xaxis: {\n title: 'x-axis',\n showgrid: false,\n zeroline: false\n },\n yaxis: {\n title: 'y-axis',\n showline: true\n }\n };\n Plotly.newPlot('plotly-container', data, layout); // Change 'plotly-container' to match div id\n }, 10)\n});","type":"js","displayName":"Plotly - Dual Plot Line Chart","settings":{}},{"code":"requirejs(['plotly'], function (Plotly) {\n // We set timeout so the markup has enough time to initialize\n setTimeout(function () {\n let trace1 = {\n x: xdata, // change xdata to appropriate data\n y: ydata, // change ydata to appropriate data\n type: 'scatter'\n };\n let plotData = [trace1];\n var layout = {\n title: 'Example Line Chart',\n xaxis: {\n title: 'x-axis',\n showgrid: false,\n zeroline: false\n },\n yaxis: {\n title: 'y-axis',\n showline: true\n }\n };\n\n Plotly.newPlot('plotly-container', plotData, layout); // plotly-container - must match div id\n }, 10)\n});","type":"js","displayName":"Plotly - Line Chart","settings":{}},{"code":"<a ui-sref=\"._singleGoal.goal._metric.metric({id: okr.objective_id, metricId: okr.kr_id})\">{{okr.kr_name}}</a>","type":"html","displayName":"Quantive Results Objects - Key Result - Simple Link","settings":{}},{"code":"<img src=\"/dist/img/icons/kr.svg\">","type":"html","displayName":"Quantive Results Objects - Key Result - Icon","settings":{}},{"code":"<div class=\"i_icon_text_pair\">\r\n <img src=\"/dist/img/icons/kr.svg\"/>\r\n <a ui-sref=\"._singleGoal.goal._metric.metric({id: okr.objective_id, metricId: okr.kr_id})\">{{okr.kr_name}}</a>\r\n</div>","type":"html","displayName":"Quantive Results Objects - Key Result - Link with Icon","settings":{}},{"code":"<a ui-sref=\"._singleGoal.goal({id: okr.objective_id})\">{{ okr.objective_name }}</a>","type":"html","displayName":"Quantive Results Objects - Objective - Simple Link","settings":{}},{"code":"<img src=\"/dist/img/icons/objective.svg\">","type":"html","displayName":"Quantive Results Objects - Objective - Icon","settings":{}},{"code":"<div class=\"i_icon_text_pair\">\r\n <img src=\"/dist/img/icons/objective.svg\"/>\r\n <a ui-sref=\"._singleGoal.goal({id: okr.objective_id})\">{{ okr.objective_name }}</a>\r\n</div>","type":"html","displayName":"Quantive Results Objects - Objective - Link with Icon","settings":{}},{"code":"<div class=\"i_primary_value_with_label\">\n <div>\n <metric field-name=\"variable\" name=\"Name to show in automation helper\">\n {{data.variable | number : 0}}\n </metric>\n </div>\n <div>Sub Title To Show In Insight</div>\n</div>","type":"html","displayName":"Quantive Results Objects - Primary Value - Primary Value with Label","settings":{}},{"code":"<div class=\"i_primary_value\">\n <metric field-name=\"variable\" name=\"Name to show in automation helper\">\n {{data.variable | number : 0}}\n </metric>\n</div>","type":"html","displayName":"Quantive Results Objects - Primary Value - Primary Value","settings":{}},{"code":"<a ui-sref=\"._task.task({taskId: task.task_id})\">{{task.taskname}}</a>","type":"html","displayName":"Quantive Results Objects - Tasks - Link","settings":{}},{"code":"<img src=\"/dist/img/icons/task.svg\">","type":"html","displayName":"Quantive Results Objects - Tasks - Icon","settings":{}},{"code":"<div class=\"i_icon_text_pair\">\r\n <img src=\"/dist/img/icons/task.svg\">\r\n <a ui-sref=\"._task.task({taskId: task.task_id})\">{{task.taskname}}</a>\r\n</div>","type":"html","displayName":"Quantive Results Objects - Tasks - Link with Icon","settings":{}},{"code":"<div class=\"gh-b gh-prime\" ui-sref=\"._task.task\">Create new task</div>","type":"html","displayName":"Quantive Results Objects - Tasks - Create a Task","settings":{}},{"code":"SELECT STRING_AGG(t.someField, 'separator') AS desired_field_name","type":"sql","displayName":"SQL - Aggregations - String Aggregation","settings":{}},{"code":"JSON_AGG(\r\n JSON_BUILD_OBJECT(\r\n 'prop1', r.sqlCol1,\r\n 'prop2', r.sqlCol2\r\n )\r\n)::text AS json_result","type":"sql","displayName":"SQL - Aggregations - JSON Aggregation","settings":{}},{"code":"CASE WHEN table_alias.customfields <> '' \r\n THEN (table_alias.customfields::json ->> 'custom_field_sys_name')\r\n ELSE '' \r\nEND AS chosen_name","type":"sql","displayName":"SQL - Custom Fields - Get Custom Field Value","settings":{}},{"code":"CASE WHEN '%%insightboard_parameter_key%%' <> ''\r\n THEN CASE WHEN table_alias.customfields <> '' \r\n THEN (table_alias.customfields::json ->> 'custom_field_key')\r\n ELSE '' \r\n END = ANY(string_to_array('%%insightboard_parameter_key%%', ','))\r\n ELSE true\r\nEND","type":"sql","displayName":"SQL - Custom Fields - Filter on Custom Field Value","settings":{}},{"code":"FILTER (WHERE something1 > something2)","type":"sql","displayName":"SQL - Filter Clause - Filter Clause","settings":{}},{"code":"SELECT COUNT(1) AS resolved_epics,\r\n COUNT(1) FILTER (WHERE ji.resolutiondate > ji.duedate) AS overdue_isues,\r\n COUNT(1) FILTER (WHERE ji.resolutiondate > ji.duedate) / (COUNT(1)::numeric) AS percent_overdue\r\nFROM jira_issues ji","type":"sql","displayName":"SQL - Filter Clause - Full Example","settings":{"ignoreInOfflineEditor":false}},{"code":"CASE WHEN '%%param_name%%' <> '' \r\n THEN field_name = '%%param_name%%'\r\n ELSE true \r\nEND","type":"sql","displayName":"SQL - Insightboard Parameter Filters - List","settings":{}},{"code":"CASE WHEN '%%param_name%%' <> ''\r\n THEN field_name = ANY(string_to_array('%%param_name%%', ','))\r\n ELSE true\r\nEND ","type":"sql","displayName":"SQL - Insightboard Parameter Filters - Multi-List","settings":{}},{"code":"CASE WHEN '%%param_name%%' <> ''\r\n THEN g.ownerids::text[] && string_to_array('%%param_name%%', ',')\r\n ELSE true\r\nEND","type":"sql","displayName":"SQL - Insightboard Parameter Filters - Multi-List to Array","settings":{}},{"code":"CASE WHEN '%%param_name%%' <> '' \r\n THEN TO_DATE(SUBSTRING('%%param_name%%',1,10), 'YYYY-MM-DD') > field_name\r\n ELSE true \r\nEND","type":"sql","displayName":"SQL - Insightboard Parameter Filters - Single Date","settings":{}},{"code":"gtmhub.DURING('some_date_field', '%%date_range%%')","type":"sql","displayName":"SQL - Insightboard Parameter Filters - Date Range","settings":{}},{"code":"CASE WHEN '%%session%%' <> ''\r\n THEN g.sessionid = ANY(string_to_array('%%session%%', ','))\r\n ELSE true\r\nEND","type":"sql","displayName":"SQL - Insightboard Parameter Filters - Session","settings":{}},{"code":"CASE WHEN '%%teams_and_people%%' <> ''\r\n THEN g.ownerids::text[] && string_to_array('%%teams_and_people%%', ',')\r\n ELSE true\r\nEND","type":"sql","displayName":"SQL - Insightboard Parameter Filters - Teams and People","settings":{}},{"code":"CASE \r\n WHEN '%%tags%%' <> ''\r\n THEN EXISTS(\r\n SELECT 1\r\n FROM quantiveresultsgoaltags gt\r\n WHERE gt.goal_id = g.id\r\n AND gt.name = ANY(string_to_array('%%tags%%', ','))\r\n )\r\n ELSE true \r\nEND ","type":"sql","displayName":"SQL - Insightboard Parameter Filters - Objective Tags","settings":{}},{"code":"(\r\n SELECT DISTINCT ON(ms.metricid) ms.metricid,\r\n ms.confidence,\r\n ms.comment\r\n FROM quantiveresultsmetricsnapshots ms\r\n ORDER BY ms.metricid, ms.createdat DESC\r\n) ms","type":"sql","displayName":"SQL - Newest Metric Snapshot","settings":{}},{"code":"QuantiveResultsAssignees","type":"sql","displayName":"SQL - Quantive Data Sources - Assignees","settings":{"quantiveDS":true}},{"code":"QuantiveResultsCustomFields","type":"sql","displayName":"SQL - Quantive Data Sources - Custom Fields","settings":{"quantiveDS":true}},{"code":"QuantiveResultsGoals","type":"sql","displayName":"SQL - Quantive Data Sources - Goals","settings":{"quantiveDS":true}},{"code":"QuantiveResultsGoalTags","type":"sql","displayName":"SQL - Quantive Data Sources - Goal Tags","settings":{"quantiveDS":true}},{"code":"QuantiveResultsKPIGroups","type":"sql","displayName":"SQL - Quantive Data Sources - KPI Groups","settings":{"quantiveDS":true}},{"code":"QuantiveResultsKPIGroupsKPIs","type":"sql","displayName":"SQL - Quantive Data Sources - KPI Groups K P Is","settings":{"quantiveDS":true}},{"code":"QuantiveResultsKPIs","type":"sql","displayName":"SQL - Quantive Data Sources - KPIs","settings":{"quantiveDS":true}},{"code":"QuantiveResultsKPISnapshots","type":"sql","displayName":"SQL - Quantive Data Sources - KPI Snapshots","settings":{"quantiveDS":true}},{"code":"QuantiveResultsMetrics","type":"sql","displayName":"SQL - Quantive Data Sources - Metrics","settings":{"quantiveDS":true}},{"code":"QuantiveResultsMetricSnapshots","type":"sql","displayName":"SQL - Quantive Data Sources - Metric Snapshots","settings":{"quantiveDS":true}},{"code":"QuantiveResultsPlanningSessions","type":"sql","displayName":"SQL - Quantive Data Sources - Planning Sessions","settings":{"quantiveDS":true}},{"code":"QuantiveResultsRoles","type":"sql","displayName":"SQL - Quantive Data Sources - Roles","settings":{"quantiveDS":true}},{"code":"QuantiveResultsSessionCadences","type":"sql","displayName":"SQL - Quantive Data Sources - Session Cadences","settings":{"quantiveDS":true}},{"code":"QuantiveResultsTasks","type":"sql","displayName":"SQL - Quantive Data Sources - Tasks","settings":{"quantiveDS":true}},{"code":"QuantiveResultsTaskSnapshots","type":"sql","displayName":"SQL - Quantive Data Sources - Task Snapshots","settings":{"quantiveDS":true}},{"code":"QuantiveResultsTeamMembers","type":"sql","displayName":"SQL - Quantive Data Sources - Team Members","settings":{"quantiveDS":true}},{"code":"QuantiveResultsTeams","type":"sql","displayName":"SQL - Quantive Data Sources - Teams","settings":{"quantiveDS":true}},{"code":"QuantiveResultsUserRoles","type":"sql","displayName":"SQL - Quantive Data Sources - User Roles","settings":{"quantiveDS":true}},{"code":"QuantiveResultsUsers","type":"sql","displayName":"SQL - Quantive Data Sources - Users","settings":{"quantiveDS":true}},{"code":"QuantiveResultsUsers","type":"sql","displayName":"SQL - Quantive Data Sources - Users","settings":{"quantiveDS":true}},{"code":"QuantiveResultsSignins","type":"sql","displayName":"SQL - Quantive Data Sources - Signins","settings":{"quantiveDS":true}},{"code":"DATE_TRUNC('day', ji.resolutiondate)","type":"sql","displayName":"SQL - Working with Dates - Truncating Timestamps","settings":{}},{"code":"SELECT COUNT(1) AS resolved_epics,\r\n COUNT(1) FILTER (WHERE DATE_TRUNC('day', ji.resolutiondate) > ji.duedate) AS overdue_epics,\r\n (COUNT(1) FILTER (WHERE DATE_TRUNC('day', ji.resolutiondate) > ji.duedate)::numeric / COUNT(1)) * 100 AS percent_overdue\r\nFROM jira_issues ji","type":"sql","displayName":"SQL - Working with Dates - Comparison with Truncating","settings":{"ignoreInOfflineEditor":false}},{"code":"SELECT date '2014-01-01' + interval '1' month * s.a AS date\r\nFROM generate_series(0,1000,1) AS s(a)","type":"sql","displayName":"SQL - Working with Dates - Generate Series","settings":{}},{"code":"g.customfields::json ->> 'obj_priority'","type":"sql","displayName":"SQL - Working with JSON - Get Object Property","settings":{}},{"code":"arr::json ->> 1 AS second_array_element","type":"sql","displayName":"SQL - Working with JSON - Get Array Element","settings":{}},{"code":"my_json::json #>> '{a, a2}' AS a2_in_a\r\n","type":"sql","displayName":"SQL - Working with JSON - Get Nested Element","settings":{}},{"code":"<div id=\"wrapperDiv\">\n <div class=\"i_title\">{{insight.title}}</div>\n <div class=\"i_description_text\">{{insight.description}}</div>\n <div class=\"i_flex_vertical i_width100 i_space_top30px\">\n <div class=\"i_primary_value_with_label\">\n <div>\n <metric field-name=\"variable\" name=\"Name to show in automation helper\">\n {{data.variable | number : 0}}\n </metric>\n </div>\n <div>Sub Title To Show In Insight</div>\n </div>\n </div>\n</div>","type":"html","displayName":"Standard Displays - Scalar Insights","setWrapperDivNameOnInsert":true,"settings":{"setWrapperDivNameOnInsert":true}},{"code":"<div id=\"wrapperDiv\">\n <div class=\"i_title\">{{insight.title}}</div>\n <div class=\"i_description_text\">{{insight.description}}</div>\n <div class=\"i_flex_horizontal i_width100 i_space_top30px\">\n <div class=\"i_flex_vertical i_width50 i_border_right\">\n <div class=\"i_primary_value_with_label\">\n <div>\n <metric field-name=\"variable\" name=\"Name to show in automation helper\">\n {{data.variable | number : 0}}\n </metric>\n </div>\n <div>Sub Title To Show In Insight</div>\n </div>\n </div>\n <div class=\"i_flex_vertical i_width50\">\n <div class=\"i_primary_value_with_label\">\n <div>\n <metric field-name=\"variable\" name=\"Name to show in automation helper\">\n {{data.variable | number : 0}}\n </metric>\n </div>\n <div>Sub Title To Show In Insight</div>\n </div>\n </div>\n </div>\n</div>","type":"html","displayName":"Standard Displays - Scalar Insights - Two Metric Insight","setWrapperDivNameOnInsert":true,"settings":{"setWrapperDivNameOnInsert":true}},{"code":"<div id=\"wrapperDiv\">\n <div class=\"i_title\">{{insight.title}}</div>\n <div class=\"i_description_text\">{{insight.description}}</div>\n <div class=\"i_flex_horizontal i_width100 i_space_top30px\">\n <div class=\"i_flex_vertical i_width33 i_border_right\">\n <div class=\"i_primary_value_with_label\">\n <div>\n <metric field-name=\"variable\" name=\"Name to show in automation helper\">\n {{data.variable | number : 0}}\n </metric>\n </div>\n <div>Sub Title To Show In Insight</div>\n </div>\n </div>\n <div class=\"i_flex_vertical i_width33 i_border_right\">\n <div class=\"i_primary_value_with_label\">\n <div>\n <metric field-name=\"variable\" name=\"Name to show in automation helper\">\n {{data.variable | number : 0}}\n </metric>\n </div>\n <div>Sub Title To Show In Insight</div>\n </div>\n </div>\n <div class=\"i_flex_vertical i_width33\">\n <div class=\"i_primary_value_with_label\">\n <div>\n <metric field-name=\"variable\" name=\"Name to show in automation helper\">\n {{data.variable | number : 0}}\n </metric>\n </div>\n <div>Sub Title To Show In Insight</div>\n </div>\n </div>\n </div>\n</div>","type":"html","displayName":"Standard Displays - Scalar Insights - Three Metric Insight","setWrapperDivNameOnInsert":true,"settings":{"setWrapperDivNameOnInsert":true}},{"code":"<div id=\"wrapperDiv\">\n <div class=\"i_title\">{{insight.title}}</div>\n <div class=\"i_description_text\">{{insight.description}}</div>\n <div class=\"i_flex_horizontal i_width100 i_centered_text i_space_top30px\">\n <div class=\"i_flex_vertical i_width25 i_border_right\">\n <div class=\"i_primary_value_with_label\">\n <div>\n <metric field-name=\"variable\" name=\"Name to show in automation helper\">\n {{data.variable | number : 0}}\n </metric>\n </div>\n <div>Sub Title To Show In Insight</div>\n </div>\n </div>\n <div class=\"i_flex_vertical i_width25 i_border_right\">\n <div class=\"i_primary_value_with_label\">\n <div>\n <metric field-name=\"variable\" name=\"Name to show in automation helper\">\n {{data.variable | number : 0}}\n </metric>\n </div>\n <div>Sub Title To Show In Insight</div>\n </div>\n </div>\n <div class=\"i_flex_vertical i_width25 i_border_right\">\n <div class=\"i_primary_value_with_label\">\n <div>\n <metric field-name=\"variable\" name=\"Name to show in automation helper\">\n {{data.variable | number : 0}}\n </metric>\n </div>\n <div>Sub Title To Show In Insight</div>\n </div>\n </div>\n <div class=\"i_flex_vertical i_width25\">\n <div class=\"i_primary_value_with_label\">\n <div>\n <metric field-name=\"variable\" name=\"Name to show in automation helper\">\n {{data.variable | number : 0}}\n </metric>\n </div>\n <div>Sub Title To Show In Insight</div>\n </div>\n </div>\n </div>\n</div>","type":"html","displayName":"Standard Displays - Scalar Insights - Four Metric Insight","setWrapperDivNameOnInsert":true,"settings":{"setWrapperDivNameOnInsert":true}},{"code":"<div id=\"wrapperDiv\">\n <div class=\"i_title i_sticky_header\">{{insight.title}}</div>\n <div class=\"i_description_text\">{{insight.description}}</div>\n\n <div class=\"i_width100\" ng-show=\"data.default.length > 0\">\n <div insight-table table-items=\"data.default\" items-per-page=\"10\" mode=\"inview\">\n <table class=\"i_table\">\n <tr>\n <th ng-click=\"orderKey = 'name'; reverse = !reverse;\">Objective/Key Result</th>\n <th class=\"i_centered_text\">Owner(s)/Team(s)</th>\n <th class=\"i_centered_text\" ng-click=\"orderKey = 'progress'; reverse = !reverse;\">Progress</th>\n <th class=\"i_centered_text\" ng-click=\"orderKey = 'confidence'; reverse = !reverse;\">Confidence</th>\n <th ng-click=\"orderKey = 'last_update'; reverse = !reverse;\">Last Update and Comment</th>\n </tr>\n <tr ng-repeat=\"okr in data.default | orderBy : orderKey : reverse | limitTo : $limit : $skip\">\n <td>\n <div class=\"i_icon_text_pair\">\n <img src=\"/dist/img/icons/objective.svg\"/>\n <a ui_sref=\"._singleGoal.goal({id: okr.id})\">{{ okr.name }}</a>\n </div>\n </td>\n <td>\n <div class=\"i_icon_text_pair\">\n <img src=\"/dist/img/icons/kr.svg\"/>\n <a ui-sref=\"._singleGoal.goal._metric.metric({id: okr.goalid, metricId: okr.id})\">{{okr.name}}</a>\n </div>\n </td>\n <td>\n <avatars size=\"s-20\" ids=\"okr.ownerids\" preview-number=\"3\"></avatars>\n </td>\n <td class=\"i_centered_text\">\n <div>{{okr.progress * 100| number : 1}}%</div>\n <attainment value=\"{{okr.progress * 100}}\"></attainment>\n </td>\n <td class=\"i_centered_text\">\n <confidence-preview confidence-value=\"{{okr.confidence}}\"></confidence-preview>\n </td>\n <td>\n <div class=\"i_flex_horizontal\">\n {{okr.last_update | date}} \n <avatars size=\"s-20\" ids=\"[okr.last_update_by]\" preview-number=\"3\"></avatars>\n </div>\n <div>{{okr.last_comment}}</div>\n </td>\n </tr>\n </table>\n </div>\n </div>\n \n <div class=\"i_space_top30px\" ng-if=\"data.default.length == 0\">\n <no-insight-data title=\"No OKRs Found\"></no-insight-data>\n </div>\n</div>","type":"html","displayName":"Standard Displays - Table Insights - Standard Table Insight","setWrapperDivNameOnInsert":true,"settings":{"setWrapperDivNameOnInsert":true}},{"code":"<style>\n #wrapperDiv .i_large_insight_header{\n height: 90px;\n }\n\n #wrapperDiv .i_sticky_table_header_large th{\n top: 58px;\n }\n\n #wrapperDiv .pull-right{\n margin-left: auto;\n margin-right: 10px;\n }\n</style>\n\n<div id=\"wrapperDiv\">\n <div class=\"i_flex_horizontal i_large_insight_header i_sticky_header\" ng-class=\"{'i_border_bottom':data.default.length > 0}\">\n <div class=\"i_flex_vertical\">\n <div class=\"i_title\">\n {{insight.title}}\n </div>\n <div class=\"i_description_text\">{{insight.description}}</div>\n </div>\n <div class=\"i_flex_vertical i_centered_text pull-right\" ng-show=\"data.default.length > 0\">\n <div class=\"i_primary_value_with_label\">\n <div>\n <metric field-name=\"variable\" name=\"Name to show in automation helper\">\n {{data.variable | number : 0}}\n </metric>\n </div>\n <div>Sub Title To Show In Insight</div>\n </div>\n </div>\n </div>\n\n <div class=\"i_width100\" ng-show=\"data.default.length > 0\">\n <div insight-table table-items=\"data.default\" items-per-page=\"10\" mode=\"inview\">\n <table class=\"i_table\">\n <tr>\n <th ng-click=\"orderKey = 'name'; reverse = !reverse;\">Objective/Key Result</th>\n <th class=\"i_centered_text\">Owner(s)/Team(s)</th>\n <th class=\"i_centered_text\" ng-click=\"orderKey = 'progress'; reverse = !reverse;\">Progress</th>\n <th class=\"i_centered_text\" ng-click=\"orderKey = 'confidence'; reverse = !reverse;\">Confidence</th>\n <th ng-click=\"orderKey = 'last_update'; reverse = !reverse;\">Last Update and Comment</th>\n </tr>\n <tr ng-repeat=\"okr in data.default | orderBy : orderKey : reverse | limitTo : $limit : $skip\">\n <td>\n <div class=\"i_icon_text_pair\">\n <img src=\"/dist/img/icons/objective.svg\"/>\n <a ui_sref=\"._singleGoal.goal({id: okr.id})\">{{ okr.name }}</a>\n </div>\n </td>\n <td>\n <div class=\"i_icon_text_pair\">\n <img src=\"/dist/img/icons/kr.svg\"/>\n <a ui-sref=\"._singleGoal.goal._metric.metric({id: okr.goalid, metricId: okr.id})\">{{okr.name}}</a>\n </div>\n </td>\n <td class=\"center-avatar\">\n <avatars size=\"s-20\" ids=\"okr.ownerids\" preview-number=\"3\"></avatars>\n </td>\n <td class=\"i_centered_text\">\n <div>{{okr.progress * 100| number : 1}}%</div>\n <attainment value=\"{{okr.progress * 100}}\"></attainment>\n </td>\n <td class=\"i_centered_text\">\n <confidence-preview confidence-value=\"{{okr.confidence}}\"></confidence-preview>\n </td>\n <td>\n <div class=\"i_flex_horizontal\">\n {{okr.last_update | date}} \n <avatars size=\"s-20\" ids=\"[okr.last_update_by]\" preview-number=\"3\"></avatars>\n </div>\n <div>{{okr.last_comment}}</div>\n </td>\n </tr>\n </table>\n </div>\n </div>\n \n <div ng-if=\"data.default.length == 0\">\n <no-insight-data title=\"No OKRs Found\"></no-insight-data>\n </div>\n</div>","type":"html","displayName":"Standard Displays - Table Insights - Table Insight with Metric","setWrapperDivNameOnInsert":true,"settings":{"setWrapperDivNameOnInsert":true}},{"code":"<div popover-trigger=\"'mouseenter'\" uib-popover=\"text to populate popup with\" popover-placement=\"bottom-right\" popover-append-to-body=\"true\" popover-class=\"cf-type-helper\"></div>\n","type":"html","displayName":"Standard Displays - Tooltip","settings":{}},{"code":"<button gh-button class=\"small secondary\">Button Text</button>","type":"html","displayName":"Standard HTML - Buttons - Standard Small","settings":{}},{"code":"<button gh-button class=\"large secondary\">Button Text</button>","type":"html","displayName":"Standard HTML - Buttons - Standard Large","settings":{}},{"code":"<button gh-button class=\"small primary\">Button Text</button>","type":"html","displayName":"Standard HTML - Buttons - Accent Small","settings":{}},{"code":"<button gh-button class=\"large primary\">Button Text</button>","type":"html","displayName":"Standard HTML - Buttons - Accent Large","settings":{}},{"code":"<button gh-button class=\"small destructive\">Button Text</button>","type":"html","displayName":"Standard HTML - Buttons - Destructive Small","settings":{}},{"code":"<button gh-button class=\"large destructive\">Button Text</button>","type":"html","displayName":"Standard HTML - Buttons - Destructive Large","settings":{}},{"code":"<input class=\"gh-checkbox-v2\" type=\"checkbox\" ng-model=\"someProperty\">","type":"html","displayName":"Standard HTML - Checkbox","settings":{}},{"code":"<div class=\"i_description_text\">Description Text</div>","type":"html","displayName":"Standard HTML - Description Text - HTML","settings":{}},{"code":"<div class=\"modals-container\" ng-click=\"showModal=false;\" ng-show=\"showModal\">\r\n <div ng-show=\"showModal\" class=\"modal-content\" ng-click=\"$event.stopPropagation()\">\r\n <div class=\"nc-icon-outline icon ui-1_simple-remove clickable\" ng-click=\"showModal = false;\"></div>\r\n <!-- MODAL CONTENT GOES HERE -->\r\n </div>\r\n</div>\r\n<div class=\"modal-background\" ng-click=\"showModal=false\" ng-show=\"showModal\" ng-class=\"{activeModal: showModal}\"></div>","type":"html","displayName":"Standard HTML - Dialogs - Modal HTML","settings":{}},{"code":"<button gh-button class=\"small secondary\" ng-click=\"showModal=true;\">Show Modal</button>","type":"html","displayName":"Standard HTML - Dialogs - Modal Open Button","settings":{}},{"code":"\r\n#wrapperDiv .modal-background{\r\n display: none;\r\n position: fixed;\r\n z-index: 1;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n#wrapperDiv .modals-container{\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n display: flex;\r\n width: 100%;\r\n height: 100%;\r\n overflow: auto;\r\n z-index: 2;\r\n}\r\n\r\n#wrapperDiv .modal-content{\r\n position: relative;\r\n height: 25%;\r\n width: 50%;\r\n margin: 10% auto; /* 10% offset from top and centered */\r\n padding: 10px;\r\n background-color: #FFFFFF;\r\n overflow-y: auto;\r\n z-index: 10;\r\n}\r\n\r\n#wrapperDiv .activeModal{\r\n display: inline !important;\r\n}","type":"css","displayName":"Standard HTML - Dialogs - CSS Insight Constrained","settings":{}},{"code":"\r\n#wrapperDiv .modal-background{\r\n display: none;\r\n position: fixed;\r\n z-index: 1;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n#wrapperDiv .modals-container{\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n display: flex;\r\n width: 100%;\r\n height: 100%;\r\n overflow: auto;\r\n z-index: 2;\r\n}\r\n\r\n#wrapperDiv .modal-content{\r\n position: relative;\r\n height: 25%;\r\n width: 50%;\r\n margin: 10% auto; /* 10% offset from top and centered */\r\n padding: 10px;\r\n background-color: #FFFFFF;\r\n overflow-y: auto;\r\n z-index: 10;\r\n}\r\n\r\n#wrapperDiv .activeModal{\r\n display: inline !important;\r\n}\r\n","type":"css","displayName":"Standard HTML - Dialogs - CSS Full Page","settings":{}},{"code":"<div class=\"modals-container\" ng-click=\"showModals=false; showModal1=false; showModal2=false\" ng-show=\"showModals && (showModal1 || showModal2)\">\r\n <div ng-show=\"showModal1\" class=\"modal-content\" ng-click=\"$event.stopPropagation()\">\r\n <div class=\"nc-icon-outline icon ui-1_simple-remove clickable\" ng-click=\"showModals = false; showModal1 = false;\"></div>\r\n <!-- MODAL 1 CONTENT GOES HERE -->\r\n </div>\r\n <div ng-show=\"showModal1\" class=\"modal-content\" ng-click=\"$event.stopPropagation()\">\r\n <div class=\"nc-icon-outline icon ui-1_simple-remove clickable\" ng-click=\"showModals = false; showModal2 = false;\"></div>\r\n <!-- MODAL 2 CONTENT GOES HERE -->\r\n </div>\r\n</div>\r\n<div class=\"modal-background\" ng-click=\"showModals=false; showModal1=false; showModal2=false\" ng-show=\"showModals && (showModal1 || showModal2)\" ng-class=\"{activeModal: showModals}\"></div>","type":"html","displayName":"Standard HTML - Dialogs - Multiple Modals","settings":{}},{"code":"\r\n#wrapperDiv .modal-background{\r\n display: none;\r\n position: fixed;\r\n z-index: 1;\r\n left:0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n#wrapperDiv .modals-container{\r\n position:fixed;\r\n top:0;\r\n left:0;\r\n display:flex;\r\n width: 100%;\r\n height: 100%;\r\n overflow: auto;\r\n z-index:2;\r\n flex-direction: row-reverse;\r\n}\r\n\r\n#wrapperDiv .modal-content{\r\n position: relative;\r\n height: 100%;\r\n width: 400px;\r\n margin: 10% auto; /* 10% offset from top and centered */\r\n padding: 10px;\r\n background-color: #FFFFFF;\r\n overflow-y: auto;\r\n z-index: 10;\r\n}\r\n\r\n#wrapperDiv .activeModal{\r\n display: inline !important;\r\n}\r\n","type":"css","displayName":"Standard HTML - Dialogs - CSS Right Pop-Out","settings":{}},{"code":"<img src=\"/dist/img/icons/session.svg\">","type":"html","displayName":"Standard HTML - Icons - Session","settings":{}},{"code":"<img src=\"/dist/img/icons/objective.svg\">","type":"html","displayName":"Standard HTML - Icons - Objective","settings":{}},{"code":"<img src=\"/dist/img/icons/kr.svg\">","type":"html","displayName":"Standard HTML - Icons - Key Result","settings":{}},{"code":"<img src=\"/dist/img/icons/task.svg\">","type":"html","displayName":"Standard HTML - Icons - Task","settings":{}},{"code":"<img src=\"/dist/img/icons/user.svg\">","type":"html","displayName":"Standard HTML - Icons - User","settings":{}},{"code":"<img src=\"/dist/img/icons/team.svg\">","type":"html","displayName":"Standard HTML - Icons - Team","settings":{}},{"code":"<img src=\"/dist/img/icons/kpi.svg\">","type":"html","displayName":"Standard HTML - Icons - KPI","settings":{}},{"code":"<img src=\"/dist/img/logos/jira.png\">","type":"html","displayName":"Standard HTML - Icons - Data Source","settings":{}},{"code":"<img alt=\"Objective Icon\" src=\"/dist/img/icons/objective.svg\" />","type":"html","displayName":"Standard HTML - Images - Simple Image","settings":{}},{"code":"<img alt=\"Corporate Logo\" src=\"data:image/png;base64,<base 64 encoded data>\">","type":"html","displayName":"Standard HTML - Images - Base64 Encoded Image","settings":{}},{"code":"<input class=\"gh-input-text-v2\" placeholder=\"Search by name/e-mail\" ng-model=\"searchText\">","type":"html","displayName":"Standard HTML - Input","settings":{}},{"code":"<div class=\"mk-spinner-pie\"></div>","type":"html","displayName":"Standard HTML - Loading Spinner - HTML","settings":{}},{"code":"#wrapperDiv .mk-spinner-pie {\r\n position: relative;\r\n margin-top: 0;\r\n margin-left: 0;\r\n}","type":"css","displayName":"Standard HTML - Loading Spinner - CSS for Relative Position","settings":{}},{"code":"<select class=\"gh-select-v2\" ng-model=\"selectedValue\">\r\n <option value=\"1\">A</option>\r\n <option value=\"2\">B</option>\r\n <option value=\"3\">C</option>\r\n</select>","type":"html","displayName":"Standard HTML - Select - Hard Coded Options","settings":{}},{"code":"<select class=\"gh-select-v2\" ng-options=\"option.name for option in options\" ng-model=\"selectedValue\"></select>","type":"html","displayName":"Standard HTML - Select - Angular Defined Options","settings":{}},{"code":"angularScope.options = [\r\n { name: \"Option 1\", id: \"1\" },\r\n { name: \"Option 2\", id: \"2\" },\r\n { name: \"Option 3\", id: \"3\" }\r\n];","type":"js","displayName":"Standard HTML - Select - Defining Angular Options","settings":{}},{"code":"<input class=\"gh-input-text-v2\" placeholder=\"\" ng-model=\"searchText\">","type":"html","displayName":"Standard HTML - Text Area","settings":{}},{"code":"<div class=\"i_title\">Title Text</div>","type":"html","displayName":"Standard HTML - Title Text - HTML","settings":{}},{"code":"i_title","type":"html","displayName":"Style - Insight Global Classes - Title","settings":{"quantiveClass":true,"description":"Used on an element containing title text"}},{"code":"i_description_text","type":"html","displayName":"Style - Insight Global Classes - Description","settings":{"quantiveClass":true,"description":"Used on an element containing descriptive test"}},{"code":"i_dark_text","type":"html","displayName":"Style - Insight Global Classes - Dark Text","settings":{"quantiveClass":true,"description":"Used on an element containing dark text"}},{"code":"i_error_text","type":"html","displayName":"Style - Insight Global Classes - Error Text","settings":{"quantiveClass":true,"description":"Used on an element containing error (red) text"}},{"code":"i_link_text","type":"html","displayName":"Style - Insight Global Classes - Link Text","settings":{"quantiveClass":true,"description":"Used on an element containing link text (clickable, blue)"}},{"code":"i_bold","type":"html","displayName":"Style - Insight Global Classes - Bold","settings":{"quantiveClass":true,"description":"Sets an element to be bolded"}},{"code":"i_centered_text","type":"html","displayName":"Style - Insight Global Classes - Centered Text","settings":{"quantiveClass":true,"description":"Used on an element in which you want centered text"}},{"code":"i_clickable","type":"html","displayName":"Style - Insight Global Classes - Clickable","settings":{"quantiveClass":true,"description":"Used to make an element appear clickable"}},{"code":"i_non_clickable","type":"html","displayName":"Style - Insight Global Classes - Non-Clickable","settings":{"quantiveClass":true,"description":"Used to make an otherwise clickable element appear non-clickable"}},{"code":"i_flex_horizontal","type":"html","displayName":"Style - Insight Global Classes - Flex Horizontal","settings":{"quantiveClass":true,"description":"Sets a container to have a horizontal flex"}},{"code":"i_flex_vertical","type":"html","displayName":"Style - Insight Global Classes - Flex Vertical","settings":{"quantiveClass":true,"description":"Sets a container to have a vertical flex"}},{"code":"i_vertical_center","type":"html","displayName":"Style - Insight Global Classes - Horizontal Center","settings":{"quantiveClass":true,"description":"Sets a flex container to vertically center"}},{"code":"i_horizontal_center","type":"html","displayName":"Style - Insight Global Classes - Vertical Center","settings":{"quantiveClass":true,"description":"Sets a flex container to horizontally center"}},{"code":"i_space_between","type":"html","displayName":"Style - Insight Global Classes - Space Between","settings":{"quantiveClass":true,"description":"Sets a flex container to use \"space between\" spacing"}},{"code":"i_space_evenly","type":"html","displayName":"Style - Insight Global Classes - Space Evenly","settings":{"quantiveClass":true,"description":"Sets a flex container to use \"space evenly\" spacing"}},{"code":"i_baseline","type":"html","displayName":"Style - Insight Global Classes - Baseline","settings":{"quantiveClass":true,"description":"Sets a flex container to use \"baseline\""}},{"code":"i_flex_wrap","type":"html","displayName":"Style - Insight Global Classes - Flex Wrap","settings":{"quantiveClass":true,"description":"Sets a flex container to wrap"}},{"code":"i_widthXX","type":"html","displayName":"Style - Insight Global Classes - Width Percentage","settings":{"quantiveClass":true,"description":"Sets the width to the specificed percentage (replace XX). Valid values are increments of 10 from 10 to 100 and 25, 33, 66, and 75"}},{"code":"i_widthXXpx","type":"html","displayName":"Style - Insight Global Classes - Width Pixels","settings":{"quantiveClass":true,"description":"Sets the width to the specificed number of pixels (replace XX). Valid values are 10 pixel increments from 30 to 100 and 100 pixel increments from 100 to 800."}},{"code":"i_heightXXpx","type":"html","displayName":"Style - Insight Global Classes - Height Pixels","settings":{"quantiveClass":true,"description":"Sets the height to the specificed number of pixels (replace XX). Valid values are 10 pixel increments from 30 to 100 and 100 pixel increments from 100 to 800."}},{"code":"i_relative","type":"html","displayName":"Style - Insight Global Classes - Relative Position","settings":{"quantiveClass":true,"description":"Sets the position of an element to be relative"}},{"code":"i_sticky_header","type":"html","displayName":"Style - Insight Global Classes - Sticky Header","settings":{"quantiveClass":true,"description":"Used on a wrapper for elements that you want to always be at the top of the insight regardless of scrolling. Depending on your situation, you may need to override the top property to a different value"}},{"code":"i_icon_text_pair","type":"html","displayName":"Style - Insight Global Classes - Icon Text Pair","settings":{"quantiveClass":true,"description":"Used on the parent of two elements that are an icon and text pair, like an Objective, Key Result, or Task. Underneath the element with the class, you should have the image element for the icon and a div with the text you want to display next to the icon"}},{"code":"i_space_topXXpx","type":"html","displayName":"Style - Insight Global Classes - Space Top","settings":{"quantiveClass":true,"description":"Add space to the top of any element. Replace XX with 5, 10, 20 or 30."}},{"code":"i_space_leftXXpx","type":"html","displayName":"Style - Insight Global Classes - Space Left","settings":{"quantiveClass":true,"description":"Add space to the left of any element. Replace XX with 5, 10, 20 or 30."}},{"code":"i_space_rightXXpx","type":"html","displayName":"Style - Insight Global Classes - Space Right","settings":{"quantiveClass":true,"description":"Add space to the right of any element. Replace XX with 5, 10, 20 or 30."}},{"code":"i_space_bottomXXpx","type":"html","displayName":"Style - Insight Global Classes - Space Bottom","settings":{"quantiveClass":true,"description":"Add space to the bottom of any element. Replace XX with 5, 10, 20 or 30."}},{"code":"i_border_box","type":"html","displayName":"Style - Insight Global Classes - Border - All Sides","settings":{"quantiveClass":true,"description":"Adds a border to all sides of any element"}},{"code":"i_border_top","type":"html","displayName":"Style - Insight Global Classes - Border - Top","settings":{"quantiveClass":true,"description":"Adds a border to the top of any element"}},{"code":"i_border_left","type":"html","displayName":"Style - Insight Global Classes - Border - Left","settings":{"quantiveClass":true,"description":"Adds a border to the left of any element"}},{"code":"i_border_right","type":"html","displayName":"Style - Insight Global Classes - Border - Right","settings":{"quantiveClass":true,"description":"Adds a border to the right of any element"}},{"code":"i_border_bottom","type":"html","displayName":"Style - Insight Global Classes - Border - Bottom","settings":{"quantiveClass":true,"description":"Adds a border to the bottom of any element"}},{"code":"i_primary_value_with_label","type":"html","displayName":"Style - Insight Global Classes - Primary Value with Label","settings":{"quantiveClass":true,"description":"Applied to a parent div that contains both a primary value and a label elements underneath it. The first element will be treated as the value and the second as the label"}},{"code":"i_primary_value","type":"html","displayName":"Style - Insight Global Classes - Primary Value","settings":{"quantiveClass":true,"description":"Large font format for displaying a primary value, mostly used for scalar insights"}},{"code":"i_primary_value_label","type":"html","displayName":"Style - Insight Global Classes - Primary Label","settings":{"quantiveClass":true,"description":"A label intended to be used below the i_primary_value"}},{"code":"i_table","type":"html","displayName":"Style - Insight Global Classes - Table","settings":{"quantiveClass":true,"description":"Used on a table element to apply table formatting. Automatically applies horizontal borders and sticky/clickable headers. Use additional table classes to control additional aspects of the table. You will likely need to override the top property on the th for properly setting the sticky headers."}},{"code":"i_table_non_sticky_header","type":"html","displayName":"Style - Insight Global Classes - Table without Sticky Header","settings":{"quantiveClass":true,"description":"Used on a table element to specify the table should not have a sticky header. Should be used with i_table."}},{"code":"i_table_non_sorting_header","type":"html","displayName":"Style - Insight Global Classes - Table without Sorting Header","settings":{"quantiveClass":true,"description":"Used on a table element to specify the table should not have a clickable header. Should be used with i_table. To make individual headers non-clickable, use i_non_clickable on the th element."}},{"code":"i_table_no_borders","type":"html","displayName":"Style - Insight Global Classes - Table without Borders","settings":{"quantiveClass":true,"description":"Used on a table element to specify the table should not have borders. Should be used with i_table."}},{"code":"i_table_highlight_hover","type":"html","displayName":"Style - Insight Global Classes - Table with Highlight on Hover","settings":{"quantiveClass":true,"description":"Used on a table element to specify the table should highlight the row the cursor is hovering over. Should be used with i_table."}},{"code":"i_table_alternating_rows","type":"html","displayName":"Style - Insight Global Classes - Table with Alternate Row Highlight","settings":{"quantiveClass":true,"description":"Used on a table element to specify the table should highlight alternate rows. Should be used with i_table."}},{"code":"#15C679","type":"css","displayName":"Style - Quantive Colors - Primary Green","settings":{"isColor":true}},{"code":"#002830","type":"css","displayName":"Style - Quantive Colors - Primary Midnight Sky","settings":{"isColor":true}},{"code":"#E6F5F0","type":"css","displayName":"Style - Quantive Colors - Primary Sage","settings":{"isColor":true}},{"code":"#FFFFFF","type":"css","displayName":"Style - Quantive Colors - Primary White","settings":{"isColor":true}},{"code":"#0D1F23","type":"css","displayName":"Style - Quantive Colors - Neutral Dark","settings":{"isColor":true}},{"code":"#4C5A5D","type":"css","displayName":"Style - Quantive Colors - Neutral Medium","settings":{"isColor":true}},{"code":"#BAC7CB","type":"css","displayName":"Style - Quantive Colors - Neutral Light","settings":{"isColor":true}},{"code":"#F1F4F7","type":"css","displayName":"Style - Quantive Colors - Neutral Pale","settings":{"isColor":true}},{"code":"#C9FCFF","type":"css","displayName":"Style - Quantive Colors - Secondary Cyan","settings":{"isColor":true}},{"code":"#0769FC","type":"css","displayName":"Style - Quantive Colors - Secondary Cobalt","settings":{"isColor":true}},{"code":"#00288C","type":"css","displayName":"Style - Quantive Colors - Secondary Indigo","settings":{"isColor":true}},{"code":"#F5CE3E","type":"css","displayName":"Style - Quantive Colors - Secondary Yellow","settings":{"isColor":true}},{"code":"#FF8744","type":"css","displayName":"Style - Quantive Colors - Accent Orange","settings":{"isColor":true}},{"code":"#D0265C","type":"css","displayName":"Style - Quantive Colors - Accent Rose","settings":{"isColor":true}},{"code":"#3D1609","type":"css","displayName":"Style - Quantive Colors - Accent Plum","settings":{"isColor":true}},{"code":"#da555d","type":"css","displayName":"Style - Quantive Colors - Error Red","settings":{"isColor":true}},{"code":"<div insight-table table-items=\"arrayVariable\" items-per-page=\"15\" mode=\"inview\">\n <table class=\"i_table\">\n <tr>\n <th ng-click=\"orderKey = 'a'; reverse = !reverse;\">Header</th>\n <th ng-click=\"orderKey = 'b'; reverse = !reverse;\">Header</th>\n <th ng-click=\"orderKey = 'c'; reverse = !reverse;\">Header</th>\n </tr>\n <tr ng-repeat=\"thing in data.default | orderBy : orderKey : reverse | limitTo : $limit : $skip\">\n <td>{{thing.a}}</td>\n <td>{{thing.b}}</td>\n <td>{{thing.c}}</td>\n </tr>\n </table>\n</div>","type":"html","displayName":"Tables - Basic Standard Table","settings":{}},{"code":"insight-table table-items=\"arrayVariable\" items-per-page=\"15\" mode=\"inview\"","type":"html","displayName":"Tables - Insight Table Directive - Insight Table Directive","settings":{}},{"code":"| limitTo : $limit : $skip","type":"html","displayName":"Tables - Insight Table Directive - limitTo","settings":{}},{"code":"#tableWrapperDiv tbody {\n display: block;\n max-height: 600px;\n overflow-y: scroll;\n overflow-x: hidden;\n width: 100%;\n}\n\n#tableWrapperDiv thead {\n display: table; /* to take the same width as tr */\n width: calc(100% - 17px); /* - 17px because of the scrollbar width */\n}\n\n#tableWrapperDiv tr {\n display: table; /* display purpose; th's border */\n width: 100%;\n box-sizing: border-box; \n}\n\n#tableWrapperDiv .column1 {\n width: 50%;\n}\n\n#tableWrapperDiv .column2 {\n width: 25%;\n}\n \n#tableWrapperDiv .column3 {\n width: 25%;\n}\n","type":"css","displayName":"Tables - Scrolling Table Body - CSS","settings":{}},{"code":"<div id=\"tableWrapperDiv\">\n <table class=\"table mt-2\">\n <thead>\n <tr>\n <th class=\"column1\" ng-click=\"orderKey = 'name'; reverse = !reverse;\">Name</th>\n <th class=\"column2\" ng-click=\"orderKey = 'id'; reverse = !reverse;\">ID</th>\n <th class=\"column3\">Export</th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"goal in data.default | orderBy : orderKey : reverse\">\n <td class=\"column1\">\n {{ goal.name }}\n </td>\n <td class=\"column2\">\n {{ goal.id }}\n </td>\n <td class=\"column3\">\n {{ goal.assigne_name }}\n </td>\n </tr>\n </tbody>\n </table>\n</div>","type":"html","displayName":"Tables - Scrolling Table Body - HTML","settings":{}},{"code":"#tableContainer {\n height: 300px; \n overflow-y: auto; \n overflow-x: hidden;\n}\n\n#tableContainer tr:nth-child(1) th {\n background: white;\n font-weight: bold !important;\n box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.4);\n position: sticky;\n top: 0px;\n z-index: 1;\n}","type":"css","displayName":"Tables - Table With Sticky Headers - CSS","settings":{}},{"code":"<div id=\"tableContainer\">\n <table class=\"table mt-2\">\n <!-- Table Contents -->\n </table>\n</div>","type":"html","displayName":"Tables - Table With Sticky Headers - HTML","settings":{}},{"code":"#tableContainer2 .stickyColumn1.stickyHeader, #tableContainer2 .stickyColumn2.stickyHeader {\n z-index: 2;\n}\n\n#tableContainer2 .stickyColumn1 {\n position: sticky;\n background-color: white;\n border-right: none;\n left: 0;\n width: 150px;\n height: 1px;\n top: auto;\n z-index: 1;\n padding: 0px;\n}\n\n#tableContainer2 .stickyColumn1 div {\n border-right: 1px solid #eee;\n width: 150px;\n height: 100%;\n padding: 10px;\n}\n\n#tableContainer2 .stickyColumn2 {\n position: sticky;\n background-color: white;\n left: 150px;\n height: 1px;\n top: auto;\n z-index: 1;\n padding: 0px;\n}\n\n#tableContainer2 .stickyColumn2 div {\n border-right: 1px solid #eee;\n height: 100%;\n padding: 10px;\n}\n\n#tableContainer2 .stickyHeader {\n position: sticky;\n top: 0px;\n background-color: white;\n box-shadow: 0 2px 1px -1px #efefef;\n z-index: 1;\n}\n\n#tableContainer2 {\n overflow-x: auto;\n max-height:500px;\n} ","type":"css","displayName":"Tables - Table With Sticky Headers and Sticky Columns - CSS","settings":{}},{"code":"<div id=\"tableContainer2\">\n <table class=\"table mt-2\">\n <thead>\n <tr>\n <th class=\"stickyColumn1 stickyHeader\"><div>Name</div></th>\n <th class=\"stickyColumn2 stickyHeader\"><div>ID</div></th>\n <th class=\"stickyHeader\">Created By</th>\n <th class=\"stickyHeader\">Created On</th>\n <th class=\"stickyHeader\">Owner</th>\n <th class=\"stickyHeader\">Progress</th>\n <th class=\"stickyHeader\">Attainment</th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"kr in data.default\">\n <td class=\"stickyColumn1\"><div>{{kr.name}}</div></td>\n <td class=\"stickyColumn2\"><div>{{kr.id}}</div></td>\n <td><assignee id=\"{{kr.createdbyid}}\"></assignee></td>\n <td>{{kr.datecreated | date}}</td>\n <td><assignee id=\"{{kr.ownerid}}\"></assignee></td>\n <td>{{kr.progressstatus}}</td>\n <td>{{kr.attainment}}</td>\n </tr>\n </tbody>\n </table>\n</div>","type":"html","displayName":"Tables - Table With Sticky Headers and Sticky Columns - HTML","settings":{}},{"code":"#tableContainer .stickyColumn {\n position: sticky;\n background-color: white;\n left: 0;\n top: auto;\n z-index: 1;\n}\n\n#tableContainer {\n overflow-x: auto;\n height: 500px;\n}\n\n","type":"css","displayName":"Tables - Tables With Sticky Columns - One Sticky Column","settings":{}},{"code":"<div id=\"tableContainer\">\n <table>\n <thead>\n <tr>\n <th class=\"stickyColumn\">Name</th>\n <th>ID</th>\n <th>Created By</th>\n <th>Created On</th>\n <th>Owner</th>\n <th>Progress</th>\n <th>Attainment</th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"kr in data.default\">\n <td class=\"stickyColumn\">{{kr.name}}</td>\n <td>{{kr.id}}</td>\n <td><assignee id=\"{{kr.createdbyid}}\"></assignee></td>\n <td>{{kr.datecreated | date}}</td>\n <td><assignee id=\"{{kr.ownerid}}\"></assignee></td>\n <td>{{kr.progressstatus}}</td>\n <td>{{kr.attainment}}</td>\n </tr>\n </tbody>\n </table>\n</div>","type":"html","displayName":"Tables - Tables With Sticky Columns - One Sticky Column","settings":{}},{"code":"#tableContainer .stickyColumn1 {\n position: sticky;\n background-color: white;\n border-right: none;\n left: 0;\n width: 150px;\n height: 1px;\n top: auto;\n z-index: 1;\n padding: 0px;\n}\n\n#tableContainer .stickyColumn1 div {\n border-right: 1px solid #eee;\n width: 150px;\n height: 100%;\n padding: 10px;\n}\n\n#tableContainer .stickyColumn2 {\n position: sticky;\n background-color: white;\n left: 150px;\n height: 1px;\n top: auto;\n z-index: 1;\n padding: 0px;\n}\n\n#tableContainer .stickyColumn2 div {\n border-right: 1px solid #eee;\n height: 100%;\n padding: 10px;\n}\n\n#tableContainer {\n overflow-x: auto;\n max-height:500px;\n}","type":"css","displayName":"Tables - Tables With Sticky Columns - Multiple Sticky Column","settings":{}},{"code":"<div id=\"tableContainer\">\n <table class=\"table mt-2\">\n <thead>\n <tr>\n <th class=\"stickyColumn1\"><div>Name</div></th>\n <th class=\"stickyColumn2\"><div>ID</div></th>\n <th>Created By</th>\n <th>Created On</th>\n <th>Owner</th>\n <th>Progress</th>\n <th>Attainment</th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"kr in data.default\">\n <td class=\"stickyColumn1\"><div>{{kr.name}}</div></td>\n <td class=\"stickyColumn2\"><div>{{kr.id}}</div></td>\n <td><assignee id=\"{{kr.createdbyid}}\"></assignee></td>\n <td>{{kr.datecreated | date}}</td>\n <td><assignee id=\"{{kr.ownerid}}\"></assignee></td>\n <td>{{kr.progressstatus}}</td>\n <td>{{kr.attainment}}</td>\n </tr>\n </tbody>\n </table>\n</div>","type":"html","displayName":"Tables - Tables With Sticky Columns - Multiple Sticky Column","settings":{}},{"code":"<tabset class=\"i_nav_tabs\">\n <tab heading=\"Heading 1\">\n <!-- tab 1 content -->\n </tab>\n <tab heading=\"Heading 2\">\n <!-- tab 2 content -->\n </tab>\n <tab heading=\"Heading 3\">\n <!-- tab 3 content -->\n </tab>\n</tabset>","type":"html","displayName":"Tabs - Angular Tabset","settings":{}},{"code":"<tabset class=\"i_nav_tabs\">\n <tab heading=\"Name of Tab\">\n <table class=\"table mt-2\">\n <tr>\n <th ng-click=\"orderKey = 'property1'; reverse = !reverse;\">Header</th>\n <th ng-click=\"orderKey = 'property2'; reverse = !reverse;\">Header</th>\n <th ng-click=\"orderKey = 'property3'; reverse = !reverse;\">Header</th>\n </tr>\n <tr ng-repeat=\"data in data.default | orderBy : orderKey : reverse\">\n <td class=\"bigger-120 regular\">{{data.property1}}</td>\n <td>{{data.property2}}</td>\n <td>{{data.property3}}</td>\n </tr>\n </table>\n </tab>\n <tab heading=\"Name of Tab\">\n <!-- Other table, graph, or information -->\n </tab>\n</tabset>","type":"html","displayName":"Tabs - Tab Containing Table","settings":{}}]