gokulakrishna9
Data Storage
Joined 4 years ago
User Profile
User Widgets
Contributions
Plugin Directives- Proper way to send JAQL Query data to plugin directive
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" } }]);1KViews0likes0Comments