developer maker musician

Tuesday, November 29, 2016

How To Deploy a GitHub Pages Site to an Azure Web App

Here's a quick and easy way to get your GitHub Page repo deployed to an Azure Web App.  Let me know if you run into any issues.

Create GitHub Pages Repo

Skip to next step if you already have a GitHub pages repo.

1. Create new GitHub repo

2. Under the repo settings > GitHub Pages, set Source to the branch and Launch automatic page generator.

3. Clone the repo locally


Copy Azure Deployment Files

We need to get .deployment, deploy.cmd and getruby.cmd in the root of the GitHub repo. We are going to pull those files from here: https://github.com/ritterim/jekyll-azure-deploy. If you have Bash installed on Windows you can use the following command:

--

--


If you don't have bash, then figure out a way to get those files locally, i.e. clone that repo or download as a zip.


After you have the files in the root of your repo locally, push them to your remote GitHub repo.


Important: If you are deploying a Jekyll based site that precompiles files into a _site folder then you can leave these files as is.  But, if you are deploying a static site without Jekyll, for example, the default HTML site that is generated by GitHub, then you are going to want to do the following:

I repeat: Only do this next step if you have a static site that isn't generated into a subfolder.

Open deploy.cmd and find this line of code:

--

--

and change %DEPLOYMENT_SOURCE%/_site to %DEPLOYMENT_SOURCE% (remove /_site)


Once you have made that change, make sure you push to your remote GitHub repo

Create Azure WebSite

Go to https://portal.azure.com/#create/Microsoft.WebSite and create your site.

image


Increase Deployment Timeout

Ruby takes a while to install the first time, so increase the deployment timeout with this setting.

1. Open Azure Web App, Go to Application settings and add a custom setting called SCM_COMMAND_IDLE_TIMEOUT and set it to 3600

image

Make sure you click Save.


Setup GitHub to Azure Deployment Hook

1. Open Azure Web App, Go to "Deployment options" and select GitHub, Authorize and select your repo and branch and click OK.

image

image

You will see this notification

image

Click on "Deployment options" again and you should see that the site is being deployed:

image

It will take a few minutes to complete.


Open a browser and navigate to your site. Your GitHub pages site should load.

image


Jon

Linux Touch Equivalent for Windows AKA How To Create a File Without a Name in Windows

Windows Explorer doesn't allow you to create a file without a name:

image

Windows doesn't have a native "touch" equivalent, which is a native Linux program that allows you to create empty files and change timestamps.


But…


If you run "touch>.gitignore" (or any of the other options below) from the command line, the file is created.  Also, if you run it again, the file's timestamp will be updated.  It won't change attributes like touch on Linux does.

image


Here are some other ways that work as well.

  1. copy nul .gitignore
  2. copy con .gitignore, hit enter, then hit ctrl+z
  3. cat>.gitignore, hit enter, then hit ctrl+c
  4. echo > .gitignore
  5. touch>.gitignore
  6. fsutil file createnew .gitignore 0
  7. nul > .gitignore
  8. notepad .gitignore
  9. In Windows Explorer, name the file ".gitignore." and Windows will rename it to ".gitignore"
  10. bash -c "touch .gitignore"


Let me know if you know of any other ways and I'll add them to the list.


Jon

Thursday, November 17, 2016

How To Add d3@v3.5.5 Reference to a Power BI Custom Visual (SDK v1.2)

The Power BI team just released v1.2 of the Custom Visuals SDK. With this version you now need to reference d3 v3.5.5 yourself. d3 v4 does not work yet. I'm working with the team to get a v4 compat and sample together, but for now you can only use v3.5.5.


You can follow along with the steps below or follow along on this video:

--

--


1. Setup your Custom Viz dev env: http://blog.jongallant.com/2016/09/powerbi-custom-visual-dev.html

2. Create a new visual

--

--

3. Install typings https://github.com/typings/typings

--

--

4. Add d3 v3.5.5

--

--

5. Add d3 typing

--

--


6. Add files to tsconfig.json

--

--

7. Copy this code to src/visual.ts

--

--

8. Start pbiviz dev server

--

--

image

9. Go to http://app.powerbi.com and add development visual to a report. You should see a green circle.


image

Tuesday, October 11, 2016

How to Create a Power BI Custom Visual Based on an Existing d3 Visual - Part 3 - Custom Format Properties

In this series, we are creating a Power BI Custom Visual from an OSS d3 visualization I found on GitHub called Liquid Fill Gauge built by Curtis Bratton. It renders a circular gauge with an internal animated wave that represents a "percent full" value.

Download the Liquid Fill Gauge Custom Visual
View Liquid Fill Gauge Source Code
----------------------------------
Here are the previous posts:
1. How to Create a Power BI Custom Visual Based on an Existing d3 Visual - Part 1 - Dev Env Setup, Reference and Testing
2. How to Create a Power BI Custom Visual Based on an Existing d3 Visual - Part 2 - Capabilities, dataRoles and dataViewMappings

This post is about setting up custom format properties to allow the Power BI user to change the way your visual is formatted (i.e. colors, fonts, widths, etc).

ISSUE: Custom Format Properties do not currently work with the "Development Visual". You will need to package and import your visual to test it out.  See this issue for updates on resolving that.
Here's an example of what a custom format properties looks like:
image

Steps to enable Custom Visual custom properties

1. Define the property metadata in capabilities.json
2. Handle the setting of property values in enumerateObjectInstances method
3. Get property values with objectEnumerationUtility.js
4. Use a "settings" object as an in-memory property store that you use in your visual.

1. Define the property metadata in capabilities.json

The first thing you need to do is define your properties in your capabilities.json file. They are included in the "objects" object at the same level as dataRoles and dataViewMappings.
image
See this file for the complete example.
The first child of the objects properties is the "property group".  In this example we have "text", "circle" and "wave" groups.

Each "property group" has a displayName property (that's what will appear in the Power BI format pane) and a "properties" object.
image
Each property has a displayName, description and type.  (There are other properties as well, but we won't get into that here).  In the example below, you can see that a "color" is fill->solid->color:true.  I've also included a numeric and bool sample
image
ISSUE: Do not use "textSize" as a property key as is appears to be a reserved key by Power BI and it will always render the "text size" slider that defaults to a min value of 8.  See this issue for updates on that.
Here's how that renders:
image
The UI elements are dataType driven, so you automatically get the color selector when you set the type to fill->solid->color…same goes for bool, with the on/off switch.

2. Handle the setting of property values in enumerateObjectInstances method

Power BI uses the enumerateObjectInstances method to map and store properties to an internal "metadata.objects" property.  The enumerateObjectInstances method is called for every "property group" that you define in capabilities.json.  You can see below that I have a case statement that matches the "key" from my "objects" in my capabilities.json file called "text".
This is where Power BI stores the values, so you want to assign each property to whatever value you have stored.  I used a "settings" object to store these values.
Note: My visual needed the color in hex form, but when I save it to the Power BI metadata, it needs to be a "Fill" object, which is why I wrap it in {solid:{color: [value]}}.
image
See visual.ts for complete example of this method.

3. Get property values with objectEnumerationUtility.js

Now that you have the values stored in metadata, you'll want to get the values out and use them in your visual.  Power BI provides a sample .js file for doing so.  I took their version and added a maxValue optional parameter:
image
Add this file to your /src folder and update your tsconfig.json
image

4. Use a "settings" object as an in-memory property store that you use in your visual.

Power BI recommends using TypeScript definitions and the visualTransform method for doing what I do here, but I didn't want to take on anymore overhead than necessary and I wanted to try to do the least amount of code to do the conversion from an existing visual to a Power BI one.
So, I just reused the settings object that was included with the original liquidFillGauge and am using the "getValue" method from objectEnumerationUtility.js.
ISSUE: Power BI does not correctly update the options.type property when a "Style" object is changed.  I'll be able to remove some of the compare code when they fix this bug.
I created a "getSettings" method that populates the settings object.  You just pass in the metadata.object property, propertyGroup key, property key, default value and in some cases a maxValue.  Take notice of how I deal with "color" based properties.  I use the "Fill" type, wrap the default value in a json object and then call solid.color to get the value into the settings object.  You won't need to do it this way if you are creating from scratch and use the recommended ViewModel approach.  I wanted to use the settings object as is and it uses hex, so that's why I have to do that conversion.








I went through and added properties to change just about every aspect of the liquid fill gauge….including being able to set difference colors for the wave, text and circle.
image
Jon

Thursday, September 29, 2016

How to Create a Power BI Custom Visual Based on an Existing d3 Visual - Part 2 - Capabilities, dataRoles and dataViewMappings

This is a continuation of my attempt at creating a Power BI Custom Visual from an OSS d3 visual I found on GitHub.  In this post I'm going to focus on the "capabilities" of the visual.  Here's the previous post: How to Create a Power BI Custom Visual Based on an Existing d3 Visual. It's a liquidFillGauge that was originally created by Curtis Bratton.

This is Part 2 of the series, here are the other posts:
You can install this visual from the GitHub releases page here. I'll put in the Power BI Visual Gallery once the visual is complete.
I found this page helpful when looking into Power BI Custom Visual Data Roles.
image
In the root of your project you have a capabilities.json file. This is where you define how the user can assign data to your visual. Each "dataRole" that you define in this file can be a "Grouping", "Measure" or "GroupingOrMeasure" data role.  I think about it like this: Grouping is like categories of data, sets of data, whereas Measure is a single value…and I'm not quite sure what "GroupingOrMeasure" is used for yet - it's not used very much, so I'm not going to worry about it until I need it.
In the case of the liquidFillGauge, we really only need to assign one value at this point - the fill percentage.  The first version of the visual used the default capabilities.json file that comes with the template when created via "pbiviz new visualName".  The default capabilities comes with two dataRoles "Grouping" and "Measure" like so:
image

Since we only need a single value (at the moment, but we might need more in the future). We can remove the Grouping field and change the name, like so:


And if you just use that you'll see this:
image
What you need to do is define a dataViewMappings object that tells the visual how to represent the dataRoles in the dataView. Again, this is a super simple visual right now, so all we need to do is map the single value.  I've seen examples where "role" is equal to "Values", but removing it doesn't seem to impact anything, so I'm leaving it as an empty string.


Your visualization pane should now look like this:
image
The resulting visual is the same as the original. We just now have a cleaner data pane….and less code.
More to come soon…
Jon