feat: add powerbi theme (#320)

* Adding powerbi Theme

Mimics Power BI Desktop default theme (correct for October 2021).

* Resolving dataset URL error in heatmap visual

README.md

@@ -85,6 +85,12 @@ vega.themes.<b>googlecharts</b>
 
 Chart theme modeled after Google Charts. [Try it here](https://vega.github.io/vega-themes/?theme=googlecharts).
 
+<a name="powerbi " href="#powerbi">#</a>
+vega.themes.<b>powerbi</b>
+[<>](https://github.com/vega/vega-themes/blob/master/src/theme-powerbi.ts "Source")
+
+Chart theme modeled after Power BI Desktop default theme. [Try it here](https://vega.github.io/vega-themes/?theme=powerbi).
+
 ## Instructions for Developers
 
 To view and test different themes, follow these steps:

examples/heatmap.vl.json

@@ -1,45 +1,45 @@
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
   "data": {
-      "url": "https://vega.github.io/vega-datasets/data/seattle-temps.csv"
+    "url": "https://vega.github.io/vega-datasets/data/seattle-weather.csv"
   },
   "title": "2010 Daily Max Temperature in Seattle",
   "config": {
-      "view": {
-          "strokeWidth": 0
-      },
-      "axis": {
-          "domain": false
-      }
+    "view": {
+      "strokeWidth": 0
+    },
+    "axis": {
+      "domain": false
+    }
   },
   "mark": {
     "type": "rect",
     "tooltip": true
   },
   "encoding": {
-      "x": {
-          "field": "date",
-          "timeUnit": "date",
-          "type": "ordinal",
-          "title": "Day",
-          "axis": {
-              "labelAngle": 0,
-              "format": "%e"
-          }
-      },
-      "y": {
-          "field": "date",
-          "timeUnit": "month",
-          "type": "ordinal",
-          "title": "Month"
-      },
-      "color": {
-          "field": "temp",
-          "aggregate": "max",
-          "type": "quantitative",
-          "legend": {
-              "title": null
-          }
+    "x": {
+      "field": "date",
+      "timeUnit": "date",
+      "type": "ordinal",
+      "title": "Day",
+      "axis": {
+        "labelAngle": 0,
+        "format": "%e"
+      }
+    },
+    "y": {
+      "field": "date",
+      "timeUnit": "month",
+      "type": "ordinal",
+      "title": "Month"
+    },
+    "color": {
+      "field": "temp_max",
+      "aggregate": "max",
+      "type": "quantitative",
+      "legend": {
+        "title": null
       }
+    }
   }
 }

examples/index.html

@@ -61,6 +61,7 @@
         <option value="latimes">latimes</option>
         <option value="urbaninstitute">urbaninstitute</option>
         <option value="googlecharts">googlecharts</option>
+        <option value="powerbi">powerbi</option>
       </select>
       &nbsp; Renderer:
       <select id="render">

src/index.ts

@@ -10,4 +10,5 @@ export {default as quartz} from './theme-quartz';
 export {default as vox} from './theme-vox';
 export {default as urbaninstitute} from './theme-urbaninstitute';
 export {default as googlecharts} from './theme-googlecharts';
+export {default as powerbi} from './theme-powerbi';
 export {version};

src/theme-powerbi.ts

@@ -0,0 +1,113 @@
+import {Config} from './config';
+
+const ptToPx = (value: number) => value * (1 / 3 + 1);
+
+const fontSmallPx = ptToPx(9),
+  legendFontPx = ptToPx(10),
+  fontLargePx = ptToPx(12),
+  fontStandard = 'Segoe UI',
+  fontTitle = 'wf_standard-font, helvetica, arial, sans-serif',
+  firstLevelElementColor = '#252423',
+  secondLevelElementColor = '#605E5C',
+  backgroundColor = 'transparent',
+  backgroundSecondaryColor = '#C8C6C4',
+  paletteColor1 = '#118DFF',
+  paletteColor2 = '#12239E',
+  paletteColor3 = '#E66C37',
+  paletteColor4 = '#6B007B',
+  paletteColor5 = '#E044A7',
+  paletteColor6 = '#744EC2',
+  paletteColor7 = '#D9B300',
+  paletteColor8 = '#D64550',
+  divergentColorMax = paletteColor1,
+  divergentColorMin = '#DEEFFF',
+  divergentPalette = [divergentColorMin, divergentColorMax],
+  ordinalPalette = [
+    divergentColorMin,
+    '#c7e4ff',
+    '#b0d9ff',
+    '#9aceff',
+    '#83c3ff',
+    '#6cb9ff',
+    '#55aeff',
+    '#3fa3ff',
+    '#2898ff',
+    divergentColorMax,
+  ];
+
+const powerbiTheme: Config = {
+  view: {stroke: backgroundColor},
+  background: backgroundColor,
+  font: fontStandard,
+  header: {
+    titleFont: fontTitle,
+    titleFontSize: fontLargePx,
+    titleColor: firstLevelElementColor,
+    labelFont: fontStandard,
+    labelFontSize: legendFontPx,
+    labelColor: secondLevelElementColor,
+  },
+  axis: {
+    ticks: false,
+    grid: false,
+    domain: false,
+    labelColor: secondLevelElementColor,
+    labelFontSize: fontSmallPx,
+    titleFont: fontTitle,
+    titleColor: firstLevelElementColor,
+    titleFontSize: fontLargePx,
+    titleFontWeight: 'normal',
+  },
+  axisQuantitative: {
+    tickCount: 3,
+    grid: true,
+    gridColor: backgroundSecondaryColor,
+    gridDash: [1, 5],
+    labelFlush: false,
+  },
+  axisBand: {tickExtra: true},
+  axisX: {labelPadding: 5},
+  axisY: {labelPadding: 10},
+  bar: {fill: paletteColor1},
+  line: {
+    stroke: paletteColor1,
+    strokeWidth: 3,
+    strokeCap: 'round',
+    strokeJoin: 'round',
+  },
+  text: {font: fontStandard, fontSize: fontSmallPx, fill: secondLevelElementColor},
+  arc: {fill: paletteColor1},
+  area: {fill: paletteColor1, line: true, opacity: 0.6},
+  path: {stroke: paletteColor1},
+  rect: {fill: paletteColor1},
+  point: {fill: paletteColor1, filled: true, size: 75},
+  shape: {stroke: paletteColor1},
+  symbol: {fill: paletteColor1, strokeWidth: 1.5, size: 50},
+  legend: {
+    titleFont: fontStandard,
+    titleFontWeight: 'bold',
+    titleColor: secondLevelElementColor,
+    labelFont: fontStandard,
+    labelFontSize: legendFontPx,
+    labelColor: secondLevelElementColor,
+    symbolType: 'circle',
+    symbolSize: 75,
+  },
+  range: {
+    category: [
+      paletteColor1,
+      paletteColor2,
+      paletteColor3,
+      paletteColor4,
+      paletteColor5,
+      paletteColor6,
+      paletteColor7,
+      paletteColor8,
+    ],
+    diverging: divergentPalette,
+    heatmap: divergentPalette,
+    ordinal: ordinalPalette,
+  },
+};
+
+export default powerbiTheme;