npm - @fluentui/react-charts - Versions diffs - 0.0.0-nightly-20251216-0407.1 → 0.0.0-nightly-20251218-0407.1 - Mend

@fluentui/react-charts 0.0.0-nightly-20251216-0407.1 → 0.0.0-nightly-20251218-0407.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/lib-commonjs/utilities/image-export-utils.js CHANGED Viewed

@@ -268,8 +268,8 @@ function cloneLegendsToSVG(legends, svgWidth, config, legendContainer) {
     const noLegendsSelected = Object.keys(selectedLegends).length === 0;
     for(let i = 0; i < legends.length; i++){
         const textOffset = _useLegendsStylesstyles.LEGEND_PADDING + _useLegendsStylesstyles.LEGEND_SHAPE_SIZE + _useLegendsStylesstyles.LEGEND_SHAPE_MARGIN_END;
-        const legendText = (0, _index.createMeasurementSpan)(legends[i].title, textClassName, legendContainer);
-        const legendWidth = textOffset + legendText.getBoundingClientRect().width + _useLegendsStylesstyles.LEGEND_PADDING;
+        const legendText = (0, _index.measureTextWithDOM)(legends[i].title, `.${textClassName}`, legendContainer);
+        const legendWidth = textOffset + legendText.width + _useLegendsStylesstyles.LEGEND_PADDING;
         const legendItem = legendGroup.append('g');
         legendLine.push({
             elem: legendItem,
@@ -290,7 +290,7 @@ function cloneLegendsToSVG(legends, svgWidth, config, legendContainer) {
         }
         const isLegendActive = selectedLegends[legends[i].title] || noLegendsSelected;
         legendItem.append('rect').attr('x', legendX + (isRTL ? legendWidth - _useLegendsStylesstyles.LEGEND_PADDING - _useLegendsStylesstyles.LEGEND_SHAPE_SIZE : _useLegendsStylesstyles.LEGEND_PADDING)).attr('y', legendY + _useLegendsStylesstyles.LEGEND_PADDING).attr('width', _useLegendsStylesstyles.LEGEND_SHAPE_SIZE).attr('height', _useLegendsStylesstyles.LEGEND_SHAPE_SIZE).style('fill', isLegendActive ? legends[i].color : 'transparent').style('stroke-width', _useLegendsStylesstyles.LEGEND_SHAPE_BORDER).style('stroke', legends[i].color);
-        legendItem.append('text').attr('x', legendX + (isRTL ? legendWidth - textOffset : textOffset)).attr('y', legendY + _useLegendsStylesstyles.LEGEND_PADDING).attr('dominant-baseline', 'hanging').style('opacity', isLegendActive ? 1 : _useLegendsStylesstyles.INACTIVE_LEGEND_TEXT_OPACITY).text(legends[i].title).call((selection)=>(0, _index.copyStyle)(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText, selection.node()));
+        legendItem.append('text').attr('x', legendX + (isRTL ? legendWidth - textOffset : textOffset)).attr('y', legendY + _useLegendsStylesstyles.LEGEND_PADDING).attr('dominant-baseline', 'hanging').style('opacity', isLegendActive ? 1 : _useLegendsStylesstyles.INACTIVE_LEGEND_TEXT_OPACITY).text(legends[i].title).call((selection)=>(0, _index.copyStyle)(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText.node, selection.node()));
         legendX += legendWidth;
     }
     legendLines.push(legendLine);

package/lib-commonjs/utilities/image-export-utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/utilities/image-export-utils.ts"],"sourcesContent":["'use client';\n\nimport { create as d3Create, select as d3Select, Selection } from 'd3-selection';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nimport { copyStyle, createMeasurementSpan } from './index';\nimport { ImageExportOptions } from '../types/index';\nimport { Legend, LegendContainer } from '../Legends';\nimport {\n LEGEND_CONTAINER_MARGIN_TOP,\n LEGEND_CONTAINER_MARGIN_START,\n LEGEND_PADDING,\n LEGEND_HEIGHT,\n LEGEND_SHAPE_BORDER,\n LEGEND_SHAPE_SIZE,\n LEGEND_SHAPE_MARGIN_END,\n INACTIVE_LEGEND_TEXT_OPACITY,\n} from '../components/Legends/useLegendsStyles.styles';\n\nexport type GridChart = {\n container: HTMLElement \| null \| undefined;\n row?: number;\n col?: number;\n};\n\ntype SvgImage = {\n dataUrl: string;\n width: number;\n height: number;\n};\n\nexport async function exportChartsAsImage(\n charts: GridChart[],\n legendsToSvg?: LegendContainer['toSVG'],\n isRTL: boolean = false,\n opts: ImageExportOptions = {},\n): Promise<string> {\n if (charts.length === 0 && !legendsToSvg) {\n throw new Error('No charts or legends to export');\n }\n\n const chartImages = await Promise.all(\n charts.map(chart => {\n return new Promise<SvgImage>(resolve => {\n const svg = cloneStyledSVG(chart.container, isRTL);\n const svgDataUrl = svgToBase64(svg.node);\n resolve({ dataUrl: svgDataUrl, width: svg.width, height: svg.height });\n });\n }),\n );\n\n const grid: SvgImage[][] = []; // Sparse 2D array\n charts.forEach((chart, i) => {\n const row = chart.row \|\| 0;\n const col = chart.col \|\| 0;\n if (!grid[row]) {\n grid[row] = [];\n }\n grid[row][col] = chartImages[i];\n });\n\n if (legendsToSvg) {\n let totalWidth = 0;\n grid.forEach(row => {\n let rowWidth = 0;\n row.forEach(item => {\n rowWidth += item.width;\n });\n totalWidth = Math.max(totalWidth, rowWidth);\n });\n\n const svg = legendsToSvg(totalWidth, isRTL);\n if (svg.node) {\n const svgDataUrl = svgToBase64(svg.node);\n grid.push([{ dataUrl: svgDataUrl, width: svg.width, height: svg.height }]);\n }\n }\n\n return svgToPng(grid, opts);\n}\n\nconst SVG_STYLE_PROPERTIES = [\n 'display',\n 'fill',\n 'fill-opacity',\n 'opacity',\n 'stroke',\n 'stroke-width',\n 'transform',\n 'border-collapse',\n];\nconst SVG_TEXT_STYLE_PROPERTIES = [\n 'font-family',\n 'font-size',\n 'font-weight',\n 'text-anchor',\n 'background-color',\n 'color',\n 'padding',\n 'text-align',\n 'border',\n];\n\nconst ANNOTATION_HTML_STYLE_PROPERTIES = [\n 'align-items',\n 'background',\n 'background-color',\n 'border',\n 'border-radius',\n 'box-shadow',\n 'box-sizing',\n 'color',\n 'column-gap',\n 'display',\n 'flex',\n 'flex-direction',\n 'font-family',\n 'font-size',\n 'font-style',\n 'font-weight',\n 'gap',\n 'height',\n 'justify-content',\n 'letter-spacing',\n 'line-height',\n 'margin',\n 'max-height',\n 'max-width',\n 'min-height',\n 'min-width',\n 'opacity',\n 'overflow',\n 'padding',\n 'pointer-events',\n 'position',\n 'row-gap',\n 'text-align',\n 'text-decoration',\n 'text-transform',\n 'top',\n 'right',\n 'bottom',\n 'left',\n 'visibility',\n 'white-space',\n 'width',\n 'z-index',\n];\nconst ANNOTATION_FOREIGN_OBJECT_STYLE_PROPERTIES = ['overflow', 'pointer-events'];\n\nfunction cloneStyledSVG(chartContainer: HTMLElement \| null \| undefined, isRTL: boolean) {\n if (!chartContainer) {\n throw new Error('Chart container is not defined');\n }\n\n const svg = chartContainer.querySelector<SVGSVGElement>('svg');\n if (!svg) {\n throw new Error('SVG not found');\n }\n\n let clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement)\n .attr('width', null)\n .attr('height', null)\n .attr('viewBox', null);\n let svgElements = svg.getElementsByTagName('');\n let clonedSvgElements = clonedSvg.node()!.getElementsByTagName('');\n\n const TEXT_ELEMENTS = ['text'];\n const TABLE_ELEMENTS = ['table', 'thead', 'tbody', 'tr', 'th', 'td'];\n\n for (let i = 0; i < svgElements.length; i++) {\n const tag = svgElements[i].tagName.toLowerCase();\n\n if (TEXT_ELEMENTS.includes(tag) \|\| TABLE_ELEMENTS.includes(tag)) {\n copyStyle([...SVG_STYLE_PROPERTIES, ...SVG_TEXT_STYLE_PROPERTIES], svgElements[i], clonedSvgElements[i]);\n } else {\n copyStyle(SVG_STYLE_PROPERTIES, svgElements[i], clonedSvgElements[i]);\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n svgElements = null as any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n clonedSvgElements = null as any;\n\n const originalForeignObjects = svg.querySelectorAll('foreignObject');\n const clonedForeignObjects = clonedSvg.node()!.querySelectorAll('foreignObject');\n\n originalForeignObjects.forEach((originalFo, index) => {\n const clonedFo = clonedForeignObjects[index];\n if (!clonedFo) {\n return;\n }\n\n const originalRoot = originalFo.firstElementChild as HTMLElement \| null;\n const clonedRoot = clonedFo.firstElementChild as HTMLElement \| null;\n\n if (originalRoot && clonedRoot) {\n copyStyle(ANNOTATION_HTML_STYLE_PROPERTIES, originalRoot, clonedRoot);\n }\n\n const originalHtmlElements = originalFo.querySelectorAll<HTMLElement>('');\n const clonedHtmlElements = clonedFo.querySelectorAll<HTMLElement>('');\n\n originalHtmlElements.forEach((originalEl, elementIndex) => {\n const clonedEl = clonedHtmlElements[elementIndex];\n if (clonedEl) {\n copyStyle(ANNOTATION_HTML_STYLE_PROPERTIES, originalEl, clonedEl);\n }\n });\n });\n\n const annotationSvg = chartContainer.querySelector<SVGSVGElement>('[data-chart-annotation-svg=\"true\"]');\n let annotationClone: SVGSVGElement \| null = null;\n\n if (annotationSvg) {\n annotationClone = annotationSvg.cloneNode(true) as SVGSVGElement;\n copyStyle(SVG_STYLE_PROPERTIES, annotationSvg, annotationClone);\n\n const annotationElements = annotationSvg.getElementsByTagName('');\n const clonedAnnotationElements = annotationClone.getElementsByTagName('');\n\n for (let i = 0; i < annotationElements.length; i++) {\n const original = annotationElements[i];\n const cloned = clonedAnnotationElements[i];\n const tag = original.tagName.toLowerCase();\n const isSvgElement = original instanceof SVGElement;\n const isTextElement = tag === 'text';\n const isHtmlElement = isHTMLElement(original);\n\n if (isSvgElement) {\n if (isTextElement) {\n copyStyle([...SVG_STYLE_PROPERTIES, ...SVG_TEXT_STYLE_PROPERTIES], original, cloned);\n } else {\n copyStyle(SVG_STYLE_PROPERTIES, original, cloned);\n }\n }\n\n if (isHtmlElement) {\n copyStyle(ANNOTATION_HTML_STYLE_PROPERTIES, original, cloned);\n }\n\n if (tag === 'foreignobject') {\n copyStyle(ANNOTATION_FOREIGN_OBJECT_STYLE_PROPERTIES, original, cloned);\n }\n }\n }\n\n const { width, height } = svg.getBoundingClientRect();\n\n clonedSvg\n .attr('width', width)\n .attr('height', height)\n .attr('viewBox', `0 0 ${width} ${height}`)\n .attr('direction', isRTL ? 'rtl' : 'ltr');\n\n if (annotationClone) {\n clonedSvg.selectAll('[data-chart-annotation-layer=\"true\"]').remove();\n d3Select(annotationClone).attr('x', 0).attr('y', 0).attr('width', width).attr('height', height);\n clonedSvg.append(() => annotationClone as SVGSVGElement);\n }\n const result = {\n node: clonedSvg.node(),\n width,\n height,\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n clonedSvg = null as any;\n\n return result;\n}\n\nconst LEGEND_TEXT_STYLE_PROPERTIES_MAP = {\n color: 'fill',\n 'font-family': 'font-family',\n 'font-size': 'font-size',\n 'font-weight': 'font-weight',\n};\n\nexport function cloneLegendsToSVG(\n legends: Legend[],\n svgWidth: number,\n config: {\n selectedLegends: Record<string, boolean>;\n centerLegends: boolean;\n textClassName: string;\n isRTL: boolean;\n },\n legendContainer?: HTMLElement \| null,\n): {\n node: SVGSVGElement \| null;\n width: number;\n height: number;\n} {\n if (legends.length === 0) {\n return {\n node: null,\n width: 0,\n height: 0,\n };\n }\n\n const { selectedLegends, centerLegends, textClassName, isRTL } = config;\n const legendGroup = d3Create<SVGGElement>('svg:g');\n let legendX = centerLegends ? 0 : LEGEND_CONTAINER_MARGIN_START;\n let legendY = LEGEND_CONTAINER_MARGIN_TOP;\n let legendLine: { elem: Selection<SVGGElement, unknown, null, undefined>; width: number }[] = [];\n const legendLines: (typeof legendLine)[] = [];\n const legendLineWidths: number[] = [];\n const noLegendsSelected = Object.keys(selectedLegends).length === 0;\n\n for (let i = 0; i < legends.length; i++) {\n const textOffset = LEGEND_PADDING + LEGEND_SHAPE_SIZE + LEGEND_SHAPE_MARGIN_END;\n const legendText = createMeasurementSpan(legends[i].title, textClassName, legendContainer);\n const legendWidth = textOffset + legendText.getBoundingClientRect().width + LEGEND_PADDING;\n const legendItem = legendGroup.append('g');\n\n legendLine.push({ elem: legendItem, width: legendWidth });\n if (legendX + legendWidth > svgWidth && legendLine.length > 1) {\n legendLine.pop();\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n\n legendLine = [{ elem: legendItem, width: legendWidth }];\n legendX = centerLegends ? 0 : LEGEND_CONTAINER_MARGIN_START;\n legendY += LEGEND_HEIGHT;\n }\n\n const isLegendActive = selectedLegends[legends[i].title] \|\| noLegendsSelected;\n\n legendItem\n .append('rect')\n .attr('x', legendX + (isRTL ? legendWidth - LEGEND_PADDING - LEGEND_SHAPE_SIZE : LEGEND_PADDING))\n .attr('y', legendY + LEGEND_PADDING)\n .attr('width', LEGEND_SHAPE_SIZE)\n .attr('height', LEGEND_SHAPE_SIZE)\n .style('fill', isLegendActive ? legends[i].color : 'transparent')\n .style('stroke-width', LEGEND_SHAPE_BORDER)\n .style('stroke', legends[i].color);\n\n legendItem\n .append('text')\n .attr('x', legendX + (isRTL ? legendWidth - textOffset : textOffset))\n .attr('y', legendY + LEGEND_PADDING)\n .attr('dominant-baseline', 'hanging')\n .style('opacity', isLegendActive ? 1 : INACTIVE_LEGEND_TEXT_OPACITY)\n .text(legends[i].title)\n .call(selection => copyStyle(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText, selection.node()!));\n\n legendX += legendWidth;\n }\n\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n legendY += LEGEND_HEIGHT;\n\n if (centerLegends) {\n legendLines.forEach((ln, idx) => {\n const lineOffsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);\n let remLineWidth = legendLineWidths[idx];\n let itemOffsetX = 0;\n ln.forEach(item => {\n const newOffsetX = lineOffsetX + (isRTL ? remLineWidth - item.width - itemOffsetX : 0);\n item.elem.attr('transform', `translate(${newOffsetX}, 0)`);\n remLineWidth -= item.width;\n itemOffsetX += item.width;\n });\n });\n } else if (isRTL) {\n const w1 = Math.max(svgWidth, ...legendLineWidths);\n legendLines.forEach(ln => {\n let remLineWidth = w1 - LEGEND_CONTAINER_MARGIN_START;\n let itemOffsetX = LEGEND_CONTAINER_MARGIN_START;\n ln.forEach(item => {\n const newOffsetX = remLineWidth - item.width - itemOffsetX;\n item.elem.attr('transform', `translate(${newOffsetX}, 0)`);\n remLineWidth -= item.width;\n itemOffsetX += item.width;\n });\n });\n }\n\n const w1 = Math.max(svgWidth, ...legendLineWidths);\n const h1 = legendY;\n const svg = d3Create<SVGSVGElement>('svg').attr('width', w1).attr('height', h1).attr('viewBox', `0 0 ${w1} ${h1}`);\n svg.append(() => legendGroup.node()!);\n\n return {\n node: svg.node(),\n width: w1,\n height: h1,\n };\n}\n\ntype PositionedImage = SvgImage & {\n x: number;\n y: number;\n};\n\nasync function svgToPng(grid: SvgImage[][], opts: ImageExportOptions = {}): Promise<string> {\n let totalWidth = 0;\n let totalHeight = 0;\n\n const positionedImages: PositionedImage[] = grid\n .map(row => {\n let rowWidth = 0;\n let rowHeight = 0;\n\n const items = row.map(item => {\n const positioned = { ...item, x: rowWidth, y: totalHeight };\n rowWidth += item.width;\n rowHeight = Math.max(rowHeight, item.height);\n return positioned;\n });\n\n totalWidth = Math.max(totalWidth, rowWidth);\n totalHeight += rowHeight;\n\n return items;\n })\n .flat();\n\n const scale = opts.scale \|\| 1;\n const w0 = opts.width \|\| totalWidth;\n const h0 = opts.height \|\| totalHeight;\n const scaleX = (scale * w0) / totalWidth;\n const scaleY = (scale * h0) / totalHeight;\n totalWidth = scaleX * totalWidth;\n totalHeight = scaleY * totalHeight;\n\n const canvas = document.createElement('canvas');\n canvas.width = totalWidth;\n canvas.height = totalHeight;\n\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n throw new Error('Canvas context is null');\n }\n\n ctx.fillStyle = opts.background \|\| 'transparent';\n ctx.fillRect(0, 0, totalWidth, totalHeight);\n\n await Promise.all(\n positionedImages.map(\n item =>\n new Promise<void>((resolve, reject) => {\n const img = new Image();\n img.onload = () => {\n ctx.drawImage(img, scaleX * item.x, scaleY * item.y, scaleX * item.width, scaleY * item.height);\n resolve();\n };\n img.onerror = reject;\n img.src = item.dataUrl;\n }),\n ),\n );\n\n return canvas.toDataURL('image/png');\n}\n\nfunction svgToBase64(svgNode: SVGSVGElement \| null) {\n if (!svgNode) {\n throw new Error('SVG node is null');\n }\n\n const svgData = new XMLSerializer().serializeToString(svgNode);\n const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));\n return svgDataUrl;\n}\n\nconst hex2 = /^[\\da-f]{2}$/i;\nconst hex4 = /^[\\da-f]{4}$/i;\n\n/*\n A ponyfill for the deprecated `unescape` method, taken from the `core-js` library.\n \n Source: {@link https://github.com/zloirock/core-js/blob/167136f479d3b8519953f2e4c534ecdd1031d3cf/packages/core-js/modules/es.unescape.js core-js/packages/core-js/modules/es.unescape.js}\n */\nfunction unescapePonyfill(str: string) {\n let result = '';\n const length = str.length;\n let index = 0;\n let chr;\n let part;\n while (index < length) {\n chr = str.charAt(index++);\n if (chr === '%') {\n if (str.charAt(index) === 'u') {\n part = str.slice(index + 1, index + 5);\n if (hex4.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 5;\n continue;\n }\n } else {\n part = str.slice(index, index + 2);\n if (hex2.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 2;\n continue;\n }\n }\n }\n result += chr;\n }\n return result;\n}\n"],"names":["create","d3Create","select","d3Select","isHTMLElement","copyStyle","createMeasurementSpan","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","exportChartsAsImage","charts","legendsToSvg","isRTL","opts","length","Error","chartImages","Promise","all","map","chart","resolve","svg","cloneStyledSVG","container","svgDataUrl","svgToBase64","node","dataUrl","width","height","grid","forEach","i","row","col","totalWidth","rowWidth","item","Math","max","push","svgToPng","SVG_STYLE_PROPERTIES","SVG_TEXT_STYLE_PROPERTIES","ANNOTATION_HTML_STYLE_PROPERTIES","ANNOTATION_FOREIGN_OBJECT_STYLE_PROPERTIES","chartContainer","querySelector","clonedSvg","cloneNode","attr","svgElements","getElementsByTagName","clonedSvgElements","TEXT_ELEMENTS","TABLE_ELEMENTS","tag","tagName","toLowerCase","includes","originalForeignObjects","querySelectorAll","clonedForeignObjects","originalFo","index","clonedFo","originalRoot","firstElementChild","clonedRoot","originalHtmlElements","clonedHtmlElements","originalEl","elementIndex","clonedEl","annotationSvg","annotationClone","annotationElements","clonedAnnotationElements","original","cloned","isSvgElement","SVGElement","isTextElement","isHtmlElement","getBoundingClientRect","selectAll","remove","append","result","LEGEND_TEXT_STYLE_PROPERTIES_MAP","color","cloneLegendsToSVG","legends","svgWidth","config","legendContainer","selectedLegends","centerLegends","textClassName","legendGroup","legendX","legendY","legendLine","legendLines","legendLineWidths","noLegendsSelected","Object","keys","textOffset","legendText","title","legendWidth","legendItem","elem","pop","isLegendActive","style","text","call","selection","ln","idx","lineOffsetX","remLineWidth","itemOffsetX","newOffsetX","w1","h1","totalHeight","positionedImages","rowHeight","items","positioned","x","y","flat","scale","w0","h0","scaleX","scaleY","canvas","document","createElement","ctx","getContext","fillStyle","background","fillRect","reject","img","Image","onload","drawImage","onerror","src","toDataURL","svgNode","svgData","XMLSerializer","serializeToString","btoa","unescapePonyfill","encodeURIComponent","hex2","hex4","str","chr","part","charAt","slice","exec","String","fromCharCode","parseInt"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/utilities/image-export-utils.ts"],"sourcesContent":["'use client';\n\nimport { create as d3Create, select as d3Select, Selection } from 'd3-selection';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nimport { copyStyle, measureTextWithDOM } from './index';\nimport { ImageExportOptions } from '../types/index';\nimport { Legend, LegendContainer } from '../Legends';\nimport {\n LEGEND_CONTAINER_MARGIN_TOP,\n LEGEND_CONTAINER_MARGIN_START,\n LEGEND_PADDING,\n LEGEND_HEIGHT,\n LEGEND_SHAPE_BORDER,\n LEGEND_SHAPE_SIZE,\n LEGEND_SHAPE_MARGIN_END,\n INACTIVE_LEGEND_TEXT_OPACITY,\n} from '../components/Legends/useLegendsStyles.styles';\n\nexport type GridChart = {\n container: HTMLElement \| null \| undefined;\n row?: number;\n col?: number;\n};\n\ntype SvgImage = {\n dataUrl: string;\n width: number;\n height: number;\n};\n\nexport async function exportChartsAsImage(\n charts: GridChart[],\n legendsToSvg?: LegendContainer['toSVG'],\n isRTL: boolean = false,\n opts: ImageExportOptions = {},\n): Promise<string> {\n if (charts.length === 0 && !legendsToSvg) {\n throw new Error('No charts or legends to export');\n }\n\n const chartImages = await Promise.all(\n charts.map(chart => {\n return new Promise<SvgImage>(resolve => {\n const svg = cloneStyledSVG(chart.container, isRTL);\n const svgDataUrl = svgToBase64(svg.node);\n resolve({ dataUrl: svgDataUrl, width: svg.width, height: svg.height });\n });\n }),\n );\n\n const grid: SvgImage[][] = []; // Sparse 2D array\n charts.forEach((chart, i) => {\n const row = chart.row \|\| 0;\n const col = chart.col \|\| 0;\n if (!grid[row]) {\n grid[row] = [];\n }\n grid[row][col] = chartImages[i];\n });\n\n if (legendsToSvg) {\n let totalWidth = 0;\n grid.forEach(row => {\n let rowWidth = 0;\n row.forEach(item => {\n rowWidth += item.width;\n });\n totalWidth = Math.max(totalWidth, rowWidth);\n });\n\n const svg = legendsToSvg(totalWidth, isRTL);\n if (svg.node) {\n const svgDataUrl = svgToBase64(svg.node);\n grid.push([{ dataUrl: svgDataUrl, width: svg.width, height: svg.height }]);\n }\n }\n\n return svgToPng(grid, opts);\n}\n\nconst SVG_STYLE_PROPERTIES = [\n 'display',\n 'fill',\n 'fill-opacity',\n 'opacity',\n 'stroke',\n 'stroke-width',\n 'transform',\n 'border-collapse',\n];\nconst SVG_TEXT_STYLE_PROPERTIES = [\n 'font-family',\n 'font-size',\n 'font-weight',\n 'text-anchor',\n 'background-color',\n 'color',\n 'padding',\n 'text-align',\n 'border',\n];\n\nconst ANNOTATION_HTML_STYLE_PROPERTIES = [\n 'align-items',\n 'background',\n 'background-color',\n 'border',\n 'border-radius',\n 'box-shadow',\n 'box-sizing',\n 'color',\n 'column-gap',\n 'display',\n 'flex',\n 'flex-direction',\n 'font-family',\n 'font-size',\n 'font-style',\n 'font-weight',\n 'gap',\n 'height',\n 'justify-content',\n 'letter-spacing',\n 'line-height',\n 'margin',\n 'max-height',\n 'max-width',\n 'min-height',\n 'min-width',\n 'opacity',\n 'overflow',\n 'padding',\n 'pointer-events',\n 'position',\n 'row-gap',\n 'text-align',\n 'text-decoration',\n 'text-transform',\n 'top',\n 'right',\n 'bottom',\n 'left',\n 'visibility',\n 'white-space',\n 'width',\n 'z-index',\n];\nconst ANNOTATION_FOREIGN_OBJECT_STYLE_PROPERTIES = ['overflow', 'pointer-events'];\n\nfunction cloneStyledSVG(chartContainer: HTMLElement \| null \| undefined, isRTL: boolean) {\n if (!chartContainer) {\n throw new Error('Chart container is not defined');\n }\n\n const svg = chartContainer.querySelector<SVGSVGElement>('svg');\n if (!svg) {\n throw new Error('SVG not found');\n }\n\n let clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement)\n .attr('width', null)\n .attr('height', null)\n .attr('viewBox', null);\n let svgElements = svg.getElementsByTagName('');\n let clonedSvgElements = clonedSvg.node()!.getElementsByTagName('');\n\n const TEXT_ELEMENTS = ['text'];\n const TABLE_ELEMENTS = ['table', 'thead', 'tbody', 'tr', 'th', 'td'];\n\n for (let i = 0; i < svgElements.length; i++) {\n const tag = svgElements[i].tagName.toLowerCase();\n\n if (TEXT_ELEMENTS.includes(tag) \|\| TABLE_ELEMENTS.includes(tag)) {\n copyStyle([...SVG_STYLE_PROPERTIES, ...SVG_TEXT_STYLE_PROPERTIES], svgElements[i], clonedSvgElements[i]);\n } else {\n copyStyle(SVG_STYLE_PROPERTIES, svgElements[i], clonedSvgElements[i]);\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n svgElements = null as any;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n clonedSvgElements = null as any;\n\n const originalForeignObjects = svg.querySelectorAll('foreignObject');\n const clonedForeignObjects = clonedSvg.node()!.querySelectorAll('foreignObject');\n\n originalForeignObjects.forEach((originalFo, index) => {\n const clonedFo = clonedForeignObjects[index];\n if (!clonedFo) {\n return;\n }\n\n const originalRoot = originalFo.firstElementChild as HTMLElement \| null;\n const clonedRoot = clonedFo.firstElementChild as HTMLElement \| null;\n\n if (originalRoot && clonedRoot) {\n copyStyle(ANNOTATION_HTML_STYLE_PROPERTIES, originalRoot, clonedRoot);\n }\n\n const originalHtmlElements = originalFo.querySelectorAll<HTMLElement>('');\n const clonedHtmlElements = clonedFo.querySelectorAll<HTMLElement>('');\n\n originalHtmlElements.forEach((originalEl, elementIndex) => {\n const clonedEl = clonedHtmlElements[elementIndex];\n if (clonedEl) {\n copyStyle(ANNOTATION_HTML_STYLE_PROPERTIES, originalEl, clonedEl);\n }\n });\n });\n\n const annotationSvg = chartContainer.querySelector<SVGSVGElement>('[data-chart-annotation-svg=\"true\"]');\n let annotationClone: SVGSVGElement \| null = null;\n\n if (annotationSvg) {\n annotationClone = annotationSvg.cloneNode(true) as SVGSVGElement;\n copyStyle(SVG_STYLE_PROPERTIES, annotationSvg, annotationClone);\n\n const annotationElements = annotationSvg.getElementsByTagName('');\n const clonedAnnotationElements = annotationClone.getElementsByTagName('');\n\n for (let i = 0; i < annotationElements.length; i++) {\n const original = annotationElements[i];\n const cloned = clonedAnnotationElements[i];\n const tag = original.tagName.toLowerCase();\n const isSvgElement = original instanceof SVGElement;\n const isTextElement = tag === 'text';\n const isHtmlElement = isHTMLElement(original);\n\n if (isSvgElement) {\n if (isTextElement) {\n copyStyle([...SVG_STYLE_PROPERTIES, ...SVG_TEXT_STYLE_PROPERTIES], original, cloned);\n } else {\n copyStyle(SVG_STYLE_PROPERTIES, original, cloned);\n }\n }\n\n if (isHtmlElement) {\n copyStyle(ANNOTATION_HTML_STYLE_PROPERTIES, original, cloned);\n }\n\n if (tag === 'foreignobject') {\n copyStyle(ANNOTATION_FOREIGN_OBJECT_STYLE_PROPERTIES, original, cloned);\n }\n }\n }\n\n const { width, height } = svg.getBoundingClientRect();\n\n clonedSvg\n .attr('width', width)\n .attr('height', height)\n .attr('viewBox', `0 0 ${width} ${height}`)\n .attr('direction', isRTL ? 'rtl' : 'ltr');\n\n if (annotationClone) {\n clonedSvg.selectAll('[data-chart-annotation-layer=\"true\"]').remove();\n d3Select(annotationClone).attr('x', 0).attr('y', 0).attr('width', width).attr('height', height);\n clonedSvg.append(() => annotationClone as SVGSVGElement);\n }\n const result = {\n node: clonedSvg.node(),\n width,\n height,\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n clonedSvg = null as any;\n\n return result;\n}\n\nconst LEGEND_TEXT_STYLE_PROPERTIES_MAP = {\n color: 'fill',\n 'font-family': 'font-family',\n 'font-size': 'font-size',\n 'font-weight': 'font-weight',\n};\n\nexport function cloneLegendsToSVG(\n legends: Legend[],\n svgWidth: number,\n config: {\n selectedLegends: Record<string, boolean>;\n centerLegends: boolean;\n textClassName: string;\n isRTL: boolean;\n },\n legendContainer?: HTMLElement \| null,\n): {\n node: SVGSVGElement \| null;\n width: number;\n height: number;\n} {\n if (legends.length === 0) {\n return {\n node: null,\n width: 0,\n height: 0,\n };\n }\n\n const { selectedLegends, centerLegends, textClassName, isRTL } = config;\n const legendGroup = d3Create<SVGGElement>('svg:g');\n let legendX = centerLegends ? 0 : LEGEND_CONTAINER_MARGIN_START;\n let legendY = LEGEND_CONTAINER_MARGIN_TOP;\n let legendLine: { elem: Selection<SVGGElement, unknown, null, undefined>; width: number }[] = [];\n const legendLines: (typeof legendLine)[] = [];\n const legendLineWidths: number[] = [];\n const noLegendsSelected = Object.keys(selectedLegends).length === 0;\n\n for (let i = 0; i < legends.length; i++) {\n const textOffset = LEGEND_PADDING + LEGEND_SHAPE_SIZE + LEGEND_SHAPE_MARGIN_END;\n const legendText = measureTextWithDOM(legends[i].title, `.${textClassName}`, legendContainer);\n const legendWidth = textOffset + legendText.width + LEGEND_PADDING;\n const legendItem = legendGroup.append('g');\n\n legendLine.push({ elem: legendItem, width: legendWidth });\n if (legendX + legendWidth > svgWidth && legendLine.length > 1) {\n legendLine.pop();\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n\n legendLine = [{ elem: legendItem, width: legendWidth }];\n legendX = centerLegends ? 0 : LEGEND_CONTAINER_MARGIN_START;\n legendY += LEGEND_HEIGHT;\n }\n\n const isLegendActive = selectedLegends[legends[i].title] \|\| noLegendsSelected;\n\n legendItem\n .append('rect')\n .attr('x', legendX + (isRTL ? legendWidth - LEGEND_PADDING - LEGEND_SHAPE_SIZE : LEGEND_PADDING))\n .attr('y', legendY + LEGEND_PADDING)\n .attr('width', LEGEND_SHAPE_SIZE)\n .attr('height', LEGEND_SHAPE_SIZE)\n .style('fill', isLegendActive ? legends[i].color : 'transparent')\n .style('stroke-width', LEGEND_SHAPE_BORDER)\n .style('stroke', legends[i].color);\n\n legendItem\n .append('text')\n .attr('x', legendX + (isRTL ? legendWidth - textOffset : textOffset))\n .attr('y', legendY + LEGEND_PADDING)\n .attr('dominant-baseline', 'hanging')\n .style('opacity', isLegendActive ? 1 : INACTIVE_LEGEND_TEXT_OPACITY)\n .text(legends[i].title)\n .call(selection => copyStyle(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText.node, selection.node()!));\n\n legendX += legendWidth;\n }\n\n legendLines.push(legendLine);\n legendLineWidths.push(legendX);\n legendY += LEGEND_HEIGHT;\n\n if (centerLegends) {\n legendLines.forEach((ln, idx) => {\n const lineOffsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);\n let remLineWidth = legendLineWidths[idx];\n let itemOffsetX = 0;\n ln.forEach(item => {\n const newOffsetX = lineOffsetX + (isRTL ? remLineWidth - item.width - itemOffsetX : 0);\n item.elem.attr('transform', `translate(${newOffsetX}, 0)`);\n remLineWidth -= item.width;\n itemOffsetX += item.width;\n });\n });\n } else if (isRTL) {\n const w1 = Math.max(svgWidth, ...legendLineWidths);\n legendLines.forEach(ln => {\n let remLineWidth = w1 - LEGEND_CONTAINER_MARGIN_START;\n let itemOffsetX = LEGEND_CONTAINER_MARGIN_START;\n ln.forEach(item => {\n const newOffsetX = remLineWidth - item.width - itemOffsetX;\n item.elem.attr('transform', `translate(${newOffsetX}, 0)`);\n remLineWidth -= item.width;\n itemOffsetX += item.width;\n });\n });\n }\n\n const w1 = Math.max(svgWidth, ...legendLineWidths);\n const h1 = legendY;\n const svg = d3Create<SVGSVGElement>('svg').attr('width', w1).attr('height', h1).attr('viewBox', `0 0 ${w1} ${h1}`);\n svg.append(() => legendGroup.node()!);\n\n return {\n node: svg.node(),\n width: w1,\n height: h1,\n };\n}\n\ntype PositionedImage = SvgImage & {\n x: number;\n y: number;\n};\n\nasync function svgToPng(grid: SvgImage[][], opts: ImageExportOptions = {}): Promise<string> {\n let totalWidth = 0;\n let totalHeight = 0;\n\n const positionedImages: PositionedImage[] = grid\n .map(row => {\n let rowWidth = 0;\n let rowHeight = 0;\n\n const items = row.map(item => {\n const positioned = { ...item, x: rowWidth, y: totalHeight };\n rowWidth += item.width;\n rowHeight = Math.max(rowHeight, item.height);\n return positioned;\n });\n\n totalWidth = Math.max(totalWidth, rowWidth);\n totalHeight += rowHeight;\n\n return items;\n })\n .flat();\n\n const scale = opts.scale \|\| 1;\n const w0 = opts.width \|\| totalWidth;\n const h0 = opts.height \|\| totalHeight;\n const scaleX = (scale * w0) / totalWidth;\n const scaleY = (scale * h0) / totalHeight;\n totalWidth = scaleX * totalWidth;\n totalHeight = scaleY * totalHeight;\n\n const canvas = document.createElement('canvas');\n canvas.width = totalWidth;\n canvas.height = totalHeight;\n\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n throw new Error('Canvas context is null');\n }\n\n ctx.fillStyle = opts.background \|\| 'transparent';\n ctx.fillRect(0, 0, totalWidth, totalHeight);\n\n await Promise.all(\n positionedImages.map(\n item =>\n new Promise<void>((resolve, reject) => {\n const img = new Image();\n img.onload = () => {\n ctx.drawImage(img, scaleX * item.x, scaleY * item.y, scaleX * item.width, scaleY * item.height);\n resolve();\n };\n img.onerror = reject;\n img.src = item.dataUrl;\n }),\n ),\n );\n\n return canvas.toDataURL('image/png');\n}\n\nfunction svgToBase64(svgNode: SVGSVGElement \| null) {\n if (!svgNode) {\n throw new Error('SVG node is null');\n }\n\n const svgData = new XMLSerializer().serializeToString(svgNode);\n const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));\n return svgDataUrl;\n}\n\nconst hex2 = /^[\\da-f]{2}$/i;\nconst hex4 = /^[\\da-f]{4}$/i;\n\n/*\n A ponyfill for the deprecated `unescape` method, taken from the `core-js` library.\n \n Source: {@link https://github.com/zloirock/core-js/blob/167136f479d3b8519953f2e4c534ecdd1031d3cf/packages/core-js/modules/es.unescape.js core-js/packages/core-js/modules/es.unescape.js}\n */\nfunction unescapePonyfill(str: string) {\n let result = '';\n const length = str.length;\n let index = 0;\n let chr;\n let part;\n while (index < length) {\n chr = str.charAt(index++);\n if (chr === '%') {\n if (str.charAt(index) === 'u') {\n part = str.slice(index + 1, index + 5);\n if (hex4.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 5;\n continue;\n }\n } else {\n part = str.slice(index, index + 2);\n if (hex2.exec(part)) {\n result += String.fromCharCode(parseInt(part, 16));\n index += 2;\n continue;\n }\n }\n }\n result += chr;\n }\n return result;\n}\n"],"names":["create","d3Create","select","d3Select","isHTMLElement","copyStyle","measureTextWithDOM","LEGEND_CONTAINER_MARGIN_TOP","LEGEND_CONTAINER_MARGIN_START","LEGEND_PADDING","LEGEND_HEIGHT","LEGEND_SHAPE_BORDER","LEGEND_SHAPE_SIZE","LEGEND_SHAPE_MARGIN_END","INACTIVE_LEGEND_TEXT_OPACITY","exportChartsAsImage","charts","legendsToSvg","isRTL","opts","length","Error","chartImages","Promise","all","map","chart","resolve","svg","cloneStyledSVG","container","svgDataUrl","svgToBase64","node","dataUrl","width","height","grid","forEach","i","row","col","totalWidth","rowWidth","item","Math","max","push","svgToPng","SVG_STYLE_PROPERTIES","SVG_TEXT_STYLE_PROPERTIES","ANNOTATION_HTML_STYLE_PROPERTIES","ANNOTATION_FOREIGN_OBJECT_STYLE_PROPERTIES","chartContainer","querySelector","clonedSvg","cloneNode","attr","svgElements","getElementsByTagName","clonedSvgElements","TEXT_ELEMENTS","TABLE_ELEMENTS","tag","tagName","toLowerCase","includes","originalForeignObjects","querySelectorAll","clonedForeignObjects","originalFo","index","clonedFo","originalRoot","firstElementChild","clonedRoot","originalHtmlElements","clonedHtmlElements","originalEl","elementIndex","clonedEl","annotationSvg","annotationClone","annotationElements","clonedAnnotationElements","original","cloned","isSvgElement","SVGElement","isTextElement","isHtmlElement","getBoundingClientRect","selectAll","remove","append","result","LEGEND_TEXT_STYLE_PROPERTIES_MAP","color","cloneLegendsToSVG","legends","svgWidth","config","legendContainer","selectedLegends","centerLegends","textClassName","legendGroup","legendX","legendY","legendLine","legendLines","legendLineWidths","noLegendsSelected","Object","keys","textOffset","legendText","title","legendWidth","legendItem","elem","pop","isLegendActive","style","text","call","selection","ln","idx","lineOffsetX","remLineWidth","itemOffsetX","newOffsetX","w1","h1","totalHeight","positionedImages","rowHeight","items","positioned","x","y","flat","scale","w0","h0","scaleX","scaleY","canvas","document","createElement","ctx","getContext","fillStyle","background","fillRect","reject","img","Image","onload","drawImage","onerror","src","toDataURL","svgNode","svgData","XMLSerializer","serializeToString","btoa","unescapePonyfill","encodeURIComponent","hex2","hex4","str","chr","part","charAt","slice","exec","String","fromCharCode","parseInt"],"mappings":"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"}

package/lib-commonjs/utilities/utilities.js CHANGED Viewed

@@ -10,6 +10,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    CARTESIAN_XAXIS_CLASSNAME: function() {
+        return CARTESIAN_XAXIS_CLASSNAME;
+    },
     ChartTypes: function() {
         return ChartTypes;
     },
@@ -49,6 +52,9 @@ _export(exports, {
     areArraysEqual: function() {
         return areArraysEqual;
     },
+    autoLayoutXAxisLabels: function() {
+        return autoLayoutXAxisLabels;
+    },
     calculateLongestLabelWidth: function() {
         return calculateLongestLabelWidth;
     },
@@ -67,9 +73,6 @@ _export(exports, {
     createDateXAxis: function() {
         return createDateXAxis;
     },
-    createMeasurementSpan: function() {
-        return createMeasurementSpan;
-    },
     createNumericXAxis: function() {
         return createNumericXAxis;
     },
@@ -175,6 +178,9 @@ _export(exports, {
     getSecureProps: function() {
         return getSecureProps;
     },
+    getTextSize: function() {
+        return getTextSize;
+    },
     getTypeOfAxis: function() {
         return getTypeOfAxis;
     },
@@ -202,6 +208,9 @@ _export(exports, {
     isValidDomainValue: function() {
         return isValidDomainValue;
     },
+    measureTextWithDOM: function() {
+        return measureTextWithDOM;
+    },
     pointTypes: function() {
         return pointTypes;
     },
@@ -252,6 +261,8 @@ const _chartutilities = require("@fluentui/chart-utilities");
 const MIN_DOMAIN_MARGIN = 8;
 const MIN_DONUT_RADIUS = 1;
 const DEFAULT_DATE_STRING = '2000-01-01';
+const CARTESIAN_XAXIS_CLASSNAME = 'fui-cart__xAxis';
+const CARTESIAN_XAXIS_TEXT_SELECTOR = `.${CARTESIAN_XAXIS_CLASSNAME} text`;
 var ChartTypes = /*#__PURE__*/ function(ChartTypes) {
     ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
     ChartTypes[ChartTypes["LineChart"] = 1] = "LineChart";
@@ -321,7 +332,7 @@ function createNumericXAxis(xAxisParams, tickParams, chartType, culture, scaleTy
         const xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
         return (defaultFormat === null || defaultFormat === void 0 ? void 0 : defaultFormat(xAxisValue)) === '' ? '' : (0, _chartutilities.formatToLocaleString)(xAxisValue, culture);
     };
-    if (hideTickOverlap && typeof xAxisCount === 'undefined') {
+    if (hideTickOverlap) {
         const longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map((v, i)=>tickFormat(v, i))) + 20;
         const [start, end] = xAxisScale.range();
         tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
@@ -345,10 +356,12 @@ function createNumericXAxis(xAxisParams, tickParams, chartType, culture, scaleTy
     if (xAxisElement) {
         (0, _d3selection.select)(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true').style('direction', 'ltr').style('unicode-bidi', 'isolate');
     }
-    const tickValues = (customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount)).map(xAxis.tickFormat());
+    const tickValues = customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount);
+    const tickLabels = tickValues.map(xAxis.tickFormat());
     return {
         xScale: xAxisScale,
-        tickValues
+        tickValues,
+        tickLabels
     };
 }
 /**
@@ -536,7 +549,7 @@ function getDateFormatLevel(date, useUTC) {
     return (_matchedFormat_formatLevel = matchedFormat === null || matchedFormat === void 0 ? void 0 : matchedFormat.formatLevel) !== null && _matchedFormat_formatLevel !== void 0 ? _matchedFormat_formatLevel : 7;
 }
 function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLocale, customDateTimeFormatter, useUTC, chartType) {
-    const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount, calcMaxLabelWidth, tickStep, tick0, tickText } = xAxisParams;
+    const { domainNRangeValues, xAxisElement, tickPadding = 6, xAxistickSize = 6, xAxisCount, hideTickOverlap, calcMaxLabelWidth, tickStep, tick0, tickText } = xAxisParams;
     const isUtcSet = useUTC === true || useUTC === 'utc';
     const xAxisScale = isUtcSet ? (0, _d3scale.scaleUtc)() : (0, _d3scale.scaleTime)();
     xAxisScale.domain([
@@ -580,10 +593,11 @@ function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLo
         }
         return (0, _chartutilities.formatDateToLocaleString)(domainValue, culture, useUTC ? true : false, false, formatOptions);
     };
-    const longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 40;
-    const [start, end] = xAxisScale.range();
-    const maxPossibleTickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
-    tickCount = Math.min(maxPossibleTickCount, xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : tickCount);
+    if (hideTickOverlap) {
+        const longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 40;
+        const [start, end] = xAxisScale.range();
+        tickCount = Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth));
+    }
     const xAxis = (0, _d3axis.axisBottom)(xAxisScale).tickSize(xAxistickSize).tickPadding(tickPadding).ticks(tickCount).tickFormat(tickFormat);
     if ([
         8
@@ -602,10 +616,12 @@ function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLo
     if (xAxisElement) {
         (0, _d3selection.select)(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
     }
-    const tickValues = (customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount)).map(xAxis.tickFormat());
+    const tickValues = customTickValues !== null && customTickValues !== void 0 ? customTickValues : xAxisScale.ticks(tickCount);
+    const tickLabels = tickValues.map(xAxis.tickFormat());
     return {
         xScale: xAxisScale,
-        tickValues
+        tickValues,
+        tickLabels
     };
 }
 function createStringXAxis(xAxisParams, tickParams, dataset, culture, _useRtl) {
@@ -654,7 +670,8 @@ function createStringXAxis(xAxisParams, tickParams, dataset, culture, _useRtl) {
     }
     return {
         xScale: xAxisScale,
-        tickValues: tickValues.map(xAxis.tickFormat())
+        tickValues,
+        tickLabels: tickValues.map(xAxis.tickFormat())
     };
 }
 function useRtl() {
@@ -949,14 +966,14 @@ function silceOrAppendToArray(array, value) {
 }
 const DEFAULT_WRAP_WIDTH = 10;
 function createWrapOfXLabels(wrapLabelProps) {
-    const { node, xAxis, noOfCharsToTruncate, showXAxisLablesTooltip, width = DEFAULT_WRAP_WIDTH } = wrapLabelProps;
+    const { node, xAxis, noOfCharsToTruncate, showXAxisLablesTooltip, width = DEFAULT_WRAP_WIDTH, container } = wrapLabelProps;
     if (node === null) {
         return;
     }
     const axisNode = (0, _d3selection.select)(node).call(xAxis);
     let removeVal = 0;
     let maxLines = 1;
-    axisNode.selectAll('.tick text').each(function() {
+    axisNode.selectAll('.tick text').each(function(_, tickIndex) {
         const text = (0, _d3selection.select)(this);
         const totalWord = text.text();
         const truncatedWord = `${text.text().slice(0, noOfCharsToTruncate)}...`;
@@ -968,33 +985,33 @@ function createWrapOfXLabels(wrapLabelProps) {
         const lineHeight = 1.1; // ems
         const y = text.attr('y');
         const dy = parseFloat(text.attr('dy'));
-        let tspan = text.text(null).append('tspan').attr('x', 0).attr('y', y).attr('id', 'BaseSpan').attr('dy', dy + 'em').attr('data-', totalWord);
-        if (showXAxisLablesTooltip && totalWordLength > noOfCharsToTruncate) {
-            tspan = text.append('tspan').attr('id', 'showDots').attr('x', 0).attr('y', y).attr('dy', dy + 'em').text(truncatedWord);
-        } else if (showXAxisLablesTooltip && totalWordLength <= noOfCharsToTruncate) {
-            tspan = text.append('tspan').attr('id', 'LessLength').attr('x', 0).attr('y', y).attr('dy', dy + 'em').text(totalWord);
+        let tspan = text.text(null).attr('data-full', totalWord).append('tspan').attr('x', 0).attr('y', y).attr('dy', dy + 'em');
+        if (showXAxisLablesTooltip) {
+            tspan.text(totalWordLength > noOfCharsToTruncate ? truncatedWord : totalWord);
         } else {
+            const maxWidth = Array.isArray(width) ? width[tickIndex] : width;
             while(word = words.pop()){
                 line.push(word);
-                tspan.text(line.join(' '));
-                if (tspan.node().getComputedTextLength() > width && line.length > 1) {
+                const label = line.join(' ');
+                tspan.text(label);
+                const labelWidth = getTextSize(label, CARTESIAN_XAXIS_TEXT_SELECTOR, container).width;
+                if (labelWidth > maxWidth && line.length > 1) {
                     line.pop();
                     tspan.text(line.join(' '));
                     line = [
                         word
                     ];
-                    tspan = text.append('tspan').attr('id', 'WordBreakId').attr('x', 0).attr('y', y).attr('dy', ++lineNumber * lineHeight + dy + 'em').text(word);
+                    tspan = text.append('tspan').attr('x', 0).attr('y', y).attr('dy', ++lineNumber * lineHeight + dy + 'em').text(word);
                 }
             }
         }
         maxLines = Math.max(maxLines, lineNumber + 1);
     });
     if (!showXAxisLablesTooltip) {
+        var _querySelector;
         let maxHeight = 12; // intial value to render corretly first time
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const outerHTMLElement = document.getElementById('WordBreakId');
-        const BoxCordinates = outerHTMLElement && outerHTMLElement.getBoundingClientRect();
-        const boxHeight = BoxCordinates && BoxCordinates.height;
+        var _querySelector_getBoundingClientRect_height;
+        const boxHeight = (_querySelector_getBoundingClientRect_height = (_querySelector = (container !== null && container !== void 0 ? container : document).querySelector(`.${CARTESIAN_XAXIS_CLASSNAME} tspan`)) === null || _querySelector === void 0 ? void 0 : _querySelector.getBoundingClientRect().height) !== null && _querySelector_getBoundingClientRect_height !== void 0 ? _querySelector_getBoundingClientRect_height : 0;
         if (boxHeight > maxHeight) {
             maxHeight = boxHeight;
         }
@@ -1006,24 +1023,18 @@ function createYAxisLabels(node, yAxis, noOfCharsToTruncate, truncateLabel, isRt
     if (node === null) {
         return;
     }
-    let tickIndex = 0;
     const axisNode = (0, _d3selection.select)(node).call(yAxis);
     axisNode.selectAll('.tick text').each(function() {
         const text = (0, _d3selection.select)(this);
         const totalWord = text.text();
         const truncatedWord = isRtl ? `...${text.text().slice(0, noOfCharsToTruncate)}` : `${text.text().slice(0, noOfCharsToTruncate)}...`;
         const totalWordLength = text.text().length;
-        const padding = 0; // ems
         const y = text.attr('y');
         const x = text.attr('x');
         const dy = parseFloat(text.attr('dy'));
-        const dx = 0;
-        const uid = tickIndex++;
-        text.text(null).append('tspan').attr('x', x).attr('y', y).attr('id', `BaseSpan-${uid}`).attr('dy', dy + 'em').attr('data-', totalWord);
-        if (truncateLabel && totalWordLength > noOfCharsToTruncate) {
-            text.append('tspan').attr('id', `showDots-${uid}`).attr('x', x).attr('y', y).attr('dy', dy + 'em').attr('dx', padding + dx + 'em').text(truncatedWord);
-        } else {
-            text.append('tspan').attr('id', `LessLength-${uid}`).attr('x', x).attr('y', y).attr('dx', padding + dx + 'em').text(totalWord);
+        const tspan = text.text(null).attr('data-full', totalWord).append('tspan').attr('x', x).attr('y', y).attr('dy', dy + 'em');
+        if (truncateLabel) {
+            tspan.text(totalWordLength > noOfCharsToTruncate ? truncatedWord : totalWord);
         }
     });
 }
@@ -1065,30 +1076,30 @@ const calculateLongestLabelWidth = (labels, query = 'none')=>{
     return maxLabelWidth;
 };
 function tooltipOfAxislabels(axistooltipProps) {
-    const { tooltipCls, axis, id } = axistooltipProps;
+    const { tooltipCls, axis, id, container } = axistooltipProps;
     if (axis === null) {
         return null;
     }
-    const div = (0, _d3selection.select)('body').append('div').attr('id', id).attr('class', tooltipCls).style('opacity', 0);
-    const aa = axis.selectAll('[id^="BaseSpan-"]')._groups[0];
-    const baseSpanLength = aa && Object.keys(aa).length;
-    const originalDataArray = [];
-    for(let i = 0; i < baseSpanLength; i++){
-        const originalData = aa[i].dataset && Object.values(aa[i].dataset)[0];
-        originalDataArray.push(originalData);
-    }
-    const tickObject = axis.selectAll('.tick')._groups[0];
-    const tickObjectLength = tickObject && Object.keys(tickObject).length;
-    for(let i = 0; i < tickObjectLength; i++){
-        const d1 = tickObject[i];
-        (0, _d3selection.select)(d1) // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const div = (container ? (0, _d3selection.select)(container) : (0, _d3selection.select)('body')).append('div').attr('id', id).attr('class', tooltipCls).style('opacity', 0);
+    axis.selectAll('.tick text').each(function() {
+        const tickSelection = (0, _d3selection.select)(this);
+        const fullLabel = tickSelection.attr('data-full');
+        if (tickSelection.text() === fullLabel) {
+            return;
+        }
+        const tickEl = this;
+        tickSelection // eslint-disable-next-line @typescript-eslint/no-explicit-any
         .on('mouseover', (event, d)=>{
-            div.style('opacity', 0.9);
-            div.html(originalDataArray[i]).style('left', event.pageX + 'px').style('top', event.pageY - 28 + 'px');
+            const containerBounds = container === null || container === void 0 ? void 0 : container.getBoundingClientRect();
+            const tickBounds = tickEl.getBoundingClientRect();
+            const tooltipBottom = containerBounds ? containerBounds.bottom - (tickBounds.top - 4) : tickBounds.top - 4;
+            var _containerBounds_left;
+            const tooltipLeft = (tickBounds.left + tickBounds.right) / 2 - ((_containerBounds_left = containerBounds === null || containerBounds === void 0 ? void 0 : containerBounds.left) !== null && _containerBounds_left !== void 0 ? _containerBounds_left : 0);
+            div.text(fullLabel).style('bottom', `${tooltipBottom}px`).style('left', `${tooltipLeft}px`).style('transform', 'translateX(-50%)').style('opacity', 0.9);
         }).on('mouseout', (d)=>{
             div.style('opacity', 0);
         });
-    }
+    });
 }
 function getXAxisType(points) {
     let isXAxisDateType = false;
@@ -1513,8 +1524,8 @@ function areArraysEqual(arr1, arr2) {
     return true;
 }
 const cssVarRegExp = /var\((--[a-zA-Z0-9\-]+)\)/g;
-function resolveCSSVariables(chartContainer, styleRules) {
-    const containerStyles = getComputedStyle(chartContainer);
+function resolveCSSVariables(container, styleRules) {
+    const containerStyles = getComputedStyle(container);
     return styleRules.replace(cssVarRegExp, (match, group1)=>{
         return containerStyles.getPropertyValue(group1);
     });
@@ -1614,11 +1625,6 @@ function copyStyle(properties, fromEl, toEl) {
         });
     }
 }
-let measurementSpanCounter = 0;
-function getUniqueMeasurementSpanId() {
-    measurementSpanCounter++;
-    return `measurement_span_${measurementSpanCounter}`;
-}
 const MEASUREMENT_SPAN_STYLE = {
     position: 'absolute',
     visibility: 'hidden',
@@ -1629,23 +1635,60 @@ const MEASUREMENT_SPAN_STYLE = {
     border: 'none',
     whiteSpace: 'pre'
 };
-const createMeasurementSpan = (text, className, parentElement)=>{
-    const MEASUREMENT_SPAN_ID = getUniqueMeasurementSpanId();
+const MEASUREMENT_SPAN_ID = 'fui_measurement_span';
+const TEXT_STYLE_PROPERTIES = [
+    'font-size',
+    'font-family',
+    'font-weight',
+    'font-style',
+    'letter-spacing',
+    'text-transform'
+];
+const measureTextWithDOM = (text, cssSelector, container)=>{
     let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
     if (!measurementSpan) {
         measurementSpan = document.createElement('span');
         measurementSpan.setAttribute('id', MEASUREMENT_SPAN_ID);
         measurementSpan.setAttribute('aria-hidden', 'true');
-        if (parentElement) {
-            parentElement.appendChild(measurementSpan);
-        } else {
-            document.body.appendChild(measurementSpan);
-        }
+        (container !== null && container !== void 0 ? container : document.body).appendChild(measurementSpan);
     }
-    measurementSpan.setAttribute('class', className);
     Object.assign(measurementSpan.style, MEASUREMENT_SPAN_STYLE);
+    const refEl = (container !== null && container !== void 0 ? container : document).querySelector(cssSelector);
+    if (refEl) {
+        copyStyle(TEXT_STYLE_PROPERTIES, refEl, measurementSpan);
+    }
     measurementSpan.textContent = `${text}`;
-    return measurementSpan;
+    const rect = measurementSpan.getBoundingClientRect();
+    return {
+        node: measurementSpan,
+        width: rect.width,
+        height: rect.height
+    };
+};
+const CACHE_SIZE = 2000;
+const textSizeCache = new Map();
+const getTextSize = (text, cssSelector, container)=>{
+    const cacheKey = `${text}|${cssSelector}`;
+    const cachedResult = textSizeCache.get(cacheKey);
+    if (cachedResult) {
+        return cachedResult;
+    }
+    const { width, height } = measureTextWithDOM(text, cssSelector, container);
+    // TODO: Improve cache eviction strategy if needed (e.g., LRU)
+    if (textSizeCache.size >= CACHE_SIZE) {
+        const firstKey = textSizeCache.keys().next().value;
+        if (!(0, _chartutilities.isInvalidValue)(firstKey)) {
+            textSizeCache.delete(firstKey);
+        }
+    }
+    textSizeCache.set(cacheKey, {
+        width,
+        height
+    });
+    return {
+        width,
+        height
+    };
 };
 function isScatterPolarSeries(points) {
     return points.some((item)=>{
@@ -1842,3 +1885,102 @@ const findCalloutPoints = (calloutPointsByX, x)=>{
         values: calloutPointsByX[key]
     };
 };
+const autoLayoutXAxisLabels = (tickValues, tickLabels, scale, axisNode, containerWidth, container)=>{
+    let requiresWrap = false;
+    let requiresTruncate = false;
+    const maxWidths = [];
+    const [rangeStart, rangeEnd] = scale.range();
+    const isRTL = rangeEnd - rangeStart < 0;
+    const start = isRTL ? containerWidth : 0;
+    const end = isRTL ? 0 : containerWidth;
+    const getTickPosition = (index)=>{
+        var _scale;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return ((_scale = scale(tickValues[index])) !== null && _scale !== void 0 ? _scale : 0) + ('bandwidth' in scale ? scale.bandwidth() / 2 : 0);
+    };
+    const getLabelWidth = (text)=>{
+        return getTextSize(text, CARTESIAN_XAXIS_TEXT_SELECTOR, container).width;
+    };
+    for(let i = 0; i < tickValues.length; i++){
+        const position = getTickPosition(i);
+        const leftSpace = Math.abs(i > 0 ? (position - getTickPosition(i - 1)) / 2 : position - start);
+        const rightSpace = Math.abs(i + 1 < tickValues.length ? (getTickPosition(i + 1) - position) / 2 : end - position);
+        const maxAvailableWidth = Math.min(leftSpace, rightSpace) * 2 - 8; // 4px padding on both sides
+        const label = tickLabels[i];
+        const labelWidth = getLabelWidth(label);
+        maxWidths.push(maxAvailableWidth);
+        if (labelWidth > maxAvailableWidth) {
+            const longestWordWidth = Math.max(...label.split(/\s+/).map((word)=>getLabelWidth(word)));
+            if (longestWordWidth <= maxAvailableWidth) {
+                requiresWrap = true;
+            } else {
+                requiresTruncate = true;
+            }
+        }
+    }
+    if (requiresTruncate) {
+        return truncateAndStaggerXAxisLabels(tickValues, tickLabels, scale, axisNode, containerWidth, container);
+    }
+    if (requiresWrap) {
+        var _createWrapOfXLabels;
+        return (_createWrapOfXLabels = createWrapOfXLabels({
+            node: axisNode,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            xAxis: scale,
+            noOfCharsToTruncate: 100,
+            showXAxisLablesTooltip: false,
+            width: maxWidths,
+            container
+        })) !== null && _createWrapOfXLabels !== void 0 ? _createWrapOfXLabels : 0;
+    }
+    return 0;
+};
+const truncateAndStaggerXAxisLabels = (tickValues, tickLabels, scale, axisNode, containerWidth, container)=>{
+    if (!axisNode) {
+        return 0;
+    }
+    let maxHeight = 12;
+    const [rangeStart, rangeEnd] = scale.range();
+    const isRTL = rangeEnd - rangeStart < 0;
+    const start = isRTL ? containerWidth : 0;
+    const end = isRTL ? 0 : containerWidth;
+    const getTickPosition = (index)=>{
+        var _scale;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return ((_scale = scale(tickValues[index])) !== null && _scale !== void 0 ? _scale : 0) + ('bandwidth' in scale ? scale.bandwidth() / 2 : 0);
+    };
+    const getLabelSize = (text)=>{
+        return getTextSize(text, CARTESIAN_XAXIS_TEXT_SELECTOR, container);
+    };
+    (0, _d3selection.select)(axisNode).selectAll('.tick text').each(function(_, i) {
+        const position = getTickPosition(i);
+        const leftSpace = Math.abs(i > 0 ? position - getTickPosition(i - 1) : position - start);
+        const rightSpace = Math.abs(i + 1 < tickValues.length ? getTickPosition(i + 1) - position : end - position);
+        const maxAvailableWidth = Math.min(leftSpace, rightSpace) * 2 - 8; // 4px padding on both sides
+        const label = tickLabels[i];
+        const textNode = (0, _d3selection.select)(this).text(null).attr('data-full', label);
+        const lineHeight = 1.1; // ems
+        const y = textNode.attr('y');
+        const dy = parseFloat(textNode.attr('dy'));
+        textNode.append('tspan').attr('x', 0).attr('y', y).attr('dy', (i % 2 === 1 ? lineHeight : 0) + dy + 'em').text(truncateTextToFitWidth(label, maxAvailableWidth, (s)=>getLabelSize(s).width));
+        maxHeight = Math.max(maxHeight, getLabelSize(label).height);
+    });
+    return tickValues.length > 1 ? maxHeight : 0;
+};
+const truncateTextToFitWidth = (text, maxWidth, measure)=>{
+    if (measure(text) <= maxWidth) {
+        return text;
+    }
+    let lo = 1;
+    let hi = text.length;
+    while(lo < hi){
+        const mid = Math.floor((lo + hi + 1) / 2);
+        const candidate = text.slice(0, mid) + '...';
+        if (measure(candidate) <= maxWidth) {
+            lo = mid;
+        } else {
+            hi = mid - 1;
+        }
+    }
+    return text.slice(0, lo) + '...';
+};