@mathstack/viz 2.1.0 → 2.2.0

package/src/lib/dots/dots.cy.ts

@@ -1,594 +0,0 @@
-/* eslint-disable @angular-eslint/prefer-standalone */
-// ***********************************************************
-// Set up Lines component -- can use with Date or numeric values for x axis
-
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import {
-  ChartConfig,
-  DotsConfig,
-  DotsHost,
-  DotsHoverMoveEmitTooltipData,
-  DotsInteractionOutput,
-  HoverMoveAction,
-  HtmlTooltipConfig,
-  VicChartConfigBuilder,
-  VicChartModule,
-  VicDotsConfigBuilder,
-  VicDotsModule,
-  VicHtmlTooltipConfigBuilder,
-  VicHtmlTooltipModule,
-  VicXOrdinalAxisConfig,
-  VicXOrdinalAxisConfigBuilder,
-  VicXQuantitativeAxisConfig,
-  VicXQuantitativeAxisConfigBuilder,
-  VicXyAxisModule,
-  VicYOrdinalAxisConfig,
-  VicYOrdinalAxisConfigBuilder,
-  VicYQuantitativeAxisConfig,
-  VicYQuantitativeAxisConfigBuilder,
-} from '@mathstack/viz';
-import 'cypress-real-events';
-import { beforeEach, cy, describe, expect, it } from 'local-cypress';
-import { cloneDeep } from 'lodash-es';
-import { BehaviorSubject } from 'rxjs';
-import {
-  countryFactsData,
-  CountryFactsDatum,
-} from '../testing/data/country-area-continent';
-
-// Cypress will get the tick elements before d3 has set the text value of the elements,
-// because d3 creates the elements and sets the text value in a transition).
-// This wait time is necessary to ensure that the text value of the tick elements has been set by d3.
-const axisTickTextWaitTime = 1000;
-
-const margin = { top: 120, right: 80, bottom: 40, left: 80 };
-const chartHeight = 400;
-const chartWidth = 600;
-const data = countryFactsData;
-
-const dotGSelector = '.vic-dots-group';
-const dotCircleSelector = `.vic-dots-dot`;
-
-// ***********************************************************
-// Dots Component with Continuous Quantitative X and Y Axes
-// ***********************************************************
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'app-test-dots-quant-quant',
-  template: `
-    <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"
-          vicDotsEvents
-          [hoverMoveActions]="hoverMoveActions"
-          (interactionOutput)="updateTooltipForNewOutput($event)"
-        >
-          <vic-html-tooltip
-            [config]="tooltipConfig$ | async"
-            [template]="htmlTooltip"
-          ></vic-html-tooltip>
-        </svg:g>
-      </ng-container>
-    </vic-xy-chart>
-
-    <ng-template #htmlTooltip>
-      @if (tooltipData$ | async; as tooltipData) {
-        <div
-          [style.--color]="tooltipData.color"
-          class="dots-example-tooltip-container"
-        >
-          <p class="tooltip-label country">
-            {{ tooltipData.datum.country }}
-          </p>
-          <p class="tooltip-label fill">
-            <span class="value-label">Fill Value</span>
-            {{ tooltipData.values.fill }}
-          </p>
-          <p class="tooltip-label x">
-            <span class="value-label">X Value</span>
-            {{ tooltipData.values.x }}
-          </p>
-          <p class="tooltip-label y">
-            <span class="value-label">Y Value</span>
-            {{ tooltipData.values.y }}
-          </p>
-          <p class="tooltip-label radius">
-            <span class="value-label">Radius Value</span>
-            {{ tooltipData.values.radius }}
-          </p>
-        </div>
-      }
-    </ng-template>
-  `,
-  styles: ['.tooltip-label { font-size: 12px; }'],
-  imports: [
-    VicChartModule,
-    VicDotsModule,
-    VicXyAxisModule,
-    VicHtmlTooltipModule,
-    CommonModule,
-  ],
-})
-class TestDotsQuantQuantComponent<Datum> {
-  @Input() dotsConfig: DotsConfig<Datum>;
-  @Input() yQuantitativeAxisConfig: VicYQuantitativeAxisConfig<number>;
-  @Input() xQuantitativeAxisConfig: VicXQuantitativeAxisConfig<number>;
-  tooltipConfig: BehaviorSubject<HtmlTooltipConfig> =
-    new BehaviorSubject<HtmlTooltipConfig>(null);
-  tooltipConfig$ = this.tooltipConfig.asObservable();
-  tooltipData: BehaviorSubject<DotsInteractionOutput<Datum>> =
-    new BehaviorSubject<DotsInteractionOutput<Datum>>(null);
-  tooltipData$ = this.tooltipData.asObservable();
-  hoverMoveActions: HoverMoveAction<DotsHost<Datum>>[] = [
-    new DotsHoverMoveEmitTooltipData(),
-  ];
-  chartConfig: ChartConfig = new VicChartConfigBuilder()
-    .maxHeight(chartHeight)
-    .maxWidth(chartWidth)
-    .margin(margin)
-    .scalingStrategy('responsive-width')
-    .getConfig();
-
-  updateTooltipForNewOutput(data: DotsInteractionOutput<Datum>): void {
-    this.updateTooltipData(data);
-    this.updateTooltipConfig(data);
-  }
-
-  updateTooltipData(data: DotsInteractionOutput<Datum>): void {
-    this.tooltipData.next(data);
-  }
-
-  updateTooltipConfig(data: DotsInteractionOutput<Datum>): void {
-    const config = new VicHtmlTooltipConfigBuilder()
-      .positionFromOutput(data)
-      .show(!!data)
-      .getConfig();
-    this.tooltipConfig.next(config);
-  }
-}
-
-function mountDotsXQuantYQuantComponent(
-  dotsConfig: DotsConfig<CountryFactsDatum>
-): void {
-  const xAxisConfig = new VicXQuantitativeAxisConfigBuilder<number>()
-    .ticks((ticks) => ticks.format('.0f').count(5))
-    .getConfig();
-  const yAxisConfig =
-    new VicYQuantitativeAxisConfigBuilder<number>().getConfig();
-  cy.mount(TestDotsQuantQuantComponent<CountryFactsDatum>, {
-    componentProperties: {
-      dotsConfig: dotsConfig,
-      xQuantitativeAxisConfig: xAxisConfig,
-      yQuantitativeAxisConfig: yAxisConfig,
-    },
-  });
-}
-
-// ***********************************************************
-// Dots Component with Ordinal Y and Continuous X Axes
-// ***********************************************************
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'app-test-dots-ordinal-quant',
-  template: `
-    <vic-xy-chart [config]="chartConfig">
-      <ng-container svg-elements>
-        <svg:g
-          vic-x-quantitative-axis
-          [config]="xQuantitativeAxisConfig"
-        ></svg:g>
-        <svg:g vic-y-ordinal-axis [config]="yOrdinalAxisConfig"></svg:g>
-        <svg:g vic-primary-marks-dots [config]="dotsConfig"></svg:g>
-      </ng-container>
-    </vic-xy-chart>
-  `,
-  styles: ['.tooltip-label { font-size: 12px; }'],
-  imports: [
-    VicChartModule,
-    VicDotsModule,
-    VicXyAxisModule,
-    VicHtmlTooltipModule,
-  ],
-})
-class TestDotsXQuantYOrdinalComponent<Datum> {
-  @Input() dotsConfig: DotsConfig<Datum>;
-  @Input() yOrdinalAxisConfig: VicYOrdinalAxisConfig<string>;
-  @Input() xQuantitativeAxisConfig: VicXQuantitativeAxisConfig<number>;
-  margin = margin;
-  chartHeight = chartHeight;
-  chartWidth = chartWidth;
-  chartConfig: ChartConfig = new VicChartConfigBuilder()
-    .maxHeight(chartHeight)
-    .maxWidth(chartWidth)
-    .margin(margin)
-    .scalingStrategy('responsive-width')
-    .getConfig();
-}
-
-function mountDotsXQuantYOrdinalComponent(
-  dotsConfig: DotsConfig<CountryFactsDatum>
-): void {
-  const xAxisConfig = new VicXQuantitativeAxisConfigBuilder<number>()
-    .ticks((ticks) => ticks.format('.0f').count(5))
-    .getConfig();
-  const yAxisConfig = new VicYOrdinalAxisConfigBuilder<string>().getConfig();
-  cy.mount(TestDotsXQuantYOrdinalComponent<CountryFactsDatum>, {
-    componentProperties: {
-      dotsConfig: dotsConfig,
-      xQuantitativeAxisConfig: xAxisConfig,
-      yOrdinalAxisConfig: yAxisConfig,
-    },
-  });
-}
-
-// ***********************************************************
-// Dots Component with Ordinal X and Continuous Y Axes
-// ***********************************************************
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'app-test-lines',
-  template: `
-    <vic-xy-chart [config]="chartConfig">
-      <ng-container svg-elements>
-        <svg:g
-          vic-y-quantitative-axis
-          [config]="yQuantitativeAxisConfig"
-        ></svg:g>
-        <svg:g vic-x-ordinal-axis [config]="xOrdinalAxisConfig"></svg:g>
-        <svg:g vic-primary-marks-dots [config]="dotsConfig"></svg:g>
-      </ng-container>
-    </vic-xy-chart>
-  `,
-  styles: ['.tooltip-label { font-size: 12px; }'],
-  imports: [
-    VicChartModule,
-    VicDotsModule,
-    VicXyAxisModule,
-    VicHtmlTooltipModule,
-  ],
-})
-class TestDotsXOrdinalYQuantComponent<Datum> {
-  @Input() dotsConfig: DotsConfig<Datum>;
-  @Input() xOrdinalAxisConfig: VicXOrdinalAxisConfig<string>;
-  @Input() yQuantitativeAxisConfig: VicYQuantitativeAxisConfig<number>;
-  chartConfig: ChartConfig = new VicChartConfigBuilder()
-    .maxHeight(chartHeight)
-    .maxWidth(chartWidth)
-    .margin(margin)
-    .scalingStrategy('responsive-width')
-    .getConfig();
-}
-
-function mountDotsXOrdinalYQuantComponent(
-  dotsConfig: DotsConfig<CountryFactsDatum>
-): void {
-  const yAxisConfig = new VicYQuantitativeAxisConfigBuilder<number>()
-    .ticks((ticks) => ticks.format('.0f').count(5))
-    .getConfig();
-  const xAxisConfig = new VicXOrdinalAxisConfigBuilder<string>().getConfig();
-  cy.mount(TestDotsXOrdinalYQuantComponent<CountryFactsDatum>, {
-    componentProperties: {
-      dotsConfig: dotsConfig,
-      yQuantitativeAxisConfig: yAxisConfig,
-      xOrdinalAxisConfig: xAxisConfig,
-    },
-  });
-}
-
-// ***********************************************************
-// Creating the dots - Quantitative - Quantitative Chart Axes
-// ***********************************************************
-describe('it creates one dot for each valid value in the data with the expected color and radius', () => {
-  const colors = ['red', 'blue', 'green', 'orange', 'purple'];
-  beforeEach(() => {
-    const dotsConfig = new VicDotsConfigBuilder<CountryFactsDatum>()
-      .data(data)
-      .datumClass((d) => d.country)
-      .xNumeric((x) => x.valueAccessor((d) => d.population))
-      .yNumeric((y) => y.valueAccessor((d) => d.gdpPerCapita))
-      .fillCategorical((fill) =>
-        fill.valueAccessor((d) => d.continent).range(colors)
-      )
-      .radiusNumeric((radius) =>
-        radius.valueAccessor((d) => d.popGrowth).range([2, 10])
-      )
-      .getConfig();
-    mountDotsXQuantYQuantComponent(dotsConfig);
-  });
-  it('should draw one dot for each valid value in the data', () => {
-    const dotKeys = [];
-    cy.get(dotGSelector)
-      .each((dotG) => {
-        const country = dotG.attr('class').split(' ');
-        country.shift();
-        dotKeys.push(country.join(' ').trim());
-      })
-      .then(() => {
-        expect(dotKeys).to.have.members([
-          ...new Set(data.map((d) => d.country)),
-        ]);
-      });
-  });
-  it('should draw dots with the expected color', () => {
-    const continents = [...new Set(data.map((d) => d.continent))];
-    cy.get(dotGSelector).each((dotG) => {
-      const classes = dotG.attr('class').split(' ');
-      classes.shift();
-      const country = classes.join(' ').trim();
-      const continent = data.find((d) => d.country === country).continent;
-      const expectedFill = colors[continents.indexOf(continent)];
-      expect(dotG.children().first().attr('fill')).to.equal(expectedFill);
-    });
-  });
-  it('should draw dots with the expected radius', () => {
-    const dotRadii = [];
-    cy.get(dotGSelector)
-      .each((dotG) => {
-        const classes = dotG.attr('class').split(' ');
-        classes.shift();
-        const country = classes.join(' ');
-        dotRadii.push({ country, r: dotG.children().first().attr('r') });
-      })
-      .then(() => {
-        const countriesByRadius = dotRadii
-          .slice()
-          .sort((a, b) => a.r - b.r)
-          .map((d) => d.country);
-        const countriesByPopGrowth = data
-          .slice()
-          .sort((a, b) => a.popGrowth - b.popGrowth)
-          .map((d) => d.country);
-        expect(countriesByRadius).to.deep.equal(countriesByPopGrowth);
-      });
-  });
-});
-
-// ***********************************************************
-// Positional data with negative values
-// ***********************************************************
-describe('it handles negative y-dimension values', () => {
-  const colors = ['red', 'blue', 'green', 'orange', 'purple'];
-  beforeEach(() => {
-    const dataWithNegatives = cloneDeep(data);
-    dataWithNegatives[0].gdpPerCapita = -10000;
-    const dotsConfig = new VicDotsConfigBuilder<CountryFactsDatum>()
-      .data(dataWithNegatives)
-      .datumClass((d) => d.country)
-      .xNumeric((x) => x.valueAccessor((d) => d.population))
-      .yNumeric((y) => y.valueAccessor((d) => d.gdpPerCapita))
-      .fillCategorical((fill) =>
-        fill.valueAccessor((d) => d.continent).range(colors)
-      )
-      .radiusNumeric((radius) =>
-        radius.valueAccessor((d) => d.popGrowth).range([2, 10])
-      )
-      .getConfig();
-    mountDotsXQuantYQuantComponent(dotsConfig);
-  });
-  it('should draw one dot for each valid value in the data', () => {
-    const dotKeys = [];
-    cy.get(dotGSelector)
-      .each((dotG) => {
-        const country = dotG.attr('class').split(' ');
-        country.shift();
-        dotKeys.push(country.join(' ').trim());
-      })
-      .then(() => {
-        expect(dotKeys).to.have.members([
-          ...new Set(data.map((d) => d.country)),
-        ]);
-      });
-  });
-});
-
-describe('it handles negative x-dimension values', () => {
-  const colors = ['red', 'blue', 'green', 'orange', 'purple'];
-  beforeEach(() => {
-    const dataWithNegatives = cloneDeep(data);
-    dataWithNegatives[0].gdpPerCapita = -10000;
-    const dotsConfig = new VicDotsConfigBuilder<CountryFactsDatum>()
-      .data(dataWithNegatives)
-      .datumClass((d) => d.country)
-      .xNumeric((x) => x.valueAccessor((d) => d.gdpPerCapita))
-      .yNumeric((y) => y.valueAccessor((d) => d.population))
-      .fillCategorical((fill) =>
-        fill.valueAccessor((d) => d.continent).range(colors)
-      )
-      .radiusNumeric((radius) =>
-        radius.valueAccessor((d) => d.popGrowth).range([2, 10])
-      )
-      .getConfig();
-    mountDotsXQuantYQuantComponent(dotsConfig);
-  });
-  it('should draw one dot for each valid value in the data', () => {
-    const dotKeys = [];
-    cy.get(dotGSelector)
-      .each((dotG) => {
-        const country = dotG.attr('class').split(' ');
-        country.shift();
-        dotKeys.push(country.join(' ').trim());
-      })
-      .then(() => {
-        expect(dotKeys).to.have.members([
-          ...new Set(data.map((d) => d.country)),
-        ]);
-      });
-  });
-});
-
-// ***********************************************************
-// Tooltips
-// ***********************************************************
-describe('displays a tooltips with correct data on each dot', () => {
-  const colors = ['red', 'blue', 'green', 'orange', 'purple'];
-  beforeEach(() => {
-    const dotsConfig = new VicDotsConfigBuilder<CountryFactsDatum>()
-      .data(data)
-      .datumClass((d) => d.country)
-      .xNumeric((x) => x.valueAccessor((d) => d.population))
-      .yNumeric((y) => y.valueAccessor((d) => d.gdpPerCapita))
-      .fillCategorical((fill) =>
-        fill.valueAccessor((d) => d.continent).range(colors)
-      )
-      .radiusNumeric((radius) =>
-        radius.valueAccessor((d) => d.popGrowth).range([4, 16])
-      )
-      .getConfig();
-    mountDotsXQuantYQuantComponent(dotsConfig);
-    cy.wait(1000);
-  });
-  data.forEach((datum) => {
-    describe(`when hovering over the dot for ${datum.country}`, () => {
-      beforeEach(() => {
-        cy.get(
-          `${dotGSelector}.${datum.country.split(' ')[0]} ${dotCircleSelector}`
-        ).realHoverAndWait();
-      });
-      it('should display a tooltip with the correct data', () => {
-        cy.get('.vic-html-tooltip-overlay').should('exist');
-        cy.get('.tooltip-label.country').should('contain', datum.country);
-        cy.get('.tooltip-label.fill').should('contain', datum.continent);
-        cy.get('.tooltip-label.x').should('contain', datum.population);
-        cy.get('.tooltip-label.y').should('contain', datum.gdpPerCapita);
-        cy.get('.tooltip-label.radius').should('contain', datum.popGrowth);
-      });
-      it('hides the tooltip on Esc button press', () => {
-        cy.get('body').focus().type('{esc}');
-        cy.get('.vic-html-tooltip-overlay').should('not.exist');
-      });
-    });
-  });
-});
-
-// ***********************************************************
-// Creating the dots - Quantitative - Ordinal Chart Axes
-// ***********************************************************
-describe('it creates one dot for each valid value in the data with the expected color and radius', () => {
-  beforeEach(() => {
-    const dotsConfig = new VicDotsConfigBuilder<CountryFactsDatum>()
-      .data(data)
-      .datumClass((d) => d.country)
-      .xNumeric((x) => x.valueAccessor((d) => d.population))
-      .yOrdinal((y) => y.valueAccessor((d) => d.continent))
-      .fillNumeric((fill) =>
-        fill.valueAccessor((d) => d.gdpPerCapita).range(['white', 'dodgerblue'])
-      )
-      .radiusNumeric((radius) =>
-        radius.valueAccessor((d) => d.popGrowth).range([2, 10])
-      )
-      .stroke((stroke) => stroke.color('black').width(1))
-      .datumClass((d) => d.country)
-      .getConfig();
-    mountDotsXQuantYOrdinalComponent(dotsConfig);
-    cy.wait(axisTickTextWaitTime);
-  });
-  it('should draw one dot for each valid value in the data', () => {
-    const dotKeys = [];
-    cy.get(dotGSelector)
-      .each((dotG) => {
-        const country = dotG.attr('class').split(' ');
-        country.shift();
-        dotKeys.push(country.join(' ').trim());
-      })
-      .then(() => {
-        expect(dotKeys).to.have.members([
-          ...new Set(data.map((d) => d.country)),
-        ]);
-      });
-  });
-  it('should draw dots with the expected cy value based on y value', () => {
-    cy.get('.vic-dots-group').each((dotG) => {
-      const country = dotG.attr('class').split(' ');
-      country.shift();
-      const continent = data.find(
-        (d) => d.country === country.join(' ')
-      ).continent;
-      cy.get('.vic-axis-y-ordinal .tick').each((tick) => {
-        cy.wrap(tick)
-          .find('text')
-          .then((text) => {
-            if (text.text() === continent) {
-              const y = +tick.attr('transform').split(',')[1].split(')')[0];
-              const expectedCy = +dotG
-                .attr('transform')
-                .split(',')[1]
-                .split(')')[0];
-              expect(expectedCy).to.be.closeTo(y, 1);
-            }
-          });
-      });
-    });
-  });
-});
-
-// ***********************************************************
-// Creating the dots - Ordinal - Quantitative Chart Axes
-// ***********************************************************
-describe('it creates one dot for each valid value in the data with the expected color and radius', () => {
-  beforeEach(() => {
-    const dotsConfig = new VicDotsConfigBuilder<CountryFactsDatum>()
-      .data(data)
-      .datumClass((d) => d.country)
-      .yNumeric((x) => x.valueAccessor((d) => d.population))
-      .xOrdinal((y) => y.valueAccessor((d) => d.continent))
-      .fillNumeric((fill) =>
-        fill.valueAccessor((d) => d.gdpPerCapita).range(['white', 'dodgerblue'])
-      )
-      .radiusNumeric((radius) =>
-        radius.valueAccessor((d) => d.popGrowth).range([2, 10])
-      )
-      .stroke((stroke) => stroke.color('black').width(1))
-      .datumClass((d) => d.country)
-      .getConfig();
-    mountDotsXOrdinalYQuantComponent(dotsConfig);
-    cy.wait(axisTickTextWaitTime);
-  });
-  it('should draw one dot for each valid value in the data', () => {
-    const dotKeys = [];
-    cy.get(dotGSelector)
-      .each((dotG) => {
-        const country = dotG.attr('class').split(' ');
-        country.shift();
-        dotKeys.push(country.join(' ').trim());
-      })
-      .then(() => {
-        expect(dotKeys).to.have.members([
-          ...new Set(data.map((d) => d.country)),
-        ]);
-      });
-  });
-  it('should draw dots with the expected cx value based on x value', () => {
-    cy.get('.vic-dots-group').each((dotG) => {
-      const country = dotG.attr('class').split(' ');
-      country.shift();
-      const continent = data.find(
-        (d) => d.country === country.join(' ')
-      ).continent;
-      cy.get('.vic-axis-x-ordinal .tick').each((tick) => {
-        cy.wrap(tick)
-          .find('text')
-          .then((text) => {
-            if (text.text() === continent) {
-              const x = +tick.attr('transform').split(',')[0].split('(')[1];
-              const expectedCx = +dotG
-                .attr('transform')
-                .split(',')[0]
-                .split('(')[1];
-              expect(expectedCx).to.be.closeTo(x, 1);
-            }
-          });
-      });
-    });
-  });
-});

package/src/lib/dots/dots.module.ts

@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core';
-import { DotsComponent } from './dots.component';
-import { DotsEventsDirective } from './events/dots-events.directive';
-
-@NgModule({
-  imports: [DotsComponent, DotsEventsDirective],
-  exports: [DotsComponent, DotsEventsDirective],
-})
-export class VicDotsModule {}

package/src/lib/dots/events/actions/dots-hover-actions.ts

@@ -1,19 +0,0 @@
-import { EventAction } from '../../../events';
-import { DotsHost } from '../dots-events.directive';
-
-export class DotsHoverDefaultStyles<Datum> implements EventAction<
-  DotsHost<Datum>
-> {
-  onStart(host: DotsHost<Datum>): void {
-    host.marks.dotGroups
-      .filter((d) => d.index !== host.getDotDatum().index)
-      .selectAll<SVGCircleElement, number>('circle')
-      .style('fill', '#ccc');
-  }
-
-  onEnd(host: DotsHost<Datum>): void {
-    host.marks.dotGroups
-      .selectAll<SVGCircleElement, number>('circle')
-      .style('fill', null);
-  }
-}

package/src/lib/dots/events/actions/dots-hover-move-actions.ts

@@ -1,38 +0,0 @@
-import { EventType, HoverMoveAction } from '../../../events';
-import { DotsHost } from '../dots-events.directive';
-
-export class DotsHoverMoveDefaultStyles<Datum> implements HoverMoveAction<
-  DotsHost<Datum>
-> {
-  onStart(host: DotsHost<Datum>): void {
-    host.marks.dotGroups
-      .filter((d) => d.index !== host.getDotDatum().index)
-      .selectAll<SVGCircleElement, number>('circle')
-      .style('fill', '#ccc');
-
-    host.marks.dotGroups
-      .filter((d) => d.index === host.getDotDatum().index)
-      .selectAll<SVGCircleElement, number>('circle')
-      .select((d, i, nodes) => nodes[i].parentElement)
-      .raise();
-  }
-
-  onEnd(host: DotsHost<Datum>): void {
-    host.marks.dotGroups
-      .selectAll<SVGCircleElement, number>('circle')
-      .style('fill', null);
-  }
-}
-
-export class DotsHoverMoveEmitTooltipData<Datum> implements HoverMoveAction<
-  DotsHost<Datum>
-> {
-  onStart(host: DotsHost<Datum>): void {
-    const output = host.getInteractionOutput(EventType.HoverMove);
-    host.emitInteractionOutput(output);
-  }
-
-  onEnd(host: DotsHost<Datum>): void {
-    host.emitInteractionOutput(null);
-  }
-}