diff --git a/.prettierignore b/.prettierignore index 004c23fb4..b7974b235 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,3 +3,4 @@ **/.svn **/.hg **/node_modules +assets/jsconfig.json \ No newline at end of file diff --git a/assets/js/flux-group-keys.js b/assets/js/flux-group-keys.js index c8c7f5e1f..18432cca1 100644 --- a/assets/js/flux-group-keys.js +++ b/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: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: '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:02:00Z", _measurement: "example", loc: "rm1", sensorID: "A123", _field: "hum", _value: 75.1 } + { + _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: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: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: '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:02:00Z", _measurement: "example", loc: "rm2", sensorID: "B456", _field: "hum", _value: 72.1 } - ] -] + { + _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: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 () { - toggleCheckbox($(this)) - groupKey = getChecked(); + $('.column-list label').click(function () { + toggleCheckbox($(this)); + 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 groupKeyLabel = document.createElement("p"); - groupKeyLabel.className = "table-group-key" - groupKeyLabel.innerHTML = groupKeyString - + var groupKeyString = + 'Group key instance = [' + + groupKey + .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 = []; @@ -66,57 +153,57 @@ 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"); - tableGroup.innerHTML += groupKeyLabel.outerHTML + table.outerHTML + var tableGroup = document.createElement('div'); + 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"); - existingTables = tablesElement[0] + let tablesElement = $('#flux-group-keys-demo #grouped-tables'); + 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 => '"' + i + '"').join(", ") - $("pre#group-by-example")[0].innerHTML = "data\n |> group(columns: [" + columnCollection + "])"; + var columnCollection = getChecked() + .map((i) => '"' + i + '"') + .join(', '); + $('pre#group-by-example')[0].innerHTML = + "data\n |> group(columns: [" + + columnCollection + + '])'; } diff --git a/assets/js/keybindings.js b/assets/js/keybindings.js index ce0449e96..50ee3a683 100644 --- a/assets/js/keybindings.js +++ b/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 @@ -20,14 +21,19 @@ function updateKeyBindings({ $component, platform }) { const osx = $component.data('osx'); const linux = $component.data('linux'); const win = $component.data('win'); - + let keybind; if (platform === 'other') { if (win !== linux) { - keybind = `${osx} for macOS, ${linux} for Linux, and ${win} for Windows`; + keybind = + `${osx} for macOS, ` + + `${linux} for Linux, ` + + `and ${win} for Windows`; } else { - keybind = `${linux} for Linux and Windows and ${osx} for macOS`; + keybind = + `${linux} for Linux and Windows and ` + + `${osx} for macOS`; } } else { keybind = `${$component.data(platform)}`; @@ -46,7 +52,7 @@ export default function KeyBinding({ component }) { // Initialize keybindings const platform = getPlatform(); const $component = $(component); - + addOSClass(platform, { $component }); updateKeyBindings({ $component, platform }); -} \ No newline at end of file +} diff --git a/content/example.md b/content/example.md index 5bcd782aa..13786d29e 100644 --- a/content/example.md +++ b/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](#) +Click to view output +{{% /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 >}} \ No newline at end of file