@mathstack/viz 1.1.4 → 2.0.3

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

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

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

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

@@ -0,0 +1,360 @@
+// ***********************************************************
+// 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);
+          });
+      });
+    });
+  });
+});