2b:null 2c:["$","title",null,{"children":"PowerBI Custom Visuals Template | Alok Pepakayala | Observable"}] 31:T46d,visual_class_js = class t { //write all your code in this class, so we can export the source code as a text string to the package //dont use observable cells in this block! they wont be available in powerbi end constructor(e) { this.elm = e.element; //this.elm.style["overflow"] = "auto"; embed(this.elm, {}).then(main=>{ this.main = main; if(this.catchup){ this.update_proxy(this.catchup) } }) } data_json(e){ if(e.dataViews[0] && e.dataViews[0].table && e.dataViews[0].table.rows){ return e.dataViews[0].table.rows.map(d=>{ return { name:d[0], value:d[1] } }) } } update_proxy(e){ var w = e.viewport.width var h = e.viewport.height this.main.redefine('data',this.data_json(e)) this.main.redefine('width',w) this.main.redefine('height',h) } update(e) { if(this.main){ this.update_proxy(e); }else{ //update called before the observable notebook finished! //save the options for it to update once its ready.. this.catchup = e } } destroy() {} }32:Tc19,resource_package = ({ visual: { name: name, displayName: display_name, guid: guid, visualClassName: "Visual", version: "0.0.1", description: "Custom visual", supportUrl: "https://wishyoulization.com", gitHubUrl: "https://wishyoulization.com" }, author: { name: "Alok Pepakayala", email: "yo@wishyoulization.com" }, apiVersion: "2.1.0", style: "style/visual.less", stringResources: {}, capabilities: { dataRoles: [ { name: "type", kind: "GroupingOrMeasure", displayName: "type" }, { name: "value", kind: "GroupingOrMeasure", displayName: "value" } ], objects: { chartSettings: { displayName: "Custom Settings", properties: { size: { displayName: "Chart size", type: { integer: true } }, fontFamily: { displayName: "Font Family", type: { text: true } }, showborder: { displayName: "Display border", type: { bool: true } } } } }, sorting: { default: {} }, dataViewMappings: [ { table: { rows: { dataReductionAlgorithm: { top: { count: 30000 } }, select: [ { for: { in: "type" } }, { for: { in: "value" } } ] } } } ] }, content: { css: "", iconBase64: icon_base64_string, js: embed_code + "\n\n" + `\n\n!function(e){var n={};function r(t){if(n[t])return n[t].exports;var o=n[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=n,r.d=function(e,n,t){r.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:t})},r.r=function(e){\"undefined\"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(e,\"__esModule\",{value:!0})},r.t=function(e,n){if(1&n&&(e=r(e)),8&n)return e;if(4&n&&\"object\"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(r.r(t),Object.defineProperty(t,\"default\",{enumerable:!0,value:e}),2&n&&\"string\"!=typeof e)for(var o in e)r.d(t,o,function(n){return e[n]}.bind(null,o));return t},r.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(n,\"a\",n),n},r.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},r.p=\"assets\",r(r.s=0)}({0:function(e,n,r){e.exports=r(\"xlo+\")},\"xlo+\":function(e,n,r){\"use strict\";r.r(n);${visual_class_js.toString()}powerbi.visuals=powerbi.visuals||{},powerbi.visuals.plugins=powerbi.visuals.plugins||{},powerbi.visuals.plugins.${name}={name:\"${name}\",displayName:\"${display_name}\",class:\"Visual\",version:\"0.0.1\",apiVersion:\"2.1.0\",create:e=>{if(t)return new t(e);console.error(\"Visual instance not found\")},custom:!0};n.default=powerbi}});` }, visualEntryPoint: "", externalJS: [], assets: {icon: "assets/icon.png"} })33:[{"id":"07101ade3ee3416eba19dd50ac980c2615adefc6acd575fcfde60593d5d6b6250926533c16b04f1ae0934fbdc9b5cc8d6cbe957d2ff40d8b7825837b7e65312a","href":"https://static.observableusercontent.com/files/07101ade3ee3416eba19dd50ac980c2615adefc6acd575fcfde60593d5d6b6250926533c16b04f1ae0934fbdc9b5cc8d6cbe957d2ff40d8b7825837b7e65312a","name":"cover.png","type":"image/png","lastModified":1599965376066.798,"size":38514}] 2f:{"id":"2c14db7cfb59a37b","slug":"powerbi-custom-visuals-template","title":"PowerBI Custom Visuals Template","thumbnail":"4e744115caec7e30392cd85f13de00524b5e1567a3f5d52edfbff5dd92da1129","access_level":"public","create_time":"$D2020-09-11T20:23:48.083Z","update_time":"$D2020-10-10T08:42:36.688Z","view_time":null,"first_public_time":"$D2020-09-13T02:55:54.602Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/f28a7b5f4fb16a63caaace8a87a531e60bea383d6e9d50e126570c77c0814ba9","tier":"starter_2024"},"version":233,"publish_version":233,"role":null,"authored":false,"authors":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null}],"members":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":{"id":"e7fcdc39d4789c07","slug":"power-bi","title":"Power BI","owner":{"id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala"}},"type":"notebook","body":{"title":"PowerBI Custom Visuals Template","cells":[{"id":0,"value":"md`# PowerBI Custom Visuals Template`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"cover = {\n var img = await FileAttachment(\"cover.png\").url();\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"html`\n\n

PowerBI is a Business Intelligence software from Microsoft that has many data visualization capabilities, but it's still limited with respect to what it can do out of the box, to mitigate this issue, the software has a feature to embed widgets/plugins called custom visuals. There are several features available to the custom visual via the developer API to interact with the report to get data, apply and read filters, bookmarks or persist settings etc., `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"md`But, the process to develop these custom visuals is very tidius and involves multiple steps such as setting up folders, managing dependencies, certificates, running commands, etc., (assuming you already have the developer tools and environment available) this ovehead often makes creating the custom visuals a very time intensive project. This notebook on the other hand makes developing, testing, packaging a custom visual effortless. This notebook is a template to show the process and capabilities.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`### Metadata` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"name = \"customvisual\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"display_name = \"Custom Visual\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"guid = \"customvisual\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`### Sandbox`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"{\n //d3;\n var dom = html`

`;\n var op = {\n element: dom,\n viewport:{\n width:400,\n height:200\n },\n dataViews: [\n {\n table: {\n columns: [],\n rows: [[\"a\", 1], [\"b\", 2], [\"c\", 2], [\"d\", 3], [\"e\", 4], [\"f\", 5]]\n }\n }\n ]\n };\n var inst = new visual_class_js(op);\n inst.update(op);\n return dom;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"md`_The custom visual class that handles the lifecycle states from the power bi report_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":226,"value":"md`_Note: The bulk of the packing happens in the below notebook and is imported here for embed..._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"import {embed_code} from '@a10k/notebook-packer'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"embed = {\n //for using in this notebook\n return eval(embed_code+'embed');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"md`### Package files`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"icon = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"icon_base64_string = {\n var svg = new XMLSerializer().serializeToString(icon)\n return \"data:image/svg+xml;base64,\" +window.btoa(svg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"package_json = ({\n version: \"0.0.1\",\n author: { name: \"Alok Pepakayala\", email: \"yo@wishyoulization.com\" },\n resources: [\n {\n resourceId: \"rId0\",\n sourceType: 5,\n file: `resources/${name}.pbiviz.json`\n }\n ],\n visual: {\n name: name,\n displayName: display_name,\n guid: guid,\n visualClassName: \"Visual\",\n version: \"0.0.1\",\n description: \"Custom visual\",\n supportUrl: \"https://example.com\",\n gitHubUrl: \"https://example.com\"\n },\n metadata: {\n pbivizjson: {\n resourceId: \"rId0\"\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"md`### Download the widget`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"new Promise((yes, no) => {\n var zip = new JSZip();\n var r = zip.folder(\"resources\");\n\n zip.file(\"package.json\", JSON.stringify(package_json));\n r.file(`${name}.pbiviz.json`, JSON.stringify(resource_package));\n\n zip.generateAsync({ type: \"blob\" }).then(function(content) {\n yes(DOM.download(content, `${display_name}.pbiviz`, \"⚡ Download visual\"));\n });\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"JSZip = require('jszip@3.5.0/dist/jszip.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"