@unovis/ts 1.1.1-beta.7 → 1.1.1-beta.8

package/components/area/config.d.ts

@@ -0,0 +1,25 @@
+import { XYComponentConfigInterface, XYComponentConfig } from "../../core/xy-component/config";
+import { CurveType } from "../../types/curve";
+import { NumericAccessor, StringAccessor } from "../../types/accessor";
+export interface AreaConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {
+    /** Curve type from the CurveType enum. Default: `CurveType.MonotoneX` */
+    curveType?: CurveType;
+    /** Baseline value or accessor function. Default: `undefined` */
+    baseline?: NumericAccessor<Datum>;
+    /** Opacity value or accessor function. Default: `1` */
+    opacity?: NumericAccessor<Datum>;
+    /** Optional area cursor. String or accessor function. Default: `null` */
+    cursor?: StringAccessor<Datum[]>;
+    /** If an area is smaller than 1px, extend it to have 1px height.
+     * This setting is useful when some of the area values are zeros or very small so visually they become
+     * practically invisible, but you want to show that the data behind them exists and they're not just empty segments.
+     * Default: `false` */
+    minHeight1Px?: boolean;
+}
+export declare class AreaConfig<Datum> extends XYComponentConfig<Datum> implements AreaConfigInterface<Datum> {
+    curveType: CurveType;
+    baseline: () => number;
+    opacity: number;
+    cursor: any;
+    minHeight1Px: boolean;
+}

package/components/area/config.js

@@ -0,0 +1,16 @@
+import { XYComponentConfig } from '../../core/xy-component/config.js';
+import { CurveType } from '../../types/curve.js';
+
+class AreaConfig extends XYComponentConfig {
+    constructor() {
+        super(...arguments);
+        this.curveType = CurveType.MonotoneX;
+        this.baseline = () => 0;
+        this.opacity = 1;
+        this.cursor = null;
+        this.minHeight1Px = false;
+    }
+}
+
+export { AreaConfig };
+//# sourceMappingURL=config.js.map

package/components/area/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/area/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'\n\n// Types\nimport { CurveType } from 'types/curve'\nimport { NumericAccessor, StringAccessor } from 'types/accessor'\n\nexport interface AreaConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {\n  /** Curve type from the CurveType enum. Default: `CurveType.MonotoneX` */\n  curveType?: CurveType;\n  /** Baseline value or accessor function. Default: `undefined` */\n  baseline?: NumericAccessor<Datum>;\n  /** Opacity value or accessor function. Default: `1` */\n  opacity?: NumericAccessor<Datum>;\n  /** Optional area cursor. String or accessor function. Default: `null` */\n  cursor?: StringAccessor<Datum[]>;\n  /** If an area is smaller than 1px, extend it to have 1px height.\n   * This setting is useful when some of the area values are zeros or very small so visually they become\n   * practically invisible, but you want to show that the data behind them exists and they're not just empty segments.\n   * Default: `false` */\n  minHeight1Px?: boolean;\n}\n\nexport class AreaConfig<Datum> extends XYComponentConfig<Datum> implements AreaConfigInterface<Datum> {\n  curveType = CurveType.MonotoneX\n  baseline = (): number => 0\n  opacity = 1\n  cursor = null\n  minHeight1Px = false\n}\n"],"names":[],"mappings":";;;AAsBM,MAAO,UAAkB,SAAQ,iBAAwB,CAAA;AAA/D,IAAA,WAAA,GAAA;;AACE,QAAA,IAAA,CAAA,SAAS,GAAG,SAAS,CAAC,SAAS,CAAA;AAC/B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAc,CAAC,CAAA;QAC1B,IAAO,CAAA,OAAA,GAAG,CAAC,CAAA;QACX,IAAM,CAAA,MAAA,GAAG,IAAI,CAAA;QACb,IAAY,CAAA,YAAA,GAAG,KAAK,CAAA;KACrB;AAAA;;;;"}

package/components/area/index.d.ts

@@ -0,0 +1,19 @@
+import { Area as AreaInterface } from 'd3-shape';
+import { XYComponentCore } from "../../core/xy-component";
+import { AreaDatum } from './types';
+import { AreaConfig, AreaConfigInterface } from './config';
+import * as s from './style';
+export declare class Area<Datum> extends XYComponentCore<Datum, AreaConfig<Datum>, AreaConfigInterface<Datum>> {
+    static selectors: typeof s;
+    stacked: boolean;
+    config: AreaConfig<Datum>;
+    areaGen: AreaInterface<AreaDatum>;
+    private _prevNegative;
+    events: {
+        [x: string]: {};
+    };
+    constructor(config?: AreaConfigInterface<Datum>);
+    _render(customDuration?: number): void;
+    getYDataExtent(scaleByVisibleData: boolean): number[];
+    _emptyPath(): string;
+}

package/components/area/index.js

@@ -0,0 +1,102 @@
+import { select } from 'd3-selection';
+import { area } from 'd3-shape';
+import { interpolatePath } from 'd3-interpolate-path';
+import { XYComponentCore } from '../../core/xy-component/index.js';
+import { isNumber, isArray, getNumber, getStackedData, getString, filterDataByRange, getStackedExtent } from '../../utils/data.js';
+import { smartTransition } from '../../utils/d3.js';
+import { getColor } from '../../utils/color.js';
+import { Curve } from '../../types/curve.js';
+import { AreaConfig } from './config.js';
+import * as style from './style.js';
+import { area as area$1 } from './style.js';
+
+class Area extends XYComponentCore {
+    constructor(config) {
+        super();
+        this.stacked = true;
+        this.config = new AreaConfig();
+        this.events = {
+            [Area.selectors.area]: {},
+        };
+        if (config)
+            this.config.init(config);
+    }
+    _render(customDuration) {
+        super._render(customDuration);
+        const { config, datamodel: { data } } = this;
+        const duration = isNumber(customDuration) ? customDuration : config.duration;
+        const curveGen = Curve[config.curveType];
+        this.areaGen = area()
+            .x(d => d.x)
+            .y0(d => d.y0)
+            .y1(d => {
+            const isSmallerThanPixel = Math.abs(d.y1 - d.y0) < 1;
+            return d.y1 - ((isSmallerThanPixel && config.minHeight1Px) ? 1 : 0);
+        })
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            .curve(curveGen);
+        const yAccessors = (isArray(config.y) ? config.y : [config.y]);
+        const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)));
+        const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative);
+        this._prevNegative = stacked.map(s => !!s.negative);
+        const stackedData = stacked.map(arr => arr.map((d, j) => ({
+            y0: this.yScale(d[0]),
+            y1: this.yScale(d[1]),
+            x: areaDataX[j],
+        })));
+        // We reverse the data in order to have the first areas to be displayed on top
+        //   for better visibility when they're close to zero
+        const areaMaxIdx = stackedData.length - 1;
+        const stackedDataReversed = stackedData.reverse();
+        const areas = this.g
+            .selectAll(`.${area$1}`)
+            .data(stackedDataReversed);
+        const areasEnter = areas.enter().append('path')
+            .attr('class', area$1)
+            .attr('d', d => this.areaGen(d) || this._emptyPath())
+            .style('opacity', 0)
+            .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i));
+        const areasMerged = smartTransition(areasEnter.merge(areas), duration)
+            .style('opacity', (d, i) => {
+            const isDefined = d.some(p => (p.y0 - p.y1) !== 0);
+            return isDefined ? getNumber(d, config.opacity, areaMaxIdx - i) : 0;
+        })
+            .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))
+            .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i));
+        if (duration) {
+            const transition = areasMerged;
+            transition.attrTween('d', (d, i, el) => {
+                const previous = select(el[i]).attr('d');
+                const next = this.areaGen(d) || this._emptyPath();
+                return interpolatePath(previous, next);
+            });
+        }
+        else {
+            areasMerged.attr('d', d => this.areaGen(d) || this._emptyPath());
+        }
+        smartTransition(areas.exit(), duration)
+            .style('opacity', 0)
+            .remove();
+    }
+    getYDataExtent(scaleByVisibleData) {
+        const { config, datamodel } = this;
+        const yAccessors = (isArray(config.y) ? config.y : [config.y]);
+        const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain(), config.x) : datamodel.data;
+        return getStackedExtent(data, config.baseline, ...yAccessors);
+    }
+    _emptyPath() {
+        const xRange = this.xScale.range();
+        const yDomain = this.yScale.domain();
+        const y0 = this.yScale((yDomain[0] + yDomain[1]) / 2);
+        const y1 = y0;
+        return this.areaGen([
+            { y0, y1, x: xRange[0] },
+            { y0, y1, x: xRange[1] },
+        ]);
+    }
+}
+Area.selectors = style;
+
+export { Area };
+//# sourceMappingURL=index.js.map

package/components/area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/area/index.ts"],"sourcesContent":["import { select } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { area, Area as AreaInterface } from 'd3-shape'\nimport { interpolatePath } from 'd3-interpolate-path'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { getNumber, getString, isArray, isNumber, getStackedExtent, getStackedData, filterDataByRange } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { Curve } from 'types/curve'\nimport { NumericAccessor } from 'types/accessor'\n\n// Local Types\nimport { AreaDatum } from './types'\n\n// Config\nimport { AreaConfig, AreaConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Area<Datum> extends XYComponentCore<Datum, AreaConfig<Datum>, AreaConfigInterface<Datum>> {\n  static selectors = s\n  stacked = true\n  config: AreaConfig<Datum> = new AreaConfig()\n  areaGen: AreaInterface<AreaDatum>\n  private _prevNegative: boolean[] | undefined // To help guessing the stack direction when an accessor was set to null or 0\n\n  events = {\n    [Area.selectors.area]: {},\n  }\n\n  constructor (config?: AreaConfigInterface<Datum>) {\n    super()\n    if (config) this.config.init(config)\n  }\n\n  _render (customDuration?: number): void {\n    super._render(customDuration)\n    const { config, datamodel: { data } } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    const curveGen = Curve[config.curveType]\n    this.areaGen = area<AreaDatum>()\n      .x(d => d.x)\n      .y0(d => d.y0)\n      .y1(d => {\n        const isSmallerThanPixel = Math.abs(d.y1 - d.y0) < 1\n        return d.y1 - ((isSmallerThanPixel && config.minHeight1Px) ? 1 : 0)\n      })\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n    const areaDataX = data.map((d, i) => this.xScale(getNumber(d, config.x, i)))\n\n    const stacked = getStackedData(data, config.baseline, yAccessors, this._prevNegative)\n    this._prevNegative = stacked.map(s => !!s.negative)\n    const stackedData: AreaDatum[][] = stacked.map(\n      arr => arr.map(\n        (d, j) => ({\n          y0: this.yScale(d[0]),\n          y1: this.yScale(d[1]),\n          x: areaDataX[j],\n        })\n      )\n    )\n\n    // We reverse the data in order to have the first areas to be displayed on top\n    //   for better visibility when they're close to zero\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = stackedData.reverse()\n    const areas = this.g\n      .selectAll<SVGPathElement, AreaDatum>(`.${s.area}`)\n      .data(stackedDataReversed)\n\n    const areasEnter = areas.enter().append('path')\n      .attr('class', s.area)\n      .attr('d', d => this.areaGen(d) || this._emptyPath())\n      .style('opacity', 0)\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n\n    const areasMerged = smartTransition(areasEnter.merge(areas), duration)\n      .style('opacity', (d, i) => {\n        const isDefined = d.some(p => (p.y0 - p.y1) !== 0)\n        return isDefined ? getNumber(d, config.opacity, areaMaxIdx - i) : 0\n      })\n      .style('fill', (d, i) => getColor(data, config.color, areaMaxIdx - i))\n      .style('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n\n    if (duration) {\n      const transition = areasMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      transition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d')\n        const next = this.areaGen(d) || this._emptyPath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      areasMerged.attr('d', d => this.areaGen(d) || this._emptyPath())\n    }\n\n    smartTransition(areas.exit(), duration)\n      .style('opacity', 0)\n      .remove()\n  }\n\n  getYDataExtent (scaleByVisibleData: boolean): number[] {\n    const { config, datamodel } = this\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, this.xScale.domain() as [number, number], config.x) : datamodel.data\n    return getStackedExtent(data, config.baseline, ...yAccessors)\n  }\n\n  _emptyPath (): string {\n    const xRange = this.xScale.range()\n    const yDomain = this.yScale.domain() as number[]\n\n    const y0 = this.yScale((yDomain[0] + yDomain[1]) / 2)\n    const y1 = y0\n\n    return this.areaGen([\n      { y0, y1, x: xRange[0] },\n      { y0, y1, x: xRange[1] },\n    ])\n  }\n}\n"],"names":["s.area","s"],"mappings":"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"}

package/components/area/style.d.ts

@@ -0,0 +1,3 @@
+export declare const root: string;
+export declare const globalStyles: void;
+export declare const area: string;

package/{src/components/area/style.ts → components/area/style.js}

@@ -1,11 +1,9 @@
-import { css, injectGlobal } from '@emotion/css'
+import { css, injectGlobal } from '@emotion/css';
 
-
-export const root = css`
+const root = css `
   label: area-component;
-`
-
-export const globalStyles = injectGlobal`
+`;
+const globalStyles = injectGlobal `
   :root {
     --vis-area-cursor: default;
     --vis-area-fill-opacity: 1;
@@ -24,8 +22,8 @@ export const globalStyles = injectGlobal`
     --vis-area-stroke-color: var(--vis-dark-area-stroke-color);
   }
 
-`
-export const area = css`
+`;
+const area = css `
   label: area;
   cursor: var(--vis-area-cursor);
   fill-opacity: var(--vis-area-fill-opacity);
@@ -38,4 +36,7 @@ export const area = css`
     fill-opacity: var(--vis-area-hover-fill-opacity);
     stroke-width: var(--vis-area-hover-stroke-width);
   }
-`
+`;
+
+export { area, globalStyles, root };
+//# sourceMappingURL=style.js.map

package/components/area/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/area/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\n\nexport const root = css`\n  label: area-component;\n`\n\nexport const globalStyles = injectGlobal`\n  :root {\n    --vis-area-cursor: default;\n    --vis-area-fill-opacity: 1;\n    --vis-area-stroke-color: none;\n    --vis-area-stroke-width: 0px;\n    --vis-area-stroke-dasharray: none;\n    --vis-area-stroke-opacity: 1;\n    --vis-area-hover-fill-opacity: none;\n    --vis-area-hover-stroke-width: none;\n\n    /* Dark Theme */\n    --vis-dark-area-stroke-color: none;\n  }\n\n  body.theme-dark ${`.${root}`} {\n    --vis-area-stroke-color: var(--vis-dark-area-stroke-color);\n  }\n\n`\nexport const area = css`\n  label: area;\n  cursor: var(--vis-area-cursor);\n  fill-opacity: var(--vis-area-fill-opacity);\n  stroke-width: var(--vis-area-stroke-width);\n  stroke-dasharray: var(--vis-area-stroke-dasharray);\n  stroke: var(--vis-area-stroke-color);\n  stroke-opacity: var(--vis-area-stroke-opacity);\n\n  &:hover {\n    fill-opacity: var(--vis-area-hover-fill-opacity);\n    stroke-width: var(--vis-area-hover-stroke-width);\n  }\n`\n"],"names":[],"mappings":";;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;AAepB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;EAI7B;AACM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;"}

package/components/area/types.d.ts

@@ -0,0 +1,6 @@
+/** Data type for Area Generator: [y0, y1, x] */
+export declare type AreaDatum = {
+    y0: number;
+    y1: number;
+    x: number;
+};

package/components/axis/config.d.ts

@@ -0,0 +1,71 @@
+import { XYComponentConfigInterface, XYComponentConfig } from "../../core/xy-component/config";
+import { AxisType } from "./types";
+import { Position } from "../../types/position";
+import { FitMode, TrimMode, TextAlign } from "../../types/text";
+export interface AxisConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {
+    /** Axis position: `Position.Top`, `Position.Bottom`, `Position.Right` or `Position.Left`. Default: `undefined` */
+    position?: Position | string;
+    /** Axis type: `AxisType.X` or `AxisType.Y` */
+    type?: AxisType | string;
+    /** Extend the axis domain line to be full width or full height. Default: `true` */
+    fullSize?: boolean;
+    /** Axis label. Default: `undefined` */
+    label?: string;
+    /** Font size of the axis label as CSS string. Default: `null` */
+    labelFontSize?: string | null;
+    /** Distance between the axis and the label in pixels. Default: `8` */
+    labelMargin?: number;
+    /** Sets whether to draw the grid lines or not. Default: `true` */
+    gridLine?: boolean;
+    /** Sets whether to draw the tick lines or not. Default: `true` */
+    tickLine?: boolean;
+    /** Sets whether to draw the domain line or not. Default: `true` */
+    domainLine?: boolean;
+    /** Draw the min and max axis ticks only. Default: `false` */
+    minMaxTicksOnly?: boolean;
+    /** Tick label formatter function. Default: `undefined` */
+    tickFormat?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string);
+    /** Explicitly set tick values. Default: `undefined` */
+    tickValues?: number[];
+    /** Set the approximate number of axis ticks (will be passed to D3's axis constructor). Default: `undefined` */
+    numTicks?: number;
+    /** Tick text fit mode: `FitMode.Wrap` or `FitMode.Trim`. Default: `FitMode.Wrap`. */
+    tickTextFitMode?: FitMode | string;
+    /** Maximum width in pixels for the tick text to be wrapped or trimmed. Default: `undefined` */
+    tickTextWidth?: number;
+    /** Tick text wrapping separator. String or array of strings. Default: `' '` */
+    tickTextSeparator?: string | string[];
+    /** Force word break for ticks when they don't fit. Default: `false` */
+    tickTextForceWordBreak?: boolean;
+    /** Tick text trim mode: `TrimMode.Start`, `TrimMode.Middle` or `TrimMode.End`. Default: `TrimMode.Middle` */
+    tickTextTrimType?: TrimMode | string;
+    /** Font size of the tick text as CSS string. Default: `null` */
+    tickTextFontSize?: string | null;
+    /** Text alignment for ticks: `TextAlign.Left`, `TextAlign.Center` or `TextAlign.Right`. Default: `undefined` */
+    tickTextAlign?: TextAlign | string;
+    /** The spacing in pixels between the tick and it's label. Default: `8` */
+    tickPadding?: number;
+}
+export declare class AxisConfig<Datum> extends XYComponentConfig<Datum> implements AxisConfigInterface<Datum> {
+    position: any;
+    type: any;
+    label: any;
+    labelFontSize: any;
+    gridLine: boolean;
+    tickLine: boolean;
+    domainLine: boolean;
+    numTicks: any;
+    minMaxTicksOnly: boolean;
+    tickTextWidth: any;
+    tickTextSeparator: string;
+    tickTextForceWordBreak: boolean;
+    tickTextTrimType: TrimMode;
+    tickTextFitMode: FitMode;
+    tickTextFontSize: any;
+    tickTextAlign: any;
+    labelMargin: number;
+    tickFormat: any;
+    tickValues: any;
+    fullSize: boolean;
+    tickPadding: number;
+}

package/components/axis/config.js

@@ -0,0 +1,32 @@
+import { XYComponentConfig } from '../../core/xy-component/config.js';
+import { TrimMode, FitMode } from '../../types/text.js';
+
+class AxisConfig extends XYComponentConfig {
+    constructor() {
+        super(...arguments);
+        this.position = undefined;
+        this.type = undefined;
+        this.label = undefined;
+        this.labelFontSize = null;
+        this.gridLine = true;
+        this.tickLine = true;
+        this.domainLine = true;
+        this.numTicks = undefined;
+        this.minMaxTicksOnly = false;
+        this.tickTextWidth = undefined;
+        this.tickTextSeparator = ' ';
+        this.tickTextForceWordBreak = false;
+        this.tickTextTrimType = TrimMode.Middle;
+        this.tickTextFitMode = FitMode.Wrap;
+        this.tickTextFontSize = null;
+        this.tickTextAlign = undefined;
+        this.labelMargin = 8;
+        this.tickFormat = undefined;
+        this.tickValues = undefined;
+        this.fullSize = true;
+        this.tickPadding = 8;
+    }
+}
+
+export { AxisConfig };
+//# sourceMappingURL=config.js.map

package/components/axis/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../src/components/axis/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'\n\n// Types\nimport { AxisType } from 'components/axis/types'\nimport { Position } from 'types/position'\nimport { FitMode, TrimMode, TextAlign } from 'types/text'\n\n// We extend partial XY config interface because x and y properties are optional for Axis\nexport interface AxisConfigInterface<Datum> extends Partial<XYComponentConfigInterface<Datum>> {\n  /** Axis position: `Position.Top`, `Position.Bottom`, `Position.Right` or `Position.Left`. Default: `undefined` */\n  position?: Position | string;\n  /** Axis type: `AxisType.X` or `AxisType.Y` */\n  type?: AxisType | string;\n  /** Extend the axis domain line to be full width or full height. Default: `true` */\n  fullSize?: boolean;\n  /** Axis label. Default: `undefined` */\n  label?: string;\n  /** Font size of the axis label as CSS string. Default: `null` */\n  labelFontSize?: string | null;\n  /** Distance between the axis and the label in pixels. Default: `8` */\n  labelMargin?: number;\n  /** Sets whether to draw the grid lines or not. Default: `true` */\n  gridLine?: boolean;\n  /** Sets whether to draw the tick lines or not. Default: `true` */\n  tickLine?: boolean;\n  /** Sets whether to draw the domain line or not. Default: `true` */\n  domainLine?: boolean;\n  /** Draw the min and max axis ticks only. Default: `false` */\n  minMaxTicksOnly?: boolean;\n  /** Tick label formatter function. Default: `undefined` */\n  tickFormat?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string);\n  /** Explicitly set tick values. Default: `undefined` */\n  tickValues?: number[];\n  /** Set the approximate number of axis ticks (will be passed to D3's axis constructor). Default: `undefined` */\n  numTicks?: number;\n  /** Tick text fit mode: `FitMode.Wrap` or `FitMode.Trim`. Default: `FitMode.Wrap`. */\n  tickTextFitMode?: FitMode | string;\n  /** Maximum width in pixels for the tick text to be wrapped or trimmed. Default: `undefined` */\n  tickTextWidth?: number;\n  /** Tick text wrapping separator. String or array of strings. Default: `' '` */\n  tickTextSeparator?: string | string[];\n  /** Force word break for ticks when they don't fit. Default: `false` */\n  tickTextForceWordBreak?: boolean;\n  /** Tick text trim mode: `TrimMode.Start`, `TrimMode.Middle` or `TrimMode.End`. Default: `TrimMode.Middle` */\n  tickTextTrimType?: TrimMode | string;\n  /** Font size of the tick text as CSS string. Default: `null` */\n  tickTextFontSize?: string | null;\n  /** Text alignment for ticks: `TextAlign.Left`, `TextAlign.Center` or `TextAlign.Right`. Default: `undefined` */\n  tickTextAlign?: TextAlign | string;\n  /** The spacing in pixels between the tick and it's label. Default: `8` */\n  tickPadding?: number;\n}\n\nexport class AxisConfig<Datum> extends XYComponentConfig<Datum> implements AxisConfigInterface<Datum> {\n  position = undefined\n  type = undefined\n  label = undefined\n  labelFontSize = null\n  gridLine = true\n  tickLine = true\n  domainLine = true\n  numTicks = undefined\n  minMaxTicksOnly = false\n  tickTextWidth = undefined\n  tickTextSeparator = ' '\n  tickTextForceWordBreak = false\n  tickTextTrimType = TrimMode.Middle\n  tickTextFitMode = FitMode.Wrap\n  tickTextFontSize = null\n  tickTextAlign = undefined\n  labelMargin = 8\n  tickFormat = undefined\n  tickValues = undefined\n  fullSize = true\n  tickPadding = 8\n}\n"],"names":[],"mappings":";;;AAqDM,MAAO,UAAkB,SAAQ,iBAAwB,CAAA;AAA/D,IAAA,WAAA,GAAA;;QACE,IAAQ,CAAA,QAAA,GAAG,SAAS,CAAA;QACpB,IAAI,CAAA,IAAA,GAAG,SAAS,CAAA;QAChB,IAAK,CAAA,KAAA,GAAG,SAAS,CAAA;QACjB,IAAa,CAAA,aAAA,GAAG,IAAI,CAAA;QACpB,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;QACf,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;QACf,IAAU,CAAA,UAAA,GAAG,IAAI,CAAA;QACjB,IAAQ,CAAA,QAAA,GAAG,SAAS,CAAA;QACpB,IAAe,CAAA,eAAA,GAAG,KAAK,CAAA;QACvB,IAAa,CAAA,aAAA,GAAG,SAAS,CAAA;QACzB,IAAiB,CAAA,iBAAA,GAAG,GAAG,CAAA;QACvB,IAAsB,CAAA,sBAAA,GAAG,KAAK,CAAA;AAC9B,QAAA,IAAA,CAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAM,CAAA;AAClC,QAAA,IAAA,CAAA,eAAe,GAAG,OAAO,CAAC,IAAI,CAAA;QAC9B,IAAgB,CAAA,gBAAA,GAAG,IAAI,CAAA;QACvB,IAAa,CAAA,aAAA,GAAG,SAAS,CAAA;QACzB,IAAW,CAAA,WAAA,GAAG,CAAC,CAAA;QACf,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;QACtB,IAAU,CAAA,UAAA,GAAG,SAAS,CAAA;QACtB,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAA;QACf,IAAW,CAAA,WAAA,GAAG,CAAC,CAAA;KAChB;AAAA;;;;"}

package/components/axis/index.d.ts

@@ -0,0 +1,44 @@
+import { Selection } from 'd3-selection';
+import { Axis as D3Axis } from 'd3-axis';
+import { XYComponentCore } from "../../core/xy-component";
+import { Position } from "../../types/position";
+import { Spacing } from "../../types/spacing";
+import { TextAlign } from "../../types/text";
+import { AxisConfig, AxisConfigInterface } from './config';
+import * as s from './style';
+export declare class Axis<Datum> extends XYComponentCore<Datum, AxisConfig<Datum>, AxisConfigInterface<Datum>> {
+    static selectors: typeof s;
+    config: AxisConfig<Datum>;
+    axisGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>;
+    gridGroup: Selection<SVGGElement, unknown, SVGGElement, unknown>;
+    private _axisRawBBox;
+    private _axisSizeBBox;
+    private _requiredMargin;
+    private _defaultNumTicks;
+    private _minMaxTicksOnlyEnforceWidth;
+    events: {};
+    constructor(config?: AxisConfigInterface<Datum>);
+    /** Renders axis to an invisible grouped to calculate automatic chart margins */
+    preRender(): void;
+    getPosition(): Position;
+    _getAxisSize(selection: Selection<SVGGElement, unknown, SVGGElement, undefined>): SVGRect;
+    _getRequiredMargin(axisSize?: DOMRect): Spacing;
+    getRequiredMargin(): Spacing;
+    /** Calculates axis transform:translate offset based on passed container margins */
+    getOffset(containerMargin: Spacing): {
+        left: number;
+        top: number;
+    };
+    _render(duration?: number, selection?: Selection<SVGGElement, unknown, SVGGElement, unknown>): void;
+    _buildAxis(): D3Axis<any>;
+    _buildGrid(): D3Axis<any>;
+    _renderAxis(selection?: Selection<SVGGElement, unknown, SVGGElement, unknown>, duration?: number): void;
+    _getNumTicks(): number;
+    _getConfiguredTickValues(): number[] | null;
+    _getFullDomainPath(tickSize?: number): string;
+    _renderAxisLabel(selection?: Selection<SVGGElement, unknown, SVGGElement, unknown>): void;
+    _getLabelDY(): number;
+    _alignTickLabels(): void;
+    _getTickTextAnchor(textAlign: TextAlign): string;
+    _getYTickTextTranslate(textAlign: TextAlign, axisPosition?: Position): number;
+}