Marker Scores

Marker Scores React component displays a histogram of provided classification marker type scores (e.g. similarity, distance, crop group, land cover group) for selected FOI.

Marker Scores

Marker scores API

Usage

<MarkerScores
markerServiceUrl="http://d5.docker.sinergise.com:12320/marker/"
amServicesAuthToken={AMServicesAuthToken}
scope="SI19"
inferenceId="SI19.INFERENCE.65"
markerId="SI19.MARKER.65-4088911"
title="Similarity marker"
width="150"
height="600"
chartOptions={
showDataLabels: true;
}
/>

Component name

The component name MarkerScores should be used when providing the props.

Props

The props of the Marker Scores React component are described in the table below.

NameTypeDefaultDescription
scope*stringReference data differentiator (e.g. SI22). For more details see the scope.
amServicesAuthToken*string or callback (() => string)AM services authentication token. Either as a string or a function that returns a string.
markerServiceUrl*stringThe (base) URL (e.g. https://am-pilot.sinergise.com/marker/) at which the endpoints for marker service are.
inferenceId*stringInference ID (e.g. SI19.INFERENCE.65) of classification marker type.
markerIdmarkerId*stringMarker ID (e.g. SI19.MARKER.65-4088911) for which we want to display scores.
widthnumber or string100%Width (e.g. 300) of the component in pixels.
heightnumber or string100%Height (e.g. 300) of the component in pixels.
languagestringenThe selected language. Available options: sl - Slovenian, en - English, de - German
titlestringTitle of the component displayed above chart. If not provided no title is shown.
chartOptionsobjectDefinition of chart options. For more details see chart options API in the marker scores API component.
barColorsobjectDefinition of histogram bars colors. For more details see the bar colors API in the marker scores API component.

* indicates mandatory props

Chart options API in the marker scores API component

The chartOptions prop is an object that defines chart options.

PropertyTypeDescription
showDataLabels*booleanIndicates if labels should be shown inside the bar.

* indicates mandatory properties

Example chartOptions:

{
showDataLabels: true;
}

Bar colors API in the marker scores API component

The barColors prop is an object that defines histogram bars colors.

PropertyTypeDescription
classification*objectColor of bar representing a marker score with the same classification as provided marker.
declaredAs*objectColor of bar representing a marker score with the same declaredAs as a provided marker.
default*objectColor of bars representing the remainder of marker scores.

* indicates mandatory properties

Example barColors:

{
classification: {
fill: '#bbbf3690',
},
declaredAs: {
fill: '#2e80b990',
},
default: {
fill: '#bbd5e890',
},
}