@mathstack/viz 1.1.5 → 2.1.0

package/src/lib/geographies/events/geographies-events.directive.spec.ts

@@ -0,0 +1,225 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Renderer2 } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { selectAll } from 'd3';
+import { of } from 'rxjs';
+import { EventType } from '../../events';
+import { GEOGRAPHIES } from '../geographies.component';
+import { GeographiesEventsDirective } from './geographies-events.directive';
+
+describe('GeographiesEventsDirective', () => {
+  let directive: GeographiesEventsDirective<any, any, any, any>;
+  let geographiesStub: any;
+
+  beforeEach(() => {
+    geographiesStub = {
+      pathsByLayer$: {
+        pipe: () => ({
+          subscribe: (cb: any) =>
+            cb([[{ nodes: () => [document.createElement('path')] }]]),
+        }),
+      },
+      config: {
+        attributeDataLayer: { getTooltipData: () => ({ foo: 'bar' }) },
+        geojsonPropertiesLayers: [{ getTooltipData: () => ({ foo: 'baz' }) }],
+      },
+      path: {
+        bounds: () => [
+          [0, 0],
+          [10, 20],
+        ],
+      },
+    };
+    TestBed.configureTestingModule({
+      providers: [
+        GeographiesEventsDirective,
+        Renderer2,
+        { provide: GEOGRAPHIES, useValue: geographiesStub },
+      ],
+    });
+    directive = TestBed.inject(GeographiesEventsDirective);
+    directive.geographies = geographiesStub;
+  });
+
+  it('should get elements from pathsByLayer$', (done) => {
+    // Simulate observable
+    directive.geographies.pathsByLayer$ = of(
+      [selectAll([document.createElement('path')]), selectAll([])] // empty selection to test flatMap
+    );
+    directive.getElements().subscribe((els: any) => {
+      expect(Array.isArray(els)).toBeTrue();
+      expect(els[0] instanceof Element).toBeTrue();
+      done();
+    });
+  });
+
+  it('should call initFromElement and run hoverActions on onEnter (Hover)', () => {
+    const el = document.createElement('path');
+    const action = { onStart: jasmine.createSpy('onStart') } as any;
+    directive.hoverActions = [action];
+    (directive as any).isEventAllowed = (type: any) => type === EventType.Hover;
+    spyOn(directive, 'initFromElement').and.callThrough();
+    spyOn(directive, 'setPositionsFromElement');
+    directive.onEnter({} as PointerEvent, el);
+    expect(directive.initFromElement).toHaveBeenCalledWith(el);
+    expect(directive.setPositionsFromElement).toHaveBeenCalled();
+    expect(action.onStart).toHaveBeenCalled();
+  });
+
+  it('should call runActions with hoverMoveActions on onEnter (HoverMove)', () => {
+    const el = document.createElement('path');
+    const action = { initialize: jasmine.createSpy('initialize') } as any;
+    directive.hoverMoveActions = [action];
+    (directive as any).isEventAllowed = (type: any) =>
+      type === EventType.HoverMove;
+    spyOn(directive, 'initFromElement').and.callThrough();
+    directive.onEnter({} as PointerEvent, el);
+    expect(directive.initFromElement).toHaveBeenCalledWith(el);
+    expect(action.initialize).toHaveBeenCalled();
+  });
+
+  it('should call setPositionsFromPointer and run onStart for each hoverMoveAction on onMove', () => {
+    const action = { onStart: jasmine.createSpy('onStart') } as any;
+    directive.hoverMoveActions = [action];
+    (directive as any).isEventAllowed = (type: any) =>
+      type === EventType.HoverMove;
+    spyOn(directive, 'setPositionsFromPointer');
+    directive.onMove({} as PointerEvent, {} as Element);
+    expect(directive.setPositionsFromPointer).toHaveBeenCalled();
+    expect(action.onStart).toHaveBeenCalled();
+  });
+
+  it('should call onEnd for each hoverAction on onLeave (Hover)', () => {
+    const action = { onEnd: jasmine.createSpy('onEnd') } as any;
+    directive.hoverActions = [action];
+    (directive as any).isEventAllowed = (type: any) => type === EventType.Hover;
+    spyOn(directive as any, 'resetDirective');
+    directive.onLeave({} as PointerEvent, {} as Element);
+    expect(action.onEnd).toHaveBeenCalled();
+    expect((directive as any).resetDirective).toHaveBeenCalled();
+  });
+
+  it('should call onEnd for each hoverMoveAction on onLeave (HoverMove)', () => {
+    const action = { onEnd: jasmine.createSpy('onEnd') } as any;
+    directive.hoverMoveActions = [action];
+    (directive as any).isEventAllowed = (type: any) =>
+      type === EventType.HoverMove;
+    spyOn(directive as any, 'resetDirective');
+    directive.onLeave({} as PointerEvent, {} as Element);
+    expect(action.onEnd).toHaveBeenCalled();
+    expect((directive as any).resetDirective).toHaveBeenCalled();
+  });
+
+  it('should call setPositionsFromElement and run clickActions on onClick if not prevented and has Hover', () => {
+    const el = document.createElement('path');
+    const action = { onStart: jasmine.createSpy('onStart') } as any;
+    directive.clickActions = [action];
+    directive.preventAction = {
+      click: false,
+      hover: false,
+      hoverMove: false,
+      input: false,
+    };
+    (directive as any).hasEvent = (type: any) => type === EventType.Hover;
+    spyOn(directive, 'initFromElement').and.callThrough();
+    spyOn(directive, 'setPositionsFromElement');
+    directive.onClick({} as PointerEvent, el);
+    expect(directive.initFromElement).toHaveBeenCalledWith(el);
+    expect(directive.setPositionsFromElement).toHaveBeenCalled();
+    expect(action.onStart).toHaveBeenCalled();
+  });
+
+  it('should call setPositionsFromPointer and run clickActions on onClick if not prevented and no Hover', () => {
+    const el = document.createElement('path');
+    const action = { onStart: jasmine.createSpy('onStart') } as any;
+    directive.clickActions = [action];
+    directive.preventAction = {
+      click: false,
+      hover: false,
+      hoverMove: false,
+      input: false,
+    };
+    (directive as any).hasEvent = () => false;
+    spyOn(directive, 'initFromElement').and.callThrough();
+    spyOn(directive, 'setPositionsFromPointer');
+    directive.onClick({} as PointerEvent, el);
+    expect(directive.initFromElement).toHaveBeenCalledWith(el);
+    expect(directive.setPositionsFromPointer).toHaveBeenCalled();
+    expect(action.onStart).toHaveBeenCalled();
+  });
+
+  it('should run onEnd for each clickAction and resetDirective on onClickRemove if not prevented', () => {
+    const action = { onEnd: jasmine.createSpy('onEnd') } as any;
+    directive.clickActions = [action];
+    directive.preventAction = {
+      click: false,
+      hover: false,
+      hoverMove: false,
+      input: false,
+    };
+    spyOn(directive as any, 'resetDirective');
+    directive.onClickRemove();
+    expect(action.onEnd).toHaveBeenCalled();
+    expect((directive as any).resetDirective).toHaveBeenCalled();
+  });
+
+  it('should call onStart/onEnd for inputEventActions on onInputEvent', () => {
+    const onStart = jasmine.createSpy('onStart');
+    const onEnd = jasmine.createSpy('onEnd');
+    directive.inputEventActions = [{ onStart, onEnd } as any];
+    (directive as any).isEventAllowed = (type: any) => type === EventType.Input;
+    directive.onInputEvent('foo');
+    expect(onStart).toHaveBeenCalledWith(directive, 'foo');
+    directive.onInputEvent(null);
+    expect(onEnd).toHaveBeenCalledWith(directive, null);
+  });
+
+  it('should call select and set path, layer, and bounds in initFromElement', () => {
+    const el = document.createElement('path');
+    el.dataset['layerIndex'] = '0';
+    spyOn<any>(window, 'getComputedStyle').and.returnValue({}); // for d3 select
+    directive.geographies.config.attributeDataLayer = {
+      getTooltipData: () => ({ foo: 'bar' }),
+    };
+    directive.geographies.path = {
+      bounds: () => [
+        [0, 0],
+        [10, 20],
+      ],
+    };
+    directive.initFromElement(el);
+    expect(directive.path).toBe(el as any);
+    expect(directive.bounds).toEqual([
+      [0, 0],
+      [10, 20],
+    ]);
+  });
+
+  it('should set positionX and positionY in setPositionsFromElement', () => {
+    directive.bounds = [
+      [0, 0],
+      [10, 20],
+    ];
+    directive.setPositionsFromElement();
+    expect(directive.positionX).toBe(5);
+    expect(directive.positionY).toBe(10);
+  });
+
+  it('should emit interaction output', () => {
+    spyOn(directive.interactionOutput, 'emit');
+    const output = {
+      geography: {} as any,
+      origin: {} as any,
+      positionX: 1,
+      positionY: 2,
+      type: EventType.Hover,
+      datum: {},
+      color: 'red',
+      values: { id: 1 },
+    };
+    directive.emitInteractionOutput(output as any);
+    expect(directive.interactionOutput.emit).toHaveBeenCalledWith(
+      output as any
+    );
+  });
+});

package/src/lib/geographies/events/geographies-events.directive.ts

@@ -0,0 +1,235 @@
+import { Directive, EventEmitter, inject, Input, Output } from '@angular/core';
+import { select } from 'd3';
+import { Geometry, MultiPolygon, Polygon } from 'geojson';
+import { filter, map, Observable } from 'rxjs';
+import {
+  DEFAULT_TOOLTIP_Y_OFFSET,
+  EventAction,
+  EventsDirective,
+  EventType,
+  HoverMoveAction,
+  InputEventAction,
+  MarksHost,
+  UnlistenFunction,
+} from '../../events';
+import { TooltipPosition } from '../../tooltips';
+import { GeographiesAttributeDataLayer } from '../config/layers/attribute-data-layer/attribute-data-layer';
+import { GeographiesGeojsonPropertiesLayer } from '../config/layers/geojson-properties-layer/geojson-properties-layer';
+import { GeographiesFeature } from '../geographies-feature';
+import { GEOGRAPHIES, GeographiesComponent } from '../geographies.component';
+import { GeographiesInteractionOutput } from './geographies-interaction-output';
+import { GeographiesTooltipPositioner } from './geographies-tooltip-positioner';
+
+export type GeographiesHost<
+  Datum,
+  TGeographiesComponent extends GeographiesComponent<Datum> =
+    GeographiesComponent<Datum>,
+> = MarksHost<GeographiesInteractionOutput<Datum>, TGeographiesComponent>;
+
+@Directive({
+  selector: '[vicGeographiesEvents]',
+})
+export class GeographiesEventsDirective<
+  Datum,
+  TProperties,
+  TGeometry extends Geometry = MultiPolygon | Polygon,
+  TComponent extends GeographiesComponent<Datum, TProperties, TGeometry> =
+    GeographiesComponent<Datum, TProperties, TGeometry>,
+> extends EventsDirective<GeographiesHost<Datum>> {
+  @Input()
+  hoverActions:
+    | EventAction<GeographiesHost<Datum>, GeographiesInteractionOutput<Datum>>[]
+    | null;
+  @Input()
+  hoverMoveActions:
+    | HoverMoveAction<
+        GeographiesHost<Datum>,
+        GeographiesInteractionOutput<Datum>
+      >[]
+    | null;
+  @Input()
+  clickActions:
+    | EventAction<GeographiesHost<Datum>, GeographiesInteractionOutput<Datum>>[]
+    | null;
+  @Input()
+  inputEventActions: InputEventAction<
+    GeographiesHost<Datum>,
+    GeographiesInteractionOutput<Datum>
+  >[];
+  @Output() interactionOutput = new EventEmitter<
+    GeographiesInteractionOutput<Datum>
+  >();
+
+  bounds: [[number, number], [number, number]];
+  layer:
+    | GeographiesAttributeDataLayer<Datum, TProperties, TGeometry>
+    | GeographiesGeojsonPropertiesLayer<TProperties, TGeometry>;
+  path: SVGPathElement;
+
+  public geographies = inject<TComponent>(GEOGRAPHIES);
+
+  get marks(): GeographiesComponent<Datum, TProperties, TGeometry> {
+    return this.geographies;
+  }
+
+  getElements(): Observable<Element[]> {
+    return this.geographies.pathsByLayer$.pipe(
+      filter((layers) => !!layers),
+      map((layers) => layers.flatMap((selections) => selections.nodes()))
+    );
+  }
+
+  setupListeners(elements: Element[]): UnlistenFunction[] {
+    if (this.inputEventActions?.length && this.inputEvent$) {
+      this.events.push(EventType.Input);
+    }
+
+    return this.bindEventListeners(
+      elements,
+      this.buildInteractionListeners({
+        hover: this.hoverActions?.length && {
+          pointerenter: (e, el) => this.onEnter(e, el),
+          pointerleave: (e, el) => this.onLeave(e, el),
+        },
+        hoverMove: this.hoverMoveActions?.length && {
+          pointerenter: (e, el) => this.onEnter(e, el),
+          pointermove: (e, el) => this.onMove(e, el),
+          pointerleave: (e, el) => this.onLeave(e, el),
+        },
+        click: this.clickActions?.length && {
+          click: (e, el) => this.onClick(e, el),
+        },
+      })
+    );
+  }
+
+  onEnter(_: PointerEvent, el: Element): void {
+    this.initFromElement(el);
+
+    if (this.isEventAllowed(EventType.Hover)) {
+      this.setPositionsFromElement();
+      this.runActions(this.hoverActions, (a) => a.onStart(this.asHost()));
+    } else if (this.isEventAllowed(EventType.HoverMove)) {
+      this.runActions(this.hoverMoveActions, (a) => {
+        if (a.initialize) {
+          a.initialize(this.asHost());
+        }
+      });
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onMove(event: PointerEvent, _: Element): void {
+    if (this.isEventAllowed(EventType.HoverMove)) {
+      this.setPositionsFromPointer(event);
+      this.hoverMoveActions.forEach((action) => action.onStart(this.asHost()));
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onLeave(_: PointerEvent, __: Element): void {
+    if (this.isEventAllowed(EventType.Hover)) {
+      this.hoverActions.forEach((action) => action.onEnd(this.asHost()));
+    } else if (this.isEventAllowed(EventType.HoverMove)) {
+      this.hoverMoveActions.forEach((action) => action.onEnd(this.asHost()));
+    }
+    this.resetDirective();
+  }
+
+  onClick(event: PointerEvent, el: Element): void {
+    this.initFromElement(el);
+    if (!this.preventAction.click) {
+      if (this.hasEvent(EventType.Hover)) {
+        this.setPositionsFromElement();
+      } else {
+        this.setPositionsFromPointer(event);
+      }
+      this.runActions(this.clickActions, (a) => a.onStart(this.asHost()));
+    }
+  }
+
+  onClickRemove(): void {
+    if (!this.preventAction.click) {
+      this.runActions(this.clickActions, (a) => a.onEnd(this.asHost()));
+      this.resetDirective();
+    }
+  }
+
+  onInputEvent(inputValue: unknown): void {
+    if (this.isEventAllowed(EventType.Input)) {
+      if (inputValue === null || inputValue === undefined) {
+        this.inputEventActions.forEach((action) =>
+          action.onEnd(this.asHost(), inputValue)
+        );
+      } else {
+        this.inputEventActions.forEach((action) =>
+          action.onStart(this.asHost(), inputValue)
+        );
+      }
+    }
+  }
+
+  initFromElement(el: Element): void {
+    this.path = el as SVGPathElement;
+    const layerIndex = parseFloat(this.path.dataset['layerIndex']);
+    this.layer =
+      layerIndex === 0
+        ? this.geographies.config.attributeDataLayer
+        : this.geographies.config.geojsonPropertiesLayers[layerIndex - 1];
+    const d = select(this.path).datum() as GeographiesFeature<
+      TProperties,
+      TGeometry
+    >;
+    this.bounds = this.geographies.path.bounds(d);
+  }
+
+  setPositionsFromElement(): void {
+    this.positionX = (this.bounds[1][0] - this.bounds[0][0]) / 2;
+    this.positionY = (this.bounds[1][1] - this.bounds[0][1]) / 2;
+  }
+
+  getInteractionOutput(type: EventType): GeographiesInteractionOutput<Datum> {
+    const tooltipData = this.layer.getTooltipData(this.path);
+    const position = new GeographiesTooltipPositioner({
+      x: this.positionX,
+      y: this.positionY,
+    });
+
+    return {
+      ...tooltipData,
+      origin: this.path,
+      anchor: {
+        x: this.positionX,
+        y: this.positionY,
+      },
+      defaultPosition: position.fromAnchor({
+        x: 0,
+        y: DEFAULT_TOOLTIP_Y_OFFSET,
+      }),
+      fromAnchor: (offset?: Partial<{ x: number; y: number }>) => {
+        return position.fromAnchor({
+          x: offset?.x ?? 0,
+          y: offset?.y ?? DEFAULT_TOOLTIP_Y_OFFSET,
+        });
+      },
+      customPosition: (positions: TooltipPosition[]) => {
+        return position.customPosition(positions);
+      },
+      type,
+    };
+  }
+
+  emitInteractionOutput(
+    output: GeographiesInteractionOutput<Datum> | null
+  ): void {
+    this.interactionOutput.emit(output);
+  }
+
+  private resetDirective(): void {
+    this.path = undefined;
+    this.bounds = undefined;
+    this.positionX = undefined;
+    this.positionY = undefined;
+    this.layer = undefined;
+  }
+}

package/src/lib/geographies/events/geographies-interaction-output.ts

@@ -0,0 +1,17 @@
+import { InteractionOutput } from '../../events/interaction-output';
+import { HtmlTooltipCdkManagedPosition } from '../../tooltips';
+import { GeographiesTooltipDatum } from '../config/layers/geographies-layer/geographies-layer';
+
+export interface GeographiesInteractionOutput<Datum>
+  extends InteractionOutput, GeographiesTooltipDatum<Datum> {
+  /**
+   * A method that positions the tooltip with a user specified offset from the tooltip's anchor point.
+   *
+   * @param offset - Optional offset from the anchor's x and y position.
+   * If not provided, defaults to { x: 0, y: 0 }.
+   * If provided, the x value is added to the anchor's x position (moves tooltip right) and the y value is subtracted from the anchor's y position (moves tooltip up).
+   */
+  fromAnchor: (
+    offset?: Partial<{ x: number; y: number }>
+  ) => HtmlTooltipCdkManagedPosition;
+}

package/src/lib/geographies/events/geographies-tooltip-positioner.ts

@@ -0,0 +1,23 @@
+import { TooltipPositioner } from '../../events/tooltip-positioner';
+import { HtmlTooltipCdkManagedPosition } from '../../tooltips';
+import { TooltipPositionBuilder } from '../../tooltips/html-tooltip/config/position/tooltip-position-builder';
+
+const DEFAULT_POSITIONS = [
+  new TooltipPositionBuilder().fromTopLeft().attachBottomCenter().getPosition(),
+  new TooltipPositionBuilder().fromTopLeft().attachBottomLeft().getPosition(),
+  new TooltipPositionBuilder().fromTopLeft().attachBottomRight().getPosition(),
+];
+export class GeographiesTooltipPositioner extends TooltipPositioner {
+  constructor(private anchor: { x: number; y: number }) {
+    super();
+  }
+
+  fromAnchor(offset: { x: number; y: number }): HtmlTooltipCdkManagedPosition {
+    const positionsWithOffsets = new TooltipPositionBuilder().applyOffsets(
+      DEFAULT_POSITIONS,
+      this.anchor.x + offset.x,
+      this.anchor.y - offset.y
+    );
+    return new HtmlTooltipCdkManagedPosition(positionsWithOffsets);
+  }
+}

package/src/lib/geographies/geographies-feature.ts

@@ -0,0 +1,16 @@
+/**
+ * A utility type that represents a GeoJson feature with a properties object of type TProperties and a geometry object of type TGeometry.
+ */
+
+import {
+  Feature,
+  GeoJsonProperties,
+  Geometry,
+  MultiPolygon,
+  Polygon,
+} from 'geojson';
+
+export type GeographiesFeature<
+  TProperties extends GeoJsonProperties = GeoJsonProperties,
+  TGeometry extends Geometry = MultiPolygon | Polygon,
+> = Feature<TGeometry, TProperties>;

package/src/lib/geographies/geographies.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/lib/geographies/geographies.component.spec.ts

@@ -0,0 +1,148 @@
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MapChartComponent } from '../charts/map-chart/map-chart.component';
+import { VicGeographiesConfigBuilder } from './config/geographies-builder';
+import { GeographiesComponent } from './geographies.component';
+
+type Datum = { value: number; state: string };
+
+describe('GeographiesComponent', () => {
+  let component: GeographiesComponent<any, any, any>;
+  let fixture: ComponentFixture<GeographiesComponent<any, any, any>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      imports: [GeographiesComponent],
+      providers: [MapChartComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GeographiesComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('initFromConfig()', () => {
+    beforeEach(() => {
+      spyOn(component, 'setChartScalesFromRanges');
+      spyOn(component, 'updateChartAttributeProperties');
+      component.config = new VicGeographiesConfigBuilder<
+        Datum,
+        { name: string }
+      >()
+        .boundary('boundary' as any)
+        .featureIndexAccessor((d) => d.properties.name)
+        .attributeDataLayer((layer) =>
+          layer
+            .equalValueRangesBins((dimension) =>
+              dimension.valueAccessor((d) => d.value).numBins(5)
+            )
+            .geographyIndexAccessor((d) => d.state)
+            .data([
+              { value: 1, state: 'AL' },
+              { value: 2, state: 'AK' },
+              { value: 3, state: 'AZ' },
+              { value: 4, state: 'CA' },
+              { value: 5, state: 'CO' },
+              { value: 6, state: 'CO' },
+            ])
+        )
+        .getConfig();
+    });
+    it('calls setPropertiesFromRanges once', () => {
+      component.initFromConfig();
+      expect(component.setChartScalesFromRanges).toHaveBeenCalledTimes(1);
+    });
+    it('calls updateChartAttributeProperties once', () => {
+      component.initFromConfig();
+      expect(component.updateChartAttributeProperties).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setPropertiesFromRanges()', () => {
+    beforeEach(() => {
+      spyOn(component, 'setProjection');
+      spyOn(component, 'setPath');
+    });
+    it('calls setProjection once', () => {
+      component.setChartScalesFromRanges();
+      expect(component.setProjection).toHaveBeenCalledTimes(1);
+    });
+    it('calls setPath once', () => {
+      component.setChartScalesFromRanges();
+      expect(component.setPath).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('updateChartAttributeProperties', () => {
+    beforeEach(() => {
+      component.chart = {
+        updateAttributeProperties: jasmine.createSpy(
+          'updateAttributeProperties'
+        ),
+      } as any;
+      component.config = new VicGeographiesConfigBuilder<
+        Datum,
+        { name: string }
+      >()
+        .boundary('boundary' as any)
+        .featureIndexAccessor((d) => d.properties.name)
+        .attributeDataLayer((layer) =>
+          layer
+            .equalValueRangesBins((dimension) =>
+              dimension
+                .valueAccessor((d) => d.value)
+                .numBins(5)
+                .nullColor('red')
+            )
+            .geographyIndexAccessor((d) => d.state)
+            .data([
+              { value: 1, state: 'AL' },
+              { value: 2, state: 'AK' },
+              { value: 3, state: 'AZ' },
+              { value: 4, state: 'CA' },
+              { value: 5, state: 'CO' },
+              { value: 6, state: 'CO' },
+            ])
+        )
+        .getConfig();
+      spyOn(
+        component.config.attributeDataLayer.attributeDimension,
+        'getScale'
+      ).and.returnValue('attribute data scale');
+    });
+    it('calls getScale once', () => {
+      component.updateChartAttributeProperties();
+      expect(
+        component.config.attributeDataLayer.attributeDimension.getScale
+      ).toHaveBeenCalledOnceWith();
+    });
+    it('calls updateAttributeProperties once with the correct value', () => {
+      component.updateChartAttributeProperties();
+      expect(
+        component.chart.updateAttributeProperties
+      ).toHaveBeenCalledOnceWith({
+        scale: 'attribute data scale' as any,
+        config: component.config.attributeDataLayer.attributeDimension,
+      });
+    });
+  });
+
+  describe('drawMarks', () => {
+    beforeEach(() => {
+      spyOn(component, 'drawMap');
+      spyOn(component, 'updateGeographyElements');
+      component.chart.config = {
+        transitionDuration: 200,
+      } as any;
+    });
+    it('calls drawMap with the correct value', () => {
+      component.drawMarks();
+      expect(component.drawMap).toHaveBeenCalledWith(200);
+    });
+    it('calls updateGeographyElements with the correct value', () => {
+      component.drawMarks();
+      expect(component.updateGeographyElements).toHaveBeenCalledTimes(1);
+    });
+  });
+});