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

package/src/root.jsx

@@ -8,8 +8,16 @@ import { color, Readable } from '@pie-lib/render-ui';
 import EditableHtml from '@pie-lib/editable-html';
 import cn from 'classnames';
 import Label from './label';
+import { extractTextFromHTML, isEmptyObject, isEmptyString } from './utils';
 
 export class Root extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      titleHeight: 0,
+    };
+  }
+
   static propTypes = {
     title: PropTypes.string,
     children: ChildrenType,
@@ -29,6 +37,8 @@ export class Root extends React.Component {
     rootRef: PropTypes.func,
     onChangeLabels: PropTypes.func,
     titlePlaceholder: PropTypes.string,
+    mathMlOptions: PropTypes.object,
+    labelsCharactersLimit: PropTypes.number,
   };
 
   mouseMove = (g) => {
@@ -54,6 +64,7 @@ export class Root extends React.Component {
   componentDidMount() {
     const g = select(this.g);
     g.on('mousemove', this.mouseMove.bind(this, g));
+    this.measureTitleHeight();
   }
 
   componentWillUnmount() {
@@ -61,9 +72,19 @@ export class Root extends React.Component {
     g.on('mousemove', null);
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.title !== this.props.title) {
+      this.measureTitleHeight();
+    }
+  }
+
   onChangeLabel = (newValue, side) => {
     const { labels, onChangeLabels, isChart } = this.props;
 
+    if (!onChangeLabels) {
+      return;
+    }
+
     if (isChart) {
       if (side === 'left') {
         onChangeLabels('range', newValue);
@@ -80,6 +101,18 @@ export class Root extends React.Component {
     });
   };
 
+  measureTitleHeight = () => {
+    const titleElement = document.getElementById('editable-title');
+    if (titleElement) {
+      const titleHeight = titleElement.clientHeight;
+      this.setState({ titleHeight, prevTitle: this.props.title });
+    }
+  };
+
+  handleKeyDown = () => {
+    setTimeout(this.measureTitleHeight, 0);
+  };
+
   render() {
     const {
       disabledTitle,
@@ -99,6 +132,7 @@ export class Root extends React.Component {
       title,
       rootRef,
       mathMlOptions = {},
+      labelsCharactersLimit,
     } = this.props;
     const {
       size: { width = 500, height = 500 },
@@ -107,14 +141,18 @@ export class Root extends React.Component {
     } = graphProps;
 
     const topPadding = 40;
-    const leftPadding = showLabels ? 80 : 60;
-    const finalWidth = width + leftPadding * 2 + (domain.padding || 0) * 2;
+    const leftPadding = isEmptyString(extractTextFromHTML(labels?.left)) && isEmptyObject(labelsPlaceholders) ? 48 : 70;
+    const rightPadding =
+      isEmptyString(extractTextFromHTML(labels?.right)) && isEmptyObject(labelsPlaceholders) ? 48 : 70;
+    const finalWidth = width + leftPadding + rightPadding + (domain.padding || 0) * 2;
     const finalHeight = height + topPadding * 2 + (range.padding || 0) * 2;
 
     const activeTitlePlugins = [
       'bold',
       'italic',
       'underline',
+      'superscript',
+      'subscript',
       'strikethrough',
       'math',
       // 'languageCharacters'
@@ -124,11 +162,11 @@ export class Root extends React.Component {
     const nbOfVerticalLines = parseInt(width / 100);
     const nbOfHorizontalLines = parseInt(actualHeight / 100);
     const sideGridlinesPadding = parseInt(actualHeight % 100);
-
+    const { titleHeight } = this.state;
     return (
       <div className={classes.root}>
         {showPixelGuides && (
-          <div className={classes.topPixelGuides} style={{ marginLeft: isChart ? 60 : showLabels ? 30 : 10 }}>
+          <div className={classes.topPixelGuides} style={{ marginLeft: isChart ? 80 : showLabels ? 30 : 10 }}>
             {[...Array(nbOfVerticalLines + 1).keys()].map((value) => (
               <Readable false key={`top-guide-${value}`}>
                 <div className={classes.topPixelIndicator}>
@@ -142,34 +180,37 @@ export class Root extends React.Component {
         {showTitle &&
           (disabledTitle ? (
             <div
-              style={
-                isChart && {
-                  width: finalWidth,
-                }
-              }
+              id="editable-title"
+              style={{
+                ...(isChart && { width: finalWidth }),
+                ...(isEmptyString(extractTextFromHTML(title)) && { display: 'none' }),
+              }}
               className={cn(isChart ? classes.chartTitle : classes.graphTitle, classes.disabledTitle)}
               dangerouslySetInnerHTML={{ __html: title || '' }}
             />
           ) : (
-            <EditableHtml
-              style={
-                isChart && {
-                  width: finalWidth,
+            <div id="editable-title">
+              <EditableHtml
+                style={
+                  isChart && {
+                    width: finalWidth,
+                  }
                 }
-              }
-              className={cn(
-                { [classes.rightMargin]: showPixelGuides },
-                isChart ? classes.chartTitle : classes.graphTitle,
-              )}
-              markup={title || ''}
-              onChange={onChangeTitle}
-              placeholder={
-                (defineChart && titlePlaceholder) || (!disabledTitle && 'Click here to add a title for this graph')
-              }
-              toolbarOpts={{ noBorder: true }}
-              activePlugins={activeTitlePlugins}
-              disableScrollbar
-            />
+                className={cn(
+                  { [classes.rightMargin]: showPixelGuides },
+                  isChart ? classes.chartTitle : classes.graphTitle,
+                )}
+                markup={title || ''}
+                onChange={onChangeTitle}
+                placeholder={
+                  (defineChart && titlePlaceholder) || (!disabledTitle && 'Click here to add a title for this graph')
+                }
+                toolbarOpts={{ noPadding: true, noBorder: true }}
+                activePlugins={activeTitlePlugins}
+                disableScrollbar
+                onKeyDown={this.handleKeyDown}
+              />
+            </div>
           ))}
         {showLabels && !isChart && (
           <Label
@@ -181,6 +222,7 @@ export class Root extends React.Component {
             graphWidth={finalWidth}
             onChange={(value) => this.onChangeLabel(value, 'top')}
             mathMlOptions={mathMlOptions}
+            charactersLimit={labelsCharactersLimit}
           />
         )}
         <div className={classes.wrapper}>
@@ -196,6 +238,7 @@ export class Root extends React.Component {
               isDefineChartLeftLabel={isChart && defineChart}
               onChange={(value) => this.onChangeLabel(value, 'left')}
               mathMlOptions={mathMlOptions}
+              charactersLimit={labelsCharactersLimit}
             />
           )}
           <svg width={finalWidth} height={finalHeight} className={defineChart ? classes.defineChart : classes.chart}>
@@ -207,7 +250,7 @@ export class Root extends React.Component {
                 }
               }}
               className={classes.graphBox}
-              transform={`translate(${leftPadding}, ${topPadding})`}
+              transform={`translate(${leftPadding + (domain.padding || 0)}, ${topPadding + (range.padding || 0)})`}
             >
               {children}
             </g>
@@ -222,6 +265,7 @@ export class Root extends React.Component {
               graphWidth={finalWidth}
               onChange={(value) => this.onChangeLabel(value, 'right')}
               mathMlOptions={mathMlOptions}
+              charactersLimit={labelsCharactersLimit}
             />
           )}
           {showPixelGuides && (
@@ -229,7 +273,7 @@ export class Root extends React.Component {
               className={classes.sidePixelGuides}
               style={{
                 paddingTop: sideGridlinesPadding,
-                marginTop: defineChart ? 25 : 31,
+                marginTop: 31,
               }}
             >
               {[...Array(nbOfHorizontalLines + 1).keys()].reverse().map((value) => (
@@ -248,10 +292,12 @@ export class Root extends React.Component {
             placeholder={labelsPlaceholders?.bottom}
             graphHeight={finalHeight}
             graphWidth={finalWidth}
+            titleHeight={titleHeight}
             isChartBottomLabel={isChart && !defineChart}
             isDefineChartBottomLabel={isChart && defineChart}
             onChange={(value) => this.onChangeLabel(value, 'bottom')}
             mathMlOptions={mathMlOptions}
+            charactersLimit={labelsCharactersLimit}
           />
         )}
       </div>
@@ -259,11 +305,12 @@ export class Root extends React.Component {
   }
 }
 
+// use default color theme style to avoid color contrast issues
 const styles = (theme) => ({
   root: {
     border: `solid 1px ${color.primaryLight()}`,
-    color: color.text(),
-    backgroundColor: color.background(),
+    color: color.defaults.TEXT,
+    backgroundColor: theme.palette.common.white,
     touchAction: 'none',
     position: 'relative',
   },
@@ -284,13 +331,13 @@ const styles = (theme) => ({
     userSelect: 'none',
   },
   graphTitle: {
-    color: color.text(),
+    color: color.defaults.TEXT,
     fontSize: theme.typography.fontSize + 2,
     padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit / 2}px 0`,
     textAlign: 'center',
   },
   chartTitle: {
-    color: color.text(),
+    color: color.defaults.TEXT,
     fontSize: theme.typography.fontSize + 4,
     padding: `${theme.spacing.unit * 1.5}px ${theme.spacing.unit / 2}px 0`,
     textAlign: 'center',
@@ -306,7 +353,7 @@ const styles = (theme) => ({
     paddingTop: '6px',
   },
   topPixelIndicator: {
-    color: color.primaryLight(),
+    color: color.defaults.PRIMARY_LIGHT,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
@@ -321,7 +368,7 @@ const styles = (theme) => ({
     marginRight: '6px',
   },
   sidePixelIndicator: {
-    color: color.primaryLight(),
+    color: color.defaults.PRIMARY_LIGHT,
     textAlign: 'right',
     height: '20px',
     pointerEvents: 'none',

package/src/trig.js

@@ -1,4 +1,4 @@
-import { xy } from '../lib/utils';
+import { xy } from './utils';
 import Point from '@mapbox/point-geometry';
 import debug from 'debug';
 const log = debug('pie-lib:plot:trig');

package/src/utils.js

@@ -154,3 +154,17 @@ export const amountToIncreaseWidth = (longestWord) => {
 
   return longestWord * 20;
 };
+
+export const extractTextFromHTML = (htmlString) => {
+  const parser = new DOMParser();
+  const doc = parser?.parseFromString(htmlString, 'text/html');
+  return doc?.body?.textContent || '';
+};
+
+export const isEmptyObject = (obj) => {
+  return obj && Object.keys(obj).length === 0 && obj.constructor === Object;
+};
+
+export const isEmptyString = (str) => {
+  return typeof str === 'string' && str.trim() === '';
+};

package/lib/draggable.js

@@ -1,65 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "DraggableCore", {
-  enumerable: true,
-  get: function get() {
-    return _reactDraggable.DraggableCore;
-  }
-});
-exports["default"] = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _reactDraggable = _interopRequireWildcard(require("react-draggable"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var LocalDraggable = /*#__PURE__*/function (_Draggable) {
-  (0, _inherits2["default"])(LocalDraggable, _Draggable);
-
-  var _super = _createSuper(LocalDraggable);
-
-  function LocalDraggable() {
-    (0, _classCallCheck2["default"])(this, LocalDraggable);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2["default"])(LocalDraggable, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(next) {
-      (0, _get2["default"])((0, _getPrototypeOf2["default"])(LocalDraggable.prototype), "componentWillReceiveProps", this).call(this, next); //Remove the x/y state as these values have now been updated and will come through as props.
-
-      this.setState({
-        x: 0,
-        y: 0
-      });
-    }
-  }]);
-  return LocalDraggable;
-}(_reactDraggable["default"]);
-
-exports["default"] = LocalDraggable;
-//# sourceMappingURL=draggable.js.map

package/lib/draggable.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/draggable.jsx"],"names":["LocalDraggable","next","setState","x","y","Draggable"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;IAEqBA,c;;;;;;;;;;;;WACnB,mCAA0BC,IAA1B,EAAgC;AAC9B,sIAAgCA,IAAhC,EAD8B,CAE9B;;AACA,WAAKC,QAAL,CAAc;AAAEC,QAAAA,CAAC,EAAE,CAAL;AAAQC,QAAAA,CAAC,EAAE;AAAX,OAAd;AACD;;;EALyCC,0B","sourcesContent":["import Draggable, { DraggableCore } from 'react-draggable';\n\nexport default class LocalDraggable extends Draggable {\n  componentWillReceiveProps(next) {\n    super.componentWillReceiveProps(next);\n    //Remove the x/y state as these values have now been updated and will come through as props.\n    this.setState({ x: 0, y: 0 });\n  }\n}\n\nexport { DraggableCore };\n"],"file":"draggable.js"}

package/lib/graph-props.js

@@ -1,53 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.create = void 0;
-
-var _invariant = _interopRequireDefault(require("invariant"));
-
-var _utils = require("./utils");
-
-var _d3Scale = require("d3-scale");
-
-var createSnapMinAndMax = function createSnapMinAndMax(_ref) {
-  var min = _ref.min,
-      max = _ref.max,
-      step = _ref.step;
-  // for graphing, if step is a value with decimals, we have to calculate the min & max for the grid taking in consideration that 0 has to be exactly in the middle
-  // for example, if min: -5 & max: 5 & step: 0.75, in order to keep 0 in the middle we have to set min: -4.5 & max: 4.5
-  return {
-    step: step,
-    min: parseInt(min / step) * step,
-    max: parseInt(max / step) * step
-  };
-};
-
-var create = function create(domain, range, size, getRootNode) {
-  (0, _invariant["default"])(domain.min < domain.max, 'domain: min must be less than max');
-  (0, _invariant["default"])(range.min < range.max, 'range: min must be less than max');
-  var domainMinMax = createSnapMinAndMax(domain);
-  var rangeMinMax = createSnapMinAndMax(range);
-  var scale = {
-    x: (0, _d3Scale.scaleLinear)().domain([domain.min, domain.max]).range([0, size.width]),
-    y: (0, _d3Scale.scaleLinear)().domain([range.max, range.min]).range([0, size.height])
-  };
-  var snap = {
-    x: _utils.snapTo.bind(null, domainMinMax.min, domainMinMax.max, domainMinMax.step),
-    y: _utils.snapTo.bind(null, rangeMinMax.min, rangeMinMax.max, rangeMinMax.step)
-  };
-  return {
-    scale: scale,
-    snap: snap,
-    domain: domain,
-    range: range,
-    size: size,
-    getRootNode: getRootNode
-  };
-};
-
-exports.create = create;
-//# sourceMappingURL=graph-props.js.map

package/lib/graph-props.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/graph-props.js"],"names":["createSnapMinAndMax","min","max","step","parseInt","create","domain","range","size","getRootNode","domainMinMax","rangeMinMax","scale","x","width","y","height","snap","snapTo","bind"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,OAAwB;AAAA,MAArBC,GAAqB,QAArBA,GAAqB;AAAA,MAAhBC,GAAgB,QAAhBA,GAAgB;AAAA,MAAXC,IAAW,QAAXA,IAAW;AAClD;AACA;AAEA,SAAO;AACLA,IAAAA,IAAI,EAAJA,IADK;AAELF,IAAAA,GAAG,EAAEG,QAAQ,CAACH,GAAG,GAAGE,IAAP,CAAR,GAAuBA,IAFvB;AAGLD,IAAAA,GAAG,EAAEE,QAAQ,CAACF,GAAG,GAAGC,IAAP,CAAR,GAAuBA;AAHvB,GAAP;AAKD,CATD;;AAWO,IAAME,MAAM,GAAG,SAATA,MAAS,CAACC,MAAD,EAASC,KAAT,EAAgBC,IAAhB,EAAsBC,WAAtB,EAAsC;AAC1D,6BAAUH,MAAM,CAACL,GAAP,GAAaK,MAAM,CAACJ,GAA9B,EAAmC,mCAAnC;AACA,6BAAUK,KAAK,CAACN,GAAN,GAAYM,KAAK,CAACL,GAA5B,EAAiC,kCAAjC;AAEA,MAAMQ,YAAY,GAAGV,mBAAmB,CAACM,MAAD,CAAxC;AACA,MAAMK,WAAW,GAAGX,mBAAmB,CAACO,KAAD,CAAvC;AAEA,MAAMK,KAAK,GAAG;AACZC,IAAAA,CAAC,EAAE,4BACAP,MADA,CACO,CAACA,MAAM,CAACL,GAAR,EAAaK,MAAM,CAACJ,GAApB,CADP,EAEAK,KAFA,CAEM,CAAC,CAAD,EAAIC,IAAI,CAACM,KAAT,CAFN,CADS;AAIZC,IAAAA,CAAC,EAAE,4BACAT,MADA,CACO,CAACC,KAAK,CAACL,GAAP,EAAYK,KAAK,CAACN,GAAlB,CADP,EAEAM,KAFA,CAEM,CAAC,CAAD,EAAIC,IAAI,CAACQ,MAAT,CAFN;AAJS,GAAd;AASA,MAAMC,IAAI,GAAG;AACXJ,IAAAA,CAAC,EAAEK,cAAOC,IAAP,CAAY,IAAZ,EAAkBT,YAAY,CAACT,GAA/B,EAAoCS,YAAY,CAACR,GAAjD,EAAsDQ,YAAY,CAACP,IAAnE,CADQ;AAEXY,IAAAA,CAAC,EAAEG,cAAOC,IAAP,CAAY,IAAZ,EAAkBR,WAAW,CAACV,GAA9B,EAAmCU,WAAW,CAACT,GAA/C,EAAoDS,WAAW,CAACR,IAAhE;AAFQ,GAAb;AAKA,SAAO;AAAES,IAAAA,KAAK,EAALA,KAAF;AAASK,IAAAA,IAAI,EAAJA,IAAT;AAAeX,IAAAA,MAAM,EAANA,MAAf;AAAuBC,IAAAA,KAAK,EAALA,KAAvB;AAA8BC,IAAAA,IAAI,EAAJA,IAA9B;AAAoCC,IAAAA,WAAW,EAAXA;AAApC,GAAP;AACD,CAtBM","sourcesContent":["import invariant from 'invariant';\nimport { snapTo } from './utils';\nimport { scaleLinear } from 'd3-scale';\n\nconst createSnapMinAndMax = ({ min, max, step }) => {\n  // for graphing, if step is a value with decimals, we have to calculate the min & max for the grid taking in consideration that 0 has to be exactly in the middle\n  // for example, if min: -5 & max: 5 & step: 0.75, in order to keep 0 in the middle we have to set min: -4.5 & max: 4.5\n\n  return {\n    step,\n    min: parseInt(min / step) * step,\n    max: parseInt(max / step) * step,\n  };\n};\n\nexport const create = (domain, range, size, getRootNode) => {\n  invariant(domain.min < domain.max, 'domain: min must be less than max');\n  invariant(range.min < range.max, 'range: min must be less than max');\n\n  const domainMinMax = createSnapMinAndMax(domain);\n  const rangeMinMax = createSnapMinAndMax(range);\n\n  const scale = {\n    x: scaleLinear()\n      .domain([domain.min, domain.max])\n      .range([0, size.width]),\n    y: scaleLinear()\n      .domain([range.max, range.min])\n      .range([0, size.height]),\n  };\n\n  const snap = {\n    x: snapTo.bind(null, domainMinMax.min, domainMinMax.max, domainMinMax.step),\n    y: snapTo.bind(null, rangeMinMax.min, rangeMinMax.max, rangeMinMax.step),\n  };\n\n  return { scale, snap, domain, range, size, getRootNode };\n};\n"],"file":"graph-props.js"}