How to switch column and row text using dataviewjs

Hi! I’m using the habit tracker from dataviewjs-habit-tracker/dataviewjs.js at main · adamhl8/dataviewjs-habit-tracker · GitHub.

However, my habits list is getting too long and I’d prefer it if the heading row text and the dates column were switched, i.e. column as (exercise, study, etc.) and header as (Saturday, Friday, etc). How would I go about doing this? Thanks!

Code:

```dataviewjs
const habits = [] // Array of objects for each page's tasks.
const defaultHeaders = ['Day']
const headers = new Set(defaultHeaders) // Set of task names to be used as table headers.
const rows = []

const noteDay = dv.current().file.day
if (!noteDay)
  throw {
    stack:
      '(If this note is your template, this error is expected.) Unable to get note\'s day. Note should be named in the "YYYY-MM-DD" format.',
  }

const pages = dv
  .pages('"Periodic/Daily"')
  .where((p) => p.file.day >= noteDay.minus({ days: 6 })) // Only include previous week in table.
  .where((p) => p.file.day <= noteDay) // Don't include future notes.
  .sort((p) => p.file.day, 'desc') // Sort table by most recent day.

for (const page of pages) {
  // Only include tasks under a header named "Habits".
  const pageHabits = page.file.tasks.filter((t) => t.header.subpath == 'Habits')

  const noteLink = page.file.link
  noteLink.display = page.file.day.weekdayLong // Set display name of the note link to the day of the week.
  const habitsObject = { noteLink }

  for (const habit of pageHabits) {
    let habitText = habit.text.split(' ✅')[0] // Remove completion text from Tasks plugin.
    // Remove tag text.
    for (const tag of habit.tags) {
      habitText = habitText.replace(tag, '')
    }
    habitText = habitText.trim()

    habitsObject[habitText] = habit.completed // Build habitsObject. Key is the task's text. Value is tasks's completion.
    headers.add(habitText) // Build headers set where each header is the task's text.
  }

  habits.push(habitsObject)
}

for (const habitsObject of habits) {
  const row = [habitsObject.noteLink] // Start building row data. Fill in first value (Day) with note link.
  for (const header of headers) {
    if (defaultHeaders.includes(header)) continue // Don't overwrite default headers.

    let habitStatus = '➖' // This emoji is seen if a corresponding task doesn't exist for a header (e.g. task didn't previously exist).
    if (habitsObject.hasOwnProperty(header))
      // If task exists, we know it must be complete or incomplete.
      habitStatus = habitsObject[header] ? '✅' : '❌'
    row.push(habitStatus)
  }
  rows.push(row)
}

dv.table(headers, rows)

Topic

Summary
  • How to switch column and row texts using dataviewjs?

Test

Summary
  • dataview: v0.5.55

Input

Summary

dictionary files

NOTE: They are defined in the DVJS10 or mDVJS01.

  • Location: “100_Project/01_dataviewjs/01_by_example/Q76_transpose/Q76_test_data”

folder: 03

  • filename : dic_19510301
````md
---
Date: 1951-03-01
---

### input
#### table

|Day|Exercise|Study|New Habit|Read|
|--|:--|:--|:--|:--|
|Saturday|1|2|3|4|
|Friday|10|20|30|40|
|Thursday|100|200|300|400|
|Wednesday|1000|2000|3000|4000|
|Tuesday|10000|20000|30000|40000|
|Monday|100000|20000|30000|40000|
|Sunday|1000000|2000000|3000000|4000000|

#### code
```javascript
let a_headers_input = ["Day", "Exercise", "Study", "New Habit", "Read"];


let aoa_rows_input = [
    ["Saturday", 1, 2, 3, 4],
    ["Friday", 10, 20, 30, 40],
    ["Thursday", 100, 200, 300, 400],
    ["Wednesday", 1000, 2000, 3000, 4000],
    ["Tuesday", 10000, 20000, 30000, 40000],
    ["Monday", 100000, 200000, 300000, 400000],
    ["Sunday", 1000000, 2000000, 3000000, 4000000],
];


dv.table(a_headers_input, aoa_rows_input);

```

### output
#### table

|Day|Saturday|Friday|Thursday|Wednesday|Tuesday|Monday|Sunday|
|--|:--|:--|:--|:--|:--|:--|:--|
|Exercise|1|10|100|1000|10000|100000|1000000|
|Study|2|20|200|2000|20000|200000|2000000|
|New Habit|3|30|300|3000|30000|300000|3000000|
|Read|4|40|400|4000|40000|400000|4000000|

#### code
```javascript
let a_headers_output = [
    "Day",
    "Saturday",
    "Friday",
    "Thursday",
    "Wednesday",
    "Tuesday",
    "Monday",
    "Sunday",
];


let aoa_rows_output = [
    ["Exercise", 1, 10, 100, 1000, 10000, 100000, 1000000],
    ["Study", 2, 20, 200, 2000, 20000, 200000, 2000000],
    ["New Habit", 3, 30, 300, 3000, 30000, 300000, 3000000],
    ["Read", 4, 40, 400, 4000, 40000, 400000, 4000000],
];


dv.table(a_headers_output, aoa_rows_output);

```

````

DVJS10_transpose_JavaScript_AoA_and_TABLE

Summary

Main DVJS

Code Name Data type Group By Purposes Remark
DVJS10
_transpose_JavaScript_AoA
_and_TABLE
variables:

1.a_headers_input:
a JavaScript array

2.aoa_rows_input:
a JavaScript array of arrays
no 1.To define fun_tableTransposed()
2.To define dic_arg_Of as the argument of the function fun_tableTransposed()
3.To transpose a JavaScript AoA
4.To display the result as a table

Code DVJS10_transpose_JavaScript_AoA_and_TABLE

Summary_code
title: DVJS10_transpose_JavaScript_AoA_and_TABLE => 1.To define `fun_tableTransposed()` 2.To define `dic_arg_Of` as the argument of the function `fun_tableTransposed()` 3.To transpose a JavaScript AoA 4.To display the result as a table 
collapse: close
icon: 
color: 
```dataviewjs
// M11. define a_headers_input: a JavaScript array
// The prefix "a" of the variable `a_headers_input` means an array.
// #####################################################################
let a_headers_input = ["Day", "Exercise", "Study", "New Habit", "Read"];


// M13. define aoa_rows_input: a JavaScript array of arrays
// The prefix "AoA" of the variable `aoa_rows_input` means an Array of Arrays.
// #####################################################################
let aoa_rows_input = [
    ["Saturday", 1, 2, 3, 4],
    ["Friday", 10, 20, 30, 40],
    ["Thursday", 100, 200, 300, 400],
    ["Wednesday", 1000, 2000, 3000, 4000],
    ["Tuesday", 10000, 20000, 30000, 40000],
    ["Monday", 100000, 200000, 300000, 400000],
    ["Sunday", 1000000, 2000000, 3000000, 4000000],
];


// M19. output the original data:
// #####################################################################
dv.span("### M19. output the original data");
dv.table(a_headers_input, aoa_rows_input);


// M20. define dic_arg_Of: A customizable variable
// #####################################################################
const dic_arg_Of = {
    
    // The name of the a_headers_input
    // 【No modification required】
    a_headers_input: a_headers_input,
    
    // The name of the aoa_rows_input
    // 【No modification required】
    aoa_rows_input: aoa_rows_input,

};


// M31. call fun_tableTransposed(): 
// Return a JavaScript Object
// #####################################################################
let h_result = fun_tableTransposed(dic_arg_Of);
if (!h_result.successful) {
    throw { stack: h_result.error };
}


// M33. define a_headers_output: 
// #####################################################################
let a_headers_output = h_result.a_headers_output;


// M35. define aoa_rows_output: 
// #####################################################################
let aoa_rows_output = h_result.aoa_rows_output;


// M51. output the transposed data:
// #####################################################################
dv.span("### M51. output the transposed data");
dv.table(a_headers_output, aoa_rows_output);


// ###################################################################
// ###################################################################
// #### function fun_tableTransposed(): from Q76_DVJS10
// ###################################################################
// ###################################################################


// M90. define fun_tableTransposed():
// Purposes: 
// 1.Return a JavaScript Object 
// {
//     pages: "",
//     a_headers_output: a_headers_output
//     aoa_rows_output: aoa_rows_output
//     successful: true,
//     error: "",
// };
// #####################################################################
// version : 2023-04-22 v1.00 Justdoitcc
function fun_tableTransposed({
    a_headers_input = [], 
    aoa_rows_input = [],  
} = {}) {
    
    
    // F00. define h_result :
    // #################################################################
    let h_result = {
        pages: "",
        successful: false,
        error: ""
    };


    // F01. check a_headers_input:
    // check if a_headers_input is an array
    // #####################################################################
    // if (!dv.isArray(a_headers_input)) {
    if (!Array.isArray(a_headers_input)) {
        h_result.error = "【Error】:The a_headers_input should be an array.";
        return h_result;
    }
    if (a_headers_input.length === 0) {
        h_result.error = "【Error】:The a_headers_input should not be an empty array.";
        return h_result;
    }


    // F03 check a_headers_input: 
    // check if a_headers_input is an array of strings
    // #####################################################################
    let b_unique_type_of_each_headers_name = a_headers_input.every(
        (e) => typeof(e) === "string"
    );
    if (!b_unique_type_of_each_headers_name) {
        h_result.error =
            "【Error】:The a_headers_input should be a non-empty array of strings." ;
        return h_result;
    }


    // F05. check aoa_rows_input:
    // check if aoa_rows_input is an array
    // #####################################################################
    if (!Array.isArray(aoa_rows_input)) {
        h_result.error = "【Error】:The aoa_rows_input should be an array.";
        throw { stack: h_result.error };
        return h_result;
    }
    if (aoa_rows_input.length === 0) {
        h_result.error = "【Error】:The aoa_rows_input should not be an empty array.";
        return h_result;
    }


    // F10. define fun_transpose_a_matrix: return an AoA
    // [Transposing a 2D-array in JavaScript: answered Oct 18, 2017 at 7:54 by Yangshun Tay](https://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript)
    // NG:03_null
    // NG:03_undefined
    // NOTE: Each element of the input data should not be null or undefined.
    // #####################################################################
    function fun_transpose_a_matrix(matrix = []) {
        return matrix[0].map((col, i) => matrix.map((row) => row[i]));
    }


    // F10.DEB10 debug output: test fun_transpose_a_matrix
    // #####################################################################
    // let p = fun_transpose_a_matrix([
    //     [1, 2, 3, 4],
    //     [5, 6, 7, 8],
    //     [9, 10, 11, 12],
    // ]);

    // dv.span(JSON.stringify(p, null, 2), "\n");
    // [
    //     [1, 5, 9],
    //     [2, 6, 10],
    //     [3, 7, 11],
    //     [4, 8, 12],
    // ]

    // #####################################################################
    // F20. unshift a_headers_input into the top of aoa_rows_input 
    // #####################################################################
    aoa_rows_input.unshift(a_headers_input);


    // #####################################################################
    // F30. transpose a 2D-array in JavaScript: 
    // #####################################################################
    let aoa_output = fun_transpose_a_matrix(aoa_rows_input);


    // #####################################################################
    // F40. shift aoa_output: 
    // #####################################################################
    let a_headers_output = aoa_output.shift();
    let aoa_rows_output = aoa_output;
    
    
    // F90. update h_result :
    // #####################################################################
    h_result.successful = true;
    h_result.a_headers_output = a_headers_output;
    h_result.aoa_rows_output = aoa_rows_output;
    // h_result.pages = pages;  


    // F91. return h_result:
    // #####################################################################
    return h_result;  

}


// M91. exports fun_tableTransposed():
// #####################################################################
// module.exports.fun_tableTransposed = fun_tableTransposed;


```

Screenshots(DVJS10):


mDVJS01_reuse_Q76_DVJS10a_JS_and_maintain_two_customizable_variables

Summary

Main DVJS + a function

Example Code Name Relations What to maintain in the m1 file Purposes Remark
A m1: mDVJS01
_reuse_Q76_DVJS10a_JS
_and_maintain
_two_customizable_variables

f1: Q76_DVJS10a_JS.js
Q76_DVJS10 = m1 + f1 variables:
1.a_headers_input
2.aoa_rows_input
1.To reuse the Q76_DVJS10a_JS (“f1”)

2.To maintain only two customizable variables as the argument, defined in the “m1”
1.The function f1 never requires any maintenance.

2.All that needs to be maintained are two customizable variables of the m1.

Code m1: mDVJS01

NOTE: All that needs to be maintained are two customizable variables of the m1.

Summary_code
title: mDVJS01_reuse_Q76_DVJS01a_JS_and_maintain_two_customizable_variables => 0.Q76_DVJS10 = mDVJS01.md(variables: a_headers_input, aoa_rows_input) + Q76_DVJS10a_JS.js 1.To require the Q76_DVJS10a_JS.js 2.To reuse the Q76_DVJS10a with two customizable variables as the argument
collapse: open
icon: 
color: 
```dataviewjs
// M01. define dataviewUtils: 
// #####################################################################
let dataviewUtils = require(app.vault.adapter.basePath + "/002_Meta/Q76_transpose/00_Functions/Q76_DVJS10a_JS.js");


// M11. define a_headers_input: a JavaScript array
// The prefix "a" of the variable `a_headers_input` means an array.
// #####################################################################
let a_headers_input = ["Day", "Exercise", "Study", "New Habit", "Read"];


// M13. define aoa_rows_input: a JavaScript array of arrays
// The prefix "AoA" of the variable `aoa_rows_input` means an Array of Arrays.
// #####################################################################
let aoa_rows_input = [
    ["Saturday", 1, 2, 3, 4],
    ["Friday", 10, 20, 30, 40],
    ["Thursday", 100, 200, 300, 400],
    ["Wednesday", 1000, 2000, 3000, 4000],
    ["Tuesday", 10000, 20000, 30000, 40000],
    ["Monday", 100000, 200000, 300000, 400000],
    ["Sunday", 1000000, 2000000, 3000000, 4000000],
];


// M19. output the original data:
// #####################################################################
dv.span("### M19. output the original data");
dv.table(a_headers_input, aoa_rows_input);


// M20. define dic_arg_Of: A customizable variable
// #####################################################################
const dic_arg_Of = {
    
    // The name of the a_headers_input
    // Modify it as needs.
    a_headers_input: a_headers_input,
    
    // The name of the aoa_rows_input
    // Modify it as needs.
    aoa_rows_input: aoa_rows_input,

};


// M31. call fun_tableTransposed(): 
// Return a JavaScript Object
// #####################################################################
// let h_result = fun_tableTransposed(dic_arg_Of);
let h_result = dataviewUtils.fun_tableTransposed(dic_arg_Of);
if (!h_result.successful) {
    throw { stack: h_result.error };
}


// M33. define a_headers_output: 
// #####################################################################
let a_headers_output = h_result.a_headers_output;


// M35. define aoa_rows_output: 
// #####################################################################
let aoa_rows_output = h_result.aoa_rows_output;


// M51. output the transposed data:
// #####################################################################
dv.span("### M51. output the transposed data");
dv.table(a_headers_output, aoa_rows_output);

```

Function f1: Q76_DVJS10a_JS.js

NOTE:

  1. The file name Q76_DVJS10a_JS, used by many scripts, never requires any maintenance.
  2. The function f1 never requires any maintenance.
  3. The content of the f1 :
    3.1 The content of the f1 contains neither ```dataviewjs nor ```.
    3.2 The content of the f1 should be edited by Notepad++ or any text editor.
    3.3 The file extrension of the f1 is “.js”.
    4.Location: “002_Meta/Q76_transpose_JS”
Summary_Function
```javascript
// ###################################################################
// ###################################################################
// #### function fun_tableTransposed(): from Q76_DVJS10
// ###################################################################
// ###################################################################


// M90. define fun_tableTransposed():
// Purposes: 
// 1.Return a JavaScript Object 
// {
//     pages: "",
//     a_headers_output: a_headers_output
//     aoa_rows_output: aoa_rows_output
//     successful: true,
//     error: "",
// };
// #####################################################################
// version : 2023-04-22 v1.00 Justdoitcc
function fun_tableTransposed({
    a_headers_input = [], 
    aoa_rows_input = [],  
} = {}) {
    
    
    // F00. define h_result :
    // #################################################################
    let h_result = {
        pages: "",
        successful: false,
        error: ""
    };


    // F01. check a_headers_input:
    // check if a_headers_input is an array
    // #####################################################################
    // if (!dv.isArray(a_headers_input)) {
    if (!Array.isArray(a_headers_input)) {
        h_result.error = "【Error】:The a_headers_input should be an array.";
        return h_result;
    }
    if (a_headers_input.length === 0) {
        h_result.error = "【Error】:The a_headers_input should not be an empty array.";
        return h_result;
    }


    // F03 check a_headers_input: 
    // check if a_headers_input is an array of strings
    // #####################################################################
    let b_unique_type_of_each_headers_name = a_headers_input.every(
        (e) => typeof(e) === "string"
    );
    if (!b_unique_type_of_each_headers_name) {
        h_result.error =
            "【Error】:The a_headers_input should be a non-empty array of strings." ;
        return h_result;
    }


    // F05. check aoa_rows_input:
    // check if aoa_rows_input is an array
    // #####################################################################
    if (!Array.isArray(aoa_rows_input)) {
        h_result.error = "【Error】:The aoa_rows_input should be an array.";
        throw { stack: h_result.error };
        return h_result;
    }
    if (aoa_rows_input.length === 0) {
        h_result.error = "【Error】:The aoa_rows_input should not be an empty array.";
        return h_result;
    }


    // F10. define fun_transpose_a_matrix: return an AoA
    // [Transposing a 2D-array in JavaScript: answered Oct 18, 2017 at 7:54 by Yangshun Tay](https://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript)
    // NG:03_null
    // NG:03_undefined
    // NOTE: Each element of the input data should not be null or undefined.
    // #####################################################################
    function fun_transpose_a_matrix(matrix = []) {
        return matrix[0].map((col, i) => matrix.map((row) => row[i]));
    }


    // F10.DEB10 debug output: test fun_transpose_a_matrix
    // #####################################################################
    // let p = fun_transpose_a_matrix([
    //     [1, 2, 3, 4],
    //     [5, 6, 7, 8],
    //     [9, 10, 11, 12],
    // ]);

    // dv.span(JSON.stringify(p, null, 2), "\n");
    // [
    //     [1, 5, 9],
    //     [2, 6, 10],
    //     [3, 7, 11],
    //     [4, 8, 12],
    // ]

    // #####################################################################
    // F20. unshift a_headers_input into the top of aoa_rows_input 
    // #####################################################################
    aoa_rows_input.unshift(a_headers_input);


    // #####################################################################
    // F30. transpose a 2D-array in JavaScript: 
    // #####################################################################
    let aoa_output = fun_transpose_a_matrix(aoa_rows_input);


    // #####################################################################
    // F40. shift aoa_output: 
    // #####################################################################
    let a_headers_output = aoa_output.shift();
    let aoa_rows_output = aoa_output;
    
    
    // F90. update h_result :
    // #####################################################################
    h_result.successful = true;
    h_result.a_headers_output = a_headers_output;
    h_result.aoa_rows_output = aoa_rows_output;
    // h_result.pages = pages;  


    // F91. return h_result:
    // #####################################################################
    return h_result;  

}


// M91. exports fun_tableTransposed():
// #####################################################################
module.exports.fun_tableTransposed = fun_tableTransposed;


```

Screenshots(mDVJS01)

Summary_Screenshots


Notes(mDVJS01)

Summary

Q1: How to append the mDVJS01 at the end of acven’s original code? (mDVJS01)

Summary_Q1
Original Example: Q1 (To be modified)
```dataviewjs
// M01. define dataviewUtils: 
// #####################################################################
let dataviewUtils = require(app.vault.adapter.basePath + "/002_Meta/Q76_transpose_JS/Q76_DVJS10a_JS.js");


// M11. define a_headers_input: a JavaScript array
// The prefix "a" of the variable `a_headers_input` means an array.
// #####################################################################
let a_headers_input = ["Day", "Exercise", "Study", "New Habit", "Read"];


// M13. define aoa_rows_input: a JavaScript array of arrays
// The prefix "AoA" of the variable `aoa_rows_input` means an Array of Arrays.
// #####################################################################
let aoa_rows_input = [
    ["Saturday", 1, 2, 3, 4],
    ["Friday", 10, 20, 30, 40],
    ["Thursday", 100, 200, 300, 400],
    ["Wednesday", 1000, 2000, 3000, 4000],
    ["Tuesday", 10000, 20000, 30000, 40000],
    ["Monday", 100000, 200000, 300000, 400000],
    ["Sunday", 1000000, 2000000, 3000000, 4000000],
];


// M19. output the original data:
// #####################################################################
dv.span("### M19. output the original data");
dv.table(a_headers_input, aoa_rows_input);


// M20. define dic_arg_Of: A customizable variable
// #####################################################################
const dic_arg_Of = {
    
    // The name of the a_headers_input
    // Modify it as needs.
    a_headers_input: a_headers_input,
    
    // The name of the aoa_rows_input
    // Modify it as needs.
    aoa_rows_input: aoa_rows_input,

};
```

A1_11:

Another Example: mDVJS01_A1_11

NOTE:

  1. Remove the M11, M13, and M19.
  2. Modify the M20.
  3. Modify the M51.
```dataviewjs
// M01. define dataviewUtils: 
// #####################################################################
let dataviewUtils = require(app.vault.adapter.basePath + "/002_Meta/Q76_transpose_JS/Q76_DVJS10a_JS.js");


// M20. define dic_arg_Of: A customizable variable
// #####################################################################
const dic_arg_Of = {
    
    // The name of the a_headers_input
    // Modify it as needs.
    a_headers_input: headers,
    
    // The name of the aoa_rows_input
    // Modify it as needs.
    aoa_rows_input: rows,

};


// M31. call fun_tableTransposed(): 
// Return a JavaScript Object
// #####################################################################
// let h_result = fun_tableTransposed(dic_arg_Of);
let h_result = dataviewUtils.fun_tableTransposed(dic_arg_Of);
if (!h_result.successful) {
    throw { stack: h_result.error };
}


// M33. define a_headers_output: 
// #####################################################################
let a_headers_output = h_result.a_headers_output;


// M35. define aoa_rows_output: 
// #####################################################################
let aoa_rows_output = h_result.aoa_rows_output;


// M51. output the transposed data:
// #####################################################################
// dv.span("### M51. output the transposed data");
dv.table(a_headers_output, aoa_rows_output);


```

Conclusion

Summary
  • Append the mDVJS01_A1_11 code at the end of acven’s original code after setting the Q76_DVJS10a_JS.js .

Reference

Summary

How to reuse user-defined functions?

Q020_DVJS31


This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.