@oliasoft-open-source/charts-library 2.16.0-beta-2 → 2.16.0-beta-4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.16.0-beta-2",
+  "version": "2.16.0-beta-4",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {

package/release-notes.md

@@ -3,6 +3,9 @@
 ## 2.16.0
 - Added common chart area text plugin
 
+## 2.15.0
+- Added translation, by provider handled([OW-11237](https://oliasoft.atlassian.net/browse/OW-11237))
+
 ## 2.14.1 
 - Fix save initAxesRange when dataset changed by parent component([OW-11332](https://oliasoft.atlassian.net/browse/OW-11332))
 

package/src/components/controls/axes-options/axes-options.jsx

@@ -31,6 +31,7 @@ const AxesOptionsPopover = ({
   onResetAxes,
   close,
   depthType,
+  translations,
 }) => {
   const [depthTypeState, setDepthTypeState] = useState(
     depthType?.selectedDepthType,
@@ -124,7 +125,7 @@ const AxesOptionsPopover = ({
               <Input
                 name="min"
                 value={min}
-                error={minError}
+                error={translations[minError]}
                 size={5}
                 width="100%"
                 onChange={(evt) =>
@@ -140,7 +141,7 @@ const AxesOptionsPopover = ({
               <Input
                 name="max"
                 value={max}
-                error={maxError}
+                error={translations[maxError]}
                 size={5}
                 width="100%"
                 onChange={(evt) =>
@@ -190,16 +191,22 @@ const AxesOptionsPopover = ({
       ) : null}
 
       <Flex gap="8px" alignItems="center">
-        <Button type="submit" small colored label="Done" disabled={!valid} />
+        <Button
+          type="submit"
+          small
+          colored
+          label={translations.done}
+          disabled={!valid}
+        />
         <Button
           small
           name="resetAxes"
-          label="Reset Axes"
+          label={translations.resetAxes}
           onClick={onReset}
           disabled={!isCustomValue}
         />
         <Text small muted>
-          or double click on canvas
+          {translations.orDoubleClickToCanvas}
         </Text>
       </Flex>
     </form>
@@ -213,6 +220,7 @@ export const AxesOptions = ({
   onUpdateAxes,
   onResetAxes,
   depthType,
+  translations,
 }) => {
   return (
     <Popover
@@ -226,10 +234,15 @@ export const AxesOptions = ({
           onUpdateAxes={onUpdateAxes}
           onResetAxes={onResetAxes}
           depthType={depthType}
+          translations={translations}
         />
       }
     >
-      <Tooltip text="Axes options" placement="bottom" display="flex">
+      <Tooltip
+        text={translations.axesOptions}
+        placement="bottom"
+        display="flex"
+      >
         <Button small basic colored="muted" round icon={<RiRuler2Line />} />
       </Tooltip>
     </Popover>

package/src/components/line-chart/constants/default-translations.js

@@ -0,0 +1,24 @@
+export const defaultTranslations = Object.freeze({
+  label: 'Label',
+  pointsLines: 'Points & lines',
+  linesOnly: 'Lines only',
+  pointsOnly: 'Points only',
+  axesOptions: 'Axes options',
+  resetAxes: 'Reset Axes',
+  done: 'Done',
+  downloadAsPNG: 'Download as PNG',
+  showChart: 'Show chart',
+  showTable: 'Show table',
+  dragToZoom: 'Drag to zoom',
+  dragToPan: 'Drag to pan',
+  dragToMovePoints: 'Drag to move points',
+  dragDisabled: 'Drag disabled',
+  hideLegend: 'Hide Legend',
+  showLegend: 'Show Legend',
+  mustHaveAValue: 'Must have a value',
+  mustBeANumber: 'Must be a number',
+  mustBeLessThanMax: 'Must be less than max',
+  mustBeGreaterThanMin: 'Must be greater than min',
+  doubleClickToReset: 'Double click on canvas to reset',
+  orDoubleClickToCanvas: 'or double click on canvas',
+});

package/src/components/line-chart/controls/axes-options/axes-options-form-state.js

@@ -36,13 +36,13 @@ const isEmptyString = (value) => value === '';
 
 const createErrorMessages = (value, compareTo, type) => {
   const errors = [];
-  if (isEmptyString(value)) errors.push('Must have a value');
-  if (!validNumber(value)) errors.push('Must be a number');
+  if (isEmptyString(value)) errors.push('mustHaveAValue');
+  if (!validNumber(value)) errors.push('mustBeANumber');
 
   if (type === 'min' && !isLessThanMax(value, compareTo)) {
-    errors.push('Must be less than max');
+    errors.push('mustBeLessThanMax');
   } else if (type === 'max' && !isGreaterThanMin(value, compareTo)) {
-    errors.push('Must be greater than min');
+    errors.push('mustBeGreaterThanMin');
   }
 
   return errors;

package/src/components/line-chart/controls/controls.jsx

@@ -21,6 +21,7 @@ const Controls = ({
   options,
   dispatch,
   generatedDatasets,
+  translations,
 }) => {
   const {
     enableDragPoints,
@@ -72,18 +73,21 @@ const Controls = ({
                 onUpdateAxes={onUpdateAxes}
                 onResetAxes={onResetAxes}
                 depthType={options.depthType}
+                translations={translations}
               />
               <LineOptions
                 lineEnabled={lineEnabled}
                 pointsEnabled={pointsEnabled}
                 onToggleLine={onToggleLine}
                 onTogglePoints={onTogglePoints}
+                translations={translations}
               />
               <LegendOptions
                 legendEnabled={legendEnabled}
                 onToggleLegend={onToggleLegend}
+                translations={translations}
               />
-              <Tooltip text="Download as PNG" placement="bottom-end">
+              <Tooltip text={translations.downloadAsPNG} placement="bottom-end">
                 <Button
                   small
                   basic
@@ -102,13 +106,14 @@ const Controls = ({
                 isDragDataAllowed={dragData.enableDragData}
                 onToggleDragPoints={onToggleDragPoints}
                 onDisableDragOptions={onDisableDragOptions}
+                translations={translations}
               />
             </>
           )}
 
           {table ? (
             <Tooltip
-              text={showTable ? 'Show chart' : 'Show table'}
+              text={showTable ? translations.showChart : translations.showTable}
               placement="bottom-end"
             >
               <Button

package/src/components/line-chart/controls/drag-options.jsx

@@ -13,16 +13,24 @@ export const DragOptions = ({
   isDragDataAllowed,
   onToggleDragPoints,
   onDisableDragOptions,
+  translations: {
+    dragToZoom,
+    doubleClickToReset,
+    dragToPan,
+    orDoubleClickToCanvas,
+    dragToMovePoints,
+    dragDisabled,
+  },
 }) => {
   const options = useMemo(
     () => [
       {
-        buttonLabel: 'Drag to zoom',
+        buttonLabel: dragToZoom,
         label: (
           <Flex direction="column">
             <Text>Drag to zoom</Text>
             <Text small muted>
-              Double click on canvas to reset
+              {doubleClickToReset}
             </Text>
           </Flex>
         ),
@@ -31,12 +39,12 @@ export const DragOptions = ({
         onClick: onToggleZoom,
       },
       {
-        buttonLabel: 'Drag to pan',
+        buttonLabel: dragToPan,
         label: (
           <Flex direction="column">
             <Text>Drag to pan</Text>
             <Text small muted>
-              Double click on canvas to reset
+              {orDoubleClickToCanvas}
             </Text>
           </Flex>
         ),
@@ -47,7 +55,7 @@ export const DragOptions = ({
       ...(isDragDataAllowed
         ? [
             {
-              label: 'Drag to move points',
+              label: dragToMovePoints,
               icon: <TbHandStop />,
               selected: enableDragPoints,
               type: 'Option',
@@ -56,7 +64,7 @@ export const DragOptions = ({
           ]
         : []),
       {
-        label: 'Drag disabled',
+        label: dragDisabled,
         icon: <RiForbidLine />,
         selected: !zoomEnabled && !panEnabled && !enableDragPoints,
         onClick: onDisableDragOptions,

package/src/components/line-chart/controls/legend-options.jsx

@@ -4,8 +4,12 @@ import { Button, Icon, Tooltip } from '@oliasoft-open-source/react-ui-library';
 import { RiListUnordered } from 'react-icons/ri';
 import listHideIcon from '../../../assets/icons/list-hide.svg';
 
-export const LegendOptions = ({ legendEnabled, onToggleLegend }) => {
-  const tooltipText = legendEnabled ? 'Hide Legend' : 'Show Legend';
+export const LegendOptions = ({
+  legendEnabled,
+  onToggleLegend,
+  translations: { hideLegend, showLegend },
+}) => {
+  const tooltipText = legendEnabled ? hideLegend : showLegend;
   const icon = legendEnabled ? (
     <RiListUnordered />
   ) : (

package/src/components/line-chart/controls/line-options.jsx

@@ -10,10 +10,11 @@ export const LineOptions = ({
   onToggleLine,
   onTogglePoints,
   pointsEnabled,
+  translations,
 }) => {
   const options = [
     {
-      label: 'Points & lines',
+      label: translations.pointsLines,
       icon: <Icon icon={lineAndPointIcon} />,
       selected: pointsEnabled && lineEnabled,
       onClick: () => {
@@ -21,7 +22,7 @@ export const LineOptions = ({
       },
     },
     {
-      label: 'Lines only',
+      label: translations.linesOnly,
       icon: <Icon icon={lineOnlyIcon} />,
       selected: !pointsEnabled && lineEnabled,
       onClick: () => {
@@ -30,7 +31,7 @@ export const LineOptions = ({
       },
     },
     {
-      label: 'Points only',
+      label: translations.pointsOnly,
       icon: <Icon icon={pointOnlyIcon} />,
       selected: pointsEnabled && !lineEnabled,
       onClick: () => {

package/src/components/line-chart/hooks/use-chart-options.js

@@ -42,6 +42,7 @@ export const useChartOptions = ({
       labelAnnotation: {
         showLabel,
         text,
+        position,
         fontSize,
         xOffset,
         yOffset,
@@ -136,6 +137,7 @@ export const useChartOptions = ({
     chartAreaText: {
       showLabel,
       text,
+      position,
       fontSize,
       xOffset,
       yOffset,

package/src/components/line-chart/line-chart-prop-types.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { TextLabelPosition } from './plugins/plugin-constants';
 
 export const LineChartPropTypes = {
   table: PropTypes.node,
@@ -78,6 +79,7 @@ export const LineChartPropTypes = {
             PropTypes.string,
             PropTypes.arrayOf(PropTypes.string),
           ]),
+          position: PropTypes.string,
           fontSize: PropTypes.number,
           xOffset: PropTypes.number,
           yOffset: PropTypes.number,
@@ -104,7 +106,7 @@ export const LineChartPropTypes = {
       }),
       legend: PropTypes.shape({
         display: PropTypes.bool,
-        position: PropTypes.oneOf(['top', 'bottom', 'right']),
+        position: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
         align: PropTypes.oneOf(['start', 'center', 'end']),
         customLegend: PropTypes.shape({
           customLegendPlugin: PropTypes.object,
@@ -216,12 +218,15 @@ export const getDefaultProps = (props) => {
           showLabel:
             props.chart.options.annotations.labelAnnotation?.showLabel ?? false,
           text: props.chart.options.annotations.labelAnnotation?.text ?? '',
+          position:
+            props.chart.options.annotations.labelAnnotation?.position ??
+            TextLabelPosition.BOTTOM_RIGHT,
           fontSize:
             props.chart.options.annotations.labelAnnotation?.fontSize ?? 12,
           xOffset:
             props.chart.options.annotations.labelAnnotation?.xOffset ?? 5,
           yOffset:
-            props.chart.options.annotations.labelAnnotation?.yOffset ?? 10,
+            props.chart.options.annotations.labelAnnotation?.yOffset ?? 5,
           maxWidth:
             props.chart.options.annotations.labelAnnotation?.maxWidth ?? 300,
           lineHeight:

package/src/components/line-chart/line-chart.jsx

@@ -29,6 +29,7 @@ import { useChartOptions } from './hooks/use-chart-options';
 import { useChartPlugins } from './hooks/use-chart-plugins';
 import { generateKey } from './utils/line-chart-utils';
 import { useChartState } from './state/use-chart-state';
+import { getTranslations } from './utils/get-translations/get-translations';
 import { chartAreaTextPlugin } from './plugins/chart-area-text-plugin';
 
 ChartJS.register(
@@ -55,7 +56,8 @@ ChartJS.register(
 const LineChart = (props) => {
   setDefaultTheme();
   const chartRef = useRef(null);
-  const { table } = props;
+  const { table, translations: translationsRaw } = props;
+  const translations = getTranslations(translationsRaw);
   const chart = getDefaultProps(props);
   const {
     data: { datasets },
@@ -78,7 +80,7 @@ const LineChart = (props) => {
   );
 
   const generatedDatasets = useMemo(() => {
-    return generateLineChartDatasets(datasets, state, options);
+    return generateLineChartDatasets(datasets, state, options, translations);
   }, [state.lineEnabled, state.pointsEnabled, axes, annotations, graph]);
 
   // Call the custom hooks.
@@ -134,6 +136,7 @@ const LineChart = (props) => {
         options={options}
         dispatch={dispatch}
         generatedDatasets={generatedDatasets}
+        translations={translations}
       />
       {table && state.showTable ? (
         <div className={styles.table}>{table}</div>

package/src/components/line-chart/plugins/chart-area-text-plugin.js

@@ -1,3 +1,6 @@
+import { TextLabelPosition } from './plugin-constants';
+import { AlignOptions } from '../../../helpers/enums';
+
 const WORD_SEPARATOR = ' ';
 const TRANSPARENT = 'rgba(0, 0, 0, 0.5)';
 
@@ -9,9 +12,9 @@ const TRANSPARENT = 'rgba(0, 0, 0, 0.5)';
  * @returns {string[]} An array of words.
  */
 const getWords = (text) => {
-  return Array.isArray(text)
-    ? text.join(WORD_SEPARATOR).split(WORD_SEPARATOR)
-    : text.split(WORD_SEPARATOR);
+  return (Array.isArray(text) ? text.join(WORD_SEPARATOR) : text).split(
+    WORD_SEPARATOR,
+  );
 };
 
 /**
@@ -24,22 +27,24 @@ const getWords = (text) => {
  * @returns {number} The number of lines required.
  */
 const countLines = (words, maxWidth, ctx) => {
-  let line = '';
-  let lines = 0;
+  const lineCount = words.reduce(
+    (lines, word) => {
+      const testLine = `${lines.currentLine}${word}${WORD_SEPARATOR}`;
+      const { width: testWidth } = ctx.measureText(testLine);
 
-  for (const word of words) {
-    const testLine = `${line}${word}${WORD_SEPARATOR}`;
-    const { width: testWidth } = ctx.measureText(testLine);
+      if (testWidth > maxWidth) {
+        return {
+          lineCount: lines.lineCount + 1,
+          currentLine: `${word}${WORD_SEPARATOR}`,
+        };
+      } else {
+        return { lineCount: lines.lineCount, currentLine: testLine };
+      }
+    },
+    { lineCount: 0, currentLine: '' },
+  );
 
-    if (testWidth > maxWidth) {
-      line = `${word}${WORD_SEPARATOR}`;
-      lines++;
-    } else {
-      line = testLine;
-    }
-  }
-  lines++; // Add the last line
-  return lines;
+  return lineCount.lineCount + 1; // Add the last line
 };
 
 /**
@@ -51,10 +56,14 @@ const countLines = (words, maxWidth, ctx) => {
  * @param {number} lineHeight - The height of each line.
  * @param {number} x - The x-coordinate of the starting position.
  * @param {number} y - The y-coordinate of the starting position.
+ * @param {string} position - The position for the text (one of the values from the TextLabelPosition enum).
  */
-const drawText = (ctx, lines, lineHeight, x, y) => {
+const drawText = (ctx, lines, lineHeight, x, y, position) => {
   lines.forEach((line, index) => {
-    ctx.fillText(line, x, y - (lines.length - 1 - index) * lineHeight);
+    const lineY = position.includes('top')
+      ? y + lineHeight * (index + 1) - 5
+      : y - (lines.length - 1 - index) * lineHeight;
+    ctx.fillText(line, x, lineY);
   });
 };
 
@@ -77,6 +86,111 @@ const calculateMaxWidth = (initialMaxWidth, chartAreaWidth) => {
   return initialMaxWidth * maxWidthFactor;
 };
 
+/**
+ * Determines the legend dimensions (width and height) based on its position.
+ *
+ * @param {object} chart - The Chart.js chart object.
+ * @returns {object} An object containing the legend width and height.
+ */
+const getLegendDimensions = (chart) => {
+  const { legend } = chart;
+
+  const legendWidth =
+    legend && legend.display && legend.options.position === 'left'
+      ? legend.width + legend.options.labels.padding * 2
+      : 0;
+
+  const legendHeight =
+    legend &&
+    legend.display &&
+    (legend.options.position === 'top' || legend.options.position === 'bottom')
+      ? legend.height + legend.options.labels.padding * 2
+      : 0;
+
+  return { legendWidth, legendHeight };
+};
+
+/**
+ * Determines the X and Y coordinates for the provided position.
+ *
+ * @param {string} position - The position for the text (one of the values from the TextLabelPosition enum).
+ * @param {object} chart - The Chart.js chart object.
+ * @param {number} xOffset - The horizontal offset from the specified position.
+ * @param {number} yOffset - The vertical offset from the specified position.
+ * @returns {number[]} An array with the X and Y coordinates.
+ */
+const getPositionCoordinates = (position, chart, xOffset, yOffset) => {
+  const { chartArea, width } = chart;
+  const temporaryChartAreaRight = width - 8;
+
+  const { legendWidth, legendHeight } = getLegendDimensions(chart);
+
+  switch (position) {
+    case TextLabelPosition.TOP_LEFT:
+      return [
+        chartArea.left + xOffset + legendWidth,
+        chartArea.top + yOffset + legendHeight,
+      ];
+    case TextLabelPosition.TOP_CENTER:
+      return [
+        chartArea.left + chartArea.width / 2,
+        chartArea.top + yOffset + legendHeight,
+      ];
+    case TextLabelPosition.TOP_RIGHT:
+      return [
+        temporaryChartAreaRight - xOffset, //replace within chartArea.right when resize bug will be fixed
+        chartArea.top + yOffset + legendHeight,
+      ];
+    case TextLabelPosition.MIDDLE_LEFT:
+      return [
+        chartArea.left + xOffset + legendWidth,
+        chartArea.top + chartArea.height / 2,
+      ];
+    case TextLabelPosition.MIDDLE_CENTER:
+      return [
+        chartArea.left + chartArea.width / 2,
+        chartArea.top + chartArea.height / 2,
+      ];
+    case TextLabelPosition.MIDDLE_RIGHT:
+      return [
+        temporaryChartAreaRight - xOffset - legendWidth, //replace within chartArea.right when resize bug will be fixed
+        chartArea.top + chartArea.height / 2,
+      ];
+    case TextLabelPosition.BOTTOM_LEFT:
+      return [
+        chartArea.left + xOffset + legendWidth,
+        chartArea.bottom - yOffset - legendHeight,
+      ];
+    case TextLabelPosition.BOTTOM_CENTER:
+      return [
+        chartArea.left + chartArea.width / 2,
+        chartArea.bottom - yOffset - legendHeight,
+      ];
+    case TextLabelPosition.BOTTOM_RIGHT:
+    default:
+      return [
+        temporaryChartAreaRight - xOffset - legendWidth, //replace within chartArea.right when resize bug will be fixed
+        chartArea.bottom - yOffset - legendHeight,
+      ];
+  }
+};
+
+/**
+ * Determines the appropriate text alignment based on the position provided.
+ *
+ * @param {string} position - The position for the text (one of the values from the TextLabelPosition enum).
+ * @returns {string} The text alignment ('left', 'center', or 'right').
+ */
+const getTextAlign = (position) => {
+  if (position.includes(AlignOptions.Center)) {
+    return AlignOptions.Center;
+  } else if (position.includes(AlignOptions.Left)) {
+    return AlignOptions.Left;
+  } else {
+    return AlignOptions.Right;
+  }
+};
+
 export const chartAreaTextPlugin = {
   id: 'chartAreaText',
 
@@ -93,9 +207,13 @@ export const chartAreaTextPlugin = {
     const words = getWords(text);
     const lines = countLines(words, maxWidth, ctx);
 
-    // Calculate and set the padding needed at the bottom of the chart
+    // Calculate and set the padding needed at the top or bottom of the chart
     const paddingNeeded = lines * lineHeight + lineHeight;
-    chart.options.layout.padding.bottom = paddingNeeded;
+    if (options.position.includes('top')) {
+      chart.options.layout.padding.top = paddingNeeded;
+    } else {
+      chart.options.layout.padding.bottom = paddingNeeded;
+    }
 
     ctx.restore();
   },
@@ -109,6 +227,7 @@ export const chartAreaTextPlugin = {
       yOffset,
       lineHeight,
       maxWidth: initialMaxWidth,
+      position,
     } = options;
     const { ctx, chartArea } = chart;
 
@@ -137,12 +256,12 @@ export const chartAreaTextPlugin = {
     ctx.save();
     ctx.font = `${fontSize}px Arial`;
     ctx.fillStyle = TRANSPARENT;
-    ctx.textAlign = 'right';
+    ctx.textAlign = AlignOptions.Right;
 
-    const y = chartArea.bottom - yOffset;
-    const x = chartArea.right - xOffset; // Subtract margin on the right
+    const [x, y] = getPositionCoordinates(position, chart, xOffset, yOffset);
+    ctx.textAlign = getTextAlign(position);
 
-    drawText(ctx, lines, lineHeight, x, y);
+    drawText(ctx, lines, lineHeight, x, y, position);
 
     ctx.restore();
   },

package/src/components/line-chart/plugins/plugin-constants.js

@@ -0,0 +1,11 @@
+export const TextLabelPosition = {
+  TOP_LEFT: 'top-left',
+  TOP_CENTER: 'top-center',
+  TOP_RIGHT: 'top-right',
+  MIDDLE_LEFT: 'middle-left',
+  MIDDLE_CENTER: 'middle-center',
+  MIDDLE_RIGHT: 'middle-right',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_CENTER: 'bottom-center',
+  BOTTOM_RIGHT: 'bottom-right',
+};

package/src/components/line-chart/utils/generate-line-chart-datasets.js

@@ -15,9 +15,15 @@ import { generateRandomColor } from '../../../helpers/chart-utils';
  * @param {Array} datasets - The initial datasets for the line chart.
  * @param {Object} state - The state object containing chart settings (e.g., lineEnabled, pointsEnabled, axes).
  * @param {Object} options - The options object containing additional settings (e.g., annotations, graph).
+ * @param {Object} translations - The translations object with the label property
  * @returns {Array} - The generated line chart datasets with applied settings and configurations.
  */
-export const generateLineChartDatasets = (datasets, state, options) => {
+export const generateLineChartDatasets = (
+  datasets,
+  state,
+  options,
+  { label },
+) => {
   const copyDataset = [...datasets];
   const { annotations, graph } = options;
   const {
@@ -88,7 +94,7 @@ export const generateLineChartDatasets = (datasets, state, options) => {
     // Return the dataset with applied settings and configurations
     return {
       ...line,
-      label: line.label || `Label ${i + 1}`,
+      label: line.label || `${label} ${i + 1}`,
       data: filteredData,
       showLine: lineEnabled,
       lineTension,

package/src/components/line-chart/utils/get-translations/get-translations.js

@@ -0,0 +1,17 @@
+import { defaultTranslations } from '../../constants/default-translations';
+
+/**
+ * Merges custom translations with the default translations.
+ * If a custom translation is provided for a key, it will override the default one.
+ * @param {object} translations - Custom translations.
+ * @returns {object} - The resulting translations object, containing both default and custom translations.
+ */
+export const getTranslations = (translations = {}) => {
+  return Object.keys(defaultTranslations).reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: translations[key] || defaultTranslations[key],
+    }),
+    {},
+  );
+};

package/src/helpers/chart-interface.ts

@@ -28,11 +28,12 @@ export interface IChartAnnotationsData {
 export interface ILabelAnnotation {
     showLabel: boolean;
     text: string | string[];
+    position?: string
     fontSize?: number;
-    xOffset: number
-    yOffset: number
-    maxWidth: number
-    lineHeight: number
+    xOffset?: number
+    yOffset?: number
+    maxWidth?: number
+    lineHeight?: number
 }