Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rounded Tick Values in Declarative charts #33619

Open
wants to merge 6 commits into
base: user/atisjai/stronglyTypePlotly
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
Anush2303 marked this conversation as resolved.
Show resolved Hide resolved
"type": "patch",
"comment": "Rounded Ticks functionality in declarative charts.",
"packageName": "@fluentui/react-charting",
"email": "[email protected]",
"dependentChangeType": "patch"
}
3 changes: 2 additions & 1 deletion packages/charts/react-charting/etc/react-charting.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,7 @@ export interface ICartesianChartProps {
noOfCharsToTruncate?: number;
parentRef?: HTMLElement | null;
rotateXAxisLables?: boolean;
roundedTicks?: boolean;
secondaryYAxistitle?: string;
secondaryYScaleOptions?: {
yMinValue?: number;
Expand Down Expand Up @@ -1078,7 +1079,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth: number | undefined) => ScaleBand<string>;
// Warning: (ae-forgotten-export) The symbol "IYAxisParams" needs to be exported by the entry point index.d.ts
// Warning: (ae-forgotten-export) The symbol "IAxisData" needs to be exported by the entry point index.d.ts
createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean) => ScaleLinear<number, number, never>;
createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean, roundedTicks?: boolean) => ScaleLinear<number, number, never>;
culture?: string;
customizedCallout?: any;
datasetForXAxisDomain?: string[];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -422,6 +422,7 @@ export class CartesianChartBase
this.isIntegralDataset,
false,
this.props.supportNegativeData!,
this.props.roundedTicks!,
);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -447,6 +447,12 @@ export interface ICartesianChartProps {
*/
supportNegativeData?: boolean;

/**
* @default false
* The prop used to decide rounded ticks on y axis
*/
roundedTicks?: boolean;

/**
* Optional callback to access the IChart interface. Use this instead of ref for accessing
* the public methods and properties of the component.
Expand Down Expand Up @@ -665,6 +671,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
isIntegralDataset: boolean,
useSecondaryYScale?: boolean,
supportNegativeData?: boolean,
roundedTicks?: boolean,
) => ScaleLinear<number, number, never>;

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import { /* DataVizPalette, */getNextColor } from '../../utilities/colors';
import { GaugeChartVariant, IGaugeChartProps, IGaugeChartSegment } from '../GaugeChart/index';
import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index';
import { IVerticalBarChartProps } from '../VerticalBarChart/index';
import { findNumericMinMaxOfY } from '../../utilities/utilities';
import { Layout, PlotlySchema, PieData, PlotData, SankeyData } from './PlotlySchema';
import type { Datum, TypedArray } from './PlotlySchema';

Expand Down Expand Up @@ -419,9 +420,12 @@ export const transformPlotlyJsonToScatterChartProps = (
const isXNumber = isNumberArray(xValues);
const legend: string = series.name || `Series ${index + 1}`;
const lineColor = getColor(legend, colorMap, isDarkTheme);

return {
legend,
lineOptions:
series.line?.dash === 'dash'
Anush2303 marked this conversation as resolved.
Show resolved Hide resolved
? { strokeDasharray: '5', strokeLinecap: 'butt', strokeWidth: '2', lineBorderWidth: '4' }
: {},
data: xValues.map((x, i: number) => ({
x: isString ? (isXDate ? new Date(x as string) : isXNumber ? parseFloat(x as string) : x) : x,
y: series.y[i],
Expand All @@ -430,6 +434,7 @@ export const transformPlotlyJsonToScatterChartProps = (
} as ILineChartPoints;
});

const yMinMaxValues = findNumericMinMaxOfY(chartData);
const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);

const chartProps: IChartProps = {
Expand All @@ -450,6 +455,9 @@ export const transformPlotlyJsonToScatterChartProps = (
supportNegativeData: true,
xAxisTitle,
yAxisTitle,
roundedTicks: true,
yMinValue: yMinMaxValues.startValue,
yMaxValue: yMinMaxValues.endValue,
} as ILineChartProps;
}
};
Expand Down
Loading
Loading