@datarailsshared/dr_renderer 1.1.41 → 1.2.2

package/src/published_items_renderer.js

@@ -0,0 +1,365 @@
+let getPublishedItemsRenderer = function (publishedItemsRenderer) {
+
+  this.document = {};
+  this.scope = {};
+  this.options = {};
+  this.isScenarioMode = null;
+  this.settings = {};
+
+  publishedItemsRenderer.formulaCellClicked = function (event, scope, options, window) {
+    event.stopPropagation();
+    event.preventDefault();
+    try {
+      const td = event.currentTarget;
+      const a = td.querySelector('a');
+      const locationId = a.getAttribute('location_id');
+      scope.callFromPublishItem(event, options.widgetId, options.dashboardId, locationId, window.published_item_sheetname);
+    } catch (e) {
+    }
+    return false;
+  }
+
+  publishedItemsRenderer.resizeTable = function (options, iframeWindow) {
+    const publish_item_image = iframeWindow.document.getElementById('publish_item_image');
+    const table = iframeWindow.document.getElementsByTagName("table")[0];
+    const body = iframeWindow.document.getElementsByTagName("body")[0];
+
+    if (table && options.responsive) {
+      publishedItemsRenderer.zoomTable(iframeWindow, table, body);
+    }
+
+    publishedItemsRenderer.resizePublishedImage(publish_item_image, iframeWindow, body);
+  }
+
+  publishedItemsRenderer.zoomTable = function (iframeWindow, table, body) {
+    const bodyZoom = parseFloat(body.style.zoom) || 1;
+    const SCROLL_OFFSET = 16;
+
+    const tableWidth = table.getBoundingClientRect().width * bodyZoom;
+    const tableHeight = table.getBoundingClientRect().height * bodyZoom;
+    const root = iframeWindow.document.documentElement;
+
+    let requiredZoom = (root.clientWidth - SCROLL_OFFSET) / tableWidth;
+    if (this.settings.resizeTableUsingBothDimensions) {
+      requiredZoom = Math.min(requiredZoom, (root.clientHeight - SCROLL_OFFSET) / tableHeight);
+    }
+
+    table.style.zoom = requiredZoom;
+  };
+
+  publishedItemsRenderer.resizePublishedImage = function (publish_item_image, iframeWindow, body) {
+    if (!publish_item_image) return;
+
+    let body_zoom = body.style.zoom;
+    body_zoom = parseFloat(body_zoom) || 1;
+
+    if (publish_item_image.style.height === '100%') {
+      publish_item_image.style.height = 'auto';
+      publish_item_image.style.width = '100%';
+      publish_item_image.style.marginTop = "";
+      setTimeout(function () {
+        publishedItemsRenderer.resizePublishedImage(publish_item_image, iframeWindow, body);
+      }, 10);
+    }
+
+    const imgPositionInfo = publish_item_image.getBoundingClientRect();
+    const height = (imgPositionInfo.height + imgPositionInfo.y * 2) * body_zoom;
+    if (height > iframeWindow.innerHeight) {
+      publish_item_image.style.height = '100%';
+      publish_item_image.style.width = 'auto';
+    } else if (height < iframeWindow.innerHeight) {
+      const temp = (iframeWindow.innerHeight - height) / 2;
+      publish_item_image.style.marginTop = (temp / body_zoom + imgPositionInfo.y) + "px";
+    }
+  }
+
+  publishedItemsRenderer.resetTableZoom = function (document) {
+    const table = document.getElementsByTagName("table")[0];
+    if (table) {
+      table.style.zoom = 1;
+    }
+  }
+
+  publishedItemsRenderer.changedAutoResize = function (options, iframeWindow, document) {
+    Object.assign(iframeWindow.__options__, options);
+    const table = document.getElementsByTagName("table")[0];
+    if (table) {
+      table.style.margin = options.responsive ? '0 auto' : '';
+    }
+
+    if (!options.responsive) {
+      publishedItemsRenderer.resetTableZoom(document);
+    } else {
+      publishedItemsRenderer.resizeTable(options, iframeWindow);
+    }
+  }
+
+  publishedItemsRenderer.changedInputValue = function (firstTime, scope, options) {
+    const input_values = [];
+    if (options.inputValuesData) {
+      for (let key in options.inputValuesData) {
+        input_values.push(options.inputValuesData[key]);
+      }
+    }
+
+    try {
+      scope.changedInputValues(input_values, options.widgetId, options.dashboardId, firstTime);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  publishedItemsRenderer.changedInputElement = function (event, scope, options) {
+    const inputElement = event.currentTarget;
+    const name = inputElement.getAttribute('name');
+    const metaData = options.inputValuesData ? options.inputValuesData[name] : null;
+    let newValue = inputElement.value;
+    if (metaData) {
+      if (metaData.type === 'editInput') {
+        newValue = parseFloat(newValue);
+      } else if (metaData.type === 'editInputPercent') {
+        newValue = parseFloat(newValue) + '%';
+      }
+
+      if (metaData.value !== newValue) {
+        metaData.value = newValue;
+        publishedItemsRenderer.changedInputValue(false, scope, options);
+      }
+    }
+  }
+
+  publishedItemsRenderer.createInputElement = function (tdElement, inputMetaData, formatValue, scope, options, document) {
+    const _this = this;
+    tdElement.innerHTML = '';
+    if (inputMetaData) {
+      switch (inputMetaData.type) {
+        case "editInput":
+        case "editInputPercent":
+          let inEl = document.createElement("INPUT");
+          let labelEl = document.createElement("LABEL");
+
+          if (inputMetaData.value === 'DR_INPUT') {
+            labelEl.innerText = null;
+          } else {
+            labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inputMetaData.value).value : inputMetaData.value;
+          }
+          if (_this.isScenarioMode) {
+            labelEl.setAttribute("style", "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);margin: 6px;text-align: inherit;display: block; cursor: pointer;");
+          } else {
+            labelEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 6px;text-align: inherit;display: block; cursor: pointer;");
+          }
+          const onLabelClick = function (event, isScenarioMode) {
+            event.stopPropagation();
+            if (isScenarioMode) {
+              inEl.setAttribute("style", "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: block;");
+            } else {
+              inEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: block;");
+            }
+            labelEl.style.display = 'none';
+            setTimeout(function () {
+              inEl.focus();
+            }, 1)
+          }
+          labelEl.addEventListener("click", (event) => onLabelClick(event, _this.isScenarioMode));
+
+          inEl.setAttribute("type", "number");
+          inEl.setAttribute("name", inputMetaData.name);
+          if (_this.isScenarioMode) {
+            inEl.setAttribute("style", "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: none;");
+          } else {
+            inEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: none;");
+          }
+          inEl.value = inputMetaData.type === 'editInputPercent' ? parseFloat(inputMetaData.value.replace('%', '')) : inputMetaData.value;
+          inEl.addEventListener("focusout", function (event) {
+            event.preventDefault();
+            publishedItemsRenderer.changedInputElement(event, scope, options);
+            inEl.style.display = 'none';
+            labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inEl.value).value : inputMetaData.value;
+            labelEl.style.display = 'block';
+          });
+          inEl.addEventListener("keyup", function (event) {
+            // Number 13 is the "Enter" key on the keyboard
+            if (event.keyCode === 13) {
+              // Cancel the default action, if needed
+              event.preventDefault();
+              publishedItemsRenderer.changedInputElement(event, scope, options);
+              inEl.style.display = 'none';
+              labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inEl.value).value : inputMetaData.value;
+              labelEl.style.display = 'block';
+            }
+          });
+          tdElement.appendChild(inEl);
+          tdElement.appendChild(labelEl);
+          break;
+        case "dateInput":
+          let dateEl = document.createElement("DIV");
+          const format = inputMetaData.format ? inputMetaData.format.toUpperCase() : 'MM/DD/YYYY';
+          const formattedDate = formatValue('d', format, inputMetaData.value).value
+          if (_this.isScenarioMode) {
+            dateEl.innerHTML = '<label class="value dateInput" style="background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor:pointer;">' + formattedDate + '</label>';
+          } else {
+            dateEl.innerHTML = '<label class="value dateInput" style="cursor: pointer;">' + formattedDate + '</label>';
+          }
+          tdElement.appendChild(dateEl);
+          tdElement.classList.toggle("input-filter-list-td");
+          tdElement.setAttribute("name", inputMetaData.name);
+          tdElement.addEventListener("click", function (event) {
+            try {
+              scope.openDatePickerFromPublishedItem(event, options.widgetId, options.dashboardId, inputMetaData, format);
+            } catch (e) {
+              console.error(e);
+            }
+          })
+          break;
+        case "excelList":
+          let selectEl = document.createElement("SELECT");
+          selectEl.setAttribute("name", inputMetaData.name);
+          selectEl.setAttribute("class", "dr_input");
+          for (let i = 0; i < inputMetaData.values.length; i++) {
+            let option = document.createElement("option");
+            option.setAttribute("value", inputMetaData.values[i]);
+            option.innerText = inputMetaData.values[i];
+            if (inputMetaData.values[i] === inputMetaData.value) {
+              option.setAttribute("selected", "");
+            }
+            selectEl.appendChild(option);
+          }
+          selectEl.addEventListener("change", function (event) {
+            publishedItemsRenderer.changedInputElement(event, scope, options)
+          });
+          tdElement.appendChild(selectEl);
+          break;
+        case "filterList":
+          let listHolderEl = document.createElement("DIV");
+          listHolderEl.setAttribute("class", "filter_list_holder");
+          if (_this.isScenarioMode) {
+            listHolderEl.innerHTML = '<label class="value filterList" style="background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor: pointer;">' + inputMetaData.value + '</label><i class="filter_icon"></i>';
+          } else {
+            listHolderEl.innerHTML = '<label class="value filterList" style="cursor: pointer;">' + inputMetaData.value + '</label><i class="filter_icon"></i>';
+          }
+          tdElement.appendChild(listHolderEl);
+          tdElement.classList.toggle("input-filter-list-td");
+          tdElement.setAttribute("name", inputMetaData.name);
+          tdElement.addEventListener("click", function (event) {
+            let inputElement = event.currentTarget;
+            let name = inputElement.getAttribute('name');
+            let metaData = options.inputValuesData ? options.inputValuesData[name] : null;
+            if (metaData) {
+              try {
+                scope.openFilterListFromPublishedItem(event, options.widgetId, options.dashboardId, metaData);
+              } catch (e) {
+                console.error(e);
+              }
+            }
+          });
+          break;
+      }
+    }
+  }
+
+  publishedItemsRenderer.changedInputFilterValue = function (metaData, newValue, document) {
+    let tdLabelElement = document.querySelector('td[name="' + metaData.name + '"]>div>label[class="value"]');
+    if (tdLabelElement) {
+      tdLabelElement.innerText = newValue;
+    }
+    console.log(tdLabelElement, newValue);
+  }
+
+  publishedItemsRenderer.changeStylesForLabel = function (elementsArray, styles, isScenarioMode) {
+    if (elementsArray.length) {
+      elementsArray.forEach(element => {
+        element.setAttribute("style", isScenarioMode ? styles : "cursor:pointer;");
+      })
+    }
+  }
+
+  publishedItemsRenderer.prepareInputCells = function (document, scope, options, isScenarioMode) {
+    const inputCells = document.querySelectorAll('td>a[href="DR_INPUT"], td>div>a[href="DR_INPUT"]');
+    const inputs = document.querySelectorAll('td>input');
+    const dateInputs = document.querySelectorAll('.dateInput');
+    const filterList = document.querySelectorAll('.filterList');
+    const styleForLabel = "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor:pointer;";
+    if (!options.inputValuesData) {
+      options.inputValuesData = {};
+    }
+    publishedItemsRenderer.changeStylesForLabel(filterList, styleForLabel, isScenarioMode);
+    publishedItemsRenderer.changeStylesForLabel(dateInputs, styleForLabel, isScenarioMode);
+    if (inputs.length) {
+      inputs.forEach(element => {
+        const labelElement = element.nextSibling;
+        labelElement.setAttribute("style", isScenarioMode ?
+          "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);margin: 6px;text-align: inherit;display: block; cursor: pointer;" :
+          "background: transparent;width: calc(100% - 15px);border: 0;margin: 6px;text-align: inherit;display: block; cursor: pointer;");
+      });
+    }
+    if (inputCells.length) {
+      for (let i = 0; i < inputCells.length; i++) {
+        let tdElement = inputCells[i].parentElement;
+        let inputId = inputCells[i].getAttribute('name') || 'no_attribute';
+        publishedItemsRenderer.createInputElement(tdElement, options.inputValuesData[inputId], scope.highchartsRenderer.formatValue, scope, options, document, isScenarioMode);
+      }
+    }
+  }
+
+  publishedItemsRenderer.addEventListeners = function (document, iframeWindow, scope, options) {
+    let resizeTimeout;
+    const handleDimensionChange = () => {
+      if (resizeTimeout) {
+        cancelAnimationFrame(resizeTimeout);
+      }
+
+      resizeTimeout = requestAnimationFrame(() => {
+        publishedItemsRenderer.resizeTable(iframeWindow.__options__, iframeWindow);
+      });
+    }
+
+    document.addEventListener("DOMContentLoaded", handleDimensionChange);
+    iframeWindow.addEventListener("resize", handleDimensionChange);
+
+    // Add click event to cell with formula
+    let all_a_hrefs = document.querySelectorAll('td a[location_id]');
+    for (let i = 0; i < all_a_hrefs.length; i++) {
+      let td_elem = all_a_hrefs[i].closest('td');
+      td_elem.classList.add("apply_hover");
+      td_elem.addEventListener('click', function (event) {
+        publishedItemsRenderer.formulaCellClicked(event, scope, options, iframeWindow)
+      });
+    }
+  }
+
+  publishedItemsRenderer.scenarioModeChange = function (flag, document) {
+    this.isScenarioMode = flag;
+    publishedItemsRenderer.prepareInputCells(document, this.scope, this.options, this.isScenarioMode);
+  }
+
+  publishedItemsRenderer.getInputValues = function () {
+    return this.options.inputValuesData;
+  }
+
+  publishedItemsRenderer.initPublishedItem = function (document, iframeWindow, scope, options) {
+    this.document = document;
+    this.scope = scope;
+    this.options = options;
+    iframeWindow.__options__ = options;
+    publishedItemsRenderer.prepareInputCells(document, scope, options, this.isScenarioMode);
+    publishedItemsRenderer.applyInitDocumentStyles(document, iframeWindow);
+    publishedItemsRenderer.addEventListeners(document, iframeWindow, scope, options);
+
+    setTimeout(function () {
+      publishedItemsRenderer.changedInputValue(true, scope, options);
+    }, 500);
+  }
+
+  publishedItemsRenderer.applyInitDocumentStyles = function (document, iframeWindow) {
+    const table = document.getElementsByTagName('table')[0];
+    if (table) {
+      table.style.overflow = 'hidden';
+      table.style.margin = iframeWindow.__options__.responsive ? '0 auto' : '';
+    }
+
+    const body = document.body;
+    body.style.margin = '0';
+  }
+}
+
+module.exports = getPublishedItemsRenderer;

package/src/seriesPointStyles-helper.js

@@ -0,0 +1,43 @@
+function getSeriesPointStyles(isSelected) {
+    return {
+        opacity: isSelected ? 1 : 0.1,
+        marker: {
+            enabled: true,
+            radius: isSelected ? 8 : 3,
+        },
+        dataLabels: {
+            style: {
+                fontWeight: isSelected ? "bold" : "normal",
+            },
+        },
+    };
+}
+
+function setSeriesPointStylesOnClick(e) {
+    const selectedPoint = e.point;
+    e.point.series.chart.series.forEach((series) =>
+        series.points.forEach((point) => {
+            point.update(getSeriesPointStyles(point === selectedPoint), false);
+        })
+    );
+    e.point.series.chart.redraw();
+}
+
+function setInitialPointStyles(opts, series) {
+    series.forEach((series) => {
+        if (Array.isArray(series.data)) {
+            series.data.forEach((item) => {
+                const isSelected =
+                    item && opts.selectedPoint &&
+                    item.initialName === opts.selectedPoint.initialName &&
+                    item.y.toFixed(2) === opts.selectedPoint.y.toFixed(2);
+                item = Object.assign(item, getSeriesPointStyles(isSelected));
+            });
+        }
+    });
+}
+
+module.exports = {
+    setSeriesPointStylesOnClick,
+    setInitialPointStyles,
+};

package/start_run.sh

@@ -1,3 +1,3 @@
-#!/bin/bash
-source ~/.nvm/nvm.sh
-nvm use 14.15.1
+#!/bin/bash
+source ~/.nvm/nvm.sh
+nvm use 14.15.1

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

@@ -0,0 +1,150 @@
+import drRendererHelpers from '../src/dr-renderer-helpers';
+
+describe('dr-renderer-helpers', () => {
+
+    describe('backendSortingKeysAreNotEmpty', () => {
+        it('should return true if keys are not empty', () => {
+            const keys = {
+                row_keys: [1, 2, 3],
+                col_keys: [1, 2, 3]
+            };
+            expect(drRendererHelpers.backendSortingKeysAreNotEmpty(keys)).toBe(true);
+        });
+
+        it('should return true if one of the keys is not empty', () => {
+            const keys = {
+                row_keys: [1, 2, 3],
+                col_keys: []
+            };
+            expect(drRendererHelpers.backendSortingKeysAreNotEmpty(keys)).toBe(true);
+        });
+
+        it('should return false if keys are empty', () => {
+            const keys = {
+                row_keys: [],
+                col_keys: [],
+            };
+            expect(drRendererHelpers.backendSortingKeysAreNotEmpty(keys)).toBe(false);
+        });
+
+        it('should return false if keys are null', () => {
+            const keys = null;
+            expect(drRendererHelpers.backendSortingKeysAreNotEmpty(keys)).toBe(false);
+        });
+    });
+
+    describe('capitalize', () => {
+        it('should capitalize a string', () => {
+            const string = 'test';
+            expect(drRendererHelpers.capitalize(string)).toBe('Test');
+        });
+
+        it('should not capitalize a string when it was not trimmed', () => {
+            const string = ' test';
+            expect(drRendererHelpers.capitalize(string)).toBe(' test');
+        });
+
+        it('should return an empty string if string is null', () => {
+            const string = null;
+            expect(drRendererHelpers.capitalize(string)).toBe('');
+        });
+    });
+
+    describe('clamp', () => {
+        it('should clamp value between teh boundaries', () => {
+            expect(drRendererHelpers.clamp(10, 5, 20)).toBe(10);
+            expect(drRendererHelpers.clamp(10, 25, 20)).toBe(20);
+            expect(drRendererHelpers.clamp(10, 15, 20)).toBe(15);
+        });
+    });
+
+    describe('isNumber', () => {
+        it('should check whether the value is a finity number', () => {
+            expect(drRendererHelpers.isNumber('number')).toBeFalsy();
+            expect(drRendererHelpers.isNumber(Infinity)).toBeFalsy();
+            expect(drRendererHelpers.isNumber(12)).toBeTruthy();
+        });
+    });
+
+    describe('mergeDeep', () => {
+        it('should handle the wrong data', () => {
+            expect(drRendererHelpers.mergeDeep([1, 2, 3], { a: 1, b: 2})).toEqual([1, 2, 3]);
+            expect(drRendererHelpers.mergeDeep('string', { a: 1, b: 2})).toEqual('string');
+            expect(drRendererHelpers.mergeDeep({ a: 1 }, 'string')).toEqual({ a: 1 });
+        });
+
+        it('should not merge arrays and replace instead', () => {
+            expect(drRendererHelpers.mergeDeep({
+                a: [1, 2, 3]
+            }, {
+                a: [2, 3, 4]
+            })).toEqual({
+                a: [2, 3, 4]
+            });
+        });
+
+        it('should merge nested objects', () => {
+            expect(drRendererHelpers.mergeDeep({
+                a: 1,
+                b: {
+                    c: 3,
+                    d: 4
+                }
+            },
+            {
+                b: {
+                    d: 5,
+                    e: 6
+                },
+                c: 7
+            })).toEqual({
+                a: 1,
+                b: {
+                    c: 3,
+                    d: 5,
+                    e: 6,
+                },
+                c: 7,
+            });
+        });
+
+        it('should merge more than 2 objects', () => {
+            expect(drRendererHelpers.mergeDeep({
+                a: 1,
+                b: 2
+            },
+            {
+                b: 3,
+                c: 4
+            },
+            {
+                a: 5,
+                e: 6
+            })).toEqual({
+                a: 5,
+                b: 3,
+                c: 4,
+                e: 6
+            });
+        });
+    });
+
+    describe('removeSVGTextCorrection', () => {
+        it('should remove yCorr by default', () => {
+            const svg = {
+                yCorr: -12
+            };
+            drRendererHelpers.removeSVGTextCorrection(svg);
+            expect(svg.yCorr).toBe(0);
+        });
+
+        it('should remove yCorr by default', () => {
+            const svg = {
+                xCorr: -12
+            };
+            drRendererHelpers.removeSVGTextCorrection(svg, 'xCorr');
+            svg.xCorr = -20;
+            expect(svg.xCorr).toBe(0);
+        });
+    });
+});