fix(heatmap): HeatmapCell properties other than value should be o…

…ptional (#870) * fix(heatmap): `HeatmapCell` properties other than `value` should be optional * docs: modernise heatmap demo page * refactor: remove if * refactor: remove invalid `type: Function` * Update packages/elements/src/heatmap/index.ts Co-authored-by: Napat Bualoy <[email protected]> * refactor: remove unused css selectors --------- Co-authored-by: Napat Bualoy <[email protected]>
Refinitiv · Jul 28, 2023 · dd4ccbe · dd4ccbe
1 parent 02b77f4
commit dd4ccbe
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 119 deletions.
diff --git a/packages/elements/src/heatmap/__demo__/color.html b/packages/elements/src/heatmap/__demo__/color.html
@@ -74,40 +74,38 @@ <h3>EF Heatmap - Colors</h3>
     </demo-block>
 
     <script>
-      var hosts = document.getElementsByTagName('demo-block');
+      const hosts = document.getElementsByTagName('demo-block');
       customElements.whenDefined('demo-block').then(() => {
         for (let index = 0; index < hosts.length; index++) {
-          var demoBlockElement = hosts[index];
-          var style = document.createElement('style');
+          const demoBlockElement = hosts[index];
+          const style = document.createElement('style');
           style.innerHTML = '#demo { min-height: 0; }';
           demoBlockElement.shadowRoot.appendChild(style);
         }
       });
 
-      var el;
-
-      var generateSequentialData = function (start = -1, count = 21, step = 0.1) {
-        var rows = [];
-        var columns = [];
+      const generateSequentialData = function (start = -1, count = 21, step = 0.1) {
+        const rows = [];
+        const columns = [];
         for (let i = 0; i < count; i++) {
           columns.push({ value: start + step * i });
         }
         rows.push(columns);
         return rows;
       };
 
-      var generateSparkline = function () {
-        var result = [];
-        for (var i = 0; i < 10; i++) {
+      const generateSparkline = function () {
+        const result = [];
+        for (let i = 0; i < 10; i++) {
           result.push(Math.random());
         }
         return result;
       };
-      var initEl = function (id, rows, columns) {
-        el = document.getElementById(id);
+      const initEl = function (id, rows, columns) {
+        const el = document.getElementById(id);
         el.tooltipCallback = function (cell) {
-          var tooltip = document.createElement('div');
-          var template = `
+          const tooltip = document.createElement('div');
+          const template = `
                 <div style="font-weight: 600">Actual value:</div>
                 <div style="color:${cell.color}">${cell.value}</div>
                 <ef-sparkline data="[${generateSparkline().join()}]" style="width: 100%;margin-top:5px;"></ef-sparkline>

diff --git a/packages/elements/src/heatmap/__demo__/custom-cell.html b/packages/elements/src/heatmap/__demo__/custom-cell.html
@@ -49,14 +49,13 @@ <h3>EF Heatmap - Custom cell</h3>
     </demo-block>
 
     <script>
-      var el;
-      var generateData = function (r, c, withHeader) {
-        var rows = Array(r);
+      const generateData = function (r, c, withHeader) {
+        const rows = Array(r);
         for (let i = 0; i < rows.length; i++) {
-          var columns = Array(c);
+          const columns = Array(c);
           for (let ii = 0; ii < columns.length; ii++) {
-            var shift = (i * ii) / (c * r);
-            var value = -1 + shift + (Math.random() / 2 + 0.5 * shift) * (2 - shift) * 1;
+            const shift = (i * ii) / (c * r);
+            const value = -1 + shift + (Math.random() / 2 + 0.5 * shift) * (2 - shift) * 1;
             columns[ii] = {
               header: withHeader ? Math.random().toString(36).substring(2, 5).toUpperCase() : null,
               value
@@ -67,13 +66,13 @@ <h3>EF Heatmap - Custom cell</h3>
         return rows;
       };
 
-      var generateDataWithDiagonalLine = function (r, c) {
-        var rows = Array(r);
+      const generateDataWithDiagonalLine = function (r, c) {
+        const rows = Array(r);
         for (let i = 0; i < rows.length; i++) {
-          var columns = Array(c);
+          const columns = Array(c);
           for (let ii = 0; ii < columns.length; ii++) {
-            var shift = (Math.random(1) * 1.5) / (c * r);
-            var value = -0.75 + shift + (Math.random() / 2 + 0.75 * shift) * (2 - shift) * 1.5;
+            const shift = (Math.random(1) * 1.5) / (c * r);
+            const value = -0.75 + shift + (Math.random() / 2 + 0.75 * shift) * (2 - shift) * 1.5;
 
             if (i === ii) {
               columns[ii] = null;
@@ -86,18 +85,18 @@ <h3>EF Heatmap - Custom cell</h3>
         return rows;
       };
 
-      var generateSparkline = function () {
-        var result = [];
-        for (var i = 0; i < 10; i++) {
+      const generateSparkline = function () {
+        const result = [];
+        for (let i = 0; i < 10; i++) {
           result.push(Math.random());
         }
         return result;
       };
-      var initEl = function (id, rows, columns) {
-        el = document.getElementById(id);
+      const initEl = function (id, rows, columns) {
+        const el = document.getElementById(id);
         el.tooltipCallback = function (cell) {
-          var tooltip = document.createElement('div');
-          var template = `
+          const tooltip = document.createElement('div');
+          const template = `
                 <div style="font-weight: 600">Actual value:</div>
                 <div style="color:${cell.color}">${cell.value}</div>
                 <ef-sparkline data="[${generateSparkline().join()}]" style="width: 100%;margin-top:5px;"></ef-sparkline>

diff --git a/packages/elements/src/heatmap/__demo__/event.html b/packages/elements/src/heatmap/__demo__/event.html
@@ -23,22 +23,9 @@
           max-width: none !important;
           width: 100% !important;
         }
-
-        #spacing {
-          --spacing: 12px;
-        }
-
         ef-heatmap {
           height: 400px;
         }
-
-        #normal {
-          height: inherit;
-        }
-
-        #large {
-          height: 1900px;
-        }
       </style>
     </shady-css-scoped>
 
@@ -73,13 +60,13 @@ <h3>Sapphire Heatmap</h3>
     <script>
       const isIE = /Trident/g.test(navigator.userAgent);
 
-      var generateData = function (r, c, minPoint = -1, maxPoint = 1) {
-        var rows = Array(r);
+      const generateData = function (r, c, minPoint = -1, maxPoint = 1) {
+        const rows = Array(r);
         for (let i = 0; i < rows.length; i++) {
-          var columns = Array(c);
+          const columns = Array(c);
           for (let ii = 0; ii < columns.length; ii++) {
-            var shift = (i * ii) / (c * r);
-            var value = -1 + shift + (Math.random() / 2 + 0.5 * shift) * (2 - shift) * maxPoint;
+            const shift = (i * ii) / (c * r);
+            const value = -1 + shift + (Math.random() / 2 + 0.5 * shift) * (2 - shift) * maxPoint;
 
             columns[ii] = {
               value: minPoint >= 0 ? Math.abs(value) : value
@@ -91,22 +78,23 @@ <h3>Sapphire Heatmap</h3>
         return rows;
       };
 
-      var generateSparkline = function () {
-        var result = [];
-        for (var i = 0; i < 10; i++) {
+      const generateSparkline = function () {
+        const result = [];
+        for (let i = 0; i < 10; i++) {
           result.push(Math.random());
         }
         return result;
       };
 
-      var dlg = document.getElementById('dlg');
-      var menu = document.getElementById('menu');
+      const dlg = document.getElementById('dlg');
+      const menu = document.getElementById('menu');
+
       let dlgTemplate;
-      var initEl = function (id, rows, columns) {
-        var el = document.getElementById(id);
+      const initEl = function (id, rows, columns) {
+        const el = document.getElementById(id);
         el.tooltipCallback = function (cell) {
-          var tooltip = document.createElement('div');
-          var template = `
+          const tooltip = document.createElement('div');
+          const template = `
             <div style="font-weight: 600">Actual value:</div>
             <div style="color:${cell.color}">${cell.value}</div>
             <ef-sparkline data="[${generateSparkline().join()}]" style="width: 100%;margin-top:5px;"></ef-sparkline>

diff --git a/packages/elements/src/heatmap/__demo__/index.html b/packages/elements/src/heatmap/__demo__/index.html
@@ -65,15 +65,13 @@ <h3>EF Heatmap</h3>
     </demo-block>
 
     <script>
-      var el;
-
-      var generateData = function (r, c, minPoint = -1, maxPoint = 1) {
-        var rows = Array(r);
+      const generateData = function (r, c, minPoint = -1, maxPoint = 1) {
+        const rows = Array(r);
         for (let i = 0; i < rows.length; i++) {
-          var columns = Array(c);
+          const columns = Array(c);
           for (let ii = 0; ii < columns.length; ii++) {
-            var shift = (i * ii) / (c * r);
-            var value = -1 + shift + (Math.random() / 2 + 0.5 * shift) * (2 - shift) * maxPoint;
+            const shift = (i * ii) / (c * r);
+            const value = -1 + shift + (Math.random() / 2 + 0.5 * shift) * (2 - shift) * maxPoint;
 
             columns[ii] = {
               value: minPoint >= 0 ? Math.abs(value) : value
@@ -84,18 +82,18 @@ <h3>EF Heatmap</h3>
         return rows;
       };
 
-      var generateSparkline = function () {
-        var result = [];
-        for (var i = 0; i < 10; i++) {
+      const generateSparkline = function () {
+        const result = [];
+        for (let i = 0; i < 10; i++) {
           result.push(Math.random());
         }
         return result;
       };
-      var initEl = function (id, rows, columns) {
+      const initEl = function (id, rows, columns) {
         el = document.getElementById(id);
         el.tooltipCallback = function (cell) {
-          var tooltip = document.createElement('div');
-          var template = `
+          const tooltip = document.createElement('div');
+          const template = `
               <div style="font-weight: 600">Actual value:</div>
               <div style="color:${cell.color}">${cell.value}</div>
               <ef-sparkline data="[${generateSparkline().join()}]" style="width: 100%;margin-top:5px;"></ef-sparkline>

diff --git a/packages/elements/src/heatmap/helpers/types.ts b/packages/elements/src/heatmap/helpers/types.ts
@@ -1,5 +1,5 @@
 type HeatmapConfig = {
-  data: Array<HeatmapCell[]>;
+  data: HeatmapCell[][];
   yAxis?: HeatmapYAxis;
   xAxis?: HeatmapXAxis;
 };
@@ -16,18 +16,18 @@ type HeatmapYAxis = {
 };
 
 type HeatmapCell = {
-  rowIndex: number;
-  colIndex: number;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
+  rowIndex?: number;
+  colIndex?: number;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
   value: number | null;
   header?: string;
   label?: string;
-  foregroundColor: string;
-  defaultBackground: string;
-  backgroundColor: string;
+  foregroundColor?: string;
+  defaultBackground?: string;
+  backgroundColor?: string;
   animationFrame?: number;
   customLabel?: string;
   customBackgroundColor?: string;