@datarailsshared/dr_renderer 1.2.462 → 1.3.1-27.merge

package/src/pivot.css

@@ -5,6 +5,17 @@
   flex-direction: column;
 }
 
+.pivot-wrapper .noData--table-many-rows {
+    display: flex;
+    flex-direction: column;
+}
+.pivot-wrapper .noData--table-many-rows > *:first-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 25px;
+}
+
 table.pvtTable {
     font-size: 8pt;
     text-align: left;
@@ -228,16 +239,27 @@ table.pvtTable.newPvtTable thead tr th {
   border-right: 1px solid #fff;
 }
 
-table.pvtTable.newPvtTable thead tr th .fa,
-table.pvtTable.newPvtTable thead tr th .dr-icon-add,
-table.pvtTable.newPvtTable thead tr th .dr-icon-minus {
-  padding: 2px;
-  background-color: #ffffff;
-  border-radius: 2px;
-  margin-right: 2px;
-  margin-left: 1px;
-  font-size: 8px;
-  color: #151a41;
+table.pvtTable.newPvtTable thead tr th i,
+table.pvtTable.newPvtTable tbody tr th i {
+    position: relative;
+    bottom: -1px;
+    background-color: #ffffff;
+    border-radius: 2px;
+    margin-right: 2px;
+    margin-left: 1px;
+    font-weight: bold;
+    font-size: 10px;
+    color: #151a41;
+}
+
+table.pvtTable.newPvtTable tbody tr th i {
+    bottom: -2px;
+    background-color: #dfe6ec;
+}
+
+table.pvtTable.newPvtTable thead tr th .dr-icon-filter-old,
+table.pvtTable.newPvtTable tbody tr th .dr-icon-filter-old {
+    font-weight: normal;
 }
 
 table.pvtTable.newPvtTable.colorized tr th.colTotal,
@@ -261,14 +283,6 @@ table.pvtTable.newPvtTable tbody tr td.rowTotal {
   border-color: #ffffff !important;
 }
 
-table.pvtTable.newPvtTable tbody tr th .fa {
-  padding: 2px;
-  background-color: #dfe6ec;
-  border-radius: 2px;
-  margin-right: 2px;
-  font-size: 8px;
-}
-
 table.pvtTable.newPvtTable tbody tr th,
 table.pvtTable.newPvtTable tbody tr td {
   border: 1px solid #dfe6ec;

package/src/published_items_renderer.js

@@ -25,18 +25,18 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
     const body = iframeWindow.document.getElementsByTagName("body")[0];
 
     if (table && options.responsive) {
-      publishedItemsRenderer.zoomTable(iframeWindow, table, body);
+      publishedItemsRenderer.zoomTable(iframeWindow, table);
     }
 
     publishedItemsRenderer.resizePublishedImage(publish_item_image, iframeWindow, body);
   }
 
-  publishedItemsRenderer.zoomTable = function (iframeWindow, table, body) {
-    const bodyZoom = parseFloat(body.style.zoom) || 1;
-    const SCROLL_OFFSET = 16;
+  publishedItemsRenderer.zoomTable = function (iframeWindow, table) {
+    table.style.zoom = 1;
 
-    const tableWidth = table.getBoundingClientRect().width * bodyZoom;
-    const tableHeight = table.getBoundingClientRect().height * bodyZoom;
+    const SCROLL_OFFSET = 16;
+    const tableWidth = table.getBoundingClientRect().width;
+    const tableHeight = table.getBoundingClientRect().height;
     const root = iframeWindow.document.documentElement;
 
     let requiredZoom = (root.clientWidth - SCROLL_OFFSET) / tableWidth;

package/src/smart_queries_helper.js

@@ -0,0 +1,96 @@
+const lodash = require('lodash');
+
+const DR_SCENARIO = {
+    SQ_Actuals: 'SQ_Actuals',
+    Forecast: 'Forecast',
+};
+
+function createSingleDataSeriesForForecast(chart_series, chartOptions, pivotData) {
+  const { actuals, forecast, smart_query } = chartOptions.chart;
+  const input = pivotData.input;
+
+  const hasSQActuals = input.some(item => item.Scenario && item.Scenario.indexOf(DR_SCENARIO.SQ_Actuals) !== -1);
+  chartOptions.isSmartQueriesEnabled = hasSQActuals;
+  if (!smart_query || !hasSQActuals) return null;
+
+  const midMonthOffset = 0.5
+  return chart_series.length === 1
+    ? buildChartSeriesFromPivotInputOnly(input, actuals, forecast, midMonthOffset)
+    : buildChartSeriesFromSeries(chart_series, actuals, forecast, midMonthOffset);
+}
+
+function buildChartSeriesFromPivotInputOnly(input, actuals, forecast, midMonthOffset) {
+  const filtered = input.filter(item =>
+    (item.Scenario === DR_SCENARIO.SQ_Actuals || item.Scenario === DR_SCENARIO.Forecast) &&
+    item.Amount !== 0
+  );
+
+  const data = filtered.map(item => ({
+    y: item.Amount,
+    name: item.Reporting_Month,
+    initialName: item.Reporting_Month,
+    type: item.Scenario,
+  })).sort((a, b) => new Date(a.name) - new Date(b.name));
+
+  const sqCount = input.filter(item => item.Scenario === DR_SCENARIO.SQ_Actuals).length;
+
+  return {
+    name: "Forecast Smart Query",
+    data,
+    zoneAxis: "x",
+    zones: [
+      { value: sqCount - midMonthOffset, dashStyle: actuals },
+      { dashStyle: forecast },
+    ],
+  };
+}
+
+function buildChartSeriesFromSeries(chart_series, actuals, forecast, midMonthOffset) {
+  const seriesA = lodash.find(chart_series, s => s.name && lodash.includes(s.name, DR_SCENARIO.SQ_Actuals));
+  const seriesB = lodash.find(chart_series, s => s.name && lodash.includes(s.name, DR_SCENARIO.Forecast));
+
+  if (!seriesA || !seriesB) return null;
+
+  const indexOfForecastFirstZero = lodash.findIndex(seriesB.data, function(value) {
+    return value.y === 0;
+  });
+  const indexOfActualsFirstZero = lodash.findIndex(seriesA.data, function(value) {
+    return value.y === 0;
+  });
+  const cutoffIndex = Math.max(indexOfForecastFirstZero, indexOfActualsFirstZero);
+
+
+  const minLength = Math.min(seriesA.data.length, seriesB.data.length);
+  const data = [];
+
+  for (let i = 0; i < minLength; i++) {
+    const pointA = seriesA.data[i];
+    const pointB = seriesB.data[i];
+
+    const yA = (pointA && pointA.y !== null && typeof pointA.y !== undefined) ? pointA.y : pointA;
+    const yB = (pointB && pointB.y !== null && typeof pointB.y !== undefined) ? pointB.y : pointB;
+
+    data.push({
+      x: i,
+      y: yA + yB,
+      name: pointA && pointA.name ? pointA.name : null,
+      initialName: (pointA && pointA.name) ? pointA.name : 'Point ' + (i + 1),
+      type: yA ? DR_SCENARIO.SQ_Actuals : DR_SCENARIO.Forecast,
+    });
+  }
+
+  return {
+    name: "Forecast Smart Query",
+    data,
+    zoneAxis: "x",
+    zones: [
+      { value: cutoffIndex - midMonthOffset, dashStyle: actuals },
+      { dashStyle: forecast },
+    ],
+  };
+}
+
+module.exports = {
+  createSingleDataSeriesForForecast,
+  DR_SCENARIO
+};

package/tests/dr-renderer-helpers.test.js

@@ -147,4 +147,52 @@ describe('dr-renderer-helpers', () => {
             expect(svg.xCorr).toBe(0);
         });
     });
+
+    describe('disableLegendInteractionIfRequired', () => {
+        const notPieTypes = ['column', 'line', 'area', 'areaspline', 'scatter', 'spline', 'bar', 'waterfall'];
+
+        it('should not update legend settings', () => {
+            const chartOptionsMock = {
+                chart: {
+                    type: 'column',
+                },
+            };
+            const additionOptionsMock = {
+                disable_legend_interaction: false,
+            };
+            drRendererHelpers.disableLegendInteractionIfRequired(chartOptionsMock, additionOptionsMock);
+            expect(chartOptionsMock.plotOptions).toBeFalsy();
+            expect(chartOptionsMock.legend).toBeFalsy();
+        });
+
+        it('should update legend styles and set click event (for pie chart)', () => {
+            const chartOptionsMock = {
+                chart: {
+                    type: 'pie',
+                },
+            };
+            const additionOptionsMock = {
+                disable_legend_interaction: true,
+            };
+            drRendererHelpers.disableLegendInteractionIfRequired(chartOptionsMock, additionOptionsMock);
+            expect(chartOptionsMock.plotOptions.pie.point.events.legendItemClick).toEqual(jasmine.any(Function));
+            expect(chartOptionsMock.legend.itemStyle.cursor).toEqual('default');
+        });
+
+        notPieTypes.forEach((chartType) => {
+            it(`should update legend styles and set click event (for ${ chartType } chart)`, () => {
+                const chartOptionsMock = {
+                    chart: {
+                        type: chartType,
+                    },
+                };
+                const additionOptionsMock = {
+                    disable_legend_interaction: true,
+                };
+                drRendererHelpers.disableLegendInteractionIfRequired(chartOptionsMock, additionOptionsMock);
+                expect(chartOptionsMock.plotOptions.series.events.legendItemClick).toEqual(jasmine.any(Function));
+                expect(chartOptionsMock.legend.itemStyle.cursor).toEqual('default');
+            });
+        });
+    });
 });

package/tests/dr_chart_tooltip.test.js

@@ -32,6 +32,7 @@ describe("DrChartTooltip", () => {
             },
             container: {
                 getBoundingClientRect: jest.fn().mockReturnValue(chartBBoxMock),
+                clientWidth: 800,
             },
             chartWidth: 800,
             chartHeight: 600,
@@ -349,6 +350,23 @@ describe("DrChartTooltip", () => {
             expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowTopBorderStyles}left:15px`);
         });
 
+        it("sets a top arrow position (tooltip is smaller than anchor) on a zoomed chart", () => {
+            chartMock.container.clientWidth = 1600;
+            tooltipBBoxMock.width = 40;
+            tooltipBBoxMock.height = 20;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 205,
+                y: 180,
+                direction: "top",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowTopBorderStyles}left:22px`);
+        });
+
         it("sets a top arrow position (clamp left)", () => {
             tooltipBBoxMock.width = 100;
             tooltipBBoxMock.height = 20;
@@ -477,6 +495,23 @@ describe("DrChartTooltip", () => {
             expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowLeftBorderStyles}top:15px`);
         });
 
+        it("sets a left arrow position (tooltip is smaller than anchor) on a zoomed chart", () => {
+            chartMock.container.clientWidth = 1600;
+            tooltipBBoxMock.width = 20;
+            tooltipBBoxMock.height = 40;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 180,
+                y: 205,
+                direction: "left",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowLeftBorderStyles}top:22px`);
+        });
+
         it("sets a left arrow position (clamp top)", () => {
             tooltipBBoxMock.width = 20;
             tooltipBBoxMock.height = 100;
@@ -593,6 +628,11 @@ describe("DrChartTooltip", () => {
             expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 175, y: 170 });
         });
 
+        it("gets coordinates (top - without correction)", () => {
+            chartMock.container.clientWidth = 1600;
+            expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 400, y: 370 });
+        });
+
         it("gets coordinates (top - bound to the chart - left)", () => {
             anchorBBoxMock.x = 0;
             expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 8 /* offset */, y: 170 });
@@ -627,6 +667,11 @@ describe("DrChartTooltip", () => {
             expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 90, y: 215 });
         });
 
+        it("gets coordinates (left - without correction)", () => {
+            chartMock.container.clientWidth = 1600;
+            expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 290, y: 440 });
+        });
+
         it("gets coordinates (left - bound to the chart - bottom)", () => {
             anchorBBoxMock.y = 1000;
             expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 90, y: 572 });
@@ -645,6 +690,11 @@ describe("DrChartTooltip", () => {
             expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 260, y: 215 });
         });
 
+        it("gets coordinates (right - without correction)", () => {
+            chartMock.container.clientWidth = 1600;
+            expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 510, y: 440 });
+        });
+
         it("gets coordinates (right - bound to the chart - bottom)", () => {
             anchorBBoxMock.y = 1000;
             expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({