@mathstack/viz 1.1.4 → 2.0.3

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

@@ -0,0 +1,323 @@
+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

@@ -0,0 +1,45 @@
+<!-- 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

@@ -0,0 +1,37 @@
+: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

@@ -0,0 +1,243 @@
+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/{lib/charts/chart/chart.token.d.ts → src/lib/charts/chart/chart.token.ts}

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

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

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