@pie-element/number-line 0.1.0

package/src/delivery/number-line/graph/stacks.ts

@@ -0,0 +1,82 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/stacks.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+export default function Stacks(domain) {
+  let stacks = [new Stack(domain)];
+
+  this.add = function (el) {
+    let stack = stacks.find((s) => s.add(el));
+    if (stacks.indexOf(stack) === -1) {
+      stack = new Stack(domain);
+      stacks.push(stack);
+      stack.add(el);
+    }
+    return stacks.indexOf(stack);
+  };
+}
+
+export function Stack(domain) {
+  let elements = [];
+  /**
+   * Try to add the element to the stack.
+   * @return boolean true if added, else false
+   */
+  this.add = function (el) /*boolean*/ {
+    let elementRange = getRange(el);
+    if (elementRange.left < domain.min || elementRange.right > domain.max) {
+      return false;
+    }
+
+    let touchesExisting = elements.some((e) => touchesRange(e, elementRange));
+
+    if (touchesExisting) {
+      return false;
+    } else {
+      elements.push(el);
+      return true;
+    }
+  };
+
+  this.elements = function () {
+    return elements;
+  };
+
+  let touchesRange = (el, candidate) => {
+    let existing = getRange(el);
+    let leftOf = candidate.left < existing.left && candidate.right < existing.left;
+    let rightOf = candidate.left > existing.right && candidate.right > existing.right;
+    return !(leftOf || rightOf);
+  };
+
+  let getRange = (el) => {
+    let { type, position } = el;
+
+    switch (type) {
+      case 'point':
+        return { left: position, right: position };
+      case 'line':
+        return position;
+      case 'ray':
+        if (el.direction === 'positive') {
+          return {
+            left: position,
+            right: domain.max,
+          };
+        } else {
+          return {
+            left: domain.min,
+            right: position,
+          };
+        }
+      default:
+        return null;
+    }
+  };
+}

package/src/delivery/number-line/graph/tick-utils.ts

@@ -0,0 +1,369 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/tick-utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import * as math from 'mathjs';
+import { isNumber, isObject, uniqWith } from 'lodash-es';
+
+// All these functions are duplicated in  controller/src/tickUtils
+
+/*This will store the possible decimal tick values*/
+export const decimalTickValues = [0.001, 0.01, 0.02, 0.04, 0.05, 0.1, 0.125, 0.2, 0.25, 0.5];
+
+/*This will store the possible fraction tick values*/
+export const fractionTickValues = [
+  '1/1000',
+  '1/100',
+  '1/64',
+  '1/50',
+  '1/32',
+  '1/25',
+  '1/20',
+  '1/16',
+  '1/15',
+  '1/12',
+  '1/10',
+  '1/9',
+  '1/8',
+  '1/7',
+  '1/6',
+  '1/5',
+  '1/4',
+  '1/3',
+  '1/2',
+];
+
+/*This const will store possible multiplier for label interval that needs to be multiplied
+with tick interval with denominator represented with object key.*/
+export const labelMultiplier = {
+  1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+  2: [1, 2, 4, 6, 8, 10],
+  3: [1, 3, 6, 9],
+  4: [1, 2, 4, 8],
+  5: [1, 5, 10],
+  6: [1, 2, 3, 6],
+  7: [1, 7],
+  8: [1, 2, 4, 8],
+  9: [1, 3, 9],
+  10: [1, 2, 5, 10],
+  12: [1, 2, 3, 4, 6],
+  15: [1, 3, 5],
+  16: [1, 2, 4, 8],
+  20: [1, 2, 4, 5, 10],
+  25: [1, 5],
+  32: [1, 2, 4, 8],
+  50: [1, 2, 5, 10],
+  64: [1, 2, 4, 8],
+  100: [1, 2, 4, 5, 10],
+  1000: [1, 2, 4, 5, 8, 10],
+};
+
+export const fractionRange = (start, end, interval) => {
+  const m = math.mod(math.abs(start), math.abs(interval));
+  if (!math.equal(m, 0)) {
+    throw new Error('start point must be divisible by interval');
+  }
+
+  if (math.equal(start, end)) {
+    return [];
+  }
+
+  const e = math.subtract(end, math.mod(end, math.abs(interval)));
+
+  const direction = math.larger(interval, 0) ? 'positive' : 'negative';
+
+  if (direction === 'negative' && math.largerEq(end, start)) {
+    throw new Error('start must be > than end when doing a negative decrement');
+  }
+  if (direction === 'positive' && math.smallerEq(end, start)) {
+    throw new Error('start must be < end when doing increments');
+  }
+
+  let compareFn;
+  if (direction === 'positive') {
+    compareFn = math.smallerEq;
+  } else if (math.equal(e, end)) {
+    compareFn = math.largerEq;
+  } else {
+    compareFn = math.larger;
+  }
+
+  const out = [];
+
+  let next = start;
+  while (compareFn(next, e)) {
+    out.push(next);
+    next = math.add(next, interval);
+  }
+  return out;
+};
+
+export const zbrErrorMessage = (start, end) =>
+  `Can only do a positive or negative range, but got: start: ${start} and end:${end}`;
+
+export const zeroBasedRange = (start, end, interval) => {
+  start = math.fraction(start);
+  end = math.fraction(end);
+  interval = math.fraction(interval);
+
+  const length = math.abs(math.subtract(end, start));
+
+  if (math.larger(length, math.abs(end))) {
+    throw new Error(zbrErrorMessage(start, end));
+  }
+  const a = {
+    start: math.abs(start),
+    end: math.abs(end),
+    interval: math.abs(interval),
+    multiplier: math.smaller(interval, 0) ? -1 : 1,
+  };
+
+  const m = math.mod(a.start, a.interval);
+  const s = math.larger(m, 0) ? math.add(math.subtract(a.start, m), a.interval) : a.start;
+
+  const r = fractionRange(s, a.end, a.interval);
+  const out = a.multiplier === -1 ? r.map((v) => math.multiply(v, -1)) : r;
+
+  if (math.smaller(interval, 0)) {
+    out.reverse();
+  }
+  return out;
+};
+
+const fmin = (a, b) => {
+  a = math.fraction(a);
+  b = math.fraction(b);
+  return math.smaller(a, b) ? a : b;
+};
+
+const fmax = (a, b) => {
+  a = math.fraction(a);
+  b = math.fraction(b);
+  return math.larger(a, b) ? a : b;
+};
+/**
+ * the lodash range was causing too much variance in the rounding errors
+ * such that it was hard to round the numbers.
+ * This is a more simplistic version but makes rounding work.
+ */
+export const simpleRange = (start, end, interval) => {
+  start = math.fraction(start);
+  end = math.fraction(end);
+  interval = math.fraction(interval);
+
+  const positiveRange = math.larger(end, 0) ? zeroBasedRange(fmax(0, start), end, interval) : [];
+
+  const negativeRange = math.smaller(start, 0) ? zeroBasedRange(fmin(0, end), start, math.multiply(interval, -1)) : [];
+  let together = negativeRange.concat(positiveRange);
+
+  const out = uniqWith(together, math.equal);
+  return out;
+};
+
+export const closeTo = (a, b, precision) => {
+  precision = precision || 2;
+  const expectedDiff = Math.pow(10, -precision) / 2;
+  const receivedDiff = Math.abs(a - b);
+  return receivedDiff < expectedDiff;
+};
+
+const limit = (v, min, max) => {
+  if (math.smaller(fraction(v), fraction(min))) {
+    return min;
+  }
+
+  if (math.larger(fraction(v), fraction(max))) {
+    return max;
+  }
+
+  return v;
+};
+
+/*
+ * Function to get tick interval limits based on min, max and width entered by the user.
+ * @param domain object containing max and min value.
+ * @param width number represents width of number line.
+ * */
+export const getMinorLimits = (domain, width) => {
+  const end = domain.max - domain.min;
+  const min = math.number(math.multiply(10, math.divide(math.fraction(end), width)));
+  const max = math.number(math.multiply(20, min));
+  return {
+    min: min,
+    max: max,
+  };
+};
+
+export const isMultiple = (multiple, src) => {
+  const mod = math.mod(multiple, src);
+  return math.equal(mod, 0);
+};
+
+/**
+ * Accepts a fraction object {n,d,s} or number.
+ * @param {*} v
+ * @return mathjs.fraction
+ */
+export const fraction = (v) => {
+  if (isObject(v)) {
+    return math.fraction(v.n * v.s, v.d);
+  } else if (isNumber(v)) {
+    return math.fraction(v);
+  }
+};
+
+export const normalizeTicks = (domain, width, ticks, opts) => {
+  const useLimit = opts ? opts.limit !== false : true;
+  const minorLimits = getMinorLimits(domain, width);
+
+  const minor = useLimit ? limit(fraction(ticks.minor), minorLimits.min, minorLimits.max) : fraction(ticks.minor);
+  const major = useLimit ? limit(fraction(ticks.major), minor, math.multiply(minor, 20)) : fraction(ticks.major);
+
+  const isMajorMultiple = isMultiple(major, minor);
+
+  if (!isMajorMultiple) {
+    const multiplier = math.divide(major, minor);
+    const multiplyBy = multiplier <= 2 ? 2 : Math.round(multiplier);
+
+    // major must be a multiple of minor
+    return { minor, major: math.multiply(minor, multiplyBy) };
+  }
+
+  return { major, minor };
+};
+
+/**
+ * Build ticks as an array of mathjs Fractions
+ */
+export const buildTickDataAsFractions = (domain, width, ticks, opts) => {
+  ticks = normalizeTicks(domain, width, ticks, opts);
+  const rng = simpleRange(domain.min, domain.max, ticks.minor);
+
+  const o = rng
+    .filter((x) => math.smallerEq(x, math.fraction(domain.max)))
+    .map((x) => {
+      let type = 'minor';
+      const modulo = math.mod(x, ticks.major);
+
+      if (closeTo(math.number(modulo), 0)) {
+        type = 'major';
+      }
+
+      return { x, type };
+    });
+
+  return o;
+};
+
+/*
+ * This function will generate tick interval values based on min and max limits of ticks.
+ * @param minorLimits object containing min and max values
+ * @return out object containing three arrays 1. fraction values, 2. decimal values,
+ * */
+export const generateMinorValues = (minorLimits) => {
+  let out = { fraction: [], decimal: [] };
+  decimalTickValues.forEach((value) => {
+    if (value >= minorLimits.min && value <= minorLimits.max) {
+      out.decimal.push(value);
+    }
+  });
+  fractionTickValues.forEach((value) => {
+    let decimalValue = math.number(math.fraction(value));
+    if (decimalValue >= minorLimits.min && decimalValue <= minorLimits.max) {
+      out.fraction.push(value);
+    }
+  });
+  return out;
+};
+
+/*
+ * This function will generate label interval values for provided tick interval value.
+ * @param minor number representing tick interval value.
+ * @param domain object containing min and max values.
+ * @param width number representing width of number line.
+ * @return out object containing three arrays 1. fraction values, 2. decimal values,
+ * */
+export const generateMajorValuesForMinor = (minor, domain, width) => {
+  let out = { decimal: [], fraction: [] };
+  let fraction = math.fraction(math.number(math.number(minor)));
+  let n = fraction.n;
+  let d = fraction.d;
+  if (n >= 1 && d === 1) {
+    for (let i = 1; i <= 10; i++) {
+      let num = math.number(math.multiply(n, i));
+      //Here we check if this major value can plot at least 2 points on number line.
+      let ticksData = { minor: minor, major: num };
+      let output = buildTickData(domain, width, ticksData, { fraction: undefined });
+      if (output.filter((x) => x.type === 'major').length > 1) {
+        out.fraction.push(num.toString());
+        out.decimal.push(num);
+      }
+    }
+  } else {
+    for (const multiplierKey in labelMultiplier[d]) {
+      let num = math.multiply(math.fraction(n, d), labelMultiplier[d][multiplierKey]);
+      //Here we check if this major value can plot at least 2 points on number line.
+      let ticksData = { minor: minor, major: math.number(num) };
+      let output = buildTickData(domain, width, ticksData, { fraction: undefined });
+      if (output.filter((x) => x.type === 'major').length > 1) {
+        if (num.d !== 1) {
+          out.fraction.push(num.n + '/' + num.d);
+        } else {
+          out.fraction.push(num.n.toString());
+        }
+        out.decimal.push(math.number(num));
+      }
+    }
+  }
+  return out;
+};
+
+export const buildTickData = (domain, width, ticks, opts) => {
+  const result = buildTickDataAsFractions(domain, width, ticks, opts);
+
+  const out = result.map((o) => (opts.fraction ? o : { ...o, x: math.number(o.x) || 0 }));
+
+  return out;
+};
+
+export const fractionSnapTo = (min, max, interval, value) => {
+  value = fmax(fmin(value, max), min);
+  const mod = value.mod(interval);
+  let v;
+
+  const half = interval.div(2);
+  if (math.largerEq(math.abs(mod), half)) {
+    const d = interval.sub(math.abs(mod));
+    const fn = math.largerEq(value, 0) ? 'add' : 'sub';
+    v = value[fn](d);
+  } else {
+    const fn2 = math.largerEq(value, 0) ? 'sub' : 'add';
+    v = value[fn2](math.abs(mod));
+  }
+  return v;
+};
+
+export const snapTo = (min, max, interval, value) => {
+  const out = fractionSnapTo(math.fraction(min), math.fraction(max), math.fraction(interval), math.fraction(value));
+  return math.number(out);
+};
+
+export const snapElements = (domain, ticks, elements) => {
+  return elements.map((e) => {
+    const size = Number.isFinite(e.size) ? snapTo(0, e.size, ticks.minor, e.size) : undefined;
+    const domainPosition = snapTo(domain.min, domain.max, ticks.minor, e.domainPosition);
+    const out = { ...e, domainPosition };
+
+    if (Number.isFinite(size)) {
+      out.size = size;
+    }
+
+    return out;
+  });
+};

package/src/delivery/number-line/graph/ticks.tsx

@@ -0,0 +1,189 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/graph/ticks.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { buildTickData } from './tick-utils.js';
+import { color } from '@pie-lib/render-ui';
+
+const StyledText: any = styled('text')({
+  userSelect: 'none',
+  textAlign: 'center',
+  fill: color.primary(),
+});
+
+const StyledLine: any = styled('line')({
+  stroke: color.primary(),
+});
+
+export const TickValidator = PropTypes.shape({
+  /** the number of major ticks (including min + max)
+   * to display. cant be lower than 2.
+   */
+  major: (props, propName) => {},
+  /** the number of minor ticks to display between major ticks.
+   * Can't be less than zero.
+   */
+  minor: (props, propName, componentName) => {
+    let minor = props[propName];
+    if (minor <= 0) {
+      return new Error(`Invalid prop ${propName} must be > 0. ${componentName}`);
+    }
+  },
+}).isRequired;
+
+export class Tick extends React.Component {
+  static propTypes = {
+    y: PropTypes.number.isRequired,
+    x: PropTypes.number.isRequired,
+    major: PropTypes.bool,
+    fraction: PropTypes.bool,
+    xScale: PropTypes.func,
+    type: PropTypes.string,
+  };
+
+  static defaultProps = {
+    major: false,
+  };
+
+  constructor(props) {
+    super(props);
+    this.wasRendered = false;
+    this.state = {
+      textBox: {
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0,
+      },
+    };
+    this.resizeObserver = null;
+  }
+
+  updateTextBox() {
+    if (this.text) {
+      const { width, height, x, y } = this.text.getBBox();
+      this.text.setAttribute('x', (width / 2) * -1);
+      this.setState({ textBox: { width, height, x, y } });
+    }
+  }
+
+  componentDidMount() {
+    // Set up ResizeObserver
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateTextBox();
+    });
+
+    if (this.text) {
+      this.resizeObserver.observe(this.text);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+
+  render() {
+    //the domain value
+    let { x, y, type, xScale, fraction } = this.props;
+    const displayFraction = fraction && x.n !== x.d && x.n !== 0 && x.d !== 1;
+    const labelTick = type === 'major';
+    const height = labelTick ? 20 : 10;
+    const { width: textWidth = 0, height: textHeight = 0, x: textX = 0, y: textY = 0 } = this.state.textBox;
+
+    const xText = !fraction ? (
+      Number(x.toFixed(3))
+    ) : !displayFraction ? (
+      x.n * x.s
+    ) : (
+      <React.Fragment>
+        <tspan x="0" dy="0.71em">
+          {x.n * x.s}
+        </tspan>
+        <tspan x="0" dy="1.11em">
+          {x.d}
+        </tspan>
+      </React.Fragment>
+    );
+
+    return (
+      <g opacity="1" transform={`translate(${xScale(x)}, ${y})`}>
+        <StyledLine y1={(height / 2) * -1} y2={height / 2} x1="0.5" x2="0.5" />
+
+        {displayFraction && (
+          <StyledLine
+            x1={textX}
+            x2={textX + textWidth}
+            y1={textY + textHeight / 2}
+            y2={textY + textHeight / 2}
+          />
+        )}
+
+        {labelTick && (
+          <StyledText
+            ref={(text) => (this.text = text)}
+            y="14"
+            width="10"
+            dy="0.71em"
+            textAnchor={displayFraction && 'middle'}
+          >
+            {xText}
+          </StyledText>
+        )}
+      </g>
+    );
+  }
+}
+
+export class Ticks extends React.Component {
+  static contextTypes = {
+    xScale: PropTypes.func.isRequired,
+  };
+
+  static propTypes = {
+    domain: PropTypes.shape({
+      min: PropTypes.number.isRequired,
+      max: PropTypes.number.isRequired,
+    }).isRequired,
+    fraction: PropTypes.bool,
+    width: PropTypes.number,
+    ticks: TickValidator,
+    y: PropTypes.number.isRequired,
+  };
+
+  render() {
+    let { domain, width, ticks, y, fraction } = this.props;
+    let { xScale } = this.context;
+
+    const tickData = buildTickData(domain, width, ticks, { fraction });
+
+    return (
+      <g>
+        {tickData.map(({ x, type }) => {
+          return (
+            <Tick
+              fraction={fraction}
+              x={x}
+              y={y}
+              type={type}
+              xScale={xScale}
+              key={`${x}-${type}-${fraction}`}
+            />
+          );
+        })}
+      </g>
+    );
+  }
+}
+
+export default Ticks;