...
The default file looks like the following:
Code Block | ||
---|---|---|
| ||
{ "left": [ { "type": "FieldFacet", "title": "Extension", "field": "extension", "op": "OR", "minShow": 2, "maxShow": 5 }, { "type": "FieldFacet", "title": "Language", "field": "language", "op": "OR", "minShow": 2, "maxShow": 5 }, { "type": "FieldFacet", "title": "Source", "field": "repo_source", "op": "OR", "minShow": 2, "maxShow": 5, "show": false }, { "type": "QueryFacet", "title": "Creation Date", "queries": [ "creation_date:[NOW/DAY TO NOW]", "creation_date:[NOW/DAY-7DAY TO NOW/DAY]", "creation_date:[NOW/DAY-30DAY TO NOW/DAY-8DAY]", "creation_date:([1970-09-01T00:01:00Z TO NOW/DAY-31DAY] || [* TO 1970-08-31T23:59:59Z])", "creation_date:[1970-09-01T00:00:00Z TO 1970-09-01T00:00:00Z]" ], "labels": [ "Today", "From Yesterday Up To 7 days", "From 8 Days Up To 30 days", "Older than 31 days", "No date" ], "id": "date_facet", "minShow": 5, "children": [ { "type": "DateFacetCustom" } ] }, { "type": "HierarchicalFacet", "field": "urlHierarchy", "title": "hierarchical facet", "separator": "/" }, { "type": "AggregatorFacet", "title": "Aggregator facet" } ], "center": { "main": [ { "type": "SearchInformation", "data": ["filters", "facets"] }, { "type": "ResultsList", "data": ["title", "url", "logo", "previewButton", "extract"] , } ], "rightfolderLinkSources": ["enron"] } |
The “left” key corresponds to what is displayed in the left column of the interface.
The “center” key corresponds to what is displayed in the center (main) part of the interface.
The “right” key is not used but present for a potential future right column.
Each of these keys refer to an array of objects representing UI components.
Each object has a “type” property declaring the component to be instantiated as well as parameters for this component.
Supported components are:
FieldFacet
QueryFacet
DateFacetCustom
HierarchicalFacet
SearchInformation
ResultsList
RangeFacet
Below are the details of each component and their parameters.
Field Facet
A field facet displays a facet tied to a given field, with the possibility to filter results based on the field values.
It looks like this:
...
It is usually used on the left column.
The definition of a field facet looks like the following:
Code Block |
---|
{, "folderTarget": "_blank", "typepreviewTarget": "FieldFacet_self", } "title": "Extension", ], "fieldtabs": "extension", [ { "type": "FieldFacet", "field": "repo_source", "max": 3 } ] "op": "OR", }, "right": [], "searchBar": { "suggesters": [ { "minShowtype": 2"BASIC", "maxShowprops": { 5 }, |
Parameters:
title: the title showed at the top of the facet
field: the solr field associated to the facet
op: operator, either “OR” or “AND”. Tells how documents are shown when selecting multiple entries in the facet. If “OR” documents need to have at least one selected element in the concerned field to be selected. If “AND” they need to have all selected elements as part of the concerned field
minShow: The maximum number of elements that are shown if the facet is not expanded
maxShow: The maximum number of elements that are shown if the facet is expanded (after clicking show more)
variant (optional) : specify the type of FieldFacet to use. It can take these values :
checkbox (default) : use classic FieldFacet with a checkbox list
autocomplete : use a search bar with autocomplete
show (optional, default is true) : True to display the FieldFacet in the left panel. This option is only an UI effect. The facet is still registered as a field facet in the query.
QueryFacet:
A query facet displays a facet tied to provided queries with the possibility to filter results based on those queries. It can include children components, providing the ability for the user to provide a custom query. In the example below, we present a way to provide a custom date range.
It looks like this:
...
It is usually used on the left column.
The definition of a query facet looks like the following:
Code Block |
---|
{ "type": "QueryFacet", "title": "Creation Date", "queries": [ "creation_date:[NOW/DAY TO NOW]"maxSuggestion": 5, "title": "SUGGESTED QUERIES", "subtitle": "Queries extending your current query terms" } }, { "type": "ENTITY", "props": { "field": "authorTokens", "suggester": "suggestAuthors", "dictionary": "suggesterEntityAuthors", "asFacet": false, "maxSuggestion": 5, "title": "Entities suggested", "subtitle": "Queries extending your current query terms" } } ] }, "hotkeys": { "activeSearchBar": { "cmd": "shift", "creation_date:[NOW/DAY-7DAY TO NOW/DAY]"key": "S", "creation_date:[NOW/DAY-30DAY TO NOW/DAY-8DAY]","enable": false }, "deactiveSearchBar"creation_date:([1970-09-01T00:01:00Z TO NOW/DAY-31DAY] || [* TO 1970-08-31T23:59:59Z]): { "cmd": "escape", "enable"creation_date:[1970-09-01T00:00:00Z TO 1970-09-01T00:00:00Z]" false } ]}, "labelsdevMode": [ { "Todayenable": false, "banner": { "From Yesterday Up To 7 days"location": "BOTTOM", "From 8 Days Up To 30 days", "Older than 31 days", "No date" ], "id": "date_facet", "minShow": 5"content": "Dev mode banner content", "childrenprops": [ { "typebackgroundColor": "DateFacetCustomorange" } } } } ] } |
Parameters:
title: the title showed at the top of the facet
queries: the solr queries to execute for the facet
labels: The labels to be shown to the users alongside each query result
id: an internal unique identifier that you must specify
minShow: The maximum number of elements that are shown if the facet is not expanded
maxShow: The maximum number of elements that are shown if the facet is expanded (after clicking show more)
children: an array of children components displayed directly below this facet. Made available to specify components allowing users to specify custom queries, like the one to specify a custom date range shown in the example
DateFacetCustom
Allows users to specify a custom date range applied to the creation_date field. Specifically built to be displayed together with the creation date query facet.
Looks like this:
...
defined like this:
Code Block |
---|
{
"type": "DateFacetCustom"
} |
Has no parameters.
HierarchicalFacet
Displays a documents hierarchy as a facet, based on the information stored in a dedicated solr field.
It looks like the following:
...
The definition looks like:
Code Block |
---|
} |
The “left” key corresponds to what is displayed in the left column of the interface.
The “center” key corresponds to what is displayed in the center (main) part of the interface. It contains two objects, a “main” object which may contain any component, and a “tabs” containing the declaration of tabs that are explained here: https://datafari.atlassian.net/wiki/spaces/DATAFARI/pages/2625634305/Customizing+DatafariUI#Search-Tabs.
The “right” key is not used but present for a potential future right column.
Each of these keys refer to an array of objects representing UI components.
Each object has a “type” property declaring the component to be instantiated as well as parameters for this component.
Supported components are:
FieldFacet
QueryFacet
DateFacetCustom
HierarchicalFacet
SearchInformation
ResultsList
RangeFacet
AggregatorFacet
Then, there is the “searchBar” key, that contains an object giving properties for the search bar and the suggesters to use in the “suggesters” array.
Two types of suggesters are supported:
BASIC
ENTITY
Finaly, some customization of the hotkeys is possible through “hotkeys” object.
Below are the details of each component and their parameters.
Field Facet
A field facet displays a facet tied to a given field, with the possibility to filter results based on the field values.
It looks like this:
...
It is usually used on the left column.
The definition of a field facet looks like the following:
Code Block | ||
---|---|---|
| ||
{ "type": "HierarchicalFacet"FieldFacet", "title": "Extension", "field": "urlHierarchyextension", "titleop": "hierarchical facet""OR", "minShow": 2, "separator": "/" "maxShow": 5, "show": true, "sendToSolr": true }, |
Parameters:
title: the title showed at the top of the facet
field: the solr field in which hierarchy information are stored. The default is urlHierarchy in Datafari.
separator: the separator used in the solr filed to separate levels of hierarchy. The default is “/” in Datafari
SearchInformation
Displays some information about the current search, such as:
currently searched terms
spell checking information if available as well as automatic spell checking query firing if 0 results were found
filters applied
facet filters applied
It looks like this:
...
The definition looks like:
Code Block |
---|
{
"type": "SearchInformation",
"data": ["filters", "facets"]
} |
Parameters:
data: An array of data to be displayed. Possible values:
“filters”: displays the “other filters” section if present
“facets”: displays the facets in the filters section if present
The current search and spellcheck info are always displayed if this component is used.
Search Tabs
The UI configuration allows to add graphical tabs below the search bar, between the All content tab and the Search Tools tab.
As of the writing of this documentation (March 2022), we propose two types of tabs :
FieldFacet
: it will generate as many tabs as a field contains out of a result query. For example, with the "extension" field in our demo, it will create one tab per type of extension returned by the search query (for instance one tab for the pdf type, one for the doc type etc).
This type of tab has two parameters :field
: the field name used to generate the tabsmax
: the max number of tabs that can be generatedRaw
: This type of tab is called raw because it is just a link to a given URL. It has 2 parameters :label
: the label of the tab (it is i18n)url
: an HTTP URL.target
: (optional) define where to open the url. If absent, default is _self. Values accepted: _self OR _blank
These tabs can be declared as illustrated below in the ui-config.json,
in the center property :
...
language | json |
---|
...
associated to the facet
op: operator, either “OR” or “AND”. Tells how documents are shown when selecting multiple entries in the facet. If “OR” documents need to have at least one selected element in the concerned field to be selected. If “AND” they need to have all selected elements as part of the concerned field
minShow: The maximum number of elements that are shown if the facet is not expanded
maxShow: The maximum number of elements that are shown if the facet is expanded (after clicking show more)
variant (optional) : specify the type of FieldFacet to use. It can take these values :
checkbox (default) : use classic FieldFacet with a checkbox list
autocomplete : use a search bar with autocomplete
show (optional, default is true) : True to display the FieldFacet in the left panel. This option is only an UI effect. The facet is still registered as a field facet in the query.
sendToSolr (optional, default is true): True to add the facet to the query made to the backend. Need to be true to use the facet, also required to be true for the use of field facet tabs (https://datafari.atlassian.net/wiki/spaces/DATAFARI/pages/2625634305/Customizing+DatafariUI#Search-Tabs )
QueryFacet:
A query facet displays a facet tied to provided queries with the possibility to filter results based on those queries. It can include children components, providing the ability for the user to provide a custom query. In the example below, we present a way to provide a custom date range.
It looks like this:
...
It is usually used on the left column.
The definition of a query facet looks like the following:
Code Block |
---|
{ "type": "QueryFacet", "title": "Creation Date", "typequeries": "SearchInformation",[ "data": ["filters", "facets"]creation_date:[NOW/DAY TO NOW]", }, "creation_date:[NOW/DAY-7DAY TO NOW/DAY]", { "type": "ResultsList"creation_date:[NOW/DAY-30DAY TO NOW/DAY-8DAY]", "data": ["title", "url", "logo", "previewButton", "extract"]creation_date:([1970-09-01T00:01:00Z TO NOW/DAY-31DAY] || [* TO 1970-08-31T23:59:59Z])", }"creation_date:[1970-09-01T00:00:00Z TO 1970-09-01T00:00:00Z]" ], "tabslabels": [ { "type": "FieldFacetToday", "field": "extension", "max": 3 }, "From Yesterday Up { "type": "FieldFacetTo 7 days", "field": "repo_source", "max": 3 } "From 8 Days Up To 30 days", "Older than 31 days", { "type": "Raw",No date"label": "google", "url": "https://www.google.fr" }, ], { "type": "Raw", "labelid": "LinkedIndate_facet", "url": "https://www.linkedin.com" "minShow": 5, "children": [ { "type": "DateFacetCustom" } ] } |
Note |
---|
A field tab is based on a facet, one of those defined in the |
Here is an example :
...
language | json |
---|
...
Parameters:
title: the title showed at the top of the facet
queries: the solr queries to execute for the facet
labels: The labels to be shown to the users alongside each query result
id: an internal unique identifier that you must specify
minShow: The maximum number of elements that are shown if the facet is not expanded
maxShow: The maximum number of elements that are shown if the facet is expanded (after clicking show more)
children: an array of children components displayed directly below this facet. Made available to specify components allowing users to specify custom queries, like the one to specify a custom date range shown in the example
DateFacetCustom
Allows users to specify a custom date range applied to the creation_date field. Specifically built to be displayed together with the creation date query facet.
Looks like this:
...
defined like this:
Code Block | ||
---|---|---|
| ||
{
"type": "DateFacetCustom"
} |
Has no parameters.
HierarchicalFacet
Displays a documents hierarchy as a facet, based on the information stored in a dedicated solr field.
It looks like the following:
...
The definition looks like:
Code Block | ||
---|---|---|
| ||
{ "type": "FieldFacetHierarchicalFacet", "titlefield": "ExtensionurlHierarchy", "fieldtitle": "extension", "op": "OR"hierarchical facet", "minShow": 2, "maxShowseparator": 5, "show": false"/" }, { "type": "FieldFacet", "title": "Language", "field": "language", |
Parameters:
title: the title showed at the top of the facet
field: the solr field in which hierarchy information are stored. The default is urlHierarchy in Datafari.
separator: the separator used in the solr filed to separate levels of hierarchy. The default is “/” in Datafari
Aggregator Facet
Displays a facet to chose the sources to aggregate from when the aggregator is active. Source names are retrieved from the backend.
The definition looks like
Code Block | ||
---|---|---|
| ||
{ "optype": "ORAggregatorFacet", "minShowtitle": 2,"Aggregator facet" "maxShow": 5 }, } |
Parameters:
title: the title showed at the top of the facet
SearchInformation
Displays some information about the current search, such as:
currently searched terms
spell checking information if available as well as automatic spell checking query firing if 0 results were found
filters applied
facet filters applied
It looks like this:
...
The definition looks like:
Code Block | ||
---|---|---|
| ||
{ "type": "FieldFacetSearchInformation", "titledata": ["Sourcefilters", "fieldfacets": "repo_source", "op": "OR", "minShow": 2, "maxShow": 5 } ], "center": { "main": [ { "type": "SearchInformation", "data": ["filters", "facets"] }, { "type": "ResultsList", "data": ["title", "url", "logo", "previewButton", "extract"], "folderLinkSources": [], "folderTarget": "_blank", "previewTarget": "_self" } ], "tabs": [ { "type": "FieldFacet", "field": "extension", "max": 3 }, { "type": "FieldFacet", "field": "repo_source", "max": 3 } ] }, "right": [], "searchBar": { "suggesters": [] } } |
Note the repo_source field
defined in the FieldFacet tab is also declared as the field
parameters of a FieldFacet facet in the left section.
...
ResultsList
Shows the list of results.
Looks like this:
...
The definition looks like this, in ui-config.json
Code Block | ||
---|---|---|
| ||
{ ] } |
Parameters:
data: An array of data to be displayed. Possible values:
“filters”: displays the “other filters” section if present
“facets”: displays the facets in the filters section if present
The current search and spellcheck info are always displayed if this component is used.
Search Tabs
The UI configuration allows to add graphical tabs below the search bar, between the All content tab and the Search Tools tab.
As of the writing of this documentation (March 2022), we propose two types of tabs :
FieldFacet
: it will generate as many tabs as a field contains out of a result query. For example, with the "extension" field in our demo, it will create one tab per type of extension returned by the search query (for instance one tab for the pdf type, one for the doc type etc).
This type of tab has two parameters :field
: the field name used to generate the tabsmax
: the max number of tabs that can be generatedRaw
: This type of tab is called raw because it is just a link to a given URL. It has 2 parameters :label
: the label of the tab (it is i18n)url
: an HTTP URL.target
: (optional) define where to open the url. If absent, default is _self. Values accepted: _self OR _blank
These tabs can be declared as illustrated below in the ui-config.json,
in the center property :
Code Block | ||
---|---|---|
| ||
"center": { "main": [ { "type": "SearchInformation", "data": ["filters", "facets"] }, { "type": "ResultsList", "data": ["title", "url", "logo", "previewButton", "extract"], } "folderLinkSources": [], "folderTargettabs": "_blank",[ "previewTarget { "type": "_selfFieldFacet" } |
Parameters:
data
: An array of data to be displayed. Possible values:title
: Displays the document title for each result if presenturl
: Displays the url for each result if presentlogo
: Displays the file type logo for each result if presentpreviewButton
: Displays the preview button for each result if presentextract
: Displays the text snippet with highlighting for each result if present
folderLinkSource
(default is an empty array[]
in which case nothing will be displayed) : array of sources to open as a folder. Needs to match with sources declared (case sensitive). For instance, if you have a source named “Enron”, the array should be["Enron"]
folderTarget
(optional, default is_blank
): target to open folder. Values are the same as the HTML attributetarget
. The values you can declare mandatorily come from the repo_source solr field, displayed via the source facet field to users.previewTarget
(optional, default_self
): target to open preview page. Values are the same as the HTML attributetarget
.
Any data not present is not displayed. If the data parameter is absent or is not an array, the default (showing everything) is used. Values other than the one given above are ignored. An empty array results in the following (Yes this is useless but possible):
...
Range Facet
Note |
---|
This facet is still in development as of March 15th, 2022 |
Range Facet is a facet that displays a bar chart with a range selection tool. It is a generic react component that could be used to display any kind of dual axis data.
...
From ui-config.json
file, you can customize the following parameters of the chart :
...
Name
...
Description
...
type
...
Facet type set to RangeFacet
...
title
...
i18n facet title
...
field
...
Solr field to bind
...
start
...
Solr range start
...
end
...
Solr range end
...
gap
...
Solr range gap
...
yDataKey
...
Key used to format data and used to display the Y bar legend. Key is i18n.
...
ranges (Optional)
...
Array of predefined integer ranges to get as much as radio button selection to give to the brush tool a predefined range. Default is an empty array and the ranges controls are hidden.
...
rangeLabel (Optional)
...
i18n label next to range value
...
showBrushBounds (Optional)
...
true
to display the brush bounds under the brush tool. Default is false
...
barFillColor (Optional)
...
Bar fill color. Default is #679439AA
(smooth green)
...
brushStrokeColor (Optional)
...
brush stroke color (range selection tool under the graph). Default is #679439
(smooth green)
Configuration example include in left facet :
Code Block | ||
---|---|---|
| ||
"left": [ { "type": "FieldFacet", "title": "Extension", "field": "extension", "op": "OR", "minShow": 2, "maxShow": 5 }, { "type": "FieldFacet", "title": "Language", "field": "language", "op": "OR, "field": "extension", "max": 3 }, { "type": "FieldFacet", "field": "repo_source", "max": 3 }, { "type": "Raw", "label": "google", "url": "https://www.google.fr" }, { "type": "Raw", "label": "LinkedIn", "url": "https://www.linkedin.com" } ] } |
Note |
---|
A field tab is based on a facet, one of those defined in the |
Here is an example :
Code Block | ||
---|---|---|
| ||
{
"left": [
{
"type": "FieldFacet",
"title": "Extension",
"field": "extension",
"op": "OR",
"minShow": 2,
"maxShow": 5,
"show": false
},
{
"type": "FieldFacet",
"title": "Language",
"field": "language",
"op": "OR",
"minShow": 2,
"maxShow": 5
},
{
"type": "FieldFacet",
"title": "Source",
"field": "repo_source",
"op": "OR",
"minShow": 2,
"maxShow": 5
}
],
"center": {
"main": [
{
"type": "SearchInformation",
"data": ["filters", "facets"]
},
{
"type": "ResultsList",
"data": ["title", "url", "logo", "previewButton", "extract"],
"folderLinkSources": [],
"folderTarget": "_blank",
"previewTarget": "_self"
}
],
"tabs": [
{ "type": "FieldFacet", "field": "extension", "max": 3 },
{ "type": "FieldFacet", "field": "repo_source", "max": 3 }
]
},
"right": [],
"searchBar": {
"suggesters": []
}
} |
Note the repo_source field
defined in the FieldFacet tab is also declared as the field
parameters of a FieldFacet facet in the left section.
...
ResultsList
Shows the list of results.
Looks like this:
...
The definition looks like this, in ui-config.json
Code Block | ||
---|---|---|
| ||
{
"type": "ResultsList",
"data": ["title", "url", "logo", "previewButton", "extract"],
"folderLinkSources": [],
"folderTarget": "_blank",
"previewTarget": "_self"
} |
Parameters:
data
: An array of data to be displayed. Possible values:title
: Displays the document title for each result if presenturl
: Displays the url for each result if presentlogo
: Displays the file type logo for each result if presentpreviewButton
: Displays the preview button for each result if presentextract
: Displays the text snippet with highlighting for each result if present
folderLinkSource
(default is an empty array[]
in which case nothing will be displayed) : array of sources to open as a folder. Needs to match with sources declared (case sensitive). For instance, if you have a source named “Enron”, the array should be["Enron"]
folderTarget
(optional, default is_blank
): target to open folder. Values are the same as the HTML attributetarget
. The values you can declare mandatorily come from the repo_source solr field, displayed via the source facet field to users.previewTarget
(optional, default_self
): target to open preview page. Values are the same as the HTML attributetarget
.
Any data not present is not displayed. If the data parameter is absent or is not an array, the default (showing everything) is used. Values other than the one given above are ignored. An empty array results in the following (Yes this is useless but possible):
...
Range Facet
Note |
---|
This facet is still in development as of March 15th, 2022 |
Range Facet is a facet that displays a bar chart with a range selection tool. It is a generic react component that could be used to display any kind of dual axis data.
...
From ui-config.json
file, you can customize the following parameters of the chart :
Name | Description |
---|---|
type | Facet type set to |
title | i18n facet title |
field | Solr field to bind |
start | Solr range start |
end | Solr range end |
gap | Solr range gap |
yDataKey | Key used to format data and used to display the Y bar legend. Key is i18n. |
ranges (Optional) | Array of predefined integer ranges to get as much as radio button selection to give to the brush tool a predefined range. Default is an empty array and the ranges controls are hidden. |
rangeLabel (Optional) | i18n label next to range value |
showBrushBounds (Optional) |
|
barFillColor (Optional) | Bar fill color. Default is |
brushStrokeColor (Optional) | brush stroke color (range selection tool under the graph). Default is |
Configuration example include in left facet :
Code Block | ||
---|---|---|
| ||
"left": [ { "type": "FieldFacet", "title": "Extension", "field": "extension", "op": "OR", "minShow": 2, "maxShow": 5 }, { "type": "FieldFacet", "title": "Language", "field": "language", "op": "OR", "minShow": 2, "maxShow": 5 }, { "type": "FieldFacet", "title": "Source", "field": "repo_source", "op": "OR", "minShow": 2, "maxShow": 5, "show": false }, { "type": "QueryFacet", "title": "Creation Date", "queries": [ "creation_date:[NOW/DAY TO NOW]", "creation_date:[NOW/DAY-7DAY TO NOW/DAY]", "creation_date:[NOW/DAY-30DAY TO NOW/DAY-8DAY]", "creation_date:([1970-09-01T00:01:00Z TO NOW/DAY-31DAY] || [* TO 1970-08-31T23:59:59Z])", "creation_date:[1970-09-01T00:00:00Z TO 1970-09-01T00:00:00Z]" ], "labels": [ "Today", "From Yesterday Up To 7 days", "From 8 Days Up To 30 days", "Older than 31 days", "No date" ], "id": "date_facet", "minShow": 25, "maxShowchildren": [ 5 }, { { "type": "FieldFacetDateFacetCustom", "title": "Source",} ] "field": "repo_source" }, { "optype": "ORRangeFacet", "minShowfield": 2"creation_date", "maxShowstart": 5"NOW-300MONTH", "showend": false }"NOW/MONTH", { "typegap": "QueryFacet+1MONTH", "title": "CreationDate DateRange", "queriesyDataKey": ["doc", "creation_date:[NOW/DAY TO NOW]", "ranges": [1, 3, 6, 12, 36], "creation_date:[NOW/DAY-7DAY TO NOW/DAY]rangeLabel": "Month", "creation_date:[NOW/DAY-30DAY TO NOW/DAY-8DAY]","showBrushBounds": true }, "creation_date:([1970-09-01T00:01:00Z TO NOW/DAY-31DAY] || [* TO 1970-08-31T23:59:59Z]){ "type": "RangeFacet", "field": "creation_date:[1970-09-01T00:00:00Z TO 1970-09-01T00:00:00Z]"page_count", "start": "0", ]"end": "99", "labelsgap": ["+1", "title": "Page count"Today", "From Yesterday Up To 7 days", "From 8 Days Up To 30 days"yDataKey": "page", "ranges": [1, 3, 6, 12, 36], "rangeLabel": "Page", "showBrushBounds"Older: thantrue 31 days", }, { "No date" ]"type": "HierarchicalFacet", "idfield": "date_faceturlHierarchy", "minShowtitle": "hierarchical 5facet", "childrenseparator": "/" [ }, { "type": "DateFacetCustomAggregatorFacet", "title": "Aggregator }facet" } ] }, { ] |
...
Example of override default parameters :
Code Block | ||
---|---|---|
| ||
{ "type": "RangeFacet", "field": "creationpage_datecount", "start": "NOW-300MONTH0", "end": "NOW/MONTH99", "gap": "+1MONTH1", "title": "Page count", "titleyDataKey": "Date Rangepage", "rangeLabel": "Page", "yDataKeybarFillColor": "docorange", "rangesbrushStrokeColor": [1, 3, 6, 12, 36], "rangeLabel": "Month", "showBrushBounds": true }, { "type": "RangeFacet", "field": "page_count", "start": "0", "end": "99""black" } |
You get the following result :
...
You can create/extend the actual RangeFacet
component. It is based on the RangeBarChart
component, a customizable react bar chart component, based itself on the https://recharts.org/en-US library.
The RangeBarChart
component can be embed into any other component like the RangeFacet
that displays the graph as a facet with a maximal height. This component uses the following props :
Prop name | Type | Description | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
data | Array | an array of objects that represents the data to be displayed in the graph. The minimal object structure must be as follows :
Example :
|
...
...
X labels will be based on With the previous example, the dates are used for X labels.
| ||||||
xDataKey | string | Name of the field in the data array object for X axis | ||||
yDataKey | string | Name of the field in the data array object for Y axis | ||||
maxHeight | number|string | Max height of the graph. Default is | ||||
width | number|string | Width of the graph. Default is | ||||
startIndex | number | Start index of the brush tool | ||||
endIndex | number | End index of the brush tool | ||||
brushStrokeColor | string | CSS color of the brush tool stroke. Default is | ||||
barFillColor | string | CSS color of the chart bar. Default is | ||||
xTickFormater | function<value>:string | A function that takes the X axis label value and returns a formatted value. Default is undefined. | ||||
brushLabelFormatter | function<value>:string | A function that formats the brush label as you will. Default returns the current value | ||||
onSelectChanged | function<startIndex, endIndex>:void | A function called when the user has changed the brush selection. |
BASIC suggester
The basic suggester calls the default suggester bundled with datafari.
The definition looks like this:
Code Block | ||
---|---|---|
| ||
{ "type": "RangeFacet", "field": "page_count", "starttype": "0BASIC", "endprops": "99",{ "gap": "+1", "titlemaxSuggestion": "Page count"5, "yDataKey": "page", "rangeLabeltitle": "Page", "barFillColor": "orange", SUGGESTED QUERIES", "brushStrokeColorsubtitle": "black"Queries extending your current query } |
You get the following result :
...
You can create/extend the actual RangeFacet
component. It is based on the RangeBarChart
component, a customizable react bar chart component, based itself on the https://recharts.org/en-US library.
The RangeBarChart
component can be embed into any other component like the RangeFacet
that displays the graph as a facet with a maximal height. This component uses the following props :
...
Prop name
...
Type
...
Description
...
data
...
Array
...
terms"
}
} |
parameters:
maxSuggestion: The maximum number of suggestion that will be showed in the autocomplete for this suggester
title: the title of the autocomplete section for this suggester
subtitle: the subtitle / helper text of the autocomplete section for this suggester
ENTITY suggester
A suggester designed for entity suggestions. Adds to the query a statement like: field:(“suggestion”).
The definition looks like this:
Code Block | |
---|---|
|
...
| |
{
|
...
|
...
" |
...
Example :
Code Block | ||
---|---|---|
| ||
const chartData = [
{ name: '01/02/2022', doc: 300 },
{ name: '02/02/20222', doc: 145 }
] |
X labels will be based on x_datakey
value. The legend for Y axis will be based on x_datakey
name (not the value!). Each axis is auto scale.
With the previous example, the dates are used for X labels. doc
appears in the legend on top. But you can use any type of values as well :
Code Block | ||
---|---|---|
| ||
const chartData = [
{ index: 1, price: 1000 },
{ index: 2, price: 350 }
] |
...
xDataKey
...
string
...
Name of the field in the data array object for X axis
...
yDataKey
...
string
...
Name of the field in the data array object for Y axis
...
maxHeight
...
number|string
...
Max height of the graph. Default is 100%
...
width
...
number|string
...
Width of the graph. Default is 100%
...
startIndex
...
number
...
Start index of the brush tool
...
endIndex
...
number
...
End index of the brush tool
...
brushStrokeColor
...
string
...
CSS color of the brush tool stroke. Default is #679439
...
barFillColor
...
string
...
CSS color of the chart bar. Default is #679439AA
...
xTickFormater
...
function<value>:string
...
A function that takes the X axis label value and returns a formatted value. Default is undefined.
...
brushLabelFormatter
...
function<value>:string
...
A function that formats the brush label as you will. Default returns the current value
...
onSelectChanged
...
function<startIndex, endIndex>:void
...
type": "ENTITY",
"props": {
"field": "authorTokens",
"suggester": "suggestAuthors",
"dictionary": "suggesterEntityAuthors",
"asFacet": false,
"maxSuggestion": 5,
"title": "Entities suggested",
"subtitle": "Queries extending your current query terms"
}
} |
Parameters:
field: The field containing the entities
suggester: the solr request handler for that suggester
dictionary: the name of the dictionary used in the suggest handler
asFacet: weather the filter is added to the query body (q= parameter) or as an fq.
maxSuggestion: the maximum number of suggestions showed for this section of the autocomplete
title: the title of the autocomplete section for this suggester
subtitle: the subtitle / helper text of the autocomplete section for this suggester
Advanced search
You can decide which fields to display in the advanced search dropdown lists, and which labels to use. For that, please refer to Advanced search - Fixed values list for fields
...