Fix fields with spaces

Fix help url Fix multiple editors Added SVG dimensions
liprec · Dec 8, 2017 · 9195638 · 9195638
1 parent 52f54bf
commit 9195638
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/settings.ts b/src/settings.ts
@@ -41,11 +41,11 @@ module powerbi.extensibility.visual {
 
         public iFrame: string = `<iframe id="d3js-sandbox" class="d3js-sandbox" width="#width" height="#height" style="width:#widthpx;height:#heightpx;margin-top:#toppx;margin-left:#leftpx" src="data:text/html,#src" sandbox="allow-scripts"></iframe>`
         public d3Document: string = `<html><head><script src='https://d3js.org/d3.v3.min.js'></script><style id='d3js-css'>#style</style><script>window.addEventListener('message', function (e) {var mainWindow=e.source;try {document.getElementById('chart').innerHTML="";eval(e.data);} catch (ex) {console.log('D3js code threw an exception: ' + ex);} mainWindow.postMessage("",e.origin);});</script></head><body style="margin:0px;"><svg class="chart" id="chart"></svg></body></html>`
-        public d3SVG: string = `<svg class="chart" id="chart"></svg>`
+        public d3SVG: string = `<svg class="chart" id="chart" width="#width" height="#height"></svg>`
         public d3CSS: string = `<style>#style</style>`
         public d3jsError: string = `<div class="d3jsError">#error</div>`
 
-        public helpUrl: string = `"https://azurebi.jppp.org/power-bi-d3js-visual/"`
+        public helpUrl: string = `https://azurebi.jppp.org/power-bi-d3js-visual/`
     }
 
     export class MarginSettings {

diff --git a/src/visual.ts b/src/visual.ts
@@ -104,6 +104,7 @@ module powerbi.extensibility.visual {
         private static EditContainer: ClassAndSelector = createClassAndSelector("editContainer");
         private static D3Container: ClassAndSelector = createClassAndSelector("d3Container");
         private static EditorHeader: ClassAndSelector = createClassAndSelector("editorHeader");
+        private static EditorTextArea: ClassAndSelector = createClassAndSelector("editorTextArea");
         private static MessageBox: ClassAndSelector = createClassAndSelector("messageBox");
         private static Icon: ClassAndSelector = createClassAndSelector("icon");
         private static New: ClassAndSelector = createClassAndSelector("new");
@@ -225,7 +226,8 @@ module powerbi.extensibility.visual {
                 .style("display", "none");
 
             let editor = this.editContainer
-                .append("textarea");             
+                .append("textarea")
+                .classed(D3JSVisual.EditorTextArea.className, true); 
 
             this.d3Container = d3.select(this.target)
                 .append("div")
@@ -313,10 +315,8 @@ module powerbi.extensibility.visual {
                     mode = "javascript";
                     break;
             }
-            textarea
-                .each(function (d) {
-                    textareaElement = this; // Convert to HTMLTextAreaElement
-                });
+            textareaElement = $(D3JSVisual.EditorTextArea.selectorName)[0]
+            $('.CodeMirror').remove();
             this.editor = CodeMirror.fromTextArea(textareaElement, {
                 lineNumbers: true,
                 mode: mode
@@ -375,7 +375,10 @@ module powerbi.extensibility.visual {
                 .style("padding-left", PixelConverter.toString(this.settings.margin.left))
             let iHtml = this.settings.general.d3CSS
             iHtml = iHtml.replace("#style", this.settings.general.css);
-            iHtml += this.settings.general.d3SVG
+            let svg = this.settings.general.d3SVG
+                .replace(/#height/g, PixelConverter.toString(height))
+                .replace(/#width/g, PixelConverter.toString(width))
+            iHtml += svg
             $(D3JSVisual.D3jsFrame.selectorName).html(iHtml); // Inject code via jQuery
             try {
                 eval(d3jsCode);
@@ -412,7 +415,7 @@ module powerbi.extensibility.visual {
             for (let v = 0; v < data.dataObjects[0].values.length; v++) {
                 d3jsCode += (min ? "" : "\n\t\t\t") + "{" ;
                 for (let c = 0; c < data.dataObjects.length; c++) {
-                    let columnName = data.dataObjects[c].columnName.toLowerCase();
+                    let columnName = data.dataObjects[c].columnName;
                     let value = data.dataObjects[c].values[v];
                     d3jsCode += `${columnName}:'${value}',`;
                 }
@@ -448,7 +451,7 @@ module powerbi.extensibility.visual {
                     values.push(rows[r][c]);
                 }
                 let dataObject: D3JSDataObject = {
-                    columnName: column.displayName,
+                    columnName: column.displayName.replace(/\s+/g, '').toLowerCase(),
                     values: values
                 }
                 dataObjects.push(dataObject);