@fluentui/react-charting 5.18.17 → 5.18.18
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 +22 -1
- package/CHANGELOG.md +12 -2
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/lib/components/Sparkline/Sparkline.base.d.ts +1 -0
- package/lib/components/Sparkline/Sparkline.base.js +3 -2
- package/lib/components/Sparkline/Sparkline.base.js.map +1 -1
- package/lib/version.js +1 -1
- package/lib/version.js.map +1 -1
- package/lib-amd/components/Sparkline/Sparkline.base.d.ts +1 -0
- package/lib-amd/components/Sparkline/Sparkline.base.js +2 -1
- package/lib-amd/components/Sparkline/Sparkline.base.js.map +1 -1
- package/lib-amd/version.js +1 -1
- package/lib-amd/version.js.map +1 -1
- package/lib-commonjs/components/Sparkline/Sparkline.base.d.ts +1 -0
- package/lib-commonjs/components/Sparkline/Sparkline.base.js +2 -1
- package/lib-commonjs/components/Sparkline/Sparkline.base.js.map +1 -1
- package/lib-commonjs/version.js +1 -1
- package/lib-commonjs/version.js.map +1 -1
- package/package.json +5 -5
|
@@ -14,6 +14,7 @@ export declare class SparklineBase extends React.Component<ISparklineProps, ISpa
|
|
|
14
14
|
private area;
|
|
15
15
|
private line;
|
|
16
16
|
private _emptyChartId;
|
|
17
|
+
private _isRTL;
|
|
17
18
|
constructor(props: ISparklineProps);
|
|
18
19
|
componentDidMount(): void;
|
|
19
20
|
drawSparkline(): JSX.Element;
|
|
@@ -4,7 +4,7 @@ import { scaleLinear as d3ScaleLinear } from 'd3-scale';
|
|
|
4
4
|
import { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';
|
|
5
5
|
import { max as d3Max, extent as d3Extent } from 'd3-array';
|
|
6
6
|
import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
|
|
7
|
-
import { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';
|
|
7
|
+
import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
|
|
8
8
|
var getClassNames = classNamesFunction();
|
|
9
9
|
var SparklineBase = /** @class */ (function (_super) {
|
|
10
10
|
__extends(SparklineBase, _super);
|
|
@@ -16,6 +16,7 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
16
16
|
bottom: 0,
|
|
17
17
|
left: 0,
|
|
18
18
|
};
|
|
19
|
+
_this._isRTL = getRTL();
|
|
19
20
|
_this.state = {
|
|
20
21
|
_points: null,
|
|
21
22
|
_width: _this.props.width || 80,
|
|
@@ -71,7 +72,7 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
71
72
|
React.createElement("div", { className: classNames.inlineBlock },
|
|
72
73
|
this.state._width >= 50 && this.state._height >= 16 ? (React.createElement("svg", { width: this.state._width, height: this.state._height, "data-is-focusable": true }, this.state._points ? this.drawSparkline() : null)) : (React.createElement(React.Fragment, null)),
|
|
73
74
|
this.props.showLegend && this.props.data.lineChartData[0].legend ? (React.createElement("svg", { width: this.state._valueTextWidth, height: this.state._height, "data-is-focusable": true },
|
|
74
|
-
React.createElement("text", { x: "0%", dx: 8, y: "100%", dy: -5, className: classNames.valueText }, this.props.data.lineChartData[0].legend))) : (React.createElement(React.Fragment, null))))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
|
|
75
|
+
React.createElement("text", { x: "0%", textAnchor: this._isRTL ? 'end' : 'start', dx: 8, y: "100%", dy: -5, className: classNames.valueText }, this.props.data.lineChartData[0].legend))) : (React.createElement(React.Fragment, null))))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
|
|
75
76
|
};
|
|
76
77
|
SparklineBase.prototype._isChartEmpty = function () {
|
|
77
78
|
return !(this.props.data &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.base.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ILineChartDataPoint } from '../../types/IDataPoint';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from '../../index';\n\nconst getClassNames = classNamesFunction<ISparklineStyleProps, ISparklineStyles>();\n\nexport interface ISparklineState {\n _points: ILineChartDataPoint[] | null;\n _width: number;\n _height: number;\n _valueTextWidth: number;\n}\n\nexport class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {\n private margin = {\n top: 2,\n right: 0,\n bottom: 0,\n left: 0,\n };\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n private x: any;\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n private y: any;\n private area: any;\n private line: any;\n private _emptyChartId: string;\n\n constructor(props: ISparklineProps) {\n super(props);\n this.state = {\n _points: null,\n _width: this.props.width! || 80,\n _height: this.props.height! || 20,\n _valueTextWidth: this.props.valueTextWidth! || 80,\n };\n this._emptyChartId = getId('_SparklineChart_empty');\n }\n\n public componentDidMount() {\n if (!this._isChartEmpty()) {\n const area = d3Area()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .x((d: any) => this.x(d.x))\n .y0(this.state._height)\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .y1((d: any) => this.y(d.y))\n .curve(d3curveLinear);\n this.area = area;\n\n const line = d3Line()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .x((d: any) => this.x(d.x))\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .y((d: any) => this.y(d.y))\n .curve(d3curveLinear);\n this.line = line;\n\n const points = this.props.data!.lineChartData![0].data;\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n const [xMin, xMax] = d3Extent(points, (d: any) => d.x);\n\n this.x = d3ScaleLinear()\n .domain([xMin, xMax])\n .range([this.margin.left!, this.state._width - this.margin.right!]);\n this.y = d3ScaleLinear()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .domain([0, d3Max(points, (d: any) => d.y)])\n .range([this.state._height - this.margin.bottom!, this.margin.top!]);\n\n this.setState({\n _points: points,\n });\n }\n }\n\n public drawSparkline() {\n return (\n <>\n <path\n className=\"line\"\n d={this.line(this.state._points)}\n fill={'transparent'}\n opacity={1}\n strokeWidth={2}\n stroke={this.props.data!.lineChartData![0].color!}\n />\n <path\n className=\"area\"\n d={this.area(this.state._points)}\n opacity={1}\n fillOpacity={0.2}\n fill={this.props.data!.lineChartData![0].color!}\n aria-label={`Sparkline with label ${this.props.data!.lineChartData![0].legend!}`}\n />\n </>\n );\n }\n\n public render() {\n const classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n });\n return !this._isChartEmpty() ? (\n <FocusZone\n direction={FocusZoneDirection.horizontal}\n isCircularNavigation={true}\n className={classNames.inlineBlock}\n >\n <div className={classNames.inlineBlock}>\n {this.state._width >= 50 && this.state._height >= 16 ? (\n <svg width={this.state._width} height={this.state._height} data-is-focusable={true}>\n {this.state._points ? this.drawSparkline() : null}\n </svg>\n ) : (\n <></>\n )}\n {this.props.showLegend && this.props.data!.lineChartData![0].legend ? (\n <svg width={this.state._valueTextWidth} height={this.state._height} data-is-focusable={true}>\n <text x=\"0%\" dx={8} y=\"100%\" dy={-5} className={classNames.valueText}>\n {this.props.data!.lineChartData![0].legend!}\n </text>\n </svg>\n ) : (\n <></>\n )}\n </div>\n </FocusZone>\n ) : (\n <div\n id={this._emptyChartId}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n private _isChartEmpty(): boolean {\n return !(\n this.props.data &&\n this.props.data.lineChartData &&\n this.props.data.lineChartData.length > 0 &&\n this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Sparkline.base.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ILineChartDataPoint } from '../../types/IDataPoint';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from '../../index';\n\nconst getClassNames = classNamesFunction<ISparklineStyleProps, ISparklineStyles>();\n\nexport interface ISparklineState {\n _points: ILineChartDataPoint[] | null;\n _width: number;\n _height: number;\n _valueTextWidth: number;\n}\n\nexport class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {\n private margin = {\n top: 2,\n right: 0,\n bottom: 0,\n left: 0,\n };\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n private x: any;\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n private y: any;\n private area: any;\n private line: any;\n private _emptyChartId: string;\n private _isRTL: boolean = getRTL();\n\n constructor(props: ISparklineProps) {\n super(props);\n this.state = {\n _points: null,\n _width: this.props.width! || 80,\n _height: this.props.height! || 20,\n _valueTextWidth: this.props.valueTextWidth! || 80,\n };\n this._emptyChartId = getId('_SparklineChart_empty');\n }\n\n public componentDidMount() {\n if (!this._isChartEmpty()) {\n const area = d3Area()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .x((d: any) => this.x(d.x))\n .y0(this.state._height)\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .y1((d: any) => this.y(d.y))\n .curve(d3curveLinear);\n this.area = area;\n\n const line = d3Line()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .x((d: any) => this.x(d.x))\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .y((d: any) => this.y(d.y))\n .curve(d3curveLinear);\n this.line = line;\n\n const points = this.props.data!.lineChartData![0].data;\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n const [xMin, xMax] = d3Extent(points, (d: any) => d.x);\n\n this.x = d3ScaleLinear()\n .domain([xMin, xMax])\n .range([this.margin.left!, this.state._width - this.margin.right!]);\n this.y = d3ScaleLinear()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .domain([0, d3Max(points, (d: any) => d.y)])\n .range([this.state._height - this.margin.bottom!, this.margin.top!]);\n\n this.setState({\n _points: points,\n });\n }\n }\n\n public drawSparkline() {\n return (\n <>\n <path\n className=\"line\"\n d={this.line(this.state._points)}\n fill={'transparent'}\n opacity={1}\n strokeWidth={2}\n stroke={this.props.data!.lineChartData![0].color!}\n />\n <path\n className=\"area\"\n d={this.area(this.state._points)}\n opacity={1}\n fillOpacity={0.2}\n fill={this.props.data!.lineChartData![0].color!}\n aria-label={`Sparkline with label ${this.props.data!.lineChartData![0].legend!}`}\n />\n </>\n );\n }\n\n public render() {\n const classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n });\n return !this._isChartEmpty() ? (\n <FocusZone\n direction={FocusZoneDirection.horizontal}\n isCircularNavigation={true}\n className={classNames.inlineBlock}\n >\n <div className={classNames.inlineBlock}>\n {this.state._width >= 50 && this.state._height >= 16 ? (\n <svg width={this.state._width} height={this.state._height} data-is-focusable={true}>\n {this.state._points ? this.drawSparkline() : null}\n </svg>\n ) : (\n <></>\n )}\n {this.props.showLegend && this.props.data!.lineChartData![0].legend ? (\n <svg width={this.state._valueTextWidth} height={this.state._height} data-is-focusable={true}>\n <text\n x=\"0%\"\n textAnchor={this._isRTL ? 'end' : 'start'}\n dx={8}\n y=\"100%\"\n dy={-5}\n className={classNames.valueText}\n >\n {this.props.data!.lineChartData![0].legend!}\n </text>\n </svg>\n ) : (\n <></>\n )}\n </div>\n </FocusZone>\n ) : (\n <div\n id={this._emptyChartId}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n private _isChartEmpty(): boolean {\n return !(\n this.props.data &&\n this.props.data.lineChartData &&\n this.props.data.lineChartData.length > 0 &&\n this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0\n );\n }\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.18.
|
|
4
|
+
setVersion('@fluentui/react-charting', '5.18.18');
|
|
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,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.18.
|
|
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.18.18');"]}
|
|
@@ -14,6 +14,7 @@ export declare class SparklineBase extends React.Component<ISparklineProps, ISpa
|
|
|
14
14
|
private area;
|
|
15
15
|
private line;
|
|
16
16
|
private _emptyChartId;
|
|
17
|
+
private _isRTL;
|
|
17
18
|
constructor(props: ISparklineProps);
|
|
18
19
|
componentDidMount(): void;
|
|
19
20
|
drawSparkline(): JSX.Element;
|
|
@@ -13,6 +13,7 @@ define(["require", "exports", "tslib", "react", "d3-scale", "d3-shape", "d3-arra
|
|
|
13
13
|
bottom: 0,
|
|
14
14
|
left: 0,
|
|
15
15
|
};
|
|
16
|
+
_this._isRTL = (0, Utilities_1.getRTL)();
|
|
16
17
|
_this.state = {
|
|
17
18
|
_points: null,
|
|
18
19
|
_width: _this.props.width || 80,
|
|
@@ -68,7 +69,7 @@ define(["require", "exports", "tslib", "react", "d3-scale", "d3-shape", "d3-arra
|
|
|
68
69
|
React.createElement("div", { className: classNames.inlineBlock },
|
|
69
70
|
this.state._width >= 50 && this.state._height >= 16 ? (React.createElement("svg", { width: this.state._width, height: this.state._height, "data-is-focusable": true }, this.state._points ? this.drawSparkline() : null)) : (React.createElement(React.Fragment, null)),
|
|
70
71
|
this.props.showLegend && this.props.data.lineChartData[0].legend ? (React.createElement("svg", { width: this.state._valueTextWidth, height: this.state._height, "data-is-focusable": true },
|
|
71
|
-
React.createElement("text", { x: "0%", dx: 8, y: "100%", dy: -5, className: classNames.valueText }, this.props.data.lineChartData[0].legend))) : (React.createElement(React.Fragment, null))))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
|
|
72
|
+
React.createElement("text", { x: "0%", textAnchor: this._isRTL ? 'end' : 'start', dx: 8, y: "100%", dy: -5, className: classNames.valueText }, this.props.data.lineChartData[0].legend))) : (React.createElement(React.Fragment, null))))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
|
|
72
73
|
};
|
|
73
74
|
SparklineBase.prototype._isChartEmpty = function () {
|
|
74
75
|
return !(this.props.data &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.base.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.base.tsx"],"names":[],"mappings":";;;;IASA,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAA0C,CAAC;IASnF;QAAmC,yCAAiD;
|
|
1
|
+
{"version":3,"file":"Sparkline.base.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ILineChartDataPoint } from '../../types/IDataPoint';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from '../../index';\n\nconst getClassNames = classNamesFunction<ISparklineStyleProps, ISparklineStyles>();\n\nexport interface ISparklineState {\n _points: ILineChartDataPoint[] | null;\n _width: number;\n _height: number;\n _valueTextWidth: number;\n}\n\nexport class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {\n private margin = {\n top: 2,\n right: 0,\n bottom: 0,\n left: 0,\n };\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n private x: any;\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n private y: any;\n private area: any;\n private line: any;\n private _emptyChartId: string;\n private _isRTL: boolean = getRTL();\n\n constructor(props: ISparklineProps) {\n super(props);\n this.state = {\n _points: null,\n _width: this.props.width! || 80,\n _height: this.props.height! || 20,\n _valueTextWidth: this.props.valueTextWidth! || 80,\n };\n this._emptyChartId = getId('_SparklineChart_empty');\n }\n\n public componentDidMount() {\n if (!this._isChartEmpty()) {\n const area = d3Area()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .x((d: any) => this.x(d.x))\n .y0(this.state._height)\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .y1((d: any) => this.y(d.y))\n .curve(d3curveLinear);\n this.area = area;\n\n const line = d3Line()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .x((d: any) => this.x(d.x))\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .y((d: any) => this.y(d.y))\n .curve(d3curveLinear);\n this.line = line;\n\n const points = this.props.data!.lineChartData![0].data;\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n const [xMin, xMax] = d3Extent(points, (d: any) => d.x);\n\n this.x = d3ScaleLinear()\n .domain([xMin, xMax])\n .range([this.margin.left!, this.state._width - this.margin.right!]);\n this.y = d3ScaleLinear()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .domain([0, d3Max(points, (d: any) => d.y)])\n .range([this.state._height - this.margin.bottom!, this.margin.top!]);\n\n this.setState({\n _points: points,\n });\n }\n }\n\n public drawSparkline() {\n return (\n <>\n <path\n className=\"line\"\n d={this.line(this.state._points)}\n fill={'transparent'}\n opacity={1}\n strokeWidth={2}\n stroke={this.props.data!.lineChartData![0].color!}\n />\n <path\n className=\"area\"\n d={this.area(this.state._points)}\n opacity={1}\n fillOpacity={0.2}\n fill={this.props.data!.lineChartData![0].color!}\n aria-label={`Sparkline with label ${this.props.data!.lineChartData![0].legend!}`}\n />\n </>\n );\n }\n\n public render() {\n const classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n });\n return !this._isChartEmpty() ? (\n <FocusZone\n direction={FocusZoneDirection.horizontal}\n isCircularNavigation={true}\n className={classNames.inlineBlock}\n >\n <div className={classNames.inlineBlock}>\n {this.state._width >= 50 && this.state._height >= 16 ? (\n <svg width={this.state._width} height={this.state._height} data-is-focusable={true}>\n {this.state._points ? this.drawSparkline() : null}\n </svg>\n ) : (\n <></>\n )}\n {this.props.showLegend && this.props.data!.lineChartData![0].legend ? (\n <svg width={this.state._valueTextWidth} height={this.state._height} data-is-focusable={true}>\n <text\n x=\"0%\"\n textAnchor={this._isRTL ? 'end' : 'start'}\n dx={8}\n y=\"100%\"\n dy={-5}\n className={classNames.valueText}\n >\n {this.props.data!.lineChartData![0].legend!}\n </text>\n </svg>\n ) : (\n <></>\n )}\n </div>\n </FocusZone>\n ) : (\n <div\n id={this._emptyChartId}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n private _isChartEmpty(): boolean {\n return !(\n this.props.data &&\n this.props.data.lineChartData &&\n this.props.data.lineChartData.length > 0 &&\n this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0\n );\n }\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
|
-
(0, set_version_1.setVersion)('@fluentui/react-charting', '5.18.
|
|
4
|
+
(0, set_version_1.setVersion)('@fluentui/react-charting', '5.18.18');
|
|
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,IAAA,wBAAU,EAAC,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.18.
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,IAAA,wBAAU,EAAC,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.18.18');"]}
|
|
@@ -14,6 +14,7 @@ export declare class SparklineBase extends React.Component<ISparklineProps, ISpa
|
|
|
14
14
|
private area;
|
|
15
15
|
private line;
|
|
16
16
|
private _emptyChartId;
|
|
17
|
+
private _isRTL;
|
|
17
18
|
constructor(props: ISparklineProps);
|
|
18
19
|
componentDidMount(): void;
|
|
19
20
|
drawSparkline(): JSX.Element;
|
|
@@ -19,6 +19,7 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
19
19
|
bottom: 0,
|
|
20
20
|
left: 0,
|
|
21
21
|
};
|
|
22
|
+
_this._isRTL = (0, Utilities_1.getRTL)();
|
|
22
23
|
_this.state = {
|
|
23
24
|
_points: null,
|
|
24
25
|
_width: _this.props.width || 80,
|
|
@@ -74,7 +75,7 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
74
75
|
React.createElement("div", { className: classNames.inlineBlock },
|
|
75
76
|
this.state._width >= 50 && this.state._height >= 16 ? (React.createElement("svg", { width: this.state._width, height: this.state._height, "data-is-focusable": true }, this.state._points ? this.drawSparkline() : null)) : (React.createElement(React.Fragment, null)),
|
|
76
77
|
this.props.showLegend && this.props.data.lineChartData[0].legend ? (React.createElement("svg", { width: this.state._valueTextWidth, height: this.state._height, "data-is-focusable": true },
|
|
77
|
-
React.createElement("text", { x: "0%", dx: 8, y: "100%", dy: -5, className: classNames.valueText }, this.props.data.lineChartData[0].legend))) : (React.createElement(React.Fragment, null))))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
|
|
78
|
+
React.createElement("text", { x: "0%", textAnchor: this._isRTL ? 'end' : 'start', dx: 8, y: "100%", dy: -5, className: classNames.valueText }, this.props.data.lineChartData[0].legend))) : (React.createElement(React.Fragment, null))))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
|
|
78
79
|
};
|
|
79
80
|
SparklineBase.prototype._isChartEmpty = function () {
|
|
80
81
|
return !(this.props.data &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.base.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.base.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,qCAAwD;AACxD,qCAAwF;AACxF,qCAA4D;AAC5D,qDAAsE;AAEtE,
|
|
1
|
+
{"version":3,"file":"Sparkline.base.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ILineChartDataPoint } from '../../types/IDataPoint';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from '../../index';\n\nconst getClassNames = classNamesFunction<ISparklineStyleProps, ISparklineStyles>();\n\nexport interface ISparklineState {\n _points: ILineChartDataPoint[] | null;\n _width: number;\n _height: number;\n _valueTextWidth: number;\n}\n\nexport class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {\n private margin = {\n top: 2,\n right: 0,\n bottom: 0,\n left: 0,\n };\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n private x: any;\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n private y: any;\n private area: any;\n private line: any;\n private _emptyChartId: string;\n private _isRTL: boolean = getRTL();\n\n constructor(props: ISparklineProps) {\n super(props);\n this.state = {\n _points: null,\n _width: this.props.width! || 80,\n _height: this.props.height! || 20,\n _valueTextWidth: this.props.valueTextWidth! || 80,\n };\n this._emptyChartId = getId('_SparklineChart_empty');\n }\n\n public componentDidMount() {\n if (!this._isChartEmpty()) {\n const area = d3Area()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .x((d: any) => this.x(d.x))\n .y0(this.state._height)\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .y1((d: any) => this.y(d.y))\n .curve(d3curveLinear);\n this.area = area;\n\n const line = d3Line()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .x((d: any) => this.x(d.x))\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .y((d: any) => this.y(d.y))\n .curve(d3curveLinear);\n this.line = line;\n\n const points = this.props.data!.lineChartData![0].data;\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n const [xMin, xMax] = d3Extent(points, (d: any) => d.x);\n\n this.x = d3ScaleLinear()\n .domain([xMin, xMax])\n .range([this.margin.left!, this.state._width - this.margin.right!]);\n this.y = d3ScaleLinear()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .domain([0, d3Max(points, (d: any) => d.y)])\n .range([this.state._height - this.margin.bottom!, this.margin.top!]);\n\n this.setState({\n _points: points,\n });\n }\n }\n\n public drawSparkline() {\n return (\n <>\n <path\n className=\"line\"\n d={this.line(this.state._points)}\n fill={'transparent'}\n opacity={1}\n strokeWidth={2}\n stroke={this.props.data!.lineChartData![0].color!}\n />\n <path\n className=\"area\"\n d={this.area(this.state._points)}\n opacity={1}\n fillOpacity={0.2}\n fill={this.props.data!.lineChartData![0].color!}\n aria-label={`Sparkline with label ${this.props.data!.lineChartData![0].legend!}`}\n />\n </>\n );\n }\n\n public render() {\n const classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n });\n return !this._isChartEmpty() ? (\n <FocusZone\n direction={FocusZoneDirection.horizontal}\n isCircularNavigation={true}\n className={classNames.inlineBlock}\n >\n <div className={classNames.inlineBlock}>\n {this.state._width >= 50 && this.state._height >= 16 ? (\n <svg width={this.state._width} height={this.state._height} data-is-focusable={true}>\n {this.state._points ? this.drawSparkline() : null}\n </svg>\n ) : (\n <></>\n )}\n {this.props.showLegend && this.props.data!.lineChartData![0].legend ? (\n <svg width={this.state._valueTextWidth} height={this.state._height} data-is-focusable={true}>\n <text\n x=\"0%\"\n textAnchor={this._isRTL ? 'end' : 'start'}\n dx={8}\n y=\"100%\"\n dy={-5}\n className={classNames.valueText}\n >\n {this.props.data!.lineChartData![0].legend!}\n </text>\n </svg>\n ) : (\n <></>\n )}\n </div>\n </FocusZone>\n ) : (\n <div\n id={this._emptyChartId}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n private _isChartEmpty(): boolean {\n return !(\n this.props.data &&\n this.props.data.lineChartData &&\n this.props.data.lineChartData.length > 0 &&\n this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0\n );\n }\n}\n"]}
|
package/lib-commonjs/version.js
CHANGED
|
@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
// Do not modify this file; it is generated as part of publish.
|
|
4
4
|
// The checked in version is a placeholder only and will not be updated.
|
|
5
5
|
var set_version_1 = require("@fluentui/set-version");
|
|
6
|
-
(0, set_version_1.setVersion)('@fluentui/react-charting', '5.18.
|
|
6
|
+
(0, set_version_1.setVersion)('@fluentui/react-charting', '5.18.18');
|
|
7
7
|
//# sourceMappingURL=version.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,IAAA,wBAAU,EAAC,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.18.
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,IAAA,wBAAU,EAAC,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.18.18');"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-charting",
|
|
3
|
-
"version": "5.18.
|
|
3
|
+
"version": "5.18.18",
|
|
4
4
|
"description": "Experimental React charting components for building experiences for Microsoft 365.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@fluentui/react-focus": "^8.8.34",
|
|
42
42
|
"@fluentui/theme-samples": "^8.7.122",
|
|
43
43
|
"@microsoft/load-themed-styles": "^1.10.26",
|
|
44
|
-
"@types/d3-array": "
|
|
44
|
+
"@types/d3-array": "2.12.1",
|
|
45
45
|
"@types/d3-axis": "1.0.10",
|
|
46
46
|
"@types/d3-format": "^1.3.1",
|
|
47
47
|
"@types/d3-hierarchy": "2.0.0",
|
|
@@ -50,9 +50,9 @@
|
|
|
50
50
|
"@types/d3-selection": "1.4.1",
|
|
51
51
|
"@types/d3-shape": "3.1.1",
|
|
52
52
|
"@types/d3-time-format": "^2.1.0",
|
|
53
|
-
"@types/d3-time": "^1.1
|
|
53
|
+
"@types/d3-time": "^2.1.1",
|
|
54
54
|
"@fluentui/set-version": "^8.2.12",
|
|
55
|
-
"d3-array": "
|
|
55
|
+
"d3-array": "2.12.1",
|
|
56
56
|
"d3-axis": "1.0.8",
|
|
57
57
|
"d3-format": "^1.4.4",
|
|
58
58
|
"d3-hierarchy": "2.0.0",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"d3-selection": "1.3.0",
|
|
62
62
|
"d3-shape": "3.2.0",
|
|
63
63
|
"d3-time-format": "^2.1.3",
|
|
64
|
-
"d3-time": "^1.1
|
|
64
|
+
"d3-time": "^2.1.1",
|
|
65
65
|
"tslib": "^2.1.0"
|
|
66
66
|
},
|
|
67
67
|
"peerDependencies": {
|