@mathstack/viz 1.1.5 → 2.0.3

package/src/lib/data-dimensions/ordinal/ordinal-chart-position/ordinal-chart-position.ts

@@ -0,0 +1,101 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { InternSet, ScaleBand, scaleBand, scalePoint, ScalePoint } from 'd3';
+import { DataValue } from '../../../core/types/values';
+import { DataDimension } from '../../dimension';
+import { OrdinalChartPositionDimensionOptions } from './ordinal-chart-position-options';
+
+/**
+ * A dimension that transforms string / number / Date values into a position on a chart.
+ *
+ * This dimension is used for the positional dimensions of a chart, such as x and y. The underlying scale will always be a [D3 band scale](https://d3js.org/d3-scale/band). The range of the scale will be a dimension from the chart.
+ *
+ * The first generic is the type of the data that will be passed to the dimension. The second generic is the type of the value that will be used to position the data on the chart.
+ *
+ * TESTABLE FUNCTIONALITY
+ *
+ * - It extracts values for the dimension from data.
+ *   - tested in: bars.cy.ts, dots.cy.ts, stacked-bars.cy.ts
+ * - It sets the domain of the dimension.
+ *   - tested in: bars.cy.ts, dots.cy.ts
+ * - It checks if a value is in the domain.
+ *   - tested in: bars.cy.ts
+ * - It creates a scale from a range.
+ *   - tested in: bars.cy.ts, dots.cy.ts
+ * - The domain will be unique values from the user-provided domain if the user provides a domain.
+ *   - tested in: ordinal-chart-position.spec.ts
+ * - The domain will be unique values from the data if no custom domain is given by the user.
+ *   - tested in: ordinal-chart-position.spec.ts
+ * - The domain can be set in reverse order.
+ *   - tested in: ordinal-chart-position.spec.ts
+ */
+
+export class OrdinalChartPositionDimension<Datum, Domain extends DataValue>
+  extends DataDimension<Datum, Domain>
+  implements OrdinalChartPositionDimensionOptions<Datum, Domain>
+{
+  readonly align: number;
+  private _calculatedDomain: Domain[];
+  readonly domain: Domain[];
+  private internSetDomain: InternSet<Domain>;
+  readonly paddingInner: number;
+  readonly paddingOuter: number;
+  private scaleFn: (
+    domain?: Iterable<Domain>,
+    range?: Iterable<number>
+  ) => ScaleBand<Domain> | ScalePoint<Domain>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  override readonly valueAccessor: (d: Datum, ...args: any) => Domain;
+
+  constructor(
+    scaleType: 'band' | 'point' = 'band',
+    options: OrdinalChartPositionDimensionOptions<Datum, Domain>
+  ) {
+    super('ordinal');
+    this.scaleFn = scaleType === 'band' ? scaleBand : scalePoint;
+    safeAssign(this, options);
+  }
+
+  get calculatedDomain(): Domain[] {
+    return this._calculatedDomain;
+  }
+
+  setPropertiesFromData(data: Datum[], reverseDomain: boolean = false): void {
+    this.setValues(data);
+    this.setDomain(reverseDomain);
+  }
+
+  protected setDomain(reverseDomain: boolean): void {
+    let domain = this.domain;
+    if (domain === undefined) {
+      domain = this.values;
+    }
+    this.internSetDomain = new InternSet(domain);
+    const uniqueValues = [...this.internSetDomain.values()];
+    this._calculatedDomain = reverseDomain
+      ? uniqueValues.reverse()
+      : uniqueValues;
+  }
+
+  domainIncludes(value: Domain): boolean {
+    return this.internSetDomain.has(value);
+  }
+
+  getScaleFromRange(
+    range: [number, number]
+  ): ScaleBand<Domain> | ScalePoint<Domain> {
+    if (this.scaleFn === scalePoint) {
+      return (this.scaleFn() as ScalePoint<Domain>)
+        .domain(this._calculatedDomain)
+        .range(range)
+        .padding(this.paddingOuter)
+        .align(this.align);
+    } else {
+      return (this.scaleFn() as ScaleBand<Domain>)
+        .domain(this._calculatedDomain)
+        .range(range)
+        .paddingInner(this.paddingInner)
+        .paddingOuter(this.paddingOuter)
+        .align(this.align);
+    }
+  }
+}

package/src/lib/data-dimensions/ordinal/ordinal-visual-value/ordinal-visual-value-builder.ts

@@ -0,0 +1,108 @@
+import { safeAssign } from '@mathstack/app-kit';
+import { schemeTableau10 } from 'd3';
+import { DataValue, VisualValue } from '../../../core/types/values';
+import { DataDimensionBuilder } from '../../dimension-builder';
+import { OrdinalVisualValueDimension } from './ordinal-visual-value';
+
+const DEFAULT = {
+  _range: schemeTableau10,
+  _valueAccessor: () => '',
+};
+
+export class OrdinalVisualValueDimensionBuilder<
+  Datum,
+  Domain extends DataValue,
+  Range extends VisualValue,
+> extends DataDimensionBuilder<Datum, Domain> {
+  private _domain: Domain[];
+  private _range: Range[];
+  private _scale: (category: Domain) => Range;
+
+  constructor() {
+    super();
+    safeAssign(this, DEFAULT);
+  }
+
+  /**
+   * OPTIONAL. Sets an array of categorical values that will be used to define the domain of the scale.
+   *
+   * If not provided, the domain will be determined by the data.
+   */
+  domain(domain: null): this;
+  domain(domain: Domain[]): this;
+  domain(domain: Domain[]): this {
+    if (domain === null) {
+      this._domain = undefined;
+      return this;
+    }
+    this._domain = domain;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. Sets an array of visual values that will be the output from D3 scale ordinal.
+   *
+   * For example, this could be an array of colors or sizes.
+   *
+   * To have all marks use the same visual value, use an array with a single element.
+   *
+   * Will not be used if `scale` is set by the user.
+   *
+   * @default d3.schemeTableau10
+   */
+  range(range: null): this;
+  range(range: Range[]): this;
+  range(range: Range[]): this {
+    if (range === null) {
+      this._range = DEFAULT._range as Range[];
+      return this;
+    }
+    this._range = range;
+    return this;
+  }
+
+  /**
+   * OPTIONAL. Sets a user-defined function that transforms a categorical value into a visual value.
+   *
+   * User must also provide their own implementation of `valueAccessor`.
+   *
+   * If a custom valueAccessor function is not provided, this function will not be used even if provided (due to default value of `valueAccessor`).
+   */
+  scale(scale: null): this;
+  scale(scale: (category: Domain) => Range): this;
+  scale(scale: (category: Domain) => Range): this {
+    if (scale === null) {
+      this._scale = undefined;
+      return this;
+    }
+    this._scale = scale;
+    return this;
+  }
+
+  /**
+   * @internal This method is not intended to be used by consumers of this library.
+   *
+   * @param dimensionName A user-intelligible name for the dimension being built. Used for error messages. Should be title cased.
+   */
+  _build(
+    dimensionName: string
+  ): OrdinalVisualValueDimension<Datum, Domain, Range> {
+    this.validateDimension(dimensionName);
+    return new OrdinalVisualValueDimension({
+      domain: this._domain,
+      formatFunction: this._formatFunction,
+      range: this._range,
+      scale: this._scale,
+      valueAccessor: this._valueAccessor,
+    });
+  }
+
+  private validateDimension(dimensionName: string): void {
+    this.validateValueAccessor(dimensionName);
+    if (!this._range && !this._scale) {
+      throw new Error(
+        `${dimensionName} Dimension: Either a range or a scale must be provided.`
+      );
+    }
+  }
+}

package/src/lib/data-dimensions/ordinal/ordinal-visual-value/ordinal-visual-value-options.ts

@@ -0,0 +1,12 @@
+import { DataValue, VisualValue } from '../../../core/types/values';
+import { DataDimensionOptions } from '../../dimension-options';
+
+export interface OrdinalVisualValueDimensionOptions<
+  Datum,
+  Domain extends DataValue,
+  Range extends VisualValue,
+> extends DataDimensionOptions<Datum, Domain> {
+  domain: Domain[];
+  range: Range[];
+  scale: (category: Domain) => Range;
+}

package/src/lib/data-dimensions/ordinal/ordinal-visual-value/ordinal-visual-value.cy.ts

@@ -0,0 +1,384 @@
+/* eslint-disable @angular-eslint/prefer-standalone */
+import { Component, Input } from '@angular/core';
+import {
+  BarsConfig,
+  ChartConfig,
+  VicBarsConfigBuilder,
+  VicBarsModule,
+  VicChartConfigBuilder,
+  VicChartModule,
+  VicXQuantitativeAxisConfig,
+  VicXQuantitativeAxisConfigBuilder,
+  VicXyAxisModule,
+  VicYOrdinalAxisConfig,
+  VicYOrdinalAxisConfigBuilder,
+} from '@mathstack/viz';
+import { schemeTableau10 } from 'd3';
+import { beforeEach, cy, describe, expect, it } from 'local-cypress';
+import {
+  countryFactsData,
+  CountryFactsDatum,
+} from '../../../testing/data/country-area-continent';
+
+const dotsPatternMagenta = 'dotsMagenta';
+const dotsPatternTeal = 'dotsTeal';
+const horizontalMargin = { top: 36, right: 20, bottom: 4, left: 80 };
+const chartHeight = 400;
+const chartWidth = 600;
+const customCategoricalScale = (d: string) => {
+  switch (d) {
+    case 'Asia':
+      return 'red';
+    case 'Europe':
+      return 'blue';
+    case 'Africa':
+      return 'green';
+    case 'North America':
+      return 'yellow';
+    case 'South America':
+      return 'purple';
+    default:
+      return 'chartreuse';
+  }
+};
+
+const barSelector = '.vic-bars-bar';
+
+// ***********************************************************
+// Horizontal bar chart component set up
+// ***********************************************************
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'app-test-horizontal-bar',
+  template: `
+    <vic-xy-chart [config]="chartConfig">
+      <ng-container svg-defs>
+        <svg:pattern
+          [id]="dotsPatternMagenta"
+          x="2"
+          y="2"
+          width="5"
+          height="5"
+          patternUnits="userSpaceOnUse"
+        >
+          <rect x="3" y="3" width="2" height="2" fill="magenta" />
+        </svg:pattern>
+        <svg:pattern
+          [id]="dotsPatternTeal"
+          x="2"
+          y="2"
+          width="5"
+          height="5"
+          patternUnits="userSpaceOnUse"
+        >
+          <rect x="3" y="3" width="2" height="2" fill="teal" />
+        </svg:pattern>
+      </ng-container>
+      <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<CountryFactsDatum, string>;
+  @Input() yOrdinalAxisConfig: VicYOrdinalAxisConfig<string>;
+  @Input() xQuantitativeAxisConfig: VicXQuantitativeAxisConfig<number>;
+  dotsPatternMagenta = dotsPatternMagenta;
+  dotsPatternTeal = dotsPatternTeal;
+  chartConfig: ChartConfig = new VicChartConfigBuilder()
+    .maxHeight(chartHeight)
+    .maxWidth(chartWidth)
+    .margin(horizontalMargin)
+    .scalingStrategy('responsive-width')
+    .getConfig();
+}
+
+const mountHorizontalBarsComponent = (
+  barsConfig: BarsConfig<CountryFactsDatum, string>
+): void => {
+  const xAxisConfig = new VicXQuantitativeAxisConfigBuilder()
+    .ticks((ticks) => ticks.format('.0f'))
+    .getConfig();
+  const yAxisConfig = new VicYOrdinalAxisConfigBuilder().getConfig();
+
+  cy.mount(TestHorizontalBarsComponent, {
+    componentProperties: {
+      barsConfig: barsConfig,
+      xQuantitativeAxisConfig: xAxisConfig,
+      yOrdinalAxisConfig: yAxisConfig,
+    },
+  });
+};
+
+// ***********************************************************
+// Marks fill/stroke is correct
+// ***********************************************************
+describe('marks have expected fill', () => {
+  let barsConfig: BarsConfig<CountryFactsDatum, string>;
+  beforeEach(() => {
+    barsConfig = undefined;
+  });
+  describe('user does not specify a categorical valueAccessor or a custom scale', () => {
+    it('colors every mark by first color in user-provided range if user provides range of length >= 1', () => {
+      const color = 'chartreuse';
+      barsConfig = new VicBarsConfigBuilder<CountryFactsDatum, string>()
+        .data(countryFactsData)
+        .horizontal((bars) =>
+          bars
+            .x((dimension) => dimension.valueAccessor((d) => d.area))
+            .y((dimension) => dimension.valueAccessor((d) => d.country))
+        )
+        .color((dimension) => dimension.range([color, 'red', 'yellow']))
+        .labels((labels) => labels.display(true))
+        .getConfig();
+      mountHorizontalBarsComponent(barsConfig);
+      cy.get(barSelector).each(($bar) => {
+        expect($bar.attr('fill')).to.equal(color);
+      });
+    });
+    it('colors every mark by first color in the default range if user provides no range and no custom scale', () => {
+      const color = schemeTableau10[0];
+      barsConfig = new VicBarsConfigBuilder<CountryFactsDatum, string>()
+        .data(countryFactsData)
+        .horizontal((bars) =>
+          bars
+            .x((dimension) =>
+              dimension.valueAccessor((d) => d.area).domainPaddingPixels()
+            )
+            .y((dimension) => dimension.valueAccessor((d) => d.country))
+        )
+        .labels((labels) => labels.display(true))
+        .getConfig();
+      mountHorizontalBarsComponent(barsConfig);
+      cy.get(barSelector).each(($bar) => {
+        expect($bar.attr('fill')).to.equal(color);
+      });
+    });
+  });
+  describe('user provides a valueAccessor for the categorical dimension', () => {
+    it('colors every mark according to the valueAccessor using default color array', () => {
+      const color = schemeTableau10;
+      barsConfig = new VicBarsConfigBuilder<CountryFactsDatum, string>()
+        .data(countryFactsData)
+        .horizontal((bars) =>
+          bars
+            .x((dimension) =>
+              dimension.valueAccessor((d) => d.area).domainPaddingPixels()
+            )
+            .y((dimension) => dimension.valueAccessor((d) => d.country))
+        )
+        .color((dimension) => dimension.valueAccessor((d) => d.continent))
+        .labels((labels) => labels.display(true))
+        .getConfig();
+      mountHorizontalBarsComponent(barsConfig);
+      cy.get(barSelector).each(($bar, i) => {
+        switch (countryFactsData[i].continent) {
+          case 'Asia':
+            expect($bar.attr('fill')).to.equal(color[0]);
+            break;
+          case 'Europe':
+            expect($bar.attr('fill')).to.equal(color[1]);
+            break;
+          case 'Africa':
+            expect($bar.attr('fill')).to.equal(color[2]);
+            break;
+          case 'North America':
+            expect($bar.attr('fill')).to.equal(color[3]);
+            break;
+          case 'South America':
+            expect($bar.attr('fill')).to.equal(color[4]);
+            break;
+          default:
+            expect($bar.attr('fill')).to.equal(color[5]);
+        }
+      });
+    });
+  });
+  describe('user provides a custom scale for the categorical dimension', () => {
+    it('colors every mark according to the custom scale when user also provides a value accessor', () => {
+      barsConfig = new VicBarsConfigBuilder<CountryFactsDatum, string>()
+        .data(countryFactsData)
+        .horizontal((bars) =>
+          bars
+            .x((dimension) =>
+              dimension.valueAccessor((d) => d.area).domainPaddingPixels()
+            )
+            .y((dimension) => dimension.valueAccessor((d) => d.country))
+        )
+        .color((dimension) =>
+          dimension
+            .valueAccessor((d) => d.continent)
+            .scale(customCategoricalScale)
+        )
+        .labels((labels) => labels.display(true))
+        .getConfig();
+      mountHorizontalBarsComponent(barsConfig);
+      cy.get(barSelector).each(($bar, i) => {
+        switch (countryFactsData[i].continent) {
+          case 'Asia':
+            expect($bar.attr('fill')).to.equal('red');
+            break;
+          case 'Europe':
+            expect($bar.attr('fill')).to.equal('blue');
+            break;
+          case 'Africa':
+            expect($bar.attr('fill')).to.equal('green');
+            break;
+          case 'North America':
+            expect($bar.attr('fill')).to.equal('yellow');
+            break;
+          case 'South America':
+            expect($bar.attr('fill')).to.equal('purple');
+            break;
+          default:
+            expect($bar.attr('fill')).to.equal('chartreuse');
+        }
+      });
+    });
+    it('colors every mark according to the custom scales behavior with empty string arg when user does not provide a value accessor', () => {
+      barsConfig = new VicBarsConfigBuilder<CountryFactsDatum, string>()
+        .data(countryFactsData)
+        .horizontal((bars) =>
+          bars
+            .x((dimension) =>
+              dimension.valueAccessor((d) => d.area).domainPaddingPixels()
+            )
+            .y((dimension) => dimension.valueAccessor((d) => d.country))
+        )
+        .color((dimension) => dimension.scale(customCategoricalScale))
+        .labels((labels) => labels.display(true))
+        .getConfig();
+      mountHorizontalBarsComponent(barsConfig);
+      cy.get(barSelector).each(($bar) => {
+        expect($bar.attr('fill')).to.equal('chartreuse');
+      });
+    });
+  });
+});
+
+// ***********************************************************
+// Marks fill/stroke is correct - testing Fill Pattern
+// ***********************************************************
+describe('user provides a fill pattern', () => {
+  let barsConfig: BarsConfig<CountryFactsDatum, string>;
+  beforeEach(() => {
+    barsConfig = undefined;
+  });
+  it('sets bar fill with either the pattern name or the regular fill according to shouldApply function', () => {
+    barsConfig = new VicBarsConfigBuilder<CountryFactsDatum, string>()
+      .data(countryFactsData)
+      .horizontal((bars) =>
+        bars
+          .x((dimension) =>
+            dimension.valueAccessor((d) => d.area).domainPaddingPixels()
+          )
+          .y((dimension) => dimension.valueAccessor((d) => d.country))
+      )
+      .customFills([
+        {
+          defId: dotsPatternMagenta,
+          shouldApply: (d) => d.continent === 'Africa' && d.area > 500000,
+        },
+      ])
+      .labels((labels) => labels.display(true))
+      .getConfig();
+    mountHorizontalBarsComponent(barsConfig);
+    cy.get(barSelector).each(($bar, i) => {
+      if (i === 2) {
+        expect($bar.attr('fill')).to.equal(`url(#${dotsPatternMagenta})`);
+      } else {
+        expect($bar.attr('fill')).to.equal(schemeTableau10[0]);
+      }
+    });
+  });
+  it('sets bar fill with either the pattern name or the regular fill according to shouldApply function when user provides a scale and valueAccessor', () => {
+    barsConfig = new VicBarsConfigBuilder<CountryFactsDatum, string>()
+      .data(countryFactsData)
+      .horizontal((bars) =>
+        bars
+          .x((dimension) =>
+            dimension.valueAccessor((d) => d.area).domainPaddingPixels()
+          )
+          .y((dimension) => dimension.valueAccessor((d) => d.country))
+      )
+      .color((dimension) =>
+        dimension
+          .valueAccessor((d) => d.continent)
+          .scale(customCategoricalScale)
+      )
+      .customFills([
+        {
+          defId: dotsPatternMagenta,
+          shouldApply: (d) => d.continent === 'Africa' && d.area > 500000,
+        },
+      ])
+      .labels((labels) => labels.display(true))
+      .getConfig();
+    mountHorizontalBarsComponent(barsConfig);
+    cy.get(barSelector).each(($bar, i) => {
+      if (i === 2) {
+        expect($bar.attr('fill')).to.equal(`url(#${dotsPatternMagenta})`);
+      } else {
+        switch (countryFactsData[i].continent) {
+          case 'Asia':
+            expect($bar.attr('fill')).to.equal('red');
+            break;
+          case 'Europe':
+            expect($bar.attr('fill')).to.equal('blue');
+            break;
+          case 'Africa':
+            expect($bar.attr('fill')).to.equal('green');
+            break;
+          case 'North America':
+            expect($bar.attr('fill')).to.equal('yellow');
+            break;
+          case 'South America':
+            expect($bar.attr('fill')).to.equal('purple');
+            break;
+          default:
+            expect($bar.attr('fill')).to.equal('chartreuse');
+        }
+      }
+    });
+  });
+  it('sets bar fill with the last matching pattern in customFills array if two patterns match', () => {
+    barsConfig = new VicBarsConfigBuilder<CountryFactsDatum, string>()
+      .data(countryFactsData)
+      .horizontal((bars) =>
+        bars
+          .x((dimension) =>
+            dimension.valueAccessor((d) => d.area).domainPaddingPixels()
+          )
+          .y((dimension) => dimension.valueAccessor((d) => d.country))
+      )
+      .color((dimension) => dimension.range(['lightcoral']))
+      .customFills([
+        {
+          defId: dotsPatternMagenta,
+          shouldApply: (d) => d.continent === 'Africa' && d.area > 500000,
+        },
+        {
+          defId: dotsPatternTeal,
+          shouldApply: (d) => d.continent === 'Africa' && d.area > 700000,
+        },
+      ])
+      .labels((labels) => labels.display(true))
+      .getConfig();
+    mountHorizontalBarsComponent(barsConfig);
+    cy.get(barSelector).each(($bar, i) => {
+      if (i === 2) {
+        expect($bar.attr('fill')).to.equal(`url(#${dotsPatternTeal})`);
+      } else {
+        expect($bar.attr('fill')).to.equal('lightcoral');
+      }
+    });
+  });
+});

package/src/lib/data-dimensions/ordinal/ordinal-visual-value/ordinal-visual-value.spec.ts

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { OrdinalVisualValueDimension } from './ordinal-visual-value';
+import { OrdinalVisualValueDimensionBuilder } from './ordinal-visual-value-builder';
+
+describe('OrdinalVisualValueDimension', () => {
+  let dimension: OrdinalVisualValueDimension<string, string, string>;
+  beforeEach(() => {
+    dimension = new OrdinalVisualValueDimensionBuilder<string, string, string>()
+      .valueAccessor((d) => d)
+      ._build('Test');
+  });
+  describe('setPropertiesFromData', () => {
+    beforeEach(() => {
+      spyOn(dimension as any, 'setValues');
+      spyOn(dimension as any, 'setDomain');
+      spyOn(dimension as any, 'setScale');
+    });
+    it('calls setValues once', () => {
+      dimension.setPropertiesFromData(['a', 'b', 'c', 'a', 'b']);
+      expect((dimension as any).setValues).toHaveBeenCalledOnceWith([
+        'a',
+        'b',
+        'c',
+        'a',
+        'b',
+      ]);
+    });
+    it('calls initDomain once', () => {
+      dimension.setPropertiesFromData(['a', 'b', 'c', 'a', 'b']);
+      expect((dimension as any).setDomain).toHaveBeenCalledTimes(1);
+    });
+    it('calls initScale once', () => {
+      dimension.setPropertiesFromData(['a', 'b', 'c', 'a', 'b']);
+      expect((dimension as any).setScale).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('setDomain()', () => {
+    it('sets the domain to the correct value, user did not specify domain', () => {
+      dimension.setPropertiesFromData(['a', 'b', 'c', 'a', 'b']);
+      expect((dimension as any).calculatedDomain).toEqual(['a', 'b', 'c']);
+    });
+    it('sets the domain to the correct value, user specified domain', () => {
+      (dimension as any).domain = ['e', 'f', 'g', 'e'];
+      dimension.setPropertiesFromData(['a', 'b', 'c', 'a', 'b']);
+      expect((dimension as any).calculatedDomain).toEqual(['e', 'f', 'g']);
+    });
+  });
+
+  describe('integration: domainIncludes', () => {
+    it('correctly sets internSetDomain and domainIncludes returns correct value', () => {
+      (dimension as any).domain = ['c', 'd', 'b', 'a', 'd'];
+      dimension.setPropertiesFromData(['a', 'b', 'c', 'a', 'b']);
+      expect(dimension.domainIncludes('a')).toEqual(true);
+    });
+    it('correctly sets internSetDomain and domainIncludes returns correct value - scenario 2', () => {
+      (dimension as any).domain = ['c', 'd', 'b', 'a', 'd'];
+      dimension.setPropertiesFromData(['a', 'b', 'c', 'a', 'b']);
+      expect(dimension.domainIncludes('z')).toEqual(false);
+    });
+  });
+});