Skip to content

Commit

Permalink
feat(Graph): Improve data point tooltip (#736)
Browse files Browse the repository at this point in the history
  • Loading branch information
@geoffreykwan
geoffreykwan authored Aug 19, 2022
1 parent bfed7f5 commit 7589cf2
Showing 1 changed file with 95 additions and 37 deletions.
132 changes: 95 additions & 37 deletions src/assets/wise5/components/graph/graphService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,31 +332,21 @@ export class GraphService extends ComponentService {
return function () {
let text = '';
if (thisGraphService.isLimitXAxisType(xAxis)) {
text = thisGraphService.getSeriesText(this.series);
const xText = thisGraphService.getAxisTextForLimitGraph(
text = thisGraphService.getLimitAxisTypeTooltip(
this,
this.series,
this.x,
'xAxis',
xAxis,
roundValuesTo
);
const yText = thisGraphService.getAxisTextForLimitGraph(
this.series,
this.y,
'yAxis',
yAxis,
roundValuesTo
);
text += thisGraphService.combineXTextAndYText(xText, yText);
} else if (thisGraphService.isCategoriesXAxisType(xAxis)) {
const xText = thisGraphService.getXTextForCategoriesGraph(
this.point,
this.x,
text = thisGraphService.getCategoriesAxisTypeTooltip(
this,
this.series,
xAxis,
yAxis,
roundValuesTo
);
const yText = thisGraphService.getYTextForCategoriesGraph(this.y, roundValuesTo);
text = `<b>${xText}</b><br/>${this.series.name}: <b>${yText}</b>`;
}
if (thisGraphService.pointHasCustomTooltip(this.point)) {
text += '<br/>' + this.point.tooltip;
Expand All @@ -373,12 +363,21 @@ export class GraphService extends ComponentService {
return xAxis.type === 'categories';
}

getLimitAxisTypeTooltip(
point: any,
series: any,
xAxis: any,
yAxis: any,
roundValuesTo: string
): string {
const seriesName = this.getSeriesText(series);
const xText = this.getAxisTextForLimitGraph(series, point.x, 'xAxis', xAxis, roundValuesTo);
const yText = this.getAxisTextForLimitGraph(series, point.y, 'yAxis', yAxis, roundValuesTo);
return this.combineSeriesNameXTextYText(seriesName, xText, yText);
}

getSeriesText(series: any): string {
let text = '';
if (series.name !== '') {
text = '<b>' + series.name + '</b><br/>';
}
return text;
return series.name === '' ? '' : `<b>${series.name}</b>`;
}

getAxisTextForLimitGraph(
Expand All @@ -388,37 +387,93 @@ export class GraphService extends ComponentService {
axisObj: any,
roundValuesTo: string
): string {
let text = '';
const label = this.getAxisTitle(series, axisObj);
const value = this.getValueForLimitGraph(series, num, roundValuesTo);
const units = this.getAxisUnits(series, axisName, axisObj);
return this.getPointDisplay(label, value, units);
}

getAxisTitle(series: any, axisObj: any): string {
if (Array.isArray(axisObj)) {
if (axisObj[series.index].title.text == null || axisObj[series.index].title.text === '') {
return series.name;
} else {
return axisObj[series.index].title.text;
}
} else if (axisObj.title.text == null || axisObj.title.text === '') {
return series.name;
} else {
return axisObj.title.text;
}
}

getValueForLimitGraph(series: any, num: number, roundValuesTo: string): any {
if (
series.data[num] != null &&
series.data[num].category === num &&
series.data[num].name != null
) {
text = series.data[num].name;
return series.data[num].name;
} else {
text = `${this.performRounding(num, roundValuesTo)}`;
return this.performRounding(num, roundValuesTo);
}
const axisUnits = this.getAxisUnits(series, axisName, axisObj);
if (axisUnits != null && axisUnits !== '') {
text += ' ' + axisUnits;
}
return text;
}

combineXTextAndYText(xText: string, yText: string): string {
let text = xText;
getPointDisplay(label: string, value: any, units: string): string {
return `${label}: <b>${value} ${units}</b>`;
}

combineSeriesNameXTextYText(seriesName: string, xText: string, yText: string): string {
let text = '';
if (seriesName !== '') {
text += seriesName + '<br/>';
}
if (xText !== '') {
text += ', ';
text += xText + '<br/>';
}
if (yText !== '') {
text += yText + '<br/>';
}
text += yText;
return text;
}

getXTextForCategoriesGraph(point: any, x: number, xAxis: any, roundValuesTo: string): any {
getCategoriesAxisTypeTooltip(
point: any,
series: any,
xAxis: any,
yAxis: any,
roundValuesTo: string
): string {
const seriesName = this.getSeriesText(series);
const xText = this.getXTextForCategoriesGraph(
series,
point.point,
point.x,
xAxis,
roundValuesTo
);
const yText = this.getYTextForCategoriesGraph(series, point.y, yAxis, roundValuesTo);
return this.combineSeriesNameXTextYText(seriesName, xText, yText);
}

getXTextForCategoriesGraph(
series: any,
point: any,
x: number,
xAxis: any,
roundValuesTo: string
): string {
const label = xAxis.title.text;
const value = this.getXValueForCategoriesGraph(point, x, xAxis, roundValuesTo);
const units = this.getAxisUnits(series, xAxis.name, xAxis);
return this.getPointDisplay(label, value, units);
}

getXValueForCategoriesGraph(point: any, x: number, xAxis: any, roundValuesTo: string): any {
const category = this.getCategoryByIndex(point.index, xAxis);
if (category != null) {
return category;
} else if (point.category === x) {
} else if (point.category === x && point.name != null) {
return point.name;
} else {
return this.performRounding(x, roundValuesTo);
Expand All @@ -432,8 +487,11 @@ export class GraphService extends ComponentService {
return null;
}

getYTextForCategoriesGraph(y: number, roundValuesTo: string) {
return this.performRounding(y, roundValuesTo);
getYTextForCategoriesGraph(series: any, y: number, axis: any, roundValuesTo: string): string {
const label = this.getAxisTitle(series, axis);
const value = this.performRounding(y, roundValuesTo);
const units = this.getAxisUnits(series, axis.name, axis);
return this.getPointDisplay(label, value, units);
}

performRounding(number: number, roundValuesTo: string): number {
Expand Down

0 comments on commit 7589cf2

Please sign in to comment.