@fluentui/react-charting 5.12.7 → 5.12.10
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.
- package/CHANGELOG.json +64 -1
- package/CHANGELOG.md +32 -2
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/lib/components/LineChart/LineChart.base.d.ts +4 -1
- package/lib/components/LineChart/LineChart.base.js +185 -44
- package/lib/components/LineChart/LineChart.base.js.map +1 -1
- package/lib/components/LineChart/LineChart.types.d.ts +1 -0
- package/lib/components/LineChart/LineChart.types.js.map +1 -1
- package/lib/components/TreeChart/TreeChart.base.js +13 -7
- package/lib/components/TreeChart/TreeChart.base.js.map +1 -1
- package/lib/components/TreeChart/TreeChart.types.d.ts +1 -1
- package/lib/components/TreeChart/TreeChart.types.js.map +1 -1
- package/lib/version.js +1 -1
- package/lib/version.js.map +1 -1
- package/lib-amd/components/LineChart/LineChart.base.d.ts +4 -1
- package/lib-amd/components/LineChart/LineChart.base.js +183 -44
- package/lib-amd/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-amd/components/LineChart/LineChart.types.d.ts +1 -0
- package/lib-amd/components/LineChart/LineChart.types.js.map +1 -1
- package/lib-amd/components/TreeChart/TreeChart.base.js +13 -8
- package/lib-amd/components/TreeChart/TreeChart.base.js.map +1 -1
- package/lib-amd/components/TreeChart/TreeChart.types.d.ts +1 -1
- package/lib-amd/components/TreeChart/TreeChart.types.js.map +1 -1
- package/lib-amd/version.js +1 -1
- package/lib-amd/version.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.base.d.ts +4 -1
- package/lib-commonjs/components/LineChart/LineChart.base.js +184 -43
- package/lib-commonjs/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.types.d.ts +1 -0
- package/lib-commonjs/components/LineChart/LineChart.types.js.map +1 -1
- package/lib-commonjs/components/TreeChart/TreeChart.base.js +13 -7
- package/lib-commonjs/components/TreeChart/TreeChart.base.js.map +1 -1
- package/lib-commonjs/components/TreeChart/TreeChart.types.d.ts +1 -1
- package/lib-commonjs/components/TreeChart/TreeChart.types.js.map +1 -1
- package/lib-commonjs/version.js +1 -1
- package/lib-commonjs/version.js.map +1 -1
- package/package.json +4 -4
- package/src/components/LineChart/LineChart.types.ts +7 -0
- package/src/components/TreeChart/TreeChart.types.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeChart.base.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { hierarchy, tree } from 'd3-hierarchy';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { select, selectAll } from 'd3-selection';\nimport { FocusZone } from '@fluentui/react-focus';\n\nimport {\n ITreeProps,\n ITreeState,\n ITreeDataStructure,\n ITreeChartDataPoint,\n ITreeStyleProps,\n ITreeStyles,\n} from '../../index';\n\nconst getClassNames = classNamesFunction<ITreeStyleProps, ITreeStyles>();\n\n// Create a parent class for common tree components\nclass StandardTree {\n public treeData: ITreeChartDataPoint;\n public styleClassNames: {\n rectmetricText: string | undefined;\n rectSubText: string | undefined;\n link: string;\n rectNode: string;\n rectText: string;\n };\n\n private _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n constructor(\n treeData: ITreeChartDataPoint,\n styleClassNames: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },\n _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],\n _linkElements: Array<React.SVGProps<SVGPathElement>> = [],\n ) {\n this.treeData = treeData;\n this.styleClassNames = styleClassNames;\n this._nodeElements = _nodeElements;\n this._linkElements = _linkElements;\n }\n\n public truncateText(text: string, rectangleWidth: number, padding: number, styleClass: string | undefined) {\n let truncatedText = '';\n const words = text.split(/\\s+/).reverse();\n let word: string = '';\n const tspan = select('.svgTree').append('text').attr('class', 'tempText').append('tspan').text(null);\n\n if (styleClass !== undefined) {\n tspan.attr('class', styleClass);\n }\n\n const line: string[] = [];\n while ((word = words.pop()!)) {\n line.push(word);\n tspan.text(line.join(' ') + ' ');\n if (tspan.node() !== null) {\n const w = tspan.node()!.getComputedTextLength();\n if (w > rectangleWidth - padding) {\n line.pop();\n line.push('...');\n break;\n }\n }\n }\n\n truncatedText = line.join(' ') + ' ';\n tspan.text(null);\n selectAll('.tempText').remove();\n return truncatedText;\n }\n\n // Append node elements\n // nodeId to create unique key\n public addNodeShapetoSVG(\n name: string,\n subname: string | undefined,\n metricName: string | undefined,\n xCoordinate: number,\n yCoordinate: number,\n fillColor: string,\n rectangleWidth: number,\n rectangleHeight: number,\n nodeId: number,\n parentInfo: string,\n ) {\n const ariaLabel = `nodeId: ${nodeId} \\nnodeMainText: ${name}\\nsubText ${subname} ${parentInfo}`;\n this._nodeElements.push(\n <rect\n width={rectangleWidth}\n height={rectangleHeight}\n x={xCoordinate}\n y={yCoordinate}\n tabIndex={0}\n role={'text'}\n data-is-focusable={true}\n aria-label={ariaLabel}\n className={this.styleClassNames.rectNode}\n stroke={fillColor}\n key={`${nodeId}${this.styleClassNames.rectNode}`}\n />,\n );\n\n if (subname !== undefined) {\n subname = this.truncateText(subname, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectSubText);\n }\n if (metricName !== undefined) {\n metricName = this.truncateText(\n metricName,\n rectangleWidth,\n rectangleWidth / 4,\n this.styleClassNames.rectmetricText,\n );\n }\n name = this.truncateText(name, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectText);\n\n // Text position y = y + rectHeight/2, 2 is ratio for depth\n // Text position x = x + rectWidth/2, 2 is ratio for length\n // Sub-text position x = x + rectWidth/2, 2 is ratio for length\n\n const subValue =\n metricName !== undefined ? (\n <tspan className={this.styleClassNames.rectmetricText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n {metricName}\n </tspan>\n ) : (\n <tspan className={this.styleClassNames.rectSubText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n {subname}\n </tspan>\n );\n\n if (subname === undefined && metricName === undefined) {\n this._nodeElements.push(\n <text\n textAnchor=\"middle\"\n className={this.styleClassNames.rectmetricText}\n dy={yCoordinate + rectangleHeight / 1.6}\n x={xCoordinate + rectangleWidth / 2}\n key={`${nodeId}${this.styleClassNames.rectText}`}\n >\n {name}\n </text>,\n );\n } else {\n this._nodeElements.push(\n <text\n textAnchor=\"middle\"\n className={metricName !== undefined ? this.styleClassNames.rectSubText : this.styleClassNames.rectText}\n dy={metricName !== undefined ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2}\n x={xCoordinate + rectangleWidth / 2}\n key={`${nodeId}${this.styleClassNames.rectText}`}\n >\n {name}\n {subValue}\n </text>,\n );\n }\n }\n // Create a rectangular path from parent to the child nodes\n public createPathLink(\n parentX: number,\n parentY: number,\n childX: number,\n childY: number,\n leaf: boolean,\n rectWidth: number,\n rectHeight: number,\n gap: number,\n ): string {\n // gap adds ratio for parent.y to child.y\n const path = `M${childX + rectWidth / 2},${childY - gap} H${parentX + rectWidth / 2} V${\n parentY + rectHeight + gap / 2\n }`;\n const leafpath = `M${parentX + rectWidth / 2},${parentY + rectHeight + gap / 2} V${\n parentY + gap * 5\n } H${parentX} H${parentX + rectWidth}`;\n\n // based on the type of node return leafpath or path element\n return leaf ? leafpath : path;\n }\n\n // Append path link element\n public addLinktoSVG(\n nodeId: number,\n parentX: number,\n parentY: number,\n childX: number,\n childY: number,\n leaf: boolean,\n rectWidth: number,\n rectHeight: number,\n gap: number,\n ) {\n this._linkElements.push(\n <path\n className={this.styleClassNames.link}\n d={this.createPathLink(parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap)}\n key={`${nodeId}${this.styleClassNames.link}`}\n />,\n );\n }\n}\n\n// Create child class to Add Tree component based on treeHeight\nclass LayeredTree extends StandardTree {\n public composition: number | undefined;\n private _treeTraversal: number | undefined;\n constructor(\n treeData: ITreeChartDataPoint,\n composition: number | undefined,\n styleClassNames: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },\n _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],\n _linkElements: Array<React.SVGProps<SVGPathElement>> = [],\n _treeTraversal: number | undefined,\n ) {\n super(treeData, styleClassNames, _nodeElements, _linkElements);\n this.composition = composition;\n this._treeTraversal = _treeTraversal;\n }\n public createTree(givenLayoutWidth: number | undefined, screenWidth: number) {\n if (givenLayoutWidth !== undefined) {\n if (givenLayoutWidth < 65) {\n givenLayoutWidth = 65;\n }\n if (givenLayoutWidth > 90) {\n givenLayoutWidth = 90;\n }\n }\n const layoutWidth = givenLayoutWidth || 75;\n const root = hierarchy(this.treeData, d => {\n return d.children;\n });\n\n // Find tree Height\n const treeHeight = root?.height + 1;\n\n // Create tree layout, width: layoutWidth, height: layoutWidth/1.5 and add node separation\n const treemap = tree()\n .nodeSize([layoutWidth, layoutWidth / 1.5])\n .separation((a, b) => {\n return a.parent === root && b.parent === root ? 3.5 : 1;\n });\n\n // Assigns the x and y position for the nodes\n const treeData = treemap(root);\n\n // Compute the new tree layout.\n const nodes = treeData.descendants();\n\n // Normalize for fixed-depth and width\n // Normalise y coordinate by depth of each node by a factor of 130\n // Normalise x coordinate by start coordinate 0 with screenSize/3\n nodes.forEach(d => {\n d.y = d.depth === 0 ? 10 : d.depth * 130;\n d.x += screenWidth / 3;\n });\n\n // <------------------ Traversal section ------------------>\n\n // Create tree data structure\n const treeDataStructure: Array<ITreeDataStructure> = [];\n let TreeID: number = 0;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const createTreeDataStructure = (d: any) => {\n d.id = TreeID;\n treeDataStructure.push({\n id: TreeID,\n children: d.children,\n dataName: d.data.name,\n subName: d.data.subname,\n metricName: d.data?.metric,\n fill: d.data.fill,\n x: d.x,\n y: d.y,\n parentID: d.parent?.id,\n });\n TreeID++;\n };\n\n this._treeTraversal === 0\n ? root.each(d => {\n createTreeDataStructure(d);\n })\n : root.eachBefore(d => {\n createTreeDataStructure(d);\n });\n\n const rectWidth = layoutWidth * 3;\n const rectHeight = rectWidth / 3.45;\n const gap: number = 20;\n const parentSet = new Set();\n\n for (const d of treeDataStructure) {\n const parentInfo =\n d.id === 0\n ? 'Root Node'\n : `Parent info parentId: ${d.parentID}\n ${treeDataStructure[d.parentID].dataName}\n ${treeDataStructure[d.parentID].subName}`;\n\n // check for leaf nodes\n if (!d.children && !parentSet.has(d.parentID) && treeHeight === 3) {\n const newWidth = (rectWidth - gap) / 2;\n const newHeight = rectHeight;\n parentSet.add(d.parentID);\n\n // <------------------ Links section ------------------>\n this.addLinktoSVG(\n d.id,\n treeDataStructure[d.parentID].x,\n treeDataStructure[d.parentID].y,\n treeDataStructure[d.id].x,\n treeDataStructure[d.id].y,\n true,\n rectWidth,\n rectHeight,\n gap,\n );\n\n // <------------------ Nodes section ------------------>\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const children: any = treeDataStructure[d.parentID]?.children;\n\n const dx1: number = treeDataStructure[d.parentID]?.x;\n const dx2: number = treeDataStructure[d.parentID]?.x + newWidth + gap;\n let dy: number = children[0]?.y;\n\n for (let itr = 0; itr < children.length; ++itr) {\n const child = children[itr];\n\n // Given Composition\n if (this.composition !== undefined) {\n // For compact compostion\n if (this.composition === 0) {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.metricName,\n itr % 2 === 0 ? dx1 : dx2,\n dy,\n child.data.fill,\n children.length === 1 ? rectWidth : newWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n if (itr % 2 === 1) {\n dy += newHeight + gap;\n }\n }\n // For long compostion\n else {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.metricName,\n dx1,\n dy,\n child.data.fill,\n rectWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n dy += newHeight + gap;\n }\n }\n\n // Automatic Node Composition\n else {\n if (children.length > 2) {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.metricName,\n itr % 2 === 0 ? dx1 : dx2,\n dy,\n child.data.fill,\n children.length === 1 ? rectWidth : newWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n if (itr % 2 === 1) {\n dy += newHeight + gap;\n }\n } else {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.metricName,\n dx1,\n dy,\n child.data.fill,\n rectWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n dy += newHeight + gap;\n }\n }\n }\n }\n\n if (d.children || treeHeight <= 2) {\n // <------------------ Nodes section ------------------>\n this.addNodeShapetoSVG(\n d.dataName,\n d.subName,\n d.metricName,\n d.x,\n d.y,\n d.fill,\n rectWidth,\n rectHeight,\n d.id,\n parentInfo,\n );\n\n // <------------------ Links section ------------------>\n if (d.id !== 0) {\n this.addLinktoSVG(\n d.id,\n treeDataStructure[d.parentID].x,\n treeDataStructure[d.parentID].y,\n treeDataStructure[d.id].x,\n treeDataStructure[d.id].y,\n false,\n rectWidth,\n rectHeight,\n gap,\n );\n }\n }\n }\n }\n}\n\nexport class TreeChartBase extends React.Component<ITreeProps, ITreeState> {\n private _treeData: ITreeChartDataPoint;\n private _width: number;\n private _height: number;\n private _composition: number | undefined;\n private _classNames: IProcessedStyleSet<ITreeStyles>;\n private _margin: { left: number; right: number; top: number; bottom: number };\n private _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n private _treeTraversal: number | undefined;\n\n constructor(props: ITreeProps) {\n super(props);\n this._margin = { top: 30, right: 20, bottom: 30, left: 50 };\n this._width = this.props.width || 1500;\n this._height = this.props.height || 700;\n this._treeData = this.props.treeData;\n this._composition = this.props?.composition;\n this._treeTraversal = this.props.treeTraversal;\n\n this.state = {\n _width: this._width,\n _height: this._height,\n };\n }\n\n public componentDidMount() {\n const { theme, className, styles } = this.props;\n\n // Get classNames to create component styling\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n\n // Call createTreeChart function in componentDidMount\n this.createTreeChart();\n\n this.setState({\n _width: this.props.width || 1500,\n _height: this.props.height || 700,\n });\n }\n\n public componentDidUpdate(prevProps: ITreeProps): void {\n if (prevProps.layoutWidth !== this.props.layoutWidth) {\n const svgText = selectAll('text');\n const svgRect = selectAll('rect');\n const svgLink = selectAll('path');\n\n if (this._nodeElements.length === 0 && this._linkElements.length === 0) {\n svgText.remove();\n svgRect.remove();\n svgLink.remove();\n }\n\n this.createTreeChart();\n }\n }\n public createTreeChart() {\n const nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n const linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n\n // Create styleClass object to access it in parent class\n const styleClassNames = {\n link: this._classNames.link,\n rectNode: this._classNames.rectNode,\n rectText: this._classNames.rectText,\n rectSubText: this._classNames.rectSubText,\n rectmetricText: this._classNames.rectMetricText,\n };\n // Instantiate inherited class and call createTree function for the object\n const treeObject = new LayeredTree(\n this._treeData,\n this._composition,\n styleClassNames,\n nodeElements,\n linkElements,\n this._treeTraversal,\n );\n treeObject.createTree(this.props.layoutWidth, this._width);\n this._nodeElements = nodeElements;\n this._linkElements = linkElements;\n }\n\n public render(): JSX.Element {\n return (\n <FocusZone>\n <div className={this._classNames?.root}>\n <svg\n className=\"svgTree\"\n width={this.state._width - this._margin.left - this._margin.right}\n height={this.state._height - this._margin.top - this._margin.bottom}\n >\n <g className=\"svgNode\">{this._nodeElements.map(element => element)}</g>\n <g className=\"svgLink\">{this._linkElements.map(element => element)}</g>\n </svg>\n </div>\n </FocusZone>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"TreeChart.base.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { hierarchy, tree } from 'd3-hierarchy';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { select, selectAll } from 'd3-selection';\nimport { FocusZone } from '@fluentui/react-focus';\nimport { max as d3Max, min as d3Min } from 'd3-array';\n\nimport {\n ITreeProps,\n ITreeState,\n ITreeDataStructure,\n ITreeChartDataPoint,\n ITreeStyleProps,\n ITreeStyles,\n} from '../../index';\n\nconst getClassNames = classNamesFunction<ITreeStyleProps, ITreeStyles>();\n\n// Create a parent class for common tree components\nclass StandardTree {\n public treeData: ITreeChartDataPoint;\n public styleClassNames: {\n rectmetricText: string | undefined;\n rectSubText: string | undefined;\n link: string;\n rectNode: string;\n rectText: string;\n };\n\n private _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n constructor(\n treeData: ITreeChartDataPoint,\n styleClassNames: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },\n _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],\n _linkElements: Array<React.SVGProps<SVGPathElement>> = [],\n ) {\n this.treeData = treeData;\n this.styleClassNames = styleClassNames;\n this._nodeElements = _nodeElements;\n this._linkElements = _linkElements;\n }\n\n public truncateText(text: string, rectangleWidth: number, padding: number, styleClass: string | undefined) {\n let truncatedText = '';\n const words = text.split(/\\s+/).reverse();\n let word: string = '';\n const tspan = select('.svgTree').append('text').attr('class', 'tempText').append('tspan').text(null);\n\n if (styleClass !== undefined) {\n tspan.attr('class', styleClass);\n }\n\n const line: string[] = [];\n while ((word = words.pop()!)) {\n line.push(word);\n tspan.text(line.join(' ') + ' ');\n if (tspan.node() !== null) {\n const w = tspan.node()!.getComputedTextLength();\n if (w > rectangleWidth - padding) {\n line.pop();\n line.push('...');\n break;\n }\n }\n }\n\n truncatedText = line.join(' ') + ' ';\n tspan.text(null);\n selectAll('.tempText').remove();\n return truncatedText;\n }\n\n // Append node elements\n // nodeId to create unique key\n public addNodeShapetoSVG(\n name: string,\n subname: string | undefined,\n metricName: string | undefined,\n xCoordinate: number,\n yCoordinate: number,\n fillColor: string,\n rectangleWidth: number,\n rectangleHeight: number,\n nodeId: number,\n parentInfo: string,\n ) {\n const ariaLabel = `nodeId: ${nodeId} \\nnodeMainText: ${name}\\nsubText ${subname} ${parentInfo}`;\n this._nodeElements.push(\n <rect\n width={rectangleWidth}\n height={rectangleHeight}\n x={xCoordinate}\n y={yCoordinate}\n tabIndex={0}\n role={'text'}\n data-is-focusable={true}\n aria-label={ariaLabel}\n className={this.styleClassNames.rectNode}\n stroke={fillColor}\n key={`${nodeId}${this.styleClassNames.rectNode}`}\n />,\n );\n\n if (subname !== undefined) {\n subname = this.truncateText(subname, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectSubText);\n }\n if (metricName !== undefined) {\n metricName = this.truncateText(\n metricName,\n rectangleWidth,\n rectangleWidth / 4,\n this.styleClassNames.rectmetricText,\n );\n }\n name = this.truncateText(name, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectText);\n\n // Text position y = y + rectHeight/2, 2 is ratio for depth\n // Text position x = x + rectWidth/2, 2 is ratio for length\n // Sub-text position x = x + rectWidth/2, 2 is ratio for length\n\n const subValue =\n metricName !== undefined ? (\n <tspan className={this.styleClassNames.rectmetricText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n {metricName}\n </tspan>\n ) : (\n <tspan className={this.styleClassNames.rectSubText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n {subname}\n </tspan>\n );\n\n if (subname === undefined && metricName === undefined) {\n this._nodeElements.push(\n <text\n textAnchor=\"middle\"\n className={this.styleClassNames.rectmetricText}\n dy={yCoordinate + rectangleHeight / 1.6}\n x={xCoordinate + rectangleWidth / 2}\n key={`${nodeId}${this.styleClassNames.rectText}`}\n >\n {name}\n </text>,\n );\n } else {\n this._nodeElements.push(\n <text\n textAnchor=\"middle\"\n className={metricName !== undefined ? this.styleClassNames.rectSubText : this.styleClassNames.rectText}\n dy={metricName !== undefined ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2}\n x={xCoordinate + rectangleWidth / 2}\n key={`${nodeId}${this.styleClassNames.rectText}`}\n >\n {name}\n {subValue}\n </text>,\n );\n }\n }\n // Create a rectangular path from parent to the child nodes\n public createPathLink(\n parentX: number,\n parentY: number,\n childX: number,\n childY: number,\n leaf: boolean,\n rectWidth: number,\n rectHeight: number,\n gap: number,\n childXMax: number,\n ): string {\n // gap adds ratio for parent.y to child.y\n\n const path = `M${childX},${childY - gap} H${childXMax + rectWidth} M${parentX + rectWidth / 2},${childY - gap}\n V${parentY + rectHeight + gap / 2}`;\n\n const leafpath = `M${parentX + rectWidth / 2},${parentY + rectHeight + gap / 2} V${\n parentY + gap * 5\n } H${parentX} H${parentX + rectWidth}`;\n\n // based on the type of node return leafpath or path element\n return leaf ? leafpath : path;\n }\n\n // Append path link element\n public addLinktoSVG(\n nodeId: number,\n parentX: number,\n parentY: number,\n childX: number,\n childY: number,\n leaf: boolean,\n rectWidth: number,\n rectHeight: number,\n gap: number,\n childXMax: number = 0,\n ) {\n this._linkElements.push(\n <path\n className={this.styleClassNames.link}\n d={this.createPathLink(parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap, childXMax)}\n key={`${nodeId}${this.styleClassNames.link}`}\n />,\n );\n }\n}\n\n// Create child class to Add Tree component based on treeHeight\nclass LayeredTree extends StandardTree {\n public composition: number | undefined;\n private _treeTraversal: number | undefined;\n constructor(\n treeData: ITreeChartDataPoint,\n composition: number | undefined,\n styleClassNames: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },\n _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],\n _linkElements: Array<React.SVGProps<SVGPathElement>> = [],\n _treeTraversal: number | undefined,\n ) {\n super(treeData, styleClassNames, _nodeElements, _linkElements);\n this.composition = composition;\n this._treeTraversal = _treeTraversal;\n }\n public createTree(givenLayoutWidth: number | undefined, screenWidth: number) {\n if (givenLayoutWidth !== undefined) {\n if (givenLayoutWidth < 65) {\n givenLayoutWidth = 65;\n }\n if (givenLayoutWidth > 90) {\n givenLayoutWidth = 90;\n }\n }\n const layoutWidth = givenLayoutWidth || 75;\n const root = hierarchy(this.treeData, d => {\n return d.children;\n });\n\n // Find tree Height\n const treeHeight = root?.height + 1;\n\n // Create tree layout, width: layoutWidth, height: layoutWidth/1.5 and add node separation\n const treemap = tree()\n .nodeSize([layoutWidth, layoutWidth / 1.5])\n .separation((a, b) => {\n return a.parent === root && b.parent === root ? 3.5 : 1;\n });\n\n // Assigns the x and y position for the nodes\n const treeData = treemap(root);\n\n // Compute the new tree layout.\n const nodes = treeData.descendants();\n\n // Normalize for fixed-depth and width\n // Normalise y coordinate by depth of each node by a factor of 130\n // Normalise x coordinate by start coordinate 0 with screenSize/3\n nodes.forEach(d => {\n d.y = d.depth === 0 ? 10 : d.depth * 130;\n d.x += screenWidth / 3;\n });\n\n // <------------------ Traversal section ------------------>\n\n // Create tree data structure\n const treeDataStructure: Array<ITreeDataStructure> = [];\n let TreeID: number = 0;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const createTreeDataStructure = (d: any) => {\n d.id = TreeID;\n treeDataStructure.push({\n id: TreeID,\n children: d.children,\n dataName: d.data.name,\n subName: d.data.subname,\n metricName: d.data?.metric,\n fill: d.data.fill,\n x: d.x,\n y: d.y,\n parentID: d.parent?.id,\n });\n TreeID++;\n };\n\n this._treeTraversal === 0\n ? root.each(d => {\n createTreeDataStructure(d);\n })\n : root.eachBefore(d => {\n createTreeDataStructure(d);\n });\n\n const rectWidth = layoutWidth * 3;\n const rectHeight = rectWidth / 3.45;\n const gap: number = 20;\n const parentSet = new Set();\n\n for (const d of treeDataStructure) {\n const parentInfo =\n d.id === 0\n ? 'Root Node'\n : `Parent info parentId: ${d.parentID}\n ${treeDataStructure[d.parentID].dataName}\n ${treeDataStructure[d.parentID].subName}`;\n\n // check for leaf nodes\n if (!d.children && !parentSet.has(d.parentID) && treeHeight === 3) {\n const newWidth = (rectWidth - gap) / 2;\n const newHeight = rectHeight;\n parentSet.add(d.parentID);\n\n // <------------------ Links section ------------------>\n this.addLinktoSVG(\n d.id,\n treeDataStructure[d.parentID].x,\n treeDataStructure[d.parentID].y,\n treeDataStructure[d.id].x,\n treeDataStructure[d.id].y,\n true,\n rectWidth,\n rectHeight,\n gap,\n );\n\n // <------------------ Nodes section ------------------>\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const children: any = treeDataStructure[d.parentID]?.children;\n\n const dx1: number = treeDataStructure[d.parentID]?.x;\n const dx2: number = treeDataStructure[d.parentID]?.x + newWidth + gap;\n let dy: number = children[0]?.y;\n\n for (let itr = 0; itr < children.length; ++itr) {\n const child = children[itr];\n\n // Given Composition\n if (this.composition !== undefined) {\n // For compact compostion\n if (this.composition === 0) {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.metricName,\n itr % 2 === 0 ? dx1 : dx2,\n dy,\n child.data.fill,\n children.length === 1 ? rectWidth : newWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n if (itr % 2 === 1) {\n dy += newHeight + gap;\n }\n }\n // For long compostion\n else {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.metricName,\n dx1,\n dy,\n child.data.fill,\n rectWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n dy += newHeight + gap;\n }\n }\n\n // Automatic Node Composition\n else {\n if (children.length > 2) {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.metricName,\n itr % 2 === 0 ? dx1 : dx2,\n dy,\n child.data.fill,\n children.length === 1 ? rectWidth : newWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n if (itr % 2 === 1) {\n dy += newHeight + gap;\n }\n } else {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.metricName,\n dx1,\n dy,\n child.data.fill,\n rectWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n dy += newHeight + gap;\n }\n }\n }\n }\n\n if (d.children || treeHeight <= 2) {\n // <------------------ Nodes section ------------------>\n this.addNodeShapetoSVG(\n d.dataName,\n d.subName,\n d.metricName,\n d.x,\n d.y,\n d.fill,\n rectWidth,\n rectHeight,\n d.id,\n parentInfo,\n );\n\n // <------------------ Links section ------------------>\n if (d.id === 0 && d.children) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const children: any = treeDataStructure[d.id]?.children;\n const childXMin = d3Min(children, (child: ITreeDataStructure) => child.x as number)!;\n const childXMax = d3Max(children, (child: ITreeDataStructure) => child.x as number)!;\n this.addLinktoSVG(d.id, d.x, d.y, childXMin, d.children[0].y, false, rectWidth, rectHeight, gap, childXMax);\n }\n }\n }\n }\n}\n\nexport class TreeChartBase extends React.Component<ITreeProps, ITreeState> {\n private _treeData: ITreeChartDataPoint;\n private _width: number;\n private _height: number;\n private _composition: number | undefined;\n private _classNames: IProcessedStyleSet<ITreeStyles>;\n private _margin: { left: number; right: number; top: number; bottom: number };\n private _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n private _treeTraversal: number | undefined;\n\n constructor(props: ITreeProps) {\n super(props);\n this._margin = { top: 30, right: 20, bottom: 30, left: 50 };\n this._width = this.props.width || 1500;\n this._height = this.props.height || 700;\n this._treeData = this.props.treeData;\n this._composition = this.props?.composition;\n this._treeTraversal = this.props.treeTraversal;\n\n this.state = {\n _width: this._width,\n _height: this._height,\n };\n }\n\n public componentDidMount() {\n const { theme, className, styles } = this.props;\n\n // Get classNames to create component styling\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n\n // Call createTreeChart function in componentDidMount\n this.createTreeChart();\n\n this.setState({\n _width: this.props.width || 1500,\n _height: this.props.height || 700,\n });\n }\n\n public componentDidUpdate(prevProps: ITreeProps): void {\n if (prevProps.layoutWidth !== this.props.layoutWidth) {\n const svgText = selectAll('text');\n const svgRect = selectAll('rect');\n const svgLink = selectAll('path');\n\n if (this._nodeElements.length === 0 && this._linkElements.length === 0) {\n svgText.remove();\n svgRect.remove();\n svgLink.remove();\n }\n\n this.createTreeChart();\n }\n }\n public createTreeChart() {\n const nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n const linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n\n // Create styleClass object to access it in parent class\n const styleClassNames = {\n link: this._classNames.link,\n rectNode: this._classNames.rectNode,\n rectText: this._classNames.rectText,\n rectSubText: this._classNames.rectSubText,\n rectmetricText: this._classNames.rectMetricText,\n };\n // Instantiate inherited class and call createTree function for the object\n const treeObject = new LayeredTree(\n this._treeData,\n this._composition,\n styleClassNames,\n nodeElements,\n linkElements,\n this._treeTraversal,\n );\n treeObject.createTree(this.props.layoutWidth, this._width);\n this._nodeElements = nodeElements;\n this._linkElements = linkElements;\n }\n\n public render(): JSX.Element {\n return (\n <FocusZone>\n <div className={this._classNames?.root}>\n <svg\n className=\"svgTree\"\n width={this.state._width - this._margin.left - this._margin.right}\n height={this.state._height - this._margin.top - this._margin.bottom}\n >\n <g className=\"svgNode\">{this._nodeElements.map(element => element)}</g>\n <g className=\"svgLink\">{this._linkElements.map(element => element)}</g>\n </svg>\n </div>\n </FocusZone>\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeChart.types.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.types.ts"],"names":[],"mappings":"AA0BA,MAAM,CAAN,IAAY,gBASX;AATD,WAAY,gBAAgB;IAC1B;;OAEG;IACH,uDAAQ,CAAA;IACR;;OAEG;IACH,6DAAW,CAAA;AACb,CAAC,EATW,gBAAgB,KAAhB,gBAAgB,QAS3B;AAED,MAAM,CAAN,IAAY,YASX;AATD,WAAY,YAAY;IACtB;;OAEG;IACH,uDAAY,CAAA;IACZ;;OAEG;IACH,2DAAc,CAAA;AAChB,CAAC,EATW,YAAY,KAAZ,YAAY,QASvB","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\n\nexport interface ITreeChartDataPoint {\n /**\n * Node main text\n */\n name: string;\n /**\n * Subtext value (optional)\n */\n subname?: string | undefined;\n /**\n * Metric text value (optional)\n */\n metric?: string | undefined;\n /**\n * Color of the rectangular box\n */\n fill: string;\n /**\n * Recursive datastructure for child node object\n */\n children?: Array<ITreeChartDataPoint>;\n}\n\nexport enum NodesComposition {\n /**\n * NodeComposition enum val for long: number = 1\n */\n long = 1,\n /**\n * NodeComposition enum val for compact: number = 0\n */\n compact = 0,\n}\n\nexport enum TreeTraverse {\n /**\n * TreeTraverse enum val for preOrder: number = 1\n */\n preOrder = 1,\n /**\n * TreeTraverse enum val for levelOrder: number = 0\n */\n levelOrder = 0,\n}\n\nexport interface ITreeProps {\n /**\n * An object of chart data points for the Tree chart\n */\n treeData: ITreeChartDataPoint;\n /**\n * compostion for three layer chart, long: composition = 1; compact: composition = 0\n */\n composition?: NodesComposition.long | NodesComposition.compact | undefined;\n /**\n * Node Width Size for the Tree Layout\n * * @default 75\n */\n layoutWidth?: number | undefined;\n /**\n * traversal order for tree chart, preOrder = 1, levelOrder = 0\n */\n treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder;\n /**\n * Width of SVG tree chart\n * * @default 1500\n */\n width?: number;\n /**\n * Height of SVG tree chart\n * * @default 700\n */\n height?: number;\n /**\n * Margin for the SVG tree chart\n */\n marign?: { left: number; right: number; top: number; bottom: number };\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<ITreeStyleProps, ITreeStyles>;\n /**\n * Additional CSS class(es) to apply to the TreeChart.\n */\n className?: string;\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n}\nexport interface ITreeState {\n /**\n * Width of SVG tree chart\n * * @default 1500\n */\n _width: number;\n /**\n * Height of SVG tree chart\n * * @default 700\n */\n _height: number;\n /**\n * Layout Width of SVG tree chart\n * * @default 75\n */\n _layoutWidth?: number;\n}\n\nexport interface ITreeDataStructure {\n /**\n * Node id of each node\n */\n id: number;\n /**\n * Children node object\n */\n children:
|
|
1
|
+
{"version":3,"file":"TreeChart.types.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.types.ts"],"names":[],"mappings":"AA0BA,MAAM,CAAN,IAAY,gBASX;AATD,WAAY,gBAAgB;IAC1B;;OAEG;IACH,uDAAQ,CAAA;IACR;;OAEG;IACH,6DAAW,CAAA;AACb,CAAC,EATW,gBAAgB,KAAhB,gBAAgB,QAS3B;AAED,MAAM,CAAN,IAAY,YASX;AATD,WAAY,YAAY;IACtB;;OAEG;IACH,uDAAY,CAAA;IACZ;;OAEG;IACH,2DAAc,CAAA;AAChB,CAAC,EATW,YAAY,KAAZ,YAAY,QASvB","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\n\nexport interface ITreeChartDataPoint {\n /**\n * Node main text\n */\n name: string;\n /**\n * Subtext value (optional)\n */\n subname?: string | undefined;\n /**\n * Metric text value (optional)\n */\n metric?: string | undefined;\n /**\n * Color of the rectangular box\n */\n fill: string;\n /**\n * Recursive datastructure for child node object\n */\n children?: Array<ITreeChartDataPoint>;\n}\n\nexport enum NodesComposition {\n /**\n * NodeComposition enum val for long: number = 1\n */\n long = 1,\n /**\n * NodeComposition enum val for compact: number = 0\n */\n compact = 0,\n}\n\nexport enum TreeTraverse {\n /**\n * TreeTraverse enum val for preOrder: number = 1\n */\n preOrder = 1,\n /**\n * TreeTraverse enum val for levelOrder: number = 0\n */\n levelOrder = 0,\n}\n\nexport interface ITreeProps {\n /**\n * An object of chart data points for the Tree chart\n */\n treeData: ITreeChartDataPoint;\n /**\n * compostion for three layer chart, long: composition = 1; compact: composition = 0\n */\n composition?: NodesComposition.long | NodesComposition.compact | undefined;\n /**\n * Node Width Size for the Tree Layout\n * * @default 75\n */\n layoutWidth?: number | undefined;\n /**\n * traversal order for tree chart, preOrder = 1, levelOrder = 0\n */\n treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder;\n /**\n * Width of SVG tree chart\n * * @default 1500\n */\n width?: number;\n /**\n * Height of SVG tree chart\n * * @default 700\n */\n height?: number;\n /**\n * Margin for the SVG tree chart\n */\n marign?: { left: number; right: number; top: number; bottom: number };\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<ITreeStyleProps, ITreeStyles>;\n /**\n * Additional CSS class(es) to apply to the TreeChart.\n */\n className?: string;\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n}\nexport interface ITreeState {\n /**\n * Width of SVG tree chart\n * * @default 1500\n */\n _width: number;\n /**\n * Height of SVG tree chart\n * * @default 700\n */\n _height: number;\n /**\n * Layout Width of SVG tree chart\n * * @default 75\n */\n _layoutWidth?: number;\n}\n\nexport interface ITreeDataStructure {\n /**\n * Node id of each node\n */\n id: number;\n /**\n * Children node object\n */\n children: Array<ITreeDataStructure>;\n /**\n * Node main text\n */\n dataName: string;\n /**\n * Subtext value (optional)\n */\n subName?: string | undefined;\n /**\n * Metric text value (optional)\n */\n metricName?: string | undefined;\n /**\n * Color of the rectangular box\n */\n fill: string;\n /**\n * X-coordindate of node\n */\n x: number;\n /**\n * Y-coordindate of node\n */\n y: number;\n /**\n * Node id of each node's parent\n */\n parentID: number;\n}\n\nexport interface ITreeStyleProps {\n /**\n * Theme (provided through customization.)\n */\n theme: ITheme;\n /**\n * Additional CSS class(es) to apply to the TreeChart.\n */\n className?: string;\n}\nexport interface ITreeStyles {\n /**\n * Style for the root element.\n */\n root: IStyle;\n /**\n * Style for the Link/Path element.\n */\n link: IStyle;\n /**\n * Style for rectangular Node\n */\n rectNode: IStyle;\n /**\n * Style for the node main Text\n */\n rectText: IStyle;\n /**\n * Style for the node sub Text\n */\n rectSubText: IStyle;\n /**\n * Style for the node metric value Text\n */\n rectMetricText: IStyle;\n}\n"]}
|
package/lib/version.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Do not modify this file; it is generated as part of publish.
|
|
2
2
|
// The checked in version is a placeholder only and will not be updated.
|
|
3
3
|
import { setVersion } from '@fluentui/set-version';
|
|
4
|
-
setVersion('@fluentui/react-charting', '5.12.
|
|
4
|
+
setVersion('@fluentui/react-charting', '5.12.10');
|
|
5
5
|
//# sourceMappingURL=version.js.map
|
package/lib/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,UAAU,CAAC,0BAA0B,EAAE,
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,UAAU,CAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-charting', '5.12.10');"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { IAccessibilityProps, IBasestate, ILineChartProps, ILineChartPoints, ICustomizedCalloutData, IColorFillBarsProps } from '../../index';
|
|
2
|
+
import { IAccessibilityProps, IBasestate, ILineChartProps, ILineChartPoints, ICustomizedCalloutData, IColorFillBarsProps, ILineChartDataPoint } from '../../index';
|
|
3
3
|
declare type LineChartDataWithIndex = ILineChartPoints & {
|
|
4
4
|
index: number;
|
|
5
5
|
};
|
|
@@ -11,6 +11,8 @@ export interface ILineChartState extends IBasestate {
|
|
|
11
11
|
stackCalloutProps?: ICustomizedCalloutData;
|
|
12
12
|
activePoint?: string;
|
|
13
13
|
xAxisCalloutAccessibilityData?: IAccessibilityProps;
|
|
14
|
+
nearestCircleToHighlight: ILineChartDataPoint | null;
|
|
15
|
+
activeLine: number | null;
|
|
14
16
|
}
|
|
15
17
|
export declare class LineChartBase extends React.Component<ILineChartProps, ILineChartState> {
|
|
16
18
|
private _points;
|
|
@@ -50,6 +52,7 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
|
|
|
50
52
|
private _getStripePattern;
|
|
51
53
|
private _checkInGap;
|
|
52
54
|
private _refCallback;
|
|
55
|
+
private _onMouseOverLargeDataset;
|
|
53
56
|
private _handleFocus;
|
|
54
57
|
private _handleHover;
|
|
55
58
|
private _onLineClick;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/index", "@fluentui/react/lib/Utilities", "../../index", "@fluentui/react/lib/Callout", "./eventAnnotation/EventAnnotation", "../../utilities/index"], function (require, exports, tslib_1, React, d3_selection_1, index_1, Utilities_1, index_2, Callout_1, EventAnnotation_1, index_3) {
|
|
1
|
+
define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../Legends/index", "d3-shape", "@fluentui/react/lib/Utilities", "../../index", "@fluentui/react/lib/Callout", "./eventAnnotation/EventAnnotation", "../../utilities/index"], function (require, exports, tslib_1, React, d3_selection_1, d3_array_1, index_1, d3_shape_1, Utilities_1, index_2, Callout_1, EventAnnotation_1, index_3) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.LineChartBase = void 0;
|
|
@@ -8,6 +8,8 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
|
|
|
8
8
|
PointSize[PointSize["hoverSize"] = 11] = "hoverSize";
|
|
9
9
|
PointSize[PointSize["invisibleSize"] = 1] = "invisibleSize";
|
|
10
10
|
})(PointSize || (PointSize = {}));
|
|
11
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12
|
+
var bisect = d3_array_1.bisector(function (d) { return d.x; }).left;
|
|
11
13
|
var DEFAULT_LINE_STROKE_SIZE = 4;
|
|
12
14
|
// The given shape of a icon must be 2.5 times bigger than line width (known as stroke width)
|
|
13
15
|
var PATH_MULTIPLY_SIZE = 2.5;
|
|
@@ -204,6 +206,97 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
|
|
|
204
206
|
}
|
|
205
207
|
return { isInGap: isInGap, gapIndex: gapIndex };
|
|
206
208
|
};
|
|
209
|
+
_this_1._onMouseOverLargeDataset = function (linenumber, lineHeight, mouseEvent) {
|
|
210
|
+
// Run this code for different scenarios. For data and numeric data. Try to satisfy undefined d0/d1 scenario.
|
|
211
|
+
mouseEvent.persist();
|
|
212
|
+
var data = _this_1.props.data;
|
|
213
|
+
var lineChartData = data.lineChartData;
|
|
214
|
+
// This will get the value of the X when mouse is on the chart
|
|
215
|
+
var xOffset = _this_1._xAxisScale.invert(mouseEvent.pageX - 15); //Todo - fix this
|
|
216
|
+
var i = bisect(lineChartData[linenumber].data, xOffset);
|
|
217
|
+
var d0 = lineChartData[linenumber].data[i - 1];
|
|
218
|
+
var d1 = lineChartData[linenumber].data[i];
|
|
219
|
+
var axisType = null;
|
|
220
|
+
var xPointToHighlight = null;
|
|
221
|
+
var index = null;
|
|
222
|
+
if (d0 === undefined && d1 !== undefined) {
|
|
223
|
+
xPointToHighlight = d1.x;
|
|
224
|
+
index = i;
|
|
225
|
+
}
|
|
226
|
+
else if (d0 !== undefined && d1 === undefined) {
|
|
227
|
+
xPointToHighlight = d0.x;
|
|
228
|
+
index = i - 1;
|
|
229
|
+
}
|
|
230
|
+
else {
|
|
231
|
+
axisType = index_3.getTypeOfAxis(lineChartData[linenumber].data[0].x, true);
|
|
232
|
+
var x0 = void 0;
|
|
233
|
+
var point0 = void 0;
|
|
234
|
+
var point1 = void 0;
|
|
235
|
+
switch (axisType) {
|
|
236
|
+
case index_3.XAxisTypes.DateAxis:
|
|
237
|
+
x0 = new Date(xOffset).getTime();
|
|
238
|
+
point0 = d0.x.getTime();
|
|
239
|
+
point1 = d1.x.getTime();
|
|
240
|
+
xPointToHighlight = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? d1.x : d0.x;
|
|
241
|
+
index = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? i : i - 1;
|
|
242
|
+
break;
|
|
243
|
+
case index_3.XAxisTypes.NumericAxis:
|
|
244
|
+
x0 = xOffset;
|
|
245
|
+
point0 = d0.x;
|
|
246
|
+
point1 = d1.x;
|
|
247
|
+
xPointToHighlight = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? d1.x : d0.x;
|
|
248
|
+
index = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? i : i - 1;
|
|
249
|
+
break;
|
|
250
|
+
default:
|
|
251
|
+
break;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
var _a = lineChartData[linenumber].data[index], xAxisCalloutData = _a.xAxisCalloutData, xAxisCalloutAccessibilityData = _a.xAxisCalloutAccessibilityData;
|
|
255
|
+
var formattedDate = xPointToHighlight instanceof Date ? xPointToHighlight.toLocaleString() : xPointToHighlight;
|
|
256
|
+
var modifiedXVal = xPointToHighlight instanceof Date ? xPointToHighlight.getTime() : xPointToHighlight;
|
|
257
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
258
|
+
var found = Utilities_1.find(_this_1._calloutPoints, function (element) {
|
|
259
|
+
return element.x === modifiedXVal;
|
|
260
|
+
});
|
|
261
|
+
var pointToHighlight = lineChartData[linenumber].data[index];
|
|
262
|
+
var pointToHighlightUpdated = _this_1.state.nearestCircleToHighlight === null ||
|
|
263
|
+
(_this_1.state.nearestCircleToHighlight !== null &&
|
|
264
|
+
pointToHighlight !== null &&
|
|
265
|
+
(_this_1.state.nearestCircleToHighlight.x !== pointToHighlight.x ||
|
|
266
|
+
_this_1.state.nearestCircleToHighlight.y !== pointToHighlight.y));
|
|
267
|
+
// if no points need to be called out then don't show vertical line and callout card
|
|
268
|
+
if (found && pointToHighlightUpdated) {
|
|
269
|
+
_this_1._uniqueCallOutID = "#staticHighlightCircle_" + linenumber;
|
|
270
|
+
d3_selection_1.select("#staticHighlightCircle_" + linenumber)
|
|
271
|
+
.attr('cx', "" + _this_1._xAxisScale(pointToHighlight.x))
|
|
272
|
+
.attr('cy', "" + _this_1._yAxisScale(pointToHighlight.y))
|
|
273
|
+
.attr('visibility', 'visibility');
|
|
274
|
+
d3_selection_1.select("#" + _this_1._verticalLine)
|
|
275
|
+
.attr('transform', function () { return "translate(" + _this_1._xAxisScale(pointToHighlight.x) + ", " + _this_1._yAxisScale(pointToHighlight.y) + ")"; })
|
|
276
|
+
.attr('visibility', 'visibility')
|
|
277
|
+
.attr('y2', "" + (lineHeight - _this_1._yAxisScale(pointToHighlight.y)));
|
|
278
|
+
_this_1.setState({
|
|
279
|
+
nearestCircleToHighlight: pointToHighlight,
|
|
280
|
+
isCalloutVisible: true,
|
|
281
|
+
refSelected: "#staticHighlightCircle_" + linenumber,
|
|
282
|
+
stackCalloutProps: found,
|
|
283
|
+
YValueHover: found.values,
|
|
284
|
+
dataPointCalloutProps: found,
|
|
285
|
+
hoverXValue: xAxisCalloutData ? xAxisCalloutData : formattedDate,
|
|
286
|
+
xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
|
|
287
|
+
activePoint: '',
|
|
288
|
+
activeLine: linenumber,
|
|
289
|
+
});
|
|
290
|
+
}
|
|
291
|
+
if (!found) {
|
|
292
|
+
_this_1.setState({
|
|
293
|
+
isCalloutVisible: false,
|
|
294
|
+
nearestCircleToHighlight: pointToHighlight,
|
|
295
|
+
activePoint: '',
|
|
296
|
+
activeLine: linenumber,
|
|
297
|
+
});
|
|
298
|
+
}
|
|
299
|
+
};
|
|
207
300
|
_this_1._handleFocus = function (lineId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData) {
|
|
208
301
|
_this_1._uniqueCallOutID = circleId;
|
|
209
302
|
var formattedData = x instanceof Date ? x.toLocaleDateString() : x;
|
|
@@ -260,12 +353,16 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
|
|
|
260
353
|
dataPointCalloutProps: found,
|
|
261
354
|
activePoint: circleId,
|
|
262
355
|
xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
|
|
356
|
+
nearestCircleToHighlight: null,
|
|
357
|
+
activeLine: null,
|
|
263
358
|
});
|
|
264
359
|
}
|
|
265
360
|
}
|
|
266
361
|
else {
|
|
267
362
|
_this_1.setState({
|
|
268
363
|
activePoint: circleId,
|
|
364
|
+
nearestCircleToHighlight: null,
|
|
365
|
+
activeLine: null,
|
|
269
366
|
});
|
|
270
367
|
}
|
|
271
368
|
};
|
|
@@ -287,6 +384,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
|
|
|
287
384
|
_this_1.setState({
|
|
288
385
|
isCalloutVisible: false,
|
|
289
386
|
activePoint: '',
|
|
387
|
+
activeLine: null,
|
|
290
388
|
});
|
|
291
389
|
};
|
|
292
390
|
_this_1._handleLegendClick = function (lineChartItem, selectedLegend) {
|
|
@@ -392,6 +490,8 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
|
|
|
392
490
|
selectedColorBarLegend: [],
|
|
393
491
|
isSelectedLegend: false,
|
|
394
492
|
activePoint: '',
|
|
493
|
+
nearestCircleToHighlight: null,
|
|
494
|
+
activeLine: null,
|
|
395
495
|
};
|
|
396
496
|
_this_1._refArray = [];
|
|
397
497
|
_this_1._points = _this_1._injectIndexPropertyInLineChartData(_this_1.props.data.lineChartData);
|
|
@@ -509,7 +609,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
|
|
|
509
609
|
};
|
|
510
610
|
LineChartBase.prototype._createLines = function (xElement, containerHeight) {
|
|
511
611
|
var _this_1 = this;
|
|
512
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
612
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
513
613
|
var lines = [];
|
|
514
614
|
if (this.state.isSelectedLegend) {
|
|
515
615
|
this._points = this.state.selectedLegendPoints;
|
|
@@ -517,7 +617,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
|
|
|
517
617
|
else {
|
|
518
618
|
this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
|
|
519
619
|
}
|
|
520
|
-
for (var i =
|
|
620
|
+
for (var i = this._points.length - 1; i >= 0; i--) {
|
|
521
621
|
var linesForLine = [];
|
|
522
622
|
var bordersForLine = [];
|
|
523
623
|
var pointsForLine = [];
|
|
@@ -527,59 +627,98 @@ define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/inde
|
|
|
527
627
|
var theme = this.props.theme;
|
|
528
628
|
var verticaLineHeight = containerHeight - this.margins.bottom + 6;
|
|
529
629
|
if (this._points[i].data.length === 1) {
|
|
530
|
-
var
|
|
630
|
+
var _0 = this._points[i].data[0], x1 = _0.x, y1 = _0.y, xAxisCalloutData = _0.xAxisCalloutData, xAxisCalloutAccessibilityData = _0.xAxisCalloutAccessibilityData;
|
|
531
631
|
var circleId = "" + this._circleId + i;
|
|
532
632
|
pointsForLine.push(React.createElement("circle", { id: "" + this._circleId + i, key: "" + this._circleId + i, r: activePoint === circleId ? 5.5 : 3.5, cx: this._xAxisScale(x1), cy: this._yAxisScale(y1), fill: activePoint === circleId ? theme.palette.white : lineColor, onMouseOver: this._handleHover.bind(this, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this._handleHover.bind(this, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this._handleMouseOut, strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId ? lineColor : '' }));
|
|
533
633
|
}
|
|
534
634
|
var gapIndex = 0;
|
|
535
635
|
var gaps = (_b = (_a = this._points[i].gaps) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return a.startIndex - b.startIndex; })) !== null && _b !== void 0 ? _b : [];
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
var
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
var
|
|
545
|
-
var
|
|
546
|
-
var strokeWidth = ((_c =
|
|
547
|
-
var isLegendSelected =
|
|
548
|
-
var
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
557
|
-
}, onBlur: this_1._handleMouseOut, onClick: this_1._onDataPointClick.bind(this_1, this_1._points[i].data[j].onDataPointClick), opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth }));
|
|
558
|
-
/* eslint-enable react/jsx-no-bind */
|
|
636
|
+
// Use path rendering technique for larger datasets to optimize performance.
|
|
637
|
+
if (this._points[i].data.length >= 1000 || this.props.optimizeLargeData) {
|
|
638
|
+
var line = d3_shape_1.line()
|
|
639
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
640
|
+
.x(function (d) { return _this_1._xAxisScale(d[0]); })
|
|
641
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
642
|
+
.y(function (d) { return _this_1._yAxisScale(d[1]); })
|
|
643
|
+
.curve(d3_shape_1.curveLinear);
|
|
644
|
+
var lineId = "" + this._lineId + i;
|
|
645
|
+
var borderId = "" + this._borderId + i;
|
|
646
|
+
var strokeWidth = ((_c = this._points[i].lineOptions) === null || _c === void 0 ? void 0 : _c.strokeWidth) || this.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
647
|
+
var isLegendSelected = this.state.activeLegend === legendVal || this.state.activeLegend === '' || this.state.isSelectedLegend;
|
|
648
|
+
var lineData = [];
|
|
649
|
+
for (var k = 0; k < this._points[i].data.length; k++) {
|
|
650
|
+
lineData.push([
|
|
651
|
+
this._points[i].data[k].x instanceof Date
|
|
652
|
+
? this._points[i].data[k].x.getTime()
|
|
653
|
+
: this._points[i].data[k].x,
|
|
654
|
+
this._points[i].data[k].y,
|
|
655
|
+
]);
|
|
559
656
|
}
|
|
560
657
|
if (isLegendSelected) {
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
if (lineBorderWidth > 0) {
|
|
567
|
-
bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeLinecap: (_f = (_e = this_1._points[i].lineOptions) === null || _e === void 0 ? void 0 : _e.strokeLinecap) !== null && _f !== void 0 ? _f : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_g = this_1._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.lineBorderColor) || theme.palette.white, opacity: 1 }));
|
|
568
|
-
}
|
|
569
|
-
linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, ref: function (e) {
|
|
570
|
-
_this_1._refCallback(e, lineId);
|
|
571
|
-
}, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_j = (_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', strokeDasharray: (_k = this_1._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.strokeDasharray, strokeDashoffset: (_l = this_1._points[i].lineOptions) === null || _l === void 0 ? void 0 : _l.strokeDashoffset, opacity: 1, onClick: this_1._onLineClick.bind(this_1, this_1._points[i].onLineClick) }));
|
|
658
|
+
var lineBorderWidth = ((_d = this._points[i].lineOptions) === null || _d === void 0 ? void 0 : _d.lineBorderWidth)
|
|
659
|
+
? Number.parseFloat(this._points[i].lineOptions.lineBorderWidth.toString())
|
|
660
|
+
: 0;
|
|
661
|
+
if (lineBorderWidth > 0) {
|
|
662
|
+
bordersForLine.push(React.createElement("path", { id: borderId, key: borderId, d: line(lineData), fill: "transparent", strokeLinecap: (_f = (_e = this._points[i].lineOptions) === null || _e === void 0 ? void 0 : _e.strokeLinecap) !== null && _f !== void 0 ? _f : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_g = this._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.lineBorderColor) || theme.palette.white, opacity: 1 }));
|
|
572
663
|
}
|
|
664
|
+
linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_j = (_h = this._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', onMouseMove: this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight), onMouseOver: this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight), onMouseOut: this._handleMouseOut, onClick: this._onLineClick.bind(this, this._points[i].onLineClick), opacity: 1 }));
|
|
573
665
|
}
|
|
574
666
|
else {
|
|
575
|
-
|
|
576
|
-
|
|
667
|
+
linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_l = (_k = this._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.strokeLinecap) !== null && _l !== void 0 ? _l : 'round', opacity: 0.1 }));
|
|
668
|
+
}
|
|
669
|
+
var isPointHighlighted = this.state.activeLine !== null && this.state.activeLine === i;
|
|
670
|
+
pointsForLine.push(React.createElement("circle", { id: "staticHighlightCircle_" + i, key: "staticHighlightCircle_" + i, r: 5.5, cx: 0, cy: 0, fill: theme.palette.white, "data-is-focusable": true, strokeWidth: DEFAULT_LINE_STROKE_SIZE, stroke: lineColor, visibility: isPointHighlighted ? 'visibility' : 'hidden', onMouseMove: this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight), onMouseOver: this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight), onMouseOut: this._handleMouseOut }));
|
|
671
|
+
}
|
|
672
|
+
else {
|
|
673
|
+
var _loop_1 = function (j) {
|
|
674
|
+
var gapResult = this_1._checkInGap(j, gaps, gapIndex);
|
|
675
|
+
var isInGap = gapResult.isInGap;
|
|
676
|
+
gapIndex = gapResult.gapIndex;
|
|
677
|
+
var lineId = "" + this_1._lineId + i + j;
|
|
678
|
+
var borderId = "" + this_1._borderId + i + j;
|
|
679
|
+
var circleId = "" + this_1._circleId + i + j;
|
|
680
|
+
var _1 = this_1._points[i].data[j - 1], x1 = _1.x, y1 = _1.y, xAxisCalloutData = _1.xAxisCalloutData, xAxisCalloutAccessibilityData = _1.xAxisCalloutAccessibilityData;
|
|
681
|
+
var _2 = this_1._points[i].data[j], x2 = _2.x, y2 = _2.y;
|
|
682
|
+
var path = this_1._getPath(this_1._xAxisScale(x1), this_1._yAxisScale(y1), circleId, j, false, this_1._points[i].index);
|
|
683
|
+
var strokeWidth = ((_m = this_1._points[i].lineOptions) === null || _m === void 0 ? void 0 : _m.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
684
|
+
var isLegendSelected = this_1.state.activeLegend === legendVal || this_1.state.activeLegend === '' || this_1.state.isSelectedLegend;
|
|
685
|
+
var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
|
|
686
|
+
pointsForLine.push(React.createElement("path", { id: circleId, key: circleId, d: path, "data-is-focusable": true, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut, onClick: this_1._onDataPointClick.bind(this_1, this_1._points[i].data[j - 1].onDataPointClick), opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth }));
|
|
687
|
+
if (j + 1 === this_1._points[i].data.length) {
|
|
688
|
+
// If this is last point of the line segment.
|
|
689
|
+
var lastCircleId_1 = "" + circleId + j + "L";
|
|
690
|
+
var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
|
|
691
|
+
path = this_1._getPath(this_1._xAxisScale(x2), this_1._yAxisScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
|
|
692
|
+
var _3 = this_1._points[i].data[j], lastCirlceXCallout_1 = _3.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _3.xAxisCalloutAccessibilityData;
|
|
693
|
+
pointsForLine.push(React.createElement("path", { id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": true, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, onFocus: function () {
|
|
694
|
+
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
695
|
+
}, onBlur: this_1._handleMouseOut, onClick: this_1._onDataPointClick.bind(this_1, this_1._points[i].data[j].onDataPointClick), opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth }));
|
|
696
|
+
/* eslint-enable react/jsx-no-bind */
|
|
577
697
|
}
|
|
698
|
+
if (isLegendSelected) {
|
|
699
|
+
// don't draw line if it is in a gap
|
|
700
|
+
if (!isInGap) {
|
|
701
|
+
var lineBorderWidth = ((_o = this_1._points[i].lineOptions) === null || _o === void 0 ? void 0 : _o.lineBorderWidth)
|
|
702
|
+
? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
|
|
703
|
+
: 0;
|
|
704
|
+
if (lineBorderWidth > 0) {
|
|
705
|
+
bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeLinecap: (_q = (_p = this_1._points[i].lineOptions) === null || _p === void 0 ? void 0 : _p.strokeLinecap) !== null && _q !== void 0 ? _q : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.lineBorderColor) || theme.palette.white, opacity: 1 }));
|
|
706
|
+
}
|
|
707
|
+
linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, ref: function (e) {
|
|
708
|
+
_this_1._refCallback(e, lineId);
|
|
709
|
+
}, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_t = (_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeLinecap) !== null && _t !== void 0 ? _t : 'round', strokeDasharray: (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.strokeDasharray, strokeDashoffset: (_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.strokeDashoffset, opacity: 1, onClick: this_1._onLineClick.bind(this_1, this_1._points[i].onLineClick) }));
|
|
710
|
+
}
|
|
711
|
+
}
|
|
712
|
+
else {
|
|
713
|
+
if (!isInGap) {
|
|
714
|
+
linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_x = (_w = this_1._points[i].lineOptions) === null || _w === void 0 ? void 0 : _w.strokeLinecap) !== null && _x !== void 0 ? _x : 'round', strokeDasharray: (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.strokeDasharray, strokeDashoffset: (_z = this_1._points[i].lineOptions) === null || _z === void 0 ? void 0 : _z.strokeDashoffset, opacity: 0.1 }));
|
|
715
|
+
}
|
|
716
|
+
}
|
|
717
|
+
};
|
|
718
|
+
var this_1 = this;
|
|
719
|
+
for (var j = 1; j < this._points[i].data.length; j++) {
|
|
720
|
+
_loop_1(j);
|
|
578
721
|
}
|
|
579
|
-
};
|
|
580
|
-
var this_1 = this;
|
|
581
|
-
for (var j = 1; j < this._points[i].data.length; j++) {
|
|
582
|
-
_loop_1(j);
|
|
583
722
|
}
|
|
584
723
|
lines.push.apply(lines, tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([], bordersForLine), linesForLine), pointsForLine));
|
|
585
724
|
}
|