@pie-lib/plot 2.7.4-next.0 → 2.8.0-beta.2

package/src/__tests__/root.test.jsx

@@ -0,0 +1,118 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Root } from '../root';
+import { select, mouse } from 'd3-selection';
+
+const scaleMock = () => {
+  const fn = jest.fn((n) => n);
+  fn.invert = jest.fn((n) => n);
+  return fn;
+};
+
+const graphProps = () => ({
+  scale: {
+    x: scaleMock(),
+    y: scaleMock(),
+  },
+  snap: {
+    x: jest.fn((n) => n),
+    y: jest.fn((n) => n),
+  },
+  domain: {
+    min: 0,
+    max: 1,
+    step: 1,
+  },
+  range: {
+    min: 0,
+    max: 1,
+    step: 1,
+  },
+  size: {
+    width: 400,
+    height: 400,
+  },
+});
+
+const wrapper = (props) => {
+  props = {
+    classes: {},
+    graphProps: graphProps(),
+    ...props,
+  };
+
+  return shallow(<Root {...props}>hi</Root>, { disableLifecycleMethods: true });
+};
+
+jest.mock('d3-selection', () => ({
+  select: jest.fn(),
+  mouse: jest.fn(),
+}));
+
+describe('root', () => {
+  describe('snapshot', () => {
+    it('matches', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('mousemove', () => {
+      describe('mount/unmount', () => {
+        it('adds mousemove listener on compenentDidMount', () => {
+          const w = wrapper();
+          const g = {
+            on: jest.fn(),
+          };
+          select.mockReturnValue(g);
+          w.instance().componentDidMount();
+          expect(g.on).toHaveBeenCalledWith('mousemove', expect.any(Function));
+        });
+        it('unsets mousemove listener on componentWillUnmount', () => {
+          const w = wrapper();
+          const g = {
+            on: jest.fn(),
+          };
+          select.mockReturnValue(g);
+          w.instance().componentWillUnmount();
+          expect(g.on).toHaveBeenCalledWith('mousemove', null);
+        });
+      });
+
+      describe('mouseMove function', () => {
+        let onMouseMove, w, gp;
+        beforeEach(() => {
+          onMouseMove = jest.fn();
+          gp = graphProps();
+          w = wrapper({
+            onMouseMove,
+            graphProps: gp,
+          });
+          mouse.mockReturnValue([0, 0]);
+          const g = { _groups: [[[0, 0]]] };
+          w.instance().mouseMove(g);
+        });
+        it('calls mouse', () => {
+          expect(mouse).toHaveBeenCalledWith([0, 0]);
+        });
+        it('calls, scale.x.invert', () => {
+          expect(gp.scale.x.invert).toHaveBeenCalledWith(0);
+        });
+        it('calls, scale.y.invert', () => {
+          expect(gp.scale.y.invert).toHaveBeenCalledWith(0);
+        });
+        it('calls, snap.x', () => {
+          expect(gp.snap.x).toHaveBeenCalledWith(0);
+        });
+        it('calls, snap.y', () => {
+          expect(gp.snap.y).toHaveBeenCalledWith(0);
+        });
+
+        it('calls handler', () => {
+          expect(onMouseMove).toHaveBeenCalledWith({ x: 0, y: 0 });
+        });
+      });
+    });
+  });
+});

package/src/__tests__/trig.test.js

@@ -0,0 +1,174 @@
+import {
+  angle,
+  edge,
+  edges,
+  maxEdge,
+  minEdge,
+  toRadians,
+  toDegrees,
+  acuteXAngle,
+  acuteYAngle,
+  diffEdge,
+} from '../trig';
+import { xy } from '../utils';
+import debug from 'debug';
+import { getOpposingSide } from '../trig';
+const log = debug('pie-lib:plot:trig:test');
+
+const vs = (v) => {
+  if (!v) {
+    return '';
+  }
+
+  if (Number.isFinite(v.x) && Number.isFinite(v.y)) {
+    return `[${v.x},${v.y}]`;
+  }
+  return JSON.stringify(v);
+};
+const p = (strings, ...values) => {
+  return strings.reduce((acc, s, index) => {
+    return `${acc}${s}${vs(values[index])}`;
+  }, '');
+};
+describe('trig', () => {
+  describe('angle', () => {
+    const assertAngle = (a, b, expected) => {
+      it(p`${a}, ${b} => ${toDegrees(expected)}`, () => {
+        const result = angle(a, b);
+        expect(result).toBeCloseTo(expected);
+      });
+    };
+
+    assertAngle(xy(0, 0), xy(1, 1), toRadians(45));
+    assertAngle(xy(0, 0), xy(0, 1), toRadians(90));
+    assertAngle(xy(0, 0), xy(-1, 1), toRadians(135));
+    assertAngle(xy(0, 0), xy(-1, 0), toRadians(180));
+    assertAngle(xy(0, 0), xy(-1, -1), toRadians(225));
+    assertAngle(xy(0, 0), xy(0, -1), toRadians(270));
+    assertAngle(xy(0, 0), xy(1, -1), toRadians(315));
+    assertAngle(xy(1, 1), xy(0, 0), toRadians(225));
+    assertAngle(xy(0, 0), xy(1, 1), toRadians(45));
+    assertAngle(xy(0, 0), xy(2, 1), toRadians(26.565));
+    assertAngle(xy(0, 0), xy(3, 1), toRadians(18.434));
+    assertAngle(xy(0, 0), xy(4, 1), toRadians(14.036));
+    assertAngle(xy(0, 0), xy(5, 1), toRadians(11.309));
+  });
+
+  describe('acuteXAngle', () => {
+    const assertAcute = (input, expected) => {
+      it(`${toDegrees(input)} => ${toDegrees(expected)}`, () => {
+        const result = acuteXAngle(input);
+        log(`result: ${toDegrees(result)}`);
+        expect(result).toBeCloseTo(expected);
+      });
+    };
+
+    assertAcute(toRadians(45), toRadians(45));
+    assertAcute(toRadians(100), toRadians(80));
+    assertAcute(toRadians(190), toRadians(10));
+    assertAcute(toRadians(350), toRadians(10));
+  });
+
+  describe('acuteYAngle', () => {
+    const assertAcute = (input, expected) => {
+      it(`${toDegrees(input)} => ${toDegrees(expected)}`, () => {
+        const result = acuteYAngle(input);
+        log(`result: ${toDegrees(result)}`);
+        expect(result).toBeCloseTo(expected);
+      });
+    };
+
+    assertAcute(toRadians(45), toRadians(45));
+    assertAcute(toRadians(100), toRadians(10));
+    assertAcute(toRadians(190), toRadians(80));
+    assertAcute(toRadians(350), toRadians(80));
+  });
+
+  describe('edges', () => {
+    const assertEdges = (domain, range) => (from, to, expected) => {
+      it(p`${domain}, ${range} + ${from} -> ${to} => ${expected[0]}${expected[1]}`, () => {
+        const result = edges(domain, range)(from, to);
+        expect(result[0].x).toBeCloseTo(expected[0].x);
+        expect(result[0].y).toBeCloseTo(expected[0].y);
+        expect(result[1].x).toBeCloseTo(expected[1].x);
+        expect(result[1].y).toBeCloseTo(expected[1].y);
+      });
+    };
+
+    const one = assertEdges({ min: -4, max: 4 }, { min: -4, max: 4 });
+    one(xy(0, 0), xy(1, 1), [xy(4, 4), xy(-4, -4)]);
+    one(xy(0, 0), xy(2, 1), [xy(4, 2), xy(-4, -2)]);
+    one(xy(1, 1), xy(2, 2), [xy(4, 4), xy(-4, -4)]);
+    one(xy(1, 0), xy(2, 0), [xy(4, 0), xy(-4, 0)]);
+    one(xy(1, 0), xy(-2, 0), [xy(-4, 0), xy(4, 0)]);
+
+    /**
+     * domain {min: -5, max: 5, padding: 0, step: 1, labelStep: 1}labelStep: 1max: 5min: -5padding: 0step: 1__proto__: Object range:  {min: -5, max: 5, padding: 0, step: 1, labelStep: 1} a: {x: -5, y: 0} b: {x: -5, y: 2} edges: Point {x: -5, y: 5} Point {x: -5, y: 2}
+     */
+    const lineIssue = assertEdges({ min: -5, max: 5 }, { min: -5, max: 5 });
+    lineIssue(xy(-5, -0), xy(-5, 2), [xy(-5, 5), xy(-5, -5)]);
+  });
+
+  describe('diffEdge', () => {
+    const assertDiffEdge = (bounds, from, to, expected) => {
+      it(p`<${bounds}> ${from} -> ${to} => ${expected}`, () => {
+        const result = diffEdge(bounds, from, to);
+        expect(result.x).toBeCloseTo(expected.x);
+        expect(result.y).toBeCloseTo(expected.y);
+      });
+    };
+
+    const twoTwo = assertDiffEdge.bind(null, xy(2, 2));
+    twoTwo(xy(0, 0), xy(1, 1), xy(2, 2));
+    twoTwo(xy(0, 0), xy(1, 2), xy(1, 2));
+    twoTwo(xy(0, 0), xy(2, 2), xy(2, 2));
+    twoTwo(xy(0, 0), xy(2, 2), xy(2, 2));
+    twoTwo(xy(0, 0), xy(-1, 1), xy(-2, 2));
+    twoTwo(xy(0, 0), xy(-1, -1), xy(-2, -2));
+    const fourFour = assertDiffEdge.bind(null, xy(4, 4));
+
+    fourFour(xy(0, 0), xy(1, 1), xy(4, 4));
+    fourFour(xy(0, 0), xy(1, 2), xy(2, 4));
+    fourFour(xy(0, 0), xy(2, 1), xy(4, 2));
+    fourFour(xy(0, 0), xy(-1, 1), xy(-4, 4));
+    fourFour(xy(0, 0), xy(-1, 1), xy(-4, 4));
+
+    assertDiffEdge(xy(-4, -4), xy(0, 0), xy(-1, -1), xy(-4, -4));
+    assertDiffEdge(xy(4, 4), xy(1, 1), xy(2, 2), xy(4, 4));
+    assertDiffEdge(xy(4, 4), xy(2, 2), xy(3, 3), xy(4, 4));
+    assertDiffEdge(xy(-4, -4), xy(-1, -1), xy(-2, -2), xy(-4, -4));
+    assertDiffEdge(xy(-4, 4), xy(-1, -1), xy(-2, 0), xy(-4, 2));
+
+    const lineIssue = assertDiffEdge.bind(null, xy(-5, -5));
+
+    lineIssue(xy(-5, 2), xy(-5, 0), xy(-5, -5));
+    //Top Right
+    assertDiffEdge(xy(5, 5), xy(0, 5), xy(2, 5), xy(5, 5));
+    assertDiffEdge(xy(5, 5), xy(5, 0), xy(5, 1), xy(5, 5));
+
+    // //Bottom Right
+    assertDiffEdge(xy(5, -5), xy(5, 0), xy(5, -0.1), xy(5, -5));
+    assertDiffEdge(xy(5, -5), xy(0, -5), xy(1, -5), xy(5, -5));
+
+    //Top Left
+    assertDiffEdge(xy(-5, 5), xy(-5, 0), xy(-5, 0.1), xy(-5, 5));
+    assertDiffEdge(xy(-5, 5), xy(0, 5), xy(-1, 5), xy(-5, 5));
+
+    //Bottom Left
+    assertDiffEdge(xy(-5, -5), xy(-5, 0), xy(-5, -0.1), xy(-5, -5));
+    assertDiffEdge(xy(-5, -5), xy(0, -5), xy(-1, -5), xy(-5, -5));
+  });
+
+  describe('getOpposingSide', () => {
+    const assertOpposingSide = (hyp, angle, expected) => {
+      it(`${hyp}, ${angle} = ${expected}`, () => {
+        const radians = toRadians(angle);
+        const result = getOpposingSide(hyp, radians);
+        expect(result).toBeCloseTo(expected);
+      });
+    };
+
+    assertOpposingSide(1, 45, 0.707);
+    assertOpposingSide(1.25, 45, 0.88);
+  });
+});

package/src/__tests__/utils.test.js

@@ -0,0 +1,233 @@
+import { AssertionError } from 'assert';
+import * as utils from '../utils';
+
+const xy = utils.xy;
+
+const tick = (isMajor, v) => ({
+  major: isMajor,
+  value: v,
+  x: v,
+});
+
+const major = tick.bind(null, true);
+const minor = tick.bind(null, false);
+
+describe('utils', () => {
+  describe('getDelta', () => {
+    const assertDelta = (from, to, delta) => {
+      it(`returns a delta of: ${delta} for ${from} -> ${to}`, () => {
+        const d = utils.getDelta(from, to);
+        expect(d.x).toEqual(delta.x);
+        expect(d.y).toEqual(delta.y);
+      });
+    };
+    assertDelta(xy(0, 0), xy(0, 1), xy(0, 1));
+    assertDelta(xy(0, 1), xy(0, 0), xy(0, -1));
+    assertDelta(xy(1, 1), xy(3, 3), xy(2, 2));
+    assertDelta(xy(-1, -1), xy(3, 3), xy(4, 4));
+    assertDelta(xy(-1, -1), xy(-2, -5), xy(-1, -4));
+  });
+
+  describe('polygonToArea', () => {
+    const assertPolygon = (points, area) => {
+      it(`converts ${points} -> ${area}`, () => {
+        const result = utils.polygonToArea(points);
+        expect(result).toEqual(area);
+      });
+    };
+    assertPolygon([xy(0, 0), xy(1, 1), xy(1, -1)], {
+      left: 0,
+      top: 1,
+      bottom: -1,
+      right: 1,
+    });
+    assertPolygon([xy(0, 0), xy(3, 0), xy(2, -1), xy(4, -3), xy(1, -4), xy(2, -2)], {
+      left: 0,
+      top: 0,
+      bottom: -4,
+      right: 4,
+    });
+  });
+
+  describe('buildTickModel', () => {
+    let scaleFn;
+
+    beforeEach(() => {
+      scaleFn = jest.fn(function(v) {
+        return v;
+      });
+    });
+
+    it('builds major only ticks', () => {
+      let result = utils.buildTickModel({ min: 0, max: 2 }, { minor: 0 }, 1, scaleFn);
+      expect(result).toEqual([major(0), major(1), major(2)]);
+    });
+
+    it('builds minor + major ticks', () => {
+      let result = utils.buildTickModel({ min: 0, max: 2 }, { minor: 1 }, 0.5, scaleFn);
+      expect(result).toEqual([major(0), minor(0.5), major(1), minor(1.5), major(2)]);
+    });
+  });
+
+  describe('snapTo', () => {
+    let assertSnapTo = (min, max, interval, value, expected) => {
+      it(`snaps ${value} to ${expected} with domain ${min}<->${max} with interval: ${interval} `, () => {
+        let result = utils.snapTo(min, max, interval, value);
+        expect(result).toEqual(expected);
+      });
+    };
+
+    describe('with 0, 10, 0.25', () => {
+      let a = assertSnapTo.bind(null, 0, 10, 0.25);
+      a(1, 1);
+      a(1.2, 1.25);
+      a(0.2, 0.25);
+      a(5.2, 5.25);
+      a(5.125, 5.25);
+      a(5.124, 5);
+    });
+
+    describe('with 0, 10, 1', () => {
+      let a = assertSnapTo.bind(null, 0, 10, 1);
+      a(0, 0);
+      a(10, 10);
+      a(100, 10);
+      a(1, 1);
+      a(1.2, 1);
+      a(0.2, 0);
+      a(5.2, 5);
+      a(5.001, 5);
+    });
+  });
+
+  describe('getInterval', () => {
+    let assertGetInterval = (min, max, ticks, expected) => {
+      let paramsDescription = JSON.stringify(ticks);
+      it(`converts: ${paramsDescription} to ${JSON.stringify(expected)}`, () => {
+        let result = utils.getInterval({ min: min, max: max }, ticks);
+        expect(result).toEqual(expected);
+      });
+    };
+
+    describe('with bad params', () => {
+      it('throws an error if min > max', () => {
+        expect(() => {
+          let result = utils.convertFrequencyToInterval(
+            { min: 11, max: 10, tickFrequency: 1, betweenTickCount: 0 },
+            { interval: 10, major: 10 },
+          );
+          console.log('result: ', result);
+        }).toThrow(Error);
+      });
+
+      it('throws an error if min = max', () => {
+        expect(() => {
+          let result = utils.convertFrequencyToInterval(
+            { min: 10, max: 10, tickFrequency: 1, betweenTickCount: 0 },
+            { interval: 10, major: 10 },
+          );
+          console.log('result: ', result);
+        }).toThrow(Error);
+      });
+    });
+
+    describe('with domain 0 -> 1', () => {
+      let a = assertGetInterval.bind(null, 0, 1);
+      a({ major: 2, minor: 0 }, 1);
+      a({ major: 2, minor: 1 }, 0.5);
+    });
+
+    describe('with domain 0 -> 10', () => {
+      let a = assertGetInterval.bind(null, 0, 10);
+
+      it('throws an error if the tick frequency is less than 2', () => {
+        expect(() => {
+          let result = utils.convertFrequencyToInterval(
+            { min: 0, max: 10, tickFrequency: 1, betweenTickCount: 0 },
+            { interval: 10, major: 10 },
+          );
+          console.log('result: ', result);
+        }).toThrow(Error);
+      });
+
+      a({ major: 2, minor: 9 }, 1);
+      a({ major: 2, minor: 0 }, 10);
+      a({ major: 3, minor: 0 }, 5);
+      a({ major: 3, minor: 1 }, 2.5);
+      a({ major: 4, minor: 0 }, 3.3333);
+      a({ major: 5, minor: 0 }, 2.5);
+      a({ major: 6, minor: 0 }, 2);
+      a({ major: 7, minor: 0 }, 1.6667);
+      a({ major: 8, minor: 0 }, 1.4286);
+      a({ major: 9, minor: 0 }, 1.25);
+      a({ major: 10, minor: 0 }, 1.1111);
+      a({ major: 11, minor: 0 }, 1);
+      a({ major: 11, minor: 1 }, 0.5);
+      a({ major: 11, minor: 2 }, 0.3333);
+    });
+
+    describe('with domain 0 -> 100', () => {
+      let a = assertGetInterval.bind(null, 0, 100);
+      a({ major: 11, minor: 1 }, 5);
+      a({ major: 101, minor: 0 }, 1);
+    });
+
+    describe('with domain -5 - 5', () => {
+      let a = assertGetInterval.bind(null, -5, 5);
+      a({ major: 11, minor: 0 }, 1);
+    });
+
+    describe('with domain 0 - 5', () => {
+      let a = assertGetInterval.bind(null, 0, 5);
+      a({ major: 11, minor: 0 }, 0.5);
+      a({ major: 11, minor: 2 }, 0.1667);
+      a({ major: 11, minor: 1 }, 0.25);
+    });
+  });
+
+  describe('findLongestWord', () => {
+    it('should return 0 if label is undefined', () => {
+      const label = undefined;
+      const result = utils.findLongestWord(label);
+
+      expect(result).toEqual(0);
+    });
+
+    it('should return 0 if label is null', () => {
+      const label = null;
+      const result = utils.findLongestWord(label);
+
+      expect(result).toEqual(0);
+    });
+
+    it('should return 6 if the longest word from label has 6 letters', () => {
+      const label = 'Number of months';
+      const result = utils.findLongestWord(label);
+
+      expect(result).toEqual(6);
+    });
+  });
+
+  describe('amountToIncreaseWidth', () => {
+    it('should return 0 if longestWord is undefined', () => {
+      const longestWord = undefined;
+      const result = utils.amountToIncreaseWidth(longestWord);
+
+      expect(result).toEqual(0);
+    });
+
+    it('should return 0 if longestWord is null', () => {
+      const longestWord = null;
+      const result = utils.amountToIncreaseWidth(longestWord);
+
+      expect(result).toEqual(0);
+    });
+
+    it('should return 150 if longestWord is 10', () => {
+      const longestWord = 10;
+      const result = utils.amountToIncreaseWidth(longestWord);
+
+      expect(result).toEqual(200);
+    });
+  });
+});

package/src/grid-draggable.jsx

@@ -96,10 +96,57 @@ export const gridDraggable = (opts) => (Comp) => {
       return scaled;
     };
 
+    /**
+     * Retrieves the coordinates of a mouse or touch event relative to an SVG element.
+     * This method has been overwritten from the d3-selection library's clientPoint to handle touch events and improve clarity.
+     * @param {Element} node - The SVG element.
+     * @param {Event} event - The mouse or touch event.
+     * @returns {Array} - An array containing the coordinates [x, y] relative to the SVG element.
+     */
+    getClientPoint = (node, event) => {
+      if (!node || !event) {
+        return null;
+      }
+      const svg = node.ownerSVGElement || node;
+
+      if (svg && svg.createSVGPoint) {
+        let point = svg.createSVGPoint();
+        // Check if it's a touch event and use the first touch point
+        if (event.touches && event.touches.length > 0) {
+          const touch = event.touches[0];
+          point.x = touch.clientX;
+          point.y = touch.clientY;
+        } else {
+          // Fall back to mouse event properties
+          point.x = event.clientX;
+          point.y = event.clientY;
+        }
+        if (node.getScreenCTM) {
+          point = point.matrixTransform(node.getScreenCTM().inverse());
+          return [point.x, point.y];
+        } else {
+          return null;
+        }
+      }
+
+      const rect = node.getBoundingClientRect();
+      if (rect) {
+        return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
+      } else {
+        return null;
+      }
+    };
+
     skipDragOutsideOfBounds = (dd, e, graphProps) => {
-      // ignore drag movement outside of the domain and range.
+      // Ignore drag movement outside of the domain and range.
       const rootNode = graphProps.getRootNode();
-      const [rawX, rawY] = clientPoint(rootNode, e);
+      const clientPoint = this.getClientPoint(rootNode, e);
+
+      if (clientPoint === null) {
+        return true; // Indicate that the drag is outside of bounds
+      }
+
+      const [rawX, rawY] = clientPoint;
       const { scale, domain, range } = graphProps;
       let x = scale.x.invert(rawX);
       let y = scale.y.invert(rawY);
@@ -195,13 +242,10 @@ export const gridDraggable = (opts) => (Comp) => {
     };
 
     render() {
-      /* eslint-disable no-unused-vars */
-      //Note: we pull onClick out so that it's not in ...rest.
-      const { disabled, onClick, ...rest } = this.props;
-      /* eslint-enable no-unused-vars */
-
+      const { disabled, ...rest } = this.props;
       const grid = this.grid();
-      //prevent the text select icon from rendering.
+
+      // prevent the text select icon from rendering.
       const onMouseDown = (e) => e.nativeEvent.preventDefault();
 
       /**

package/src/label.jsx

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import EditableHtml from '@pie-lib/editable-html';
 import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
-
+import { extractTextFromHTML, isEmptyString } from './utils';
 const LabelComponent = (props) => {
   const {
     classes,
@@ -20,6 +20,8 @@ const LabelComponent = (props) => {
     side,
     onChange,
     mathMlOptions = {},
+    charactersLimit,
+    titleHeight,
   } = props;
   const [rotatedToHorizontal, setRotatedToHorizontal] = useState(false);
   const activePlugins = [
@@ -40,8 +42,8 @@ const LabelComponent = (props) => {
       chartValue ||
       (isChartLeftLabel && `${graphHeight - 70}px`) ||
       (side === 'left' && `${graphHeight - 8}px`) ||
-      (isChartBottomLabel && `${graphHeight - 30}px`) ||
-      (side === 'bottom' && `${graphHeight - 90}px`) ||
+      (isChartBottomLabel && `${graphHeight - 60 + titleHeight}px`) ||
+      (side === 'bottom' && `${graphHeight - 120 + titleHeight}px`) ||
       0,
     left:
       (side === 'right' && `${graphWidth - 8}px`) ||
@@ -66,6 +68,7 @@ const LabelComponent = (props) => {
           [classes.rotateRightLabel]: side === 'right' && !rotatedToHorizontal,
           [classes.editLabel]: rotatedToHorizontal,
           [classes.customBottom]: isChartBottomLabel || isDefineChartBottomLabel,
+          [classes.displayNone]: disabledLabel && !isChart && isEmptyString(extractTextFromHTML(text)),
         })}
         style={rotatedToHorizontal ? rotatedStyle : defaultStyle}
         onClick={rotateLabel}
@@ -79,12 +82,14 @@ const LabelComponent = (props) => {
             placeholder={!disabledLabel && placeholder}
             toolbarOpts={{
               position: side === 'bottom' ? 'top' : 'bottom',
+              noPadding: true,
               noBorder: true,
             }}
             disableScrollbar
             activePlugins={activePlugins}
             onDone={() => setRotatedToHorizontal(false)}
             mathMlOptions={mathMlOptions}
+            charactersLimit={charactersLimit}
           />
         )}
       </div>
@@ -104,6 +109,9 @@ LabelComponent.propTypes = {
   text: PropTypes.string,
   side: PropTypes.string,
   onChange: PropTypes.func,
+  mathMlOptions: PropTypes.object,
+  charactersLimit: PropTypes.number,
+  titleHeight: PropTypes.number,
 };
 
 export default withStyles((theme) => ({
@@ -148,4 +156,7 @@ export default withStyles((theme) => ({
   customBottom: {
     position: 'absolute',
   },
+  displayNone: {
+    display: 'none',
+  },
 }))(LabelComponent);