@fluentui/react-charting 5.10.0 → 5.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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/Sparkline.d.ts +1 -0
- package/lib/Sparkline.js +2 -0
- package/lib/Sparkline.js.map +1 -0
- package/lib/components/Sparkline/Sparkline.base.d.ts +18 -0
- package/lib/components/Sparkline/Sparkline.base.js +65 -0
- package/lib/components/Sparkline/Sparkline.base.js.map +1 -0
- package/lib/components/Sparkline/Sparkline.d.ts +3 -0
- package/lib/components/Sparkline/Sparkline.js +6 -0
- package/lib/components/Sparkline/Sparkline.js.map +1 -0
- package/lib/components/Sparkline/Sparkline.styles.d.ts +2 -0
- package/lib/components/Sparkline/Sparkline.styles.js +10 -0
- package/lib/components/Sparkline/Sparkline.styles.js.map +1 -0
- package/lib/components/Sparkline/Sparkline.types.d.ts +46 -0
- package/lib/components/Sparkline/Sparkline.types.js +2 -0
- package/lib/components/Sparkline/Sparkline.types.js.map +1 -0
- package/lib/components/Sparkline/index.d.ts +2 -0
- package/lib/components/Sparkline/index.js +3 -0
- package/lib/components/Sparkline/index.js.map +1 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib/version.js +1 -1
- package/lib/version.js.map +1 -1
- package/lib-amd/Sparkline.d.ts +1 -0
- package/lib-amd/Sparkline.js +6 -0
- package/lib-amd/Sparkline.js.map +1 -0
- package/lib-amd/components/Sparkline/Sparkline.base.d.ts +18 -0
- package/lib-amd/components/Sparkline/Sparkline.base.js +63 -0
- package/lib-amd/components/Sparkline/Sparkline.base.js.map +1 -0
- package/lib-amd/components/Sparkline/Sparkline.d.ts +3 -0
- package/lib-amd/components/Sparkline/Sparkline.js +8 -0
- package/lib-amd/components/Sparkline/Sparkline.js.map +1 -0
- package/lib-amd/components/Sparkline/Sparkline.styles.d.ts +2 -0
- package/lib-amd/components/Sparkline/Sparkline.styles.js +15 -0
- package/lib-amd/components/Sparkline/Sparkline.styles.js.map +1 -0
- package/lib-amd/components/Sparkline/Sparkline.types.d.ts +46 -0
- package/lib-amd/components/Sparkline/Sparkline.types.js +5 -0
- package/lib-amd/components/Sparkline/Sparkline.types.js.map +1 -0
- package/lib-amd/components/Sparkline/index.d.ts +2 -0
- package/lib-amd/components/Sparkline/index.js +7 -0
- package/lib-amd/components/Sparkline/index.js.map +1 -0
- package/lib-amd/index.d.ts +1 -0
- package/lib-amd/index.js +2 -1
- package/lib-amd/index.js.map +1 -1
- package/lib-amd/version.js +1 -1
- package/lib-amd/version.js.map +1 -1
- package/lib-commonjs/Sparkline.d.ts +1 -0
- package/lib-commonjs/Sparkline.js +5 -0
- package/lib-commonjs/Sparkline.js.map +1 -0
- package/lib-commonjs/components/Sparkline/Sparkline.base.d.ts +18 -0
- package/lib-commonjs/components/Sparkline/Sparkline.base.js +68 -0
- package/lib-commonjs/components/Sparkline/Sparkline.base.js.map +1 -0
- package/lib-commonjs/components/Sparkline/Sparkline.d.ts +3 -0
- package/lib-commonjs/components/Sparkline/Sparkline.js +9 -0
- package/lib-commonjs/components/Sparkline/Sparkline.js.map +1 -0
- package/lib-commonjs/components/Sparkline/Sparkline.styles.d.ts +2 -0
- package/lib-commonjs/components/Sparkline/Sparkline.styles.js +14 -0
- package/lib-commonjs/components/Sparkline/Sparkline.styles.js.map +1 -0
- package/lib-commonjs/components/Sparkline/Sparkline.types.d.ts +46 -0
- package/lib-commonjs/components/Sparkline/Sparkline.types.js +3 -0
- package/lib-commonjs/components/Sparkline/Sparkline.types.js.map +1 -0
- package/lib-commonjs/components/Sparkline/index.d.ts +2 -0
- package/lib-commonjs/components/Sparkline/index.js +6 -0
- package/lib-commonjs/components/Sparkline/index.js.map +1 -0
- package/lib-commonjs/index.d.ts +1 -0
- package/lib-commonjs/index.js +1 -0
- package/lib-commonjs/index.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 +55 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components/Sparkline/index';
|
package/lib/Sparkline.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sparkline.js","sourceRoot":"../src/","sources":["Sparkline.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './components/Sparkline/index';\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ILineChartDataPoint } from '../../types/IDataPoint';
|
|
3
|
+
import { ISparklineProps } from '../../index';
|
|
4
|
+
export interface ISparklineState {
|
|
5
|
+
_points: ILineChartDataPoint[] | null;
|
|
6
|
+
_width: number;
|
|
7
|
+
_height: number;
|
|
8
|
+
}
|
|
9
|
+
export declare class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {
|
|
10
|
+
private margin;
|
|
11
|
+
private x;
|
|
12
|
+
private y;
|
|
13
|
+
private area;
|
|
14
|
+
constructor(props: ISparklineProps);
|
|
15
|
+
componentDidMount(): void;
|
|
16
|
+
drawSparkline(): JSX.Element;
|
|
17
|
+
render(): JSX.Element;
|
|
18
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { __extends } from "tslib";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { scaleLinear as d3ScaleLinear } from 'd3-scale';
|
|
4
|
+
import { area as d3Area, curveMonotoneX as d3CurveMonotoneX } from 'd3-shape';
|
|
5
|
+
import { max as d3Max, extent as d3Extent } from 'd3-array';
|
|
6
|
+
import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
|
|
7
|
+
import { classNamesFunction } from '@fluentui/react/lib/Utilities';
|
|
8
|
+
var getClassNames = classNamesFunction();
|
|
9
|
+
var SparklineBase = /** @class */ (function (_super) {
|
|
10
|
+
__extends(SparklineBase, _super);
|
|
11
|
+
function SparklineBase(props) {
|
|
12
|
+
var _this = _super.call(this, props) || this;
|
|
13
|
+
_this.margin = {
|
|
14
|
+
top: 2,
|
|
15
|
+
right: 0,
|
|
16
|
+
bottom: 0,
|
|
17
|
+
left: 0,
|
|
18
|
+
};
|
|
19
|
+
_this.state = {
|
|
20
|
+
_points: null,
|
|
21
|
+
_width: _this.props.width || 80,
|
|
22
|
+
_height: _this.props.height || 20 + _this.margin.bottom + _this.margin.top,
|
|
23
|
+
};
|
|
24
|
+
return _this;
|
|
25
|
+
}
|
|
26
|
+
SparklineBase.prototype.componentDidMount = function () {
|
|
27
|
+
var _this = this;
|
|
28
|
+
var area = d3Area()
|
|
29
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
30
|
+
.x(function (d) { return _this.x(d.x); })
|
|
31
|
+
.y0(this.state._height)
|
|
32
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
33
|
+
.y1(function (d) { return _this.y(d.y); })
|
|
34
|
+
.curve(d3CurveMonotoneX);
|
|
35
|
+
this.area = area;
|
|
36
|
+
var points = this.props.data.lineChartData[0].data;
|
|
37
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
38
|
+
var _a = d3Extent(points, function (d) { return d.x; }), xMin = _a[0], xMax = _a[1];
|
|
39
|
+
this.x = d3ScaleLinear()
|
|
40
|
+
.domain([xMin, xMax])
|
|
41
|
+
.range([this.margin.left, this.state._width - this.margin.right]);
|
|
42
|
+
this.y = d3ScaleLinear()
|
|
43
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
44
|
+
.domain([0, d3Max(points, function (d) { return d.y; })])
|
|
45
|
+
.range([this.state._height - this.margin.bottom, this.margin.top]);
|
|
46
|
+
this.setState({
|
|
47
|
+
_points: points,
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
SparklineBase.prototype.drawSparkline = function () {
|
|
51
|
+
return (React.createElement("path", { className: "area", d: this.area(this.state._points), opacity: 1, fillOpacity: 0.2, fill: this.props.data.lineChartData[0].color, strokeWidth: 2, stroke: this.props.data.lineChartData[0].color, "aria-label": "Sparkline with label " + this.props.data.lineChartData[0].legend }));
|
|
52
|
+
};
|
|
53
|
+
SparklineBase.prototype.render = function () {
|
|
54
|
+
var classNames = getClassNames(this.props.styles, {
|
|
55
|
+
theme: this.props.theme,
|
|
56
|
+
});
|
|
57
|
+
return (React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal, isCircularNavigation: true, className: classNames.inlineBlock },
|
|
58
|
+
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, tabIndex: 0 }, this.state._points ? this.drawSparkline() : null)) : (React.createElement(React.Fragment, null)),
|
|
60
|
+
this.props.showLegend && this.props.data.lineChartData[0].legend ? (React.createElement("span", { role: "text", className: classNames.titleText, tabIndex: 0 }, this.props.data.lineChartData[0].legend)) : (React.createElement(React.Fragment, null)))));
|
|
61
|
+
};
|
|
62
|
+
return SparklineBase;
|
|
63
|
+
}(React.Component));
|
|
64
|
+
export { SparklineBase };
|
|
65
|
+
//# sourceMappingURL=Sparkline.base.js.map
|
|
@@ -0,0 +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,cAAc,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC9E,OAAO,EAAE,GAAG,IAAI,KAAK,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAEnE,IAAM,aAAa,GAAG,kBAAkB,EAA0C,CAAC;AAQnF;IAAmC,iCAAiD;IAelF,uBAAY,KAAsB;QAAlC,YACE,kBAAM,KAAK,CAAC,SAMb;QArBO,YAAM,GAAG;YACf,GAAG,EAAE,CAAC;YACN,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;SACR,CAAC;QAWA,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,GAAG,KAAI,CAAC,MAAM,CAAC,MAAM,GAAG,KAAI,CAAC,MAAM,CAAC,GAAG;SACzE,CAAC;;IACJ,CAAC;IAEM,yCAAiB,GAAxB;QAAA,iBA0BC;QAzBC,IAAM,IAAI,GAAG,MAAM,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,gBAAgB,CAAC,CAAC;QAC3B,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,QAAQ,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,aAAa,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,aAAa,EAAE;YACtB,uDAAuD;aACtD,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,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,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,EAC/C,WAAW,EAAE,CAAC,EACd,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,KAAM,gBACrC,0BAAwB,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAS,GAChF,CACH,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,SAAS,IACR,SAAS,EAAE,kBAAkB,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,EAAE,QAAQ,EAAE,CAAC,IACnE,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,8BAAM,IAAI,EAAC,MAAM,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,QAAQ,EAAE,CAAC,IAC3D,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAO,CACtC,CACR,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CACG,CACI,CACb,CAAC;IACJ,CAAC;IACH,oBAAC;AAAD,CAAC,AAhGD,CAAmC,KAAK,CAAC,SAAS,GAgGjD","sourcesContent":["import * as React from 'react';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, curveMonotoneX as d3CurveMonotoneX } 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}\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\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 + this.margin.bottom + this.margin.top,\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(d3CurveMonotoneX);\n this.area = area;\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 <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 strokeWidth={2}\n stroke={this.props.data!.lineChartData![0].color!}\n aria-label={`Sparkline with label ${this.props.data!.lineChartData![0].legend!}`}\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} tabIndex={0}>\n {this.state._points ? this.drawSparkline() : null}\n </svg>\n ) : (\n <></>\n )}\n {this.props.showLegend && this.props.data!.lineChartData![0].legend ? (\n <span role=\"text\" className={classNames.titleText} tabIndex={0}>\n {this.props.data!.lineChartData![0].legend!}\n </span>\n ) : (\n <></>\n )}\n </div>\n </FocusZone>\n );\n }\n}\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { styled } from '@fluentui/react/lib/Utilities';
|
|
2
|
+
import { SparklineBase } from './Sparkline.base';
|
|
3
|
+
import { getStyles } from './Sparkline.styles';
|
|
4
|
+
// Create a Sparkline variant which uses these default styles and this styled subcomponent.
|
|
5
|
+
export var Sparkline = styled(SparklineBase, getStyles);
|
|
6
|
+
//# sourceMappingURL=Sparkline.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sparkline.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,2FAA2F;AAC3F,MAAM,CAAC,IAAM,SAAS,GAA6C,MAAM,CAIvE,aAAa,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { ISparklineStyles, ISparklineProps, ISparklineStyleProps } from '../../index';\nimport { SparklineBase } from './Sparkline.base';\nimport { getStyles } from './Sparkline.styles';\n\n// Create a Sparkline variant which uses these default styles and this styled subcomponent.\nexport const Sparkline: React.FunctionComponent<ISparklineProps> = styled<\n ISparklineProps,\n ISparklineStyleProps,\n ISparklineStyles\n>(SparklineBase, getStyles);\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { __assign } from "tslib";
|
|
2
|
+
export var getStyles = function (props) {
|
|
3
|
+
return {
|
|
4
|
+
inlineBlock: {
|
|
5
|
+
display: 'inline',
|
|
6
|
+
},
|
|
7
|
+
titleText: __assign({ marginLeft: '8px', textAlign: 'center' }, props.theme.fonts.smallPlus),
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=Sparkline.styles.js.map
|
|
@@ -0,0 +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,aACP,UAAU,EAAE,KAAK,EACjB,SAAS,EAAE,QAAQ,IAChB,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 titleText: {\n marginLeft: '8px',\n textAlign: 'center',\n ...props.theme!.fonts.smallPlus,\n },\n };\n};\n"]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
|
|
2
|
+
import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
|
|
3
|
+
import { IChartProps } from '../../types/IDataPoint';
|
|
4
|
+
import { ICartesianChartStyleProps } from '../CommonComponents/index';
|
|
5
|
+
export interface ISparklineStyleProps extends ICartesianChartStyleProps {
|
|
6
|
+
}
|
|
7
|
+
export interface ISparklineProps {
|
|
8
|
+
/**
|
|
9
|
+
* An array of chart data points for the Sparkline chart
|
|
10
|
+
*/
|
|
11
|
+
data?: IChartProps;
|
|
12
|
+
/**
|
|
13
|
+
* Width of chart
|
|
14
|
+
* * @default 80
|
|
15
|
+
*/
|
|
16
|
+
width?: number;
|
|
17
|
+
/**
|
|
18
|
+
* Height of chart
|
|
19
|
+
* @default 20
|
|
20
|
+
*/
|
|
21
|
+
height?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Additional CSS class(es) to apply to the SparklineChart.
|
|
24
|
+
*/
|
|
25
|
+
className?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Theme (provided through customization.)
|
|
28
|
+
*/
|
|
29
|
+
theme?: ITheme;
|
|
30
|
+
/**
|
|
31
|
+
* The prop used to define the culture to localized the numbers
|
|
32
|
+
*/
|
|
33
|
+
culture?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Prop used to determine whether to show the legend or not
|
|
36
|
+
*/
|
|
37
|
+
showLegend?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Call to provide customized styling that will layer on top of the variant rules.
|
|
40
|
+
*/
|
|
41
|
+
styles?: IStyleFunctionOrObject<ISparklineStyleProps, ISparklineStyles>;
|
|
42
|
+
}
|
|
43
|
+
export interface ISparklineStyles {
|
|
44
|
+
inlineBlock?: IStyle;
|
|
45
|
+
titleText?: IStyle;
|
|
46
|
+
}
|
|
@@ -0,0 +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 titleText?: IStyle;\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Sparkline/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './Sparkline';\nexport * from './Sparkline.types';\n"]}
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAE5B,OAAO,WAAW,CAAC","sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './AreaChart';\nexport * from './PieChart';\nexport * from './StackedBarChart';\nexport * from './VerticalBarChart';\nexport * from './VerticalStackedBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './utilities/ChartHoverCard/index';\nexport * from './HeatMapChart';\nexport * from './SankeyChart';\nexport * from './Sparkline';\n\nimport './version';\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.10.
|
|
4
|
+
setVersion('@fluentui/react-charting', '5.10.1');
|
|
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.10.
|
|
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.10.1');"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components/Sparkline/index';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "./components/Sparkline/index"], function (require, exports, tslib_1, index_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
tslib_1.__exportStar(index_1, exports);
|
|
5
|
+
});
|
|
6
|
+
//# sourceMappingURL=Sparkline.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sparkline.js","sourceRoot":"../src/","sources":["Sparkline.ts"],"names":[],"mappings":";;;IAAA,uCAA6C","sourcesContent":["export * from './components/Sparkline/index';\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ILineChartDataPoint } from '../../types/IDataPoint';
|
|
3
|
+
import { ISparklineProps } from '../../index';
|
|
4
|
+
export interface ISparklineState {
|
|
5
|
+
_points: ILineChartDataPoint[] | null;
|
|
6
|
+
_width: number;
|
|
7
|
+
_height: number;
|
|
8
|
+
}
|
|
9
|
+
export declare class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {
|
|
10
|
+
private margin;
|
|
11
|
+
private x;
|
|
12
|
+
private y;
|
|
13
|
+
private area;
|
|
14
|
+
constructor(props: ISparklineProps);
|
|
15
|
+
componentDidMount(): void;
|
|
16
|
+
drawSparkline(): JSX.Element;
|
|
17
|
+
render(): JSX.Element;
|
|
18
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "react", "d3-scale", "d3-shape", "d3-array", "@fluentui/react-focus", "@fluentui/react/lib/Utilities"], function (require, exports, tslib_1, React, d3_scale_1, d3_shape_1, d3_array_1, react_focus_1, Utilities_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.SparklineBase = void 0;
|
|
5
|
+
var getClassNames = Utilities_1.classNamesFunction();
|
|
6
|
+
var SparklineBase = /** @class */ (function (_super) {
|
|
7
|
+
tslib_1.__extends(SparklineBase, _super);
|
|
8
|
+
function SparklineBase(props) {
|
|
9
|
+
var _this = _super.call(this, props) || this;
|
|
10
|
+
_this.margin = {
|
|
11
|
+
top: 2,
|
|
12
|
+
right: 0,
|
|
13
|
+
bottom: 0,
|
|
14
|
+
left: 0,
|
|
15
|
+
};
|
|
16
|
+
_this.state = {
|
|
17
|
+
_points: null,
|
|
18
|
+
_width: _this.props.width || 80,
|
|
19
|
+
_height: _this.props.height || 20 + _this.margin.bottom + _this.margin.top,
|
|
20
|
+
};
|
|
21
|
+
return _this;
|
|
22
|
+
}
|
|
23
|
+
SparklineBase.prototype.componentDidMount = function () {
|
|
24
|
+
var _this = this;
|
|
25
|
+
var area = d3_shape_1.area()
|
|
26
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
27
|
+
.x(function (d) { return _this.x(d.x); })
|
|
28
|
+
.y0(this.state._height)
|
|
29
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
30
|
+
.y1(function (d) { return _this.y(d.y); })
|
|
31
|
+
.curve(d3_shape_1.curveMonotoneX);
|
|
32
|
+
this.area = area;
|
|
33
|
+
var points = this.props.data.lineChartData[0].data;
|
|
34
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
35
|
+
var _a = d3_array_1.extent(points, function (d) { return d.x; }), xMin = _a[0], xMax = _a[1];
|
|
36
|
+
this.x = d3_scale_1.scaleLinear()
|
|
37
|
+
.domain([xMin, xMax])
|
|
38
|
+
.range([this.margin.left, this.state._width - this.margin.right]);
|
|
39
|
+
this.y = d3_scale_1.scaleLinear()
|
|
40
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
41
|
+
.domain([0, d3_array_1.max(points, function (d) { return d.y; })])
|
|
42
|
+
.range([this.state._height - this.margin.bottom, this.margin.top]);
|
|
43
|
+
this.setState({
|
|
44
|
+
_points: points,
|
|
45
|
+
});
|
|
46
|
+
};
|
|
47
|
+
SparklineBase.prototype.drawSparkline = function () {
|
|
48
|
+
return (React.createElement("path", { className: "area", d: this.area(this.state._points), opacity: 1, fillOpacity: 0.2, fill: this.props.data.lineChartData[0].color, strokeWidth: 2, stroke: this.props.data.lineChartData[0].color, "aria-label": "Sparkline with label " + this.props.data.lineChartData[0].legend }));
|
|
49
|
+
};
|
|
50
|
+
SparklineBase.prototype.render = function () {
|
|
51
|
+
var classNames = getClassNames(this.props.styles, {
|
|
52
|
+
theme: this.props.theme,
|
|
53
|
+
});
|
|
54
|
+
return (React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal, isCircularNavigation: true, className: classNames.inlineBlock },
|
|
55
|
+
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, tabIndex: 0 }, this.state._points ? this.drawSparkline() : null)) : (React.createElement(React.Fragment, null)),
|
|
57
|
+
this.props.showLegend && this.props.data.lineChartData[0].legend ? (React.createElement("span", { role: "text", className: classNames.titleText, tabIndex: 0 }, this.props.data.lineChartData[0].legend)) : (React.createElement(React.Fragment, null)))));
|
|
58
|
+
};
|
|
59
|
+
return SparklineBase;
|
|
60
|
+
}(React.Component));
|
|
61
|
+
exports.SparklineBase = SparklineBase;
|
|
62
|
+
});
|
|
63
|
+
//# sourceMappingURL=Sparkline.base.js.map
|
|
@@ -0,0 +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;IAQnF;QAAmC,yCAAiD;QAelF,uBAAY,KAAsB;YAAlC,YACE,kBAAM,KAAK,CAAC,SAMb;YArBO,YAAM,GAAG;gBACf,GAAG,EAAE,CAAC;gBACN,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;gBACT,IAAI,EAAE,CAAC;aACR,CAAC;YAWA,KAAI,CAAC,KAAK,GAAG;gBACX,OAAO,EAAE,IAAI;gBACb,MAAM,EAAE,KAAI,CAAC,KAAK,CAAC,KAAM,IAAI,EAAE;gBAC/B,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,MAAO,IAAI,EAAE,GAAG,KAAI,CAAC,MAAM,CAAC,MAAM,GAAG,KAAI,CAAC,MAAM,CAAC,GAAG;aACzE,CAAC;;QACJ,CAAC;QAEM,yCAAiB,GAAxB;YAAA,iBA0BC;YAzBC,IAAM,IAAI,GAAG,eAAM,EAAE;gBACnB,uDAAuD;iBACtD,CAAC,CAAC,UAAC,CAAM,IAAK,OAAA,KAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAAC;iBAC1B,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;gBACvB,uDAAuD;iBACtD,EAAE,CAAC,UAAC,CAAM,IAAK,OAAA,KAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAAC;iBAC3B,KAAK,CAAC,yBAAgB,CAAC,CAAC;YAC3B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YAEjB,IAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAEvD,uDAAuD;YACjD,IAAA,KAAe,iBAAQ,CAAC,MAAM,EAAE,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC,EAA/C,IAAI,QAAA,EAAE,IAAI,QAAqC,CAAC;YAEvD,IAAI,CAAC,CAAC,GAAG,sBAAa,EAAE;iBACrB,MAAM,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;iBACpB,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAM,CAAC,CAAC,CAAC;YACtE,IAAI,CAAC,CAAC,GAAG,sBAAa,EAAE;gBACtB,uDAAuD;iBACtD,MAAM,CAAC,CAAC,CAAC,EAAE,cAAK,CAAC,MAAM,EAAE,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC,CAAC,CAAC;iBAC3C,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,MAAO,EAAE,IAAI,CAAC,MAAM,CAAC,GAAI,CAAC,CAAC,CAAC;YAEvE,IAAI,CAAC,QAAQ,CAAC;gBACZ,OAAO,EAAE,MAAM;aAChB,CAAC,CAAC;QACL,CAAC;QAEM,qCAAa,GAApB;YACE,OAAO,CACL,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,EAC/C,WAAW,EAAE,CAAC,EACd,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,KAAM,gBACrC,0BAAwB,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAS,GAChF,CACH,CAAC;QACJ,CAAC;QAEM,8BAAM,GAAb;YACE,IAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,MAAO,EAAE;gBACnD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;aACzB,CAAC,CAAC;YACH,OAAO,CACL,oBAAC,uBAAS,IACR,SAAS,EAAE,gCAAkB,CAAC,UAAU,EACxC,oBAAoB,EAAE,IAAI,EAC1B,SAAS,EAAE,UAAU,CAAC,WAAW;gBAEjC,6BAAK,SAAS,EAAE,UAAU,CAAC,WAAW;oBACnC,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,EAAE,QAAQ,EAAE,CAAC,IACnE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAC7C,CACP,CAAC,CAAC,CAAC,CACF,yCAAK,CACN;oBACA,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CACpE,8BAAM,IAAI,EAAC,MAAM,EAAC,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,QAAQ,EAAE,CAAC,IAC3D,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAO,CACtC,CACR,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CACG,CACI,CACb,CAAC;QACJ,CAAC;QACH,oBAAC;IAAD,CAAC,AAhGD,CAAmC,KAAK,CAAC,SAAS,GAgGjD;IAhGY,sCAAa","sourcesContent":["import * as React from 'react';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, curveMonotoneX as d3CurveMonotoneX } 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}\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\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 + this.margin.bottom + this.margin.top,\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(d3CurveMonotoneX);\n this.area = area;\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 <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 strokeWidth={2}\n stroke={this.props.data!.lineChartData![0].color!}\n aria-label={`Sparkline with label ${this.props.data!.lineChartData![0].legend!}`}\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} tabIndex={0}>\n {this.state._points ? this.drawSparkline() : null}\n </svg>\n ) : (\n <></>\n )}\n {this.props.showLegend && this.props.data!.lineChartData![0].legend ? (\n <span role=\"text\" className={classNames.titleText} tabIndex={0}>\n {this.props.data!.lineChartData![0].legend!}\n </span>\n ) : (\n <></>\n )}\n </div>\n </FocusZone>\n );\n }\n}\n"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
define(["require", "exports", "@fluentui/react/lib/Utilities", "./Sparkline.base", "./Sparkline.styles"], function (require, exports, Utilities_1, Sparkline_base_1, Sparkline_styles_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Sparkline = void 0;
|
|
5
|
+
// Create a Sparkline variant which uses these default styles and this styled subcomponent.
|
|
6
|
+
exports.Sparkline = Utilities_1.styled(Sparkline_base_1.SparklineBase, Sparkline_styles_1.getStyles);
|
|
7
|
+
});
|
|
8
|
+
//# sourceMappingURL=Sparkline.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sparkline.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.tsx"],"names":[],"mappings":";;;;IAMA,2FAA2F;IAC9E,QAAA,SAAS,GAA6C,kBAAM,CAIvE,8BAAa,EAAE,4BAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { ISparklineStyles, ISparklineProps, ISparklineStyleProps } from '../../index';\nimport { SparklineBase } from './Sparkline.base';\nimport { getStyles } from './Sparkline.styles';\n\n// Create a Sparkline variant which uses these default styles and this styled subcomponent.\nexport const Sparkline: React.FunctionComponent<ISparklineProps> = styled<\n ISparklineProps,\n ISparklineStyleProps,\n ISparklineStyles\n>(SparklineBase, getStyles);\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.getStyles = void 0;
|
|
5
|
+
var getStyles = function (props) {
|
|
6
|
+
return {
|
|
7
|
+
inlineBlock: {
|
|
8
|
+
display: 'inline',
|
|
9
|
+
},
|
|
10
|
+
titleText: tslib_1.__assign({ marginLeft: '8px', textAlign: 'center' }, props.theme.fonts.smallPlus),
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
exports.getStyles = getStyles;
|
|
14
|
+
});
|
|
15
|
+
//# sourceMappingURL=Sparkline.styles.js.map
|
|
@@ -0,0 +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,qBACP,UAAU,EAAE,KAAK,EACjB,SAAS,EAAE,QAAQ,IAChB,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,SAAS,CAChC;SACF,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,SAAS,aAWpB","sourcesContent":["import { ISparklineStyleProps, ISparklineStyles } from './Sparkline.types';\n\nexport const getStyles = (props: ISparklineStyleProps): ISparklineStyles => {\n return {\n inlineBlock: {\n display: 'inline',\n },\n titleText: {\n marginLeft: '8px',\n textAlign: 'center',\n ...props.theme!.fonts.smallPlus,\n },\n };\n};\n"]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
|
|
2
|
+
import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
|
|
3
|
+
import { IChartProps } from '../../types/IDataPoint';
|
|
4
|
+
import { ICartesianChartStyleProps } from '../CommonComponents/index';
|
|
5
|
+
export interface ISparklineStyleProps extends ICartesianChartStyleProps {
|
|
6
|
+
}
|
|
7
|
+
export interface ISparklineProps {
|
|
8
|
+
/**
|
|
9
|
+
* An array of chart data points for the Sparkline chart
|
|
10
|
+
*/
|
|
11
|
+
data?: IChartProps;
|
|
12
|
+
/**
|
|
13
|
+
* Width of chart
|
|
14
|
+
* * @default 80
|
|
15
|
+
*/
|
|
16
|
+
width?: number;
|
|
17
|
+
/**
|
|
18
|
+
* Height of chart
|
|
19
|
+
* @default 20
|
|
20
|
+
*/
|
|
21
|
+
height?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Additional CSS class(es) to apply to the SparklineChart.
|
|
24
|
+
*/
|
|
25
|
+
className?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Theme (provided through customization.)
|
|
28
|
+
*/
|
|
29
|
+
theme?: ITheme;
|
|
30
|
+
/**
|
|
31
|
+
* The prop used to define the culture to localized the numbers
|
|
32
|
+
*/
|
|
33
|
+
culture?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Prop used to determine whether to show the legend or not
|
|
36
|
+
*/
|
|
37
|
+
showLegend?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Call to provide customized styling that will layer on top of the variant rules.
|
|
40
|
+
*/
|
|
41
|
+
styles?: IStyleFunctionOrObject<ISparklineStyleProps, ISparklineStyles>;
|
|
42
|
+
}
|
|
43
|
+
export interface ISparklineStyles {
|
|
44
|
+
inlineBlock?: IStyle;
|
|
45
|
+
titleText?: IStyle;
|
|
46
|
+
}
|
|
@@ -0,0 +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 titleText?: IStyle;\n}\n"]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
define(["require", "exports", "tslib", "./Sparkline", "./Sparkline.types"], function (require, exports, tslib_1, Sparkline_1, Sparkline_types_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
tslib_1.__exportStar(Sparkline_1, exports);
|
|
5
|
+
tslib_1.__exportStar(Sparkline_types_1, exports);
|
|
6
|
+
});
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Sparkline/index.ts"],"names":[],"mappings":";;;IAAA,2CAA4B;IAC5B,iDAAkC","sourcesContent":["export * from './Sparkline';\nexport * from './Sparkline.types';\n"]}
|
package/lib-amd/index.d.ts
CHANGED
package/lib-amd/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "./HorizontalBarChart", "./DonutChart", "./Legends", "./LineChart", "./AreaChart", "./PieChart", "./StackedBarChart", "./VerticalBarChart", "./VerticalStackedBarChart", "./GroupedVerticalBarChart", "./CartesianChart", "./types/index", "./utilities/ChartHoverCard/index", "./HeatMapChart", "./SankeyChart", "./version"], function (require, exports, tslib_1, HorizontalBarChart_1, DonutChart_1, Legends_1, LineChart_1, AreaChart_1, PieChart_1, StackedBarChart_1, VerticalBarChart_1, VerticalStackedBarChart_1, GroupedVerticalBarChart_1, CartesianChart_1, index_1, index_2, HeatMapChart_1, SankeyChart_1) {
|
|
1
|
+
define(["require", "exports", "tslib", "./HorizontalBarChart", "./DonutChart", "./Legends", "./LineChart", "./AreaChart", "./PieChart", "./StackedBarChart", "./VerticalBarChart", "./VerticalStackedBarChart", "./GroupedVerticalBarChart", "./CartesianChart", "./types/index", "./utilities/ChartHoverCard/index", "./HeatMapChart", "./SankeyChart", "./Sparkline", "./version"], function (require, exports, tslib_1, HorizontalBarChart_1, DonutChart_1, Legends_1, LineChart_1, AreaChart_1, PieChart_1, StackedBarChart_1, VerticalBarChart_1, VerticalStackedBarChart_1, GroupedVerticalBarChart_1, CartesianChart_1, index_1, index_2, HeatMapChart_1, SankeyChart_1, Sparkline_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
tslib_1.__exportStar(HorizontalBarChart_1, exports);
|
|
@@ -16,5 +16,6 @@ define(["require", "exports", "tslib", "./HorizontalBarChart", "./DonutChart", "
|
|
|
16
16
|
tslib_1.__exportStar(index_2, exports);
|
|
17
17
|
tslib_1.__exportStar(HeatMapChart_1, exports);
|
|
18
18
|
tslib_1.__exportStar(SankeyChart_1, exports);
|
|
19
|
+
tslib_1.__exportStar(Sparkline_1, exports);
|
|
19
20
|
});
|
|
20
21
|
//# sourceMappingURL=index.js.map
|
package/lib-amd/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;IAAA,oDAAqC;IACrC,4CAA6B;IAC7B,yCAA0B;IAC1B,2CAA4B;IAC5B,2CAA4B;IAC5B,0CAA2B;IAC3B,iDAAkC;IAClC,kDAAmC;IACnC,yDAA0C;IAC1C,yDAA0C;IAC1C,gDAAiC;IACjC,uCAA8B;IAC9B,uCAAiD;IACjD,8CAA+B;IAC/B,6CAA8B","sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './AreaChart';\nexport * from './PieChart';\nexport * from './StackedBarChart';\nexport * from './VerticalBarChart';\nexport * from './VerticalStackedBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './utilities/ChartHoverCard/index';\nexport * from './HeatMapChart';\nexport * from './SankeyChart';\n\nimport './version';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;IAAA,oDAAqC;IACrC,4CAA6B;IAC7B,yCAA0B;IAC1B,2CAA4B;IAC5B,2CAA4B;IAC5B,0CAA2B;IAC3B,iDAAkC;IAClC,kDAAmC;IACnC,yDAA0C;IAC1C,yDAA0C;IAC1C,gDAAiC;IACjC,uCAA8B;IAC9B,uCAAiD;IACjD,8CAA+B;IAC/B,6CAA8B;IAC9B,2CAA4B","sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './AreaChart';\nexport * from './PieChart';\nexport * from './StackedBarChart';\nexport * from './VerticalBarChart';\nexport * from './VerticalStackedBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './utilities/ChartHoverCard/index';\nexport * from './HeatMapChart';\nexport * from './SankeyChart';\nexport * from './Sparkline';\n\nimport './version';\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.10.
|
|
4
|
+
set_version_1.setVersion('@fluentui/react-charting', '5.10.1');
|
|
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.10.
|
|
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.10.1');"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components/Sparkline/index';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sparkline.js","sourceRoot":"../src/","sources":["Sparkline.ts"],"names":[],"mappings":";;;AAAA,uEAA6C","sourcesContent":["export * from './components/Sparkline/index';\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ILineChartDataPoint } from '../../types/IDataPoint';
|
|
3
|
+
import { ISparklineProps } from '../../index';
|
|
4
|
+
export interface ISparklineState {
|
|
5
|
+
_points: ILineChartDataPoint[] | null;
|
|
6
|
+
_width: number;
|
|
7
|
+
_height: number;
|
|
8
|
+
}
|
|
9
|
+
export declare class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {
|
|
10
|
+
private margin;
|
|
11
|
+
private x;
|
|
12
|
+
private y;
|
|
13
|
+
private area;
|
|
14
|
+
constructor(props: ISparklineProps);
|
|
15
|
+
componentDidMount(): void;
|
|
16
|
+
drawSparkline(): JSX.Element;
|
|
17
|
+
render(): JSX.Element;
|
|
18
|
+
}
|