@fluentui/react-charting 5.18.17 → 5.19.0
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 +37 -1
- package/CHANGELOG.md +21 -2
- package/dist/react-charting.d.ts +17 -6
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/etc/react-charting.api.md +3 -1
- package/lib/components/Legends/Legends.base.d.ts +1 -2
- package/lib/components/Legends/Legends.base.js +42 -24
- package/lib/components/Legends/Legends.base.js.map +1 -1
- package/lib/components/Legends/Legends.types.d.ts +17 -6
- package/lib/components/Legends/Legends.types.js.map +1 -1
- package/lib/components/Sparkline/Sparkline.base.d.ts +1 -0
- package/lib/components/Sparkline/Sparkline.base.js +3 -2
- package/lib/components/Sparkline/Sparkline.base.js.map +1 -1
- package/lib/version.js +1 -1
- package/lib/version.js.map +1 -1
- package/lib-amd/components/Legends/Legends.base.d.ts +1 -2
- package/lib-amd/components/Legends/Legends.base.js +42 -24
- package/lib-amd/components/Legends/Legends.base.js.map +1 -1
- package/lib-amd/components/Legends/Legends.types.d.ts +17 -6
- package/lib-amd/components/Legends/Legends.types.js.map +1 -1
- package/lib-amd/components/Sparkline/Sparkline.base.d.ts +1 -0
- package/lib-amd/components/Sparkline/Sparkline.base.js +2 -1
- package/lib-amd/components/Sparkline/Sparkline.base.js.map +1 -1
- package/lib-amd/version.js +1 -1
- package/lib-amd/version.js.map +1 -1
- package/lib-commonjs/components/Legends/Legends.base.d.ts +1 -2
- package/lib-commonjs/components/Legends/Legends.base.js +42 -24
- package/lib-commonjs/components/Legends/Legends.base.js.map +1 -1
- package/lib-commonjs/components/Legends/Legends.types.d.ts +17 -6
- package/lib-commonjs/components/Legends/Legends.types.js.map +1 -1
- package/lib-commonjs/components/Sparkline/Sparkline.base.d.ts +1 -0
- package/lib-commonjs/components/Sparkline/Sparkline.base.js +2 -1
- package/lib-commonjs/components/Sparkline/Sparkline.base.js.map +1 -1
- package/lib-commonjs/version.js +1 -1
- package/lib-commonjs/version.js.map +1 -1
- package/package.json +5 -5
- package/src/components/Legends/Legends.types.ts +20 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Legends.types.js","sourceRoot":"../src/","sources":["components/Legends/Legends.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IHoverCardStyleProps, IHoverCardStyles } from '@fluentui/react/lib/HoverCard';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\nexport interface ILegendOverflowData {\n primary: ILegend[];\n\n overflow?: ILegend[];\n}\n\n/**\n * @public\n * {@docCategory Legends}\n */\nexport interface ILegendSubComponentStyles {\n hoverCardStyles: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;\n}\n\n/**\n * @public\n * Legends styles\n * {@docCategory Legends}\n */\nexport interface ILegendsStyles {\n /**\n * Style set for the root of the legend component\n */\n root: IStyle;\n\n /**\n * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend\n */\n legend: IStyle;\n\n /**\n * Style set for the rectangle that represents a legend\n */\n rect: IStyle;\n\n /**\n * styles set for the shape that represents a legend\n */\n shape: IStyle;\n\n /**\n * Style set for the triangle that represents a legend\n */\n triangle: IStyle;\n\n /**\n * Style for the legend text\n */\n text: IStyle;\n\n /**\n * Style for the legend text\n */\n hoverChange: IStyle;\n\n /**\n * Style for the text that indicates the no.of legends that are in hovercard due to lack of space\n */\n overflowIndicationTextStyle: IStyle;\n\n /**\n * Style for the overflow container\n */\n hoverCardRoot: IStyle;\n\n /**\n * sub component styles\n */\n subComponentStyles: ILegendSubComponentStyles;\n}\n\n/**\n * @public\n * ILegend interface\n * {@docCategory Legends}\n */\nexport interface ILegend {\n /**\n * Defines the title of the legend\n */\n title: string;\n\n /**\n * Defines the function that is executed on clicking this legend\n */\n action?: VoidFunction;\n\n /**\n * Defines the function that is executed upon hovering over the legend\n */\n hoverAction?: VoidFunction;\n\n /**\n * Defines the function that is executed upon moving the mouse away from the legend\n */\n onMouseOutAction?: (isLegendFocused?: boolean) => void;\n\n /**\n * The color for the legend\n */\n color: string;\n\n /**\n * The opacity of the legend color\n */\n opacity?: number;\n\n /**\n * The shape for the legend\n */\n shape?: LegendShape;\n\n /**\n * Indicated whether or not to apply stripe pattern\n */\n stripePattern?: boolean;\n\n /**\n * Indicates if the legend belongs to a line in the Bar Chart\n */\n isLineLegendInBarChart?: boolean;\n\n /*\n * native button props for the legend button\n */\n nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\n/**\n * @public\n * Legend style properties\n * {@docCategory Legends}\n */\nexport interface ILegendStyleProps {\n theme?: ITheme;\n className?: string;\n colorOnSelectedState?: string;\n borderColor?: string;\n opacity?: number;\n overflow?: boolean;\n stripePattern?: boolean;\n isLineLegendInBarChart?: boolean;\n}\n\n/**\n * @public\n * Legend properties\n * {@docCategory Legends}\n */\nexport interface ILegendsProps {\n /**\n * Prop that takes list of legends\n */\n legends: ILegend[];\n\n /**\n * Additional CSS class(es) to apply to the legneds component.\n */\n className?: string;\n\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<ILegendStyleProps, ILegendsStyles>;\n\n /**\n * This prop makes the legends component align itself to the center in the container it is sitting in\n */\n centerLegends?: boolean;\n\n /**\n * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n */\n enabledWrapLines?: boolean;\n\n /**\n * props for the overflow set component\n */\n overflowProps?: Partial<IOverflowSetProps>;\n\n /**\n * focus zone props in hover card\n */\n focusZonePropsInHoverCard?: IFocusZoneProps;\n\n /**\n * text for overflow legends string\n */\n overflowText?: string;\n\n /**\n *
|
|
1
|
+
{"version":3,"file":"Legends.types.js","sourceRoot":"../src/","sources":["components/Legends/Legends.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IHoverCardStyleProps, IHoverCardStyles } from '@fluentui/react/lib/HoverCard';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\nexport interface ILegendOverflowData {\n primary: ILegend[];\n\n overflow?: ILegend[];\n}\n\n/**\n * @public\n * {@docCategory Legends}\n */\nexport interface ILegendSubComponentStyles {\n hoverCardStyles: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;\n}\n\n/**\n * @public\n * Legends styles\n * {@docCategory Legends}\n */\nexport interface ILegendsStyles {\n /**\n * Style set for the root of the legend component\n */\n root: IStyle;\n\n /**\n * Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend\n */\n legend: IStyle;\n\n /**\n * Style set for the rectangle that represents a legend\n */\n rect: IStyle;\n\n /**\n * styles set for the shape that represents a legend\n */\n shape: IStyle;\n\n /**\n * Style set for the triangle that represents a legend\n */\n triangle: IStyle;\n\n /**\n * Style for the legend text\n */\n text: IStyle;\n\n /**\n * Style for the legend text\n */\n hoverChange: IStyle;\n\n /**\n * Style for the text that indicates the no.of legends that are in hovercard due to lack of space\n */\n overflowIndicationTextStyle: IStyle;\n\n /**\n * Style for the overflow container\n */\n hoverCardRoot: IStyle;\n\n /**\n * sub component styles\n */\n subComponentStyles: ILegendSubComponentStyles;\n}\n\n/**\n * @public\n * ILegend interface\n * {@docCategory Legends}\n */\nexport interface ILegend {\n /**\n * Defines the title of the legend\n */\n title: string;\n\n /**\n * Defines the function that is executed on clicking this legend\n */\n action?: VoidFunction;\n\n /**\n * Defines the function that is executed upon hovering over the legend\n */\n hoverAction?: VoidFunction;\n\n /**\n * Defines the function that is executed upon moving the mouse away from the legend\n */\n onMouseOutAction?: (isLegendFocused?: boolean) => void;\n\n /**\n * The color for the legend\n */\n color: string;\n\n /**\n * The opacity of the legend color\n */\n opacity?: number;\n\n /**\n * The shape for the legend\n */\n shape?: LegendShape;\n\n /**\n * Indicated whether or not to apply stripe pattern\n */\n stripePattern?: boolean;\n\n /**\n * Indicates if the legend belongs to a line in the Bar Chart\n */\n isLineLegendInBarChart?: boolean;\n\n /*\n * native button props for the legend button\n */\n nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\n/**\n * @public\n * Legend style properties\n * {@docCategory Legends}\n */\nexport interface ILegendStyleProps {\n theme?: ITheme;\n className?: string;\n colorOnSelectedState?: string;\n borderColor?: string;\n opacity?: number;\n overflow?: boolean;\n stripePattern?: boolean;\n isLineLegendInBarChart?: boolean;\n}\n\n/**\n * @public\n * Legend properties\n * {@docCategory Legends}\n */\nexport interface ILegendsProps {\n /**\n * Prop that takes list of legends\n */\n legends: ILegend[];\n\n /**\n * Additional CSS class(es) to apply to the legneds component.\n */\n className?: string;\n\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<ILegendStyleProps, ILegendsStyles>;\n\n /**\n * This prop makes the legends component align itself to the center in the container it is sitting in\n */\n centerLegends?: boolean;\n\n /**\n * Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n */\n enabledWrapLines?: boolean;\n\n /**\n * props for the overflow set component\n */\n overflowProps?: Partial<IOverflowSetProps>;\n\n /**\n * focus zone props in hover card\n */\n focusZonePropsInHoverCard?: IFocusZoneProps;\n\n /**\n * text for overflow legends string\n */\n overflowText?: string;\n\n /**\n * prop that decides if legends are focusable\n * @default true\n */\n allowFocusOnLegends?: boolean;\n\n /**\n * prop that decide if we can select multiple legends or single legend at a time\n * @default false\n */\n canSelectMultipleLegends?: boolean;\n\n /**\n * Defines the function that is executed upon hiding of hover card\n * make sure to send prop when the prop is canSelectMultipleLegends is set to true\n * and empty the selected state legends\n */\n onLegendHoverCardLeave?: VoidFunction;\n\n /**\n * Callback issued when the selected option changes.\n */\n onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: ILegend) => void;\n\n /**\n * Keys (title) that will be initially used to set selected items.\n * This prop is used for multiSelect scenarios.\n * In other cases, defaultSelectedLegend should be used.\n */\n defaultSelectedLegends?: string[];\n\n /**\n * Key that will be initially used to set selected item.\n * This prop is used for singleSelect scenarios.\n */\n defaultSelectedLegend?: string;\n}\n\n/**\n * @public\n * The shape for the legend\n * default: show the rect legend\n * triangle: show the triangle legend\n * {@docCategory Legends}\n */\nexport type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints;\n"]}
|
|
@@ -14,6 +14,7 @@ export declare class SparklineBase extends React.Component<ISparklineProps, ISpa
|
|
|
14
14
|
private area;
|
|
15
15
|
private line;
|
|
16
16
|
private _emptyChartId;
|
|
17
|
+
private _isRTL;
|
|
17
18
|
constructor(props: ISparklineProps);
|
|
18
19
|
componentDidMount(): void;
|
|
19
20
|
drawSparkline(): JSX.Element;
|
|
@@ -19,6 +19,7 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
19
19
|
bottom: 0,
|
|
20
20
|
left: 0,
|
|
21
21
|
};
|
|
22
|
+
_this._isRTL = (0, Utilities_1.getRTL)();
|
|
22
23
|
_this.state = {
|
|
23
24
|
_points: null,
|
|
24
25
|
_width: _this.props.width || 80,
|
|
@@ -74,7 +75,7 @@ var SparklineBase = /** @class */ (function (_super) {
|
|
|
74
75
|
React.createElement("div", { className: classNames.inlineBlock },
|
|
75
76
|
this.state._width >= 50 && this.state._height >= 16 ? (React.createElement("svg", { width: this.state._width, height: this.state._height, "data-is-focusable": true }, this.state._points ? this.drawSparkline() : null)) : (React.createElement(React.Fragment, null)),
|
|
76
77
|
this.props.showLegend && this.props.data.lineChartData[0].legend ? (React.createElement("svg", { width: this.state._valueTextWidth, height: this.state._height, "data-is-focusable": true },
|
|
77
|
-
React.createElement("text", { x: "0%", dx: 8, y: "100%", dy: -5, className: classNames.valueText }, this.props.data.lineChartData[0].legend))) : (React.createElement(React.Fragment, null))))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
|
|
78
|
+
React.createElement("text", { x: "0%", textAnchor: this._isRTL ? 'end' : 'start', dx: 8, y: "100%", dy: -5, className: classNames.valueText }, this.props.data.lineChartData[0].legend))) : (React.createElement(React.Fragment, null))))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
|
|
78
79
|
};
|
|
79
80
|
SparklineBase.prototype._isChartEmpty = function () {
|
|
80
81
|
return !(this.props.data &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.base.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.base.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,qCAAwD;AACxD,qCAAwF;AACxF,qCAA4D;AAC5D,qDAAsE;AAEtE,
|
|
1
|
+
{"version":3,"file":"Sparkline.base.js","sourceRoot":"../src/","sources":["components/Sparkline/Sparkline.base.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,qCAAwD;AACxD,qCAAwF;AACxF,qCAA4D;AAC5D,qDAAsE;AAEtE,2DAAkF;AAGlF,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAA0C,CAAC;AASnF;IAAmC,yCAAiD;IAkBlF,uBAAY,KAAsB;QAAlC,YACE,kBAAM,KAAK,CAAC,SAQb;QA1BO,YAAM,GAAG;YACf,GAAG,EAAE,CAAC;YACN,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;SACR,CAAC;QAUM,YAAM,GAAY,IAAA,kBAAM,GAAE,CAAC;QAIjC,KAAI,CAAC,KAAK,GAAG;YACX,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,KAAI,CAAC,KAAK,CAAC,KAAM,IAAI,EAAE;YAC/B,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,MAAO,IAAI,EAAE;YACjC,eAAe,EAAE,KAAI,CAAC,KAAK,CAAC,cAAe,IAAI,EAAE;SAClD,CAAC;QACF,KAAI,CAAC,aAAa,GAAG,IAAA,iBAAK,EAAC,uBAAuB,CAAC,CAAC;;IACtD,CAAC;IAEM,yCAAiB,GAAxB;QAAA,iBAoCC;QAnCC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;YACzB,IAAM,IAAI,GAAG,IAAA,eAAM,GAAE;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,sBAAa,CAAC,CAAC;YACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YAEjB,IAAM,IAAI,GAAG,IAAA,eAAM,GAAE;gBACnB,uDAAuD;iBACtD,CAAC,CAAC,UAAC,CAAM,IAAK,OAAA,KAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAAC;gBAC3B,uDAAuD;iBACtD,CAAC,CAAC,UAAC,CAAM,IAAK,OAAA,KAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAX,CAAW,CAAC;iBAC1B,KAAK,CAAC,sBAAa,CAAC,CAAC;YACxB,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,IAAA,iBAAQ,EAAC,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,IAAA,sBAAa,GAAE;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,IAAA,sBAAa,GAAE;gBACtB,uDAAuD;iBACtD,MAAM,CAAC,CAAC,CAAC,EAAE,IAAA,cAAK,EAAC,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;SACJ;IACH,CAAC;IAEM,qCAAa,GAApB;QACE,OAAO,CACL;YACE,8BACE,SAAS,EAAC,MAAM,EAChB,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAChC,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,CAAC,EACV,WAAW,EAAE,CAAC,EACd,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,KAAM,GACjD;YACF,8BACE,SAAS,EAAC,MAAM,EAChB,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAChC,OAAO,EAAE,CAAC,EACV,WAAW,EAAE,GAAG,EAChB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,KAAM,gBACnC,+BAAwB,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAO,CAAE,GAChF,CACD,CACJ,CAAC;IACJ,CAAC;IAEM,8BAAM,GAAb;QACE,IAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,MAAO,EAAE;YACnD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;SACzB,CAAC,CAAC;QACH,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAC7B,oBAAC,uBAAS,IACR,SAAS,EAAE,gCAAkB,CAAC,UAAU,EACxC,oBAAoB,EAAE,IAAI,EAC1B,SAAS,EAAE,UAAU,CAAC,WAAW;YAEjC,6BAAK,SAAS,EAAE,UAAU,CAAC,WAAW;gBACnC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,CAAC,CACrD,6BAAK,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,uBAAqB,IAAI,IAC/E,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAC7C,CACP,CAAC,CAAC,CAAC,CACF,yCAAK,CACN;gBACA,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CACpE,6BAAK,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,uBAAqB,IAAI;oBACzF,8BACE,CAAC,EAAC,IAAI,EACN,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EACzC,EAAE,EAAE,CAAC,EACL,CAAC,EAAC,MAAM,EACR,EAAE,EAAE,CAAC,CAAC,EACN,SAAS,EAAE,UAAU,CAAC,SAAS,IAE9B,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,aAAc,CAAC,CAAC,CAAC,CAAC,MAAO,CACtC,CACH,CACP,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CACG,CACI,CACb,CAAC,CAAC,CAAC,CACF,6BACE,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,gBACX,8BAA8B,GAC1C,CACH,CAAC;IACJ,CAAC;IAEO,qCAAa,GAArB;QACE,OAAO,CAAC,CACN,IAAI,CAAC,KAAK,CAAC,IAAI;YACf,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa;YAC7B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;YACxC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAtB,CAAsB,CAAC,CAAC,MAAM,KAAK,CAAC,CAClF,CAAC;IACJ,CAAC;IACH,oBAAC;AAAD,CAAC,AAhJD,CAAmC,KAAK,CAAC,SAAS,GAgJjD;AAhJY,sCAAa","sourcesContent":["import * as React from 'react';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ILineChartDataPoint } from '../../types/IDataPoint';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { ISparklineProps, ISparklineStyleProps, ISparklineStyles } from '../../index';\n\nconst getClassNames = classNamesFunction<ISparklineStyleProps, ISparklineStyles>();\n\nexport interface ISparklineState {\n _points: ILineChartDataPoint[] | null;\n _width: number;\n _height: number;\n _valueTextWidth: number;\n}\n\nexport class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {\n private margin = {\n top: 2,\n right: 0,\n bottom: 0,\n left: 0,\n };\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n private x: any;\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n private y: any;\n private area: any;\n private line: any;\n private _emptyChartId: string;\n private _isRTL: boolean = getRTL();\n\n constructor(props: ISparklineProps) {\n super(props);\n this.state = {\n _points: null,\n _width: this.props.width! || 80,\n _height: this.props.height! || 20,\n _valueTextWidth: this.props.valueTextWidth! || 80,\n };\n this._emptyChartId = getId('_SparklineChart_empty');\n }\n\n public componentDidMount() {\n if (!this._isChartEmpty()) {\n const area = d3Area()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .x((d: any) => this.x(d.x))\n .y0(this.state._height)\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .y1((d: any) => this.y(d.y))\n .curve(d3curveLinear);\n this.area = area;\n\n const line = d3Line()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .x((d: any) => this.x(d.x))\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .y((d: any) => this.y(d.y))\n .curve(d3curveLinear);\n this.line = line;\n\n const points = this.props.data!.lineChartData![0].data;\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n const [xMin, xMax] = d3Extent(points, (d: any) => d.x);\n\n this.x = d3ScaleLinear()\n .domain([xMin, xMax])\n .range([this.margin.left!, this.state._width - this.margin.right!]);\n this.y = d3ScaleLinear()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .domain([0, d3Max(points, (d: any) => d.y)])\n .range([this.state._height - this.margin.bottom!, this.margin.top!]);\n\n this.setState({\n _points: points,\n });\n }\n }\n\n public drawSparkline() {\n return (\n <>\n <path\n className=\"line\"\n d={this.line(this.state._points)}\n fill={'transparent'}\n opacity={1}\n strokeWidth={2}\n stroke={this.props.data!.lineChartData![0].color!}\n />\n <path\n className=\"area\"\n d={this.area(this.state._points)}\n opacity={1}\n fillOpacity={0.2}\n fill={this.props.data!.lineChartData![0].color!}\n aria-label={`Sparkline with label ${this.props.data!.lineChartData![0].legend!}`}\n />\n </>\n );\n }\n\n public render() {\n const classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n });\n return !this._isChartEmpty() ? (\n <FocusZone\n direction={FocusZoneDirection.horizontal}\n isCircularNavigation={true}\n className={classNames.inlineBlock}\n >\n <div className={classNames.inlineBlock}>\n {this.state._width >= 50 && this.state._height >= 16 ? (\n <svg width={this.state._width} height={this.state._height} data-is-focusable={true}>\n {this.state._points ? this.drawSparkline() : null}\n </svg>\n ) : (\n <></>\n )}\n {this.props.showLegend && this.props.data!.lineChartData![0].legend ? (\n <svg width={this.state._valueTextWidth} height={this.state._height} data-is-focusable={true}>\n <text\n x=\"0%\"\n textAnchor={this._isRTL ? 'end' : 'start'}\n dx={8}\n y=\"100%\"\n dy={-5}\n className={classNames.valueText}\n >\n {this.props.data!.lineChartData![0].legend!}\n </text>\n </svg>\n ) : (\n <></>\n )}\n </div>\n </FocusZone>\n ) : (\n <div\n id={this._emptyChartId}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n private _isChartEmpty(): boolean {\n return !(\n this.props.data &&\n this.props.data.lineChartData &&\n this.props.data.lineChartData.length > 0 &&\n this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0\n );\n }\n}\n"]}
|
package/lib-commonjs/version.js
CHANGED
|
@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
// Do not modify this file; it is generated as part of publish.
|
|
4
4
|
// The checked in version is a placeholder only and will not be updated.
|
|
5
5
|
var set_version_1 = require("@fluentui/set-version");
|
|
6
|
-
(0, set_version_1.setVersion)('@fluentui/react-charting', '5.
|
|
6
|
+
(0, set_version_1.setVersion)('@fluentui/react-charting', '5.19.0');
|
|
7
7
|
//# sourceMappingURL=version.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,IAAA,wBAAU,EAAC,0BAA0B,EAAE,
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,IAAA,wBAAU,EAAC,0BAA0B,EAAE,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.19.0');"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-charting",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.19.0",
|
|
4
4
|
"description": "Experimental React charting components for building experiences for Microsoft 365.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@fluentui/react-focus": "^8.8.34",
|
|
42
42
|
"@fluentui/theme-samples": "^8.7.122",
|
|
43
43
|
"@microsoft/load-themed-styles": "^1.10.26",
|
|
44
|
-
"@types/d3-array": "
|
|
44
|
+
"@types/d3-array": "2.12.1",
|
|
45
45
|
"@types/d3-axis": "1.0.10",
|
|
46
46
|
"@types/d3-format": "^1.3.1",
|
|
47
47
|
"@types/d3-hierarchy": "2.0.0",
|
|
@@ -50,9 +50,9 @@
|
|
|
50
50
|
"@types/d3-selection": "1.4.1",
|
|
51
51
|
"@types/d3-shape": "3.1.1",
|
|
52
52
|
"@types/d3-time-format": "^2.1.0",
|
|
53
|
-
"@types/d3-time": "^1.1
|
|
53
|
+
"@types/d3-time": "^2.1.1",
|
|
54
54
|
"@fluentui/set-version": "^8.2.12",
|
|
55
|
-
"d3-array": "
|
|
55
|
+
"d3-array": "2.12.1",
|
|
56
56
|
"d3-axis": "1.0.8",
|
|
57
57
|
"d3-format": "^1.4.4",
|
|
58
58
|
"d3-hierarchy": "2.0.0",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"d3-selection": "1.3.0",
|
|
62
62
|
"d3-shape": "3.2.0",
|
|
63
63
|
"d3-time-format": "^2.1.3",
|
|
64
|
-
"d3-time": "^1.1
|
|
64
|
+
"d3-time": "^2.1.1",
|
|
65
65
|
"tslib": "^2.1.0"
|
|
66
66
|
},
|
|
67
67
|
"peerDependencies": {
|
|
@@ -201,11 +201,6 @@ export interface ILegendsProps {
|
|
|
201
201
|
*/
|
|
202
202
|
overflowText?: string;
|
|
203
203
|
|
|
204
|
-
/**
|
|
205
|
-
* Prop that takes the active legend
|
|
206
|
-
*/
|
|
207
|
-
selectedLegend?: string;
|
|
208
|
-
|
|
209
204
|
/**
|
|
210
205
|
* prop that decides if legends are focusable
|
|
211
206
|
* @default true
|
|
@@ -220,10 +215,28 @@ export interface ILegendsProps {
|
|
|
220
215
|
|
|
221
216
|
/**
|
|
222
217
|
* Defines the function that is executed upon hiding of hover card
|
|
223
|
-
* make sure to send prop when the prop is canSelectMultipleLegends is set to
|
|
224
|
-
* and empty the
|
|
218
|
+
* make sure to send prop when the prop is canSelectMultipleLegends is set to true
|
|
219
|
+
* and empty the selected state legends
|
|
225
220
|
*/
|
|
226
221
|
onLegendHoverCardLeave?: VoidFunction;
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* Callback issued when the selected option changes.
|
|
225
|
+
*/
|
|
226
|
+
onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: ILegend) => void;
|
|
227
|
+
|
|
228
|
+
/**
|
|
229
|
+
* Keys (title) that will be initially used to set selected items.
|
|
230
|
+
* This prop is used for multiSelect scenarios.
|
|
231
|
+
* In other cases, defaultSelectedLegend should be used.
|
|
232
|
+
*/
|
|
233
|
+
defaultSelectedLegends?: string[];
|
|
234
|
+
|
|
235
|
+
/**
|
|
236
|
+
* Key that will be initially used to set selected item.
|
|
237
|
+
* This prop is used for singleSelect scenarios.
|
|
238
|
+
*/
|
|
239
|
+
defaultSelectedLegend?: string;
|
|
227
240
|
}
|
|
228
241
|
|
|
229
242
|
/**
|