From 3863468ce426bec2bbc870a10332f99e6667b2c0 Mon Sep 17 00:00:00 2001 From: Itzayana Prado Date: Wed, 30 Oct 2024 06:41:46 +0000 Subject: [PATCH 1/5] feat(sort): add first attempt to sort basic table --- src/d3loader.js | 3 ++- src/report_table.js | 59 ++++++++++++++++++++++++++++++++++------- src/vis_table_plugin.js | 4 +++ 3 files changed, 55 insertions(+), 11 deletions(-) diff --git a/src/d3loader.js b/src/d3loader.js index e32711f..ed824ba 100644 --- a/src/d3loader.js +++ b/src/d3loader.js @@ -3,5 +3,6 @@ import {select, selectAll, event} from 'd3-selection'; import {transition} from 'd3-transition'; import {drag} from 'd3-drag'; +import {ascending, descending} from 'd3-array'; -export {select, selectAll, event, transition, drag}; +export {select, selectAll, event, transition, drag, ascending, descending}; diff --git a/src/report_table.js b/src/report_table.js index 35e5cf8..2fb98bf 100644 --- a/src/report_table.js +++ b/src/report_table.js @@ -14,6 +14,8 @@ const BBOX_X_ADJUST = 10; const BBOX_Y_ADJUST = 10; const use_minicharts = false; +let sortOrder = false; +let columnKey = ''; const removeStyles = async function () { const links = document.getElementsByTagName('link'); @@ -35,7 +37,8 @@ const buildReportTable = function ( config, dataTable, updateColumnOrder, - element + element, + updateSorting ) { var dropTarget = null; const bounds = element.getBoundingClientRect(); @@ -194,6 +197,7 @@ const buildReportTable = function ( return ''; } }); + var header_rows = table .append('thead') .selectAll('tr') @@ -228,17 +232,24 @@ const buildReportTable = function ( .style('font-size', config.headerFontSize + 'px') .attr('draggable', true) .call(drag) - .on('mouseover', function(cell) { + .on('mouseover', function (cell) { d3.select('#tooltip') - .style('left', d3.event.x + 'px') - .style('top', d3.event.y + 'px') - .html(cell.label); + .style('left', d3.event.x + 'px') + .style('top', d3.event.y + 'px') + .html(cell.label); d3.select('#tooltip').classed('hidden', false); - return dropTarget = cell + return (dropTarget = cell); }) - .on('mouseout', function(cell) { + .on('mouseout', function (cell) { d3.select('#tooltip').classed('hidden', true); - return dropTarget = null + return (dropTarget = null); + }) + .on('click', function (cell) { + const key = cell.column.id; + if (cell.type !== 'pivot0') { + updateSorting(sortOrder, key); + sortOrder = !sortOrder; + } }); var table_rows = table @@ -376,7 +387,7 @@ const buildReportTable = function ( // Looker applies padding based on the top of the viz when opening a drill field but // if part of the viz container is hidden underneath the iframe, the drill menu opens off screen // We make a simple copy of the d3.event and account for pageYOffser as MouseEvent attributes are read only. - if (d.links !== [] && d.links[0].url) { + if (Array.isArray(d.links) && d.links.length !== 0 && d.links[0].url) { let event = { metaKey: d3.event.metaKey, pageX: d3.event.pageX, @@ -631,6 +642,28 @@ looker.plugins.visualizations.add({ ); } + // Here goes the sorting then the vis is built again + // If order = true => ascending + // If order = false => descending + const updateSorting = (order, key) => { + columnKey = key; + this.trigger('updateConfig', [ + {sorting: order ? 'ascending' : 'descending'}, + ]); + }; + + if (columnKey !== '') { + if (config.sorting === 'ascending') { + data.sort((a, b) => { + return d3.ascending(a[columnKey].value, b[columnKey].value); + }); + } else if (config.sorting === 'descending') { + data.sort((a, b) => { + return d3.descending(a[columnKey].value, b[columnKey].value); + }); + } + } + // BUILD THE VIS // 1. Create object // 2. Register options @@ -639,7 +672,13 @@ looker.plugins.visualizations.add({ // console.log(config) var dataTable = new VisPluginTableModel(data, queryResponse, config); this.trigger('registerOptions', dataTable.getConfigOptions()); - buildReportTable(config, dataTable, updateColumnOrder, element); + buildReportTable( + config, + dataTable, + updateColumnOrder, + element, + updateSorting + ); // DEBUG OUTPUT AND DONE // console.log('dataTable', dataTable) diff --git a/src/vis_table_plugin.js b/src/vis_table_plugin.js index f671df3..507d18c 100644 --- a/src/vis_table_plugin.js +++ b/src/vis_table_plugin.js @@ -190,6 +190,10 @@ const tableModelCoreOptions = { default: false, order: 100, }, + sorting: { + type: 'string', + default: 'ascending', + }, }; /** * Represents an "enriched data object" with additional methods and properties for data vis From 3502e9f3f782716fba3db5c488a455041366e7e4 Mon Sep 17 00:00:00 2001 From: Itzayana Prado Date: Tue, 3 Dec 2024 21:36:20 +0000 Subject: [PATCH 2/5] feat(sort): adding sort using column and pivot key --- src/report_table.js | 25 ++++++++++++++++++++----- webpack.config.js | 3 ++- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src/report_table.js b/src/report_table.js index 2fb98bf..9f54240 100644 --- a/src/report_table.js +++ b/src/report_table.js @@ -16,6 +16,7 @@ const BBOX_Y_ADJUST = 10; const use_minicharts = false; let sortOrder = false; let columnKey = ''; +let pivotKey = ''; const removeStyles = async function () { const links = document.getElementsByTagName('link'); @@ -245,9 +246,12 @@ const buildReportTable = function ( return (dropTarget = null); }) .on('click', function (cell) { - const key = cell.column.id; + console.log('cell'); + console.log(cell); + const column_key = cell.column.modelField.name; + const pivot = cell.column.pivot_key; if (cell.type !== 'pivot0') { - updateSorting(sortOrder, key); + updateSorting(sortOrder, column_key, pivot); sortOrder = !sortOrder; } }); @@ -645,21 +649,32 @@ looker.plugins.visualizations.add({ // Here goes the sorting then the vis is built again // If order = true => ascending // If order = false => descending - const updateSorting = (order, key) => { + const updateSorting = (order, key, pivot) => { columnKey = key; + pivotKey = pivot; this.trigger('updateConfig', [ {sorting: order ? 'ascending' : 'descending'}, ]); }; if (columnKey !== '') { + console.log(`columnKey: ${columnKey}`); + console.log(`pivotKey: ${pivotKey}`); if (config.sorting === 'ascending') { data.sort((a, b) => { - return d3.ascending(a[columnKey].value, b[columnKey].value); + const value_1 = + pivotKey === '' ? a[columnKey].value : a[columnKey][pivotKey].value; + const value_2 = + pivotKey === '' ? b[columnKey].value : b[columnKey][pivotKey].value; + return d3.ascending(value_1, value_2); }); } else if (config.sorting === 'descending') { data.sort((a, b) => { - return d3.descending(a[columnKey].value, b[columnKey].value); + const value_1 = + pivotKey === '' ? a[columnKey].value : a[columnKey][pivotKey].value; + const value_2 = + pivotKey === '' ? b[columnKey].value : b[columnKey][pivotKey].value; + return d3.descending(value_1, value_2); }); } } diff --git a/webpack.config.js b/webpack.config.js index cab8874..77c1f9b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,7 @@ const path = require('path'); module.exports = { + mode: 'development', entry: './src/report_table.js', output: { filename: 'bundle.js', @@ -12,7 +13,7 @@ module.exports = { { test: /\.css$/i, use: [ - { loader: 'style-loader', options: { injectType: 'lazyStyleTag' } }, + {loader: 'style-loader', options: {injectType: 'lazyStyleTag'}}, 'css-loader', ], }, From 1fd40a65016d4434afcba27e19db05d7afdd36a5 Mon Sep 17 00:00:00 2001 From: Itzayana Prado Date: Tue, 3 Dec 2024 23:20:08 +0000 Subject: [PATCH 3/5] feat(sort): Add modifications to allow sort when using pivot or field --- src/report_table.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/report_table.js b/src/report_table.js index 9f54240..c0c8187 100644 --- a/src/report_table.js +++ b/src/report_table.js @@ -246,14 +246,10 @@ const buildReportTable = function ( return (dropTarget = null); }) .on('click', function (cell) { - console.log('cell'); - console.log(cell); - const column_key = cell.column.modelField.name; - const pivot = cell.column.pivot_key; - if (cell.type !== 'pivot0') { - updateSorting(sortOrder, column_key, pivot); - sortOrder = !sortOrder; - } + let column_key = cell.column.modelField.name; + let pivot_key = cell.column.pivot_key; + updateSorting(sortOrder, column_key, pivot_key); + sortOrder = !sortOrder; }); var table_rows = table From 8e6c531ecae7dc8cfd3d8752ae99032f36a5aaf6 Mon Sep 17 00:00:00 2001 From: Itzayana Prado Date: Fri, 6 Dec 2024 17:30:58 +0000 Subject: [PATCH 4/5] feat(sort): Add condition to sort table when is not a transposed table --- src/report_table.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/report_table.js b/src/report_table.js index c0c8187..5f10809 100644 --- a/src/report_table.js +++ b/src/report_table.js @@ -246,10 +246,12 @@ const buildReportTable = function ( return (dropTarget = null); }) .on('click', function (cell) { - let column_key = cell.column.modelField.name; - let pivot_key = cell.column.pivot_key; - updateSorting(sortOrder, column_key, pivot_key); - sortOrder = !sortOrder; + if (!dataTable.transposeTable) { + let column_key = cell.column.modelField.name; + let pivot_key = cell.column.pivot_key; + updateSorting(sortOrder, column_key, pivot_key); + sortOrder = !sortOrder; + } }); var table_rows = table @@ -658,6 +660,9 @@ looker.plugins.visualizations.add({ console.log(`pivotKey: ${pivotKey}`); if (config.sorting === 'ascending') { data.sort((a, b) => { + console.log(`ascending: a,b`); + console.log(a); + console.log(b); const value_1 = pivotKey === '' ? a[columnKey].value : a[columnKey][pivotKey].value; const value_2 = @@ -666,6 +671,9 @@ looker.plugins.visualizations.add({ }); } else if (config.sorting === 'descending') { data.sort((a, b) => { + console.log(`descending: a,b`); + console.log(a); + console.log(b); const value_1 = pivotKey === '' ? a[columnKey].value : a[columnKey][pivotKey].value; const value_2 = From dd3d4aa8d2a25bc95d8e3d169c5115416a683ff3 Mon Sep 17 00:00:00 2001 From: Itzayana Prado Date: Fri, 6 Dec 2024 18:17:41 +0000 Subject: [PATCH 5/5] fix: remove unnecessary logs --- src/report_table.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/report_table.js b/src/report_table.js index 5f10809..92463b9 100644 --- a/src/report_table.js +++ b/src/report_table.js @@ -656,13 +656,8 @@ looker.plugins.visualizations.add({ }; if (columnKey !== '') { - console.log(`columnKey: ${columnKey}`); - console.log(`pivotKey: ${pivotKey}`); if (config.sorting === 'ascending') { data.sort((a, b) => { - console.log(`ascending: a,b`); - console.log(a); - console.log(b); const value_1 = pivotKey === '' ? a[columnKey].value : a[columnKey][pivotKey].value; const value_2 = @@ -671,9 +666,6 @@ looker.plugins.visualizations.add({ }); } else if (config.sorting === 'descending') { data.sort((a, b) => { - console.log(`descending: a,b`); - console.log(a); - console.log(b); const value_1 = pivotKey === '' ? a[columnKey].value : a[columnKey][pivotKey].value; const value_2 =