<mosaica-field-card>

A card that charts one field's values and filters or highlights by them.

Use a field card on its own when you want one field's chart in a place of your choosing. <mosaica-filter-panel> shows one for each field. Set field to a column meta.filterOperands lists, or to cluster:<layer> for a layer's clusters.

The solid bars count the items in view that the filters match, or the highlighted items while there is a highlight. The pale bars count every item the filters match. Neither count applies the card's own filter, so a value the viewer has filtered out keeps its count.

What the card shows depends on the kind of field:

• A category or cluster card lists the values with most items in view, each with Highlight and Filter buttons.
• A number or date card draws a histogram, and the viewer drags across it to pick a range to filter or highlight by. From the keyboard, they press Shift and the arrow keys on the focused plot, then Enter. Counts over about 100,000 items come from a sample, so they are marked "≈".
• A text or keyword field's card is a search box, <mosaica-filter>.

While the paint button colours the map by the field, clicking a value's colour opens a picker that changes the colour on the map.

import '@mosaicajs/components/field-card';

Attributes

Attribute	Property	Type	Default	Description
field	field	string	''	The field: a column meta.filterOperands lists, or cluster:<layer> for a layer's clusters.
folded	folded	boolean	false	Shows the heading alone, with a small chart of the counts in view.
compact	compact	boolean	false	Draws a folded card in the compact style the explorer uses in narrow containers.
cluster-level	level	number | null	null	The level a card for a layer with levels counts at. null is the coarsest level.
viewer-url	viewerUrl	string	''	The base URL of the Mosaica viewer server, for the store the element builds: a full URL such as https://maps.example.org, or a path such as /mosaica. Unset, the page's own origin. Read only by the map, the explorer and <mosaica-store>. Changing it builds a new store.
token	token	string	''	A viewer token for the store the element builds. Without token or authorise, only an open server (serve.open) answers. Read only by the map, the explorer and <mosaica-store>. Changing it builds a new store.
artifacts-per-tile	artifactsPerTile	number | null	null	The most artifacts one level of a layer shows per map tile, for the store the element builds. Unset, 50, or the server's selection.max_artifacts_per_tile if lower. A value above that maximum is refused. Read only by the map, the explorer and <mosaica-store>. Changing it builds a new store.

Properties

Set as JavaScript properties; they have no attribute.

Property	Type	Default	Description
store	Store | null	null	The store to use, ahead of one from context or one the element would build. The element never disposes it.
authorise	TokenSupplier | null	null	A function that returns a viewer token, used instead of token and called again before the token expires. A different function builds a new store, so keep it stable across renders. Set it together with viewer-url: a store built from viewer-url alone first sends a request with no token, and is replaced when authorise arrives.
activeStore	Store | null	read-only	The store this element is using, or null if it has none.
source	StoreSource	read-only	Where activeStore came from.

Methods

Method	Returns	Description
dispose()	void	Dispose of the store this element built. Removing the element from the page does not, so call this when you are done with the element. A store you passed in is left to you.

Events

Each bubbles and is composed. Events gives each detail.

Event	Fired when
mosaica-filterchange	A row's Highlight or Filter, or the range box, changed the field's clause.
mosaica-clausechange	A cluster row, its Highlight or its Filter put a member_of clause on or took it off.
mosaica-colourchange	The paint button changed what the map is coloured by.
mosaica-levelchange	The Level choice of a levelled layer's card changed.
mosaica-valuecolour	A category value's colour was chosen or reset in the colour picker.
mosaica-clustercolour	A cluster's colour was chosen or reset in the colour picker.
mosaica-fold	The fold button folded or opened the card.

Parts

Styled from outside the element with ::part().

Part	Description
head	The heading: the name, what it notes, and the buttons.
title	The field's name.
sub	What the heading notes: the field's figures, or the Level choice.
level-select	The Level choice, on a levelled layer's card.
spark	The small chart of a folded card.
paint	The paint button, with aria-pressed.
fold	The fold button, with aria-expanded.
rows	A category or cluster card's rows.
row	One row, with data-key and data-state: in if the field's filter keeps the value, out if it leaves it out, lit if it is highlighted, otherwise empty.
swatch	A row's colour button, while the map is coloured by the field. It opens the colour picker. It carries data-unmet, and is drawn as an outline, for a value the map has not drawn yet and so has not given a colour.
name	A row's name, with data-unnamed for a cluster that has none.
path	A cluster row's parents.
bar-match	A row's or a bin's pale bar, its share of the whole match.
bar-subject	A row's or a bin's solid bar, its share of the subject.
count	A row's counts.
verbs	A row's Highlight and Filter buttons.
highlight	A row's Highlight button, with aria-pressed.
filter	A row's Filter button, with aria-pressed.
more	The "N more" button.
plot	The histogram, a focusable group.
bin	One bin, with data-index.
band	An outlined range on the histogram, with data-verb (filter, highlight, or brush while one is being chosen).
axis	The values under the histogram.
ramp	The colour ramp under the histogram, while the map is coloured by the field.
brush	The box a dragged range opens.
brush-filter	Its Filter button.
brush-highlight	Its Highlight button.
colour-popover	The colour picker, while it is open.
choice	A colour in the picker's palette rows, with aria-pressed.
sv	The picker's saturation and brightness area, a slider in two directions.
hue	The picker's hue bar, a slider.
hex	The picker's hex field.
reset	The picker's Reset button.
filter-<part>	A part of the inner <mosaica-filter>.
cluster-filter-<part>	A part of the inner <mosaica-cluster-filter>.

CSS custom properties

The theme tokens apply to this element.