Plugin Directives- Proper way to send JAQL Query data to plugin directive

[gokulakrishna9]

Hi All,

I have been able to get an AngularJS to run on Sisense based on Aggregated Table Plugin code. The problem I am facing is how to get the processed result data into the directive, without using the scope.

widget.js

console.log('d3Angular Report - WIDGET ENTRY');

prism.registerWidget('d3Angular', {
	name: 'd3Angular',
	family: 'singlepagedashboard',
	title: 'd3Angular Report',
	//priority: 8,                // ?
	//hideNoReslts: false,        // ?
	//noResultImg: '',
	//noResultImgSmall: '',
	//iconSmall: '/plugin/d3Angular/report.png', // prism.proxyurl + ''
	styleEditorTemplate: '/plugin/d3Angular/style-panel-template.html', // prism.proxyurl +
	//style: {},
	sizing: {
		minHeight: 100,
		maxHeight: 1000,
		minWidth: 100,
		maxWidth: 1000
	},
	///*
	data: {
		panels: [
			{
				name: 'Category',
				type: 'visible',
				metadata: {
					types: ['dimensions'],
					maxitems: 1
				}
			},
			{
				name: 'Value',
				type: 'visible',
				metadata: {
					types: ['measures'],
					maxitems: 1
				}
			},
			{
				name: 'filters',
				type: 'filters',
				metadata: {
					types: ['dimensions'],
					maxitems: -1
				}
			}
		],
		buildQuery: (widget, query) => {
			// ? Transpose before sending data to panel
			// ? what is $$ object
			console.log('d3Angular Report - IN BUILD QUERY');
			console.log('Widget Object');
			console.log(widget);
			console.log('Query Object');
			console.log(query);
			widget.metadata.panel('Category').items.forEach((item) => {
				query.metadata.push($$.object.clone(item, true));
			});
			widget.metadata.panel('Value').items.forEach((item) => {
				query.metadata.push($$.object.clone(item, true));
			});
			widget.metadata.panel('filters').items.forEach((item) => {
				const itemClone = $$.object.clone(item, true);
				itemClone.panel = 'scope';
				query.metadata.push(itemClone);
			});
			return query;
		},
		// Widget assuming it is the current widget, and
		// items are what is sent from the other widget
		populateMetadata: (widget, items) => {
			console.log('In POPULATE METADATA');
			console.log('Prism.$jaql');
			console.log(prism.$jaql);
			const breakdown = prism.$jaql.analyze(items);
			console.log(breakdown);
			widget.metadata.panel('Category').push(breakdown.dimensions);
			widget.metadata.panel('Value').push(breakdown.measures);
			widget.metadata.panel('filters').push(breakdown.filters);
		},
		processResult: function (widget, queryResult) {
			console.log('In PROCESS RESULT');
			/*
			_.forEach(queryResult.$$rows, (row) => {
				console.log('Each Row In ProcessResult');
				console.log(row);
			});
			*/
			return queryResult.$$rows;
		}
	},
	//*/
	directive: { desktop: "index" }
});

directive.js

mod.directive("myTabs", [function () {
    return {
      restrict: "E",
      transclude: true,
      scope: {},
      controller: [
        "$scope",
        function MyTabsController($scope) {
          var panes = ($scope.panes = []);
          console.log($scope.$root.widget.queryResult);
          $scope.select = function (pane) {
            angular.forEach(panes, function (pane) {
              pane.selected = false;
              pane.active = '';
            });
            pane.selected = true;
            pane.active = 'w3-orange';
          };

          this.addPane = function (pane) {
            if (panes.length === 0) {
              $scope.select(pane);
            }
            panes.push(pane);
          };
        },
      ],
      templateUrl: prism.proxyurl + "/plugins/d3Angular/views/" + "my-tabs.html",
    };
  }])
  .directive("myPane", [function () {
    return {
      require: "^^myTabs",
      restrict: "E",
      transclude: true,
      scope: {
        title: "@",
      },
      link: function (scope, element, attrs, tabsCtrl) {
        tabsCtrl.addPane(scope);
      },
      templateUrl: prism.proxyurl + "/plugins/d3Angular/views/" + "my-pane.html",
    };
  }])
  .directive("horziontalChart", [function () {
    return {
      restrict: "A",
      scope: {},
      link: function (scope, element, attrs, tabsCtrl) {
        //var dataArray = [20, 40, 50, 600];
        // 600 value gets truncated, or chopped off
        // use scale method, domain([min, max])
        var dataArray = [20, 40, 50, 60];
        var width = 500;
        var height = 500;
        // d3 scale method
        var widthScale = d3.scale.linear().domain([0, 60]).range([0, width]);
        var color = d3.scale.linear().domain([0, 60]).range(["red", "blue"]);
        var canvas = d3
          .select(element[0])
          .append("svg")
          .attr("width", 500)
          .attr("height", 500);
        var bars = canvas
          .selectAll("rect")
          .data(dataArray)
          .enter()
          .append("rect")
          .attr("width", function (d) {
            return widthScale(d);
          })
          .attr("height", 50)
          .attr("fill", function (d) {
            return color(d);
          })
          .attr("y", function (d, i) {
            return i * 100;
          });
      },
    };
  }])
  .directive("doughnutChart", [function () {
    return {
      restrict: "A",
      scope: {},
      link: function (scope, element, attrs, tabsCtrl) {
        var data = [10, 50, 80];
        var r = 100;
        var color = d3.scale.ordinal().range(["red", "blue", "orange"]);
        var canvas = d3
          .select(element[0])
          .append("svg")
          .attr("width", 500)
          .attr("height", 500);
        var group = canvas.append("g").attr("transform", "translate(300, 300)");
        var arc = d3.svg.arc().innerRadius(200).outerRadius(r);
        var pie = d3.layout.pie().value(function (d) {
          return d;
        });
        var arcs = group
          .selectAll(".arc")
          .data(pie(data))
          .enter()
          .append("g")
          .attr("class", "arc");
        arcs
          .append("path")
          .attr("d", arc)
          .attr("fill", function (d) {
            return color(d.data);
          });
        arcs
          .append("text")
          .attr("transform", function (d) {
            return "translate(" + arc.centroid(d) + ")";
          })
          .attr("text-anchor", "middle")
          .attr("font-size", "1.5em")
          .text(function (d) {
            return d.data;
          });
      },
    };
  }])
  .directive("transitionChart", [function () {
    return {
      restrict: "A",
      scope: {},
      link: function (scope, element, attrs, tabsCtrl) {
        var data = [10, 20];
        var canvas = d3
          .select(element[0])
          .append("svg")
          .attr("width", 500)
          .attr("height", 500);
        var circle = canvas
          .append("circle")
          .attr("cx", 50)
          .attr("cy", 50)
          .attr("r", 50);
        circle
          .transition()
          .duration(1500)
          .delay(2000)
          .attr("cx", 150)
          .each("end", function () {
            d3.select(this).attr("fill", "red");
          });
      },
    };
  }]).directive('index', [function() {
		return {
			templateUrl: prism.proxyurl + "/plugins/d3Angular/views/" + "index.html"
		}
	}]);