Skip to content

Commit

Permalink
Use "lower whisker" and "upper whisker" instead of misleading "minimu…
Browse files Browse the repository at this point in the history
…m" and "maximum" on boxplot tooltips (#1825)

* whisker label on tooltip

* lintfix
romanlutz authored Dec 2, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 46afc20 commit b733264
Showing 7 changed files with 35 additions and 6 deletions.
1 change: 1 addition & 0 deletions libs/core-ui/src/index.ts
Original file line number Diff line number Diff line change
@@ -90,6 +90,7 @@ export * from "./lib/Interfaces/IMetaData";
export * from "./lib/Interfaces/TextExplanationInterfaces";
export * from "./lib/Interfaces/VisionExplanationInterfaces";
export * from "./lib/Highchart/BasicHighChart";
export * from "./lib/Highchart/BoxChartTooltip";
export * from "./lib/Highchart/ChartColors";
export * from "./lib/Highchart/FeatureImportanceDependence";
export * from "./lib/Highchart/FeatureImportanceBar";
17 changes: 17 additions & 0 deletions libs/core-ui/src/lib/Highchart/BoxChartTooltip.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import { localization } from "@responsible-ai/localization";
import { SeriesTooltipOptionsObject } from "highcharts";

// Fix tooltip to use "lower whisker" and "upper whisker"
// instead of "minimum" and "maximum"
export const boxChartTooltipDefaultSetting: SeriesTooltipOptionsObject = {
pointFormat:
'<span style="color:{point.color}">●</span> <b>{series.name}</b><br/>' +
`${localization.ModelAssessment.ModelOverview.BoxPlot.upperWhisker}: {point.high}<br/>` +
`${localization.ModelAssessment.ModelOverview.BoxPlot.upperQuartile}: {point.q3}<br/>` +
`${localization.ModelAssessment.ModelOverview.BoxPlot.median}: {point.median}<br/>` +
`${localization.ModelAssessment.ModelOverview.BoxPlot.lowerQuartile}: {point.q1}<br/>` +
`${localization.ModelAssessment.ModelOverview.BoxPlot.lowerWhisker} {point.low}<br/>`
};
6 changes: 3 additions & 3 deletions libs/core-ui/src/lib/Highchart/FeatureImportanceBar.tsx
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@ export class FeatureImportanceBar extends React.Component<
public constructor(props: IFeatureBarProps) {
super(props);
this.state = {
highchartOption: this.getHightChartOption()
highchartOption: this.getHighchartOption()
};
}

@@ -60,7 +60,7 @@ export class FeatureImportanceBar extends React.Component<
this.props.chartType !== prevProps.chartType
) {
this.setState({
highchartOption: this.getHightChartOption()
highchartOption: this.getHighchartOption()
});
}
}
@@ -95,7 +95,7 @@ export class FeatureImportanceBar extends React.Component<
);
}

private getHightChartOption(): IHighchartsConfig {
private getHighchartOption(): IHighchartsConfig {
return this.props.chartType === ChartTypes.Bar
? getFeatureImportanceBarOptions(
this.props.sortArray,
2 changes: 2 additions & 0 deletions libs/core-ui/src/lib/util/getFeatureImportanceBoxOptions.ts
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import { ITheme } from "@fluentui/react";
import { SeriesOptionsType } from "highcharts";
import _ from "lodash";

import { boxChartTooltipDefaultSetting } from "../Highchart/BoxChartTooltip";
import { getChartColors } from "../Highchart/ChartColors";
import { IGlobalSeries } from "../Highchart/FeatureImportanceBar";
import { IHighchartsConfig } from "../Highchart/IHighchartsConfig";
@@ -51,6 +52,7 @@ export function getFeatureImportanceBoxOptions(
color: data.color,
data: boxData.box,
name: data.name,
tooltip: boxChartTooltipDefaultSetting,
type: "boxplot"
});
});
Original file line number Diff line number Diff line change
@@ -6,7 +6,8 @@ import {
getBoxData,
getPrimaryChartColor,
IGenericChartProps,
JointDataset
JointDataset,
boxChartTooltipDefaultSetting
} from "@responsible-ai/core-ui";
import { localization } from "@responsible-ai/localization";
import { IPlotlyProperty } from "@responsible-ai/mlchartlib";
@@ -32,7 +33,8 @@ export function getDatasetBoxOption(
color: data.color,
data,
fillColor: theme.semanticColors.inputBackgroundChecked,
name: userFeatureName
name: userFeatureName,
tooltip: boxChartTooltipDefaultSetting
});
});
outlier.forEach((data: any) => {
7 changes: 6 additions & 1 deletion libs/localization/src/lib/en.json
Original file line number Diff line number Diff line change
@@ -1749,7 +1749,12 @@
"BoxPlot": {
"outlierProbability": "probability",
"outlierLabel": "Outliers",
"boxPlotSeriesLabel": "Box Plot"
"boxPlotSeriesLabel": "Box Plot",
"lowerWhisker": "Lower whisker",
"upperWhisker": "Upper whisker",
"median": "Median",
"lowerQuartile": "Lower quartile",
"upperQuartile": "Upper quartile"
},
"chartConfigApply": "Apply",
"chartConfigCancel": "Cancel",
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@
import { getTheme, IChoiceGroupOption } from "@fluentui/react";
import {
BasicHighChart,
boxChartTooltipDefaultSetting,
calculateBoxPlotData,
calculateBoxPlotDataFromErrorCohort,
defaultModelAssessmentContext,
@@ -124,6 +125,7 @@ export class ProbabilityDistributionBoxChart extends React.Component<IProbabilit
fillColor: theme.semanticColors.inputBackgroundChecked,
name: localization.ModelAssessment.ModelOverview.BoxPlot
.boxPlotSeriesLabel,
tooltip: boxChartTooltipDefaultSetting,
type: "boxplot"
},
{

0 comments on commit b733264

Please sign in to comment.