@mathstack/viz 2.1.0 → 2.2.0

package/src/lib/axes/quantitative/quantitative-axis.ts

@@ -1,191 +0,0 @@
-import { AxisTimeInterval, format, utcFormat } from 'd3';
-import { AbstractConstructor } from '../../core/common-behaviors/constructor';
-import { ContinuousValue } from '../../core/types/values';
-import { XyAxis } from '../base/xy-axis-base';
-import { QuantitativeTicks } from '../ticks/ticks';
-import { VicQuantitativeAxisConfig as QuantitativeAxisConfig } from './quantitative-axis-config';
-
-export function quantitativeAxisMixin<
-  Tick extends ContinuousValue,
-  T extends AbstractConstructor<XyAxis<Tick, QuantitativeTicks<Tick>>>,
->(Base: T) {
-  abstract class Mixin extends Base {
-    override config: QuantitativeAxisConfig<Tick>;
-
-    setTicks(tickFormat: string | ((value: Tick) => string)): void {
-      if (this.config.ticks.values) {
-        this.setSpecifiedTickValues(tickFormat);
-      } else {
-        this.setUnspecifiedTickValues(tickFormat);
-      }
-    }
-
-    setSpecifiedTickValues(
-      tickFormat: string | ((value: Tick) => string)
-    ): void {
-      const validTickValues = this.getValidTickValues();
-      this.axis.tickValues(validTickValues);
-      this.axis.tickFormat((d) => {
-        const formatter = d instanceof Date ? utcFormat : format;
-        return typeof tickFormat === 'function'
-          ? tickFormat(d)
-          : formatter(tickFormat)(d);
-      });
-    }
-
-    getValidTickValues(): Tick[] {
-      const domain = this.scale.domain();
-      const validValues = [];
-      this.config.ticks.values.forEach((value) => {
-        if (domain[0] <= value && value <= domain[1]) {
-          validValues.push(value);
-        }
-      });
-      return validValues;
-    }
-
-    setUnspecifiedTickValues(
-      tickFormat: string | ((value: Tick) => string)
-    ): void {
-      const validNumTicks = this.getSuggestedNumTicks(tickFormat);
-      this.axis.ticks(validNumTicks);
-      this.axis.tickFormat((d) => {
-        const formatter = d instanceof Date ? utcFormat : format;
-        return typeof tickFormat === 'function'
-          ? tickFormat(d)
-          : formatter(tickFormat)(d);
-      });
-    }
-
-    getSuggestedNumTicks(
-      tickFormat: string | ((value: Tick) => string)
-    ): number | AxisTimeInterval {
-      let numSuggestedTicks = this.getNumTicks();
-      if (
-        typeof tickFormat === 'string' &&
-        typeof numSuggestedTicks === 'number'
-      ) {
-        numSuggestedTicks = Math.round(numSuggestedTicks);
-
-        if (this.scale.domain()[0] instanceof Date) {
-          const maxTicks = this.getMaxTicksForDateFormat(tickFormat);
-          if (maxTicks !== null) {
-            return Math.min(numSuggestedTicks, maxTicks);
-          }
-        }
-        if (tickFormat.includes('.')) {
-          return this.getValidNumTicksForNumberFormatString(
-            numSuggestedTicks,
-            tickFormat
-          );
-        }
-        return numSuggestedTicks;
-      } else {
-        return numSuggestedTicks;
-      }
-    }
-
-    getNumTicks(): number | AxisTimeInterval {
-      return (
-        this.config.ticks.count ||
-        this.config.getNumTicksBySpacing(this.config.ticks.spacing, {
-          height: this.chart.config.height,
-          width: this.chart.config.width,
-        })
-      );
-    }
-
-    getValidNumTicksForNumberFormatString(
-      numTicks: number,
-      tickFormat: string
-    ): number {
-      let numDecimalPlaces = Number(tickFormat.split('.')[1][0]);
-      if (tickFormat.includes('%')) {
-        numDecimalPlaces = numDecimalPlaces + 2;
-      }
-      const [start, end] = this.scale.domain();
-      const range = end - start;
-      const minStep = Math.pow(10, -1 * numDecimalPlaces);
-      const rawCount = range / minStep;
-      const numValidTicks = Math.round(rawCount);
-      if (numTicks < numValidTicks) {
-        return numTicks;
-      } else {
-        return numValidTicks;
-      }
-    }
-
-    getMaxTicksForDateFormat(tickFormat: string): number | null {
-      const [startDate, endDate] = this.scale.domain() as [Date, Date];
-
-      // Year-only formatters: %Y, %y
-      if (tickFormat === '%Y' || tickFormat === '%y') {
-        const startYear = startDate.getUTCFullYear();
-        const endYear = endDate.getUTCFullYear();
-        return endYear - startYear + 1;
-      }
-
-      // Quarter formatter: %Y Q%q
-      if (tickFormat === '%Y Q%q') {
-        const startYear = startDate.getUTCFullYear();
-        const startQuarter = Math.floor(startDate.getUTCMonth() / 3);
-        const endYear = endDate.getUTCFullYear();
-        const endQuarter = Math.floor(endDate.getUTCMonth() / 3);
-
-        return (endYear - startYear) * 4 + (endQuarter - startQuarter) + 1;
-      }
-
-      // Month-year formatters: %B %Y, %b %Y
-      if (tickFormat === '%B %Y' || tickFormat === '%b %Y') {
-        const startYear = startDate.getUTCFullYear();
-        const startMonth = startDate.getUTCMonth();
-        const endYear = endDate.getUTCFullYear();
-        const endMonth = endDate.getUTCMonth();
-
-        return (endYear - startYear) * 12 + (endMonth - startMonth) + 1;
-      }
-
-      // Full date formatters: %B %d, %Y
-      if (
-        tickFormat === '%B %d, %Y' ||
-        tickFormat === '%m/%d/%Y' ||
-        tickFormat === '%Y-%m-%d'
-      ) {
-        const timeDiff = endDate.getTime() - startDate.getTime();
-        const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
-        return daysDiff + 1;
-      }
-
-      // Additional common time formatters for completeness
-
-      // Month formatters: %B (full month), %b (abbreviated), %m (numeric)
-      if (tickFormat === '%B' || tickFormat === '%b' || tickFormat === '%m') {
-        const startYear = startDate.getUTCFullYear();
-        const startMonth = startDate.getUTCMonth();
-        const endYear = endDate.getUTCFullYear();
-        const endMonth = endDate.getUTCMonth();
-
-        return (endYear - startYear) * 12 + (endMonth - startMonth) + 1;
-      }
-
-      // Day formatters: %d (day of month), %e (day of month with space), %j (day of year)
-      if (tickFormat === '%d' || tickFormat === '%e' || tickFormat === '%j') {
-        const timeDiff = endDate.getTime() - startDate.getTime();
-        const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
-        return daysDiff + 1;
-      }
-
-      // Week formatters: %U, %W (week of year)
-      if (tickFormat === '%U' || tickFormat === '%W') {
-        const timeDiff = endDate.getTime() - startDate.getTime();
-        const weeksDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24 * 7));
-        return weeksDiff + 1;
-      }
-
-      // For composite formats or unrecognized formats, return null to use default logic
-      return null;
-    }
-  }
-
-  return Mixin;
-}

package/src/lib/axes/ticks/tick-wrap/tick-wrap-builder.ts

@@ -1,141 +0,0 @@
-import { safeAssign } from '@mathstack/app-kit';
-import { TickWrap } from './tick-wrap';
-
-const DEFAULT = {
-  _wrapWidth: 'bandwidth',
-  _lineHeight: 1.1,
-};
-
-export class TickWrapBuilder {
-  _width:
-    | 'bandwidth'
-    | number
-    | ((chartWidth: number, numOfTicks: number) => number);
-  _maintainXPosition: boolean;
-  _maintainYPosition: boolean;
-  _lineHeight: number;
-  _breakOnChars: string[];
-  _spaceAroundBreakChars: boolean;
-
-  constructor() {
-    safeAssign(this, DEFAULT);
-  }
-
-  /**
-   * OPTIONAL. Sets the characters to break on when wrapping text.
-   * By default, text will only break on spaces.
-   *
-   * @default []
-   */
-  breakOnChars(breakOnChars: string[]) {
-    this._breakOnChars = breakOnChars;
-    return this;
-  }
-
-  /**
-   * OPTIONAL. Sets the line-height property of the tick labels. Adjusting the line-height can useful when wrapping labels, particularly on a y-axis.
-   *
-   * @param value - The line-height of the tick labels, as a multiplier of the font size. For example, 1.1 is 110% of the font size, 1.5 is 150% of the font size, etc.
-   */
-  lineHeight(value: number | null) {
-    if (value === null) {
-      this._lineHeight = undefined;
-      return this;
-    }
-    this._lineHeight = value;
-    return this;
-  }
-
-  /**
-   * OPTIONAL. If true, the x position of the text will be maintained.
-   *
-   * This is useful, for example, for centering bar labels on a vertical bar chart.
-   *
-   * @default false
-   */
-  maintainXPosition(maintainXPosition: boolean) {
-    this._maintainXPosition = maintainXPosition;
-    return this;
-  }
-
-  /**
-   * OPTIONAL. If true, the y position of the text will be maintained.
-   *
-   * This is useful, for example, for centering bar labels on a horizontal bar chart.
-   *
-   * @default false
-   */
-  maintainYPosition(maintainYPosition: boolean) {
-    this._maintainYPosition = maintainYPosition;
-    return this;
-  }
-
-  /**
-   * OPTIONAL. If true, spaces will be added around break characters.
-   *
-   * This is useful when breaking on punctuation characters, to avoid words being stuck to punctuation.
-   * For example, breaking on commas without spaces around them would result in "word," at the end of one line and "word" at the start of the next line.
-   *
-   * @default false
-   */
-  spaceAroundBreakChars(spaceAroundBreakChars: boolean) {
-    this._spaceAroundBreakChars = spaceAroundBreakChars;
-    return this;
-  }
-
-  /**
-   * OPTIONAL. Sets the width to wrap the text to. Can be a number, a function that takes the chart width and number of ticks, or 'bandwidth'.
-   *
-   * If 'bandwidth', the width will be the bandwidth of the scale.
-   *
-   * @default 'bandwidth'
-   */
-  width(width: 'bandwidth'): this;
-  width(width: number): this;
-  width(width: (chartWidth: number, numOfTicks: number) => number): this;
-  width(width: null): this;
-  width(
-    width:
-      | 'bandwidth'
-      | number
-      | ((chartWidth: number, numOfTicks: number) => number)
-      | null
-  ) {
-    if (width === null) {
-      this._width = undefined;
-      return this;
-    }
-    this._width = width;
-    return this;
-  }
-
-  /**
-   * @internal Not meant to be called by consumers of the library.
-   */
-  _build(dimension: 'x' | 'y'): TickWrap {
-    this.validate(dimension);
-    return new TickWrap({
-      width: this._width,
-      maintainXPosition: this._maintainXPosition,
-      maintainYPosition: this._maintainYPosition,
-      lineHeight: this._lineHeight,
-      breakOnChars: this._breakOnChars,
-      spaceAroundBreakChars: this._spaceAroundBreakChars,
-    });
-  }
-
-  private validate(dimension: 'x' | 'y'): void {
-    this._maintainXPosition =
-      this._maintainXPosition === undefined
-        ? dimension === 'y'
-          ? true
-          : false
-        : this._maintainXPosition;
-    this._maintainYPosition =
-      this._maintainYPosition === undefined
-        ? dimension === 'x'
-          ? false
-          : true
-        : this._maintainYPosition;
-  }
-}

package/src/lib/axes/ticks/tick-wrap/tick-wrap-options.ts

@@ -1,11 +0,0 @@
-export interface TickWrapOptions {
-  width:
-    | 'bandwidth'
-    | number
-    | ((chartWidth: number, numOfTicks: number) => number);
-  maintainXPosition: boolean;
-  maintainYPosition: boolean;
-  lineHeight: number;
-  breakOnChars: string[];
-  spaceAroundBreakChars: boolean;
-}

package/src/lib/axes/ticks/tick-wrap/tick-wrap.cy.ts

@@ -1,360 +0,0 @@
-// ***********************************************************
-// Vertical bars chart component set up
-
-import { Component, Input } from '@angular/core';
-import {
-  BarsConfig,
-  ChartConfig,
-  DataValue,
-  VicBarsConfigBuilder,
-  VicBarsModule,
-  VicChartConfigBuilder,
-  VicChartModule,
-  VicXOrdinalAxisConfig,
-  VicXOrdinalAxisConfigBuilder,
-  VicXQuantitativeAxisConfig,
-  VicXQuantitativeAxisConfigBuilder,
-  VicXyAxisModule,
-  VicYOrdinalAxisConfig,
-  VicYOrdinalAxisConfigBuilder,
-  VicYQuantitativeAxisConfig,
-  VicYQuantitativeAxisConfigBuilder,
-} from '@mathstack/viz';
-import { beforeEach, cy, describe, expect, it } from 'local-cypress';
-
-type Datum = { state: string; value: number };
-
-const data = [
-  { state: 'Alabama but a long label that is wrapped', value: 10 },
-  { state: 'Alaska', value: 5 },
-  { state: 'Arizona but a long label that is wrapped', value: 8 },
-  { state: 'Arkansas', value: 2 },
-  { state: 'California but a long label that is wrapped', value: 7 },
-  { state: 'Colorado', value: 6 },
-];
-
-const oneLineText = ['White/Causasian', 'Black', 'Native American'];
-const twoLineText = [
-  'Asian-American or Pacific Islander',
-  'Non-Hispanic Latino',
-];
-const fourLineText = ['ThisIs/ALongMadeUp/ValueWithNo/Breaks'];
-
-const dataWithDelimeters = [
-  { state: oneLineText[0], value: 10 },
-  { state: twoLineText[0], value: 5 },
-  { state: oneLineText[1], value: 8 },
-  { state: twoLineText[1], value: 2 },
-  { state: fourLineText[0], value: 7 },
-  { state: oneLineText[2], value: 6 },
-];
-
-const elementPositionDelta = 0.5;
-const initialRenderWaitTime = 1000;
-
-const assertBeforeAndAfterWindowResize = (assertions: () => void) => {
-  assertions();
-
-  // Resize window to check that label positioning is maintained
-  cy.viewport(300, 300);
-  cy.wait(2000);
-  assertions();
-};
-
-// ***********************************************************
-// Horizontal  bar chart component set up
-// ***********************************************************
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'app-test-horizontal-bars',
-  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-bars [config]="barsConfig"></svg:g>
-      </ng-container>
-    </vic-xy-chart>
-  `,
-  styles: [],
-  imports: [VicChartModule, VicBarsModule, VicXyAxisModule],
-})
-class TestHorizontalBarsComponent {
-  @Input() barsConfig: BarsConfig<Datum, string>;
-  @Input() xQuantitativeAxisConfig: VicXQuantitativeAxisConfig<number>;
-  @Input() yOrdinalAxisConfig: VicYOrdinalAxisConfig<string>;
-  chartConfig: ChartConfig = new VicChartConfigBuilder()
-    .maxHeight(600)
-    .margin({ top: 20, right: 20, bottom: 20, left: 160 })
-    .scalingStrategy('responsive-width')
-    .getConfig();
-}
-
-const mountHorizontalBarsComponent = (
-  barsConfig: BarsConfig<Datum, string>,
-  yAxisConfig: VicYOrdinalAxisConfig<DataValue>
-): void => {
-  const xAxisConfig = new VicXQuantitativeAxisConfigBuilder()
-    .ticks((ticks) => ticks.format('.0f'))
-    .getConfig();
-
-  cy.mount(TestHorizontalBarsComponent, {
-    componentProperties: {
-      barsConfig: barsConfig,
-      xQuantitativeAxisConfig: xAxisConfig,
-      yOrdinalAxisConfig: yAxisConfig,
-    },
-  });
-};
-
-describe('horizontal bar chart tick labels', () => {
-  let barsConfig: BarsConfig<Datum, string>;
-  let yAxisConfig: VicYOrdinalAxisConfig<DataValue>;
-  beforeEach(() => {
-    barsConfig = new VicBarsConfigBuilder<Datum, string>()
-      .data(data)
-      .horizontal((bars) =>
-        bars
-          .y((dimension) => dimension.valueAccessor((d) => d.state))
-          .x((dimension) =>
-            dimension.valueAccessor((d) => d.value).domainPaddingPixels(-4)
-          )
-      )
-      .color((dimension) =>
-        dimension.valueAccessor(() => '').range(['#000080'])
-      )
-      .getConfig();
-    yAxisConfig = new VicYOrdinalAxisConfigBuilder()
-      .ticks((ticks) => ticks.wrap((wrap) => wrap.width(80)))
-      .getConfig();
-    mountHorizontalBarsComponent(barsConfig, yAxisConfig);
-    cy.wait(initialRenderWaitTime); // wait for initial render
-  });
-  it('renders single-line ticks for short labels', () => {
-    assertBeforeAndAfterWindowResize(() =>
-      cy.get('.vic-axis-y-ordinal .tick text').then((ticks) => {
-        ticks.each((i, $tick) => {
-          if (i % 2 === 0) {
-            const tspans = $tick.getElementsByTagName('tspan');
-            expect(tspans.length).to.equal(1);
-          }
-        });
-      })
-    );
-  });
-
-  it('correctly wraps and renders multi-line ticks for long labels', () => {
-    assertBeforeAndAfterWindowResize(() =>
-      cy.get('.vic-axis-y-ordinal .tick text').then((ticks) => {
-        ticks.each((i, $tick) => {
-          if (i % 2 !== 0) {
-            const tspans = $tick.getElementsByTagName('tspan');
-            expect(tspans.length).to.equal(3);
-
-            // all dy values are different
-            const dyValues = Array.from(tspans).map((span) =>
-              span.getAttribute('dy')
-            );
-            expect(new Set(dyValues).size).to.equal(3);
-
-            // dy values are evenly spaced
-            const differences = dyValues.reduce((acc, val, i) => {
-              if (i === 0) return acc;
-              const diff =
-                parseFloat(val || '0') - parseFloat(dyValues[i - 1] || '0');
-              const diffRoundedToPointOne = Math.round(diff * 10) / 10;
-              acc.push(diffRoundedToPointOne);
-              return acc;
-            }, []);
-            expect(new Set(differences).size).to.equal(1);
-          }
-        });
-      })
-    );
-  });
-
-  it('correctly centers tick labels on tick marks, vertically', () => {
-    assertBeforeAndAfterWindowResize(() =>
-      cy.get('.vic-axis-y-ordinal .tick line').then((ticks) => {
-        ticks.each((i, $tick) => {
-          cy.get('.vic-axis-y-ordinal .tick text')
-            .eq(i)
-            .then(($label) => {
-              const labelRect = $label[0].getBoundingClientRect();
-              const tickLineRect = $tick.getBoundingClientRect();
-              expect(labelRect.top + labelRect.height / 2).to.be.closeTo(
-                tickLineRect.top,
-                elementPositionDelta
-              );
-            });
-        });
-      })
-    );
-  });
-
-  it('correctly wraps long ticks with breaking characters', () => {
-    barsConfig = new VicBarsConfigBuilder<Datum, string>()
-      .data(dataWithDelimeters)
-      .horizontal((bars) =>
-        bars
-          .y((dimension) => dimension.valueAccessor((d) => d.state))
-          .x((dimension) =>
-            dimension.valueAccessor((d) => d.value).domainPaddingPixels(-4)
-          )
-      )
-      .color((dimension) =>
-        dimension.valueAccessor(() => '').range(['#000080'])
-      )
-      .getConfig();
-    yAxisConfig = new VicYOrdinalAxisConfigBuilder()
-      .ticks((ticks) =>
-        ticks.wrap((wrap) => wrap.width(80).breakOnChars(['/']))
-      )
-      .getConfig();
-    mountHorizontalBarsComponent(barsConfig, yAxisConfig);
-    cy.wait(initialRenderWaitTime); // wait for initial render
-    assertBeforeAndAfterWindowResize(() =>
-      cy.get('.vic-axis-y-ordinal .tick text').then((ticks) => {
-        ticks.each((i, $tick) => {
-          const tspans = $tick.getElementsByTagName('tspan');
-          const textNoSpaces = $tick.textContent.replace(/\s/g, '');
-          // have to compare spaceless because tspan insertion removes spaces
-          if (
-            oneLineText.map((s) => s.replace(/\s/g, '')).includes(textNoSpaces)
-          ) {
-            expect(tspans.length).to.equal(1);
-          } else if (
-            twoLineText.map((s) => s.replace(/\s/g, '')).includes(textNoSpaces)
-          ) {
-            expect(tspans.length).to.equal(2);
-          } else if (
-            fourLineText.map((s) => s.replace(/\s/g, '')).includes(textNoSpaces)
-          ) {
-            expect(tspans.length).to.equal(4);
-          }
-        });
-      })
-    );
-  });
-});
-
-// ***********************************************************
-// Vertical bar chart component set up
-// ***********************************************************
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'app-test-vertical-bars',
-  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-bars [config]="barsConfig"></svg:g>
-      </ng-container>
-    </vic-xy-chart>
-  `,
-  styles: [],
-  imports: [VicChartModule, VicBarsModule, VicXyAxisModule],
-})
-class TestVerticalBarsComponent {
-  @Input() barsConfig: BarsConfig<Datum, string>;
-  @Input() yQuantitativeAxisConfig: VicYQuantitativeAxisConfig<number>;
-  @Input() xOrdinalAxisConfig: VicXOrdinalAxisConfig<string>;
-  chartConfig: ChartConfig = new VicChartConfigBuilder()
-    .maxHeight(600)
-    .margin({ top: 20, right: 20, bottom: 10, left: 20 })
-    .scalingStrategy('responsive-width')
-    .getConfig();
-}
-
-const mountVerticalBarsComponent = (
-  barsConfig: BarsConfig<Datum, string>,
-  xAxisConfig: VicXOrdinalAxisConfig<DataValue>
-): void => {
-  const yAxisConfig = new VicYQuantitativeAxisConfigBuilder()
-    .ticks((ticks) => ticks.format('.0f'))
-    .getConfig();
-
-  cy.mount(TestVerticalBarsComponent, {
-    componentProperties: {
-      barsConfig: barsConfig,
-      yQuantitativeAxisConfig: yAxisConfig,
-      xOrdinalAxisConfig: xAxisConfig,
-    },
-  });
-};
-
-describe('vertical bar chart tick labels', () => {
-  let barsConfig: BarsConfig<Datum, string>;
-  let xAxisConfig: VicXOrdinalAxisConfig<DataValue>;
-  beforeEach(() => {
-    barsConfig = new VicBarsConfigBuilder<Datum, string>()
-      .data(data)
-      .vertical((bars) =>
-        bars
-          .x((dimension) => dimension.valueAccessor((d) => d.state))
-          .y((dimension) =>
-            dimension.valueAccessor((d) => d.value).domainPaddingPixels(-4)
-          )
-      )
-      .color((dimension) =>
-        dimension.valueAccessor(() => '').range(['#000080'])
-      )
-      .getConfig();
-    xAxisConfig = new VicXOrdinalAxisConfigBuilder()
-      .ticks((ticks) => ticks.wrap((wrap) => wrap.width('bandwidth')))
-      .getConfig();
-    mountVerticalBarsComponent(barsConfig, xAxisConfig);
-    cy.wait(initialRenderWaitTime); // wait for initial render
-  });
-  it('correctly wraps long ticks', () => {
-    cy.get('.vic-axis-x-ordinal .tick text').then((ticks) => {
-      ticks.each((i, $tick) => {
-        const tspans = $tick.getElementsByTagName('tspan');
-        // ticks are grabbed left to right, i.e. AL is first tick, CO last tick
-        if (i % 2 === 0) {
-          expect(tspans.length).to.equal(3);
-        } else {
-          expect(tspans.length).to.equal(1);
-        }
-      });
-    });
-  });
-
-  it('correctly centers tick labels on tick marks, horizontally', () => {
-    cy.get('.vic-axis-x-ordinal .tick line').then((ticks) => {
-      ticks.each((i, $tick) => {
-        cy.get('.vic-axis-x-ordinal .tick text')
-          .eq(i)
-          .then(($label) => {
-            const labelRect = $label[0].getBoundingClientRect();
-            const tickLineRect = $tick.getBoundingClientRect();
-            expect(labelRect.left + labelRect.width / 2).to.be.closeTo(
-              tickLineRect.left,
-              elementPositionDelta
-            );
-          });
-      });
-    });
-  });
-
-  it('wrapped labels are no wider than the width of the bar is wrapped with bandwidth', () => {
-    cy.get('.vic-bars-group').then((bars) => {
-      bars.each((i, $bar) => {
-        cy.get('.vic-axis-x-ordinal .tick text')
-          .eq(i)
-          .then(($label) => {
-            const labelRect = $label[0].getBoundingClientRect();
-            const barRect = $bar.getBoundingClientRect();
-            expect(labelRect.width).to.be.lessThan(barRect.width + 1);
-          });
-      });
-    });
-  });
-});