@fluentui/react-charting 5.24.21 → 5.24.23
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 +55 -1
- package/CHANGELOG.md +24 -2
- package/bundle-size/ScatterChart.fixture.js +7 -0
- package/dist/react-charting.d.ts +29 -4
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/etc/react-charting.api.md +10 -4
- package/lib/components/AreaChart/AreaChart.base.js +3 -3
- package/lib/components/AreaChart/AreaChart.base.js.map +1 -1
- package/lib/components/CommonComponents/CartesianChart.base.js +4 -4
- package/lib/components/CommonComponents/CartesianChart.base.js.map +1 -1
- package/lib/components/CommonComponents/CartesianChart.types.d.ts +18 -3
- package/lib/components/CommonComponents/CartesianChart.types.js.map +1 -1
- package/lib/components/DeclarativeChart/DeclarativeChart.js +2 -1
- package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +10 -0
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +187 -11
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/HeatMapChart/HeatMapChart.base.js +1 -1
- package/lib/components/HeatMapChart/HeatMapChart.base.js.map +1 -1
- package/lib/components/HeatMapChart/HeatMapChart.styles.js +1 -8
- package/lib/components/HeatMapChart/HeatMapChart.styles.js.map +1 -1
- package/lib/components/HeatMapChart/HeatMapChart.types.d.ts +2 -2
- package/lib/components/HeatMapChart/HeatMapChart.types.js.map +1 -1
- package/lib/components/LineChart/LineChart.base.d.ts +0 -9
- package/lib/components/LineChart/LineChart.base.js +82 -138
- package/lib/components/LineChart/LineChart.base.js.map +1 -1
- package/lib/components/ScatterChart/ScatterChart.base.js +37 -62
- package/lib/components/ScatterChart/ScatterChart.base.js.map +1 -1
- package/lib/components/VerticalBarChart/VerticalBarChart.base.js +2 -2
- package/lib/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +2 -2
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.js.map +1 -1
- package/lib/types/IDataPoint.d.ts +9 -0
- package/lib/types/IDataPoint.js.map +1 -1
- package/lib/utilities/utilities.d.ts +29 -28
- package/lib/utilities/utilities.js +127 -110
- package/lib/utilities/utilities.js.map +1 -1
- package/lib-amd/components/AreaChart/AreaChart.base.js +2 -2
- package/lib-amd/components/AreaChart/AreaChart.base.js.map +1 -1
- package/lib-amd/components/CommonComponents/CartesianChart.base.js +4 -4
- package/lib-amd/components/CommonComponents/CartesianChart.base.js.map +1 -1
- package/lib-amd/components/CommonComponents/CartesianChart.types.d.ts +18 -3
- package/lib-amd/components/CommonComponents/CartesianChart.types.js.map +1 -1
- package/lib-amd/components/DeclarativeChart/DeclarativeChart.js +2 -1
- package/lib-amd/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +10 -0
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +188 -11
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-amd/components/HeatMapChart/HeatMapChart.base.js +1 -1
- package/lib-amd/components/HeatMapChart/HeatMapChart.base.js.map +1 -1
- package/lib-amd/components/HeatMapChart/HeatMapChart.styles.js +1 -8
- package/lib-amd/components/HeatMapChart/HeatMapChart.styles.js.map +1 -1
- package/lib-amd/components/HeatMapChart/HeatMapChart.types.d.ts +2 -2
- package/lib-amd/components/HeatMapChart/HeatMapChart.types.js.map +1 -1
- package/lib-amd/components/LineChart/LineChart.base.d.ts +0 -9
- package/lib-amd/components/LineChart/LineChart.base.js +80 -136
- package/lib-amd/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-amd/components/ScatterChart/ScatterChart.base.js +35 -60
- package/lib-amd/components/ScatterChart/ScatterChart.base.js.map +1 -1
- package/lib-amd/components/VerticalBarChart/VerticalBarChart.base.js +1 -1
- package/lib-amd/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
- package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +1 -1
- package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
- package/lib-amd/index.d.ts +1 -1
- package/lib-amd/index.js.map +1 -1
- package/lib-amd/types/IDataPoint.d.ts +9 -0
- package/lib-amd/types/IDataPoint.js.map +1 -1
- package/lib-amd/utilities/utilities.d.ts +29 -28
- package/lib-amd/utilities/utilities.js +133 -113
- package/lib-amd/utilities/utilities.js.map +1 -1
- package/lib-commonjs/components/AreaChart/AreaChart.base.js +2 -2
- package/lib-commonjs/components/AreaChart/AreaChart.base.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.base.js +4 -4
- package/lib-commonjs/components/CommonComponents/CartesianChart.base.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.types.d.ts +18 -3
- package/lib-commonjs/components/CommonComponents/CartesianChart.types.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +2 -1
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +10 -0
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +188 -11
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/HeatMapChart/HeatMapChart.base.js +1 -1
- package/lib-commonjs/components/HeatMapChart/HeatMapChart.base.js.map +1 -1
- package/lib-commonjs/components/HeatMapChart/HeatMapChart.styles.js +1 -8
- package/lib-commonjs/components/HeatMapChart/HeatMapChart.styles.js.map +1 -1
- package/lib-commonjs/components/HeatMapChart/HeatMapChart.types.d.ts +2 -2
- package/lib-commonjs/components/HeatMapChart/HeatMapChart.types.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.base.d.ts +0 -9
- package/lib-commonjs/components/LineChart/LineChart.base.js +80 -136
- package/lib-commonjs/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-commonjs/components/ScatterChart/ScatterChart.base.js +35 -60
- package/lib-commonjs/components/ScatterChart/ScatterChart.base.js.map +1 -1
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.base.js +1 -1
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +1 -1
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
- package/lib-commonjs/index.d.ts +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/types/IDataPoint.d.ts +9 -0
- package/lib-commonjs/types/IDataPoint.js.map +1 -1
- package/lib-commonjs/utilities/utilities.d.ts +29 -28
- package/lib-commonjs/utilities/utilities.js +134 -114
- package/lib-commonjs/utilities/utilities.js.map +1 -1
- package/package.json +4 -4
- package/src/components/CommonComponents/CartesianChart.types.ts +22 -2
- package/src/components/HeatMapChart/HeatMapChart.types.ts +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IDataPoint.js","sourceRoot":"../src/","sources":["types/IDataPoint.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SankeyLink, SankeyNode } from 'd3-sankey';\nimport { LegendShape } from '../components/Legends/Legends.types';\nimport { CurveFactory } from 'd3-shape';\n\nexport interface IBasestate {\n _width?: number;\n _height?: number;\n activeLegend?: string;\n color?: string;\n dataForHoverCard?: number | string;\n isCalloutVisible: boolean;\n isLegendSelected?: boolean;\n isLegendHovered?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n refSelected?: any;\n YValueHover?: { legend?: string; y?: number | string; color?: string }[];\n hoverYValue?: string | number | null;\n hoverXValue?: string | number | null;\n xCalloutValue?: string;\n yCalloutValue?: string;\n lineColor?: string;\n hoveredLineColor?: string;\n selectedLegend?: string;\n containerWidth?: number;\n containerHeight?: number;\n}\n\nexport interface IRefArrayData {\n index?: string;\n refElement?: SVGGElement;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IMargins {\n /**\n * left margin for the chart.\n */\n left?: number;\n /**\n * Right margin for the chart.\n */\n right?: number;\n /**\n * Top margin for the chart.\n */\n top?: number;\n /**\n * Bottom margin for the chart.\n */\n bottom?: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n */\n x: number | string;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n\n // NOTE: VerticalStackedBarChart, PieChart\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalStackedBarDataPoint extends Omit<IDataPoint, 'x'> {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n * If data type on x is Date, then the data is spaced evenly by d3-scale.\n */\n x: number | string | Date;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n */\n x: number;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IChartDataPoint {\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * data the datapoint in the chart\n */\n data?: number;\n\n /**\n * data the datapoint in the chart\n */\n horizontalBarChartdata?: IHorizontalDataPoint;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n */\n color?: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * placeholder data point\n */\n placeHolder?: boolean;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven;t given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalBarChartDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n */\n x: number | string | Date;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven;t given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * data to render the line along with bars\n */\n lineData?: ILineDataInVerticalBarChart;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalBarChartWithAxisDataPoint {\n /**\n * Dependent value of the data point, rendered along the x-axis.\n */\n x: number;\n\n /**\n * Independent value of the data point, rendered along the y-axis.\n * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n * If y is a string, then the data is evenly spaced along the y-axis.\n */\n y: number | string;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven;t given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalBarChart {\n y: IVerticalBarChartDataPoint['y'];\n yAxisCalloutData?: string | undefined;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IBaseDataPoint {\n /**\n * Defines the function that is executed on clicking line\n */\n onDataPointClick?: () => void;\n\n /**\n * Callout data for x axis\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n */\n yAxisCalloutData?: string | { [id: string]: number };\n\n /**\n * Whether to hide callout data for the point.\n */\n hideCallout?: boolean;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n\n /**\n * X axis Accessibility data for callout\n */\n xAxisCalloutAccessibilityData?: IAccessibilityProps;\n\n /**\n * Marker size of the points\n */\n markerSize?: number;\n\n /**\n * text labels of marker points\n */\n text?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartDataPoint extends IBaseDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If data type on x is Date, then the data is spaced evenly by d3-scale\n */\n x: number | Date;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartGap {\n /**\n * Starting index of the gap.\n */\n startIndex: number;\n\n /**\n * Ending index of the gap.\n */\n endIndex: number;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface ILineChartLineOptions extends React.SVGProps<SVGPathElement> {\n /**\n * Width of the line/stroke.\n * Overrides the strokeWidth set on ICartesianChartProps level.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n */\n strokeWidth?: number | string;\n\n /**\n * Pattern of dashes and gaps.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n */\n strokeDasharray?: string | number;\n\n /**\n * Offset on rendering of stroke dash array.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n */\n strokeDashoffset?: string | number;\n\n /**\n * Shape at the end of a subpath.\n * Default round.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n */\n strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n /**\n * Width of border around the line. Default no border.\n */\n lineBorderWidth?: string | number;\n\n /**\n * Color of border around the line. Default white.\n */\n lineBorderColor?: string;\n\n /**\n * Defines the type of interpolation used to render the line.\n * @default 'linear'\n */\n curve?: 'linear' | 'natural' | 'step' | 'stepAfter' | 'stepBefore' | CurveFactory;\n\n /**\n * Defines the mode of points to be rendered.\n */\n mode?:\n | 'lines'\n | 'markers'\n | 'text'\n | 'lines+markers'\n | 'text+markers'\n | 'text+lines'\n | 'text+lines+markers'\n | 'none'\n | 'gauge'\n | 'number'\n | 'delta'\n | 'number+delta'\n | 'gauge+number'\n | 'gauge+number+delta'\n | 'gauge+delta'\n | 'markers+text'\n | 'lines+text'\n | 'lines+markers+text';\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartPoints {\n /**\n * Legend text for the datapoint in the chart\n */\n legend: string;\n\n /**\n * The shape for the legend\n * default: show the rect legend\n */\n legendShape?: LegendShape;\n\n /**\n * dataPoints for the line chart\n */\n data: ILineChartDataPoint[];\n\n /**\n * gaps in the line chart where a line is not drawn\n */\n gaps?: ILineChartGap[];\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * opacity for chart fill color\n */\n opacity?: number;\n\n /**\n * options for the line drawn\n */\n lineOptions?: ILineChartLineOptions;\n\n /**\n * hide dots for points that are not active\n */\n hideNonActiveDots?: boolean;\n\n /**\n * Defines the function that is executed on clicking this legend\n */\n onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n /**\n * Defines the function that is executed on clicking line\n */\n onLineClick?: () => void;\n\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IChartProps {\n /**\n * chart title for the chart\n */\n chartTitle?: string;\n\n /**\n * Accessibility data for chart title\n */\n chartTitleAccessibilityData?: IAccessibilityProps;\n /**\n * data for the points in the chart\n */\n chartData?: IChartDataPoint[];\n\n /**\n * Accessibility data for chart data\n */\n chartDataAccessibilityData?: IAccessibilityProps;\n\n /**\n * data for the points in the line chart\n */\n lineChartData?: ILineChartPoints[];\n\n /**\n * data for the points in the scatter chart\n */\n scatterChartData?: IScatterChartPoints[];\n\n /**\n * data for the points in the line chart\n */\n SankeyChartData?: ISankeyChartData;\n\n /**\n * data for the points in the line chart\n */\n pointOptions?: React.SVGProps<SVGCircleElement>;\n\n /**\n * data for the dotted line on hovering the point\n */\n pointLineOptions?: React.SVGProps<SVGLineElement>;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ISankeyChartData {\n nodes: SNode[];\n links: SLink[];\n}\n\ninterface ISNodeExtra {\n /**\n * A unique identifier for this node.\n */\n nodeId: number | string;\n /**\n * The display name for this node in the UX.\n */\n name: string;\n color?: string;\n borderColor?: string;\n actualValue?: number;\n layer?: number;\n}\n\ninterface ISLinkExtra {\n /**\n * The index within `ISankeyChartData.nodes` of the source node.\n */\n source: number;\n /**\n * The index within `ISankeyChartData.nodes` of the target node.\n */\n target: number;\n /**\n * The weight of this link between the two nodes.\n */\n value: number;\n unnormalizedValue?: number;\n}\n\nexport type SNode = SankeyNode<ISNodeExtra, ISLinkExtra>;\nexport type SLink = SankeyLink<ISNodeExtra, ISLinkExtra>;\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IAccessibilityProps {\n /**\n * Accessibility aria-label\n */\n ariaLabel?: string;\n\n /**\n * Accessibility aria-labelledBy\n */\n ariaLabelledBy?: string;\n\n /**\n * Accessibility aria-describedBy\n */\n ariaDescribedBy?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVSChartDataPoint {\n /**\n * data the datapoint in the chart\n */\n data: number | string;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven;t given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IVerticalStackedChartProps {\n /**\n * data for the points in the chart\n */\n chartData: IVSChartDataPoint[];\n\n /**\n * Data for x axis label for multistacked Vertical bar chart\n */\n xAxisPoint: number | string | Date;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given, legend will take\n */\n xAxisCalloutData?: string;\n /**\n * line data to render lines on stacked bar chart\n */\n lineData?: ILineDataInVerticalStackedBarChart[];\n /**\n * Accessibility data for Whole stack callout\n */\n stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalStackedBarChart {\n y: number | string;\n color: string;\n legend: string;\n /**\n * The shape for the legend\n * default: show the rect legend\n */\n legendShape?: LegendShape;\n /**\n * Data to show in callout\n */\n data?: number | string;\n yAxisCalloutData?: string;\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n /**\n * options for the line drawn\n */\n lineOptions?: ILineChartLineOptions;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGVBarChartSeriesPoint {\n /**\n * Text for // need to check use of this\n */\n key: string;\n\n /**\n * Data for bar height of Grouped vertical bar chart\n */\n data: number;\n\n /**\n * Color for the legend in the chart\n */\n color: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * Legend text in the chart\n */\n legend: string;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven;t given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGroupedVerticalBarChartData {\n /**\n * Data for X axis label\n */\n name: string;\n\n /**\n * Data points for Grouped vertical bar chart\n */\n series: IGVBarChartSeriesPoint[];\n\n /**\n * Accessibility data for Group Bars Stack Callout\n */\n stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IGVDataPoint {\n /**\n * This interface used for - While forming datapoints from given prop \"data\" in code\n * datapoints are used for to draw graph\n */\n [key: string]: number | string;\n}\n\nexport interface IGVSingleDataPoint {\n /**\n * While forming datapoints from given prop \"data\" in code.\n * These datapoints are used for to draw graph easily.\n */\n [key: string]: IGVDataPoint;\n}\n\nexport interface IGVForBarChart {\n /**\n * While forming datapoints from given prop \"data\"\n * These datapoints are used for to draw graph.\n */\n [key: string]: IGVBarChartSeriesPoint;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartDataPoint {\n x: string | Date | number;\n y: string | Date | number;\n value: number;\n /**\n * The value/ text to be rendered in the rectange\n */\n rectText?: string | number;\n /**\n * denomination to show in the callout\n */\n ratio?: [number, number];\n /**\n * description message to the callout\n */\n descriptionMessage?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartData {\n /**\n * name of the legend\n */\n legend: string;\n data: IHeatMapChartDataPoint[];\n /**\n * This number will be used to get the color for the legend\n */\n value: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutDataPoint {\n legend: string;\n y: number;\n color: string;\n xAxisCalloutData?: string;\n yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutData {\n x: number | string | Date;\n values: ICustomizedCalloutDataPoint[];\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface IChart {\n chartContainer: HTMLElement | null;\n toImage?: (opts?: IImageExportOptions) => Promise<string>;\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface IImageExportOptions {\n width?: number;\n height?: number;\n scale?: number;\n background?: string;\n}\n\n/**\n * {@docCategory IChartData}\n * ScatterChartDataPoint interface.\n */\nexport interface IScatterChartDataPoint extends IBaseDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n */\n x: number | Date | string;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IScatterChartPoints {\n /**\n * Legend text for the datapoint in the chart\n */\n legend: string;\n\n /**\n * The shape for the legend\n * default: show the rect legend\n */\n legendShape?: LegendShape;\n\n /**\n * dataPoints for the line chart\n */\n data: IScatterChartDataPoint[];\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * opacity for chart fill color\n */\n opacity?: number;\n\n /**\n * hide dots for points that are not active\n */\n hideNonActiveDots?: boolean;\n\n /**\n * Defines the function that is executed on clicking this legend\n */\n onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * Specifies the ordering options for axis categories in Cartesian charts.\n *\n * - `'default'`: Uses the original order before custom ordering was supported.\n * In some charts, this behaves the same as `'data'`.\n * - `'data'`: Preserves the order of categories as provided in the input data.\n * - `string[]`: Explicitly defines the custom order of categories as an array of category names.\n * - `'category ascending' | 'category descending'`: Orders categories alphanumerically.\n * - `'total ascending' | 'total descending'`: Orders categories by the total of their associated values.\n * - `'min ascending' | 'min descending'`: Orders by the minimum value within each category.\n * - `'max ascending' | 'max descending'`: Orders by the maximum value within each category.\n * - `'sum ascending' | 'sum descending'`: Orders by the sum of values for each category (same as 'total').\n * - `'mean ascending' | 'mean descending'`: Orders by the average of values in each category.\n * - `'median ascending' | 'median descending'`: Orders by the median value of each category.\n *\n * {@docCategory CartesianChart}\n */\nexport type AxisCategoryOrder =\n | 'default'\n | 'data'\n | string[]\n | 'category ascending'\n | 'category descending'\n | 'total ascending'\n | 'total descending'\n | 'min ascending'\n | 'min descending'\n | 'max ascending'\n | 'max descending'\n | 'sum ascending'\n | 'sum descending'\n | 'mean ascending'\n | 'mean descending'\n | 'median ascending'\n | 'median descending';\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGanttChartDataPoint {\n /**\n * Dependent value of the data point, rendered along the x-axis.\n * `start` and `end` represent the beginning and end of the data point.\n */\n x: {\n start: Date | number;\n end: Date | number;\n };\n\n /**\n * Independent value of the data point, rendered along the y-axis.\n * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n * If y is a string, then the data is evenly spaced along the y-axis.\n */\n y: number | string;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * Optional label shown in place of `x` in the callout.\n */\n xAxisCalloutData?: string;\n\n /**\n * Optional label shown in place of `y` in the callout.\n */\n yAxisCalloutData?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IDataPoint.js","sourceRoot":"../src/","sources":["types/IDataPoint.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SankeyLink, SankeyNode } from 'd3-sankey';\nimport { LegendShape } from '../components/Legends/Legends.types';\nimport { CurveFactory } from 'd3-shape';\n\nexport interface IBasestate {\n _width?: number;\n _height?: number;\n activeLegend?: string;\n color?: string;\n dataForHoverCard?: number | string;\n isCalloutVisible: boolean;\n isLegendSelected?: boolean;\n isLegendHovered?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n refSelected?: any;\n YValueHover?: { legend?: string; y?: number | string; color?: string }[];\n hoverYValue?: string | number | null;\n hoverXValue?: string | number | null;\n xCalloutValue?: string;\n yCalloutValue?: string;\n lineColor?: string;\n hoveredLineColor?: string;\n selectedLegend?: string;\n containerWidth?: number;\n containerHeight?: number;\n}\n\nexport interface IRefArrayData {\n index?: string;\n refElement?: SVGGElement;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IMargins {\n /**\n * left margin for the chart.\n */\n left?: number;\n /**\n * Right margin for the chart.\n */\n right?: number;\n /**\n * Top margin for the chart.\n */\n top?: number;\n /**\n * Bottom margin for the chart.\n */\n bottom?: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n */\n x: number | string;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n\n // NOTE: VerticalStackedBarChart, PieChart\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalStackedBarDataPoint extends Omit<IDataPoint, 'x'> {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n * If data type on x is Date, then the data is spaced evenly by d3-scale.\n */\n x: number | string | Date;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n */\n x: number;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IChartDataPoint {\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * data the datapoint in the chart\n */\n data?: number;\n\n /**\n * data the datapoint in the chart\n */\n horizontalBarChartdata?: IHorizontalDataPoint;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n */\n color?: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * placeholder data point\n */\n placeHolder?: boolean;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven;t given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalBarChartDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If x is a string, then the data is evenly spaced along the x-axis.\n */\n x: number | string | Date;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven;t given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * data to render the line along with bars\n */\n lineData?: ILineDataInVerticalBarChart;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalBarChartWithAxisDataPoint {\n /**\n * Dependent value of the data point, rendered along the x-axis.\n */\n x: number;\n\n /**\n * Independent value of the data point, rendered along the y-axis.\n * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n * If y is a string, then the data is evenly spaced along the y-axis.\n */\n y: number | string;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven;t given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalBarChart {\n y: IVerticalBarChartDataPoint['y'];\n yAxisCalloutData?: string | undefined;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IBaseDataPoint {\n /**\n * Defines the function that is executed on clicking line\n */\n onDataPointClick?: () => void;\n\n /**\n * Callout data for x axis\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n */\n yAxisCalloutData?: string | { [id: string]: number };\n\n /**\n * Whether to hide callout data for the point.\n */\n hideCallout?: boolean;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n\n /**\n * X axis Accessibility data for callout\n */\n xAxisCalloutAccessibilityData?: IAccessibilityProps;\n\n /**\n * Marker size of the points\n */\n markerSize?: number;\n\n /**\n * text labels of marker points\n */\n text?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartDataPoint extends IBaseDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n * If data type on x is Date, then the data is spaced evenly by d3-scale\n */\n x: number | Date;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartGap {\n /**\n * Starting index of the gap.\n */\n startIndex: number;\n\n /**\n * Ending index of the gap.\n */\n endIndex: number;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface ILineChartLineOptions extends React.SVGProps<SVGPathElement> {\n /**\n * Width of the line/stroke.\n * Overrides the strokeWidth set on ICartesianChartProps level.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n */\n strokeWidth?: number | string;\n\n /**\n * Pattern of dashes and gaps.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n */\n strokeDasharray?: string | number;\n\n /**\n * Offset on rendering of stroke dash array.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n */\n strokeDashoffset?: string | number;\n\n /**\n * Shape at the end of a subpath.\n * Default round.\n * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n */\n strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n /**\n * Width of border around the line. Default no border.\n */\n lineBorderWidth?: string | number;\n\n /**\n * Color of border around the line. Default white.\n */\n lineBorderColor?: string;\n\n /**\n * Defines the type of interpolation used to render the line.\n * @default 'linear'\n */\n curve?: 'linear' | 'natural' | 'step' | 'stepAfter' | 'stepBefore' | CurveFactory;\n\n /**\n * Defines the mode of points to be rendered.\n */\n mode?:\n | 'lines'\n | 'markers'\n | 'text'\n | 'lines+markers'\n | 'text+markers'\n | 'text+lines'\n | 'text+lines+markers'\n | 'none'\n | 'gauge'\n | 'number'\n | 'delta'\n | 'number+delta'\n | 'gauge+number'\n | 'gauge+number+delta'\n | 'gauge+delta'\n | 'markers+text'\n | 'lines+text'\n | 'lines+markers+text';\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartPoints {\n /**\n * Legend text for the datapoint in the chart\n */\n legend: string;\n\n /**\n * The shape for the legend\n * default: show the rect legend\n */\n legendShape?: LegendShape;\n\n /**\n * dataPoints for the line chart\n */\n data: ILineChartDataPoint[];\n\n /**\n * gaps in the line chart where a line is not drawn\n */\n gaps?: ILineChartGap[];\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * opacity for chart fill color\n */\n opacity?: number;\n\n /**\n * options for the line drawn\n */\n lineOptions?: ILineChartLineOptions;\n\n /**\n * hide dots for points that are not active\n */\n hideNonActiveDots?: boolean;\n\n /**\n * Defines the function that is executed on clicking this legend\n */\n onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n /**\n * Defines the function that is executed on clicking line\n */\n onLineClick?: () => void;\n\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IChartProps {\n /**\n * chart title for the chart\n */\n chartTitle?: string;\n\n /**\n * Accessibility data for chart title\n */\n chartTitleAccessibilityData?: IAccessibilityProps;\n /**\n * data for the points in the chart\n */\n chartData?: IChartDataPoint[];\n\n /**\n * Accessibility data for chart data\n */\n chartDataAccessibilityData?: IAccessibilityProps;\n\n /**\n * data for the points in the line chart\n */\n lineChartData?: ILineChartPoints[];\n\n /**\n * data for the points in the scatter chart\n */\n scatterChartData?: IScatterChartPoints[];\n\n /**\n * data for the points in the line chart\n */\n SankeyChartData?: ISankeyChartData;\n\n /**\n * data for the points in the line chart\n */\n pointOptions?: React.SVGProps<SVGCircleElement>;\n\n /**\n * data for the dotted line on hovering the point\n */\n pointLineOptions?: React.SVGProps<SVGLineElement>;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ISankeyChartData {\n nodes: SNode[];\n links: SLink[];\n}\n\ninterface ISNodeExtra {\n /**\n * A unique identifier for this node.\n */\n nodeId: number | string;\n /**\n * The display name for this node in the UX.\n */\n name: string;\n color?: string;\n borderColor?: string;\n actualValue?: number;\n layer?: number;\n}\n\ninterface ISLinkExtra {\n /**\n * The index within `ISankeyChartData.nodes` of the source node.\n */\n source: number;\n /**\n * The index within `ISankeyChartData.nodes` of the target node.\n */\n target: number;\n /**\n * The weight of this link between the two nodes.\n */\n value: number;\n unnormalizedValue?: number;\n}\n\nexport type SNode = SankeyNode<ISNodeExtra, ISLinkExtra>;\nexport type SLink = SankeyLink<ISNodeExtra, ISLinkExtra>;\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IAccessibilityProps {\n /**\n * Accessibility aria-label\n */\n ariaLabel?: string;\n\n /**\n * Accessibility aria-labelledBy\n */\n ariaLabelledBy?: string;\n\n /**\n * Accessibility aria-describedBy\n */\n ariaDescribedBy?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVSChartDataPoint {\n /**\n * data the datapoint in the chart\n */\n data: number | string;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven;t given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IVerticalStackedChartProps {\n /**\n * data for the points in the chart\n */\n chartData: IVSChartDataPoint[];\n\n /**\n * Data for x axis label for multistacked Vertical bar chart\n */\n xAxisPoint: number | string | Date;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven't given, legend will take\n */\n xAxisCalloutData?: string;\n /**\n * line data to render lines on stacked bar chart\n */\n lineData?: ILineDataInVerticalStackedBarChart[];\n /**\n * Accessibility data for Whole stack callout\n */\n stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalStackedBarChart {\n y: number | string;\n color: string;\n legend: string;\n /**\n * The shape for the legend\n * default: show the rect legend\n */\n legendShape?: LegendShape;\n /**\n * Data to show in callout\n */\n data?: number | string;\n yAxisCalloutData?: string;\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n /**\n * options for the line drawn\n */\n lineOptions?: ILineChartLineOptions;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGVBarChartSeriesPoint {\n /**\n * Text for // need to check use of this\n */\n key: string;\n\n /**\n * Data for bar height of Grouped vertical bar chart\n */\n data: number;\n\n /**\n * Color for the legend in the chart\n */\n color: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * Legend text in the chart\n */\n legend: string;\n\n /**\n * Callout data for x axis\n * This is an optional prop, If haven;t given legend will take\n */\n xAxisCalloutData?: string;\n\n /**\n * Callout data for y axis\n * This is an optional prop, If haven't given data will take\n */\n yAxisCalloutData?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGroupedVerticalBarChartData {\n /**\n * Data for X axis label\n */\n name: string;\n\n /**\n * Data points for Grouped vertical bar chart\n */\n series: IGVBarChartSeriesPoint[];\n\n /**\n * Accessibility data for Group Bars Stack Callout\n */\n stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IGVDataPoint {\n /**\n * This interface used for - While forming datapoints from given prop \"data\" in code\n * datapoints are used for to draw graph\n */\n [key: string]: number | string;\n}\n\nexport interface IGVSingleDataPoint {\n /**\n * While forming datapoints from given prop \"data\" in code.\n * These datapoints are used for to draw graph easily.\n */\n [key: string]: IGVDataPoint;\n}\n\nexport interface IGVForBarChart {\n /**\n * While forming datapoints from given prop \"data\"\n * These datapoints are used for to draw graph.\n */\n [key: string]: IGVBarChartSeriesPoint;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartDataPoint {\n x: string | Date | number;\n y: string | Date | number;\n value: number;\n /**\n * The value/ text to be rendered in the rectange\n */\n rectText?: string | number;\n /**\n * denomination to show in the callout\n */\n ratio?: [number, number];\n /**\n * description message to the callout\n */\n descriptionMessage?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartData {\n /**\n * name of the legend\n */\n legend: string;\n data: IHeatMapChartDataPoint[];\n /**\n * This number will be used to get the color for the legend\n */\n value: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutDataPoint {\n legend: string;\n y: number;\n color: string;\n xAxisCalloutData?: string;\n yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutData {\n x: number | string | Date;\n values: ICustomizedCalloutDataPoint[];\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface IChart {\n chartContainer: HTMLElement | null;\n toImage?: (opts?: IImageExportOptions) => Promise<string>;\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface IImageExportOptions {\n width?: number;\n height?: number;\n scale?: number;\n background?: string;\n}\n\n/**\n * {@docCategory IChartData}\n * ScatterChartDataPoint interface.\n */\nexport interface IScatterChartDataPoint extends IBaseDataPoint {\n /**\n * Independent value of the data point, rendered along the x-axis.\n */\n x: number | Date | string;\n\n /**\n * Dependent value of the data point, rendered along the y-axis.\n */\n y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IScatterChartPoints {\n /**\n * Legend text for the datapoint in the chart\n */\n legend: string;\n\n /**\n * The shape for the legend\n * default: show the rect legend\n */\n legendShape?: LegendShape;\n\n /**\n * dataPoints for the line chart\n */\n data: IScatterChartDataPoint[];\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * opacity for chart fill color\n */\n opacity?: number;\n\n /**\n * hide dots for points that are not active\n */\n hideNonActiveDots?: boolean;\n\n /**\n * Defines the function that is executed on clicking this legend\n */\n onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n /**\n * Whether to use the secondary y scale or not\n * False by default.\n */\n useSecondaryYScale?: boolean;\n}\n\n/**\n * Specifies the ordering options for axis categories in Cartesian charts.\n *\n * - `'default'`: Uses the original order before custom ordering was supported.\n * In some charts, this behaves the same as `'data'`.\n * - `'data'`: Preserves the order of categories as provided in the input data.\n * - `string[]`: Explicitly defines the custom order of categories as an array of category names.\n * - `'category ascending' | 'category descending'`: Orders categories alphanumerically.\n * - `'total ascending' | 'total descending'`: Orders categories by the total of their associated values.\n * - `'min ascending' | 'min descending'`: Orders by the minimum value within each category.\n * - `'max ascending' | 'max descending'`: Orders by the maximum value within each category.\n * - `'sum ascending' | 'sum descending'`: Orders by the sum of values for each category (same as 'total').\n * - `'mean ascending' | 'mean descending'`: Orders by the average of values in each category.\n * - `'median ascending' | 'median descending'`: Orders by the median value of each category.\n *\n * {@docCategory CartesianChart}\n */\nexport type AxisCategoryOrder =\n | 'default'\n | 'data'\n | string[]\n | 'category ascending'\n | 'category descending'\n | 'total ascending'\n | 'total descending'\n | 'min ascending'\n | 'min descending'\n | 'max ascending'\n | 'max descending'\n | 'sum ascending'\n | 'sum descending'\n | 'mean ascending'\n | 'mean descending'\n | 'median ascending'\n | 'median descending';\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGanttChartDataPoint {\n /**\n * Dependent value of the data point, rendered along the x-axis.\n * `start` and `end` represent the beginning and end of the data point.\n */\n x: {\n start: Date | number;\n end: Date | number;\n };\n\n /**\n * Independent value of the data point, rendered along the y-axis.\n * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n * If y is a string, then the data is evenly spaced along the y-axis.\n */\n y: number | string;\n\n /**\n * Legend text for the datapoint in the chart\n */\n legend?: string;\n\n /**\n * color for the legend in the chart\n */\n color?: string;\n\n /**\n * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n */\n gradient?: [string, string];\n\n /**\n * Optional label shown in place of `x` in the callout.\n */\n xAxisCalloutData?: string;\n\n /**\n * Optional label shown in place of `y` in the callout.\n */\n yAxisCalloutData?: string;\n\n /**\n * onClick action for each datapoint in the chart\n */\n onClick?: VoidFunction;\n\n /**\n * Accessibility data for callout\n */\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * Available scale types for axes.\n *\n * - `'default'`: Uses an automatic scale (linear, band, or time) based on axis data type.\n * - `'log'`: Uses a logarithmic scale. Only supported for numeric axes in LineChart and ScatterChart.\n *\n * {@docCategory CartesianChart}\n */\nexport type AxisScaleType = 'default' | 'log';\n"]}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { Axis as D3Axis } from 'd3-axis';
|
|
2
|
+
import { ScaleContinuousNumeric as IScaleContinuousNumeric, ScaleTime as IScaleTime } from 'd3-scale';
|
|
2
3
|
import { TimeLocaleDefinition as d3TimeLocaleDefinition } from 'd3-time-format';
|
|
3
4
|
import { IAccessibilityProps, IEventsAnnotationProps, ILineChartPoints, IDataPoint, IVerticalStackedBarDataPoint, IVerticalBarChartDataPoint, IHorizontalBarChartWithAxisDataPoint, ILineChartLineOptions, AxisCategoryOrder } from '../index';
|
|
4
5
|
import { ITheme } from '@fluentui/react';
|
|
5
6
|
import { CurveFactory } from 'd3-shape';
|
|
6
|
-
import { IGanttChartDataPoint, IScatterChartPoints } from '../types/IDataPoint';
|
|
7
|
+
import { AxisScaleType, IGanttChartDataPoint, IScatterChartPoints } from '../types/IDataPoint';
|
|
7
8
|
export declare const MIN_DOMAIN_MARGIN = 8;
|
|
8
9
|
export declare const MIN_DONUT_RADIUS = 1;
|
|
9
10
|
export type NumericAxis = D3Axis<number | {
|
|
@@ -123,7 +124,7 @@ export declare function defaultYAxisTickFormatter(value: number): string;
|
|
|
123
124
|
* @export
|
|
124
125
|
* @param {IXAxisParams} xAxisParams
|
|
125
126
|
*/
|
|
126
|
-
export declare function createNumericXAxis(xAxisParams: IXAxisParams, tickParams: ITickParams, chartType: ChartTypes, culture?: string): {
|
|
127
|
+
export declare function createNumericXAxis(xAxisParams: IXAxisParams, tickParams: ITickParams, chartType: ChartTypes, culture?: string, scaleType?: AxisScaleType): {
|
|
127
128
|
xScale: import("d3-scale").ScaleLinear<number, number, never>;
|
|
128
129
|
tickValues: string[];
|
|
129
130
|
};
|
|
@@ -135,7 +136,7 @@ export declare function getDateFormatLevel(date: Date, useUTC?: boolean): number
|
|
|
135
136
|
* @param {ITickParams} tickParams
|
|
136
137
|
*/
|
|
137
138
|
export declare function createDateXAxis(xAxisParams: IXAxisParams, tickParams: ITickParams, culture?: string, options?: Intl.DateTimeFormatOptions, timeFormatLocale?: d3TimeLocaleDefinition, customDateTimeFormatter?: (dateTime: Date) => string, useUTC?: boolean, chartType?: ChartTypes): {
|
|
138
|
-
xScale:
|
|
139
|
+
xScale: IScaleTime<number, number, never>;
|
|
139
140
|
tickValues: string[];
|
|
140
141
|
};
|
|
141
142
|
/**
|
|
@@ -162,7 +163,7 @@ export declare function createStringXAxis(xAxisParams: IXAxisParams, tickParams:
|
|
|
162
163
|
*/
|
|
163
164
|
export declare function prepareDatapoints(maxVal: number, minVal: number, splitInto: number, isIntegralDataset: boolean, roundedTicks?: boolean): number[];
|
|
164
165
|
export declare function createYAxisForHorizontalBarChartWithAxis(yAxisParams: IYAxisParams, isRtl: boolean): import("d3-scale").ScaleLinear<number, number, never>;
|
|
165
|
-
export declare function createNumericYAxis(yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean, roundedTicks?: boolean): import("d3-scale").ScaleLinear<number, number, never>;
|
|
166
|
+
export declare function createNumericYAxis(yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean, roundedTicks?: boolean, scaleType?: AxisScaleType): import("d3-scale").ScaleLinear<number, number, never>;
|
|
166
167
|
/**
|
|
167
168
|
* Creating String Y axis of the chart for Horizontal Bar Chart With Axis
|
|
168
169
|
* @param yAxisParams
|
|
@@ -265,7 +266,7 @@ export declare function getXAxisType(points: ILineChartPoints[]): boolean;
|
|
|
265
266
|
* @param {boolean} isRTL
|
|
266
267
|
* @returns {IDomainNRange}
|
|
267
268
|
*/
|
|
268
|
-
export declare function
|
|
269
|
+
export declare function domainRangeOfNumericForAreaLineScatterCharts(points: ILineChartPoints[] | IScatterChartPoints[], margins: IMargins, width: number, isRTL: boolean, scaleType?: AxisScaleType, hasMarkersMode?: boolean): IDomainNRange;
|
|
269
270
|
/**
|
|
270
271
|
* Groups HorizontalBarChart With Axis data based on YValue
|
|
271
272
|
* Used for stacked case
|
|
@@ -328,7 +329,7 @@ export declare function domainRangeOfVSBCNumeric(points: IDataPoint[], margins:
|
|
|
328
329
|
* @param {Date[] | number[]} tickValues
|
|
329
330
|
* @returns {IDomainNRange}
|
|
330
331
|
*/
|
|
331
|
-
export declare function
|
|
332
|
+
export declare function domainRangeOfDateForAreaLineScatterVerticalBarCharts(points: ILineChartPoints[] | IScatterChartPoints[] | IVerticalBarChartDataPoint[] | IVerticalStackedBarDataPoint[], margins: IMargins, width: number, isRTL: boolean, tickValues: Date[] | undefined, chartType: ChartTypes, barWidth?: number, hasMarkersMode?: boolean): IDomainNRange;
|
|
332
333
|
/**
|
|
333
334
|
* Calculate domain and range values to the Vertical bar chart - For Numeric axis
|
|
334
335
|
* @export
|
|
@@ -346,7 +347,7 @@ export declare function domainRageOfVerticalNumeric(points: IDataPoint[], margin
|
|
|
346
347
|
* @param {ILineChartPoints[]} points
|
|
347
348
|
* @returns {{ startValue: number; endValue: number }}
|
|
348
349
|
*/
|
|
349
|
-
export declare function findNumericMinMaxOfY(points: ILineChartPoints[] | IScatterChartPoints[], yAxisType?: YAxisType, useSecondaryYScale?: boolean): {
|
|
350
|
+
export declare function findNumericMinMaxOfY(points: ILineChartPoints[] | IScatterChartPoints[], yAxisType?: YAxisType, useSecondaryYScale?: boolean, scaleType?: AxisScaleType): {
|
|
350
351
|
startValue: number;
|
|
351
352
|
endValue: number;
|
|
352
353
|
};
|
|
@@ -447,27 +448,6 @@ export declare function resolveCSSVariables(chartContainer: HTMLElement, styleRu
|
|
|
447
448
|
export declare function copyStyle(properties: string[] | Record<string, string>, fromEl: Element, toEl: Element): void;
|
|
448
449
|
export declare const createMeasurementSpan: (text: string | number, className: string, parentElement?: HTMLElement | null) => HTMLElement;
|
|
449
450
|
export declare function getCurveFactory(curve: ILineChartLineOptions['curve'], defaultFactory?: CurveFactory): CurveFactory;
|
|
450
|
-
/**
|
|
451
|
-
* Calculates Domain and range values for Date X axis for scatter chart.
|
|
452
|
-
* @export
|
|
453
|
-
* @param {LineChartPoints[]} points
|
|
454
|
-
* @param {IMargins} margins
|
|
455
|
-
* @param {number} width
|
|
456
|
-
* @param {boolean} isRTL
|
|
457
|
-
* @param {Date[] | number[]} tickValues
|
|
458
|
-
* @returns {IDomainNRange}
|
|
459
|
-
*/
|
|
460
|
-
export declare function domainRangeOfDateForScatterChart(points: IScatterChartPoints[], margins: IMargins, width: number, isRTL: boolean, tickValues?: Date[]): IDomainNRange;
|
|
461
|
-
/**
|
|
462
|
-
* Calculates Domain and range values for Numeric X axis for scatter chart.
|
|
463
|
-
* @export
|
|
464
|
-
* @param {LineChartPoints[]} points
|
|
465
|
-
* @param {IMargins} margins
|
|
466
|
-
* @param {number} width
|
|
467
|
-
* @param {boolean} isRTL
|
|
468
|
-
* @returns {IDomainNRange}
|
|
469
|
-
*/
|
|
470
|
-
export declare function domainRangeOfNumericForScatterChart(points: IScatterChartPoints[], margins: IMargins, width: number, isRTL: boolean): IDomainNRange;
|
|
471
451
|
export declare const truncateString: (str: string, maxLength: number, ellipsis?: string) => string;
|
|
472
452
|
/**
|
|
473
453
|
* @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/plots.js#L3041}
|
|
@@ -487,3 +467,24 @@ export declare function isScatterPolarSeries(points: (ILineChartPoints | IScatte
|
|
|
487
467
|
* @returns true if any point has lineOptions.mode as 'text'
|
|
488
468
|
*/
|
|
489
469
|
export declare function isTextMode(points: (ILineChartPoints | IScatterChartPoints)[]): boolean;
|
|
470
|
+
export declare const getDomainPaddingForMarkers: (minVal: number, maxVal: number, scaleType?: AxisScaleType) => {
|
|
471
|
+
start: number;
|
|
472
|
+
end: number;
|
|
473
|
+
};
|
|
474
|
+
/**
|
|
475
|
+
* Determines whether a value is valid for inclusion in the scale domain.
|
|
476
|
+
* For log scales, ensures the value is strictly positive to prevent undefined scale behavior.
|
|
477
|
+
*/
|
|
478
|
+
export declare const isValidDomainValue: (value: any, scaleType?: AxisScaleType) => boolean;
|
|
479
|
+
export declare const isPlottable: (x: any, y: any) => boolean;
|
|
480
|
+
export declare const getScatterXDomainExtent: (points: ILineChartPoints[] | IScatterChartPoints[], scaleType?: AxisScaleType) => (number | Date)[];
|
|
481
|
+
export declare const getRangeForScatterMarkerSize: ({ data, xScale, yScalePrimary, yScaleSecondary, useSecondaryYScale, xScaleType, yScaleType: primaryYScaleType, secondaryYScaleType, }: {
|
|
482
|
+
data: ILineChartPoints[] | IScatterChartPoints[];
|
|
483
|
+
xScale: IScaleContinuousNumeric<number, number> | IScaleTime<number, number>;
|
|
484
|
+
yScalePrimary: IScaleContinuousNumeric<number, number>;
|
|
485
|
+
yScaleSecondary?: IScaleContinuousNumeric<number, number, never> | undefined;
|
|
486
|
+
useSecondaryYScale?: boolean | undefined;
|
|
487
|
+
xScaleType?: AxisScaleType | undefined;
|
|
488
|
+
yScaleType?: AxisScaleType | undefined;
|
|
489
|
+
secondaryYScaleType?: AxisScaleType | undefined;
|
|
490
|
+
}) => number;
|
|
@@ -2,7 +2,7 @@ var _a;
|
|
|
2
2
|
import { __assign, __rest, __spreadArray } from "tslib";
|
|
3
3
|
import { axisRight as d3AxisRight, axisBottom as d3AxisBottom, axisLeft as d3AxisLeft } from 'd3-axis';
|
|
4
4
|
import { max as d3Max, min as d3Min, ticks as d3Ticks, nice as d3nice, sum as d3Sum, mean as d3Mean, median as d3Median, } from 'd3-array';
|
|
5
|
-
import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime, } from 'd3-scale';
|
|
5
|
+
import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime, scaleLog as d3ScaleLog, } from 'd3-scale';
|
|
6
6
|
import { select as d3Select, selectAll as d3SelectAll } from 'd3-selection';
|
|
7
7
|
import { format as d3Format } from 'd3-format';
|
|
8
8
|
import { timeFormat as d3TimeFormat, timeFormatLocale as d3TimeFormatLocale, utcFormat as d3UtcFormat, } from 'd3-time-format';
|
|
@@ -10,7 +10,7 @@ import { timeSecond as d3TimeSecond, timeMinute as d3TimeMinute, timeHour as d3T
|
|
|
10
10
|
import { formatPrefix as d3FormatPrefix } from 'd3-format';
|
|
11
11
|
import { getId } from '@fluentui/react';
|
|
12
12
|
import { curveLinear as d3CurveLinear, curveNatural as d3CurveNatural, curveStep as d3CurveStep, curveStepAfter as d3CurveStepAfter, curveStepBefore as d3CurveStepBefore, } from 'd3-shape';
|
|
13
|
-
import { formatDateToLocaleString, formatToLocaleString, getMultiLevelDateTimeFormatOptions, handleFloatingPointPrecisionError, } from '@fluentui/chart-utilities';
|
|
13
|
+
import { formatDateToLocaleString, formatToLocaleString, getMultiLevelDateTimeFormatOptions, handleFloatingPointPrecisionError, isInvalidValue, } from '@fluentui/chart-utilities';
|
|
14
14
|
import { getColorContrast } from './colors';
|
|
15
15
|
export var MIN_DOMAIN_MARGIN = 8;
|
|
16
16
|
export var MIN_DONUT_RADIUS = 1;
|
|
@@ -70,23 +70,23 @@ export function defaultYAxisTickFormatter(value) {
|
|
|
70
70
|
* @export
|
|
71
71
|
* @param {IXAxisParams} xAxisParams
|
|
72
72
|
*/
|
|
73
|
-
export function createNumericXAxis(xAxisParams, tickParams, chartType, culture) {
|
|
73
|
+
export function createNumericXAxis(xAxisParams, tickParams, chartType, culture, scaleType) {
|
|
74
74
|
var _a;
|
|
75
75
|
var domainNRangeValues = xAxisParams.domainNRangeValues, _b = xAxisParams.showRoundOffXTickValues, showRoundOffXTickValues = _b === void 0 ? true : _b, _c = xAxisParams.xAxistickSize, xAxistickSize = _c === void 0 ? 6 : _c, _d = xAxisParams.tickPadding, tickPadding = _d === void 0 ? 10 : _d, xAxisCount = xAxisParams.xAxisCount, xAxisElement = xAxisParams.xAxisElement, hideTickOverlap = xAxisParams.hideTickOverlap, calcMaxLabelWidth = xAxisParams.calcMaxLabelWidth;
|
|
76
|
-
var xAxisScale =
|
|
76
|
+
var xAxisScale = createNumericScale(scaleType)
|
|
77
77
|
.domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
|
|
78
78
|
.range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
|
|
79
79
|
showRoundOffXTickValues && xAxisScale.nice();
|
|
80
80
|
var tickCount = xAxisCount !== null && xAxisCount !== void 0 ? xAxisCount : 6;
|
|
81
|
-
var tickFormat = function (domainValue, _index) {
|
|
81
|
+
var tickFormat = function (domainValue, _index, defaultFormat) {
|
|
82
82
|
if (tickParams.tickFormat) {
|
|
83
83
|
return d3Format(tickParams.tickFormat)(domainValue);
|
|
84
84
|
}
|
|
85
85
|
var xAxisValue = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
|
|
86
|
-
return formatToLocaleString(xAxisValue, culture);
|
|
86
|
+
return (defaultFormat === null || defaultFormat === void 0 ? void 0 : defaultFormat(xAxisValue)) === '' ? '' : formatToLocaleString(xAxisValue, culture);
|
|
87
87
|
};
|
|
88
88
|
if (hideTickOverlap && typeof xAxisCount === 'undefined') {
|
|
89
|
-
var longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(tickFormat)) + 20;
|
|
89
|
+
var longestLabelWidth = calcMaxLabelWidth(xAxisScale.ticks().map(function (v, i) { return tickFormat(v, i); })) + 20;
|
|
90
90
|
var _e = xAxisScale.range(), start = _e[0], end = _e[1];
|
|
91
91
|
tickCount = Math.min(Math.max(1, Math.floor(Math.abs(end - start) / longestLabelWidth)), 10);
|
|
92
92
|
}
|
|
@@ -94,7 +94,7 @@ export function createNumericXAxis(xAxisParams, tickParams, chartType, culture)
|
|
|
94
94
|
.tickSize(xAxistickSize)
|
|
95
95
|
.tickPadding(tickPadding)
|
|
96
96
|
.ticks(tickCount)
|
|
97
|
-
.tickFormat(tickFormat);
|
|
97
|
+
.tickFormat(function (v, i) { return tickFormat(v, i, xAxisScale.tickFormat(tickCount)); });
|
|
98
98
|
if ([ChartTypes.HorizontalBarChartWithAxis, ChartTypes.GanttChart].includes(chartType)) {
|
|
99
99
|
xAxis.tickSizeInner(-(xAxisParams.containerHeight - xAxisParams.margins.top));
|
|
100
100
|
}
|
|
@@ -396,7 +396,7 @@ export function createYAxisForHorizontalBarChartWithAxis(yAxisParams, isRtl) {
|
|
|
396
396
|
yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
|
|
397
397
|
return yAxisScale;
|
|
398
398
|
}
|
|
399
|
-
export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDataset, useSecondaryYScale, supportNegativeData, roundedTicks) {
|
|
399
|
+
export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDataset, useSecondaryYScale, supportNegativeData, roundedTicks, scaleType) {
|
|
400
400
|
if (useSecondaryYScale === void 0) { useSecondaryYScale = false; }
|
|
401
401
|
if (supportNegativeData === void 0) { supportNegativeData = false; }
|
|
402
402
|
if (roundedTicks === void 0) { roundedTicks = false; }
|
|
@@ -410,15 +410,33 @@ export function createNumericYAxis(yAxisParams, isRtl, axisData, isIntegralDatas
|
|
|
410
410
|
? 0
|
|
411
411
|
: yMinValue;
|
|
412
412
|
var domainValues = prepareDatapoints(finalYmax, finalYmin, yAxisTickCount, isIntegralDataset, roundedTicks);
|
|
413
|
-
var
|
|
414
|
-
|
|
413
|
+
var scaleDomain = [supportNegativeData ? domainValues[0] : finalYmin, domainValues[domainValues.length - 1]];
|
|
414
|
+
if (scaleType === 'log') {
|
|
415
|
+
var domainStart = yMinMaxValues.startValue;
|
|
416
|
+
var domainEnd = yMinMaxValues.endValue;
|
|
417
|
+
if (yMinValue > 0) {
|
|
418
|
+
domainStart = Math.min(domainStart, yMinValue);
|
|
419
|
+
}
|
|
420
|
+
if (yMaxValue > 0) {
|
|
421
|
+
domainEnd = Math.max(domainEnd, yMaxValue);
|
|
422
|
+
}
|
|
423
|
+
scaleDomain = [domainStart, domainEnd];
|
|
424
|
+
}
|
|
425
|
+
var yAxisScale = createNumericScale(scaleType)
|
|
426
|
+
.domain(scaleDomain)
|
|
415
427
|
.range([containerHeight - margins.bottom, margins.top + (eventAnnotationProps ? eventLabelHeight : 0)]);
|
|
416
428
|
var axis = (!isRtl && useSecondaryYScale) || (isRtl && !useSecondaryYScale) ? d3AxisRight(yAxisScale) : d3AxisLeft(yAxisScale);
|
|
417
|
-
var yAxis = axis
|
|
418
|
-
|
|
419
|
-
.tickValues(domainValues)
|
|
420
|
-
|
|
421
|
-
|
|
429
|
+
var yAxis = axis.tickPadding(tickPadding).tickSizeInner(-(containerWidth - margins.left - margins.right));
|
|
430
|
+
if (scaleType !== 'log') {
|
|
431
|
+
yAxis.tickValues(domainValues);
|
|
432
|
+
}
|
|
433
|
+
var tickFormat = function (domainValue, index, defaultFormat) {
|
|
434
|
+
var value = typeof domainValue === 'number' ? domainValue : domainValue.valueOf();
|
|
435
|
+
return (defaultFormat === null || defaultFormat === void 0 ? void 0 : defaultFormat(value)) === '' ? '' : defaultYAxisTickFormatter(value);
|
|
436
|
+
};
|
|
437
|
+
yAxisTickFormat
|
|
438
|
+
? yAxis.tickFormat(yAxisTickFormat)
|
|
439
|
+
: yAxis.tickFormat(function (v, i) { return tickFormat(v, i, yAxisScale.tickFormat(yAxisTickCount)); });
|
|
422
440
|
yAxisElement ? d3Select(yAxisElement).call(yAxis).selectAll('text').attr('aria-hidden', 'true') : '';
|
|
423
441
|
axisData.yAxisDomainValues = domainValues;
|
|
424
442
|
return yAxisScale;
|
|
@@ -804,16 +822,14 @@ export function getXAxisType(points) {
|
|
|
804
822
|
* @param {boolean} isRTL
|
|
805
823
|
* @returns {IDomainNRange}
|
|
806
824
|
*/
|
|
807
|
-
export function
|
|
825
|
+
export function domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL, scaleType, hasMarkersMode) {
|
|
808
826
|
var isScatterPolar = isScatterPolarSeries(points);
|
|
809
|
-
var
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
});
|
|
816
|
-
});
|
|
827
|
+
var _a = getScatterXDomainExtent(points, scaleType), xMin = _a[0], xMax = _a[1];
|
|
828
|
+
if (hasMarkersMode) {
|
|
829
|
+
var xPadding = getDomainPaddingForMarkers(xMin, xMax, scaleType);
|
|
830
|
+
xMin = xMin - xPadding.start;
|
|
831
|
+
xMax = xMax + xPadding.end;
|
|
832
|
+
}
|
|
817
833
|
var rStartValue = margins.left;
|
|
818
834
|
var rEndValue = width - margins.right;
|
|
819
835
|
return isRTL
|
|
@@ -922,29 +938,24 @@ export function domainRangeOfVSBCNumeric(points, margins, width, isRTL, barWidth
|
|
|
922
938
|
* @param {Date[] | number[]} tickValues
|
|
923
939
|
* @returns {IDomainNRange}
|
|
924
940
|
*/
|
|
925
|
-
export function
|
|
941
|
+
export function domainRangeOfDateForAreaLineScatterVerticalBarCharts(points, margins, width, isRTL, tickValues, chartType, barWidth, hasMarkersMode) {
|
|
942
|
+
var _a;
|
|
926
943
|
if (tickValues === void 0) { tickValues = []; }
|
|
927
944
|
var sDate;
|
|
928
945
|
var lDate;
|
|
929
|
-
if (
|
|
930
|
-
|
|
931
|
-
sDate = d3Min(points, function (point) {
|
|
932
|
-
return d3Min(point.data, function (item) {
|
|
933
|
-
return item.x;
|
|
934
|
-
});
|
|
935
|
-
});
|
|
936
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
937
|
-
lDate = d3Max(points, function (point) {
|
|
938
|
-
return d3Max(point.data, function (item) {
|
|
939
|
-
return item.x;
|
|
940
|
-
});
|
|
941
|
-
});
|
|
946
|
+
if ([ChartTypes.AreaChart, ChartTypes.LineChart, ChartTypes.ScatterChart].includes(chartType)) {
|
|
947
|
+
_a = getScatterXDomainExtent(points), sDate = _a[0], lDate = _a[1];
|
|
942
948
|
// Need to draw graph with given small and large date
|
|
943
949
|
// (Which Involves customization of date axis tick values)
|
|
944
950
|
// That may be Either from given graph data or from prop 'tickValues' date values.
|
|
945
951
|
// So, Finding smallest and largest dates
|
|
946
952
|
sDate = d3Min(__spreadArray(__spreadArray([], tickValues, true), [sDate], false));
|
|
947
953
|
lDate = d3Max(__spreadArray(__spreadArray([], tickValues, true), [lDate], false));
|
|
954
|
+
if (hasMarkersMode || chartType === ChartTypes.ScatterChart) {
|
|
955
|
+
var xPadding = getDomainPaddingForMarkers(sDate.getTime(), lDate.getTime());
|
|
956
|
+
sDate = new Date(sDate.getTime() - xPadding.start);
|
|
957
|
+
lDate = new Date(lDate.getTime() + xPadding.end);
|
|
958
|
+
}
|
|
948
959
|
}
|
|
949
960
|
else {
|
|
950
961
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -983,12 +994,14 @@ export function domainRageOfVerticalNumeric(points, margins, containerWidth, isR
|
|
|
983
994
|
* @param {ILineChartPoints[]} points
|
|
984
995
|
* @returns {{ startValue: number; endValue: number }}
|
|
985
996
|
*/
|
|
986
|
-
export function findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale) {
|
|
997
|
+
export function findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale, scaleType) {
|
|
987
998
|
var values = [];
|
|
988
999
|
points.forEach(function (point) {
|
|
989
1000
|
if (!useSecondaryYScale === !point.useSecondaryYScale) {
|
|
990
1001
|
point.data.forEach(function (data) {
|
|
991
|
-
|
|
1002
|
+
if (isValidDomainValue(data.y, scaleType)) {
|
|
1003
|
+
values.push(data.y);
|
|
1004
|
+
}
|
|
992
1005
|
});
|
|
993
1006
|
}
|
|
994
1007
|
});
|
|
@@ -1337,75 +1350,6 @@ export function getCurveFactory(curve, defaultFactory) {
|
|
|
1337
1350
|
return defaultFactory;
|
|
1338
1351
|
}
|
|
1339
1352
|
}
|
|
1340
|
-
/**
|
|
1341
|
-
* Calculates Domain and range values for Date X axis for scatter chart.
|
|
1342
|
-
* @export
|
|
1343
|
-
* @param {LineChartPoints[]} points
|
|
1344
|
-
* @param {IMargins} margins
|
|
1345
|
-
* @param {number} width
|
|
1346
|
-
* @param {boolean} isRTL
|
|
1347
|
-
* @param {Date[] | number[]} tickValues
|
|
1348
|
-
* @returns {IDomainNRange}
|
|
1349
|
-
*/
|
|
1350
|
-
export function domainRangeOfDateForScatterChart(points, margins, width, isRTL, tickValues) {
|
|
1351
|
-
if (tickValues === void 0) { tickValues = []; }
|
|
1352
|
-
var sDate;
|
|
1353
|
-
var lDate;
|
|
1354
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1355
|
-
sDate = d3Min(points, function (point) {
|
|
1356
|
-
return d3Min(point.data, function (item) {
|
|
1357
|
-
return item.x;
|
|
1358
|
-
});
|
|
1359
|
-
});
|
|
1360
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1361
|
-
lDate = d3Max(points, function (point) {
|
|
1362
|
-
return d3Max(point.data, function (item) {
|
|
1363
|
-
return item.x;
|
|
1364
|
-
});
|
|
1365
|
-
});
|
|
1366
|
-
var xPadding = (lDate.getTime() - sDate.getTime()) * 0.1;
|
|
1367
|
-
sDate = new Date(sDate.getTime() - xPadding);
|
|
1368
|
-
lDate = new Date(lDate.getTime() + xPadding);
|
|
1369
|
-
// Need to draw graph with given small and large date
|
|
1370
|
-
// (Which Involves customization of date axis tick values)
|
|
1371
|
-
// That may be Either from given graph data or from prop 'tickValues' date values.
|
|
1372
|
-
// So, Finding smallest and largest dates
|
|
1373
|
-
sDate = d3Min(__spreadArray(__spreadArray([], tickValues, true), [sDate], false));
|
|
1374
|
-
lDate = d3Max(__spreadArray(__spreadArray([], tickValues, true), [lDate], false));
|
|
1375
|
-
var rStartValue = margins.left;
|
|
1376
|
-
var rEndValue = width - margins.right;
|
|
1377
|
-
return isRTL
|
|
1378
|
-
? { dStartValue: lDate, dEndValue: sDate, rStartValue: rStartValue, rEndValue: rEndValue }
|
|
1379
|
-
: { dStartValue: sDate, dEndValue: lDate, rStartValue: rStartValue, rEndValue: rEndValue };
|
|
1380
|
-
}
|
|
1381
|
-
/**
|
|
1382
|
-
* Calculates Domain and range values for Numeric X axis for scatter chart.
|
|
1383
|
-
* @export
|
|
1384
|
-
* @param {LineChartPoints[]} points
|
|
1385
|
-
* @param {IMargins} margins
|
|
1386
|
-
* @param {number} width
|
|
1387
|
-
* @param {boolean} isRTL
|
|
1388
|
-
* @returns {IDomainNRange}
|
|
1389
|
-
*/
|
|
1390
|
-
export function domainRangeOfNumericForScatterChart(points, margins, width, isRTL) {
|
|
1391
|
-
var isScatterPolar = isScatterPolarSeries(points);
|
|
1392
|
-
var xMin = d3Min(points, function (point) {
|
|
1393
|
-
return d3Min(point.data, function (item) { return item.x; });
|
|
1394
|
-
});
|
|
1395
|
-
var xMax = d3Max(points, function (point) {
|
|
1396
|
-
return d3Max(point.data, function (item) {
|
|
1397
|
-
return item.x;
|
|
1398
|
-
});
|
|
1399
|
-
});
|
|
1400
|
-
var xPadding = (xMax - xMin) * 0.1;
|
|
1401
|
-
xMin = xMin - xPadding;
|
|
1402
|
-
xMax = xMax + xPadding;
|
|
1403
|
-
var rStartValue = margins.left;
|
|
1404
|
-
var rEndValue = width - margins.right;
|
|
1405
|
-
return isRTL
|
|
1406
|
-
? { dStartValue: isScatterPolar ? 1 : xMax, dEndValue: isScatterPolar ? -1 : xMin, rStartValue: rStartValue, rEndValue: rEndValue }
|
|
1407
|
-
: { dStartValue: isScatterPolar ? -1 : xMin, dEndValue: isScatterPolar ? 1 : xMax, rStartValue: rStartValue, rEndValue: rEndValue };
|
|
1408
|
-
}
|
|
1409
1353
|
export var truncateString = function (str, maxLength, ellipsis) {
|
|
1410
1354
|
if (ellipsis === void 0) { ellipsis = '...'; }
|
|
1411
1355
|
if (str.length <= maxLength) {
|
|
@@ -1503,4 +1447,77 @@ export function isTextMode(points) {
|
|
|
1503
1447
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1504
1448
|
function (item) { var _a; return typeof ((_a = item.lineOptions) === null || _a === void 0 ? void 0 : _a.mode) === 'string' && item.lineOptions.mode === 'text'; });
|
|
1505
1449
|
}
|
|
1450
|
+
// TODO: Refactor to encapsulate the complete numeric scale creation logic here, including setting domain and range.
|
|
1451
|
+
var createNumericScale = function (scaleType) {
|
|
1452
|
+
if (scaleType === 'log') {
|
|
1453
|
+
return d3ScaleLog();
|
|
1454
|
+
}
|
|
1455
|
+
else {
|
|
1456
|
+
return d3ScaleLinear();
|
|
1457
|
+
}
|
|
1458
|
+
};
|
|
1459
|
+
export var getDomainPaddingForMarkers = function (minVal, maxVal, scaleType) {
|
|
1460
|
+
if (scaleType === 'log') {
|
|
1461
|
+
return {
|
|
1462
|
+
start: minVal * 0.5,
|
|
1463
|
+
end: maxVal,
|
|
1464
|
+
};
|
|
1465
|
+
}
|
|
1466
|
+
var defaultPadding = (maxVal - minVal) * 0.1;
|
|
1467
|
+
return {
|
|
1468
|
+
start: defaultPadding,
|
|
1469
|
+
end: defaultPadding,
|
|
1470
|
+
};
|
|
1471
|
+
};
|
|
1472
|
+
/**
|
|
1473
|
+
* Determines whether a value is valid for inclusion in the scale domain.
|
|
1474
|
+
* For log scales, ensures the value is strictly positive to prevent undefined scale behavior.
|
|
1475
|
+
*/
|
|
1476
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1477
|
+
export var isValidDomainValue = function (value, scaleType) {
|
|
1478
|
+
return typeof value !== 'number' || scaleType !== 'log' || value > 0;
|
|
1479
|
+
};
|
|
1480
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1481
|
+
export var isPlottable = function (x, y) {
|
|
1482
|
+
return !isInvalidValue(x) && !isInvalidValue(y);
|
|
1483
|
+
};
|
|
1484
|
+
export var getScatterXDomainExtent = function (points, scaleType) {
|
|
1485
|
+
var isValidDataPointForScale = function (item) {
|
|
1486
|
+
return isValidDomainValue(item.x, scaleType);
|
|
1487
|
+
};
|
|
1488
|
+
var xMin = d3Min(points, function (point) {
|
|
1489
|
+
return d3Min(point.data.filter(isValidDataPointForScale), function (item) { return item.x; });
|
|
1490
|
+
});
|
|
1491
|
+
var xMax = d3Max(points, function (point) {
|
|
1492
|
+
return d3Max(point.data.filter(isValidDataPointForScale), function (item) {
|
|
1493
|
+
return item.x;
|
|
1494
|
+
});
|
|
1495
|
+
});
|
|
1496
|
+
return [xMin, xMax];
|
|
1497
|
+
};
|
|
1498
|
+
export var getRangeForScatterMarkerSize = function (_a) {
|
|
1499
|
+
var data = _a.data, xScale = _a.xScale, yScalePrimary = _a.yScalePrimary, yScaleSecondary = _a.yScaleSecondary, useSecondaryYScale = _a.useSecondaryYScale, xScaleType = _a.xScaleType, primaryYScaleType = _a.yScaleType, secondaryYScaleType = _a.secondaryYScaleType;
|
|
1500
|
+
// Note: This function is executed after the scale is created, so the actual padding can be
|
|
1501
|
+
// obtained by calculating the difference between the respective minimums or maximums of the
|
|
1502
|
+
// scale domain and the data. However, doing so often causes the marker size to scale up
|
|
1503
|
+
// unnecessarily when the scale uses a wider domain than required (due to the use of D3's nice
|
|
1504
|
+
// function or our own tick value calculations).
|
|
1505
|
+
// A better approach could be to treat the marker size as a fixed pixel value and adjust the
|
|
1506
|
+
// scale domain with sufficient padding to accommodate the maximum marker size—instead of doing
|
|
1507
|
+
// it the other way around (i.e., adjusting the scale domain first with padding and then scaling
|
|
1508
|
+
// the markers to fit inside the plot area).
|
|
1509
|
+
var _b = getScatterXDomainExtent(data, xScaleType), xMin = _b[0], xMax = _b[1];
|
|
1510
|
+
var xPadding = getDomainPaddingForMarkers(+xMin, +xMax, xScaleType);
|
|
1511
|
+
var scaleXMin = xMin instanceof Date ? new Date(+xMin - xPadding.start) : xMin - xPadding.start;
|
|
1512
|
+
var scaleXMax = xMax instanceof Date ? new Date(+xMax + xPadding.end) : xMax + xPadding.end;
|
|
1513
|
+
var extraXPixels = Math.min(Math.abs(xScale(xMin) - xScale(scaleXMin)), Math.abs(xScale(scaleXMax) - xScale(xMax)));
|
|
1514
|
+
var yScaleType = useSecondaryYScale ? secondaryYScaleType : primaryYScaleType;
|
|
1515
|
+
var _c = findNumericMinMaxOfY(data, undefined, useSecondaryYScale, yScaleType), yMin = _c.startValue, yMax = _c.endValue;
|
|
1516
|
+
var yPadding = getDomainPaddingForMarkers(yMin, yMax, yScaleType);
|
|
1517
|
+
var scaleYMin = yMin - yPadding.start;
|
|
1518
|
+
var scaleYMax = yMax + yPadding.end;
|
|
1519
|
+
var yScale = (useSecondaryYScale ? yScaleSecondary : yScalePrimary);
|
|
1520
|
+
var extraYPixels = Math.min(Math.abs(yScale(scaleYMin) - yScale(yMin)), Math.abs(yScale(yMax) - yScale(scaleYMax)));
|
|
1521
|
+
return Math.min(extraXPixels, extraYPixels);
|
|
1522
|
+
};
|
|
1506
1523
|
//# sourceMappingURL=utilities.js.map
|