@pie-lib/plot 2.7.3 → 2.8.0-beta.1

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() === '';
+};