Release v4.8.0

.github/workflows/ci.yml

@@ -28,7 +28,6 @@ jobs:
       - run: yarn build
       - run: yarn lint
       - run: yarn test:coverage
-      - run: yarn docs
       - run: yarn cy:compile
       - run: yarn cy:junit
       - uses: actions/upload-artifact@v2
@@ -39,6 +38,7 @@ jobs:
             cypress/screenshots
             cypress/videos
 
+      - run: yarn docs
       - run: |
           mkdir -p public/main
           cp -rt public/main/ docs demo/* build/*

.github/workflows/create_release.yml

@@ -31,7 +31,7 @@ jobs:
           echo -n "::set-output name=next_tag::"
           npm version --no-git-tag-version ${{ github.event.inputs.versionName }} --preid ${{ github.event.inputs.preid }}
       - name: Create pull request into main
-        uses: peter-evans/create-pull-request@v4
+        uses: peter-evans/create-pull-request@v5
         with:
           branch: release/${{ steps.version.outputs.next_tag }}
           commit-message: 'chore: release ${{ steps.version.outputs.next_tag }}'

.github/workflows/release_main.yml

@@ -73,7 +73,6 @@ jobs:
       - run: yarn build
       - run: yarn lint
       - run: yarn test:coverage
-      - run: yarn docs
       - run: yarn cy:compile
       - run: yarn cy:junit
       - uses: actions/upload-artifact@v2
@@ -84,6 +83,7 @@ jobs:
             cypress/screenshots
             cypress/videos
 
+      - run: yarn docs
       - run: |
           mkdir -p public/main
           cp -rt public/main/ docs demo/* build/*

.stylelintrc

@@ -4,7 +4,6 @@
     "stylelint-config-standard-scss"
   ],
   "rules": {
-    "string-quotes": "single",
     "keyframes-name-pattern": null,
     "no-descending-specificity": null,
     "value-list-comma-newline-after": null,

.yarnrc.yml

@@ -3,4 +3,4 @@ packageExtensions:
     dependencies:
       typescript: ~4.1.5
 
-yarnPath: .yarn/releases/yarn-3.2.2.cjs
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2021, The Caleydo Team
+Copyright (c) 2022, The Caleydo Team
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification,

README.md

@@ -679,12 +679,6 @@ LineUp.js depends on
 
 ## Development Environment
 
-Try the Gitpod online IDE and start coding instantly in your browser.
-
-[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/lineupjs/lineupjs)
-
-Otherwise follow the steps to setup a local development environment.
-
 **Installation**
 
 The setup requires [Node.js v16 or higher](https://nodejs.org/en/download/).

cypress/integration/builder.spec.ts

@@ -4,7 +4,7 @@ import { generateData } from './utils/data';
 describe('builder', () => {
   let lineup: Taggle;
   let lineUpJS: LineUpJSType;
-  before(
+  beforeEach(
     withLineUp((l, document) => {
       lineUpJS = l;
       const arr = generateData();

cypress/integration/builder2.spec.ts

@@ -4,7 +4,7 @@ import { generateData, DEFAULT_CATEGORIES } from './utils/data';
 describe('builder2', () => {
   let lineup: LineUp;
   let lineUpJS: LineUpJSType;
-  before(
+  beforeEach(
     withLineUp((l, document) => {
       lineUpJS = l;
       const arr = generateData();

cypress/integration/custom_instance_id.spec.ts

@@ -3,7 +3,7 @@ import { withLineUp, waitReady, LineUpJSType, Taggle } from './utils/lineup';
 describe('builder', () => {
   let lineup: Taggle;
   let lineUpJS: LineUpJSType;
-  before(
+  beforeEach(
     withLineUp((l, document) => {
       lineUpJS = l;
       const b = lineUpJS.builder([]);

cypress/integration/pr289_color_mapping_reset.spec.ts

@@ -5,7 +5,7 @@ import { openMoreDialog, closeDialog, resetDialog } from './utils/ui';
 describe('pr275_sort_group', () => {
   let lineup: LineUp;
   let lineUpJS: LineUpJSType;
-  before(
+  beforeEach(
     withLineUp((l, document) => {
       lineUpJS = l;
       const arr = generateData({
@@ -41,7 +41,7 @@ describe('pr275_sort_group', () => {
   it('choose divergent color mapping', () => {
     openColorMappingDialog().within(() => {
       // select another color
-      cy.contains('Diverging Color').click();
+      cy.get('[data-toggle]').contains('Diverging Color').click();
       cy.get('input[value="interpolateBrBG"]').check();
     });
     closeDialog();

cypress/integration/restore_aggregation_state.spec.ts

@@ -29,7 +29,7 @@ describe('restore_aggregation_state', () => {
     });
   }
 
-  before(
+  beforeEach(
     withLineUp((l, document) => {
       lineUpJS = l;
       const arr = generateData({

cypress/tsconfig.json

@@ -7,6 +7,7 @@
     "declaration": false,
     "declarationMap": false,
     "composite": false,
+    "verbatimModuleSyntax": false,
     "types": [
       "cypress",
       "d3-color",

demo/bool.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head lang="en">
+    <meta charset="UTF-8" />
+    <title>LineUp Builder Test</title>
+
+    <link href="./LineUpJS.css" rel="stylesheet" />
+    <link href="./demo.css" rel="stylesheet" />
+  </head>
+  <body>
+    <script src="./LineUpJS.js"></script>
+
+    <script>
+      window.onload = function () {
+        const arr = [];
+        const vs = [
+          'y',
+          'yes',
+          'true',
+          true,
+          '1',
+          '1.0',
+          1,
+          1.0,
+          'n',
+          'no',
+          'false',
+          false,
+          '0',
+          '0.0',
+          0,
+          0.0,
+          'on',
+          'off',
+        ];
+        for (let i = 0; i < vs.length; ++i) {
+          arr.push({
+            s: 'Row ' + i,
+            bool: vs[i],
+            custombool: i % 2 === 0 ? 'yeah' : 'nope',
+          });
+        }
+        for (let i = 0; i < vs.length; ++i) {
+          arr.push({
+            s: 'Row ' + i,
+            bool: typeof vs[i] === 'string' ? vs[i].toUpperCase() : vs[i],
+            custombool: i % 2 === 0 ? 'yeah'.toUpperCase() : 'nope'.toUpperCase(),
+          });
+        }
+        const b = LineUpJS.builder(arr);
+
+        b.column(LineUpJS.buildStringColumn('s').label('label'));
+        b.column(LineUpJS.buildBooleanColumn('bool').label('bool'));
+        b.column(
+          LineUpJS.buildBooleanColumn('custombool')
+            .label('custombool')
+            .summary('custom true values')
+            .trueValues(['yeah'])
+        );
+
+        b.build(document.body);
+      };
+    </script>
+  </body>
+</html>

demo/htmlLabel.html

@@ -24,7 +24,10 @@
         const builder = LineUpJS.builder(arr);
 
         // manually define columns
-        builder.deriveColumns().column(LineUpJS.buildStringColumn('d').htmlLabel('<strong>STRONG</strong>'));
+        builder
+          .deriveColumns()
+          .column(LineUpJS.buildStringColumn('d').htmlLabel('<strong>STRONG</strong>'))
+          .column(LineUpJS.buildStringColumn('d').htmlLabel('DD', (col, ctx) => `<i>${col.label}</i>`));
 
         builder.defaultRanking();
 

demo/number_min_rep.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+    <link href="./LineUpJS.css" rel="stylesheet" />
+
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      .lu {
+        clear: both;
+        position: absolute;
+        top: 1px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <script src="./LineUpJS.js"></script>
+    <script>
+      let testData = [
+        { n: 0, m: 1 },
+        { n: 20, m: 10 },
+        { n: 100, m: 100 },
+      ];
+      for (let i = 0; i < 5; i++) {
+        testData = [...testData, ...testData];
+      }
+      const builder = LineUpJS.builder(testData);
+
+      builder.column(LineUpJS.buildNumberColumn('n').label('N').custom('showMinimumRepresentation', true));
+      builder.column(LineUpJS.buildNumberColumn('m').label('M').custom('showMinimumRepresentation', true));
+      builder.column(LineUpJS.buildNumberColumn('n').label('N 2'));
+      builder.column(LineUpJS.buildNumberColumn('m').label('M 2'));
+      builder.buildTaggle(document.body);
+    </script>
+  </body>
+</html>

jest.config.cjs

@@ -0,0 +1,29 @@
+/* eslint-env node */
+const path = require('path');
+
+const mapper = {};
+for (const d of [
+  'd3-dispatch',
+  'd3-scale-chromatic',
+  'd3-interpolate',
+  'd3-color',
+  'd3-scale',
+  'd3-array',
+  'd3-format',
+  'd3-time',
+  'd3-time-format',
+]) {
+  mapper[`^${d}$`] = require.resolve(d).replace(`src${path.sep}index.js`, `dist${path.sep}/${d}.js`);
+}
+
+module.exports = {
+  testEnvironment: 'jsdom',
+  preset: 'ts-jest',
+  testRegex: '/tests/.*\\.spec\\.(ts|tsx|js)$',
+  moduleNameMapper: mapper,
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.test.json',
+    },
+  },
+};