stats
stats({ container: string|HTMLElement, // Optional parameters templates: object, cssClasses: object, });
1
import { stats } from 'instantsearch.js/es/widgets';
About this widget
The stats
widget displays the total number of matching hits and the time it took to get them (time spent in the Algolia server).
Examples
1
2
3
stats({
container: '#stats',
});
Options
container
|
type: string|HTMLElement
Required
The CSS Selector or |
||
Copy
|
|||
templates
|
type: object
Optional
The templates to use for the widget. |
||
Copy
|
|||
cssClasses
|
type: object
default: {}
Optional
The CSS classes you can override:
|
||
Copy
|
Templates
You can customize parts of the widget’s UI using the Templates API.
Every template provides an html
function you can use as a tagged template. Using html
lets you safely provide templates as an HTML string. It works directly in the browser without a build step. See Templating your UI for more information.
The html
function is available starting from v4.46.0.
text
|
type: string|function
Optional
The template to use to customize the text. It exposes:
|
||
Copy
|
HTML output
1
2
3
4
5
6
7
8
9
<div class="ais-Stats">
<span class="ais-Stats-text">7,435 relevant results sorted out of 20,337 found in 1ms.</span>
</div>
<!-- or -->
<div class="ais-Stats">
<span class="ais-Stats-text">20,337 results found in 1ms.</span>
</div>
Customize the UI with connectStats
If you want to create your own UI of the stats
widget, you can use connectors.
To use connectStats
, you can import it with the declaration relevant to how you installed InstantSearch.js.
1
import { connectStats } from 'instantsearch.js/es/connectors';
Then it’s a 3-step process:
// 1. Create a render function
const renderStats = (renderOptions, isFirstRender) => {
// Rendering logic
};
// 2. Create the custom widget
const customStats = connectStats(
renderStats
);
// 3. Instantiate
search.addWidgets([
customStats({
// instance params
})
]);
Create a render function
This rendering function is called before the first search (init
lifecycle step)
and each time results come back from Algolia (render
lifecycle step).
const renderStats = (renderOptions, isFirstRender) => {
const {
number hitsPerPage,
number nbHits,
boolean areHitsSorted,
number nbSortedHits,
number nbPages,
number page,
number processingTimeMS,
string query,
object widgetParams,
} = renderOptions;
if (isFirstRender) {
// Do some initial rendering and bind events
}
// Render the widget
}
Rendering options
hitsPerPage
|
type: number
The maximum number of hits returned per page. |
||
Copy
|
|||
nbHits
|
type: number
The number of hits matched by the query. |
||
Copy
|
|||
areHitsSorted
|
type: boolean
Indicates whether Relevant sort is applied to the result. |
||
Copy
|
|||
nbSortedHits
|
type: number
The number of sorted hits from Relevant sort. |
||
Copy
|
|||
nbPages
|
type: number
The number of returned pages. Calculation is based on the total number of hits ( |
||
Copy
|
|||
page
|
type: number
The position of the current page (zero-based). |
||
Copy
|
|||
processingTimeMS
|
type: number
The time the server took to process the request, in milliseconds. This doesn’t include network time. |
||
Copy
|
|||
query
|
type: string
The query sent to the server. |
||
Copy
|
|||
widgetParams
|
type: object
All original widget options forwarded to the render function. |
||
Copy
|
Create and instantiate the custom widget
We first create custom widgets from our rendering function, then we instantiate them. When doing that, there are two types of parameters you can give:
- Instance parameters: they are predefined parameters that you can use to configure the behavior of Algolia.
- Your own parameters: to make the custom widget generic.
Both instance and custom parameters are available in connector.widgetParams
, inside the renderFunction
.
const customStats = connectStats(
renderStats
);
search.addWidgets([customStats()]);
Full example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// Create the render function
const renderStats = (renderOptions, isFirstRender) => {
const {
nbHits,
areHitsSorted,
nbSortedHits,
processingTimeMS,
query,
widgetParams,
} = renderOptions;
if (isFirstRender) {
return;
}
let count = '';
if (areHitsSorted) {
if (nbSortedHits > 1) {
count = `${nbSortedHits} relevant results`;
} else if (nbSortedHits === 1) {
count = '1 relevant result';
} else {
count = 'No relevant result';
}
count += ` sorted out of ${nbHits}`;
} else {
if (nbHits > 1) {
count += `${nbHits} results`;
} else if (nbHits === 1) {
count += '1 result';
} else {
count += 'no result';
}
}
widgetParams.container.innerHTML = `
${count} found in ${processingTimeMS}ms
${query ? `for <q>${query}</q>` : ''}
`;
};
// Create the custom widget
const customStats = connectStats(renderStats);
// Instantiate the custom widget
search.addWidgets([
customStats({
container: document.querySelector('#stats'),
})
]);