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 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.

Name	Type	Default	Description
`scope`*	`string`		Reference 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`*	`string`		The (base) URL (e.g. `https://am-pilot.sinergise.com/marker/`) at which the endpoints for marker service are.
`inferenceId`*	`string`		Inference ID (e.g. `SI19.INFERENCE.65`) of classification marker type.
`markerIdmarkerId`*	`string`		Marker ID (e.g. `SI19.MARKER.65-4088911`) for which we want to display scores.
`width`	`number` or `string`	`100%`	Width (e.g. `300`) of the component in pixels.
`height`	`number` or `string`	`100%`	Height (e.g. `300`) of the component in pixels.
`language`	`string`	`en`	The selected language. Available options: `sl` - Slovenian, `en` - English, `de` - German
`title`	`string`		Title of the component displayed above chart. If not provided no title is shown.
`chartOptions`	`object`		Definition of chart options. For more details see chart options API in the marker scores API component.
`barColors`	`object`		Definition 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.

Property	Type	Description
`showDataLabels`*	`boolean`	Indicates 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.

Property	Type	Description
`classification`*	`object`	Color of bar representing a marker score with the same classification as provided marker.
`declaredAs`*	`object`	Color of bar representing a marker score with the same `declaredAs` as a provided marker.
`default`*	`object`	Color of bars representing the remainder of marker scores.

* indicates mandatory properties

Example barColors:

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