Add support for using the PivotTable/Table outputs within Shadow DOM (#…

…104)

* Send query-viewer elemento to renderJSPivot

* Update jsPivotTable version

* Upgrade jspivottable version

* Pickup jsPivotTable from github

* use jsPivotTable version 1.4.3

* Update package-lock.json

package.json

@@ -70,7 +70,7 @@
     "date-fns": "^2.30.0",
     "highcharts": "^11.1.0",
     "jquery": "^3.7.1",
-    "jspivottable": "1.3.7",
+    "jspivottable": "1.4.3",
     "material-icons": "^1.13.1",
     "rollup-plugin-dotenv": "^0.5.0"
   },

src/components/query-viewer-chart/controller/query-viewer-chart-controller.tsx

@@ -20,7 +20,7 @@ import {
   processDataAndMetadata
 } from "./processDataAndMetadata";
 
-import { Options } from "highcharts";
+import { Options, PaneOptions } from "highcharts";
 import { ChartTypes } from "./chart-types";
 import {
   AVERAGE_DAYS_PER_MONTH,
@@ -402,7 +402,7 @@ export class QueryViewerChart {
         chartOptions={{ type: "line", height: 80 }}
         seriesOptions={fillHeaderAndFooter(this.chartType, charts)}
         tooltipOptions={{ enabled: false }}
-        paneOptions={pane}
+        paneOptions={pane as PaneOptions}
         legendOptions={{ enabled: false }}
         plotOptions={{
           line: {
@@ -429,7 +429,7 @@ export class QueryViewerChart {
         })
 
         /*
-      
+
       { {this.renderGroupByCombo({
         showYears: true,
         showSemesters: true,
@@ -485,7 +485,7 @@ export class QueryViewerChart {
             chartOptions={chart}
             seriesOptions={series}
             tooltipOptions={tooltip}
-            paneOptions={pane}
+            paneOptions={pane as PaneOptions}
             legendOptions={legend}
             plotOptions={plotOptions}
             yaxisOptions={yAxis}

src/components/query-viewer-pivot-table/query-viewer-pivot.tsx

@@ -1,5 +1,13 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { Component, h, Method, Prop, Watch, Listen } from "@stencil/core";
+import {
+  Component,
+  Element,
+  h,
+  Method,
+  Prop,
+  Watch,
+  Listen
+} from "@stencil/core";
 import {
   renderJSPivot,
   OAT,
@@ -41,6 +49,9 @@ export class QueryViewerPivot {
   private shouldReRenderPivot = false;
   private pageSizeChangeWasCommittedByTheUser = false;
 
+  @Element()
+  element: HTMLGxQueryViewerPivotElement;
+
   /**
    * Response Attribute Values
    */
@@ -94,7 +105,6 @@ export class QueryViewerPivot {
     );
   }
 
-
   /**
    * Response Page Data
    */
@@ -392,7 +402,8 @@ export class QueryViewerPivot {
         this.queryViewerConfiguration.pivotParams,
         this.pivotCollection.collection,
         this.QueryViewerTranslations,
-        this.queryViewerConfiguration
+        this.queryViewerConfiguration,
+        this.element
       );
     }
   }

src/components/query-viewer/query-viewer.tsx

@@ -1,6 +1,7 @@
 import {
   Component,
   EventEmitter,
+  Element,
   Event,
   Host,
   Listen,
@@ -102,6 +103,7 @@ export class QueryViewer {
     [QueryViewerOutputType.Default]: response =>
       this.notImplementedRender(response)
   };
+  @Element() element: HTMLGxQueryViewerElement;
 
   // refs
   private controller: HTMLGxQueryViewerControllerElement;
@@ -866,9 +868,10 @@ export class QueryViewer {
   }
 
   private setControllerRef() {
-    this.controller = document.querySelector(
-      `[id=${this.temporalId}] > gx-query-viewer-controller`
-    );
+    // this.controller = document.querySelector(
+    //   `[id=${this.temporalId}] > gx-query-viewer-controller`
+    // );
+    this.controller = this.element.querySelector(`gx-query-viewer-controller`);
   }
 
   componentWillLoad() {