@mathstack/viz 1.1.5 → 2.1.0

package/cypress/support/commands.ts

@@ -0,0 +1,104 @@
+/// <reference types="cypress" />
+import 'cypress-real-events';
+import type { RealClickOptions } from 'cypress-real-events/commands/realClick';
+import type { RealHoverOptions } from 'cypress-real-events/commands/realHover';
+import type { RealPressOptions } from 'cypress-real-events/commands/realPress';
+import type { keyCodeDefinitions } from 'cypress-real-events/keyCodeDefinitions';
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+declare const Cypress: Cypress.Cypress;
+declare const cy: Cypress.cy;
+
+type Key = keyof typeof keyCodeDefinitions;
+type KeyOrShortcut = Key | Array<Key>;
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    interface Chainable<Subject = any> {
+      /**
+       * Performs a real click and waits for Angular change detection.
+       * Use this instead of realClick() in Angular tests.
+       * @example cy.get('.button').realClickAndWait()
+       */
+      realClickAndWait(options?: RealClickOptions): Chainable<Subject>;
+
+      /**
+       * Performs a real hover and waits for Angular change detection.
+       * Use this instead of realHover() in Angular tests.
+       * @example cy.get('.element').realHoverAndWait()
+       */
+      realHoverAndWait(options?: RealHoverOptions): Chainable<Subject>;
+
+      /**
+       * Performs a real key press and waits for Angular change detection.
+       * Use this instead of realPress() in Angular tests.
+       * @example cy.realPressAndWait('Tab')
+       */
+      realPressAndWait(
+        keyOrShortcut: KeyOrShortcut,
+        options?: RealPressOptions
+      ): Chainable<Subject>;
+    }
+  }
+}
+
+/**
+ * Custom command that wraps realClick with automatic Angular change detection wait.
+ * This ensures observables have time to emit and async pipes update the DOM
+ * after interactions with Angular 21's new control flow.
+ */
+Cypress.Commands.add(
+  'realClickAndWait',
+  { prevSubject: 'element' },
+  function (subject, options) {
+    cy.wrap(subject).realClick(options);
+    return cy.wait(500).then(() => subject);
+  }
+);
+
+/**
+ * Custom command that wraps realHover with automatic Angular change detection wait.
+ * This ensures observables have time to emit and async pipes update the DOM
+ * after hover interactions with Angular 21's new control flow.
+ */
+Cypress.Commands.add(
+  'realHoverAndWait',
+  { prevSubject: 'element' },
+  function (subject, options) {
+    cy.wrap(subject).realHover(options);
+    return cy.wait(500).then(() => subject);
+  }
+);
+
+/**
+ * Custom command that wraps realPress with automatic Angular change detection wait.
+ * This ensures observables have time to emit and async pipes update the DOM
+ * after keyboard interactions with Angular 21's new control flow.
+ */
+Cypress.Commands.add('realPressAndWait', function (keyOrShortcut, options) {
+  cy.realPress(keyOrShortcut, options);
+  return cy.wait(500);
+});
+
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

package/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>viz Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/cypress/support/component.ts

@@ -0,0 +1,33 @@
+import { mount } from 'cypress/angular';
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+import './commands';
+
+// add component testing only related command here, such as mount
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject> {
+      mount: typeof mount;
+    }
+  }
+}
+
+declare const Cypress: Cypress.Cypress;
+
+Cypress.Commands.add('mount', mount);

package/cypress.config.ts

@@ -0,0 +1,9 @@
+import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  component: {
+    ...nxComponentTestingPreset(__filename),
+    justInTimeCompile: false,
+  },
+});

package/karma.conf.js

@@ -0,0 +1,62 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('karma-junit-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
+    junitReporter: {
+      outputFile: 'test-results.xml',
+      useBrowserName: false,
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/viz'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' },
+        { type: 'cobertura', subdir: '.', file: 'cobertura.xml' },
+      ],
+    },
+    reporters: ['progress', 'kjhtml', 'junit'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['ChromeHeadlessNoSandbox', 'Chrome'],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: [
+          '--headless',
+          '--no-sandbox',
+          '--password-store=basic',
+          '--enable-logging',
+          '--v=1',
+        ],
+      },
+    },
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/viz",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": ["LICENSE"]
+}

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@mathstack/viz",
   "license": "MIT",
+  "scripts": {
+    "build": "ng build"
+  },
+  "version": "2.1.0",
   "peerDependencies": {
-    "@angular/cdk": ">=19.0.0 <21.0.0",
-    "@angular/common": ">=19.0.0 <21.0.0",
-    "@angular/core": ">=19.0.0 <21.0.0",
-    "@mathstack/app-kit": "^1.0.0",
+    "@angular/cdk": ">=19.0.0 <22.0.0",
+    "@angular/common": ">=19.0.0 <22.0.0",
+    "@angular/core": ">=19.0.0 <22.0.0",
+    "@mathstack/app-kit": "^2.0.0",
     "csstype": "^3.1.3",
     "d3": "^7.6.1",
     "file-saver": "^2.0.5",
@@ -23,18 +27,5 @@
     "type": "git",
     "url": "https://github.com/mathematica-pub/frontend-shared-packages.git",
     "directory": "libs/viz"
-  },
-  "version": "1.1.5",
-  "module": "fesm2022/mathstack-viz.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/mathstack-viz.mjs"
-    }
-  },
-  "sideEffects": false
-}
+  }
+}

package/project.json

@@ -0,0 +1,97 @@
+{
+  "name": "viz",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/viz/src",
+  "prefix": "vic",
+  "generators": {
+    "@schematics/angular:component": {
+      "style": "scss"
+    }
+  },
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:ng-packagr",
+      "options": {
+        "project": "libs/viz/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/viz/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "libs/viz/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production",
+      "outputs": ["{workspaceRoot}/dist/viz"]
+    },
+    "build-release": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npx nx build viz"
+      }
+    },
+    "publish": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "cd ./dist/viz && npm publish --access public && git push --tags"
+      }
+    },
+    "github-release": {
+      "executor": "@jscutlery/semver:github",
+      "options": {
+        "tag": "{tag}",
+        "notes": "{notes}"
+      }
+    },
+    "test": {
+      "executor": "@angular-devkit/build-angular:karma",
+      "options": {
+        "main": "libs/viz/src/test.ts",
+        "tsConfig": "libs/viz/tsconfig.spec.json",
+        "karmaConfig": "libs/viz/karma.conf.js",
+        "browsers": "ChromeHeadlessNoSandbox",
+        "watch": false
+      }
+    },
+    "lint": {
+      "executor": "@angular-eslint/builder:lint",
+      "options": {
+        "lintFilePatterns": ["libs/viz/**/*.ts", "libs/viz/**/*.html"]
+      },
+      "outputs": ["{options.outputFile}"]
+    },
+    "component-test": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "libs/viz/cypress.config.ts",
+        "testingType": "component",
+        "skipServe": true,
+        "devServerTarget": "demo-app:build:devleopment"
+      }
+    },
+    "cypress-local": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "cd libs/viz && npx cypress open"
+      }
+    },
+    "create-changelog": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "touch libs/viz/CHANGELOG.md"
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "angular",
+        "skipCommit": true,
+        "skipRootChangelog": true,
+        "postTargets": ["build-release", "publish", "github-release"],
+        "skipCommitTypes": ["build", "ci", "docs", "refactor", "style", "test"]
+      }
+    }
+  }
+}

package/src/.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "root": false,
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": [
+          "libs/viz/tsconfig.lib.json",
+          "libs/viz/tsconfig.spec.json",
+          "libs/viz/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "vic",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "vic",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/no-inputs-metadata-property": "warn"
+      }
+    }
+  ]
+}

package/src/.prettierrc

@@ -0,0 +1,31 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "overrides": [
+    {
+      "files": "*.component.html",
+      "options": {
+        "parser": "angular"
+      }
+    },
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "html"
+      }
+    },
+    {
+      "files": "*.scss",
+      "options": {
+        "parser": "scss"
+      }
+    }
+  ],
+  "htmlWhitespaceSensitivity": "strict"
+}

package/src/lib/axes/base/config/xy-axis-builder.ts

@@ -0,0 +1,68 @@
+import { VicAuxMarksBuilder } from '../../../marks';
+import { AxisBaselineBuilder } from '../../baseline/axis-baseline-builder';
+import { GridBuilder } from '../../grid/grid-builder';
+import { AxisLabelBuilder } from '../../label/axis-label-builder';
+
+export abstract class XyAxisBaseBuilder extends VicAuxMarksBuilder<void> {
+  protected _axis: 'x' | 'y';
+  protected _dimension: 'ordinal' | 'quantitative';
+  protected baselineBuilder: AxisBaselineBuilder = new AxisBaselineBuilder();
+  protected gridBuilder: GridBuilder;
+  protected labelBuilder: AxisLabelBuilder;
+  protected marksClass: string;
+
+  /**
+   * OPTIONAL. Specifies the configuration for the axis baseline. The baseline is the line that typically runs along the edge of the chart, from which tick marks and labels are drawn.
+   *
+   * @param baseline - A function that specifies properties for the axis baseline, or `null` to unset the baseline.
+   *
+   * If called with null, the default values of the baseline will be used.
+   */
+  baseline(baseline: (baseline: AxisBaselineBuilder) => void): this;
+  baseline(baseline: null): this;
+  baseline(baseline: (baseline: AxisBaselineBuilder) => void): this {
+    this.baselineBuilder = new AxisBaselineBuilder();
+    if (baseline === null) {
+      return this;
+    }
+    baseline?.(this.baselineBuilder);
+    return this;
+  }
+
+  /**
+   * OPTIONAL. Specifies the configuration of grid lines for the axis. Grid lines are the lines that run perpendicular to the axis and intersect with tick marks.
+   *
+   * @param grid - A function that specifies properties for the grid lines, or `null` to unset the grid.
+   *
+   * If called with no argument, the default values of the grid will be used.
+   */
+  grid(grid: (grid: GridBuilder) => void): this;
+  grid(): this;
+  grid(grid: null): this;
+  grid(grid?: ((grid: GridBuilder) => void) | null): this {
+    if (grid === null) {
+      this.gridBuilder = undefined;
+      return this;
+    }
+    this.gridBuilder = new GridBuilder();
+    grid?.(this.gridBuilder);
+    return this;
+  }
+
+  /**
+   * OPTIONAL. Specifies properties for an axis label.
+   *
+   * @param label - A function that specifies properties for an axis label, or `null` to unset the label.
+   */
+  label(label: (label: AxisLabelBuilder) => void): this;
+  label(label: null): this;
+  label(label: ((label: AxisLabelBuilder) => void) | null): this {
+    if (label === null) {
+      this.labelBuilder = undefined;
+      return this;
+    }
+    this.labelBuilder = new AxisLabelBuilder();
+    label(this.labelBuilder);
+    return this;
+  }
+}

package/src/lib/axes/base/config/xy-axis-config.ts

@@ -0,0 +1,35 @@
+import { DataValue } from '../../../core/types/values';
+import { AuxMarksConfig } from '../../../marks';
+import { AxisBaseline } from '../../baseline/axis-baseline';
+import { Grid } from '../../grid/grid-config';
+import { AxisLabel } from '../../label/axis-label';
+import { Ticks } from '../../ticks/ticks';
+import { XyAxisBaseOptions } from './xy-axis-options';
+
+export abstract class XyAxisConfig<
+  Tick extends DataValue,
+  TicksConfig extends Ticks<Tick>,
+>
+  extends AuxMarksConfig
+  implements XyAxisBaseOptions
+{
+  baseline: AxisBaseline;
+  grid: Grid;
+  label: AxisLabel;
+  ticks: TicksConfig;
+
+  abstract getNumTicksBySpacing(
+    spacing: number,
+    dimensions: {
+      height: number;
+      width: number;
+    }
+  ): number;
+
+  getValidatedNumTicks(numTicks: number): number {
+    if (numTicks < 1) {
+      return 1;
+    }
+    return Math.floor(numTicks);
+  }
+}

package/{lib/axes/base/config/xy-axis-options.d.ts → src/lib/axes/base/config/xy-axis-options.ts}

@@ -1,10 +1,11 @@
-import { MarksOptions } from '../../../marks';
-import { AxisBaselineOptions } from '../../baseline/axis-baseline-options';
-import { Grid } from '../../grid/grid-config';
-import { AxisLabelOptions } from '../../label/axis-label-options';
-export interface XyAxisBaseOptions extends MarksOptions {
-    baseline: AxisBaselineOptions;
-    grid: Grid;
-    label: AxisLabelOptions;
-    marksClass: string;
-}
+import { MarksOptions } from '../../../marks';
+import { AxisBaselineOptions } from '../../baseline/axis-baseline-options';
+import { Grid } from '../../grid/grid-config';
+import { AxisLabelOptions } from '../../label/axis-label-options';
+
+export interface XyAxisBaseOptions extends MarksOptions {
+  baseline: AxisBaselineOptions;
+  grid: Grid;
+  label: AxisLabelOptions;
+  marksClass: string;
+}

package/src/lib/axes/base/xy-axis-base.spec.ts

@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ElementRef } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { XyChartComponent } from '@mathstack/viz';
+import { XyAxisStub } from '../../testing/stubs/xy-axis.stub';
+import { Ticks } from '../ticks/ticks';
+import { VicXOrdinalAxisConfigBuilder } from '../x-ordinal/x-ordinal-axis-builder';
+import { VicXQuantitativeAxisConfigBuilder } from '../x-quantitative/x-quantitative-axis-builder';
+
+describe('the XyAxis abstract class', () => {
+  let abstractClass: XyAxisStub<number, Ticks<number>>;
+  const mockElementRef = {
+    nativeElement: {
+      querySelector: jasmine.createSpy('querySelector'),
+      style: {},
+    },
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        XyAxisStub,
+        XyChartComponent,
+        { provide: ElementRef, useValue: mockElementRef },
+      ],
+    });
+    abstractClass = TestBed.inject(XyAxisStub);
+  });
+
+  describe('initFromConfig', () => {
+    beforeEach(() => {
+      spyOn(abstractClass, 'drawMarks');
+    });
+    it('calls drawMarks once', () => {
+      abstractClass.initFromConfig();
+      expect(abstractClass.drawMarks).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setAxisFromScaleAndConfig', () => {
+    let tickSizeOuterSpy: jasmine.Spy;
+    beforeEach(() => {
+      tickSizeOuterSpy = jasmine
+        .createSpy('tickSizeOuter')
+        .and.returnValue('tick size' as any);
+      abstractClass.axisFunction = () => {
+        return {
+          tickSizeOuter: tickSizeOuterSpy,
+        };
+      };
+      spyOn(abstractClass, 'setTicks');
+      abstractClass.scale = 'class scale' as any;
+    });
+    it('calls tickSizeOuter once with the correct value if tickSizeOuter is defined', () => {
+      abstractClass.config = new VicXOrdinalAxisConfigBuilder()
+        .ticks((t) => t.sizeOuter(3))
+        .getConfig();
+      abstractClass.setAxisFromScaleAndConfig();
+      expect(tickSizeOuterSpy).toHaveBeenCalledOnceWith(3);
+    });
+    it('does not call tickSizeOuter if tickSizeOuter is undefined', () => {
+      tickSizeOuterSpy.calls.reset();
+      abstractClass.config =
+        new VicXQuantitativeAxisConfigBuilder().getConfig();
+      abstractClass.setAxisFromScaleAndConfig();
+      expect(tickSizeOuterSpy).not.toHaveBeenCalled();
+    });
+    it('calls setTicks once with tickFormat if tickFormat is truthy', () => {
+      abstractClass.config = new VicXOrdinalAxisConfigBuilder()
+        .ticks((t) => t.format('.1f'))
+        .getConfig();
+      abstractClass.setAxisFromScaleAndConfig();
+      expect(abstractClass.setTicks).toHaveBeenCalledOnceWith('.1f');
+    });
+    it('does not call setTicks if tickFormat is falsy', () => {
+      abstractClass.config = new VicXOrdinalAxisConfigBuilder().getConfig();
+      abstractClass.setAxisFromScaleAndConfig();
+      expect(abstractClass.setTicks).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('drawMarks', () => {
+    beforeEach(() => {
+      spyOn(abstractClass, 'setAxisFunction');
+      spyOn(abstractClass, 'setTranslate');
+      spyOn(abstractClass, 'setScale');
+      spyOn(abstractClass, 'setAxisFromScaleAndConfig');
+      spyOn(abstractClass, 'drawAxis');
+      abstractClass.config = {
+        grid: true,
+      } as any;
+    });
+    it('calls setAxisFunction once', () => {
+      abstractClass.initFromConfig();
+      expect(abstractClass.setAxisFunction).toHaveBeenCalledTimes(1);
+    });
+    it('calls setTranslate once', () => {
+      abstractClass.initFromConfig();
+      expect(abstractClass.setTranslate).toHaveBeenCalledTimes(1);
+    });
+    it('calls setScale once', () => {
+      abstractClass.drawMarks();
+      expect(abstractClass.setScale).toHaveBeenCalledTimes(1);
+    });
+    it('calls setAxisFromScaleAndConfig once', () => {
+      abstractClass.drawMarks();
+      expect(abstractClass.setAxisFromScaleAndConfig).toHaveBeenCalledTimes(1);
+    });
+    it('calls drawAxis once', () => {
+      abstractClass.drawMarks();
+      expect(abstractClass.drawAxis).toHaveBeenCalledTimes(1);
+    });
+  });
+});