@fluentui/react-charting 5.12.3 → 5.12.6
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 +53 -2
- package/CHANGELOG.md +31 -3
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/lib/components/Sparkline/Sparkline.base.d.ts +2 -0
- package/lib/components/Sparkline/Sparkline.base.js +17 -6
- package/lib/components/Sparkline/Sparkline.base.js.map +1 -1
- package/lib/components/Sparkline/Sparkline.styles.js +1 -1
- package/lib/components/Sparkline/Sparkline.styles.js.map +1 -1
- package/lib/components/Sparkline/Sparkline.types.d.ts +6 -1
- package/lib/components/Sparkline/Sparkline.types.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 +2 -0
- package/lib-amd/components/Sparkline/Sparkline.base.js +16 -5
- package/lib-amd/components/Sparkline/Sparkline.base.js.map +1 -1
- package/lib-amd/components/Sparkline/Sparkline.styles.js +1 -1
- package/lib-amd/components/Sparkline/Sparkline.styles.js.map +1 -1
- package/lib-amd/components/Sparkline/Sparkline.types.d.ts +6 -1
- package/lib-amd/components/Sparkline/Sparkline.types.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 +2 -0
- package/lib-commonjs/components/Sparkline/Sparkline.base.js +16 -5
- package/lib-commonjs/components/Sparkline/Sparkline.base.js.map +1 -1
- package/lib-commonjs/components/Sparkline/Sparkline.styles.js +1 -1
- package/lib-commonjs/components/Sparkline/Sparkline.styles.js.map +1 -1
- package/lib-commonjs/components/Sparkline/Sparkline.types.d.ts +6 -1
- package/lib-commonjs/components/Sparkline/Sparkline.types.js.map +1 -1
- package/lib-commonjs/version.js +1 -1
- package/lib-commonjs/version.js.map +1 -1
- package/package.json +3 -3
- package/src/components/Sparkline/Sparkline.types.ts +7 -1
|
@@ -5,12 +5,14 @@ export interface ISparklineState {
|
|
|
5
5
|
_points: ILineChartDataPoint[] | null;
|
|
6
6
|
_width: number;
|
|
7
7
|
_height: number;
|
|
8
|
+
_valueTextWidth: number;
|
|
8
9
|
}
|
|
9
10
|
export declare class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {
|
|
10
11
|
private margin;
|
|
11
12
|
private x;
|
|
12
13
|
private y;
|
|
13
14
|
private area;
|
|
15
|
+
private line;
|
|
14
16
|
constructor(props: ISparklineProps);
|
|
15
17
|
componentDidMount(): void;
|
|
16
18
|
drawSparkline(): JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __extends } from "tslib";
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { scaleLinear as d3ScaleLinear } from 'd3-scale';
|
|
4
|
-
import { area as d3Area,
|
|
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
7
|
import { classNamesFunction } from '@fluentui/react/lib/Utilities';
|
|
@@ -19,7 +19,8 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
19
19
|
_this.state = {
|
|
20
20
|
_points: null,
|
|
21
21
|
_width: _this.props.width || 80,
|
|
22
|
-
_height: _this.props.height || 20
|
|
22
|
+
_height: _this.props.height || 20,
|
|
23
|
+
_valueTextWidth: _this.props.valueTextWidth || 80,
|
|
23
24
|
};
|
|
24
25
|
return _this;
|
|
25
26
|
}
|
|
@@ -31,8 +32,15 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
31
32
|
.y0(this.state._height)
|
|
32
33
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
33
34
|
.y1(function (d) { return _this.y(d.y); })
|
|
34
|
-
.curve(
|
|
35
|
+
.curve(d3curveLinear);
|
|
35
36
|
this.area = area;
|
|
37
|
+
var line = d3Line()
|
|
38
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
39
|
+
.x(function (d) { return _this.x(d.x); })
|
|
40
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
41
|
+
.y(function (d) { return _this.y(d.y); })
|
|
42
|
+
.curve(d3curveLinear);
|
|
43
|
+
this.line = line;
|
|
36
44
|
var points = this.props.data.lineChartData[0].data;
|
|
37
45
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
38
46
|
var _a = d3Extent(points, function (d) { return d.x; }), xMin = _a[0], xMax = _a[1];
|
|
@@ -48,7 +56,9 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
48
56
|
});
|
|
49
57
|
};
|
|
50
58
|
SparklineBase.prototype.drawSparkline = function () {
|
|
51
|
-
return (React.createElement(
|
|
59
|
+
return (React.createElement(React.Fragment, null,
|
|
60
|
+
React.createElement("path", { className: "line", d: this.line(this.state._points), fill: 'transparent', opacity: 1, strokeWidth: 2, stroke: this.props.data.lineChartData[0].color }),
|
|
61
|
+
React.createElement("path", { className: "area", d: this.area(this.state._points), opacity: 1, fillOpacity: 0.2, fill: this.props.data.lineChartData[0].color, "aria-label": "Sparkline with label " + this.props.data.lineChartData[0].legend })));
|
|
52
62
|
};
|
|
53
63
|
SparklineBase.prototype.render = function () {
|
|
54
64
|
var classNames = getClassNames(this.props.styles, {
|
|
@@ -56,8 +66,9 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
56
66
|
});
|
|
57
67
|
return (React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal, isCircularNavigation: true, className: classNames.inlineBlock },
|
|
58
68
|
React.createElement("div", { className: classNames.inlineBlock },
|
|
59
|
-
this.state._width >= 50 && this.state._height >= 16 ? (React.createElement("svg", { width: this.state._width, height: this.state._height,
|
|
60
|
-
this.props.showLegend && this.props.data.lineChartData[0].legend ? (React.createElement("
|
|
69
|
+
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
|
+
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)))));
|
|
61
72
|
};
|
|
62
73
|
return SparklineBase;
|
|
63
74
|
}(React.Component));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.base.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.base.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,
|
|
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 } from '@fluentui/react/lib/Utilities';\nimport { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from '../../index';\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\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 }\n\n public componentDidMount() {\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 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 (\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 }\n}\n"]}
|
|
@@ -4,7 +4,7 @@ export var getStyles = function (props) {
|
|
|
4
4
|
inlineBlock: {
|
|
5
5
|
display: 'inline',
|
|
6
6
|
},
|
|
7
|
-
|
|
7
|
+
valueText: __assign({}, props.theme.fonts.smallPlus),
|
|
8
8
|
};
|
|
9
9
|
};
|
|
10
10
|
//# sourceMappingURL=Sparkline.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.styles.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.styles.ts"],"names":[],"mappings":";AAEA,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAA2B;IACnD,OAAO;QACL,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;QACD,SAAS,
|
|
1
|
+
{"version":3,"file":"Sparkline.styles.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.styles.ts"],"names":[],"mappings":";AAEA,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAA2B;IACnD,OAAO;QACL,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;QACD,SAAS,eACJ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,SAAS,CAChC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { ISparklineStyleProps, ISparklineStyles } from './Sparkline.types';\n\nexport const getStyles = (props: ISparklineStyleProps): ISparklineStyles => {\n return {\n inlineBlock: {\n display: 'inline',\n },\n valueText: {\n ...props.theme!.fonts.smallPlus,\n },\n };\n};\n"]}
|
|
@@ -19,6 +19,11 @@ export interface ISparklineProps {
|
|
|
19
19
|
* @default 20
|
|
20
20
|
*/
|
|
21
21
|
height?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Width of value text
|
|
24
|
+
* * @default 80
|
|
25
|
+
*/
|
|
26
|
+
valueTextWidth?: number;
|
|
22
27
|
/**
|
|
23
28
|
* Additional CSS class(es) to apply to the SparklineChart.
|
|
24
29
|
*/
|
|
@@ -42,5 +47,5 @@ export interface ISparklineProps {
|
|
|
42
47
|
}
|
|
43
48
|
export interface ISparklineStyles {
|
|
44
49
|
inlineBlock?: IStyle;
|
|
45
|
-
|
|
50
|
+
valueText?: IStyle;
|
|
46
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.types.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\nimport { ICartesianChartStyleProps } from '../CommonComponents/index';\n\nexport interface ISparklineStyleProps extends ICartesianChartStyleProps {}\n\nexport interface ISparklineProps {\n /**\n * An array of chart data points for the Sparkline chart\n */\n data?: IChartProps;\n\n /**\n * Width of chart\n * * @default 80\n */\n width?: number;\n\n /**\n * Height of chart\n * @default 20\n */\n height?: number;\n\n /**\n * Additional CSS class(es) to apply to the SparklineChart.\n */\n className?: string;\n\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n\n /**\n * The prop used to define the culture to localized the numbers\n */\n culture?: string;\n\n /**\n * Prop used to determine whether to show the legend or not\n */\n showLegend?: boolean;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<ISparklineStyleProps, ISparklineStyles>;\n}\n\nexport interface ISparklineStyles {\n inlineBlock?: IStyle;\n
|
|
1
|
+
{"version":3,"file":"Sparkline.types.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\nimport { ICartesianChartStyleProps } from '../CommonComponents/index';\n\nexport interface ISparklineStyleProps extends ICartesianChartStyleProps {}\n\nexport interface ISparklineProps {\n /**\n * An array of chart data points for the Sparkline chart\n */\n data?: IChartProps;\n\n /**\n * Width of chart\n * * @default 80\n */\n width?: number;\n\n /**\n * Height of chart\n * @default 20\n */\n height?: number;\n\n /**\n * Width of value text\n * * @default 80\n */\n valueTextWidth?: number;\n\n /**\n * Additional CSS class(es) to apply to the SparklineChart.\n */\n className?: string;\n\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n\n /**\n * The prop used to define the culture to localized the numbers\n */\n culture?: string;\n\n /**\n * Prop used to determine whether to show the legend or not\n */\n showLegend?: boolean;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<ISparklineStyleProps, ISparklineStyles>;\n}\n\nexport interface ISparklineStyles {\n inlineBlock?: IStyle;\n valueText?: IStyle;\n}\n"]}
|
package/lib/version.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// Do not modify this file; it is generated as part of publish.
|
|
2
2
|
// The checked in version is a placeholder only and will not be updated.
|
|
3
3
|
import { setVersion } from '@fluentui/set-version';
|
|
4
|
-
setVersion('@fluentui/react-charting', '5.12.
|
|
4
|
+
setVersion('@fluentui/react-charting', '5.12.6');
|
|
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,QAAQ,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.
|
|
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,QAAQ,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.6');"]}
|
|
@@ -5,12 +5,14 @@ export interface ISparklineState {
|
|
|
5
5
|
_points: ILineChartDataPoint[] | null;
|
|
6
6
|
_width: number;
|
|
7
7
|
_height: number;
|
|
8
|
+
_valueTextWidth: number;
|
|
8
9
|
}
|
|
9
10
|
export declare class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {
|
|
10
11
|
private margin;
|
|
11
12
|
private x;
|
|
12
13
|
private y;
|
|
13
14
|
private area;
|
|
15
|
+
private line;
|
|
14
16
|
constructor(props: ISparklineProps);
|
|
15
17
|
componentDidMount(): void;
|
|
16
18
|
drawSparkline(): JSX.Element;
|
|
@@ -16,7 +16,8 @@ define(["require", "exports", "tslib", "react", "d3-scale", "d3-shape", "d3-arra
|
|
|
16
16
|
_this.state = {
|
|
17
17
|
_points: null,
|
|
18
18
|
_width: _this.props.width || 80,
|
|
19
|
-
_height: _this.props.height || 20
|
|
19
|
+
_height: _this.props.height || 20,
|
|
20
|
+
_valueTextWidth: _this.props.valueTextWidth || 80,
|
|
20
21
|
};
|
|
21
22
|
return _this;
|
|
22
23
|
}
|
|
@@ -28,8 +29,15 @@ define(["require", "exports", "tslib", "react", "d3-scale", "d3-shape", "d3-arra
|
|
|
28
29
|
.y0(this.state._height)
|
|
29
30
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
30
31
|
.y1(function (d) { return _this.y(d.y); })
|
|
31
|
-
.curve(d3_shape_1.
|
|
32
|
+
.curve(d3_shape_1.curveLinear);
|
|
32
33
|
this.area = area;
|
|
34
|
+
var line = d3_shape_1.line()
|
|
35
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
36
|
+
.x(function (d) { return _this.x(d.x); })
|
|
37
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
38
|
+
.y(function (d) { return _this.y(d.y); })
|
|
39
|
+
.curve(d3_shape_1.curveLinear);
|
|
40
|
+
this.line = line;
|
|
33
41
|
var points = this.props.data.lineChartData[0].data;
|
|
34
42
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
35
43
|
var _a = d3_array_1.extent(points, function (d) { return d.x; }), xMin = _a[0], xMax = _a[1];
|
|
@@ -45,7 +53,9 @@ define(["require", "exports", "tslib", "react", "d3-scale", "d3-shape", "d3-arra
|
|
|
45
53
|
});
|
|
46
54
|
};
|
|
47
55
|
SparklineBase.prototype.drawSparkline = function () {
|
|
48
|
-
return (React.createElement(
|
|
56
|
+
return (React.createElement(React.Fragment, null,
|
|
57
|
+
React.createElement("path", { className: "line", d: this.line(this.state._points), fill: 'transparent', opacity: 1, strokeWidth: 2, stroke: this.props.data.lineChartData[0].color }),
|
|
58
|
+
React.createElement("path", { className: "area", d: this.area(this.state._points), opacity: 1, fillOpacity: 0.2, fill: this.props.data.lineChartData[0].color, "aria-label": "Sparkline with label " + this.props.data.lineChartData[0].legend })));
|
|
49
59
|
};
|
|
50
60
|
SparklineBase.prototype.render = function () {
|
|
51
61
|
var classNames = getClassNames(this.props.styles, {
|
|
@@ -53,8 +63,9 @@ define(["require", "exports", "tslib", "react", "d3-scale", "d3-shape", "d3-arra
|
|
|
53
63
|
});
|
|
54
64
|
return (React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal, isCircularNavigation: true, className: classNames.inlineBlock },
|
|
55
65
|
React.createElement("div", { className: classNames.inlineBlock },
|
|
56
|
-
this.state._width >= 50 && this.state._height >= 16 ? (React.createElement("svg", { width: this.state._width, height: this.state._height,
|
|
57
|
-
this.props.showLegend && this.props.data.lineChartData[0].legend ? (React.createElement("
|
|
66
|
+
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)),
|
|
67
|
+
this.props.showLegend && this.props.data.lineChartData[0].legend ? (React.createElement("svg", { width: this.state._valueTextWidth, height: this.state._height, "data-is-focusable": true },
|
|
68
|
+
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)))));
|
|
58
69
|
};
|
|
59
70
|
return SparklineBase;
|
|
60
71
|
}(React.Component));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.base.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.base.tsx"],"names":[],"mappings":";;;;IAQA,IAAM,aAAa,GAAG,8BAAkB,EAA0C,CAAC;
|
|
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 } from '@fluentui/react/lib/Utilities';\nimport { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from '../../index';\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\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 }\n\n public componentDidMount() {\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 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 (\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 }\n}\n"]}
|
|
@@ -7,7 +7,7 @@ define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
|
|
|
7
7
|
inlineBlock: {
|
|
8
8
|
display: 'inline',
|
|
9
9
|
},
|
|
10
|
-
|
|
10
|
+
valueText: tslib_1.__assign({}, props.theme.fonts.smallPlus),
|
|
11
11
|
};
|
|
12
12
|
};
|
|
13
13
|
exports.getStyles = getStyles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.styles.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAA2B;QACnD,OAAO;YACL,WAAW,EAAE;gBACX,OAAO,EAAE,QAAQ;aAClB;YACD,SAAS,
|
|
1
|
+
{"version":3,"file":"Sparkline.styles.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAA2B;QACnD,OAAO;YACL,WAAW,EAAE;gBACX,OAAO,EAAE,QAAQ;aAClB;YACD,SAAS,uBACJ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,SAAS,CAChC;SACF,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,SAAS,aASpB","sourcesContent":["import { ISparklineStyleProps, ISparklineStyles } from './Sparkline.types';\n\nexport const getStyles = (props: ISparklineStyleProps): ISparklineStyles => {\n return {\n inlineBlock: {\n display: 'inline',\n },\n valueText: {\n ...props.theme!.fonts.smallPlus,\n },\n };\n};\n"]}
|
|
@@ -19,6 +19,11 @@ export interface ISparklineProps {
|
|
|
19
19
|
* @default 20
|
|
20
20
|
*/
|
|
21
21
|
height?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Width of value text
|
|
24
|
+
* * @default 80
|
|
25
|
+
*/
|
|
26
|
+
valueTextWidth?: number;
|
|
22
27
|
/**
|
|
23
28
|
* Additional CSS class(es) to apply to the SparklineChart.
|
|
24
29
|
*/
|
|
@@ -42,5 +47,5 @@ export interface ISparklineProps {
|
|
|
42
47
|
}
|
|
43
48
|
export interface ISparklineStyles {
|
|
44
49
|
inlineBlock?: IStyle;
|
|
45
|
-
|
|
50
|
+
valueText?: IStyle;
|
|
46
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.types.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\nimport { ICartesianChartStyleProps } from '../CommonComponents/index';\n\nexport interface ISparklineStyleProps extends ICartesianChartStyleProps {}\n\nexport interface ISparklineProps {\n /**\n * An array of chart data points for the Sparkline chart\n */\n data?: IChartProps;\n\n /**\n * Width of chart\n * * @default 80\n */\n width?: number;\n\n /**\n * Height of chart\n * @default 20\n */\n height?: number;\n\n /**\n * Additional CSS class(es) to apply to the SparklineChart.\n */\n className?: string;\n\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n\n /**\n * The prop used to define the culture to localized the numbers\n */\n culture?: string;\n\n /**\n * Prop used to determine whether to show the legend or not\n */\n showLegend?: boolean;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<ISparklineStyleProps, ISparklineStyles>;\n}\n\nexport interface ISparklineStyles {\n inlineBlock?: IStyle;\n
|
|
1
|
+
{"version":3,"file":"Sparkline.types.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\nimport { ICartesianChartStyleProps } from '../CommonComponents/index';\n\nexport interface ISparklineStyleProps extends ICartesianChartStyleProps {}\n\nexport interface ISparklineProps {\n /**\n * An array of chart data points for the Sparkline chart\n */\n data?: IChartProps;\n\n /**\n * Width of chart\n * * @default 80\n */\n width?: number;\n\n /**\n * Height of chart\n * @default 20\n */\n height?: number;\n\n /**\n * Width of value text\n * * @default 80\n */\n valueTextWidth?: number;\n\n /**\n * Additional CSS class(es) to apply to the SparklineChart.\n */\n className?: string;\n\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n\n /**\n * The prop used to define the culture to localized the numbers\n */\n culture?: string;\n\n /**\n * Prop used to determine whether to show the legend or not\n */\n showLegend?: boolean;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<ISparklineStyleProps, ISparklineStyles>;\n}\n\nexport interface ISparklineStyles {\n inlineBlock?: IStyle;\n valueText?: 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.6');
|
|
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,QAAQ,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.
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;;IAGA,wBAAU,CAAC,0BAA0B,EAAE,QAAQ,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.6');"]}
|
|
@@ -5,12 +5,14 @@ export interface ISparklineState {
|
|
|
5
5
|
_points: ILineChartDataPoint[] | null;
|
|
6
6
|
_width: number;
|
|
7
7
|
_height: number;
|
|
8
|
+
_valueTextWidth: number;
|
|
8
9
|
}
|
|
9
10
|
export declare class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {
|
|
10
11
|
private margin;
|
|
11
12
|
private x;
|
|
12
13
|
private y;
|
|
13
14
|
private area;
|
|
15
|
+
private line;
|
|
14
16
|
constructor(props: ISparklineProps);
|
|
15
17
|
componentDidMount(): void;
|
|
16
18
|
drawSparkline(): JSX.Element;
|
|
@@ -22,7 +22,8 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
22
22
|
_this.state = {
|
|
23
23
|
_points: null,
|
|
24
24
|
_width: _this.props.width || 80,
|
|
25
|
-
_height: _this.props.height || 20
|
|
25
|
+
_height: _this.props.height || 20,
|
|
26
|
+
_valueTextWidth: _this.props.valueTextWidth || 80,
|
|
26
27
|
};
|
|
27
28
|
return _this;
|
|
28
29
|
}
|
|
@@ -34,8 +35,15 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
34
35
|
.y0(this.state._height)
|
|
35
36
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
36
37
|
.y1(function (d) { return _this.y(d.y); })
|
|
37
|
-
.curve(d3_shape_1.
|
|
38
|
+
.curve(d3_shape_1.curveLinear);
|
|
38
39
|
this.area = area;
|
|
40
|
+
var line = d3_shape_1.line()
|
|
41
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
42
|
+
.x(function (d) { return _this.x(d.x); })
|
|
43
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
44
|
+
.y(function (d) { return _this.y(d.y); })
|
|
45
|
+
.curve(d3_shape_1.curveLinear);
|
|
46
|
+
this.line = line;
|
|
39
47
|
var points = this.props.data.lineChartData[0].data;
|
|
40
48
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
41
49
|
var _a = d3_array_1.extent(points, function (d) { return d.x; }), xMin = _a[0], xMax = _a[1];
|
|
@@ -51,7 +59,9 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
51
59
|
});
|
|
52
60
|
};
|
|
53
61
|
SparklineBase.prototype.drawSparkline = function () {
|
|
54
|
-
return (React.createElement(
|
|
62
|
+
return (React.createElement(React.Fragment, null,
|
|
63
|
+
React.createElement("path", { className: "line", d: this.line(this.state._points), fill: 'transparent', opacity: 1, strokeWidth: 2, stroke: this.props.data.lineChartData[0].color }),
|
|
64
|
+
React.createElement("path", { className: "area", d: this.area(this.state._points), opacity: 1, fillOpacity: 0.2, fill: this.props.data.lineChartData[0].color, "aria-label": "Sparkline with label " + this.props.data.lineChartData[0].legend })));
|
|
55
65
|
};
|
|
56
66
|
SparklineBase.prototype.render = function () {
|
|
57
67
|
var classNames = getClassNames(this.props.styles, {
|
|
@@ -59,8 +69,9 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
59
69
|
});
|
|
60
70
|
return (React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal, isCircularNavigation: true, className: classNames.inlineBlock },
|
|
61
71
|
React.createElement("div", { className: classNames.inlineBlock },
|
|
62
|
-
this.state._width >= 50 && this.state._height >= 16 ? (React.createElement("svg", { width: this.state._width, height: this.state._height,
|
|
63
|
-
this.props.showLegend && this.props.data.lineChartData[0].legend ? (React.createElement("
|
|
72
|
+
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
|
+
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)))));
|
|
64
75
|
};
|
|
65
76
|
return SparklineBase;
|
|
66
77
|
}(React.Component));
|
|
@@ -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,
|
|
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,2DAAmE;AAEnE,IAAM,aAAa,GAAG,8BAAkB,EAA0C,CAAC;AASnF;IAAmC,yCAAiD;IAgBlF,uBAAY,KAAsB;QAAlC,YACE,kBAAM,KAAK,CAAC,SAOb;QAvBO,YAAM,GAAG;YACf,GAAG,EAAE,CAAC;YACN,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;SACR,CAAC;QAYA,KAAI,CAAC,KAAK,GAAG;YACX,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,KAAI,CAAC,KAAK,CAAC,KAAM,IAAI,EAAE;YAC/B,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,MAAO,IAAI,EAAE;YACjC,eAAe,EAAE,KAAI,CAAC,KAAK,CAAC,cAAe,IAAI,EAAE;SAClD,CAAC;;IACJ,CAAC;IAEM,yCAAiB,GAAxB;QAAA,iBAkCC;QAjCC,IAAM,IAAI,GAAG,eAAM,EAAE;YACnB,uDAAuD;aACtD,CAAC,CAAC,UAAC,CAAM,IAAK,OAAA,KAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAAC;aAC1B,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;YACvB,uDAAuD;aACtD,EAAE,CAAC,UAAC,CAAM,IAAK,OAAA,KAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAAC;aAC3B,KAAK,CAAC,sBAAa,CAAC,CAAC;QACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAEjB,IAAM,IAAI,GAAG,eAAM,EAAE;YACnB,uDAAuD;aACtD,CAAC,CAAC,UAAC,CAAM,IAAK,OAAA,KAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAAC;YAC3B,uDAAuD;aACtD,CAAC,CAAC,UAAC,CAAM,IAAK,OAAA,KAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAAC;aAC1B,KAAK,CAAC,sBAAa,CAAC,CAAC;QACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAEjB,IAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAEvD,uDAAuD;QACjD,IAAA,KAAe,iBAAQ,CAAC,MAAM,EAAE,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC,EAA/C,IAAI,QAAA,EAAE,IAAI,QAAqC,CAAC;QAEvD,IAAI,CAAC,CAAC,GAAG,sBAAa,EAAE;aACrB,MAAM,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;aACpB,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAM,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,CAAC,GAAG,sBAAa,EAAE;YACtB,uDAAuD;aACtD,MAAM,CAAC,CAAC,CAAC,EAAE,cAAK,CAAC,MAAM,EAAE,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC,CAAC,CAAC;aAC3C,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,MAAO,EAAE,IAAI,CAAC,MAAM,CAAC,GAAI,CAAC,CAAC,CAAC;QAEvE,IAAI,CAAC,QAAQ,CAAC;YACZ,OAAO,EAAE,MAAM;SAChB,CAAC,CAAC;IACL,CAAC;IAEM,qCAAa,GAApB;QACE,OAAO,CACL;YACE,8BACE,SAAS,EAAC,MAAM,EAChB,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAChC,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,CAAC,EACV,WAAW,EAAE,CAAC,EACd,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,KAAM,GACjD;YACF,8BACE,SAAS,EAAC,MAAM,EAChB,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAChC,OAAO,EAAE,CAAC,EACV,WAAW,EAAE,GAAG,EAChB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,KAAM,gBACnC,0BAAwB,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAS,GAChF,CACD,CACJ,CAAC;IACJ,CAAC;IAEM,8BAAM,GAAb;QACE,IAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,MAAO,EAAE;YACnD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;SACzB,CAAC,CAAC;QACH,OAAO,CACL,oBAAC,uBAAS,IACR,SAAS,EAAE,gCAAkB,CAAC,UAAU,EACxC,oBAAoB,EAAE,IAAI,EAC1B,SAAS,EAAE,UAAU,CAAC,WAAW;YAEjC,6BAAK,SAAS,EAAE,UAAU,CAAC,WAAW;gBACnC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,CACrD,6BAAK,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,uBAAqB,IAAI,IAC/E,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAC7C,CACP,CAAC,CAAC,CAAC,CACF,yCAAK,CACN;gBACA,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CACpE,6BAAK,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,uBAAqB,IAAI;oBACzF,8BAAM,CAAC,EAAC,IAAI,EAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,IACjE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAO,CACtC,CACH,CACP,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CACG,CACI,CACb,CAAC;IACJ,CAAC;IACH,oBAAC;AAAD,CAAC,AApHD,CAAmC,KAAK,CAAC,SAAS,GAoHjD;AApHY,sCAAa","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 } from '@fluentui/react/lib/Utilities';\nimport { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from '../../index';\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\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 }\n\n public componentDidMount() {\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 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 (\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 }\n}\n"]}
|
|
@@ -7,7 +7,7 @@ var getStyles = function (props) {
|
|
|
7
7
|
inlineBlock: {
|
|
8
8
|
display: 'inline',
|
|
9
9
|
},
|
|
10
|
-
|
|
10
|
+
valueText: tslib_1.__assign({}, props.theme.fonts.smallPlus),
|
|
11
11
|
};
|
|
12
12
|
};
|
|
13
13
|
exports.getStyles = getStyles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.styles.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.styles.ts"],"names":[],"mappings":";;;;AAEO,IAAM,SAAS,GAAG,UAAC,KAA2B;IACnD,OAAO;QACL,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;QACD,SAAS,
|
|
1
|
+
{"version":3,"file":"Sparkline.styles.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.styles.ts"],"names":[],"mappings":";;;;AAEO,IAAM,SAAS,GAAG,UAAC,KAA2B;IACnD,OAAO;QACL,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;SAClB;QACD,SAAS,uBACJ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,SAAS,CAChC;KACF,CAAC;AACJ,CAAC,CAAC;AATW,QAAA,SAAS,aASpB","sourcesContent":["import { ISparklineStyleProps, ISparklineStyles } from './Sparkline.types';\n\nexport const getStyles = (props: ISparklineStyleProps): ISparklineStyles => {\n return {\n inlineBlock: {\n display: 'inline',\n },\n valueText: {\n ...props.theme!.fonts.smallPlus,\n },\n };\n};\n"]}
|
|
@@ -19,6 +19,11 @@ export interface ISparklineProps {
|
|
|
19
19
|
* @default 20
|
|
20
20
|
*/
|
|
21
21
|
height?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Width of value text
|
|
24
|
+
* * @default 80
|
|
25
|
+
*/
|
|
26
|
+
valueTextWidth?: number;
|
|
22
27
|
/**
|
|
23
28
|
* Additional CSS class(es) to apply to the SparklineChart.
|
|
24
29
|
*/
|
|
@@ -42,5 +47,5 @@ export interface ISparklineProps {
|
|
|
42
47
|
}
|
|
43
48
|
export interface ISparklineStyles {
|
|
44
49
|
inlineBlock?: IStyle;
|
|
45
|
-
|
|
50
|
+
valueText?: IStyle;
|
|
46
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.types.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\nimport { ICartesianChartStyleProps } from '../CommonComponents/index';\n\nexport interface ISparklineStyleProps extends ICartesianChartStyleProps {}\n\nexport interface ISparklineProps {\n /**\n * An array of chart data points for the Sparkline chart\n */\n data?: IChartProps;\n\n /**\n * Width of chart\n * * @default 80\n */\n width?: number;\n\n /**\n * Height of chart\n * @default 20\n */\n height?: number;\n\n /**\n * Additional CSS class(es) to apply to the SparklineChart.\n */\n className?: string;\n\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n\n /**\n * The prop used to define the culture to localized the numbers\n */\n culture?: string;\n\n /**\n * Prop used to determine whether to show the legend or not\n */\n showLegend?: boolean;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<ISparklineStyleProps, ISparklineStyles>;\n}\n\nexport interface ISparklineStyles {\n inlineBlock?: IStyle;\n
|
|
1
|
+
{"version":3,"file":"Sparkline.types.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IChartProps } from '../../types/IDataPoint';\nimport { ICartesianChartStyleProps } from '../CommonComponents/index';\n\nexport interface ISparklineStyleProps extends ICartesianChartStyleProps {}\n\nexport interface ISparklineProps {\n /**\n * An array of chart data points for the Sparkline chart\n */\n data?: IChartProps;\n\n /**\n * Width of chart\n * * @default 80\n */\n width?: number;\n\n /**\n * Height of chart\n * @default 20\n */\n height?: number;\n\n /**\n * Width of value text\n * * @default 80\n */\n valueTextWidth?: number;\n\n /**\n * Additional CSS class(es) to apply to the SparklineChart.\n */\n className?: string;\n\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n\n /**\n * The prop used to define the culture to localized the numbers\n */\n culture?: string;\n\n /**\n * Prop used to determine whether to show the legend or not\n */\n showLegend?: boolean;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<ISparklineStyleProps, ISparklineStyles>;\n}\n\nexport interface ISparklineStyles {\n inlineBlock?: IStyle;\n valueText?: IStyle;\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
|
-
set_version_1.setVersion('@fluentui/react-charting', '5.12.
|
|
6
|
+
set_version_1.setVersion('@fluentui/react-charting', '5.12.6');
|
|
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,wBAAU,CAAC,0BAA0B,EAAE,QAAQ,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.
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,wBAAU,CAAC,0BAA0B,EAAE,QAAQ,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.6');"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-charting",
|
|
3
|
-
"version": "5.12.
|
|
3
|
+
"version": "5.12.6",
|
|
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",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@fluentui/eslint-plugin": "*",
|
|
31
|
-
"@fluentui/react": "^8.
|
|
31
|
+
"@fluentui/react": "^8.82.2",
|
|
32
32
|
"@types/react-addons-test-utils": "0.14.18",
|
|
33
33
|
"@fluentui/scripts": "^1.0.0",
|
|
34
34
|
"@fluentui/jest-serializer-merge-styles": "^8.0.19"
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"tslib": "^2.1.0"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
|
-
"@fluentui/react": "^8.
|
|
61
|
+
"@fluentui/react": "^8.82.2",
|
|
62
62
|
"@types/react": ">=16.8.0 <18.0.0",
|
|
63
63
|
"@types/react-dom": ">=16.8.0 <18.0.0",
|
|
64
64
|
"react": ">=16.8.0 <18.0.0",
|
|
@@ -23,6 +23,12 @@ export interface ISparklineProps {
|
|
|
23
23
|
*/
|
|
24
24
|
height?: number;
|
|
25
25
|
|
|
26
|
+
/**
|
|
27
|
+
* Width of value text
|
|
28
|
+
* * @default 80
|
|
29
|
+
*/
|
|
30
|
+
valueTextWidth?: number;
|
|
31
|
+
|
|
26
32
|
/**
|
|
27
33
|
* Additional CSS class(es) to apply to the SparklineChart.
|
|
28
34
|
*/
|
|
@@ -51,5 +57,5 @@ export interface ISparklineProps {
|
|
|
51
57
|
|
|
52
58
|
export interface ISparklineStyles {
|
|
53
59
|
inlineBlock?: IStyle;
|
|
54
|
-
|
|
60
|
+
valueText?: IStyle;
|
|
55
61
|
}
|