This repo uses the trial version of DevExpress components, which was added with:
npm install --save devextreme
"ReferenceError: DevExpress is not defined", solved via src/window.js , which adjusts the window object ahead of loading the DevExpress component - to solve the exception "DevExpress is undefined".
// adapted from ignatvilesov's advice:
// https://github.com/whileoneloop/kendo-ui-power-bi-visual/commit/0f6ef60c390f82cf24a3edb34c4572fd01d66d7d
Object.defineProperties(window, {
'devicePixelRatio': {
get: function () {
return window.window.devicePixelRatio;
}
},
'innerWidth': {
get: function () {
return window.window.innerWidth;
}
}
});
var DevExpress = { };
window.DevExpress = DevExpress;
window.window.DevExpress = DevExpress;
Fonts have been converted to base64 to allow them to be embedded in the custom visual package.
This can be done with:
base64 dxicons.ttf > dxicons_ttf_base64.txt
And then modifying the css file:
@font-face {
font-family: 'DXIcons';
src: url(data:font/woff;charset=utf-8;base64,<<woff base64 string>>) format('woff'), url(data:font/truetype;charset=utf-8;base64,<<ttf base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
Start a PowerBI pro free trial if not already done:
https://app.powerbi.com/signupredirect?pbi_source=web
Install PowerBI tools from:
https://github.com/microsoft/powerbi-visuals-tools
In this repo, install npm dependencies (jquery, its types, and the devextreme module) with:
npm install
Then run a dev instance for PowerBI to connect to and display the visual:
pbiviz start
... Or create and upload a package manually in your Powerbi interface with:
pbiviz package
Login to PowerBI, enable developer custom visuals, create a new report, drag on a developer/custom visual widget. View the console output in the browser window displaying your developer visual.