@mathstack/viz 2.1.0 → 2.2.0

package/src/lib/tooltips/html-tooltip/html-tooltip.directive.ts

@@ -1,210 +0,0 @@
-import {
-  FlexibleConnectedPositionStrategy,
-  GlobalPositionStrategy,
-  Overlay,
-  OverlayPositionBuilder,
-  OverlayRef,
-} from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { DOCUMENT } from '@angular/common';
-import {
-  Directive,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnDestroy,
-  Output,
-  SimpleChanges,
-  TemplateRef,
-  ViewContainerRef,
-  inject,
-} from '@angular/core';
-import { NgOnChangesUtilities } from '@mathstack/app-kit';
-import { Subject, takeUntil } from 'rxjs';
-import { HtmlTooltipConfig } from './config/html-tooltip-config';
-
-@Directive({
-  // eslint-disable-next-line @angular-eslint/directive-selector
-  selector: 'vic-html-tooltip',
-})
-export class HtmlTooltipDirective implements OnChanges, OnDestroy {
-  @Input() template: TemplateRef<HTMLElement>;
-  @Input() config: HtmlTooltipConfig;
-  @Output() backdropClick = new EventEmitter<void>();
-  backdropUnsubscribe: Subject<void> = new Subject<void>();
-  overlayRef: OverlayRef;
-  portalAttached = false;
-  positionStrategy: FlexibleConnectedPositionStrategy | GlobalPositionStrategy;
-  onKeydown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      this.hide();
-    }
-  };
-
-  private viewContainerRef = inject(ViewContainerRef);
-  private overlay = inject(Overlay);
-  private overlayPositionBuilder = inject(OverlayPositionBuilder);
-  private document = inject(DOCUMENT);
-
-  init(): void {
-    if (!this.overlayRef) {
-      this.createOverlayRef();
-    }
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (this.overlayRef && this.config) {
-      this.updateForConfigChanges(changes);
-    } else if (this.config) {
-      this.init();
-    }
-  }
-
-  createOverlayRef(): void {
-    this.backdropUnsubscribe = new Subject<void>();
-
-    this.setPositionStrategy();
-    this.overlayRef = this.overlay.create({
-      ...this.config.size,
-      panelClass: this.config.panelClass,
-      scrollStrategy: this.overlay.scrollStrategies.close(),
-      positionStrategy: this.positionStrategy,
-      hasBackdrop: this.config.hasBackdrop,
-      backdropClass: 'vic-html-tooltip-backdrop',
-    });
-
-    if (this.config.hasBackdrop) {
-      this.subscribeToBackdropClick();
-    }
-    this.updateVisibility();
-  }
-
-  setPositionStrategy(): void {
-    if (!this.config.origin || !this.config.position) {
-      this.positionStrategy = this.overlayPositionBuilder.global();
-      return;
-    }
-
-    this.positionStrategy = this.config.position.getPositionStrategy(
-      this.config.origin.nativeElement,
-      this.overlayPositionBuilder
-    );
-  }
-
-  subscribeToBackdropClick(): void {
-    this.overlayRef
-      .backdropClick()
-      .pipe(takeUntil(this.backdropUnsubscribe))
-      .subscribe(() => {
-        this.backdropClick.emit();
-      });
-  }
-
-  updateVisibility(): void {
-    if (this.overlayRef) {
-      if (this.config.show) {
-        this.show();
-      } else {
-        this.hide();
-      }
-    }
-  }
-
-  subscribeToKeyboardEvents(): void {
-    this.document.addEventListener('keydown', this.onKeydown, true);
-  }
-
-  unsubscribeFromKeyboardEvents(): void {
-    this.document.removeEventListener('keydown', this.onKeydown, true);
-  }
-
-  show(): void {
-    const tooltipPortal = this.getTemplatePortal();
-
-    if (!this.overlayRef.hasAttached()) {
-      this.overlayRef.attach(tooltipPortal);
-      this.subscribeToKeyboardEvents();
-
-      requestAnimationFrame(() => {
-        this.updatePositionStrategy();
-      });
-    } else {
-      this.updatePositionStrategy();
-    }
-  }
-
-  getTemplatePortal(): TemplatePortal {
-    return new TemplatePortal(this.template, this.viewContainerRef);
-  }
-
-  hide(): void {
-    if (this.overlayRef.hasAttached()) {
-      this.overlayRef.detach();
-      this.unsubscribeFromKeyboardEvents();
-    }
-  }
-
-  updateForConfigChanges(changes: SimpleChanges): void {
-    if (this.configChanged(changes, 'position')) {
-      this.updatePositionStrategy();
-    }
-    if (this.configChanged(changes, 'panelClass')) {
-      this.updateClasses(changes['config'].previousValue.panelClass);
-    }
-    if (this.configChanged(changes, 'size')) {
-      this.updateSize();
-    }
-    if (this.configChanged(changes, 'hasBackdrop')) {
-      this.updateBackdrop();
-    }
-    this.updateVisibility();
-  }
-
-  updatePositionStrategy(): void {
-    this.setPositionStrategy();
-    if (this.positionStrategy) {
-      // Only update if we have a valid strategy
-      this.overlayRef.updatePositionStrategy(this.positionStrategy);
-    }
-  }
-
-  updateClasses(prevClass: string[]): void {
-    this.overlayRef.removePanelClass(prevClass);
-    this.overlayRef.addPanelClass(this.config.panelClass);
-  }
-
-  updateSize(): void {
-    this.overlayRef.updateSize(this.config.size);
-  }
-
-  updateBackdrop(): void {
-    this.destroyBackdropSubscription();
-    this.hide();
-    this.destroyOverlay();
-    this.createOverlayRef();
-  }
-
-  configChanged(
-    changes: SimpleChanges,
-    property: keyof HtmlTooltipConfig
-  ): boolean {
-    return NgOnChangesUtilities.inputObjectChanged(changes, 'config', property);
-  }
-
-  ngOnDestroy(): void {
-    this.unsubscribeFromKeyboardEvents();
-    this.destroyBackdropSubscription();
-    this.destroyOverlay();
-  }
-
-  destroyBackdropSubscription(): void {
-    this.backdropUnsubscribe.next();
-    this.backdropUnsubscribe.complete();
-  }
-
-  destroyOverlay(): void {
-    if (this.overlayRef) {
-      this.overlayRef.dispose();
-    }
-  }
-}

package/src/lib/tooltips/html-tooltip/html-tooltip.module.ts

@@ -1,16 +0,0 @@
-import { OverlayModule } from '@angular/cdk/overlay';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { HtmlTooltipDirective } from './html-tooltip.directive';
-import { TooltipTriangleComponent } from './tooltip-triangle/tooltip-triangle.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    OverlayModule,
-    HtmlTooltipDirective,
-    TooltipTriangleComponent,
-  ],
-  exports: [HtmlTooltipDirective, TooltipTriangleComponent],
-})
-export class VicHtmlTooltipModule {}

package/src/lib/tooltips/html-tooltip/tooltip-triangle/tooltip-triangle.component.html

@@ -1,41 +0,0 @@
-<svg
-  width="100%"
-  [attr.height]="height"
-  [style.--width]="width + 'px'"
-  class="vic-tooltip-svg-triangle center"
->
-  <g class="svg-g">
-    <path
-      class="triangle-path"
-      [attr.d]="'M 0,0 ' + (width / 2) + ',' + height + ' ' + width + ',0'"
-    ></path>
-  </g>
-</svg>
-
-<svg
-  width="100%"
-  [attr.height]="height"
-  [style.--width]="width + 'px'"
-  class="vic-tooltip-svg-triangle right"
->
-  <g class="svg-g">
-    <path
-      class="triangle-path"
-      [attr.d]="'M 0,0 ' + (width / 2) + ',' + height + ' ' + (width / 2) + ',0'"
-    ></path>
-  </g>
-</svg>
-
-<svg
-  width="100%"
-  [attr.height]="height"
-  [style.--width]="width + 'px'"
-  class="vic-tooltip-svg-triangle left"
->
-  <g class="svg-g">
-    <path
-      class="triangle-path"
-      [attr.d]="'M 0,0 ' + '0,' + height + ' ' + (width / 2) + ',0'"
-    ></path>
-  </g>
-</svg>

package/src/lib/tooltips/html-tooltip/tooltip-triangle/tooltip-triangle.component.scss

@@ -1,63 +0,0 @@
-.cdk-overlay-container {
-  .position-bottom-center {
-    .vic-tooltip-svg-triangle {
-      &.center {
-        $x-offset: calc(50% - (var(--width) / 2));
-        transform: translate(#{$x-offset}, -2px);
-      }
-
-      &.right {
-        display: none;
-      }
-
-      &.left {
-        display: none;
-      }
-    }
-  }
-  .position-bottom-left {
-    .vic-tooltip-svg-triangle {
-      &.center {
-        display: none;
-      }
-
-      &.right {
-        display: none;
-      }
-
-      &.left {
-        $x-offset: calc(0% - (var(--width) / 2));
-        transform: translate(0, -2px);
-      }
-    }
-  }
-
-  .position-bottom-right {
-    .vic-tooltip-svg-triangle {
-      &.center {
-        display: none;
-      }
-
-      &.right {
-        $x-offset: calc(100% - (var(--width) / 2));
-        transform: translate(#{$x-offset}, -2px);
-      }
-
-      &.left {
-        display: none;
-      }
-    }
-  }
-
-  .vic-tooltip-svg-triangle {
-    display: block;
-    $x-offset: calc(50% - (var(--width) / 2));
-    transform: translate(#{$x-offset}, -2px);
-
-    .triangle-path {
-      stroke: var(--tooltip-triangle-stroke, gray);
-      fill: var(--tooltip-triangle-fill, white);
-      fill-opacity: var(--tooltip-triangle-fill-opacity, 1);
-    }
-  }
-}

package/src/lib/tooltips/html-tooltip/tooltip-triangle/tooltip-triangle.component.ts

@@ -1,19 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  ViewEncapsulation,
-} from '@angular/core';
-
-@Component({
-  selector: 'vic-tooltip-triangle',
-  imports: [],
-  templateUrl: './tooltip-triangle.component.html',
-  styleUrl: './tooltip-triangle.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class TooltipTriangleComponent {
-  @Input() height: number = 12;
-  @Input() width: number = 20;
-}

package/src/lib/tooltips/index.ts

@@ -1,11 +0,0 @@
-export * from './html-tooltip/config/html-tooltip-builder';
-export * from './html-tooltip/config/html-tooltip-config';
-export * from './html-tooltip/config/html-tooltip-options';
-export * from './html-tooltip/config/position/tooltip-position';
-export * from './html-tooltip/config/position/tooltip-position-builder';
-export * from './html-tooltip/config/size/tooltip-size';
-export * from './html-tooltip/config/size/tooltip-size-builder';
-export * from './html-tooltip/config/size/tooltip-size-options';
-export * from './html-tooltip/html-tooltip.directive';
-export * from './html-tooltip/html-tooltip.module';
-export * from './html-tooltip/tooltip-triangle/tooltip-triangle.component';

package/src/lib/tooltips/svg-tooltip/config/svg-tooltip.ts

@@ -1,5 +0,0 @@
-import { Tooltip } from '../../config/tooltip';
-
-export class SvgTooltip extends Tooltip {
-  override type = 'svg' as const;
-}

package/src/lib/xy-background/index.ts

@@ -1,2 +0,0 @@
-export * from './xy-background.component';
-export * from './xy-background.module';

package/src/lib/xy-background/xy-background.component.html

@@ -1,10 +0,0 @@
-@if(chart.scales$ | async; as scales) { @if(scales.x && scales.y) {
-<svg:rect
-  class="vic-xy-background"
-  [attr.x]="scales.x.range()[0]"
-  [attr.y]="scales.y.range()[1]"
-  [attr.width]="scales.x.range()[1] - scales.x.range()[0]"
-  [attr.height]="scales.y.range()[0] - scales.y.range()[1]"
-  [attr.fill]="color"
-></svg:rect>
-} }

package/src/lib/xy-background/xy-background.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { XyChartComponent } from '../charts/xy-chart/xy-chart.component';
-import { XyBackgroundComponent } from './xy-background.component';
-
-describe('XyBackgroundComponent', () => {
-  let component: XyBackgroundComponent;
-  let fixture: ComponentFixture<XyBackgroundComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [XyBackgroundComponent],
-      providers: [XyChartComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(XyBackgroundComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/xy-background/xy-background.component.ts

@@ -1,19 +0,0 @@
-import { AsyncPipe, CommonModule } from '@angular/common';
-import { Component, Input, inject } from '@angular/core';
-import { XyChartComponent } from '../charts/xy-chart/xy-chart.component';
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: '[vic-xy-background]',
-  templateUrl: './xy-background.component.html',
-  styleUrls: ['./xy-background.component.scss'],
-  host: {
-    class: 'vic-xy-background',
-  },
-  imports: [AsyncPipe, CommonModule],
-})
-export class XyBackgroundComponent {
-  @Input() color = 'whitesmoke';
-
-  public chart = inject(XyChartComponent);
-}

package/src/lib/xy-background/xy-background.module.ts

@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core';
-import { XyBackgroundComponent } from './xy-background.component';
-
-@NgModule({
-  imports: [XyBackgroundComponent],
-  exports: [XyBackgroundComponent],
-})
-export class VicXyBackgroundModule {}

package/src/public-api.ts

@@ -1,26 +0,0 @@
-/*
- * Public API Surface of charts
- */
-export * from './lib/axes/index';
-export * from './lib/bars/index';
-export * from './lib/charts/index';
-export * from './lib/core/index';
-export * from './lib/data-dimensions/index';
-export * from './lib/data-export/index';
-export * from './lib/dots/index';
-export * from './lib/events/index';
-export * from './lib/fill-definitions/index';
-export * from './lib/geographies/index';
-export * from './lib/grouped-bars/index';
-export * from './lib/image-download/index';
-export * from './lib/lines/index';
-export * from './lib/map-legend/index';
-export * from './lib/marks/index';
-export * from './lib/point-markers/index';
-export * from './lib/quantitative-rules/index';
-export * from './lib/stacked-area/index';
-export * from './lib/stacked-bars/index';
-export * from './lib/stroke/index';
-export * from './lib/svg-text-wrap/index';
-export * from './lib/tooltips/index';
-export * from './lib/xy-background/index';

package/src/test.ts

@@ -1,15 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js';
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);

package/tsconfig.doc.json

@@ -1,4 +0,0 @@
-{
-  "include": ["src/**/*.ts"],
-  "exclude": ["src/**/*.spec.ts", "src/**/*.cy.ts"]
-}

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "outDir": "../../dist/out-tsc",
-    "module": "esnext",
-    "types": ["cypress", "node"],
-    "sourceMap": false,
-    "paths": {
-      "@mathstack/*": ["dist/*"]
-    }
-  },
-  "include": [
-    "cypress.config.ts",
-    "**/support/*.ts",
-    "**/*.cy.ts",
-    "**/*.cy.js",
-    "**/*.d.ts"
-  ]
-}

package/tsconfig.lib.json

@@ -1,23 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": [],
-    "paths": {
-      "@mathstack/*": ["dist/*"]
-    }
-  },
-  "baseUrl": "./",
-  "exclude": [
-    "cypress/**/*",
-    "cypress.config.ts",
-    "**/*.cy.ts",
-    "**/*.cy.js",
-    "**/*.cy.tsx",
-    "**/*.cy.jsx"
-  ],
-  "include": ["src/**/*.ts"]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": ["jasmine"]
-  },
-  "files": ["src/test.ts"],
-  "include": ["**/*.spec.ts", "**/*.d.ts"]
-}