@mathstack/viz 2.1.0 → 2.2.0

package/src/lib/charts/chart/chart-scaling.cy.ts

@@ -1,323 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import {
-  CHART_SIZE,
-  ChartConfig,
-  DotsConfig,
-  VicChartConfigBuilder,
-  VicChartModule,
-  VicDotsConfigBuilder,
-  VicDotsModule,
-  VicXQuantitativeAxisConfig,
-  VicXQuantitativeAxisConfigBuilder,
-  VicXyAxisModule,
-  VicYQuantitativeAxisConfig,
-  VicYQuantitativeAxisConfigBuilder,
-} from '@mathstack/viz';
-import { cy, describe, expect, it } from 'local-cypress';
-import {
-  CountryFactsDatum,
-  countryFactsData,
-} from '../../testing/data/country-area-continent';
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'app-svg-attr-test-component',
-  template: `
-    <div [style.width.px]="containerWidth">
-      <vic-chart [config]="chartConfig">
-        <ng-container svg-elements>
-          <svg:rect
-            x="50"
-            y="50"
-            width="100"
-            height="100"
-            fill="tomato"
-          ></svg:rect>
-        </ng-container>
-      </vic-chart>
-    </div>
-  `,
-  imports: [CommonModule, VicChartModule],
-})
-class SvgAttrTestComponent {
-  @Input() chartConfig: ChartConfig;
-  @Input() containerWidth = 400;
-}
-
-describe('ChartComponent applies correct SVG attributes/styles by scalingStrategy on initial render', () => {
-  const testWidth = 400;
-  const testHeight = 300;
-  const baseConfig = new VicChartConfigBuilder()
-    .maxWidth(testWidth)
-    .margin({ top: 20, right: 20, bottom: 20, left: 20 });
-
-  function mountWithStrategy(config: ChartConfig = baseConfig.getConfig()) {
-    cy.mount(SvgAttrTestComponent, {
-      componentProperties: { chartConfig: config },
-    });
-    cy.wait(50);
-  }
-
-  it('applies fixed scaling with static width and aspect-ratio derived height', () => {
-    mountWithStrategy(baseConfig.scalingStrategy('fixed').getConfig());
-    cy.get('svg')
-      .should('have.css', 'width', `${testWidth}px`)
-      .and('have.css', 'height', `${testWidth / CHART_SIZE.aspectRatio}px`)
-      .and('not.have.attr', 'viewBox');
-  });
-
-  it('applies fixed scaling with static width and user-speced height that overrides aspect ratio', () => {
-    mountWithStrategy(
-      baseConfig.scalingStrategy('fixed').maxHeight(testHeight).getConfig()
-    );
-    cy.get('svg')
-      .should('have.css', 'width', `${testWidth}px`)
-      .and('have.css', 'height', `${testHeight}px`)
-      .and('not.have.attr', 'viewBox');
-  });
-
-  it('applies responsive-width scaling with dynamic width and aspect-ratio-derived height', () => {
-    mountWithStrategy(
-      baseConfig.scalingStrategy('responsive-width').maxHeight(null).getConfig()
-    );
-    cy.get('svg').should('not.have.attr', 'viewBox');
-    cy.get('svg')
-      .invoke('css', 'width')
-      .then((w) => {
-        const wNum = parseFloat(String(w));
-        expect(Number.isFinite(wNum) ? wNum : 0).to.be.lte(testWidth);
-
-        cy.get('svg')
-          .invoke('css', 'height')
-          .then((h) => {
-            const hNum = parseFloat(String(h));
-            expect(Number.isFinite(hNum) ? hNum : 0).to.be.closeTo(
-              wNum / CHART_SIZE.aspectRatio,
-              0.1
-            );
-          });
-      });
-  });
-
-  it('applies responsive-width scaling with dynamic width and max-height-derived height', () => {
-    const config = baseConfig
-      .scalingStrategy('responsive-width')
-      .maxHeight(testHeight)
-      .aspectRatio(2) // should ignore this
-      .getConfig();
-
-    mountWithStrategy(config);
-
-    cy.wait(50);
-    cy.get('svg')
-      .invoke('css', 'width')
-      .then((w) => {
-        const n = parseFloat(String(w));
-        const width = Number.isFinite(n) ? n : 0;
-        cy.get('svg')
-          .invoke('css', 'height')
-          .then((h) => {
-            const m = parseFloat(String(h));
-            const height = Number.isFinite(m) ? m : 0;
-            expect(height).to.be.closeTo(width / (testWidth / testHeight), 0.1);
-          });
-      });
-  });
-
-  it('applies viewbox scaling with a viewBox attribute', () => {
-    mountWithStrategy(baseConfig.scalingStrategy('viewbox').getConfig());
-    const vbHeight = CHART_SIZE.viewBoxWidth / (testWidth / testHeight);
-    cy.get('svg')
-      .should(
-        'have.attr',
-        'viewBox',
-        `0 0 ${CHART_SIZE.viewBoxWidth} ${vbHeight}`
-      )
-      .and('have.class', 'viewbox');
-  });
-});
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'app-scaling-strategy-test',
-  template: `
-    <div
-      [style.width.px]="containerWidth"
-      [style.height.px]="containerHeight"
-      class="test-wrapper"
-    >
-      <vic-xy-chart [config]="chartConfig">
-        <ng-container svg-elements>
-          <svg:g
-            vic-x-quantitative-axis
-            [config]="xQuantitativeAxisConfig"
-          ></svg:g>
-          <svg:g
-            vic-y-quantitative-axis
-            [config]="yQuantitativeAxisConfig"
-          ></svg:g>
-          <svg:g vic-primary-marks-dots [config]="dotsConfig"></svg:g>
-        </ng-container>
-      </vic-xy-chart>
-    </div>
-  `,
-  imports: [CommonModule, VicChartModule, VicDotsModule, VicXyAxisModule],
-})
-export class ScalingStrategyTestComponent {
-  @Input() chartConfig: ChartConfig;
-  @Input() dotsConfig: DotsConfig<CountryFactsDatum>;
-  @Input() yQuantitativeAxisConfig: VicYQuantitativeAxisConfig<number>;
-  @Input() xQuantitativeAxisConfig: VicXQuantitativeAxisConfig<number>;
-  @Input() containerWidth = 400;
-  @Input() containerHeight = null;
-}
-
-describe('ChartComponent correctly changes size of chart with scaling strategies', () => {
-  const testWidth = 800;
-  const testHeight = 600;
-  const testContainerWidth = 400;
-  const margin = { top: 20, right: 20, bottom: 20, left: 20 };
-  const baseConfig = new VicChartConfigBuilder().margin(margin).minWidth(100);
-
-  function getDotTransform(
-    selector = '.vic-dots-group'
-  ): Cypress.Chainable<{ x: number; y: number }> {
-    return cy
-      .get(selector)
-      .first()
-      .invoke('attr', 'transform')
-      .then((t) => {
-        const match = /translate\(([^,]+),\s*([^)]+)\)/.exec(t);
-        if (!match) throw new Error(`Failed to parse transform string: ${t}`);
-        return {
-          x: parseFloat(match[1]),
-          y: parseFloat(match[2]),
-        };
-      });
-  }
-
-  function mountWithStrategy(
-    config: ChartConfig,
-    containerWidth,
-    containerHeight
-  ) {
-    const xAxisConfig = new VicXQuantitativeAxisConfigBuilder<number>()
-      .ticks((ticks) => ticks.format('.0f').count(5))
-      .getConfig();
-    const yAxisConfig =
-      new VicYQuantitativeAxisConfigBuilder<number>().getConfig();
-    const dotsConfig = new VicDotsConfigBuilder<CountryFactsDatum>()
-      .data(countryFactsData)
-      .xNumeric((x) => x.valueAccessor((d) => d.population))
-      .yNumeric((y) => y.valueAccessor((d) => d.gdpPerCapita))
-      .radiusNumeric((r) => r.valueAccessor((d) => d.popGrowth).range([4, 10]))
-      .datumClass((d) => d.country)
-      .getConfig();
-
-    cy.mount(ScalingStrategyTestComponent, {
-      componentProperties: {
-        chartConfig: config,
-        xQuantitativeAxisConfig: xAxisConfig,
-        yQuantitativeAxisConfig: yAxisConfig,
-        dotsConfig,
-        containerWidth,
-        containerHeight,
-      },
-    });
-  }
-
-  it('applies fixed scaling with static width and height and does not scale down', () => {
-    const config = baseConfig
-      .scalingStrategy('fixed')
-      .maxWidth(testWidth)
-      .maxHeight(testHeight)
-      .getConfig();
-    mountWithStrategy(config, testContainerWidth, null);
-    cy.get('svg')
-      .should('have.css', 'width', `${testWidth}px`)
-      .and('have.css', 'height', `${testHeight}px`)
-      .and('not.have.attr', 'viewBox');
-  });
-
-  it('updates height when user provides a new height', () => {
-    const config = baseConfig
-      .scalingStrategy('fixed')
-      .maxWidth(testWidth)
-      .maxHeight(testHeight)
-      .getConfig();
-    mountWithStrategy(config, testContainerWidth, null);
-    cy.wait(100);
-
-    const newConfig = baseConfig
-      .scalingStrategy('fixed')
-      .maxWidth(testWidth)
-      .maxHeight(testHeight + 100)
-      .getConfig();
-    mountWithStrategy(newConfig, testContainerWidth, null);
-    cy.get('svg')
-      .should('have.css', 'width', `${testWidth}px`)
-      .and('have.css', 'height', `${testHeight + 100}px`)
-      .and('not.have.attr', 'viewBox');
-  });
-
-  it('applies responsive-width scaling with fixedHeight and updates mark positions when container resizes', () => {
-    const config = baseConfig
-      .scalingStrategy('responsive-width')
-      .maxWidth(testWidth)
-      .fixedHeight(true)
-      .aspectRatio(2)
-      .getConfig();
-    mountWithStrategy(config, testContainerWidth, null);
-
-    getDotTransform().then((originalPosition) => {
-      // remount with wider container
-      mountWithStrategy(config, testContainerWidth + 100, null);
-      cy.wait(100);
-
-      getDotTransform().should((newPosition) => {
-        expect(newPosition.x).to.be.greaterThan(originalPosition.x);
-        expect(newPosition.y).to.be.closeTo(originalPosition.y, 1);
-      });
-
-      // remount with narrower container
-      mountWithStrategy(config, testContainerWidth - 100, true);
-      cy.wait(100);
-
-      getDotTransform().should((newPosition) => {
-        expect(newPosition.x).to.be.lessThan(originalPosition.x);
-        expect(newPosition.y).to.be.closeTo(originalPosition.y, 1);
-      });
-    });
-  });
-
-  it('applies responsive-width scaling without fixedHeight and updates mark positions when container resizes', () => {
-    const config = baseConfig
-      .scalingStrategy('responsive-width')
-      .maxWidth(testWidth)
-      .fixedHeight(false)
-      .aspectRatio(2)
-      .getConfig();
-    mountWithStrategy(config, testContainerWidth, null);
-
-    getDotTransform().then((originalPosition) => {
-      // remount with wider container
-      mountWithStrategy(config, testContainerWidth + 100, null);
-      cy.wait(100);
-
-      getDotTransform().should((newPosition) => {
-        expect(newPosition.x).to.be.greaterThan(originalPosition.x);
-        expect(newPosition.y).to.be.greaterThan(originalPosition.y);
-      });
-
-      // remount with narrower container
-      mountWithStrategy(config, testContainerWidth - 100, true);
-      cy.wait(100);
-
-      getDotTransform().should((newPosition) => {
-        expect(newPosition.x).to.be.lessThan(originalPosition.x);
-        expect(newPosition.y).to.be.lessThan(originalPosition.y);
-      });
-    });
-  });
-});

package/src/lib/charts/chart/chart.component.html

@@ -1,45 +0,0 @@
-<!-- Slot exists so that projected content can have access to scales -->
-<ng-container *ngTemplateOutlet="htmlElementsBefore"></ng-container>
-<div
-  #div
-  class="vic-chart-container"
-  [ngClass]="(strategy$ | async)"
-  [style.maxWidth.px]="widthCfg$ | async"
-  [style.minWidth.px]="minWidthCfg$ | async"
-  [style.maxHeight.px]="heightCfg$ | async"
-  [style.aspectRatio]="(strategy$ | async) === 'viewbox' ? (config.viewBoxX / config.viewBoxY) : null"
-  [style.width.%]="(strategy$ | async) === 'viewbox' ? 100 : null"
->
-  <svg
-    #svg
-    class="vic-chart-svg"
-    [ngClass]="(strategy$ | async)"
-    [style.width.px]="(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.width : null"
-    [style.height.px]="(strategy$ | async) !== 'viewbox' ? (svgDimensions$ | async)?.height : null"
-    [attr.viewBox]="(strategy$ | async) === 'viewbox' ? '0 0 ' + config.viewBoxX + ' ' + config.viewBoxY : null"
-  >
-    <defs>
-      <ng-container *ngTemplateOutlet="svgDefs"></ng-container>
-    </defs>
-    <ng-container *ngTemplateOutlet="svgElements"></ng-container>
-  </svg>
-</div>
-
-<!-- Slot exists so that projected content can have access to scales -->
-<ng-container *ngTemplateOutlet="htmlElementsAfter"></ng-container>
-
-<ng-template #htmlElementsBefore>
-  <ng-content select="[html-elements-before]"></ng-content>
-</ng-template>
-
-<ng-template #svgDefs>
-  <ng-content select="[svg-defs]"></ng-content>
-</ng-template>
-
-<ng-template #svgElements>
-  <ng-content select="[svg-elements]"></ng-content>
-</ng-template>
-
-<ng-template #htmlElementsAfter>
-  <ng-content select="[html-elements-after]"></ng-content>
-</ng-template>

package/src/lib/charts/chart/chart.component.scss

@@ -1,37 +0,0 @@
-:host {
-}
-
-.vic-chart-container {
-  display: flex;
-  align-items: stretch;
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-
-  &.responsive-width {
-    contain: inline-size;
-  }
-
-  &.viewbox {
-    contain: inline-size;
-    overflow: hidden;
-  }
-
-  &.fixed {
-    display: block;
-  }
-}
-
-.vic-chart-svg {
-  display: block;
-
-  // Allow overflow for annotations, labels, etc. unless viewbox
-  &:not(.viewbox) {
-    overflow: visible;
-  }
-
-  &.viewbox {
-    width: 100%;
-    height: 100%;
-  }
-}

package/src/lib/charts/chart/chart.component.ts

@@ -1,243 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  DestroyRef,
-  ElementRef,
-  Input,
-  NgZone,
-  OnChanges,
-  OnInit,
-  SimpleChanges,
-  ViewChild,
-  inject,
-} from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgOnChangesUtilities } from '@mathstack/app-kit';
-import { isEqual } from 'lodash-es';
-import {
-  BehaviorSubject,
-  Observable,
-  auditTime,
-  combineLatest,
-  defer,
-  distinctUntilChanged,
-  filter,
-  map,
-  of,
-  shareReplay,
-  switchMap,
-} from 'rxjs';
-import { Dimensions, ElementSpacing } from '../../core/types/layout';
-import { Chart } from './chart';
-import { CHART } from './chart.token';
-import { ScalingStrategy, VicChartConfigBuilder } from './config/chart-builder';
-import { ChartConfig } from './config/chart-config';
-
-export interface Ranges {
-  x: [number, number];
-  y: [number, number];
-}
-
-export interface ChartResizing {
-  width: boolean;
-  height: boolean;
-  useViewbox: boolean;
-}
-
-export interface ReactiveConfig {
-  margin: ElementSpacing;
-  height: number;
-  width: number;
-  scalingStrategy: ScalingStrategy;
-}
-
-/**
- * A base component that can be extended to create specific types of `Chart` components,
- *  each of which can serve as a wrapper component for one `PrimaryMarks` component and any
- *  other content that is projected into its content projection slots.
- *
- * <p class="comment-slots">Content projection slots</p>
- *
- * `html-elements-before`: Elements that will be projected before the chart's scaled div
- *  and scaled svg element in the DOM. USeful for adding elements that require access to chart scales.
- *
- * `svg-defs`: Used to create any required defs for the chart's svg element. For example, patterns or gradients.
- *
- * `svg-elements`: Used for all elements that should be children of the chart's scaled svg element.
- *
- * `html-elements-after`: Elements that will be projected after the chart's scaled div
- *  and scaled svg element in the DOM. USeful for adding elements that require access to chart scales.
- */
-@Component({
-  selector: 'vic-chart',
-  templateUrl: './chart.component.html',
-  styleUrls: ['./chart.component.scss'],
-  providers: [{ provide: CHART, useExisting: ChartComponent }],
-  host: {
-    class: 'vic-chart',
-  },
-  imports: [CommonModule],
-})
-export class ChartComponent implements Chart, OnInit, OnChanges {
-  @Input() config: ChartConfig = new VicChartConfigBuilder().getConfig();
-  @ViewChild('div', { static: true }) divRef: ElementRef<HTMLDivElement>;
-  @ViewChild('svg', { static: true }) svgRef: ElementRef<SVGSVGElement>;
-
-  private _config: BehaviorSubject<ChartConfig> = new BehaviorSubject(null);
-  config$: Observable<ChartConfig> = this._config.asObservable().pipe(
-    filter((c) => !!c),
-    distinctUntilChanged((a, b) => isEqual(a, b)),
-    shareReplay(1)
-  );
-
-  protected readonly strategy$ = this.config$.pipe(
-    map((c) => c.scalingStrategy),
-    distinctUntilChanged()
-  );
-
-  protected readonly widthCfg$ = this.config$.pipe(
-    map((c) => c.width),
-    distinctUntilChanged()
-  );
-
-  protected readonly minWidthCfg$ = this.config$.pipe(
-    map((c) => c.minWidth),
-    distinctUntilChanged()
-  );
-
-  protected readonly heightCfg$ = this.config$.pipe(
-    map((c) => c.height),
-    distinctUntilChanged()
-  );
-
-  private readonly aspectRatioCfg$ = this.config$.pipe(
-    map(
-      (c) =>
-        c.aspectRatio ??
-        (typeof c.width === 'number' &&
-        typeof c.height === 'number' &&
-        c.height !== 0
-          ? c.width / c.height
-          : undefined)
-    ),
-    distinctUntilChanged()
-  );
-
-  private readonly isFixedHeight$ = this.config$.pipe(
-    map((c) => c.isFixedHeight),
-    distinctUntilChanged()
-  );
-
-  protected readonly marginCfg$ = this.config$.pipe(
-    map((c) => c.margin),
-    distinctUntilChanged((a, b) => isEqual(a, b))
-  );
-
-  private readonly width$ = this.strategy$.pipe(
-    switchMap((strategy) =>
-      strategy === 'responsive-width'
-        ? defer(() => this.observeElementWidth(this.divRef.nativeElement))
-        : strategy === 'viewbox'
-          ? of(this.config.viewBoxX)
-          : this.widthCfg$
-    )
-  );
-
-  private readonly height$ = combineLatest([
-    this.strategy$,
-    this.width$,
-    this.heightCfg$,
-    this.aspectRatioCfg$,
-    this.isFixedHeight$,
-  ]).pipe(
-    map(([strategy, w, hCfg, ar, isFixedHeight]) =>
-      strategy === 'responsive-width' && !isFixedHeight
-        ? w / ar
-        : strategy === 'viewbox'
-          ? this.config.viewBoxY
-          : hCfg
-    ),
-    distinctUntilChanged()
-  );
-
-  protected readonly svgDimensions$ = combineLatest([
-    this.width$,
-    this.height$,
-  ]).pipe(
-    filter(([w, h]) => w > 0 && h > 0),
-    map(([width, height]) => ({ width, height })),
-    distinctUntilChanged((a, b) => isEqual(a, b)),
-    shareReplay(1)
-  );
-
-  readonly ranges$ = combineLatest([this.svgDimensions$, this.marginCfg$]).pipe(
-    map(([dimensions, margin]) =>
-      this.getRangesFromSvgDimensions(dimensions, margin)
-    ),
-    distinctUntilChanged((a, b) => isEqual(a, b)),
-    shareReplay(1)
-  );
-
-  protected destroyRef = inject(DestroyRef);
-  private ngZone = inject(NgZone);
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (NgOnChangesUtilities.inputObjectChanged(changes, 'config')) {
-      this._config.next(this.config);
-    }
-  }
-
-  ngOnInit(): void {
-    // ensure that values are pulled through
-    this.ranges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
-  }
-
-  private observeElementWidth(element: HTMLElement): Observable<number> {
-    return new Observable<number>((subscriber) => {
-      let ro: ResizeObserver;
-      this.ngZone.runOutsideAngular(() => {
-        ro = new ResizeObserver((entries) => {
-          const e = entries[0];
-          const w =
-            (Array.isArray(e.borderBoxSize)
-              ? e.borderBoxSize[0]?.inlineSize
-              : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                (e as any).borderBoxSize?.inlineSize) ?? e.contentRect.width;
-          this.ngZone.run(() => subscriber.next(w));
-        });
-      });
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ro.observe(element, { box: 'border-box' as any });
-      return () => {
-        ro.unobserve(element);
-        ro.disconnect();
-      };
-    }).pipe(
-      map((w) => Math.round(w)),
-      auditTime(0),
-      distinctUntilChanged()
-    );
-  }
-
-  private getRangesFromSvgDimensions(
-    dim: Dimensions,
-    margin: ElementSpacing
-  ): Ranges {
-    return {
-      x: [margin.left, dim.width - margin.right],
-      y: [dim.height - margin.bottom, margin.top],
-    };
-  }
-
-  getViewBoxScale(): { x: number; y: number } {
-    if (!this.svgRef?.nativeElement?.viewBox?.baseVal) {
-      return { x: 1, y: 1 };
-    }
-    const rect = this.svgRef.nativeElement.getBoundingClientRect();
-    const vb = this.svgRef.nativeElement.viewBox.baseVal;
-    return {
-      x: vb.width / rect.width,
-      y: vb.height / rect.height,
-    };
-  }
-}

package/src/lib/charts/chart/chart.token.ts

@@ -1,4 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { Chart } from './chart';
-
-export const CHART = new InjectionToken<Chart>('Chart');

package/src/lib/charts/chart/chart.ts

@@ -1,5 +0,0 @@
-import { ElementRef } from '@angular/core';
-
-export class Chart {
-  svgRef: ElementRef<SVGSVGElement>;
-}