Skip to content

Update Example Charts with Tooltip #19

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update Example Charts with Tooltip #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
36 changes: 36 additions & 0 deletions example/custom-bar-chart/custom-chart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,30 @@ function getParsedEvent(evt: any) {
return _.pick(evt.native, ['clientX', 'clientY']);
}

function handleMouseOver(e: any, dataModel, ctx: CustomChartContext) {
if (!e.chart) {
return;
}
const elements = e.chart.getActiveElements();
if (elements.length > 0) {
const activeElement = elements[0];
const dataX = activeElement?.index;
const dataY = activeElement?.datasetIndex;
if (!_.isNil(dataX) && !_.isNil(dataY)) {
const point = dataModel.getPointDetails(dataX, dataY);
ctx.emitEvent(ChartToTSEvent.ShowToolTip, {
event: getParsedEvent(e),
point: {
tuple: point,
},
customTooltipContent: [],
});
}
} else {
ctx.emitEvent(ChartToTSEvent.HideToolTip);
}
}

function render(ctx: CustomChartContext) {
const chartModel = ctx.getChartModel();
const dataModel = getDataModel(chartModel);
Expand Down Expand Up @@ -166,6 +190,9 @@ function render(ctx: CustomChartContext) {
},
},
},
tooltip: {
enabled: false,
},
Comment on lines +193 to +195
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should not be enabled right? we are not using native tooltips

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thats why kept enabled to false

},
// responsive: true,
maintainAspectRatio: false,
Expand All @@ -191,7 +218,16 @@ function render(ctx: CustomChartContext) {
},
});
},
onHover: (event) => {
if (event.type === 'mousemove') {
handleMouseOver(event, dataModel, ctx);
}
if (event.type === 'mouseout') {
ctx.emitEvent(ChartToTSEvent.HideToolTip);
}
},
},
// onMouseOut: () => ctx.emitEvent(ChartToTSEvent.HideToolTip),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove.

});
} catch (e) {
console.error('renderfailed', e);
Expand Down
8 changes: 4 additions & 4 deletions example/custom-bar-chart/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion example/custom-bar-chart/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"vite": "^4.3.5"
},
"dependencies": {
"@thoughtspot/ts-chart-sdk": "0.0.1-alpha.7",
"@thoughtspot/ts-chart-sdk": "0.0.1-alpha.8",
"chart.js": "^4.3.0",
"chartjs-plugin-datalabels": "^2.2.0",
"lodash": "^4.17.21"
Expand Down
8 changes: 4 additions & 4 deletions example/custom-bar-chart/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions example/gantt/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion example/gantt/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"vite": "^4.3.9"
},
"dependencies": {
"@thoughtspot/ts-chart-sdk": "0.0.1-alpha.7",
"@thoughtspot/ts-chart-sdk": "0.0.1-alpha.8",
"highcharts": "^11.1.0",
"lodash": "^4.17.21"
}
Expand Down
8 changes: 4 additions & 4 deletions example/gantt/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

52 changes: 40 additions & 12 deletions example/gantt/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,13 @@ import {
ChartColumn,
ChartConfig,
ChartModel,
ChartToTSEvent,
CustomChartContext,
DataPointsArray,
Query,
getChartContext,
} from '@thoughtspot/ts-chart-sdk';
import { PointOptionsObject } from 'highcharts';
import Highcharts from 'highcharts/es-modules/masters/highcharts.src';
import 'highcharts/es-modules/masters/modules/gantt.src';
import _ from 'lodash';
Expand All @@ -16,12 +19,19 @@ function getDataForColumn(column: ChartColumn, dataArr: DataPointsArray) {
return _.map(dataArr.dataValue, (row) => row[idx]);
}

const getDataModel = (chartModel: any) => {
const columns = chartModel.columns;
const dataArr: DataPointsArray = chartModel.data[0].data;
function getParsedEvent(evt: any) {
return {
clientX: evt?.target?.plotX,
clientY: evt?.target?.plotY,
};
}

const getDataModel = (ctx: CustomChartContext) => {
const chartModel = ctx.getChartModel();
const columns = chartModel.columns;
const dataArr = chartModel?.data?.[0].data as DataPointsArray;
// create point from data
const points = dataArr.dataValue.map((row: any[], idx: number) => {
const points = dataArr?.dataValue.map((row: any[], idx: number) => {
return {
id: `${row[0]} ${row[1]}`,
parent: row[0],
Expand All @@ -31,8 +41,27 @@ const getDataModel = (chartModel: any) => {
completed: {
amount: row[4],
},
events: {
mouseOver: (e) => {
ctx.emitEvent(ChartToTSEvent.ShowToolTip, {
event: getParsedEvent(e),
point: {
tuple: [
{
columnId: columns[idx].id,
value: row[1],
},
],
},
customTooltipContent: [],
});
},
mouseOut: () => {
ctx.emitEvent(ChartToTSEvent.HideToolTip);
},
},
dependency: `${row[0]} ${row[5]}`,
};
} as PointOptionsObject;
});

// create projects from points & data
Expand Down Expand Up @@ -71,11 +100,7 @@ const getDataModel = (chartModel: any) => {
};

const renderChart = (ctx: any) => {
const chartModel = ctx.getChartModel();
console.log('chartModel:', chartModel);
console.log('data:', chartModel.data);

const dataModel = getDataModel(chartModel);
const dataModel = getDataModel(ctx);

console.log('dataModel:', dataModel);

Expand All @@ -85,7 +110,9 @@ const renderChart = (ctx: any) => {
text: 'Gantt Chart with Progress Indicators',
align: 'left',
},

tooltip: {
enabled: false,
},
xAxis: {
min: dataModel.minDate,
max: dataModel.maxDate,
Expand Down Expand Up @@ -127,7 +154,8 @@ const init = async () => {
// following order.
// [Project Name, Task, Start Date, End Date, Completion]

// TBD: do basic validation here to ensure that the chart is renderable
// TBD: do basic validation here to ensure that the chart is
// renderable
if (columns.length < 4) {
// not possible to plot a chart
return [];
Expand Down
14 changes: 7 additions & 7 deletions example/react/custom-bar-chart/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion example/react/custom-bar-chart/package.json
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no chart level code change for this?

Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
"@thoughtspot/ts-chart-sdk": "0.0.1-alpha.5",
"@thoughtspot/ts-chart-sdk": "0.0.1-alpha.8",
"chart.js": "^4.0.0",
"chartjs-plugin-datalabels": "^2.2.0",
"lodash": "^4.17.21",
Expand Down
8 changes: 4 additions & 4 deletions example/react/custom-bar-chart/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions example/sunburst/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion example/sunburst/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"author": "",
"license": "ISC",
"dependencies": {
"@thoughtspot/ts-chart-sdk": "0.0.1-alpha.7",
"@thoughtspot/ts-chart-sdk": "0.0.1-alpha.8",
"highcharts": "^11.0.1",
"lodash": "^4.17.21"
},
Expand Down
Loading