Skip to content

Commit

Permalink
feat: added tooltip pin strategy + fixed dynamic updates of dot-series (
Browse files Browse the repository at this point in the history 
#92)

* feat: added tooltip pin strategy + fixed dynamic updates of dot-series
* fix: reinit in incremental change in case of dots
  • Loading branch information
@zefirka
zefirka authored Jul 12, 2023
1 parent 5a9aaca commit 3babd4b
Show file tree
Hide file tree
Showing 8 changed files with 104 additions and 17 deletions.
41 changes: 41 additions & 0 deletions demo/examples/dynamic-updates.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,12 @@ <h1>Dynamic updates</h1>
<div id="chart9"></div>
<button id="changeTitle">Change title</button>
</div>
<div class="container">
<div id="chart10"></div>
<button id="remix">Remix</button>
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
</div>

<script>
Expand Down Expand Up @@ -442,14 +448,49 @@ <h1>Dynamic updates</h1>
color: 'green',
id: '1',
},
{
data: [30, 60],
color: 'yellow',
id: '2',
},
],
legend: {
show: true,
},
});

window.changeTitle.onclick = () => {
yagr9.setConfig({
title: {text: 'Title Another', fontSize: 14},
});
};

const yagr10 = new Yagr(chart10, {
title: {text: 'Change dots', fontSize: 20},
timeline: [1, 2, 3, 4],
series: [
{
data: [1, 2, null, 4],
color: 'green',
id: '1',
type: 'dots',
},
],
});

window.remix.onclick = () => {
yagr10.setConfig({
timeline: [5, 6, 7, 8],
series: [
{
data: [3, null, 1, 4],
color: 'green',
id: '1',
type: 'dots',
},
],
});
};
</script>
</body>
</html>
41 changes: 31 additions & 10 deletions demo/examples/tooltip-with-datarefs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@ <h1>Tooltip Plugin</h1>
title: {
text: 'By scale, constant',
},
timeline: new Array(20).fill().map((_, i) => i * 1000),
timeline: new Array(5).fill().map((_, i) => i * 1000),
series: [
{data: new Array(20).fill().map((_, i) => Math.random() * 6), color: 'red'},
{data: new Array(20).fill().map((_, i) => Math.random() * 6), color: 'green'},
{data: new Array(5).fill().map((_, i) => Math.random() * 6), color: 'red'},
{data: new Array(5).fill().map((_, i) => Math.random() * 6), color: 'green'},
],
chart: {
select: {zoom: false},
Expand All @@ -56,6 +56,7 @@ <h1>Tooltip Plugin</h1>
},
tooltip: {
render: render,
strategy: 'all',
},
scales: {y: {min: 0, max: 6}},
});
Expand Down Expand Up @@ -121,13 +122,13 @@ <h1>Tooltip Plugin</h1>
})}
<tr>
<td>Total</td>
<td>${refs.y.scaleRefs.min.toFixed(2)}</td>
<td>${refs.y.scaleRefs.max.toFixed(2)}</td>
<td>${refs.y.scaleRefs.avg.toFixed(2)}</td>
<td>${refs.y.scaleRefs.sum.toFixed(2)}</td>
<td>${refs.y.scaleRefs.count.toFixed(2)}</td>
<td>${refs.y.scaleRefs.integral.toFixed(2)}</td>
<td>${refs.y.scaleRefs.last ?? '-'}</td>
<td>${refs.y.total.min.toFixed(2)}</td>
<td>${refs.y.total.max.toFixed(2)}</td>
<td>${refs.y.total.avg.toFixed(2)}</td>
<td>${refs.y.total.sum.toFixed(2)}</td>
<td>${refs.y.total.count.toFixed(2)}</td>
<td>${refs.y.total.integral.toFixed(2)}</td>
<td>${refs.y.total.last ?? '-'}</td>
</tbody>
</table>`;
}
Expand All @@ -143,6 +144,26 @@ <h1>Tooltip Plugin</h1>
log('event: hide\n');
});

let plToRemove = null;
y1.plugins.tooltip.on('pin', (_, data) => {
const yData = y1.uplot.data[0];

plToRemove = [
{
value: [yData[data.state.range[0].idx], yData[data.state.range[1].idx]],
color: 'rgba(0, 0, 0, 0.5)',
id: 'pined',
},
];
y1.plugins.plotLines.add(plToRemove, 'x');
y1.redraw();
});

y1.plugins.tooltip.on('unpin', (_, data) => {
y1.plugins.plotLines.remove(plToRemove);
y1.redraw();
});

y1.plugins.tooltip.on('render', (_, data) => {
if (data.state.range?.[0]) {
log(`range: ${data.state.range[0].value} - ${data.state.range[1]?.value}\n`);
Expand Down
17 changes: 15 additions & 2 deletions src/YagrCore/mixins/dynamic-updates.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,11 @@ function setSeriesImpl(
const {data, ...rest} = serie;
const seriesIdx = this.state.y2uIdx[id];

/** @TODO fixme (see Annotations.1) */
if (matched.type === 'dots' || serie.type === 'dots' || this.config.chart.series?.type === 'dots') {
batch.reinit = true;
}

if (useIncremental) {
matched.data = data ? matched.data.concat(data) : matched.data;
} else if (data?.length) {
Expand Down Expand Up @@ -354,8 +359,9 @@ function setSeriesImpl(
/** If we're adding new series or removing */
if (
series.length !== this.config.series.length ||
series.some(({id}) => {
return this.config.series.find((s) => s.id !== id);
series.some(({id, type}) => {
/** @TODO fixme (see Annotations.1) */
return type === 'dots' || this.config.series.find((s) => s.id !== id);
})
) {
batch.reinit = true;
Expand Down Expand Up @@ -506,3 +512,10 @@ export class DynamicUpdatesMixin<T extends MinimalValidConfig> {
this.batch((batch) => setConfigImpl(this, batch, newConfig));
}
}

/**
* Annotations:
* 1. If we're operating with dots type then uPlot will be reinitialized
* cause it's not possible to re-render dot's markers without reinit
*
*/
1 change: 0 additions & 1 deletion src/YagrCore/plugins/markers/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,6 @@ export default function YagrMarkersPlugin(yagr: Yagr, config: YagrConfig): Plugi
if (!(config.markers.show || opts.series.some((s) => s.type === 'dots'))) {
return;
}

opts.series.forEach((s, i) => markSeries(i, s));
},

Expand Down
2 changes: 1 addition & 1 deletion src/YagrCore/plugins/plotLines/plotLines.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export default function plotLinesPlugin(yagr: Yagr, plotLinesCfg: PlotLineConfig
remove: (plotLinesToRemove: PlotLineConfig[], scale?: string) => {
plotLines = plotLines.filter((p) => {
return !plotLinesToRemove.some((pl) => {
return deepIsEqual(pl, p) && (!scale || scale === p.scale);
return pl.id === p.id && (scale ? p.scale === scale : true);
});
});
},
Expand Down
7 changes: 5 additions & 2 deletions src/YagrCore/plugins/tooltip/tooltip.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,14 +75,15 @@ const DEFAULT_TOOLTIP_OPTIONS = {
sum: false,
render: renderTooltip,
pinable: true,
strategy: 'pin',
sort: undefined,
showIndicies: false,
hideNoData: false,
className: 'yagr-tooltip_default',
xOffset: TOOLTIP_X_OFFSET,
yOffset: TOOLTIP_Y_OFFSET,
virtual: false,
};
} as const;

export type TooltipPlugin = YagrPlugin<
{
Expand Down Expand Up @@ -133,6 +134,7 @@ class YagrTooltip {
this.over = yagr?.uplot?.over;
this.opts = {
...DEFAULT_TOOLTIP_OPTIONS,
strategy: options.pinable ? 'pin' : DEFAULT_TOOLTIP_OPTIONS.strategy,
tracking: yagr.config.chart.series?.type === 'area' ? 'area' : 'sticky',
value: this.defaultTooltipValueFormatter,
...options,
Expand Down Expand Up @@ -533,7 +535,8 @@ class YagrTooltip {

private onMouseUp = (event: MouseEvent) => {
const [from] = this.state.range || [];
if (this.opts.pinable && from && from.clientX === event.clientX) {

if (this.opts.strategy === 'all' || (this.opts.strategy === 'pin' && from && from.clientX === event.clientX)) {
this.pin(!this.state.pinned);
this.show();
this.renderTooltipCloses();
Expand Down
9 changes: 8 additions & 1 deletion src/YagrCore/plugins/tooltip/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,15 @@ export interface TooltipOptions {
sort?: PerScale<SortFn>;
/** Custom tooltip renderer */
render: (data: TooltipRenderOptions) => string;
/** Is tooltip pinable */
/** @deprecated Is tooltip pinable */
pinable: boolean;
/**
* Tooltip pin strategy:
* - none : tooltip is not pinable
* - pin : tooltip is pinable only on click
* - all : tooltip is pinable on drag and click
*/
strategy: 'none' | 'pin' | 'all';
/** Value formatter */
value: PerScale<ValueFormatter>;
/** Show DataLine index */
Expand Down
3 changes: 3 additions & 0 deletions src/YagrCore/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,9 @@ interface CommonPlotLineConfig {

/** Color of line */
color: string;

/** Unique id for updates */
id?: string;
}

export interface PBandConfig extends CommonPlotLineConfig {
Expand Down

0 comments on commit 3babd4b

Please sign in to comment.