@unovis/ts 1.6.6-stellar.1 → 1.6.7

package/components/area/index.js

@@ -2,7 +2,7 @@ import { select } from 'd3-selection';
 import { area, line } from 'd3-shape';
 import { interpolatePath } from 'd3-interpolate-path';
 import { XYComponentCore } from '../../core/xy-component/index.js';
-import { isNumber, isArray, getNumber, getStackedData, getString, getValue, filterDataByRange, getStackedExtent } from '../../utils/data.js';
+import { isNumber, isArray, getNumber, getStackedData, clamp, getString, getValue, filterDataByRange, getStackedExtent } from '../../utils/data.js';
 import { smartTransition } from '../../utils/d3.js';
 import { getColor } from '../../utils/color.js';
 import { Curve } from '../../types/curve.js';
@@ -59,12 +59,16 @@ class Area extends XYComponentCore {
         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.isMostlyNegative);
+        // Clamp to the visible y range so the area and its fill stay within the container
+        const yRange = this.yScale.range();
+        const yRangeMin = Math.min(yRange[0], yRange[1]);
+        const yRangeMax = Math.max(yRange[0], yRange[1]);
         const minHeightCumulativeArray = [];
         const stackedData = stacked.map(arr => arr.map((d, j) => {
             var _a, _b;
             const x = areaDataX[j];
-            const y0 = this.yScale(d[0]);
-            const y1 = this.yScale(d[1]);
+            const y0 = clamp(this.yScale(d[0]), yRangeMin, yRangeMax);
+            const y1 = clamp(this.yScale(d[1]), yRangeMin, yRangeMax);
             const isNegativeArea = y1 > y0;
             // Only apply cumulative adjustment if `config.stackMinHeight` is true
             const cumulative = config.stackMinHeight ? (minHeightCumulativeArray[j] || 0) : 0;
@@ -119,9 +123,7 @@ class Area extends XYComponentCore {
         smartTransition(areas.exit(), duration)
             .style('opacity', 0)
             .remove();
-        if (config.line) {
-            this._renderLines(duration, stackedData);
-        }
+        this._renderLines(duration, config.line ? stackedData : []);
     }
     _renderLines(duration, stackedData) {
         var _a;

package/components/area/index.js.map

@@ -1 +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, line, Line as LineInterface } 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, getValue } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { Curve, CurveType } from 'types/curve'\nimport { NumericAccessor } from 'types/accessor'\nimport { Spacing } from 'types/spacing'\nimport { Direction } from 'types/direction'\n\n// Local Types\nimport { AreaDatum } from './types'\n\n// Config\nimport { AreaDefaultConfig, AreaConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = AreaDefaultConfig as AreaConfigInterface<Datum>\n  public config: AreaConfigInterface<Datum> = this._defaultConfig\n  public stacked = true\n  private _areaGen: AreaInterface<AreaDatum>\n  private _lineGen: LineInterface<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.setConfig(config)\n\n    // Determine if the provided chart should be stacked\n    this.stacked = Array.isArray(this.config.y)\n  }\n\n  get bleed (): Spacing {\n    const { config: { line, lineWidth } } = this\n    if (!line) return { top: 0, bottom: 0, left: 0, right: 0 }\n\n    const yDomain = this.yScale.domain() as [number, number]\n    const yDirection = this.yScale.range()[0] > this.yScale.range()[1]\n      ? Direction.North\n      : Direction.South\n    const isYDirectionSouth = yDirection === Direction.South\n\n    const isLineThick = lineWidth > 3\n    const isLineVeryThick = lineWidth >= 10\n    return {\n      top: !isLineVeryThick && (\n        (!isYDirectionSouth && (yDomain[1] === 0)) || (isYDirectionSouth && (yDomain[0] === 0))\n      ) ? 0 : lineWidth / 2,\n      bottom: !isLineVeryThick && (\n        (!isYDirectionSouth && (yDomain[0] === 0)) || (isYDirectionSouth && (yDomain[1] === 0))\n      ) ? 0 : lineWidth / 2,\n      left: isLineThick ? lineWidth / 2 : 0,\n      right: isLineThick ? lineWidth / 2 : 0,\n    }\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 as CurveType]\n    this._areaGen = area<AreaDatum>()\n      .x(d => d.x)\n      .y0(d => d.y0)\n      .y1(d => d.y1)\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.isMostlyNegative)\n    const minHeightCumulativeArray: number[] = []\n    const stackedData: AreaDatum[][] = stacked.map(\n      arr => arr.map(\n        (d, j) => {\n          const x = areaDataX[j]\n          const y0 = this.yScale(d[0])\n          const y1 = this.yScale(d[1])\n          const isNegativeArea = y1 > y0\n\n          // Only apply cumulative adjustment if `config.stackMinHeight` is true\n          const cumulative = config.stackMinHeight ? (minHeightCumulativeArray[j] || 0) : 0\n          const adjustedY0 = isNegativeArea ? y0 + cumulative : y0 - cumulative\n          const adjustedY1 = isNegativeArea ? y1 + cumulative : y1 - cumulative\n\n          // Calculate height adjustment if needed\n          let heightAdjustment = 0\n          if ((config.minHeight || config.minHeight1Px) &&\n              Math.abs(adjustedY1 - adjustedY0) < (config.minHeight ?? 1)) {\n            heightAdjustment = (config.minHeight ?? 1) - Math.abs(adjustedY1 - adjustedY0)\n\n            // Only update cumulative array if we're stacking min heights\n            if (config.stackMinHeight) {\n              minHeightCumulativeArray[j] = cumulative + heightAdjustment\n            }\n          }\n\n          return {\n            x,\n            y0: adjustedY0,\n            y1: isNegativeArea ? adjustedY1 + heightAdjustment : adjustedY1 - heightAdjustment,\n          }\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(data, 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    if (config.line) {\n      this._renderLines(duration, stackedData)\n    }\n  }\n\n  _renderLines (duration: number, stackedData: AreaDatum[][]): void {\n    const { config, datamodel: { data } } = this\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = [...stackedData].reverse()\n    const colorAccessor = config.lineColor ?? config.color\n    const lines = this.g\n      .selectAll<SVGPathElement, AreaDatum[]>(`.${s.areaLinePath}`)\n      .data(stackedDataReversed)\n\n    const areas = this.g.selectAll(`.${s.area}`).nodes()\n    const linesEnter = lines.enter().insert('path', (d, i) => areas[i + 1])\n      .attr('class', s.areaLinePath)\n      .attr('stroke', (d, i) => getColor(data, colorAccessor, areaMaxIdx - i))\n      .attr('stroke-width', config.lineWidth)\n      .attr('stroke-opacity', 0)\n\n    const linesMerged = smartTransition(linesEnter.merge(lines), duration)\n      .attr('stroke', (d, i) => getColor(data, colorAccessor, areaMaxIdx - i))\n      .attr('stroke-width', config.lineWidth)\n      .attr('stroke-opacity', 1)\n      .attr('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n      .style('stroke-dasharray', (d, i) => getValue<Datum[], number[]>(data, config.lineDashArray, i)?.join(' ') ?? null)\n\n    const curveGen = Curve[config.curveType as CurveType]\n    this._lineGen = line<AreaDatum>()\n      .x(d => d.x)\n      .y(d => d.y1)\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    if (duration) {\n      const lineTransition = linesMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      lineTransition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d') || this._emptyLinePath()\n        const next = this._lineGen(d) || this._emptyLinePath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      linesMerged.attr('d', d => this._lineGen(d) || this._emptyLinePath())\n    }\n\n    smartTransition(lines.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 xDomain = this.xScale.domain() as [number, number]\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, xDomain, config.x, true) : 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  _emptyLinePath (): string {\n    const xRange = this.xScale.range()\n    const yRange = this.yScale.range()\n    return `M${xRange[0]},${yRange[0]} L${xRange[1]},${yRange[0]}`\n  }\n}\n"],"names":["s.area","s.areaLinePath","s"],"mappings":"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"}
+{"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, line, Line as LineInterface } 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, getValue, clamp } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { getColor } from 'utils/color'\n\n// Types\nimport { Curve, CurveType } from 'types/curve'\nimport { NumericAccessor } from 'types/accessor'\nimport { Spacing } from 'types/spacing'\nimport { Direction } from 'types/direction'\n\n// Local Types\nimport { AreaDatum } from './types'\n\n// Config\nimport { AreaDefaultConfig, AreaConfigInterface } from './config'\n\n// Styles\nimport * as s from './style'\n\nexport class Area<Datum> extends XYComponentCore<Datum, AreaConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = AreaDefaultConfig as AreaConfigInterface<Datum>\n  public config: AreaConfigInterface<Datum> = this._defaultConfig\n  public stacked = true\n  private _areaGen: AreaInterface<AreaDatum>\n  private _lineGen: LineInterface<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.setConfig(config)\n\n    // Determine if the provided chart should be stacked\n    this.stacked = Array.isArray(this.config.y)\n  }\n\n  get bleed (): Spacing {\n    const { config: { line, lineWidth } } = this\n    if (!line) return { top: 0, bottom: 0, left: 0, right: 0 }\n\n    const yDomain = this.yScale.domain() as [number, number]\n    const yDirection = this.yScale.range()[0] > this.yScale.range()[1]\n      ? Direction.North\n      : Direction.South\n    const isYDirectionSouth = yDirection === Direction.South\n\n    const isLineThick = lineWidth > 3\n    const isLineVeryThick = lineWidth >= 10\n    return {\n      top: !isLineVeryThick && (\n        (!isYDirectionSouth && (yDomain[1] === 0)) || (isYDirectionSouth && (yDomain[0] === 0))\n      ) ? 0 : lineWidth / 2,\n      bottom: !isLineVeryThick && (\n        (!isYDirectionSouth && (yDomain[0] === 0)) || (isYDirectionSouth && (yDomain[1] === 0))\n      ) ? 0 : lineWidth / 2,\n      left: isLineThick ? lineWidth / 2 : 0,\n      right: isLineThick ? lineWidth / 2 : 0,\n    }\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 as CurveType]\n    this._areaGen = area<AreaDatum>()\n      .x(d => d.x)\n      .y0(d => d.y0)\n      .y1(d => d.y1)\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.isMostlyNegative)\n\n    // Clamp to the visible y range so the area and its fill stay within the container\n    const yRange = this.yScale.range()\n    const yRangeMin = Math.min(yRange[0], yRange[1])\n    const yRangeMax = Math.max(yRange[0], yRange[1])\n\n    const minHeightCumulativeArray: number[] = []\n    const stackedData: AreaDatum[][] = stacked.map(\n      arr => arr.map(\n        (d, j) => {\n          const x = areaDataX[j]\n          const y0 = clamp(this.yScale(d[0]), yRangeMin, yRangeMax)\n          const y1 = clamp(this.yScale(d[1]), yRangeMin, yRangeMax)\n          const isNegativeArea = y1 > y0\n\n          // Only apply cumulative adjustment if `config.stackMinHeight` is true\n          const cumulative = config.stackMinHeight ? (minHeightCumulativeArray[j] || 0) : 0\n          const adjustedY0 = isNegativeArea ? y0 + cumulative : y0 - cumulative\n          const adjustedY1 = isNegativeArea ? y1 + cumulative : y1 - cumulative\n\n          // Calculate height adjustment if needed\n          let heightAdjustment = 0\n          if ((config.minHeight || config.minHeight1Px) &&\n              Math.abs(adjustedY1 - adjustedY0) < (config.minHeight ?? 1)) {\n            heightAdjustment = (config.minHeight ?? 1) - Math.abs(adjustedY1 - adjustedY0)\n\n            // Only update cumulative array if we're stacking min heights\n            if (config.stackMinHeight) {\n              minHeightCumulativeArray[j] = cumulative + heightAdjustment\n            }\n          }\n\n          return {\n            x,\n            y0: adjustedY0,\n            y1: isNegativeArea ? adjustedY1 + heightAdjustment : adjustedY1 - heightAdjustment,\n          }\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(data, 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    this._renderLines(duration, config.line ? stackedData : [])\n  }\n\n  _renderLines (duration: number, stackedData: AreaDatum[][]): void {\n    const { config, datamodel: { data } } = this\n    const areaMaxIdx = stackedData.length - 1\n    const stackedDataReversed = [...stackedData].reverse()\n    const colorAccessor = config.lineColor ?? config.color\n    const lines = this.g\n      .selectAll<SVGPathElement, AreaDatum[]>(`.${s.areaLinePath}`)\n      .data(stackedDataReversed)\n\n    const areas = this.g.selectAll(`.${s.area}`).nodes()\n    const linesEnter = lines.enter().insert('path', (d, i) => areas[i + 1])\n      .attr('class', s.areaLinePath)\n      .attr('stroke', (d, i) => getColor(data, colorAccessor, areaMaxIdx - i))\n      .attr('stroke-width', config.lineWidth)\n      .attr('stroke-opacity', 0)\n\n    const linesMerged = smartTransition(linesEnter.merge(lines), duration)\n      .attr('stroke', (d, i) => getColor(data, colorAccessor, areaMaxIdx - i))\n      .attr('stroke-width', config.lineWidth)\n      .attr('stroke-opacity', 1)\n      .attr('cursor', (d, i) => getString(data, config.cursor, areaMaxIdx - i))\n      .style('stroke-dasharray', (d, i) => getValue<Datum[], number[]>(data, config.lineDashArray, i)?.join(' ') ?? null)\n\n    const curveGen = Curve[config.curveType as CurveType]\n    this._lineGen = line<AreaDatum>()\n      .x(d => d.x)\n      .y(d => d.y1)\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      .curve(curveGen)\n\n    if (duration) {\n      const lineTransition = linesMerged as Transition<SVGPathElement, AreaDatum[], SVGGElement, AreaDatum[]>\n      lineTransition.attrTween('d', (d, i, el) => {\n        const previous = select(el[i]).attr('d') || this._emptyLinePath()\n        const next = this._lineGen(d) || this._emptyLinePath()\n        return interpolatePath(previous, next)\n      })\n    } else {\n      linesMerged.attr('d', d => this._lineGen(d) || this._emptyLinePath())\n    }\n\n    smartTransition(lines.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 xDomain = this.xScale.domain() as [number, number]\n    const data = scaleByVisibleData ? filterDataByRange(datamodel.data, xDomain, config.x, true) : 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  _emptyLinePath (): string {\n    const xRange = this.xScale.range()\n    const yRange = this.yScale.range()\n    return `M${xRange[0]},${yRange[0]} L${xRange[1]},${yRange[0]}`\n  }\n}\n"],"names":["s.area","s.areaLinePath","s"],"mappings":"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"}

package/components/area/style.js

@@ -1,4 +1,5 @@
 import { css, injectGlobal } from '@emotion/css';
+import { darkThemeCssSelectors } from '../../utils/theme.js';
 
 const root = css `
   label: area-component;
@@ -18,7 +19,8 @@ const globalStyles = injectGlobal `
     --vis-dark-area-stroke-color: none;
   }
 
-  body.theme-dark ${`.${root}`} {
+  ${darkThemeCssSelectors} ${`.${root}`} {
+    --vis-area-fill-opacity: 0.5;
     --vis-area-stroke-color: var(--vis-dark-area-stroke-color);
   }
 

package/components/area/style.js.map

@@ -1 +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\nexport const areaLinePath = css`\n  label: areaLinePath;\n  fill: none;\n  stroke-dasharray: var(--vis-line-stroke-dasharray);\n  stroke-dashoffset: var(--vis-line-stroke-dashoffset);\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;;;;;;;;;;;;;EAatB;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"style.js","sources":["../../../src/components/area/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { darkThemeCssSelectors } from 'utils/theme'\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  ${darkThemeCssSelectors} ${`.${root}`} {\n    --vis-area-fill-opacity: 0.5;\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\nexport const areaLinePath = css`\n  label: areaLinePath;\n  fill: none;\n  stroke-dasharray: var(--vis-line-stroke-dasharray);\n  stroke-dashoffset: var(--vis-line-stroke-dashoffset);\n`\n"],"names":[],"mappings":";;;AAIO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;IAepC,qBAAqB,CAAA,CAAA,EAAI,CAAI,CAAA,EAAA,IAAI,CAAE,CAAA,CAAA;;;;;EAKtC;AACM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;EAatB;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA,CAAA;;;;;;;;;"}

package/components/axis/config.d.ts

@@ -4,9 +4,9 @@ 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;
+    position?: Position | `${Position}`;
     /** Axis type: `AxisType.X` or `AxisType.Y` */
-    type?: AxisType | string;
+    type?: AxisType | `${AxisType}`;
     /** Extend the axis domain line to be full width or full height. Default: `true` */
     fullSize?: boolean;
     /** Axis label. Default: `undefined` */
@@ -16,9 +16,9 @@ export interface AxisConfigInterface<Datum> extends Partial<XYComponentConfigInt
     /** Distance between the axis and the label in pixels. Default: `8` */
     labelMargin?: number;
     /** Label text fit mode: `FitMode.Wrap` or `FitMode.Trim`. Default: `FitMode.Wrap`. */
-    labelTextFitMode?: FitMode | string;
+    labelTextFitMode?: FitMode | `${FitMode}`;
     /** Label text trim mode: `TrimMode.Start`, `TrimMode.Middle` or `TrimMode.End`. Default: `TrimMode.Middle` */
-    labelTextTrimType?: TrimMode | string;
+    labelTextTrimType?: TrimMode | `${TrimMode}`;
     /** Font color of the axis label as CSS string. Default: `null` */
     labelColor?: string | null;
     /** Sets whether to draw the grid lines or not. Default: `true` */
@@ -42,7 +42,7 @@ export interface AxisConfigInterface<Datum> extends Partial<XYComponentConfigInt
     /** 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;
+    tickTextFitMode?: FitMode | `${FitMode}`;
     /** 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: `undefined` */
@@ -50,11 +50,11 @@ export interface AxisConfigInterface<Datum> extends Partial<XYComponentConfigInt
     /** 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;
+    tickTextTrimType?: TrimMode | `${TrimMode}`;
     /** 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;
+    tickTextAlign?: TextAlign | `${TextAlign}` | ((tickValue: number | Date, tickIndex: number, tickValues: number[] | Date[], tickPosition: [number, number], componentWidth: number, componentHeight: number) => TextAlign | `${TextAlign}`);
     /** Font color of the tick text as CSS string. Default: `null` */
     tickTextColor?: string | null;
     /** Text rotation angle for ticks. Default: `undefined` */
@@ -66,5 +66,8 @@ export interface AxisConfigInterface<Datum> extends Partial<XYComponentConfigInt
     tickTextHideOverlapping?: boolean;
     /** The spacing in pixels between the tick and it's label. Default: `8` */
     tickPadding?: number;
+    /** The size of the tick marks in pixels. Accepts a single number (applies to both inner and outer ticks)
+     * or a tuple `[innerTickSize, outerTickSize]`. Default: `6` */
+    tickSize?: number | [number, number];
 }
 export declare const AxisDefaultConfig: AxisConfigInterface<unknown>;

package/components/axis/config.js

@@ -1,7 +1,7 @@
 import { XYComponentDefaultConfig } from '../../core/xy-component/config.js';
 import { FitMode, TrimMode } from '../../types/text.js';
 
-const AxisDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { position: undefined, type: undefined, label: undefined, labelFontSize: null, labelTextFitMode: FitMode.Wrap, labelTextTrimType: TrimMode.Middle, gridLine: true, tickLine: true, domainLine: true, numTicks: undefined, minMaxTicksOnly: false, minMaxTicksOnlyWhenWidthIsLess: 250, minMaxTicksOnlyShowGridLines: false, tickTextWidth: undefined, tickTextSeparator: undefined, tickTextForceWordBreak: false, tickTextTrimType: TrimMode.Middle, tickTextFitMode: FitMode.Wrap, tickTextFontSize: null, tickTextAlign: undefined, tickTextColor: null, tickTextAngle: undefined, labelMargin: 8, labelColor: null, tickFormat: undefined, tickValues: undefined, fullSize: true, tickPadding: 8, tickTextHideOverlapping: undefined });
+const AxisDefaultConfig = Object.assign(Object.assign({}, XYComponentDefaultConfig), { position: undefined, type: undefined, label: undefined, labelFontSize: null, labelTextFitMode: FitMode.Wrap, labelTextTrimType: TrimMode.Middle, gridLine: true, tickLine: true, domainLine: true, numTicks: undefined, minMaxTicksOnly: false, minMaxTicksOnlyWhenWidthIsLess: 250, minMaxTicksOnlyShowGridLines: false, tickTextWidth: undefined, tickTextSeparator: undefined, tickTextForceWordBreak: false, tickTextTrimType: TrimMode.Middle, tickTextFitMode: FitMode.Wrap, tickTextFontSize: null, tickTextAlign: undefined, tickTextColor: null, tickTextAngle: undefined, labelMargin: 8, labelColor: null, tickFormat: undefined, tickValues: undefined, fullSize: true, tickPadding: 8, tickSize: 6, tickTextHideOverlapping: undefined });
 
 export { AxisDefaultConfig };
 //# sourceMappingURL=config.js.map

package/components/axis/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/axis/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentDefaultConfig } 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  /** Label text fit mode: `FitMode.Wrap` or `FitMode.Trim`. Default: `FitMode.Wrap`. */\n  labelTextFitMode?: FitMode | string;\n  /** Label text trim mode: `TrimMode.Start`, `TrimMode.Middle` or `TrimMode.End`. Default: `TrimMode.Middle` */\n  labelTextTrimType?: TrimMode | string;\n  /** Font color of the axis label as CSS string. Default: `null` */\n  labelColor?: string | null;\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 only the min and max axis ticks. Default: `false` */\n  minMaxTicksOnly?: boolean;\n  /** Show grid lines for the min and max axis ticks. Default: `false` */\n  minMaxTicksOnlyShowGridLines?: boolean;\n  /** Draw only the min and max axis ticks, when the chart\n   * width is less than the specified value.\n   * Default: `250` */\n  minMaxTicksOnlyWhenWidthIsLess?: number;\n  /** Tick label formatter function. Default: `undefined` */\n  tickFormat?: ((tick: number | Date, i: number, ticks: number[] | 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: `undefined` */\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  /** Font color of the tick text as CSS string. Default: `null` */\n  tickTextColor?: string | null;\n  /** Text rotation angle for ticks. Default: `undefined` */\n  tickTextAngle?: number;\n  /** Hide tick labels that overlap with each other.\n   * To define overlapping, a simple bounding box collision detection algorithm is used.\n   * Which means the result won't be accurate when `tickTextAngle` is specified.\n   * Default: `undefined` */\n  tickTextHideOverlapping?: boolean;\n  /** The spacing in pixels between the tick and it's label. Default: `8` */\n  tickPadding?: number;\n}\n\nexport const AxisDefaultConfig: AxisConfigInterface<unknown> = {\n  ...XYComponentDefaultConfig,\n  position: undefined,\n  type: undefined,\n  label: undefined,\n  labelFontSize: null,\n  labelTextFitMode: FitMode.Wrap,\n  labelTextTrimType: TrimMode.Middle,\n  gridLine: true,\n  tickLine: true,\n  domainLine: true,\n  numTicks: undefined,\n  minMaxTicksOnly: false,\n  minMaxTicksOnlyWhenWidthIsLess: 250,\n  minMaxTicksOnlyShowGridLines: false,\n  tickTextWidth: undefined,\n  tickTextSeparator: undefined,\n  tickTextForceWordBreak: false,\n  tickTextTrimType: TrimMode.Middle,\n  tickTextFitMode: FitMode.Wrap,\n  tickTextFontSize: null,\n  tickTextAlign: undefined,\n  tickTextColor: null,\n  tickTextAngle: undefined,\n  labelMargin: 8,\n  labelColor: null,\n  tickFormat: undefined,\n  tickValues: undefined,\n  fullSize: true,\n  tickPadding: 8,\n  tickTextHideOverlapping: undefined,\n}\n"],"names":[],"mappings":";;;AA0EO,MAAM,iBAAiB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACzB,wBAAwB,CAAA,EAAA,EAC3B,QAAQ,EAAE,SAAS,EACnB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,IAAI,EACnB,gBAAgB,EAAE,OAAO,CAAC,IAAI,EAC9B,iBAAiB,EAAE,QAAQ,CAAC,MAAM,EAClC,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,IAAI,EACd,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,SAAS,EACnB,eAAe,EAAE,KAAK,EACtB,8BAA8B,EAAE,GAAG,EACnC,4BAA4B,EAAE,KAAK,EACnC,aAAa,EAAE,SAAS,EACxB,iBAAiB,EAAE,SAAS,EAC5B,sBAAsB,EAAE,KAAK,EAC7B,gBAAgB,EAAE,QAAQ,CAAC,MAAM,EACjC,eAAe,EAAE,OAAO,CAAC,IAAI,EAC7B,gBAAgB,EAAE,IAAI,EACtB,aAAa,EAAE,SAAS,EACxB,aAAa,EAAE,IAAI,EACnB,aAAa,EAAE,SAAS,EACxB,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,SAAS,EACrB,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,IAAI,EACd,WAAW,EAAE,CAAC,EACd,uBAAuB,EAAE,SAAS;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/axis/config.ts"],"sourcesContent":["import { XYComponentConfigInterface, XYComponentDefaultConfig } 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 | `${Position}`;\n  /** Axis type: `AxisType.X` or `AxisType.Y` */\n  type?: AxisType | `${AxisType}`;\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  /** Label text fit mode: `FitMode.Wrap` or `FitMode.Trim`. Default: `FitMode.Wrap`. */\n  labelTextFitMode?: FitMode | `${FitMode}`;\n  /** Label text trim mode: `TrimMode.Start`, `TrimMode.Middle` or `TrimMode.End`. Default: `TrimMode.Middle` */\n  labelTextTrimType?: TrimMode | `${TrimMode}`;\n  /** Font color of the axis label as CSS string. Default: `null` */\n  labelColor?: string | null;\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 only the min and max axis ticks. Default: `false` */\n  minMaxTicksOnly?: boolean;\n  /** Show grid lines for the min and max axis ticks. Default: `false` */\n  minMaxTicksOnlyShowGridLines?: boolean;\n  /** Draw only the min and max axis ticks, when the chart\n   * width is less than the specified value.\n   * Default: `250` */\n  minMaxTicksOnlyWhenWidthIsLess?: number;\n  /** Tick label formatter function. Default: `undefined` */\n  tickFormat?: ((tick: number | Date, i: number, ticks: number[] | 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 | `${FitMode}`;\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: `undefined` */\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 | `${TrimMode}`;\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 | `${TextAlign}` |\n  ((tickValue: number | Date, tickIndex: number, tickValues: number[] | Date[], tickPosition: [number, number], componentWidth: number, componentHeight: number) => TextAlign | `${TextAlign}`);\n  /** Font color of the tick text as CSS string. Default: `null` */\n  tickTextColor?: string | null;\n  /** Text rotation angle for ticks. Default: `undefined` */\n  tickTextAngle?: number;\n  /** Hide tick labels that overlap with each other.\n   * To define overlapping, a simple bounding box collision detection algorithm is used.\n   * Which means the result won't be accurate when `tickTextAngle` is specified.\n   * Default: `undefined` */\n  tickTextHideOverlapping?: boolean;\n  /** The spacing in pixels between the tick and it's label. Default: `8` */\n  tickPadding?: number;\n  /** The size of the tick marks in pixels. Accepts a single number (applies to both inner and outer ticks)\n   * or a tuple `[innerTickSize, outerTickSize]`. Default: `6` */\n  tickSize?: number | [number, number];\n}\n\nexport const AxisDefaultConfig: AxisConfigInterface<unknown> = {\n  ...XYComponentDefaultConfig,\n  position: undefined,\n  type: undefined,\n  label: undefined,\n  labelFontSize: null,\n  labelTextFitMode: FitMode.Wrap,\n  labelTextTrimType: TrimMode.Middle,\n  gridLine: true,\n  tickLine: true,\n  domainLine: true,\n  numTicks: undefined,\n  minMaxTicksOnly: false,\n  minMaxTicksOnlyWhenWidthIsLess: 250,\n  minMaxTicksOnlyShowGridLines: false,\n  tickTextWidth: undefined,\n  tickTextSeparator: undefined,\n  tickTextForceWordBreak: false,\n  tickTextTrimType: TrimMode.Middle,\n  tickTextFitMode: FitMode.Wrap,\n  tickTextFontSize: null,\n  tickTextAlign: undefined,\n  tickTextColor: null,\n  tickTextAngle: undefined,\n  labelMargin: 8,\n  labelColor: null,\n  tickFormat: undefined,\n  tickValues: undefined,\n  fullSize: true,\n  tickPadding: 8,\n  tickSize: 6,\n  tickTextHideOverlapping: undefined,\n}\n"],"names":[],"mappings":";;;AA8EO,MAAM,iBAAiB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACzB,wBAAwB,CAAA,EAAA,EAC3B,QAAQ,EAAE,SAAS,EACnB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,IAAI,EACnB,gBAAgB,EAAE,OAAO,CAAC,IAAI,EAC9B,iBAAiB,EAAE,QAAQ,CAAC,MAAM,EAClC,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,IAAI,EACd,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,SAAS,EACnB,eAAe,EAAE,KAAK,EACtB,8BAA8B,EAAE,GAAG,EACnC,4BAA4B,EAAE,KAAK,EACnC,aAAa,EAAE,SAAS,EACxB,iBAAiB,EAAE,SAAS,EAC5B,sBAAsB,EAAE,KAAK,EAC7B,gBAAgB,EAAE,QAAQ,CAAC,MAAM,EACjC,eAAe,EAAE,OAAO,CAAC,IAAI,EAC7B,gBAAgB,EAAE,IAAI,EACtB,aAAa,EAAE,SAAS,EACxB,aAAa,EAAE,IAAI,EACnB,aAAa,EAAE,SAAS,EACxB,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,SAAS,EACrB,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,IAAI,EACd,WAAW,EAAE,CAAC,EACd,QAAQ,EAAE,CAAC,EACX,uBAAuB,EAAE,SAAS;;;;"}

package/components/axis/index.d.ts

@@ -30,6 +30,7 @@ export declare class Axis<Datum> extends XYComponentCore<Datum, AxisConfigInterf
         top: number;
     };
     _render(duration?: number, selection?: Selection<SVGGElement, unknown, SVGGElement, unknown>): void;
+    private _getAxisGen;
     private _buildAxis;
     private _buildGrid;
     private _renderAxis;

package/components/axis/index.js

@@ -6,7 +6,7 @@ import { Position } from '../../types/position.js';
 import { VerticalAlign, FitMode, TextAlign } from '../../types/text.js';
 import { smartTransition } from '../../utils/d3.js';
 import { trimSVGText, renderTextToSvgTextElement, wrapSVGText, textAlignToAnchor } from '../../utils/text.js';
-import { isEqual } from '../../utils/data.js';
+import { isEqual, isFunction } from '../../utils/data.js';
 import { rectIntersect } from '../../utils/misc.js';
 import { getFontWidthToHeightRatio } from '../../styles/index.js';
 import { AxisType } from './types.js';
@@ -23,6 +23,7 @@ class Axis extends XYComponentCore {
         this.events = {};
         if (config)
             this.setConfig(config);
+        this.g.attr('axis-type', this.config.type);
         this.axisGroup = this.g.append('g');
         this.gridGroup = this.g.append('g')
             .attr('class', grid);
@@ -32,11 +33,11 @@ class Axis extends XYComponentCore {
         const { config } = this;
         const axisRenderHelperGroup = this.g.append('g').attr('opacity', 0);
         this._renderAxis(axisRenderHelperGroup, 0);
-        // Store axis raw BBox (without the label) for further label positioning (see _renderAxisLabel)
-        this._axisRawBBox = axisRenderHelperGroup.node().getBBox();
         // Align tick text
         if (config.tickTextAlign)
-            this._alignTickLabels();
+            this._alignTickLabels(axisRenderHelperGroup);
+        // Store axis raw BBox (without the label) for further label positioning (see _renderAxisLabel)
+        this._axisRawBBox = axisRenderHelperGroup.node().getBBox();
         // Render label and store total axis size and required margins
         this._renderAxisLabel(axisRenderHelperGroup);
         this._axisSizeBBox = this._getAxisSize(axisRenderHelperGroup);
@@ -116,57 +117,37 @@ class Axis extends XYComponentCore {
             this._alignTickLabels();
         this._resolveTickLabelOverlap(selection);
     }
-    _buildAxis() {
-        const { config: { type, position, tickPadding } } = this;
-        const ticks = this._getNumTicks();
-        switch (type) {
-            case AxisType.X:
-                switch (position) {
-                    case Position.Top: return axisTop(this.xScale).ticks(ticks).tickPadding(tickPadding);
-                    case Position.Bottom:
-                    default: return axisBottom(this.xScale).ticks(ticks).tickPadding(tickPadding);
-                }
-            case AxisType.Y:
-                switch (position) {
-                    case Position.Right: return axisRight(this.yScale).ticks(ticks).tickPadding(tickPadding);
-                    case Position.Left:
-                    default: return axisLeft(this.yScale).ticks(ticks).tickPadding(tickPadding);
-                }
-        }
-    }
-    _buildGrid() {
+    _getAxisGen() {
         const { config } = this;
-        let gridGen;
         switch (config.type) {
             case AxisType.X:
                 switch (config.position) {
-                    case Position.Top: {
-                        gridGen = axisTop(this.xScale);
-                        break;
-                    }
+                    case Position.Top: return axisTop(this.xScale);
                     case Position.Bottom:
-                    default: {
-                        gridGen = axisBottom(this.xScale);
-                        break;
-                    }
+                    default: return axisBottom(this.xScale);
                 }
-                gridGen.tickSize(-this._height);
-                break;
             case AxisType.Y:
                 switch (config.position) {
-                    case Position.Right: {
-                        gridGen = axisRight(this.yScale);
-                        break;
-                    }
+                    case Position.Right: return axisRight(this.yScale);
                     case Position.Left:
-                    default: {
-                        gridGen = axisLeft(this.yScale);
-                        break;
-                    }
+                    default: return axisLeft(this.yScale);
                 }
-                gridGen.tickSize(-this._width);
         }
+    }
+    _buildAxis() {
+        const { config: { tickPadding, tickSize } } = this;
+        const tickSizeInner = Array.isArray(tickSize) ? tickSize[0] : tickSize;
+        const tickSizeOuter = Array.isArray(tickSize) ? tickSize[1] : tickSize;
+        const ticks = this._getNumTicks();
+        const axisGen = this._getAxisGen();
+        axisGen.ticks(ticks).tickPadding(tickPadding).tickSizeInner(tickSizeInner).tickSizeOuter(tickSizeOuter);
+        return axisGen;
+    }
+    _buildGrid() {
+        const { config } = this;
+        const gridGen = this._getAxisGen();
         gridGen
+            .tickSize(config.type === AxisType.X ? -this._height : -this._width)
             .tickSizeOuter(0)
             .tickFormat(() => '');
         const numTicks = this._getNumTicks() * 2;
@@ -225,6 +206,7 @@ class Axis extends XYComponentCore {
             .filter(tickValue => tickValues.some((t) => isEqual(tickValue, t))) // We use isEqual to compare Dates
             .classed(tickLabel, true)
             .classed(tickLabelHideable, Boolean(config.tickTextHideOverlapping))
+            .classed(tickTextExiting, false)
             .style('fill', config.tickTextColor);
         // Marking exiting elements
         selection.selectAll('g.tick > text')
@@ -475,17 +457,26 @@ class Axis extends XYComponentCore {
             ];
         }
     }
-    _alignTickLabels() {
+    _alignTickLabels(axisGroup = this.axisGroup) {
         const { config: { type, tickTextAlign, tickTextAngle, position } } = this;
-        const tickText = this.g.selectAll('g.tick > text');
-        const textAnchor = textAlignToAnchor(tickTextAlign);
-        const translateX = type === AxisType.X
-            ? 0
-            : this._getYTickTextTranslate(tickTextAlign, position);
-        const translateValue = tickTextAngle ? `translate(${translateX},0) rotate(${tickTextAngle})` : `translate(${translateX},0)`;
-        tickText
-            .attr('transform', translateValue)
-            .attr('text-anchor', textAnchor);
+        const activeTickTexts = axisGroup.selectAll(`g.tick > text:not(.${tickTextExiting})`);
+        const ticksData = activeTickTexts.data();
+        activeTickTexts.each((_, i, elements) => {
+            const tickTextElement = elements[i];
+            const tickDatum = ticksData[i];
+            // Compute the tick's target position from the scale rather than reading the DOM transform,
+            // which would return an interpolated value during a transition.
+            const tickPosition = type === AxisType.X
+                ? [this.xScale(tickDatum), 0]
+                : [0, this.yScale(tickDatum)];
+            const textAlign = (isFunction(tickTextAlign) ? tickTextAlign(tickDatum, i, ticksData, tickPosition, this._width, this._height) : tickTextAlign);
+            const textAnchor = textAlignToAnchor(textAlign);
+            const translateX = type === AxisType.X ? 0 : this._getYTickTextTranslate(textAlign, position);
+            const translateValue = tickTextAngle ? `translate(${translateX},0) rotate(${tickTextAngle})` : `translate(${translateX},0)`;
+            select(tickTextElement)
+                .attr('transform', translateValue)
+                .attr('text-anchor', textAnchor);
+        });
     }
     _getYTickTextTranslate(textAlign, axisPosition = Position.Left) {
         var _a, _b, _c, _d;