Forum Discussion

FunDeckHermit's avatar
8 years ago
Solved

D3 V4 gallery library implementation with dependencies

Hello everyone,

I'm trying to implement an example library from the D3 gallery called Visavail. A demo of this library can be found here: link.

I'm having difficulties getting it to work, any help or pointers will be appriciated. 

 

Setup:

  • Installed Moment with npm
  • Installed D3 V4 with npm
  • Added Visavail library to the node_modules folder
  • Added font-awesome tot the style folder

Then I referenced it all in pbiviz.json:

 

  "externalJS": [
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
	  "node_modules/d3/build/d3.min.js",
    "node_modules/visavail/js/visavail.js",
    "node_modules/moment/min/moment-with-locales.min.js"
  ],
  "style": "style/visual.less",
  "capabilities": "capabilities.json",
  "dependencies": "dependencies.json",
  "stringResources": []

 

The CSS was referenced in the visual.less file:

 

@import (less) "style/font-awesome/css/font-awesome.min.css";
@import (less) "node_modules/visavail/css/visavail.css";

 

The code:

In Visual.ts, based on the hello world update counter I recreated the Visavail example with static data. 

 

module powerbi.extensibility.visual {
    "use strict";
    export class Visual implements IVisual {
        private target: HTMLElement;
        private settings: VisualSettings;

        private d3;
        private visavail;
        private moment;
        private svg;
        private mydataset;
        private chart;

        constructor(options: VisualConstructorOptions) {
            console.log('Visual constructor', options);
            this.target = options.element;
            
            this.d3 = (window as any).d3;
            this.visavail = (window as any).visavail;
            this.moment = (window as any).moment;

            this.moment.locale("en");

            this.svg = this.d3.select(this.target).append('svg');

        }

        public update(options: VisualUpdateOptions) {
            this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
            this.target.innerHTML = '<p id="example">TEST</em></p>';
            
            this.chart = this.visavail.visavailChart().width(800);

            this.mydataset = [{
                "measure": "Annual Report", 
                "data": [
                    ["2015-01-01", 0, "2015-03-04"],
                    ["2016-01-01", 1, "2016-03-03"],
                    ["2017-01-01", 1, "2017-03-06"],
                    ["2018-01-01", 1, "2018-04-01"]
                ]
            }];

            this.d3.select("#example").datum(this.mydataset).call(this.chart);
        }

        private static parseSettings(dataView: DataView): VisualSettings {
            return VisualSettings.parse(dataView) as VisualSettings;
        }

        public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
            return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
        }
    }
}

 

 

  • Am I referencing the dependencies correctly?
  • Am I importing the dependencies correctly?
  • Am I implementing the dependencies correctly?
  • How do I debug this?

I zipped the entire project, it can be downloaded here:

https://www.dropbox.com/s/aggbcdm4vnooy8h/statisTimeLine2.zip?dl=0

 

 

2 Replies

  • Hello everyone,

    I'm trying to implement an example library from the D3 gallery called Visavail. A demo of this library can be found here: link.

    I'm having difficulties getting it to work, any help or pointers will be appriciated. I don't know where to post it, if this is the wrong place please delete this post. 

     

    Setup:

    • Installed Moment with npm
    • Installed D3 V4 with npm
    • Added Visavail library to the node_modules folder
    • Added font-awesome tot the style folder

    Then I referenced it all in pbiviz.json:

     

      "externalJS": [
        "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
    	  "node_modules/d3/build/d3.min.js",
        "node_modules/visavail/js/visavail.js",
        "node_modules/moment/min/moment-with-locales.min.js"
      ],
      "style": "style/visual.less",
      "capabilities": "capabilities.json",
      "dependencies": "dependencies.json",
      "stringResources": []

     

    The CSS was referenced in the visual.less file:

     

    @import (less) "style/font-awesome/css/font-awesome.min.css";
    @import (less) "node_modules/visavail/css/visavail.css";

     

    The code:

    In Visual.ts, based on the hello world update counter I recreated the Visavail example with static data. 

     

    module powerbi.extensibility.visual {
        "use strict";
        export class Visual implements IVisual {
            private target: HTMLElement;
            private settings: VisualSettings;
    
            private d3;
            private visavail;
            private moment;
            private svg;
            private mydataset;
            private chart;
    
            constructor(options: VisualConstructorOptions) {
                console.log('Visual constructor', options);
                this.target = options.element;
                
                this.d3 = (window as any).d3;
                this.visavail = (window as any).visavail;
                this.moment = (window as any).moment;
    
                this.moment.locale("en");
    
                this.svg = this.d3.select(this.target).append('svg');
    
            }
    
            public update(options: VisualUpdateOptions) {
                this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
                this.target.innerHTML = '<p id="example">TEST</em></p>';
                
                this.chart = this.visavail.visavailChart().width(800);
    
                this.mydataset = [{
                    "measure": "Annual Report", 
                    "data": [
                        ["2015-01-01", 0, "2015-03-04"],
                        ["2016-01-01", 1, "2016-03-03"],
                        ["2017-01-01", 1, "2017-03-06"],
                        ["2018-01-01", 1, "2018-04-01"]
                    ]
                }];
    
                this.d3.select("#example").datum(this.mydataset).call(this.chart);
            }
    
            private static parseSettings(dataView: DataView): VisualSettings {
                return VisualSettings.parse(dataView) as VisualSettings;
            }
    
            public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
                return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
            }
        }
    }

     

     

    • Am I referencing the dependencies correctly?
    • Am I importing the dependencies correctly?
    • Am I implementing the dependencies correctly?
    • How do I debug this?

    I zipped the entire project, it can be downloaded here:

    https://www.dropbox.com/s/aggbcdm4vnooy8h/statisTimeLine2.zip?dl=0