Customizing DatafariUI - Range Facet

Before Datafari 6.2 (not available now)

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

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 :

"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": "RangeFacet",
      "field": "creation_date",
      "start": "NOW-300MONTH",
      "end": "NOW/MONTH",
      "gap": "+1MONTH",
      "title": "Date Range",
      "yDataKey": "doc",
      "ranges": [1, 3, 6, 12, 36],
      "rangeLabel": "Month",
      "showBrushBounds": true
    },
    {
      "type": "RangeFacet",
      "field": "page_count",
      "start": "0",
      "end": "99",
      "gap": "+1",
      "title": "Page count",
      "yDataKey": "page",
      "ranges": [1, 3, 6, 12, 36],
      "rangeLabel": "Page",
      "showBrushBounds": true
    },
    {
      "type": "HierarchicalFacet",
      "field": "urlHierarchy",
      "title": "hierarchical facet",
      "separator": "/"
    },
    {
      "type": "AggregatorFacet",
      "title": "Aggregator facet"
    }
  ]

Example of override default parameters :

{       
 "type": "RangeFacet",
  "field": "page_count",
  "start": "0",
  "end": "99",
  "gap": "+1",
  "title": "Page count",
  "yDataKey": "page",
  "rangeLabel": "Page",
  "barFillColor": "orange",       
  "brushStrokeColor": "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

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 : `{ "x_datakey": "x_value", "y_datakey": "y_value" }` Example : `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 : `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	A function called when the user has changed the brush selection.