visual.ts file

"use strict";

import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;

import { VisualSettings } from "./settings";
import * as d3 from 'd3';

interface DataPoint {
    value: number;
    category: string
}

interface ViewModel {
    dataPoints: DataPoint[];
    dataMax: number
}

let testData: DataPoint[] = [
    {
        value: 10,
        category: 'a'
    },
    {
        value: 15,
        category: 'b'
    },
    {
        value: 2,
        category: 'c'
    },
    {
        value: 25,
        category: 'd'
    },
    {
        value: 8,
        category: 'e'
    }
]

export class Visual implements IVisual {

    settings: VisualSettings;

    private svg: d3.Selection<SVGElement, any, any, any>;
    private host: powerbi.extensibility.IVisualHost;
    private barChartContainer: d3.Selection<SVGElement, any, any, any>;
    private barContainer: d3.Selection<SVGElement, any, any, any>;
    private xAxis: d3.Selection<SVGElement, any, any, any>;
    private bars: d3.Selection<SVGElement, any, any, any>;


    constructor(options: VisualConstructorOptions) {
        debugger;
        console.log('constructor called');
        this.host = options.host;
        let svg = this.svg = d3.select(options.element).append('svg').classed('barChart', true);
        this.barContainer = svg.append('g').classed('barContainer', true);
        this.xAxis = svg.append('g').classed('xAxis', true);
    }

    public update(options: VisualUpdateOptions) {
        debugger;
        console.log('update called');
        let width = options.viewport.width;
        let height = options.viewport.height;

        let margin = {
            top: 0,
            bottom: 25,
            left: 0,
            right: 0
        };

        let viewModel: ViewModel = {
            dataPoints: testData,
            dataMax: d3.max(testData.map((dataPoint) => dataPoint.value))
        };

        this.svg.attr('width', width);
        this.svg.attr('height', height);

        height -= margin.bottom;

        let yScale = d3.scaleLinear()
            .domain([0, viewModel.dataMax])
            .range([height, 0]);

        let xScale = d3.scaleBand()
            .domain(viewModel.dataPoints.map(d => d.category))
            .rangeRound([0, width])
            .padding(0.1);

        let xAxis = d3.axisBottom(xScale);
        this.xAxis.attr('transform', 'translate(0, ' + height + ')').call(xAxis);

        let bars = this.barContainer.selectAll('.bar').data(viewModel.dataPoints);

        console.log('xScale bandwidth: ', xScale.bandwidth());
try {
        bars.enter().append('rect').classed('bar', true);
            // .attr('width', xScale.bandwidth())
            // .attr('height', d => height - yScale(d.value))
            // .attr('y', d => yScale(d.value))
            // .attr('x', d => xScale(d.category));

        bars.transition()
            .attr('width', xScale.bandwidth())
            .attr('height', d => height - yScale(d.value))
            .attr('y', d => yScale(d.value))
            .attr('x', d => xScale(d.category));
} catch (e) {
    console.log(e);
}
        bars.exit().remove();
    }

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