@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":";;;;IA0BA,IAAY,gBASX;IATD,WAAY,gBAAgB;QAC1B;;WAEG;QACH,uDAAQ,CAAA;QACR;;WAEG;QACH,6DAAW,CAAA;IACb,CAAC,EATW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAS3B;IAED,IAAY,YASX;IATD,WAAY,YAAY;QACtB;;WAEG;QACH,uDAAY,CAAA;QACZ;;WAEG;QACH,2DAAc,CAAA;IAChB,CAAC,EATW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,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":";;;;IA0BA,IAAY,gBASX;IATD,WAAY,gBAAgB;QAC1B;;WAEG;QACH,uDAAQ,CAAA;QACR;;WAEG;QACH,6DAAW,CAAA;IACb,CAAC,EATW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAS3B;IAED,IAAY,YASX;IATD,WAAY,YAAY;QACtB;;WAEG;QACH,uDAAY,CAAA;QACZ;;WAEG;QACH,2DAAc,CAAA;IAChB,CAAC,EATW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,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-amd/version.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
define(["require", "exports", "@fluentui/set-version"], function (require, exports, set_version_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
set_version_1.setVersion('@fluentui/react-charting', '5.12.
|
|
4
|
+
set_version_1.setVersion('@fluentui/react-charting', '5.12.10');
|
|
5
5
|
});
|
|
6
6
|
//# sourceMappingURL=version.js.map
|
package/lib-amd/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,wBAAU,CAAC,0BAA0B,EAAE,
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,wBAAU,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;
|
|
@@ -4,7 +4,9 @@ exports.LineChartBase = void 0;
|
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var React = require("react");
|
|
6
6
|
var d3_selection_1 = require("d3-selection");
|
|
7
|
+
var d3_array_1 = require("d3-array");
|
|
7
8
|
var index_1 = require("../Legends/index");
|
|
9
|
+
var d3_shape_1 = require("d3-shape");
|
|
8
10
|
var Utilities_1 = require("@fluentui/react/lib-commonjs/Utilities");
|
|
9
11
|
var index_2 = require("../../index");
|
|
10
12
|
var Callout_1 = require("@fluentui/react/lib-commonjs/Callout");
|
|
@@ -16,6 +18,8 @@ var PointSize;
|
|
|
16
18
|
PointSize[PointSize["hoverSize"] = 11] = "hoverSize";
|
|
17
19
|
PointSize[PointSize["invisibleSize"] = 1] = "invisibleSize";
|
|
18
20
|
})(PointSize || (PointSize = {}));
|
|
21
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
22
|
+
var bisect = d3_array_1.bisector(function (d) { return d.x; }).left;
|
|
19
23
|
var DEFAULT_LINE_STROKE_SIZE = 4;
|
|
20
24
|
// The given shape of a icon must be 2.5 times bigger than line width (known as stroke width)
|
|
21
25
|
var PATH_MULTIPLY_SIZE = 2.5;
|
|
@@ -212,6 +216,97 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
212
216
|
}
|
|
213
217
|
return { isInGap: isInGap, gapIndex: gapIndex };
|
|
214
218
|
};
|
|
219
|
+
_this_1._onMouseOverLargeDataset = function (linenumber, lineHeight, mouseEvent) {
|
|
220
|
+
// Run this code for different scenarios. For data and numeric data. Try to satisfy undefined d0/d1 scenario.
|
|
221
|
+
mouseEvent.persist();
|
|
222
|
+
var data = _this_1.props.data;
|
|
223
|
+
var lineChartData = data.lineChartData;
|
|
224
|
+
// This will get the value of the X when mouse is on the chart
|
|
225
|
+
var xOffset = _this_1._xAxisScale.invert(mouseEvent.pageX - 15); //Todo - fix this
|
|
226
|
+
var i = bisect(lineChartData[linenumber].data, xOffset);
|
|
227
|
+
var d0 = lineChartData[linenumber].data[i - 1];
|
|
228
|
+
var d1 = lineChartData[linenumber].data[i];
|
|
229
|
+
var axisType = null;
|
|
230
|
+
var xPointToHighlight = null;
|
|
231
|
+
var index = null;
|
|
232
|
+
if (d0 === undefined && d1 !== undefined) {
|
|
233
|
+
xPointToHighlight = d1.x;
|
|
234
|
+
index = i;
|
|
235
|
+
}
|
|
236
|
+
else if (d0 !== undefined && d1 === undefined) {
|
|
237
|
+
xPointToHighlight = d0.x;
|
|
238
|
+
index = i - 1;
|
|
239
|
+
}
|
|
240
|
+
else {
|
|
241
|
+
axisType = index_3.getTypeOfAxis(lineChartData[linenumber].data[0].x, true);
|
|
242
|
+
var x0 = void 0;
|
|
243
|
+
var point0 = void 0;
|
|
244
|
+
var point1 = void 0;
|
|
245
|
+
switch (axisType) {
|
|
246
|
+
case index_3.XAxisTypes.DateAxis:
|
|
247
|
+
x0 = new Date(xOffset).getTime();
|
|
248
|
+
point0 = d0.x.getTime();
|
|
249
|
+
point1 = d1.x.getTime();
|
|
250
|
+
xPointToHighlight = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? d1.x : d0.x;
|
|
251
|
+
index = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? i : i - 1;
|
|
252
|
+
break;
|
|
253
|
+
case index_3.XAxisTypes.NumericAxis:
|
|
254
|
+
x0 = xOffset;
|
|
255
|
+
point0 = d0.x;
|
|
256
|
+
point1 = d1.x;
|
|
257
|
+
xPointToHighlight = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? d1.x : d0.x;
|
|
258
|
+
index = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? i : i - 1;
|
|
259
|
+
break;
|
|
260
|
+
default:
|
|
261
|
+
break;
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
var _a = lineChartData[linenumber].data[index], xAxisCalloutData = _a.xAxisCalloutData, xAxisCalloutAccessibilityData = _a.xAxisCalloutAccessibilityData;
|
|
265
|
+
var formattedDate = xPointToHighlight instanceof Date ? xPointToHighlight.toLocaleString() : xPointToHighlight;
|
|
266
|
+
var modifiedXVal = xPointToHighlight instanceof Date ? xPointToHighlight.getTime() : xPointToHighlight;
|
|
267
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
268
|
+
var found = Utilities_1.find(_this_1._calloutPoints, function (element) {
|
|
269
|
+
return element.x === modifiedXVal;
|
|
270
|
+
});
|
|
271
|
+
var pointToHighlight = lineChartData[linenumber].data[index];
|
|
272
|
+
var pointToHighlightUpdated = _this_1.state.nearestCircleToHighlight === null ||
|
|
273
|
+
(_this_1.state.nearestCircleToHighlight !== null &&
|
|
274
|
+
pointToHighlight !== null &&
|
|
275
|
+
(_this_1.state.nearestCircleToHighlight.x !== pointToHighlight.x ||
|
|
276
|
+
_this_1.state.nearestCircleToHighlight.y !== pointToHighlight.y));
|
|
277
|
+
// if no points need to be called out then don't show vertical line and callout card
|
|
278
|
+
if (found && pointToHighlightUpdated) {
|
|
279
|
+
_this_1._uniqueCallOutID = "#staticHighlightCircle_" + linenumber;
|
|
280
|
+
d3_selection_1.select("#staticHighlightCircle_" + linenumber)
|
|
281
|
+
.attr('cx', "" + _this_1._xAxisScale(pointToHighlight.x))
|
|
282
|
+
.attr('cy', "" + _this_1._yAxisScale(pointToHighlight.y))
|
|
283
|
+
.attr('visibility', 'visibility');
|
|
284
|
+
d3_selection_1.select("#" + _this_1._verticalLine)
|
|
285
|
+
.attr('transform', function () { return "translate(" + _this_1._xAxisScale(pointToHighlight.x) + ", " + _this_1._yAxisScale(pointToHighlight.y) + ")"; })
|
|
286
|
+
.attr('visibility', 'visibility')
|
|
287
|
+
.attr('y2', "" + (lineHeight - _this_1._yAxisScale(pointToHighlight.y)));
|
|
288
|
+
_this_1.setState({
|
|
289
|
+
nearestCircleToHighlight: pointToHighlight,
|
|
290
|
+
isCalloutVisible: true,
|
|
291
|
+
refSelected: "#staticHighlightCircle_" + linenumber,
|
|
292
|
+
stackCalloutProps: found,
|
|
293
|
+
YValueHover: found.values,
|
|
294
|
+
dataPointCalloutProps: found,
|
|
295
|
+
hoverXValue: xAxisCalloutData ? xAxisCalloutData : formattedDate,
|
|
296
|
+
xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
|
|
297
|
+
activePoint: '',
|
|
298
|
+
activeLine: linenumber,
|
|
299
|
+
});
|
|
300
|
+
}
|
|
301
|
+
if (!found) {
|
|
302
|
+
_this_1.setState({
|
|
303
|
+
isCalloutVisible: false,
|
|
304
|
+
nearestCircleToHighlight: pointToHighlight,
|
|
305
|
+
activePoint: '',
|
|
306
|
+
activeLine: linenumber,
|
|
307
|
+
});
|
|
308
|
+
}
|
|
309
|
+
};
|
|
215
310
|
_this_1._handleFocus = function (lineId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData) {
|
|
216
311
|
_this_1._uniqueCallOutID = circleId;
|
|
217
312
|
var formattedData = x instanceof Date ? x.toLocaleDateString() : x;
|
|
@@ -268,12 +363,16 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
268
363
|
dataPointCalloutProps: found,
|
|
269
364
|
activePoint: circleId,
|
|
270
365
|
xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
|
|
366
|
+
nearestCircleToHighlight: null,
|
|
367
|
+
activeLine: null,
|
|
271
368
|
});
|
|
272
369
|
}
|
|
273
370
|
}
|
|
274
371
|
else {
|
|
275
372
|
_this_1.setState({
|
|
276
373
|
activePoint: circleId,
|
|
374
|
+
nearestCircleToHighlight: null,
|
|
375
|
+
activeLine: null,
|
|
277
376
|
});
|
|
278
377
|
}
|
|
279
378
|
};
|
|
@@ -295,6 +394,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
295
394
|
_this_1.setState({
|
|
296
395
|
isCalloutVisible: false,
|
|
297
396
|
activePoint: '',
|
|
397
|
+
activeLine: null,
|
|
298
398
|
});
|
|
299
399
|
};
|
|
300
400
|
_this_1._handleLegendClick = function (lineChartItem, selectedLegend) {
|
|
@@ -400,6 +500,8 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
400
500
|
selectedColorBarLegend: [],
|
|
401
501
|
isSelectedLegend: false,
|
|
402
502
|
activePoint: '',
|
|
503
|
+
nearestCircleToHighlight: null,
|
|
504
|
+
activeLine: null,
|
|
403
505
|
};
|
|
404
506
|
_this_1._refArray = [];
|
|
405
507
|
_this_1._points = _this_1._injectIndexPropertyInLineChartData(_this_1.props.data.lineChartData);
|
|
@@ -517,7 +619,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
517
619
|
};
|
|
518
620
|
LineChartBase.prototype._createLines = function (xElement, containerHeight) {
|
|
519
621
|
var _this_1 = this;
|
|
520
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
622
|
+
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;
|
|
521
623
|
var lines = [];
|
|
522
624
|
if (this.state.isSelectedLegend) {
|
|
523
625
|
this._points = this.state.selectedLegendPoints;
|
|
@@ -525,7 +627,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
525
627
|
else {
|
|
526
628
|
this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
|
|
527
629
|
}
|
|
528
|
-
for (var i =
|
|
630
|
+
for (var i = this._points.length - 1; i >= 0; i--) {
|
|
529
631
|
var linesForLine = [];
|
|
530
632
|
var bordersForLine = [];
|
|
531
633
|
var pointsForLine = [];
|
|
@@ -535,59 +637,98 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
535
637
|
var theme = this.props.theme;
|
|
536
638
|
var verticaLineHeight = containerHeight - this.margins.bottom + 6;
|
|
537
639
|
if (this._points[i].data.length === 1) {
|
|
538
|
-
var
|
|
640
|
+
var _0 = this._points[i].data[0], x1 = _0.x, y1 = _0.y, xAxisCalloutData = _0.xAxisCalloutData, xAxisCalloutAccessibilityData = _0.xAxisCalloutAccessibilityData;
|
|
539
641
|
var circleId = "" + this._circleId + i;
|
|
540
642
|
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 : '' }));
|
|
541
643
|
}
|
|
542
644
|
var gapIndex = 0;
|
|
543
645
|
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 : [];
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
var
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
var
|
|
553
|
-
var
|
|
554
|
-
var strokeWidth = ((_c =
|
|
555
|
-
var isLegendSelected =
|
|
556
|
-
var
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
565
|
-
}, 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 }));
|
|
566
|
-
/* eslint-enable react/jsx-no-bind */
|
|
646
|
+
// Use path rendering technique for larger datasets to optimize performance.
|
|
647
|
+
if (this._points[i].data.length >= 1000 || this.props.optimizeLargeData) {
|
|
648
|
+
var line = d3_shape_1.line()
|
|
649
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
650
|
+
.x(function (d) { return _this_1._xAxisScale(d[0]); })
|
|
651
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
652
|
+
.y(function (d) { return _this_1._yAxisScale(d[1]); })
|
|
653
|
+
.curve(d3_shape_1.curveLinear);
|
|
654
|
+
var lineId = "" + this._lineId + i;
|
|
655
|
+
var borderId = "" + this._borderId + i;
|
|
656
|
+
var strokeWidth = ((_c = this._points[i].lineOptions) === null || _c === void 0 ? void 0 : _c.strokeWidth) || this.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
657
|
+
var isLegendSelected = this.state.activeLegend === legendVal || this.state.activeLegend === '' || this.state.isSelectedLegend;
|
|
658
|
+
var lineData = [];
|
|
659
|
+
for (var k = 0; k < this._points[i].data.length; k++) {
|
|
660
|
+
lineData.push([
|
|
661
|
+
this._points[i].data[k].x instanceof Date
|
|
662
|
+
? this._points[i].data[k].x.getTime()
|
|
663
|
+
: this._points[i].data[k].x,
|
|
664
|
+
this._points[i].data[k].y,
|
|
665
|
+
]);
|
|
567
666
|
}
|
|
568
667
|
if (isLegendSelected) {
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
if (lineBorderWidth > 0) {
|
|
575
|
-
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 }));
|
|
576
|
-
}
|
|
577
|
-
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) {
|
|
578
|
-
_this_1._refCallback(e, lineId);
|
|
579
|
-
}, 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) }));
|
|
668
|
+
var lineBorderWidth = ((_d = this._points[i].lineOptions) === null || _d === void 0 ? void 0 : _d.lineBorderWidth)
|
|
669
|
+
? Number.parseFloat(this._points[i].lineOptions.lineBorderWidth.toString())
|
|
670
|
+
: 0;
|
|
671
|
+
if (lineBorderWidth > 0) {
|
|
672
|
+
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 }));
|
|
580
673
|
}
|
|
674
|
+
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 }));
|
|
581
675
|
}
|
|
582
676
|
else {
|
|
583
|
-
|
|
584
|
-
|
|
677
|
+
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 }));
|
|
678
|
+
}
|
|
679
|
+
var isPointHighlighted = this.state.activeLine !== null && this.state.activeLine === i;
|
|
680
|
+
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 }));
|
|
681
|
+
}
|
|
682
|
+
else {
|
|
683
|
+
var _loop_1 = function (j) {
|
|
684
|
+
var gapResult = this_1._checkInGap(j, gaps, gapIndex);
|
|
685
|
+
var isInGap = gapResult.isInGap;
|
|
686
|
+
gapIndex = gapResult.gapIndex;
|
|
687
|
+
var lineId = "" + this_1._lineId + i + j;
|
|
688
|
+
var borderId = "" + this_1._borderId + i + j;
|
|
689
|
+
var circleId = "" + this_1._circleId + i + j;
|
|
690
|
+
var _1 = this_1._points[i].data[j - 1], x1 = _1.x, y1 = _1.y, xAxisCalloutData = _1.xAxisCalloutData, xAxisCalloutAccessibilityData = _1.xAxisCalloutAccessibilityData;
|
|
691
|
+
var _2 = this_1._points[i].data[j], x2 = _2.x, y2 = _2.y;
|
|
692
|
+
var path = this_1._getPath(this_1._xAxisScale(x1), this_1._yAxisScale(y1), circleId, j, false, this_1._points[i].index);
|
|
693
|
+
var strokeWidth = ((_m = this_1._points[i].lineOptions) === null || _m === void 0 ? void 0 : _m.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
694
|
+
var isLegendSelected = this_1.state.activeLegend === legendVal || this_1.state.activeLegend === '' || this_1.state.isSelectedLegend;
|
|
695
|
+
var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
|
|
696
|
+
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 }));
|
|
697
|
+
if (j + 1 === this_1._points[i].data.length) {
|
|
698
|
+
// If this is last point of the line segment.
|
|
699
|
+
var lastCircleId_1 = "" + circleId + j + "L";
|
|
700
|
+
var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
|
|
701
|
+
path = this_1._getPath(this_1._xAxisScale(x2), this_1._yAxisScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
|
|
702
|
+
var _3 = this_1._points[i].data[j], lastCirlceXCallout_1 = _3.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _3.xAxisCalloutAccessibilityData;
|
|
703
|
+
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 () {
|
|
704
|
+
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
705
|
+
}, 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 }));
|
|
706
|
+
/* eslint-enable react/jsx-no-bind */
|
|
585
707
|
}
|
|
708
|
+
if (isLegendSelected) {
|
|
709
|
+
// don't draw line if it is in a gap
|
|
710
|
+
if (!isInGap) {
|
|
711
|
+
var lineBorderWidth = ((_o = this_1._points[i].lineOptions) === null || _o === void 0 ? void 0 : _o.lineBorderWidth)
|
|
712
|
+
? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
|
|
713
|
+
: 0;
|
|
714
|
+
if (lineBorderWidth > 0) {
|
|
715
|
+
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 }));
|
|
716
|
+
}
|
|
717
|
+
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) {
|
|
718
|
+
_this_1._refCallback(e, lineId);
|
|
719
|
+
}, 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) }));
|
|
720
|
+
}
|
|
721
|
+
}
|
|
722
|
+
else {
|
|
723
|
+
if (!isInGap) {
|
|
724
|
+
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 }));
|
|
725
|
+
}
|
|
726
|
+
}
|
|
727
|
+
};
|
|
728
|
+
var this_1 = this;
|
|
729
|
+
for (var j = 1; j < this._points[i].data.length; j++) {
|
|
730
|
+
_loop_1(j);
|
|
586
731
|
}
|
|
587
|
-
};
|
|
588
|
-
var this_1 = this;
|
|
589
|
-
for (var j = 1; j < this._points[i].data.length; j++) {
|
|
590
|
-
_loop_1(j);
|
|
591
732
|
}
|
|
592
733
|
lines.push.apply(lines, tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([], bordersForLine), linesForLine), pointsForLine));
|
|
593
734
|
}
|