@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.
Files changed (75) hide show
  1. package/CHANGELOG.json +22 -1
  2. package/CHANGELOG.md +12 -2
  3. package/dist/react-charting.js +1 -1
  4. package/dist/react-charting.min.js +1 -1
  5. package/lib/Sparkline.d.ts +1 -0
  6. package/lib/Sparkline.js +2 -0
  7. package/lib/Sparkline.js.map +1 -0
  8. package/lib/components/Sparkline/Sparkline.base.d.ts +18 -0
  9. package/lib/components/Sparkline/Sparkline.base.js +65 -0
  10. package/lib/components/Sparkline/Sparkline.base.js.map +1 -0
  11. package/lib/components/Sparkline/Sparkline.d.ts +3 -0
  12. package/lib/components/Sparkline/Sparkline.js +6 -0
  13. package/lib/components/Sparkline/Sparkline.js.map +1 -0
  14. package/lib/components/Sparkline/Sparkline.styles.d.ts +2 -0
  15. package/lib/components/Sparkline/Sparkline.styles.js +10 -0
  16. package/lib/components/Sparkline/Sparkline.styles.js.map +1 -0
  17. package/lib/components/Sparkline/Sparkline.types.d.ts +46 -0
  18. package/lib/components/Sparkline/Sparkline.types.js +2 -0
  19. package/lib/components/Sparkline/Sparkline.types.js.map +1 -0
  20. package/lib/components/Sparkline/index.d.ts +2 -0
  21. package/lib/components/Sparkline/index.js +3 -0
  22. package/lib/components/Sparkline/index.js.map +1 -0
  23. package/lib/index.d.ts +1 -0
  24. package/lib/index.js +1 -0
  25. package/lib/index.js.map +1 -1
  26. package/lib/version.js +1 -1
  27. package/lib/version.js.map +1 -1
  28. package/lib-amd/Sparkline.d.ts +1 -0
  29. package/lib-amd/Sparkline.js +6 -0
  30. package/lib-amd/Sparkline.js.map +1 -0
  31. package/lib-amd/components/Sparkline/Sparkline.base.d.ts +18 -0
  32. package/lib-amd/components/Sparkline/Sparkline.base.js +63 -0
  33. package/lib-amd/components/Sparkline/Sparkline.base.js.map +1 -0
  34. package/lib-amd/components/Sparkline/Sparkline.d.ts +3 -0
  35. package/lib-amd/components/Sparkline/Sparkline.js +8 -0
  36. package/lib-amd/components/Sparkline/Sparkline.js.map +1 -0
  37. package/lib-amd/components/Sparkline/Sparkline.styles.d.ts +2 -0
  38. package/lib-amd/components/Sparkline/Sparkline.styles.js +15 -0
  39. package/lib-amd/components/Sparkline/Sparkline.styles.js.map +1 -0
  40. package/lib-amd/components/Sparkline/Sparkline.types.d.ts +46 -0
  41. package/lib-amd/components/Sparkline/Sparkline.types.js +5 -0
  42. package/lib-amd/components/Sparkline/Sparkline.types.js.map +1 -0
  43. package/lib-amd/components/Sparkline/index.d.ts +2 -0
  44. package/lib-amd/components/Sparkline/index.js +7 -0
  45. package/lib-amd/components/Sparkline/index.js.map +1 -0
  46. package/lib-amd/index.d.ts +1 -0
  47. package/lib-amd/index.js +2 -1
  48. package/lib-amd/index.js.map +1 -1
  49. package/lib-amd/version.js +1 -1
  50. package/lib-amd/version.js.map +1 -1
  51. package/lib-commonjs/Sparkline.d.ts +1 -0
  52. package/lib-commonjs/Sparkline.js +5 -0
  53. package/lib-commonjs/Sparkline.js.map +1 -0
  54. package/lib-commonjs/components/Sparkline/Sparkline.base.d.ts +18 -0
  55. package/lib-commonjs/components/Sparkline/Sparkline.base.js +68 -0
  56. package/lib-commonjs/components/Sparkline/Sparkline.base.js.map +1 -0
  57. package/lib-commonjs/components/Sparkline/Sparkline.d.ts +3 -0
  58. package/lib-commonjs/components/Sparkline/Sparkline.js +9 -0
  59. package/lib-commonjs/components/Sparkline/Sparkline.js.map +1 -0
  60. package/lib-commonjs/components/Sparkline/Sparkline.styles.d.ts +2 -0
  61. package/lib-commonjs/components/Sparkline/Sparkline.styles.js +14 -0
  62. package/lib-commonjs/components/Sparkline/Sparkline.styles.js.map +1 -0
  63. package/lib-commonjs/components/Sparkline/Sparkline.types.d.ts +46 -0
  64. package/lib-commonjs/components/Sparkline/Sparkline.types.js +3 -0
  65. package/lib-commonjs/components/Sparkline/Sparkline.types.js.map +1 -0
  66. package/lib-commonjs/components/Sparkline/index.d.ts +2 -0
  67. package/lib-commonjs/components/Sparkline/index.js +6 -0
  68. package/lib-commonjs/components/Sparkline/index.js.map +1 -0
  69. package/lib-commonjs/index.d.ts +1 -0
  70. package/lib-commonjs/index.js +1 -0
  71. package/lib-commonjs/index.js.map +1 -1
  72. package/lib-commonjs/version.js +1 -1
  73. package/lib-commonjs/version.js.map +1 -1
  74. package/package.json +3 -3
  75. package/src/components/Sparkline/Sparkline.types.ts +55 -0
@@ -0,0 +1 @@
1
+ export * from './components/Sparkline/index';
@@ -0,0 +1,2 @@
1
+ export * from './components/Sparkline/index';
2
+ //# sourceMappingURL=Sparkline.js.map
@@ -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":"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","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,3 @@
1
+ import * as React from 'react';
2
+ import { ISparklineProps } from '../../index';
3
+ export declare const Sparkline: React.FunctionComponent<ISparklineProps>;
@@ -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,2 @@
1
+ import { ISparklineStyleProps, ISparklineStyles } from './Sparkline.types';
2
+ export declare const getStyles: (props: ISparklineStyleProps) => ISparklineStyles;
@@ -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,2 @@
1
+ export {};
2
+ //# sourceMappingURL=Sparkline.types.js.map
@@ -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,2 @@
1
+ export * from './Sparkline';
2
+ export * from './Sparkline.types';
@@ -0,0 +1,3 @@
1
+ export * from './Sparkline';
2
+ export * from './Sparkline.types';
3
+ //# sourceMappingURL=index.js.map
@@ -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
@@ -13,4 +13,5 @@ export * from './types/index';
13
13
  export * from './utilities/ChartHoverCard/index';
14
14
  export * from './HeatMapChart';
15
15
  export * from './SankeyChart';
16
+ export * from './Sparkline';
16
17
  import './version';
package/lib/index.js CHANGED
@@ -13,5 +13,6 @@ export * from './types/index';
13
13
  export * from './utilities/ChartHoverCard/index';
14
14
  export * from './HeatMapChart';
15
15
  export * from './SankeyChart';
16
+ export * from './Sparkline';
16
17
  import './version';
17
18
  //# sourceMappingURL=index.js.map
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;AAE9B,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';\n\nimport './version';\n"]}
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.0');
4
+ setVersion('@fluentui/react-charting', '5.10.1');
5
5
  //# 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,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.0');"]}
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,3 @@
1
+ import * as React from 'react';
2
+ import { ISparklineProps } from '../../index';
3
+ export declare const Sparkline: React.FunctionComponent<ISparklineProps>;
@@ -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,2 @@
1
+ import { ISparklineStyleProps, ISparklineStyles } from './Sparkline.types';
2
+ export declare const getStyles: (props: ISparklineStyleProps) => ISparklineStyles;
@@ -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,5 @@
1
+ define(["require", "exports"], function (require, exports) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ });
5
+ //# sourceMappingURL=Sparkline.types.js.map
@@ -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,2 @@
1
+ export * from './Sparkline';
2
+ export * from './Sparkline.types';
@@ -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"]}
@@ -13,4 +13,5 @@ export * from './types/index';
13
13
  export * from './utilities/ChartHoverCard/index';
14
14
  export * from './HeatMapChart';
15
15
  export * from './SankeyChart';
16
+ export * from './Sparkline';
16
17
  import './version';
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
@@ -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"]}
@@ -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.0');
4
+ set_version_1.setVersion('@fluentui/react-charting', '5.10.1');
5
5
  });
6
6
  //# sourceMappingURL=version.js.map
@@ -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.0');"]}
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,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./components/Sparkline/index"), exports);
5
+ //# sourceMappingURL=Sparkline.js.map
@@ -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
+ }