fix: Release alphas from v6 and rebase from main (#9692)

* refactor(SliderStep): use token instead for hardcoded value (#9651) * feat(Drawer): Added start and end to position props, updated resizing to work with RTL (#9627) * feat(Drawer): Added start and end to position props, updaed resizing to work with RTL * update logic for newsize * fix(Modal): Prevent duplicate ids within Modal (#9555) * chore(release): releasing packages [ci skip] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] - [email protected] - @patternfly/[email protected] * chore(Brand): update tests (#9543) * chore(Brand): update tests * add more tests * add width test * test updates * feat(Select) - add appendTo to SelectPopperProps (#9578) * fix(misc): fixed broken CodeSandbox demos (#9519) * update import paths * fix(table): update data imports to absolute * fix remaining codesandbox demos * chore(release): releasing packages [ci skip] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] - [email protected] - @patternfly/[email protected] * chore: update breadcrumb dropdown item arrow to work in RTL (#9603) * chore: update breadcrumb dropdown item arrow to work in RTL * chore: use icon with shouldMirrorRTL instead * chore(release): releasing packages [ci skip] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] - [email protected] - @patternfly/[email protected] * fix(Slider): Updated slider to work in RTL. (#9655) * fix(Slider): Updred slider to work in RTL. Deprecated rightActions and leftActions props, added endActions and startActions props. * fixes from comments * docs(Toolbar): remove test example (#9614) * docs(tabs): Clean up React documentation content. (#9606) * docs(tabs):clean up React documentation content. * Update packages/react-core/src/components/Tabs/examples/Tabs.md * chore(release): releasing packages [ci skip] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] - [email protected] - @patternfly/[email protected] * fix(popper): add start/end positioning with RTL support, update default (#9628) * fix(popper): add start/end positioning with RTL support, update default * ensure that getLanguageDirection only returns ltr or rtl * fix(Popper): expanded types to include start/end; updated position value * fix(Dropdown): Add appendTo to dropdownPopperProps interface (#9635) * feat(Timestamp): allowed displayed datetime to be UTC (#9649) * feat(Timestamp): allowed displayed datetime to be UTC * Updated rendering of default UTC suffix * chore(release): releasing packages [ci skip] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] - [email protected] - @patternfly/[email protected] * chore(deps): update dependency @patternfly/patternfly to v5.1.0-prerelease.32 (#9642) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(Tabs): allow RTL scrolling (#9633) * fix(Tabs): allow RTL scrolling * add direction assignment to update * update aria label descriptions * add props and deprecate old, update internal state names * update desc * chore(release): releasing packages [ci skip] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] - [email protected] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] * fix(Nav): allow RTL scrolling (#9637) * fix(Nav): allow rtl scrolling * add direction assignment to update * update aria label descriptions * add new props and deprecate old * update desc * update other test snaps * chore(BackgroundImage): update tests (#9584) * chore(BackgroundImage): update tests * add spread prop test, update test * use styles obj * update test name to use styles * feat(Label) add option to make label clickable (#9284) * feat(Label) add option to make label clickable * add type to label button * chore(Label): Address misc PR feedback * chore(Label): Remove mention of onClick being incompatible with overflow * chore(Label): Remove prop from effect deps where it's no longer needed --------- Co-authored-by: Austin Sullivan <[email protected]> * feat(charts): add RTL legend support (#9570) * feat(charts): add RTL legend support * clone data/label components * remove legend positions, add beta * remove last position update * update logic to account for text length * update clones * chore(release): releasing packages [ci skip] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] - [email protected] - @patternfly/[email protected] * fix(PrimaryDetail): remove primary detail card view require statement (#9661) * chore(release): releasing packages [ci skip] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] - [email protected] - @patternfly/[email protected] * fix(Draggable): dont disable droppable on false ondrag (#9646) * chore(release): releasing packages [ci skip] - @patternfly/[email protected] - @patternfly/[email protected] - @patternfly/[email protected] - [email protected] - @patternfly/[email protected] * chore(screenshots): Updated screenshots (#9660) * chore(screenshots): Updated screenshots * rebase and update * fix: dry run publishing v6 alphas --------- Co-authored-by: adamviktora <[email protected]> Co-authored-by: Titani Labaj <[email protected]> Co-authored-by: Austin Sullivan <[email protected]> Co-authored-by: patternfly-build <[email protected]> Co-authored-by: kmcfaul <[email protected]> Co-authored-by: Maria <[email protected]> Co-authored-by: Jenny <[email protected]> Co-authored-by: Michael Coker <[email protected]> Co-authored-by: Erin Donehoo <[email protected]> Co-authored-by: Eric Olkowski <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Dominik Petřík <[email protected]> Co-authored-by: Dallas <[email protected]>
patternfly · Sep 28, 2023 · bb022ff · bb022ff
1 parent ff467ee
commit bb022ff
Show file tree

Hide file tree

Showing 150 changed files with 1,604 additions and 968 deletions.
diff --git a/.github/release.sh b/.github/release.sh
@@ -17,10 +17,10 @@ echo "Doing a release..."
 LOG=$(git log --format="%s" -1 | grep -Poe "#\d+")
 PR_NUM=${LOG:1}
 
-yarn run lerna publish prerelease --preid=prerelease --dist-tag=prerelease --yes 2>&1 | tee lerna-output.txt
+# yarn run lerna publish prerelease --preid=alpha --dist-tag=alpha --no-private --yes 2>&1 | tee lerna-output.txt
 
 # use lerna command below for dry run
-# yarn run lerna version prerelease --preid=prerelease --yes --no-git-tag-version --no-push | tee lerna-output.txt
+yarn run lerna version prerelease --preid=alpha --dist-tag=alpha --no-private --yes --no-git-tag-version --no-push | tee lerna-output.txt
 
 if grep -i "Successfully published" lerna-output.txt; # Leave a Github comment
 then

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -3,7 +3,7 @@ name: release
 on:
   push:
     branches:
-      - main
+      - v6
 jobs:
   build:
     runs-on: ubuntu-latest

diff --git a/lerna.json b/lerna.json
@@ -24,7 +24,7 @@
     }
   },
   "version": "independent",
-  "allowBranch": ["main", "v4", "5.0.x"],
+  "allowBranch": ["main", "v4", "5.0.x", "v6"],
   "packages": ["packages/*", "packages/react-integration/demo-app-ts"],
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/eslint-plugin-patternfly-react/package.json b/packages/eslint-plugin-patternfly-react/package.json
@@ -1,11 +1,12 @@
 {
   "name": "eslint-plugin-patternfly-react",
-  "version": "5.1.1-prerelease.1",
+  "version": "6.0.0-alpha.0",
   "private": false,
   "main": "./lib/index.js",
   "license": "MIT",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "alpha"
   },
   "repository": {
     "type": "git",

diff --git a/packages/react-charts/CHANGELOG.md b/packages/react-charts/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.1.1-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/[email protected]...@patternfly/[email protected]) (2023-09-22)
+
+### Features
+
+- **charts:** add RTL legend support ([#9570](https://github.com/patternfly/patternfly-react/issues/9570)) ([99d8d97](https://github.com/patternfly/patternfly-react/commit/99d8d975eeb2d562357cdcaa37502748d5794564))
+
+## 7.1.1-prerelease.8 (2023-09-21)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
 ## [7.1.1-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/[email protected]...@patternfly/[email protected]) (2023-09-18)
 
 **Note:** Version bump only for package @patternfly/react-charts

diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-charts",
-  "version": "7.1.1-prerelease.7",
+  "version": "8.0.0-alpha.0",
   "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -11,7 +11,8 @@
     "*.scss"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "alpha"
   },
   "repository": {
     "type": "git",
@@ -28,8 +29,8 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "dependencies": {
-    "@patternfly/react-styles": "^5.1.1-prerelease.6",
-    "@patternfly/react-tokens": "^5.1.1-prerelease.6",
+    "@patternfly/react-styles": "^6.0.0-alpha.0",
+    "@patternfly/react-tokens": "^6.0.0-alpha.0",
     "hoist-non-react-statics": "^3.3.0",
     "lodash": "^4.17.19",
     "tslib": "^2.5.0",

diff --git a/packages/react-charts/src/components/Chart/Chart.tsx b/packages/react-charts/src/components/Chart/Chart.tsx
@@ -26,11 +26,13 @@ import { ChartCommonStyles } from '../ChartTheme/ChartStyles';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { getClassName } from '../ChartUtils/chart-helpers';
 import { getLabelTextSize } from '../ChartUtils/chart-label';
-import { getComputedLegend, getLegendItemsExtraHeight } from '../ChartUtils/chart-legend';
+import { getComputedLegend, getLegendItemsExtraHeight, getLegendMaxTextWidth } from '../ChartUtils/chart-legend';
 import { getPaddingForSide } from '../ChartUtils/chart-padding';
 import { getPatternDefs, mergePatternData, useDefaultPatternProps } from '../ChartUtils/chart-patterns';
 import { getChartTheme } from '../ChartUtils/chart-theme-types';
 import { useEffect } from 'react';
+import { ChartLabel } from '../ChartLabel/ChartLabel';
+import { ChartPoint } from '../ChartPoint/ChartPoint';
 
 /**
  * Chart is a wrapper component that reconciles the domain for all its children, controls the layout of the chart,
@@ -284,6 +286,10 @@ export interface ChartProps extends VictoryChartProps {
    * cases, the legend may not be visible until enough padding is applied.
    */
   legendPosition?: 'bottom' | 'bottom-left' | 'right';
+  /**
+   * @beta Text direction of the legend labels.
+   */
+  legendDirection?: 'ltr' | 'rtl';
   /**
    * The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum
    * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain
@@ -471,6 +477,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
   legendComponent = <ChartLegend />,
   legendData,
   legendPosition = ChartCommonStyles.legend.position,
+  legendDirection = 'ltr',
   name,
   padding,
   patternScale,
@@ -522,11 +529,30 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     ...(labelComponent && { labelComponent }) // Override label component props
   });
 
+  let legendXOffset = 0;
+  if (legendDirection === 'rtl') {
+    legendXOffset = getLegendMaxTextWidth(legendData, theme);
+  }
+
   const legend = React.cloneElement(legendComponent, {
     data: legendData,
     ...(name && { name: `${name}-${(legendComponent as any).type.displayName}` }),
     orientation: legendOrientation,
     theme,
+    ...(legendDirection === 'rtl' && {
+      dataComponent: legendComponent.props.dataComponent ? (
+        React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })
+      ) : (
+        <ChartPoint transform={`translate(${legendXOffset})`} />
+      )
+    }),
+    ...(legendDirection === 'rtl' && {
+      labelComponent: legendComponent.props.labelComponent ? (
+        React.cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 })
+      ) : (
+        <ChartLabel direction="rtl" dx={legendXOffset - 30} />
+      )
+    }),
     ...legendComponent.props
   });
 

diff --git a/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx b/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx
@@ -17,7 +17,7 @@ import { ChartLegend } from '../ChartLegend/ChartLegend';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { ChartTooltip } from '../ChartTooltip/ChartTooltip';
 import { ChartBulletStyles } from '../ChartTheme/ChartStyles';
-import { getComputedLegend, getLegendItemsExtraHeight } from '../ChartUtils/chart-legend';
+import { getComputedLegend, getLegendItemsExtraHeight, getLegendMaxTextWidth } from '../ChartUtils/chart-legend';
 import { ChartBulletComparativeErrorMeasure } from './ChartBulletComparativeErrorMeasure';
 import { ChartBulletComparativeMeasure } from './ChartBulletComparativeMeasure';
 import { ChartBulletComparativeWarningMeasure } from './ChartBulletComparativeWarningMeasure';
@@ -29,6 +29,8 @@ import { getBulletDomain } from './utils/chart-bullet-domain';
 import { getBulletThemeWithLegendColorScale } from './utils/chart-bullet-theme';
 import { getPaddingForSide } from '../ChartUtils/chart-padding';
 import { useEffect } from 'react';
+import { ChartPoint } from '../ChartPoint/ChartPoint';
+import { ChartLabel } from '../ChartLabel/ChartLabel';
 
 /**
  * ChartBullet renders a dataset as a bullet chart.
@@ -252,6 +254,10 @@ export interface ChartBulletProps {
    * cases, the legend may not be visible until enough padding is applied.
    */
   legendPosition?: 'bottom' | 'bottom-left' | 'right';
+  /**
+   * @beta Text direction of the legend labels.
+   */
+  legendDirection?: 'ltr' | 'rtl';
   /**
    * The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum
    * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain
@@ -509,6 +515,7 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
   legendComponent = <ChartLegend />,
   legendItemsPerRow,
   legendPosition = 'bottom',
+  legendDirection = 'ltr',
   maxDomain,
   minDomain,
   name,
@@ -656,6 +663,20 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     ...comparativeZeroMeasureComponent.props
   });
 
+  let legendXOffset = 0;
+  if (legendDirection === 'rtl') {
+    legendXOffset = getLegendMaxTextWidth(
+      [
+        ...(primaryDotMeasureLegendData ? primaryDotMeasureLegendData : []),
+        ...(primarySegmentedMeasureLegendData ? primarySegmentedMeasureLegendData : []),
+        ...(comparativeWarningMeasureLegendData ? comparativeWarningMeasureLegendData : []),
+        ...(comparativeErrorMeasureLegendData ? comparativeErrorMeasureLegendData : []),
+        ...(qualitativeRangeLegendData ? qualitativeRangeLegendData : [])
+      ],
+      theme
+    );
+  }
+
   // Legend
   const legend = React.cloneElement(legendComponent, {
     data: [
@@ -670,6 +691,20 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     orientation: legendOrientation,
     position: legendPosition,
     theme,
+    ...(legendDirection === 'rtl' && {
+      dataComponent: legendComponent.props.dataComponent ? (
+        React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })
+      ) : (
+        <ChartPoint transform={`translate(${legendXOffset})`} />
+      )
+    }),
+    ...(legendDirection === 'rtl' && {
+      labelComponent: legendComponent.props.labelComponent ? (
+        React.cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 })
+      ) : (
+        <ChartLabel direction="rtl" dx={legendXOffset - 30} />
+      )
+    }),
     ...legendComponent.props
   });
 

diff --git a/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx b/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx
@@ -345,6 +345,10 @@ export interface ChartDonutProps extends ChartPieProps {
    * cases, the legend may not be visible until enough padding is applied.
    */
   legendPosition?: 'bottom' | 'right';
+  /**
+   * @beta Text direction of the legend labels.
+   */
+  legendDirection?: 'ltr' | 'rtl';
   /**
    * The name prop is typically used to reference a component instance when defining shared events. However, this
    * optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory
@@ -573,6 +577,7 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
   containerComponent = <ChartContainer />,
   innerRadius,
   legendPosition = ChartCommonStyles.legend.position,
+  legendDirection = 'ltr',
   name,
   padAngle,
   padding,
@@ -698,6 +703,7 @@ export const ChartDonut: React.FunctionComponent<ChartDonutProps> = ({
       innerRadius={chartInnerRadius > 0 ? chartInnerRadius : 0}
       key="pf-chart-donut-pie"
       legendPosition={legendPosition}
+      legendDirection={legendDirection}
       name={name}
       padAngle={padAngle !== undefined ? padAngle : getPadAngle}
       padding={padding}

diff --git a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx b/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx
@@ -337,6 +337,10 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps {
    * cases, the legend may not be visible until enough padding is applied.
    */
   legendPosition?: 'bottom' | 'right';
+  /**
+   * @beta Text direction of the legend labels.
+   */
+  legendDirection?: 'ltr' | 'rtl';
   /**
    * The labelRadius prop defines the radius of the arc that will be used for positioning each slice label.
    * If this prop is not set, the label radius will default to the radius of the pie + label padding.
@@ -589,6 +593,7 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
   invert = false,
   isStatic = true,
   legendPosition = ChartCommonStyles.legend.position,
+  legendDirection = 'ltr',
   padding,
   standalone = true,
   themeColor,
@@ -679,6 +684,7 @@ export const ChartDonutUtilization: React.FunctionComponent<ChartDonutUtilizatio
       height={height}
       key="pf-chart-donut-utilization"
       legendPosition={legendPosition}
+      legendDirection={legendDirection}
       padding={padding}
       standalone={false}
       theme={getThresholdTheme()}

diff --git a/packages/react-charts/src/components/ChartPie/ChartPie.tsx b/packages/react-charts/src/components/ChartPie/ChartPie.tsx
@@ -28,11 +28,13 @@ import { ChartLegend } from '../ChartLegend/ChartLegend';
 import { ChartCommonStyles } from '../ChartTheme/ChartStyles';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { ChartTooltip } from '../ChartTooltip/ChartTooltip';
-import { getComputedLegend, getLegendItemsExtraHeight } from '../ChartUtils/chart-legend';
+import { getComputedLegend, getLegendItemsExtraHeight, getLegendMaxTextWidth } from '../ChartUtils/chart-legend';
 import { getPaddingForSide } from '../ChartUtils/chart-padding';
 import { getPatternDefs, useDefaultPatternProps } from '../ChartUtils/chart-patterns';
 import { getTheme } from '../ChartUtils/chart-theme';
 import { useEffect } from 'react';
+import { ChartPoint } from '../ChartPoint/ChartPoint';
+import { ChartLabel } from '../ChartLabel/ChartLabel';
 
 /**
  * ChartPie renders a dataset as a pie chart.
@@ -333,6 +335,10 @@ export interface ChartPieProps extends VictoryPieProps {
    * cases, the legend may not be visible until enough padding is applied.
    */
   legendPosition?: 'bottom' | 'right';
+  /**
+   * @beta Text direction of the legend labels.
+   */
+  legendDirection?: 'ltr' | 'rtl';
   /**
    * The name prop is typically used to reference a component instance when defining shared events. However, this
    * optional prop may also be applied to child elements as an ID prefix. This is a workaround to ensure Victory
@@ -498,16 +504,15 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
   legendComponent = <ChartLegend />,
   legendData,
   legendPosition = ChartCommonStyles.legend.position,
+  legendDirection = 'ltr',
   name,
   patternScale,
   patternUnshiftIndex,
-
   padding,
   radius,
   standalone = true,
   style,
   themeColor,
-
   // destructure last
   theme = getTheme(themeColor),
   labelComponent = allowTooltip ? (
@@ -576,13 +581,32 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
     />
   );
 
+  let legendXOffset = 0;
+  if (legendDirection === 'rtl') {
+    legendXOffset = getLegendMaxTextWidth(legendData, theme);
+  }
+
   const legend = React.cloneElement(legendComponent, {
     colorScale,
     data: legendData,
     ...(name && { name: `${name}-${(legendComponent as any).type.displayName}` }),
     key: 'pf-chart-pie-legend',
     orientation: legendOrientation,
     theme,
+    ...(legendDirection === 'rtl' && {
+      dataComponent: legendComponent.props.dataComponent ? (
+        React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` })
+      ) : (
+        <ChartPoint transform={`translate(${legendXOffset})`} />
+      )
+    }),
+    ...(legendDirection === 'rtl' && {
+      labelComponent: legendComponent.props.labelComponent ? (
+        React.cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 })
+      ) : (
+        <ChartLabel direction="rtl" dx={legendXOffset - 30} />
+      )
+    }),
     ...legendComponent.props
   });
 

diff --git a/packages/react-charts/src/components/ChartUtils/chart-legend.ts b/packages/react-charts/src/components/ChartUtils/chart-legend.ts
@@ -4,6 +4,7 @@ import { VictoryLegend } from 'victory-legend';
 import { ChartLegendProps } from '../ChartLegend/ChartLegend';
 import { ChartCommonStyles } from '../ChartTheme/ChartStyles';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
+import { getLabelTextSize } from '../ChartUtils/chart-label';
 import { getPieOrigin } from './chart-origin';
 import * as React from 'react';
 
@@ -49,6 +50,22 @@ interface ChartLegendTextMaxSizeInterface {
   theme: ChartThemeDefinition; // The theme that will be applied to the chart
 }
 
+/**
+ * Returns the max text length in a legend data set to calculate the x offset for right aligned legends.
+ * @private
+ */
+
+export const getLegendMaxTextWidth = (legendData: any[], theme: ChartThemeDefinition) => {
+  let legendXOffset = 0;
+  legendData.map((data: any) => {
+    const labelWidth = getLabelTextSize({ text: data.name, theme }).width;
+    if (labelWidth > legendXOffset) {
+      legendXOffset = labelWidth;
+    }
+  });
+  return legendXOffset;
+};
+
 /**
  * Returns a legend which has been positioned per the given chart properties
  * @private