[Feature] Custom theme

src/docs/Popup.jsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import './styles.css';
+
+const Popup = ({ handleClose, show }) => {
+    const showHideClassName = show ? "modal display-block" : "modal display-none";
+
+    const [ text, setText ] = useState('');
+
+    const handleText = (event) => {
+        setText(event.target.value);
+    }
+
+    return (
+      <div className={showHideClassName}>
+        <section className="modal-main">
+        <textarea className="themeText" rows="5" cols="40" value={text} onChange={handleText}></textarea>
+        <button onClick={() => handleClose(text)}>Apply</button>
+        </section>
+      </div>
+    );
+  };
+
+  export default Popup;

src/docs/index.jsx

@@ -8,6 +8,7 @@ import 'react-splitter-layout/lib/index.css';
 import './styles.css';
 import Report from '../lib';
 import { initializeState, embedTypes, defaultOptions } from './utils';
+import Popup from './Popup';
 
 class Demo extends Component {
   constructor(props) {
@@ -22,6 +23,9 @@ class Demo extends Component {
     this.onSelect = this.onSelect.bind(this);
     this.resetState = this.resetState.bind(this);
     this.saveReport = this.saveReport.bind(this);
+    this.showPopup = this.showPopup.bind(this);
+    this.hidePopup = this.hidePopup.bind(this);
+    this.resetTheme = this.resetTheme.bind(this);
   }
 
   getCode(view = true) {
@@ -36,6 +40,7 @@ class Demo extends Component {
       pageName,
       reportMode,
       datasetId,
+      theme
     } = this.state;
     const viewAccessToken =
       accessToken && `${accessToken.slice(0, 10)}...`;
@@ -69,6 +74,7 @@ class Demo extends Component {
     dashboardId="${dashboardId}"
     pageName="${pageName}"
     reportMode="${reportMode}" // "view" or "edit
+    theme="${JSON.stringify(theme)}"
     extraSettings={{
       filterPaneEnabled: ${this.state.filterPaneEnabled ===
         'filter-true'},
@@ -162,6 +168,31 @@ class Demo extends Component {
     }
   }
 
+  showPopup = () => {
+    this.setState({ show: true });
+  }
+
+  async hidePopup(text) {
+    if(this.report) {
+    this.setState({ show: false });
+    try {
+      await this.report.applyTheme({themeJson: JSON.parse(text)});
+    } catch(err) {
+      console.log('error applying theme : '+JSON.stringify(err));
+    }
+    }
+  }
+
+  async resetTheme() {
+    if(this.report) {
+    try {
+      await this.report.resetTheme();
+    } catch(err) {
+      console.log('error resetting report theme : '+JSON.stringify(err));
+    }
+    }
+  }
+
   render() {
     const {
       embedType,
@@ -175,6 +206,8 @@ class Demo extends Component {
       flag,
       reportMode,
       datasetId,
+      theme,
+      show,
     } = this.state;
 
     const style = {
@@ -224,6 +257,7 @@ class Demo extends Component {
               style={style.report}
               reportMode={this.state.reportMode}
               datasetId={datasetId}
+              theme={theme || {}}
               onLoad={report => {
                 console.log('Report Loaded!');
                 this.report = report;
@@ -363,6 +397,17 @@ class Demo extends Component {
                 />
               </span>
               )}
+              <span>
+                <b className="fieldName">Custom Theme</b>
+                <textarea className="textarea"
+                  rows="5"
+                  cols="40"
+                  name="theme"
+                  onChange={this.handleChange}
+                  value={JSON.stringify(theme)}
+                  disabled={flag}
+              ></textarea>
+              </span>
               {!isCreateMode && reportFlag && (
                 <Fragment>
                   <span>
@@ -529,6 +574,20 @@ class Demo extends Component {
                 >
                   Save
                 </button>
+                <button
+                  className="interactionBtn"
+                  disabled={!reportFlag || !flag}
+                  onClick={this.showPopup}
+                >
+                  Apply Theme
+                </button>
+                <button
+                  className="interactionBtn"
+                  disabled={!reportFlag || !flag}
+                  onClick={this.resetTheme}
+                >
+                  Reset Theme
+                </button>
               </span>
               )}
               <span className="runBtnHolder">
@@ -546,6 +605,7 @@ class Demo extends Component {
                 </button>
               </span>
             </div>
+            <Popup show={show} handleClose={this.hidePopup} handleText={this.handleText}/>
             <div className="code">
               <CopyToClipboard text={this.getCode(false)}>
                 <button className="copyBtn">Copy</button>

src/docs/styles.css

@@ -122,12 +122,18 @@ input :required {
   grid-template-columns: 1fr;
 }
 
+.code {
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
 .code > pre {
   background: lightgrey;
   padding: 15px;
   font-size: 14px;
   margin: 0;
   min-height: 300px;
+  white-space: pre-wrap;
 }
 
 .codeHeader {
@@ -177,6 +183,59 @@ footer {
   text-align: center;
 }
 
+.config > * >textarea {
+  width: 90%;
+  border: 1px solid #bbb;
+  border-radius: 5px;
+  flex-wrap: wrap;
+  overflow-wrap: break-word;
+  text-overflow: clip;
+  resize: none;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width:100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.modal .modal-main {
+  position:fixed;
+  background: white;
+  width: 50%;
+  height: auto;
+  top:50%;
+  left:50%;
+  transform: translate(-50%,-50%);
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.modal-main .themeText {
+  border: 1px solid #bbb;
+  border-radius: 5px;
+  resize: none;
+}
+
+.modal-main button {
+  align-self: flex-end;
+  width: 50px;
+  margin-top: 10px;
+}
+
+.display-block {
+  display: block;
+}
+
+.display-none {
+  display: none;
+}
+
+
 @media only screen and (max-width: 900px) {
   .code {
     display: none;

src/docs/utils.js

@@ -31,10 +31,17 @@ const initializeState = type => ({
   flag: false,
   reportMode: defaultOptions[type].mode,
   datasetId: '',
+  theme: {},
+show: false
 });
 
+const isObject = obj => {
+  return (typeof obj === "object" && obj !== null) || typeof obj === "function";
+}
+
 export {
   embedTypes,
   defaultOptions,
-  initializeState
+  initializeState,
+  isObject,
 };

src/lib/config.js

@@ -1,5 +1,5 @@
 import { models } from 'powerbi-client';
-import { clean } from "./utils";
+import { clean, isEmpty } from "./utils";
 import pbi from 'powerbi-client';
 
 const createConfig = props => {
@@ -16,7 +16,9 @@ const createConfig = props => {
         dashboardId,
         datasetId,
         reportMode,
+        theme,
       } = props;
+
       if(reportMode === 'create') {
         return clean({
           tokenType: models.TokenType[tokenType],
@@ -43,15 +45,26 @@ const createConfig = props => {
         },
         datasetId,
         reportMode,
+        theme: !isEmpty(theme)?{themeJson: theme}:null,
       });
     }
     return null;
   };
 
+  const validateCustomTheme = config => {
+    if(config.theme) {
+      err = pbi.models.validateCustomTheme(config.theme);
+      if(err) {
+        return []
+      }
+    }
+    return [];
+    };
+
   const validateTypeConfig = config => {
     switch (config.type) {
       case 'report':
-        return pbi.models.validateReportLoad(config);
+        return pbi.models.validateReportLoad(config) && validateCustomTheme(config);
       case 'dashboard':
         return pbi.models.validateDashboardLoad(config);
       case 'tile': 

src/lib/onEmbedHandlers.js

@@ -7,11 +7,13 @@ const reportHandler = (report, reportMode, props) => {
         if(validateMode(reportMode) && reportMode !== "view") {
             report.switchMode(reportMode);
         }
-
         validateAndInvokeCallback(props.onLoad, report);
+        if(props.theme) report.applyTheme(props.theme);
       });
 
-      report.on('rendered', () => validateAndInvokeCallback(props.onRender, report));
+      report.on('rendered', () => {
+          validateAndInvokeCallback(props.onRender, report);
+        });
 
       report.on('error', event => validateAndInvokeCallback(props.onError, event.detail));
 

src/lib/utils.js

@@ -27,4 +27,6 @@ const validateAndInvokeCallback = (callback, data) => {
   }
 }
 
-export { clean, validateMode, validateAndInvokeCallback };
+const isEmpty = (obj) => { return Object.keys(obj).length === 0 && obj.constructor === Object};
+
+export { clean, validateMode, validateAndInvokeCallback, isEmpty };