@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.6

package/dist/components/carousel/scroll-controller.mjs

@@ -0,0 +1,148 @@
+import { debounce } from '../../internal/debounce.mjs';
+import { prefersReducedMotion } from '../../internal/animate.mjs';
+import { waitForEvent } from '../../internal/event.mjs';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class ScrollController {
+  constructor(host) {
+    this.pointers = /* @__PURE__ */ new Set();
+    this.dragging = false;
+    this.scrolling = false;
+    this.mouseDragging = false;
+    this.host = host;
+    host.addController(this);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.handlePointerDown = this.handlePointerDown.bind(this);
+    this.handlePointerMove = this.handlePointerMove.bind(this);
+    this.handlePointerUp = this.handlePointerUp.bind(this);
+    this.handlePointerUp = this.handlePointerUp.bind(this);
+    this.handleTouchStart = this.handleTouchStart.bind(this);
+    this.handleTouchEnd = this.handleTouchEnd.bind(this);
+  }
+  async hostConnected() {
+    const host = this.host;
+    await host.updateComplete;
+    const scrollContainer = host.scrollContainer;
+    scrollContainer.addEventListener("scroll", this.handleScroll, { passive: true });
+    scrollContainer.addEventListener("pointerdown", this.handlePointerDown);
+    scrollContainer.addEventListener("pointerup", this.handlePointerUp);
+    scrollContainer.addEventListener("pointercancel", this.handlePointerUp);
+    scrollContainer.addEventListener("touchstart", this.handleTouchStart, { passive: true });
+    scrollContainer.addEventListener("touchend", this.handleTouchEnd);
+  }
+  hostDisconnected() {
+    const host = this.host;
+    const scrollContainer = host.scrollContainer;
+    scrollContainer.removeEventListener("scroll", this.handleScroll);
+    scrollContainer.removeEventListener("pointerdown", this.handlePointerDown);
+    scrollContainer.removeEventListener("pointerup", this.handlePointerUp);
+    scrollContainer.removeEventListener("pointercancel", this.handlePointerUp);
+    scrollContainer.removeEventListener("touchstart", this.handleTouchStart);
+    scrollContainer.removeEventListener("touchend", this.handleTouchEnd);
+  }
+  handleScroll() {
+    if (!this.scrolling) {
+      this.scrolling = true;
+      this.host.requestUpdate();
+    }
+    this.handleScrollEnd();
+  }
+  handleScrollEnd() {
+    if (!this.pointers.size) {
+      this.scrolling = false;
+      this.host.scrollContainer.dispatchEvent(
+        new CustomEvent("scrollend", {
+          bubbles: false,
+          cancelable: false
+        })
+      );
+      this.host.requestUpdate();
+    } else {
+      this.handleScrollEnd();
+    }
+  }
+  handlePointerDown(event) {
+    if (event.pointerType === "touch") {
+      return;
+    }
+    this.pointers.add(event.pointerId);
+    const canDrag = this.mouseDragging && !this.dragging && event.button === 0;
+    if (canDrag) {
+      event.preventDefault();
+      this.host.scrollContainer.addEventListener("pointermove", this.handlePointerMove);
+    }
+  }
+  handlePointerMove(event) {
+    const scrollContainer = this.host.scrollContainer;
+    const hasMoved = !!event.movementX || !!event.movementY;
+    if (!this.dragging && hasMoved) {
+      scrollContainer.setPointerCapture(event.pointerId);
+      this.handleDragStart();
+    } else if (scrollContainer.hasPointerCapture(event.pointerId)) {
+      this.handleDrag(event);
+    }
+  }
+  handlePointerUp(event) {
+    this.pointers.delete(event.pointerId);
+    this.host.scrollContainer.releasePointerCapture(event.pointerId);
+    if (this.pointers.size === 0) {
+      this.handleDragEnd();
+    }
+  }
+  handleTouchEnd(event) {
+    for (const touch of event.changedTouches) {
+      this.pointers.delete(touch.identifier);
+    }
+  }
+  handleTouchStart(event) {
+    for (const touch of event.touches) {
+      this.pointers.add(touch.identifier);
+    }
+  }
+  handleDragStart() {
+    const host = this.host;
+    this.dragging = true;
+    host.scrollContainer.style.setProperty("scroll-snap-type", "unset");
+    host.requestUpdate();
+  }
+  handleDrag(event) {
+    this.host.scrollContainer.scrollBy({
+      left: -event.movementX,
+      top: -event.movementY
+    });
+  }
+  async handleDragEnd() {
+    const host = this.host;
+    const scrollContainer = host.scrollContainer;
+    scrollContainer.removeEventListener("pointermove", this.handlePointerMove);
+    this.dragging = false;
+    const startLeft = scrollContainer.scrollLeft;
+    const startTop = scrollContainer.scrollTop;
+    scrollContainer.style.removeProperty("scroll-snap-type");
+    const finalLeft = scrollContainer.scrollLeft;
+    const finalTop = scrollContainer.scrollTop;
+    scrollContainer.style.setProperty("scroll-snap-type", "unset");
+    scrollContainer.scrollTo({ left: startLeft, top: startTop, behavior: "auto" });
+    scrollContainer.scrollTo({ left: finalLeft, top: finalTop, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+    if (this.scrolling) {
+      await waitForEvent(scrollContainer, "scrollend");
+    }
+    scrollContainer.style.removeProperty("scroll-snap-type");
+    host.requestUpdate();
+  }
+}
+__decorateClass([
+  debounce(100)
+], ScrollController.prototype, "handleScrollEnd", 1);
+
+export { ScrollController };

package/dist/components/carousel-item/carousel-item.component.mjs

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import styles from './carousel-item.styles.mjs';
+
+class FlowUiCarouselItem extends FlowRdfElement {
+  /** @internal */
+  static isCarouselItem(node) {
+    return node instanceof Element && node.getAttribute("aria-roledescription") === "slide";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "group");
+  }
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+FlowUiCarouselItem.styles = styles;
+
+export { FlowUiCarouselItem as default };

package/dist/components/carousel-item/carousel-item.mjs

@@ -0,0 +1,5 @@
+import FlowUiCarouselItem from './carousel-item.component.mjs';
+
+
+
+export { FlowUiCarouselItem as default };

package/dist/components/carousel-item/carousel-item.styles.mjs

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    --aspect-ratio: inherit;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    max-height: 100%;
+    aspect-ratio: var(--aspect-ratio);
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+  }
+
+  ::slotted(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+export { styles as default };

package/dist/components/chart/chart.component.mjs

@@ -0,0 +1,82 @@
+import { Chart } from 'chart.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { watch } from '../../internal/watch.mjs';
+import styles from './chart.styles.mjs';
+import { initializeChartJs } from './chartjs-support.mjs';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class FlowUiChart extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this._chartRef = createRef();
+    this.plugins = [];
+  }
+  /** The Chart.js chart instance. */
+  get chart() {
+    return this._chart;
+  }
+  repaint() {
+    if (this._chart) {
+      this._chart.data = this.data;
+      this._chart.options = this.options;
+      this._chart.update();
+    }
+  }
+  firstUpdated() {
+    this._chart = new Chart(this._chartRef.value, {
+      type: this.type,
+      data: this.data,
+      options: this.options,
+      plugins: this.plugins
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    initializeChartJs();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._chart) {
+      this._chart.destroy();
+      this._chart = void 0;
+    }
+  }
+  render() {
+    return html`
+      <div part="base" class="chart">
+        <canvas ${ref(this._chartRef)}></canvas>
+      </div>
+    `;
+  }
+}
+FlowUiChart.styles = styles;
+__decorateClass([
+  property()
+], FlowUiChart.prototype, "type", 2);
+__decorateClass([
+  property({ attribute: false })
+], FlowUiChart.prototype, "options", 2);
+__decorateClass([
+  property({ attribute: false })
+], FlowUiChart.prototype, "data", 2);
+__decorateClass([
+  property({ type: Array })
+], FlowUiChart.prototype, "plugins", 2);
+__decorateClass([
+  watch(["options", "data"], { waitUntilFirstUpdate: true })
+], FlowUiChart.prototype, "repaint", 1);
+
+export { FlowUiChart as default };

package/dist/components/chart/chart.mjs

@@ -0,0 +1,5 @@
+import FlowUiChart from './chart.component.mjs';
+
+
+
+export { FlowUiChart as default };

package/dist/components/chart/chart.styles.mjs

@@ -0,0 +1,80 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+
+    /*
+    Required to allow chart to shrink when used in flexbox or grid layouts
+    Otherwise chart canvas is used as minimum content size of component.
+    */
+
+    min-width: 0;
+    min-height: 0;
+
+    --background-color: var(--flow-ui-chart-background-color, transparent);
+    --text-color: var(--flow-ui-chart-text-color, var(--flow-ui-color-neutral-400, #bbb));
+
+    --axis-color: var(--flow-ui-chart-axis-color, var(--flow-ui-color-neutral-400, #bbb));
+    --x-axis-color: var(--axis-color);
+    --y-axis-color: var(--axis-color);
+
+    --x-axis-tick-color: var(--x-axis-color);
+    --y-axis-tick-color: var(--y-axis-color);
+
+    --axis-grid-color: var(--flow-ui-chart-grid-color, var(--flow-ui-color-neutral-200, #eee));
+    --x-axis-grid-color: var(--axis-grid-color);
+    --y-axis-grid-color: var(--axis-grid-color);
+
+    --axis-label-color: var(--flow-ui-chart-axis-label-color, var(--flow-ui-color-neutral-400, #bbb));
+    --x-axis-label-color: var(--axis-label-color);
+    --y-axis-label-color: var(--axis-label-color);
+
+    --tick-label-color: var(--flow-ui-chart-tick-label-color, var(--flow-ui-color-neutral-400, #bbb));
+    --x-tick-label-color: var(--tick-label-color);
+    --y-tick-label-color: var(--tick-label-color);
+
+    --dataset-stroke-color-0: var(--flow-ui-chart-stroke-color-0, hsl(239.6 88.7% 63.8%));
+    --dataset-fill-color-0: var(--flow-ui-chart-fill-color-0, hsl(239.6 88.7% 63.8%));
+
+    --dataset-stroke-color-1: var(--flow-ui-chart-stroke-color-1, hsl(24.3 100% 50.5%));
+    --dataset-fill-color-1: var(--flow-ui-chart-fill-color-1, hsl(24.3 100% 50.5%));
+
+    --dataset-stroke-color-2: var(--flow-ui-chart-stroke-color-2, hsl(217.8 95.8% 57.4%));
+    --dataset-fill-color-2: var(--flow-ui-chart-fill-color-2, hsl(217.8 95.8% 57.4%));
+
+    --dataset-stroke-color-3: var(--flow-ui-chart-stroke-color-3, hsl(44.7 88% 46%));
+    --dataset-fill-color-3: var(--flow-ui-chart-fill-color-3, hsl(44.7 88% 46%));
+
+    --dataset-stroke-color-4: var(--flow-ui-chart-stroke-color-4, hsl(199.7 85.9% 47.7%));
+    --dataset-fill-color-4: var(--flow-ui-chart-fill-color-4, hsl(199.7 85.9% 47.7%));
+
+    --dataset-stroke-color-5: var(--flow-ui-chart-stroke-color-5, hsl(84.3 74.2% 42.1%));
+    --dataset-fill-color-5: var(--flow-ui-chart-fill-color-5, hsl(84.3 74.2% 42.1%));
+
+    --dataset-stroke-color-6: var(--flow-ui-chart-stroke-color-6, hsl(189.4 78.6% 42.6%));
+    --dataset-fill-color-6: var(--flow-ui-chart-fill-color-6, hsl(189.4 78.6% 42.6%));
+
+    --dataset-stroke-color-7: var(--flow-ui-chart-stroke-color-7, hsl(141.1 64.9% 43%));
+    --dataset-fill-color-7: var(--flow-ui-chart-fill-color-7, hsl(141.1 64.9% 43%));
+
+    --dataset-stroke-color-8: var(--flow-ui-chart-stroke-color-8, hsl(173.1 71% 38.3%));
+    --dataset-fill-color-8: var(--flow-ui-chart-fill-color-8, hsl(173.1 71% 38.3%));
+
+    --dataset-stroke-color-9: var(--flow-ui-chart-stroke-color-9, hsl(292.1 88.4% 57.7%));
+    --dataset-fill-color-9: var(--flow-ui-chart-fill-color-9, hsl(292.1 88.4% 57.7%));
+  }
+
+  .chart {
+    background-color: var(--background-color);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    /* padding: var(--flow-ui-spacing-x-small); */
+  }
+`;
+
+export { styles as default };

package/dist/components/chart/chartjs-plugins/interaction.interpolate.mjs

@@ -0,0 +1,80 @@
+import { isUndefined } from '../../../internal/type-checks.mjs';
+
+function Interpolate(chart, e, options) {
+  const items = [];
+  for (let datasetIndex = 0; datasetIndex < chart.data.datasets.length; datasetIndex++) {
+    chart.data.datasets[datasetIndex].interpolatedXValue = void 0;
+    chart.data.datasets[datasetIndex].interpolatedYValue = void 0;
+    const meta = chart.getDatasetMeta(datasetIndex);
+    if (meta.hidden) {
+      continue;
+    }
+    if (!meta.xAxisID || !meta.yAxisID) {
+      continue;
+    }
+    const xScale = chart.scales[meta.xAxisID];
+    const yScale = chart.scales[meta.yAxisID];
+    const xValue = xScale.getValueForPixel(e.x);
+    const yValue = yScale.getValueForPixel(e.y);
+    if (xScale.type !== "linear" && yScale.type !== "time") {
+      continue;
+    }
+    if (isUndefined(xValue) || isUndefined(yValue)) {
+      continue;
+    }
+    if (xValue > xScale.max || xValue < xScale.min || yValue > yScale.max || yValue < yScale.min) {
+      continue;
+    }
+    const data = chart.data.datasets[datasetIndex].data;
+    const index = data.findIndex((d) => d.x >= xValue);
+    if (index === -1) {
+      continue;
+    }
+    const prev = data[index - 1];
+    const next = data[index];
+    let interpolatedValue = NaN;
+    if (prev && next) {
+      const slope = (next.y - prev.y) / (next.x - prev.x);
+      interpolatedValue = prev.y + (xValue - prev.x) * slope;
+    }
+    if (chart.data.datasets[datasetIndex].steppedLine && prev) {
+      interpolatedValue = prev.y;
+    }
+    if (isNaN(interpolatedValue)) {
+      continue;
+    }
+    const yPosition = yScale.getPixelForValue(interpolatedValue);
+    if (isNaN(yPosition)) {
+      continue;
+    }
+    const fakePoint = {
+      hasValue: function() {
+        return true;
+      },
+      tooltipPosition: function() {
+        return this._model;
+      },
+      getCenterPoint: function() {
+        return this._model;
+      },
+      inRange(mouseX, mouseY) {
+        return Math.pow(mouseX - this._model.x, 2) + Math.pow(mouseY - this._model.y, 2) < Math.pow(20, 2);
+      },
+      _model: { x: e.x, y: yPosition },
+      skip: false,
+      stop: false,
+      options: { hitRadius: 20 },
+      x: xValue,
+      y: interpolatedValue
+    };
+    if (options.intersect && !fakePoint.inRange(e.x, e.y)) {
+      continue;
+    }
+    chart.data.datasets[datasetIndex].interpolatedXValue = xValue;
+    chart.data.datasets[datasetIndex].interpolatedYValue = interpolatedValue;
+    items.push({ datasetIndex, element: fakePoint, index: 0 });
+  }
+  return items;
+}
+
+export { Interpolate as default };

package/dist/components/chart/chartjs-plugins/plugin.flow-ui-colors.mjs

@@ -0,0 +1,135 @@
+import { DoughnutController, PolarAreaController } from 'chart.js';
+import { isDefined } from '../../../internal/type-checks.mjs';
+
+function getBorderColor(i, palette) {
+  return palette.datasetBorderColors[i % palette.datasetBorderColors.length];
+}
+function getBackgroundColor(i, palette) {
+  return palette.datasetBackgroundColors[i % palette.datasetBackgroundColors.length];
+}
+function colorizeDefaultDataset(dataset, i, palette) {
+  dataset.borderColor = getBorderColor(i, palette);
+  dataset.backgroundColor = getBackgroundColor(i, palette);
+  return ++i;
+}
+function colorizeDoughnutDataset(dataset, i, palette) {
+  dataset.backgroundColor = dataset.data.map(() => getBorderColor(i++, palette));
+  return i;
+}
+function colorizePolarAreaDataset(dataset, i, palette) {
+  dataset.backgroundColor = dataset.data.map(() => getBackgroundColor(i++, palette));
+  return i;
+}
+function getPalette(chart) {
+  const chartStyles = window.getComputedStyle(chart.canvas);
+  const textColor = chartStyles.getPropertyValue("--text-color");
+  const datasetBorderColors = Array.from(
+    { length: 10 },
+    (_, i) => chartStyles.getPropertyValue(`--dataset-stroke-color-${i}`)
+  );
+  const datasetBackgroundColors = Array.from(
+    { length: 10 },
+    (_, i) => chartStyles.getPropertyValue(`--dataset-fill-color-${i}`)
+  );
+  const xAxisColor = chartStyles.getPropertyValue("--x-axis-color");
+  const xAxisGridColor = chartStyles.getPropertyValue("--x-axis-grid-color");
+  const xAxisTickColor = chartStyles.getPropertyValue("--x-axis-tick-color");
+  const xAxisLabelColor = chartStyles.getPropertyValue("--x-axis-label-color");
+  const xTickLabelColor = chartStyles.getPropertyValue("--x-tick-label-color");
+  const yAxisColor = chartStyles.getPropertyValue("--y-axis-color");
+  const yAxisGridColor = chartStyles.getPropertyValue("--y-axis-grid-color");
+  const yAxisTickColor = chartStyles.getPropertyValue("--y-axis-tick-color");
+  const yAxisLabelColor = chartStyles.getPropertyValue("--y-axis-label-color");
+  const yTickLabelColor = chartStyles.getPropertyValue("--y-tick-label-color");
+  return {
+    textColor,
+    datasetBorderColors,
+    datasetBackgroundColors,
+    xAxis: {
+      color: xAxisColor,
+      gridColor: xAxisGridColor,
+      tickColor: xAxisTickColor,
+      axisLabelColor: xAxisLabelColor,
+      tickLabelColor: xTickLabelColor
+    },
+    yAxis: {
+      color: yAxisColor,
+      gridColor: yAxisGridColor,
+      tickColor: yAxisTickColor,
+      axisLabelColor: yAxisLabelColor,
+      tickLabelColor: yTickLabelColor
+    }
+  };
+}
+function getDatasetColorizer(chart, palette) {
+  let i = 0;
+  return (dataset, datasetIndex) => {
+    const controller = chart.getDatasetMeta(datasetIndex).controller;
+    if (controller instanceof DoughnutController) {
+      i = colorizeDoughnutDataset(dataset, i, palette);
+    } else if (controller instanceof PolarAreaController) {
+      i = colorizePolarAreaDataset(dataset, i, palette);
+    } else if (controller) {
+      i = colorizeDefaultDataset(dataset, i, palette);
+    }
+  };
+}
+function isCartesianScaleOptions(scale) {
+  return isDefined(scale) && ["linear", "category", "time", "timeseries", "logarithmic"].includes(scale.type);
+}
+function isRadialScaleOptions(scale) {
+  return isDefined(scale) && scale.type === "radialLinear";
+}
+const FlowUiColorsPlugin = {
+  id: "flowUiColors",
+  defaults: {
+    enabled: true,
+    colorDatasets: true,
+    colorAxis: true
+  },
+  beforeLayout(chart, _args, options) {
+    if (!options.enabled) {
+      return;
+    }
+    const palette = getPalette(chart);
+    const {
+      data: { datasets },
+      options: chartOptions
+    } = chart.config;
+    if (!chartOptions) {
+      return;
+    }
+    chartOptions.color = palette.textColor;
+    if (options.colorDatasets) {
+      const colorizer = getDatasetColorizer(chart, palette);
+      datasets.forEach(colorizer);
+    }
+    if (options.colorAxis && chartOptions?.scales) {
+      for (const scale of Object.values(chartOptions.scales)) {
+        if (isCartesianScaleOptions(scale)) {
+          const axisPalette = scale.axis === "x" ? palette.xAxis : palette.yAxis;
+          scale.border = scale.border || {};
+          scale.grid = scale.grid || {};
+          scale.ticks = scale.ticks || {};
+          scale.border.color = axisPalette.color;
+          scale.grid.color = axisPalette.gridColor;
+          scale.grid.tickColor = axisPalette.gridColor;
+          scale.title.color = axisPalette.axisLabelColor;
+          scale.ticks.color = axisPalette.tickLabelColor;
+        } else if (isRadialScaleOptions(scale)) {
+          const axisPalette = palette.xAxis;
+          scale.grid = scale.grid || {};
+          scale.ticks = scale.ticks || {};
+          scale.grid.color = axisPalette.gridColor;
+          scale.grid.tickColor = axisPalette.gridColor;
+          scale.ticks.color = axisPalette.tickLabelColor;
+        }
+      }
+    }
+    if (chartOptions.plugins?.title) {
+      chartOptions.plugins.title.color = palette.textColor;
+    }
+  }
+};
+
+export { FlowUiColorsPlugin as default };

package/dist/components/chart/chartjs-plugins/positioner.cursor.mjs

@@ -0,0 +1,14 @@
+function CursorPositioner(_elements, eventPosition) {
+  const tooltip = this;
+  tooltip.options.caretSize = 0;
+  return {
+    x: eventPosition.x + 10,
+    y: eventPosition.y + 10,
+    yAlign: "top",
+    xAlign: "left",
+    caretSize: 0
+    // You may also include xAlign and yAlign to override those tooltip options.
+  };
+}
+
+export { CursorPositioner as default };

package/dist/components/chart/chartjs-plugins/symlog.scale.mjs

@@ -0,0 +1,42 @@
+import { Scale, LinearScale } from 'chart.js';
+import { scaleSymlog } from 'd3-scale';
+
+class SymlogAxis extends Scale {
+  constructor() {
+    super(...arguments);
+    this._scale = scaleSymlog();
+  }
+  parse(raw, index) {
+    return LinearScale.prototype.parse.apply(this, [raw, index]);
+  }
+  determineDataLimits() {
+    const { min, max } = this.getMinMax(true);
+    this.min = isFinite(min) ? min : 0;
+    this.max = isFinite(max) ? max : 1;
+  }
+  buildTicks() {
+    this._scale.domain([this.min, this.max]);
+    const ticks = this._scale.ticks().map((value) => ({ value }));
+    if (this.min < 1) {
+      ticks.unshift({ value: 0 });
+    }
+    return ticks;
+  }
+  /**
+   * @protected
+   */
+  configure() {
+    super.configure();
+    this._scale.domain([this.min, this.max]);
+  }
+  getPixelForValue(value) {
+    return this.getPixelForDecimal(this._scale(value ?? this.min));
+  }
+  getValueForPixel(pixel) {
+    return this._scale.invert(this.getDecimalForPixel(pixel));
+  }
+}
+SymlogAxis.id = "symlog";
+SymlogAxis.defaults = {};
+
+export { SymlogAxis as default };