fix(js): Minor JS fixes: declare variable in keybindings.js, improve selector specificity in flux-group-keys, add group-key shortcode example to example.md

.prettierignore

@@ -3,3 +3,4 @@
 **/.svn
 **/.hg
 **/node_modules
+assets/jsconfig.json

assets/js/flux-group-keys.js

@@ -3,34 +3,118 @@ import $ from 'jquery';
 // Sample data
 let data = [
   [
-    { _time: "2021-01-01T00:00:00Z", _measurement: "example", loc: "rm1", sensorID: "A123", _field: "temp", _value: 110.3 },
+    {
-    { _time: "2021-01-01T00:01:00Z", _measurement: "example", loc: "rm1", sensorID: "A123", _field: "temp", _value: 112.5 },
+      _time: '2021-01-01T00:00:00Z',
-    { _time: "2021-01-01T00:02:00Z", _measurement: "example", loc: "rm1", sensorID: "A123", _field: "temp", _value: 111.9 }
+      _measurement: 'example',
+      loc: 'rm1',
+      sensorID: 'A123',
+      _field: 'temp',
+      _value: 110.3,
+    },
+    {
+      _time: '2021-01-01T00:01:00Z',
+      _measurement: 'example',
+      loc: 'rm1',
+      sensorID: 'A123',
+      _field: 'temp',
+      _value: 112.5,
+    },
+    {
+      _time: '2021-01-01T00:02:00Z',
+      _measurement: 'example',
+      loc: 'rm1',
+      sensorID: 'A123',
+      _field: 'temp',
+      _value: 111.9,
+    },
   ],
   [
-    { _time: "2021-01-01T00:00:00Z", _measurement: "example", loc: "rm1", sensorID: "A123", _field: "hum", _value: 73.4 },
+    {
-    { _time: "2021-01-01T00:01:00Z", _measurement: "example", loc: "rm1", sensorID: "A123", _field: "hum", _value: 73.7 },
+      _time: '2021-01-01T00:00:00Z',
-    { _time: "2021-01-01T00:02:00Z", _measurement: "example", loc: "rm1", sensorID: "A123", _field: "hum", _value: 75.1 }
+      _measurement: 'example',
+      loc: 'rm1',
+      sensorID: 'A123',
+      _field: 'hum',
+      _value: 73.4,
+    },
+    {
+      _time: '2021-01-01T00:01:00Z',
+      _measurement: 'example',
+      loc: 'rm1',
+      sensorID: 'A123',
+      _field: 'hum',
+      _value: 73.7,
+    },
+    {
+      _time: '2021-01-01T00:02:00Z',
+      _measurement: 'example',
+      loc: 'rm1',
+      sensorID: 'A123',
+      _field: 'hum',
+      _value: 75.1,
+    },
   ],
   [
-    { _time: "2021-01-01T00:00:00Z", _measurement: "example", loc: "rm2", sensorID: "B456", _field: "temp", _value: 108.2 },
+    {
-    { _time: "2021-01-01T00:01:00Z", _measurement: "example", loc: "rm2", sensorID: "B456", _field: "temp", _value: 108.5 },
+      _time: '2021-01-01T00:00:00Z',
-    { _time: "2021-01-01T00:02:00Z", _measurement: "example", loc: "rm2", sensorID: "B456", _field: "temp", _value: 109.6 }
+      _measurement: 'example',
+      loc: 'rm2',
+      sensorID: 'B456',
+      _field: 'temp',
+      _value: 108.2,
+    },
+    {
+      _time: '2021-01-01T00:01:00Z',
+      _measurement: 'example',
+      loc: 'rm2',
+      sensorID: 'B456',
+      _field: 'temp',
+      _value: 108.5,
+    },
+    {
+      _time: '2021-01-01T00:02:00Z',
+      _measurement: 'example',
+      loc: 'rm2',
+      sensorID: 'B456',
+      _field: 'temp',
+      _value: 109.6,
+    },
   ],
   [
-    { _time: "2021-01-01T00:00:00Z", _measurement: "example", loc: "rm2", sensorID: "B456", _field: "hum", _value: 71.8 },
+    {
-    { _time: "2021-01-01T00:01:00Z", _measurement: "example", loc: "rm2", sensorID: "B456", _field: "hum", _value: 72.3 },
+      _time: '2021-01-01T00:00:00Z',
-    { _time: "2021-01-01T00:02:00Z", _measurement: "example", loc: "rm2", sensorID: "B456", _field: "hum", _value: 72.1 }
+      _measurement: 'example',
-  ]
+      loc: 'rm2',
-]
+      sensorID: 'B456',
+      _field: 'hum',
+      _value: 71.8,
+    },
+    {
+      _time: '2021-01-01T00:01:00Z',
+      _measurement: 'example',
+      loc: 'rm2',
+      sensorID: 'B456',
+      _field: 'hum',
+      _value: 72.3,
+    },
+    {
+      _time: '2021-01-01T00:02:00Z',
+      _measurement: 'example',
+      loc: 'rm2',
+      sensorID: 'B456',
+      _field: 'hum',
+      _value: 72.1,
+    },
+  ],
+];
 
 // Default group key
-let groupKey = ["_measurement", "loc", "sensorID", "_field"]
+let groupKey = ['_measurement', 'loc', 'sensorID', '_field'];
 
 export default function FluxGroupKeysDemo({ component }) {
-  $(".column-list label").click(function () {
+  $('.column-list label').click(function () {
-    toggleCheckbox($(this))
+    toggleCheckbox($(this));
-    groupKey = getChecked();
+    groupKey = getChecked(component);
     groupData();
     buildGroupExample();
   });
@@ -41,21 +125,24 @@ export default function FluxGroupKeysDemo({ component }) {
 
 // Build a table group (group key and table) using an array of objects
 function buildTable(inputData) {
-
   // Build the group key string
   function wrapString(column, value) {
-    var stringColumns = ["_measurement", "loc", "sensorID", "_field"]
+    var stringColumns = ['_measurement', 'loc', 'sensorID', '_field'];
     if (stringColumns.includes(column)) {
-      return '"' + value + '"'
+      return '"' + value + '"';
     } else {
-      return value
+      return value;
     }
   }
-  var groupKeyString = "Group key instance = [" + (groupKey.map(column => column + ": " + wrapString(column, (inputData[0])[column]))  ).join(", ") + "]";
+  var groupKeyString =
-  var groupKeyLabel = document.createElement("p");
+    'Group key instance = [' +
-  groupKeyLabel.className = "table-group-key"
+    groupKey
-  groupKeyLabel.innerHTML = groupKeyString
+      .map((column) => column + ': ' + wrapString(column, inputData[0][column]))
-
+      .join(', ') +
+    ']';
+  var groupKeyLabel = document.createElement('p');
+  groupKeyLabel.className = 'table-group-key';
+  groupKeyLabel.innerHTML = groupKeyString;
 
   // Extract column headers
   var columns = [];
@@ -68,55 +155,55 @@ function buildTable(inputData) {
   }
 
   // Create the table element
-  var table = document.createElement("table");
+  var table = document.createElement('table');
 
   // Create the table header
   for (let i = 0; i < columns.length; i++) {
     var header = table.createTHead();
-    var th = document.createElement("th");
+    var th = document.createElement('th');
     th.innerHTML = columns[i];
     if (groupKey.includes(columns[i])) {
-      th.className = "grouped-by";
+      th.className = 'grouped-by';
     }
     header.appendChild(th);
   }
 
   // Add inputData to the HTML table
   for (let i = 0; i < inputData.length; i++) {
-    tr = table.insertRow(-1);
+    let tr = table.insertRow(-1);
     for (let j = 0; j < columns.length; j++) {
       var td = tr.insertCell(-1);
       td.innerHTML = inputData[i][columns[j]];
       // Highlight the value if column is part of the group key
       if (groupKey.includes(columns[j])) {
-        td.className = "grouped-by";
+        td.className = 'grouped-by';
       }
     }
   }
 
   // Create a table group with group key and table
-  var tableGroup = document.createElement("div");
+  var tableGroup = document.createElement('div');
-  tableGroup.innerHTML += groupKeyLabel.outerHTML + table.outerHTML
+  tableGroup.innerHTML += groupKeyLabel.outerHTML + table.outerHTML;
 
-  return tableGroup
+  return tableGroup;
 }
 
 // Clear and rebuild all HTML tables
 function buildTables(data) {
-  let tablesElement = $("#flux-group-keys-demo #grouped-tables");
+  let tablesElement = $('#flux-group-keys-demo #grouped-tables');
-  existingTables = tablesElement[0]
+  let existingTables = tablesElement[0];
   while (existingTables.firstChild) {
     existingTables.removeChild(existingTables.firstChild);
   }
   for (let i = 0; i < data.length; i++) {
-    var table = buildTable(data[i])
+    var table = buildTable(data[i]);
     tablesElement.append(table);
   }
 }
 
 // Group data based on the group key and output new tables
 function groupData() {
-  let groupedData = data.flat()
+  let groupedData = data.flat();
 
   function groupBy(array, f) {
     var groups = {};
@@ -127,19 +214,19 @@ function groupData() {
     });
     return Object.keys(groups).map(function (group) {
       return groups[group];
-    })
+    });
   }
 
   groupedData = groupBy(groupedData, function (r) {
-    return groupKey.map(v => r[v]);
+    return groupKey.map((v) => r[v]);
   });
 
   buildTables(groupedData);
 }
 
-function getChecked() {
+function getChecked(component) {
   // Get selected column names
-  var checkboxes = $("input[type=checkbox]");
+  var checkboxes = $(component).find('input[type=checkbox]');
   var checked = [];
   for (var i = 0; i < checkboxes.length; i++) {
     var checkbox = checkboxes[i];
@@ -154,6 +241,11 @@ function toggleCheckbox(element) {
 
 // Build example group function
 function buildGroupExample() {
-  var columnCollection = getChecked().map(i => '<span class=\"s2\">"' + i + '"</span>').join(", ")
+  var columnCollection = getChecked()
-  $("pre#group-by-example")[0].innerHTML = "data\n  <span class='nx'>|></span> group(columns<span class='nx'>:</span> [" + columnCollection + "])";
+    .map((i) => '<span class=\"s2\">"' + i + '"</span>')
+    .join(', ');
+  $('pre#group-by-example')[0].innerHTML =
+    "data\n  <span class='nx'>|></span> group(columns<span class='nx'>:</span> [" +
+    columnCollection +
+    '])';
 }

assets/js/keybindings.js

@@ -1,4 +1,5 @@
 import { getPlatform } from './utils/user-agent-platform.js';
+import $ from 'jquery';
 
 /**
  * Adds OS-specific class to component
@@ -25,9 +26,14 @@ function updateKeyBindings({ $component, platform }) {
 
   if (platform === 'other') {
     if (win !== linux) {
-      keybind = `<code class="osx">${osx}</code> for macOS, <code>${linux}</code> for Linux, and <code>${win}</code> for Windows`;
+      keybind =
+        `<code class="osx">${osx}</code> for macOS, ` +
+        `<code>${linux}</code> for Linux, ` +
+        `and <code>${win}</code> for Windows`;
     } else {
-      keybind = `<code>${linux}</code> for Linux and Windows and <code class="osx">${osx}</code> for macOS`;
+      keybind =
+        `<code>${linux}</code> for Linux and Windows and ` +
+        `<code class="osx">${osx}</code> for macOS`;
     }
   } else {
     keybind = `<code>${$component.data(platform)}</code>`;

content/example.md

@@ -1267,3 +1267,88 @@ This is small tab 2.4 content.
 {{% /tab-content %}}
 
 {{< /tabs-wrapper >}}
+
+## Group key demo
+
+Used to demonstrate Flux group keys
+
+{{< tabs-wrapper >}}
+{{% tabs "small" %}}
+[Input](#)
+[Output](#)
+<span class="tab-view-output">Click to view output</span>
+{{% /tabs %}}
+{{% tab-content %}}
+
+The following data is output from the last `filter()` and piped forward into `group()`:
+
+> [!Note]
+> `_start` and `_stop` columns have been omitted.
+
+{{% flux/group-key "[_measurement=home, room=Kitchen, _field=hum]" true %}}
+
+| _time                | _measurement | room        | _field | _value |
+| :------------------- | :----------- | :---------- | :----- | :----- |
+| 2022-01-01T08:00:00Z | home         | Kitchen     | hum    | 35.9   |
+| 2022-01-01T09:00:00Z | home         | Kitchen     | hum    | 36.2   |
+| 2022-01-01T10:00:00Z | home         | Kitchen     | hum    | 36.1   |
+
+{{% flux/group-key "[_measurement=home, room=Living Room, _field=hum]" true %}}
+
+| _time                | _measurement | room        | _field | _value |
+| :------------------- | :----------- | :---------- | :----- | :----- |
+| 2022-01-01T08:00:00Z | home         | Living Room | hum    | 35.9   |
+| 2022-01-01T09:00:00Z | home         | Living Room | hum    | 35.9   |
+| 2022-01-01T10:00:00Z | home         | Living Room | hum    | 36     |
+
+{{% flux/group-key "[_measurement=home, room=Kitchen, _field=temp]" true %}}
+
+| _time                | _measurement | room        | _field | _value |
+| :------------------- | :----------- | :---------- | :----- | :----- |
+| 2022-01-01T08:00:00Z | home         | Kitchen     | temp   | 21     |
+| 2022-01-01T09:00:00Z | home         | Kitchen     | temp   | 23     |
+| 2022-01-01T10:00:00Z | home         | Kitchen     | temp   | 22.7   |
+
+{{% flux/group-key "[_measurement=home, room=Living Room, _field=temp]" true %}}
+
+| _time                | _measurement | room        | _field | _value |
+| :------------------- | :----------- | :---------- | :----- | :----- |
+| 2022-01-01T08:00:00Z | home         | Living Room | temp   | 21.1   |
+| 2022-01-01T09:00:00Z | home         | Living Room | temp   | 21.4   |
+| 2022-01-01T10:00:00Z | home         | Living Room | temp   | 21.8   |
+
+{{% /tab-content %}}
+{{% tab-content %}}
+
+When grouped by `_field`, all rows with the `temp` field will be in one table
+and all the rows with the `hum` field will be in another.
+`_measurement` and `room` columns no longer affect how rows are grouped.
+
+{{% note %}}
+`_start` and `_stop` columns have been omitted.
+{{% /note %}}
+
+{{% flux/group-key "[_field=hum]" true %}}
+
+| _time                | _measurement | room        | _field | _value |
+| :------------------- | :----------- | :---------- | :----- | :----- |
+| 2022-01-01T08:00:00Z | home         | Kitchen     | hum    | 35.9   |
+| 2022-01-01T09:00:00Z | home         | Kitchen     | hum    | 36.2   |
+| 2022-01-01T10:00:00Z | home         | Kitchen     | hum    | 36.1   |
+| 2022-01-01T08:00:00Z | home         | Living Room | hum    | 35.9   |
+| 2022-01-01T09:00:00Z | home         | Living Room | hum    | 35.9   |
+| 2022-01-01T10:00:00Z | home         | Living Room | hum    | 36     |
+
+{{% flux/group-key "[_field=temp]" true %}}
+
+| _time                | _measurement | room        | _field | _value |
+| :------------------- | :----------- | :---------- | :----- | :----- |
+| 2022-01-01T08:00:00Z | home         | Kitchen     | temp   | 21     |
+| 2022-01-01T09:00:00Z | home         | Kitchen     | temp   | 23     |
+| 2022-01-01T10:00:00Z | home         | Kitchen     | temp   | 22.7   |
+| 2022-01-01T08:00:00Z | home         | Living Room | temp   | 21.1   |
+| 2022-01-01T09:00:00Z | home         | Living Room | temp   | 21.4   |
+| 2022-01-01T10:00:00Z | home         | Living Room | temp   | 21.8   |
+
+{{% /tab-content %}}
+{{< /tabs-wrapper >}}